/* DAH-HM | Legacy-News | Automatische Beitragsdarstellung | CSS | Version 1.14 | Stand 20.08.2026 */
/* =========================================================
   Projekt/Seite: Automatische Darstellung alter News-Beiträge
   Abschnitt: Einzelbeitrag / Legacy-Adapter
   Codeart: CSS
   Version: 1.14
   Stand: 20.08.2026
   Zielumgebung: PRD-Child-Theme
   Zieldatei im Child-Theme: dah-hm-legacy-news.css
   Diff zu CSS 1.13:
   - Ausschließlich Zielumgebung im Dateikopf von DEV auf PRD korrigiert.
   - CSS-Logik vollständig unverändert.
   Obergruppe: .dah-beitrag-standard.dah-beitrag-redaktionell
   Zielgruppe: alte Einzelbeiträge der Kategorie News
   HTML-Objekt: nicht vorhanden; Child-Theme-Datei
   Relevante Klassen: .dah-beitrag-redaktionell-hero,
                      .dah-beitrag-redaktionell-hero__media,
                      .dah-beitrag-redaktionell-hero__media--small-image,
                      .dah-beitrag-redaktionell-content-frame,
                      .dah-beitrag-redaktionell-beitrag
   Kategorie: News

   Aufgabe:
   - Alte News-Einzelbeiträge ohne manuelle Gutenberg-Umstellung im
     aktuellen redaktionellen DAH-HM-Design darstellen.
   - Sehr kleine Legacy-Beitragsbilder defensiv behandeln, ohne sie auf die
     normale 300-px-Medienfläche hochzuskalieren.
   - Bei Heroes mit Beitragsbild die linke Grid-Spalte an die tatsächliche
     Medienbreite koppeln, damit lange Beitragstitel mehr nutzbare Breite
     erhalten und sauberer umbrechen.
   - Beitragstitel im rechten Hero-Bereich horizontal zentrieren.
   - Den roten Divider auf derselben Mittelachse unter dem Titel ausrichten.
   - Die vom JavaScript eingefügte Titelgliederung nach dem ersten
     Doppelpunkt sowie geschützte Bindestrich-Wörter gestalterisch absichern.
   - Ausschließlich die vom PHP-/JavaScript-Adapter erzeugte, bestätigte
     redaktionelle Klassenstruktur gestalten.

   Grundlage / Vergleich:
   - dah_hm_legacy_news_css_1.12.txt als unmittelbare Vorgängerversion.
   - beitrag_redaktionell_hero_css_1.3.txt.
   - beitrag_sponsor_spendenempfaenger_hero_css_1.4.txt als approved
     Referenz für quadratische Medienrahmen und contain-Darstellung.
   - beitrag_redaktionell_inhaltsrahmen_css_1.0.txt.
   - beitrag_redaktionell_design_css_1.29.txt.

   Umsetzung:
   - Die bestehende Full-Bild-/scale-down-Logik aus CSS 1.11 bleibt für
     normale und große Beitragsbilder unverändert.
   - Die approved Small-Image-Logik aus CSS 1.11 bleibt unverändert.
   - Bei Heroes mit normalem Beitragsbild belegt die linke Grid-Spalte jetzt
     maximal die bestätigte Medienbreite von 300 px; die Titelspalte erhält
     den vollständigen verbleibenden Platz.
   - Bei .dah-beitrag-redaktionell-hero__media--small-image wird die linke
     Grid-Spalte passend zum kompakten Medienrahmen auf 160 px begrenzt.
   - Beitragstitel und roter Divider werden innerhalb der Titelspalte
     gemeinsam horizontal zentriert.
   - text-wrap: balance und aggressives overflow-wrap: anywhere werden
     entfernt; normale Wortumbrüche bleiben erhalten.
   - Ein vom JavaScript nach dem ersten Doppelpunkt gesetzter Zeilenumbruch
     wird respektiert; explizit bindestrichverbundene Wörter können über
     .dah-beitrag-redaktionell-hero__title-nowrap zusammengehalten werden.
   - Die einspaltige Responsive-Umschaltung bis 700 px wird für normale
     und kleine Beitragsbilder ausdrücklich beibehalten; No-Image-Logik,
     Inhaltsrahmen und Beitragsdesign bleiben unverändert.

   Diff zu CSS 1.12:
   - Beitragstitel bei Heroes mit Beitragsbild von linksbündig auf zentriert
     umgestellt; Divider bleibt auf derselben Mittelachse zentriert.
   - text-wrap: balance entfernt und Titelumbruch auf normales Wrap-Verhalten
     mit overflow-wrap: break-word / word-break: normal umgestellt.
   - CSS-Klassen für den JavaScript-Titelumbruch nach dem ersten Doppelpunkt
     und für nicht trennbare Bindestrich-Wörter ergänzt.
   - Grid-, Small-Image-, Full-Bild-/scale-down-, No-Image-, Inhaltsrahmen-
     und Beitragslogik bleiben unverändert.
   ========================================================= */

/* DAH-HM | Redaktionelle Beitragsvorlage | Hero | CSS | Version 1.3 | Stand 16.08.2026 */
/* =========================================================
   Projekt/Seite: Redaktionelle Beitragsvorlage
   Abschnitt/Gutenberg-Gruppe: Gruppe -HERO-
   Codeart: CSS
   Version: 1.3
   Stand: 16.08.2026
   Obergruppe: .dah-beitrag-standard.dah-beitrag-redaktionell
   Zielgruppe: .dah-beitrag-redaktionell-hero
   HTML-Objekt: HTML -HERO-

   Aufgabe:
   - Neuen redaktionellen Hero getrennt vom eigentlichen Beitragsinhalt gestalten.
   - Natives WordPress-Beitragsbild links kompakt darstellen.
   - Nativen WordPress-Beitragstitel und Metadaten rechts darstellen.
   - Beitragstitel mit rotem Divider an die aktuelle DAH-HM-Designfamilie angleichen.
   - Auf Smartphone-Breiten Bild und Beitragskopf untereinander anordnen.
   - Autor weiterhin ausblenden.
   - Keine Post-ID- oder Slug-Erkennung; Scope ausschließlich über die bestätigte
     Gutenberg-Obergruppe und Hero-Gruppe.

   Grundlage / Vergleich:
   - beitrag_redaktionell_design_css_1.23.txt als bisheriger produktiver Gesamtstand.
   - turniermodus_hero_css_1.5.txt und turnierrichtlinien_hero_css_2.5.txt als
     freigegebene Referenzen für Hero-Akzent, Radius, Schatten und Divider.

   Hinweis zur Übergangsphase:
   - Das bisherige Beitragsdesign CSS 1.23 bleibt für den eigentlichen Beitrag
     zunächst bestehen.
   - Dieses Hero-CSS neutralisiert deshalb nur die alten äußeren Beitrags-/Kopf-
     Regeln, die dem neuen getrennten Hero technisch entgegenstehen.

   Diff zu CSS 1.2:
   - Beitragsbild nochmals leicht verkleinert.
   - Desktop-Maximalbreite von 315 px auf 300 px reduziert.
   - Tablet-Maximalbreite von 285 px auf 270 px reduziert.
   - Kleine Smartphones von 245 px auf 235 px reduziert.
   - Ausfüllendes Bildverhalten, Hero-Aufbau und übrige Gestaltung bleiben unverändert.
   ========================================================= */

.dah-beitrag-standard.dah-beitrag-redaktionell {
    --dah-redbeitrag-red: #e90000;
    --dah-redbeitrag-red-dark: #b90000;
    --dah-redbeitrag-blue: #4488cc;
    --dah-redbeitrag-blue-dark: #2f5f89;
    --dah-redbeitrag-darkgray: #444444;
    --dah-redbeitrag-text: #252525;
    --dah-redbeitrag-text-soft: #50565d;
    --dah-redbeitrag-border: #e1e6eb;

    container-type: inline-size;
    container-name: dah-redbeitrag-page;
}

.dah-beitrag-standard.dah-beitrag-redaktionell,
.dah-beitrag-standard.dah-beitrag-redaktionell *,
.dah-beitrag-standard.dah-beitrag-redaktionell *::before,
.dah-beitrag-standard.dah-beitrag-redaktionell *::after {
    box-sizing: border-box;
}

/* =========================================================
   ÜBERGANG VOM ALTEN GESAMTRAHMEN ZUR GETRENNTEN STRUKTUR
   Hero und Beitrag sind jetzt eigenständige Gutenberg-Bereiche.
   ========================================================= */

body.single-post article.type-post:has(.dah-beitrag-standard.dah-beitrag-redaktionell) {
    width: min(100%, 1040px) !important;
    max-width: 1040px !important;
    margin: 0 auto 38px !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.single-post article.type-post:has(.dah-beitrag-standard.dah-beitrag-redaktionell)
.post-content {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    row-gap: 0 !important;
}

body.single-post article.type-post:has(.dah-beitrag-standard.dah-beitrag-redaktionell)
.entry-content {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* =========================================================
   HERO-GRUPPE
   ========================================================= */

.dah-beitrag-redaktionell-hero {
    position: relative;
    --dah-redbeitrag-media-max: 300px;
    width: 100%;
    max-width: none !important;
    margin: 0 0 30px !important;
    padding: 0 !important;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 92% 12%,
            rgba(233, 0, 0, 0.075) 0,
            rgba(233, 0, 0, 0) 30%
        ),
        linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
    border: 1px solid var(--dah-redbeitrag-border);
    border-left: 6px solid var(--dah-redbeitrag-red);
    border-radius: 22px;
    box-shadow:
        0 14px 38px rgba(0, 0, 0, 0.075),
        0 3px 10px rgba(0, 0, 0, 0.035);
    container-type: inline-size;
    container-name: dah-redbeitrag-hero;
}

.dah-beitrag-redaktionell-hero::after {
    content: "";
    position: absolute;
    right: -85px;
    bottom: -105px;
    width: 230px;
    height: 230px;
    border: 34px solid rgba(68, 136, 204, 0.045);
    border-radius: 50%;
    pointer-events: none;
}

.dah-beitrag-redaktionell-hero
> .wp-block-group__inner-container {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, var(--dah-redbeitrag-media-max)) minmax(0, 1fr);
    align-items: center;
    gap: clamp(24px, 4cqi, 42px);
    width: 100%;
    max-width: none !important;
    margin: 0 !important;
    padding:
        clamp(24px, 4cqi, 38px)
        clamp(24px, 5cqi, 48px) !important;
}

/* Das leere HTML-Objekt bleibt ausschließlich technischer Code-Träger. */
.dah-beitrag-redaktionell-hero
> .wp-block-group__inner-container
> .wp-block-html:empty,
.dah-beitrag-redaktionell-hero
> .wp-block-group__inner-container
> .wp-block-html:not(:has(*)) {
    display: none !important;
}

/* =========================================================
   DYNAMISCHES WORDPRESS-BEITRAGSBILD IM HERO
   ========================================================= */

.dah-beitrag-redaktionell-hero__media {
    position: relative;
    z-index: 2;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: min(100%, var(--dah-redbeitrag-media-max)) !important;
    max-width: var(--dah-redbeitrag-media-max) !important;
    aspect-ratio: 1 / 1;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden;
    background: #ffffff !important;
    border: 1px solid rgba(68, 136, 204, 0.18) !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 26px rgba(32, 33, 36, 0.08) !important;
}

.dah-beitrag-redaktionell-hero__media.wp-post-image {
    padding: 0 !important;
}

body.single-post article.type-post:has(.dah-beitrag-standard.dah-beitrag-redaktionell)
.dah-beitrag-redaktionell-hero__media:not(.wp-post-image)
.wp-post-image {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: scale-down !important;
    object-position: center !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.single-post article.type-post:has(.dah-beitrag-standard.dah-beitrag-redaktionell)
img.dah-beitrag-redaktionell-hero__media.wp-post-image {
    display: block !important;
    width: min(100%, var(--dah-redbeitrag-media-max)) !important;
    max-width: var(--dah-redbeitrag-media-max) !important;
    aspect-ratio: 1 / 1;
    height: auto !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    object-fit: scale-down !important;
    object-position: center !important;
    background: #ffffff !important;
    border: 1px solid rgba(68, 136, 204, 0.18) !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 26px rgba(32, 33, 36, 0.08) !important;
}

/* =========================================================
   KLEINE LEGACY-BEITRAGSBILDER
   JavaScript 1.2 setzt die Zustandsklasse nur bei einer
   natürlichen Bildgröße bis einschließlich 180 x 180 px.
   ========================================================= */

.dah-beitrag-redaktionell-hero__media.dah-beitrag-redaktionell-hero__media--small-image:not(.wp-post-image) {
    width: min(100%, 160px) !important;
    max-width: 160px !important;
}

body.single-post article.type-post:has(.dah-beitrag-standard.dah-beitrag-redaktionell)
.dah-beitrag-redaktionell-hero__media.dah-beitrag-redaktionell-hero__media--small-image:not(.wp-post-image)
.wp-post-image {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
}

body.single-post article.type-post:has(.dah-beitrag-standard.dah-beitrag-redaktionell)
img.dah-beitrag-redaktionell-hero__media.dah-beitrag-redaktionell-hero__media--small-image.wp-post-image {
    width: auto !important;
    max-width: 160px !important;
    aspect-ratio: auto;
    height: auto !important;
    max-height: 160px !important;
    object-fit: contain !important;
    object-position: center !important;
}

/* =========================================================
   DYNAMISCHER WORDPRESS-BEITRAGSKOPF IM HERO
   ========================================================= */

.dah-beitrag-redaktionell-hero__content {
    position: relative !important;
    z-index: 2;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    text-align: left !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.dah-beitrag-redaktionell-hero__content
.entry-title,
.dah-beitrag-redaktionell-hero__content
h1.entry-title {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--dah-redbeitrag-blue-dark) !important;
    font-family: inherit;
    font-size: clamp(1.8rem, 4.4cqi, 2.65rem) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.03em;
    text-align: center !important;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
    text-wrap: wrap;
}

.dah-beitrag-redaktionell-hero__content
.entry-title
.dah-beitrag-redaktionell-hero__title-prefix,
.dah-beitrag-redaktionell-hero__content
.entry-title
.dah-beitrag-redaktionell-hero__title-nowrap {
    white-space: nowrap;
}

.dah-beitrag-redaktionell-hero__content
.entry-title::after,
.dah-beitrag-redaktionell-hero__content
h1.entry-title::after {
    content: "";
    display: block;
    width: 58px;
    height: 4px;
    margin: 18px 0 14px;
    background: linear-gradient(
        90deg,
        var(--dah-redbeitrag-red) 0%,
        var(--dah-redbeitrag-red-dark) 100%
    );
    border-radius: 999px;
}

.dah-beitrag-redaktionell-hero__content
.entry-meta {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--dah-redbeitrag-text-soft) !important;
    font-size: 0.84rem !important;
    font-weight: 650;
    line-height: 1.45;
}

.dah-beitrag-redaktionell-hero__content
.entry-meta a {
    color: var(--dah-redbeitrag-blue-dark) !important;
    text-decoration: none !important;
}

.dah-beitrag-redaktionell-hero__content
.entry-meta a:hover,
.dah-beitrag-redaktionell-hero__content
.entry-meta a:focus-visible {
    color: var(--dah-redbeitrag-red-dark) !important;
}

/* Autorenangaben bleiben wie im bisherigen produktiven Beitragsdesign verborgen. */
body.single-post article.type-post:has(.dah-beitrag-standard.dah-beitrag-redaktionell)
.byline,
body.single-post article.type-post:has(.dah-beitrag-standard.dah-beitrag-redaktionell)
.author,
body.single-post article.type-post:has(.dah-beitrag-standard.dah-beitrag-redaktionell)
.meta-author,
body.single-post article.type-post:has(.dah-beitrag-standard.dah-beitrag-redaktionell)
.entry-meta-author,
body.single-post article.type-post:has(.dah-beitrag-standard.dah-beitrag-redaktionell)
.author-meta,
body.single-post article.type-post:has(.dah-beitrag-standard.dah-beitrag-redaktionell)
.posted-by {
    display: none !important;
}

/* =========================================================
   LEGACY-HERO OHNE BEITRAGSBILD
   Tatsächliches DEV-DOM:
   .dah-beitrag-redaktionell-hero
   > .wp-block-group__inner-container
     > .dah-beitrag-redaktionell-hero__media (optional)
     > .dah-beitrag-redaktionell-hero__content
   ========================================================= */

/* Ohne Beitragsbild: einspaltig und vollständig zentriert. */
.dah-beitrag-redaktionell-hero
> .wp-block-group__inner-container:not(:has(.dah-beitrag-redaktionell-hero__media)) {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 0;
}

.dah-beitrag-redaktionell-hero
> .wp-block-group__inner-container:not(:has(.dah-beitrag-redaktionell-hero__media))
> .dah-beitrag-redaktionell-hero__content {
    align-items: center;
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    text-align: center !important;
}

.dah-beitrag-redaktionell-hero
> .wp-block-group__inner-container:not(:has(.dah-beitrag-redaktionell-hero__media))
> .dah-beitrag-redaktionell-hero__content
.entry-title,
.dah-beitrag-redaktionell-hero
> .wp-block-group__inner-container:not(:has(.dah-beitrag-redaktionell-hero__media))
> .dah-beitrag-redaktionell-hero__content
h1.entry-title {
    text-align: center !important;
}

.dah-beitrag-redaktionell-hero
> .wp-block-group__inner-container:not(:has(.dah-beitrag-redaktionell-hero__media))
> .dah-beitrag-redaktionell-hero__content
.entry-title::after,
.dah-beitrag-redaktionell-hero
> .wp-block-group__inner-container:not(:has(.dah-beitrag-redaktionell-hero__media))
> .dah-beitrag-redaktionell-hero__content
h1.entry-title::after {
    margin-right: auto;
    margin-left: auto;
}

.dah-beitrag-redaktionell-hero
> .wp-block-group__inner-container:not(:has(.dah-beitrag-redaktionell-hero__media))
> .dah-beitrag-redaktionell-hero__content
.entry-meta {
    justify-content: center;
    text-align: center;
}

/* Mit Beitragsbild: approved Zweispaltenzustand ausdrücklich absichern. */
.dah-beitrag-redaktionell-hero
> .wp-block-group__inner-container:has(.dah-beitrag-redaktionell-hero__media) {
    grid-template-columns: minmax(0, var(--dah-redbeitrag-media-max)) minmax(0, 1fr);
    justify-items: stretch;
    gap: clamp(24px, 4cqi, 42px);
}

/* Small Image: linke Grid-Spalte an den kompakten Medienrahmen koppeln. */
.dah-beitrag-redaktionell-hero
> .wp-block-group__inner-container:has(.dah-beitrag-redaktionell-hero__media--small-image) {
    grid-template-columns: minmax(0, 160px) minmax(0, 1fr);
}

.dah-beitrag-redaktionell-hero
> .wp-block-group__inner-container:has(.dah-beitrag-redaktionell-hero__media)
> .dah-beitrag-redaktionell-hero__content {
    align-items: stretch;
    text-align: left !important;
}

.dah-beitrag-redaktionell-hero
> .wp-block-group__inner-container:has(.dah-beitrag-redaktionell-hero__media)
> .dah-beitrag-redaktionell-hero__content
.entry-title,
.dah-beitrag-redaktionell-hero
> .wp-block-group__inner-container:has(.dah-beitrag-redaktionell-hero__media)
> .dah-beitrag-redaktionell-hero__content
h1.entry-title {
    text-align: center !important;
}

.dah-beitrag-redaktionell-hero
> .wp-block-group__inner-container:has(.dah-beitrag-redaktionell-hero__media)
> .dah-beitrag-redaktionell-hero__content
.entry-title::after,
.dah-beitrag-redaktionell-hero
> .wp-block-group__inner-container:has(.dah-beitrag-redaktionell-hero__media)
> .dah-beitrag-redaktionell-hero__content
h1.entry-title::after {
    margin-right: auto;
    margin-left: auto;
}

.dah-beitrag-redaktionell-hero
> .wp-block-group__inner-container:has(.dah-beitrag-redaktionell-hero__media)
> .dah-beitrag-redaktionell-hero__content
.entry-meta {
    justify-content: flex-start;
    text-align: left;
}

/* =========================================================
   RESPONSIVE HERO
   ========================================================= */

@container dah-redbeitrag-hero (max-width: 700px) {
    .dah-beitrag-redaktionell-hero {
        --dah-redbeitrag-media-max: 270px;
    }

    .dah-beitrag-redaktionell-hero
    > .wp-block-group__inner-container,
    .dah-beitrag-redaktionell-hero
    > .wp-block-group__inner-container:has(.dah-beitrag-redaktionell-hero__media),
    .dah-beitrag-redaktionell-hero
    > .wp-block-group__inner-container:has(.dah-beitrag-redaktionell-hero__media--small-image) {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 26px 24px 28px !important;
    }

    .dah-beitrag-redaktionell-hero__media
    .wp-post-image,
    .dah-beitrag-redaktionell-hero
    img.dah-beitrag-redaktionell-hero__media.wp-post-image {
        max-width: 100% !important;
        max-height: 100% !important;
    }

    .dah-beitrag-redaktionell-hero__content {
        align-items: center;
        text-align: center !important;
    }

    .dah-beitrag-redaktionell-hero__content
    .entry-title,
    .dah-beitrag-redaktionell-hero__content
    h1.entry-title {
        font-size: clamp(1.55rem, 7cqi, 2rem) !important;
        text-align: center !important;
    }

    .dah-beitrag-redaktionell-hero__content
    .entry-title::after,
    .dah-beitrag-redaktionell-hero__content
    h1.entry-title::after {
        margin-right: auto;
        margin-left: auto;
    }

    .dah-beitrag-redaktionell-hero__content
    .entry-meta {
        justify-content: center;
        text-align: center;
    }
}

@container dah-redbeitrag-hero (max-width: 420px) {
    .dah-beitrag-redaktionell-hero {
        --dah-redbeitrag-media-max: 235px;
        border-left-width: 5px;
        border-radius: 16px;
    }

    .dah-beitrag-redaktionell-hero
    > .wp-block-group__inner-container {
        gap: 19px;
        padding: 20px 16px 22px !important;
    }

    .dah-beitrag-redaktionell-hero__media {
        padding: 0 !important;
        border-radius: 15px !important;
    }

    .dah-beitrag-redaktionell-hero__media
    .wp-post-image,
    .dah-beitrag-redaktionell-hero
    img.dah-beitrag-redaktionell-hero__media.wp-post-image {
        max-width: 100% !important;
        max-height: 100% !important;
    }

    .dah-beitrag-redaktionell-hero__content
    .entry-title,
    .dah-beitrag-redaktionell-hero__content
    h1.entry-title {
        font-size: 1.45rem !important;
        line-height: 1.14 !important;
    }

    .dah-beitrag-redaktionell-hero__content
    .entry-title::after,
    .dah-beitrag-redaktionell-hero__content
    h1.entry-title::after {
        width: 50px;
        height: 3px;
        margin-top: 15px;
        margin-bottom: 12px;
    }

    .dah-beitrag-redaktionell-hero__content
    .entry-meta {
        font-size: 0.76rem !important;
    }
}


/* DAH-HM | Redaktionelle Beitragsvorlage | Inhaltsrahmen | CSS | Version 1.0 | Stand 16.08.2026 */
/* =========================================================
   Projekt/Seite: Redaktionelle Beitragsvorlage
   Abschnitt/Gutenberg-Gruppe: Gruppe -INHALTSRAHMEN-
   Codeart: CSS
   Version: 1.0
   Stand: 16.08.2026
   Obergruppe: .dah-beitrag-standard.dah-beitrag-redaktionell
   Zielgruppe: .dah-beitrag-redaktionell-content-frame
   HTML-Objekt: HTML -INHALTSRAHMEN-

   Aufgabe:
   - Eigenständigen äußeren Inhaltsrahmen für den redaktionellen
     Beitragsbereich unterhalb des neuen Hero bereitstellen.
   - Gruppe -BEITRAG- auf die vollständige verfügbare Breite setzen.
   - Aktuelle DAH-HM-Inhaltsrahmen-Designfamilie mit blauem linken
     Hauptakzent, hellem Verlauf, Radius und Schatten verwenden.
   - Den bereits durch Hero CSS 1.3 bereitgestellten Abstand zwischen
     Hero und Inhaltsrahmen nicht verdoppeln.
   - Responsive Innenabstände für Desktop, Tablet, Smartphone und
     kleine Smartphones abbilden.

   Grundlage / Vergleich:
   - beitrag_redaktionell_design_css_1.23.txt als bisheriger produktiver
     Gesamtstand des redaktionellen Beitrags.
   - beitrag_redaktionell_hero_css_1.3.txt als freigegebener neuer Hero.
   - blogs_inhaltsrahmen_css_1.0.txt und
     turniermodus_inhaltsrahmen_css_1.1.txt als freigegebene Referenzen
     für den aktuellen DAH-HM-Inhaltsrahmen.

   Versionshinweis:
   - Neue Codeart für die neu eingeführte Gruppe -INHALTSRAHMEN-;
     kein Vorgänger.
   - HTML -INHALTSRAHMEN- bleibt leer und dient ausschließlich als
     technischer CSS-Träger.
   - Gruppe -BEITRAG- und deren Beitragsdesign werden durch diese
     Version noch nicht inhaltlich oder typografisch verändert.
   ========================================================= */

.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-content-frame {
    --dah-redbeitrag-frame-blue: #40709b;
    --dah-redbeitrag-frame-border: #e1e6eb;

    position: relative;
    width: 100%;
    max-width: none !important;
    margin: 0 !important;
    padding: 22px 34px 34px;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 92% 8%,
            rgba(64, 112, 155, 0.07) 0,
            rgba(64, 112, 155, 0) 32%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #ffffff 70%,
            #f6f9fc 100%
        );

    border: 1px solid var(--dah-redbeitrag-frame-border);
    border-left: 6px solid var(--dah-redbeitrag-frame-blue);
    border-radius: 22px;
    box-shadow: 0 12px 30px rgba(32, 33, 36, 0.065);
    box-sizing: border-box;

    container-type: inline-size;
    container-name:
        dah-redbeitrag-content-frame-container
        dah-redbeitrag-content-container;
}

.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-content-frame,
.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-content-frame *,
.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-content-frame *::before,
.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-content-frame *::after {
    box-sizing: border-box;
}

/* Gutenberg-Innencontainer auf die vollständige Kachelbreite setzen. */
.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-content-frame
> .wp-block-group__inner-container {
    width: 100%;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Direkte Gutenberg-Blöcke, insbesondere Gruppe -BEITRAG-,
   nicht durch Theme- oder Gutenberg-Breitenbegrenzungen einschränken. */
.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-content-frame
> .wp-block-group__inner-container
> * {
    width: 100%;
    max-width: none !important;
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

/* Das leere HTML-Objekt dient ausschließlich als CSS-Träger. */
.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-content-frame
.wp-block-html:empty,
.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-content-frame
.wp-block-html:not(:has(*)) {
    display: none !important;
}

/* =========================================================
   MITTLERE DESKTOPBREITEN
   ========================================================= */

@media screen and (max-width: 1100px) {
    .dah-beitrag-standard.dah-beitrag-redaktionell
    .dah-beitrag-redaktionell-content-frame {
        padding: 20px 30px 30px;
        border-radius: 21px;
    }
}

/* =========================================================
   TABLET
   ========================================================= */

@media screen and (max-width: 760px) {
    .dah-beitrag-standard.dah-beitrag-redaktionell
    .dah-beitrag-redaktionell-content-frame {
        padding: 18px 22px 26px;
        border-radius: 20px;
    }
}

/* =========================================================
   SMARTPHONE
   ========================================================= */

@media screen and (max-width: 520px) {
    .dah-beitrag-standard.dah-beitrag-redaktionell
    .dah-beitrag-redaktionell-content-frame {
        padding: 16px 16px 22px;
        border-left-width: 5px;
        border-radius: 18px;
        box-shadow: 0 9px 22px rgba(32, 33, 36, 0.055);
    }
}

/* =========================================================
   KLEINE SMARTPHONES
   ========================================================= */

@media screen and (max-width: 380px) {
    .dah-beitrag-standard.dah-beitrag-redaktionell
    .dah-beitrag-redaktionell-content-frame {
        padding: 14px 12px 18px;
        border-radius: 16px;
        box-shadow: 0 7px 18px rgba(32, 33, 36, 0.05);
    }
}


/* DAH-HM | Redaktionelle Beitragsvorlage | Beitragsdesign | CSS | Version 1.29 | Stand 16.08.2026 */
/* =========================================================
   Projekt/Seite: Redaktionelle Beitragsvorlage
   Abschnitt/Gutenberg-Gruppe: Gruppe -BEITRAG-
   Codeart: CSS
   Version: 1.29
   Stand: 16.08.2026
   Obergruppe: .dah-beitrag-standard.dah-beitrag-redaktionell
   Zielgruppe: .dah-beitrag-redaktionell-beitrag
   HTML-Objekt: HTML -BEITRAGSDESIGN-

   Aufgabe:
   - Bisheriges Gesamt-Beitragsdesign auf den eigentlichen redaktionellen
     Beitragsinhalt begrenzen.
   - Hero und Inhaltsrahmen vollständig aus diesem CSS herauslösen.
   - Gruppe -BEITRAG- als eigenständige innere Inhaltskachel mit
     DAH-HM-grauem Akzent gestalten.
   - Bestehende Typografie und Blockgestaltung für Absätze, Überschriften,
     Listen, Zitate, Links, Buttons, Bilder, Tabellen und Shortcodes
     aus dem freigegebenen CSS 1.23 erhalten und auf die neue
     Beitragsgruppe scopen.
   - Theme-Beitragsfuß weiterhin dezent und ohne zusätzliche Trennlinie
     darstellen.

   Grundlage / Vergleich:
   - beitrag_redaktionell_design_css_1.23.txt als letzter freigegebener
     produktiver Gesamtstand.
   - beitrag_redaktionell_hero_css_1.3.txt als freigegebener Hero.
   - beitrag_redaktionell_inhaltsrahmen_css_1.0.txt als bestätigter
     neuer Inhaltsrahmen.

   Versionshinweis:
   - CSS 1.24 bis 1.27 wurden bereits ausgegeben und verworfen; diese
     Versionsnummern bleiben verbraucht.
   - Die verworfene CSS 1.27 ist nicht Bestandteil des verbindlichen
     Produktionsbestands und wird nicht rekonstruiert.
   - Funktionaler Alt-Neu-Vergleich erfolgt deshalb gegen CSS 1.23.

   Diff zur unmittelbar vorherigen Ausgabe CSS 1.28:
   - Ausschließlich die graue linke Akzentkante der Beitragskachel auf
     den aktuellen DAH-HM-Standard korrigiert.
   - Desktop/Tablet: 5 px -> 3 px.
   - Smartphone bis 440 px: 4 px -> 2 px.
   - Alle übrigen Regeln gegenüber CSS 1.28 unverändert.
   ========================================================= */

.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag {
    --dah-redbeitrag-content-red: #e90000;
    --dah-redbeitrag-content-red-dark: #b90000;
    --dah-redbeitrag-content-blue-dark: #2f5f89;
    --dah-redbeitrag-content-gold: #e6ad00;
    --dah-redbeitrag-content-darkgray: #444444;
    --dah-redbeitrag-content-text: #252525;
    --dah-redbeitrag-content-text-soft: #50565d;
    --dah-redbeitrag-content-border: #e1e6eb;
    --dah-redbeitrag-content-surface: #f5f9fc;

    position: relative;
    width: 100%;
    max-width: none !important;
    margin: 0 !important;
    padding: clamp(18px, 2.2cqi, 20px) clamp(22px, 3.6cqi, 34px) clamp(28px, 3.8cqi, 36px) !important;
    color: var(--dah-redbeitrag-content-text);
    background: #ffffff;
    border: 1px solid var(--dah-redbeitrag-content-border);
    border-left: 3px solid var(--dah-redbeitrag-content-darkgray);
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(32, 33, 36, 0.06);
    box-sizing: border-box;

    container-type: inline-size;
    container-name: dah-redbeitrag-beitrag;
}

.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag,
.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag *,
.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag *::before,
.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag *::after {
    box-sizing: border-box;
}

.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag
> .wp-block-group__inner-container {
    width: 100%;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Das HTML-Objekt bleibt ausschließlich technischer CSS-Träger. */
.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag
.wp-block-html:empty,
.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag
.wp-block-html:not(:has(*)) {
    display: none !important;
}

/* Direkte Inhaltsblöcke nutzen die vollständige verfügbare Breite. */
.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag
> .wp-block-group__inner-container
> *:not(.wp-block-html),
.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag
> *:not(.wp-block-html) {
    width: 100%;
    max-width: none;
    margin-right: 0;
    margin-left: 0;
}

.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag
:is(
    figure,
    .wp-block-image,
    .wp-block-gallery,
    .wp-block-columns,
    .wp-block-table,
    .wp-block-shortcode,
    .wp-block-embed,
    .wp-block-cover,
    .wp-block-media-text,
    .wp-block-buttons,
    .wp-block-separator
) {
    width: 100%;
    max-width: none;
}

/* Alle texttragenden Inhaltsobjekte bleiben linksbündig. */
.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag
:is(
    p,
    h2,
    h3,
    h4,
    h5,
    h6,
    ul,
    ol,
    li,
    blockquote,
    cite,
    figcaption,
    .wp-block-tadv-classic-paragraph,
    .mce-content-body,
    .wp-block-shortcode,
    .wp-block-table,
    .wp-block-buttons
) {
    text-align: left !important;
}

/* =========================================================
   ABSÄTZE UND CLASSIC-PARAGRAPH
   ========================================================= */

.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag p,
.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag
.wp-block-tadv-classic-paragraph
> div,
.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag
.mce-content-body
> div {
    color: var(--dah-redbeitrag-content-text);
    font-family: inherit;
    font-size: clamp(0.96rem, 1.35cqi, 1.04rem);
    font-weight: 400;
    line-height: 1.72;
}

.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag p {
    margin-top: 0;
    margin-bottom: 1.18em;
}

.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag
.wp-block-tadv-classic-paragraph
> div,
.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag
.mce-content-body
> div {
    margin-top: 0;
    margin-bottom: 0.92em;
}

.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag
.wp-block-tadv-classic-paragraph
> div:last-child,
.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag
.mce-content-body
> div:last-child,
.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag p:last-child {
    margin-bottom: 0;
}

.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag strong {
    color: var(--dah-redbeitrag-content-text);
    font-weight: 800;
}

.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag em {
    color: var(--dah-redbeitrag-content-text-soft);
}

/* =========================================================
   ÜBERSCHRIFTEN
   ========================================================= */

.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag
:is(h2, h3, h4, h5, h6) {
    margin-top: 1.65em !important;
    margin-bottom: 0.62em !important;
    padding: 0 !important;
    color: var(--dah-redbeitrag-content-blue-dark) !important;
    font-family: inherit;
    font-weight: 820;
    line-height: 1.22;
    letter-spacing: -0.015em;
    text-align: left;
    text-wrap: balance;
}

.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag h2 {
    font-size: clamp(1.35rem, 2.7cqi, 1.82rem) !important;
}

.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag h3 {
    font-size: clamp(1.18rem, 2.25cqi, 1.5rem) !important;
}

.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag
:is(h4, h5, h6) {
    font-size: clamp(1.02rem, 1.8cqi, 1.2rem) !important;
}

/* Erste Überschrift beziehungsweise erster Inhaltsblock beginnt ohne zusätzlichen Oberabstand. */
.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag
> .wp-block-group__inner-container
> :first-child:not(.wp-block-html),
.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag
> :first-child:not(.wp-block-html) {
    margin-top: 0 !important;
}

/* =========================================================
   LISTEN
   ========================================================= */

.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag
:is(ul, ol) {
    margin-top: 0.3em;
    margin-bottom: 1.35em;
    color: var(--dah-redbeitrag-content-text);
}

.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag ul {
    padding-left: 1.35em;
}

.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag ol {
    padding-left: 0;
    list-style: none;
    counter-reset: dah-redbeitrag-ordered-list;
}

.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag
:is(ul, ol) li {
    margin: 0.42em 0;
    font-size: clamp(0.96rem, 1.35cqi, 1.04rem);
    line-height: 1.62;
}

.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag ul li {
    padding-left: 0.12em;
}

.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag ol > li {
    position: relative;
    padding-left: 1.65em;
    counter-increment: dah-redbeitrag-ordered-list;
}

.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag ol > li::before {
    content: counter(dah-redbeitrag-ordered-list) ".";
    position: absolute;
    top: 0;
    left: 0;
    width: 1.25em;
    color: var(--dah-redbeitrag-content-blue-dark);
    font-weight: 800;
    text-align: right;
}

.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag ul li::marker {
    color: var(--dah-redbeitrag-content-red);
}

/* =========================================================
   ZITATE
   ========================================================= */

.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag blockquote,
.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag .wp-block-quote {
    position: relative;
    margin-top: 1.5em;
    margin-bottom: 1.65em;
    padding: clamp(20px, 3.2cqi, 30px) clamp(20px, 3.5cqi, 34px) clamp(20px, 3.2cqi, 28px) clamp(54px, 7cqi, 72px);
    background: rgba(230, 173, 0, 0.075);
    border: 1px solid rgba(230, 173, 0, 0.3);
    border-left: 5px solid var(--dah-redbeitrag-content-gold);
    border-radius: 16px;
}

.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag blockquote::before,
.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag .wp-block-quote::before {
    content: "\201C";
    position: absolute;
    top: 9px;
    left: 19px;
    color: var(--dah-redbeitrag-content-gold);
    font-family: Georgia, serif;
    font-size: clamp(3rem, 7cqi, 4.7rem);
    font-weight: 700;
    line-height: 1;
}

.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag blockquote p,
.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag .wp-block-quote p {
    margin-bottom: 0.75em;
    font-size: clamp(0.97rem, 1.45cqi, 1.06rem);
    font-style: normal;
    line-height: 1.66;
}

.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag blockquote cite,
.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag .wp-block-quote cite {
    display: block;
    color: var(--dah-redbeitrag-content-blue-dark);
    font-size: 0.84rem;
    font-style: normal;
    font-weight: 800;
}

/* =========================================================
   LINKS UND SCHALTFLÄCHEN
   ========================================================= */

.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag a:not(.wp-block-button__link) {
    color: var(--dah-redbeitrag-content-blue-dark);
    font-weight: 700;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag a:not(.wp-block-button__link):hover,
.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag a:not(.wp-block-button__link):focus-visible {
    color: var(--dah-redbeitrag-content-red-dark);
}

.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 18px;
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--dah-redbeitrag-content-red), var(--dah-redbeitrag-content-red-dark));
    border: 1px solid var(--dah-redbeitrag-content-red-dark);
    border-radius: 999px;
    box-shadow: 0 6px 14px rgba(185, 0, 0, 0.18);
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.25;
    text-decoration: none !important;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag .wp-block-button__link:hover,
.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag .wp-block-button__link:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(185, 0, 0, 0.25);
}

.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag a:focus-visible,
.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag button:focus-visible {
    outline: 3px solid rgba(64, 112, 155, 0.34);
    outline-offset: 3px;
}

/* =========================================================
   BILDER, GALERIEN UND MEDIEN
   ========================================================= */

.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag
:is(.wp-block-image, .wp-block-gallery, .wp-block-cover, .wp-block-media-text, figure) {
    margin-top: 1.65em;
    margin-bottom: 1.65em;
}

.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag
:is(.wp-block-image, figure) img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(32, 33, 36, 0.085);
}

.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag figcaption {
    margin: 9px auto 0;
    color: var(--dah-redbeitrag-content-text-soft);
    font-size: 0.78rem;
    line-height: 1.45;
    text-align: center !important;
}

/* =========================================================
   TABELLEN, TRENNLINIEN UND SHORTCODES
   ========================================================= */

.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag .wp-block-table {
    margin-top: 1.6em;
    margin-bottom: 1.6em;
    overflow-x: auto;
}

.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #ffffff;
    border: 1px solid var(--dah-redbeitrag-content-border);
    border-radius: 14px;
    overflow: hidden;
}

.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag th,
.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag td {
    padding: 11px 13px;
    border-right: 1px solid var(--dah-redbeitrag-content-border);
    border-bottom: 1px solid var(--dah-redbeitrag-content-border);
    font-size: 0.88rem;
    line-height: 1.45;
    text-align: left;
    vertical-align: top;
}

.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag th {
    color: #ffffff;
    background: var(--dah-redbeitrag-content-blue-dark);
    font-weight: 800;
}

.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag tr:last-child td {
    border-bottom: 0;
}

.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag :is(th, td):last-child {
    border-right: 0;
}

.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag .wp-block-separator {
    height: 1px;
    margin-top: 2em;
    margin-bottom: 2em;
    background: var(--dah-redbeitrag-content-border);
    border: 0;
}

.dah-beitrag-standard.dah-beitrag-redaktionell
.dah-beitrag-redaktionell-beitrag .wp-block-shortcode {
    margin-top: 1.7em;
    margin-bottom: 1.7em;
    padding: clamp(14px, 2.8cqi, 22px);
    background: var(--dah-redbeitrag-content-surface);
    border: 1px solid var(--dah-redbeitrag-content-border);
    border-radius: 16px;
}

/* =========================================================
   THEME-BEITRAGSFUSS
   Bestandsverhalten aus CSS 1.23 beibehalten.
   ========================================================= */

body.single-post article.type-post:has(.dah-beitrag-standard.dah-beitrag-redaktionell)
.entry-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 18px 22px 0 !important;
    padding: 0 !important;
    color: #50565d;
    border: 0 !important;
    font-size: 0.78rem;
    line-height: 1.45;
}

body.single-post article.type-post:has(.dah-beitrag-standard.dah-beitrag-redaktionell)
.entry-footer a {
    color: #2f5f89 !important;
    font-weight: 750;
    text-decoration: none !important;
}

body.single-post article.type-post:has(.dah-beitrag-standard.dah-beitrag-redaktionell)
.entry-footer a:hover,
body.single-post article.type-post:has(.dah-beitrag-standard.dah-beitrag-redaktionell)
.entry-footer a:focus-visible {
    color: #b90000 !important;
}

/* =========================================================
   RESPONSIVE NACH TATSÄCHLICHER BEITRAGSBREITE
   ========================================================= */

@container dah-redbeitrag-beitrag (max-width: 680px) {
    .dah-beitrag-standard.dah-beitrag-redaktionell
    .dah-beitrag-redaktionell-beitrag {
        padding: 18px 22px 26px !important;
        border-radius: 16px;
    }

    .dah-beitrag-standard.dah-beitrag-redaktionell
    .dah-beitrag-redaktionell-beitrag blockquote,
    .dah-beitrag-standard.dah-beitrag-redaktionell
    .dah-beitrag-redaktionell-beitrag .wp-block-quote {
        padding-left: 50px;
    }
}

@container dah-redbeitrag-beitrag (max-width: 440px) {
    .dah-beitrag-standard.dah-beitrag-redaktionell
    .dah-beitrag-redaktionell-beitrag {
        padding: 16px 16px 22px !important;
        border-left-width: 2px;
        border-radius: 14px;
        box-shadow: 0 8px 18px rgba(32, 33, 36, 0.05);
    }

    .dah-beitrag-standard.dah-beitrag-redaktionell
    .dah-beitrag-redaktionell-beitrag p,
    .dah-beitrag-standard.dah-beitrag-redaktionell
    .dah-beitrag-redaktionell-beitrag
    .wp-block-tadv-classic-paragraph
    > div,
    .dah-beitrag-standard.dah-beitrag-redaktionell
    .dah-beitrag-redaktionell-beitrag
    .mce-content-body
    > div,
    .dah-beitrag-standard.dah-beitrag-redaktionell
    .dah-beitrag-redaktionell-beitrag
    :is(ul, ol) li {
        font-size: 0.93rem;
        line-height: 1.62;
    }

    .dah-beitrag-standard.dah-beitrag-redaktionell
    .dah-beitrag-redaktionell-beitrag ul {
        padding-left: 1.25em;
    }

    .dah-beitrag-standard.dah-beitrag-redaktionell
    .dah-beitrag-redaktionell-beitrag ol {
        padding-left: 0;
    }

    .dah-beitrag-standard.dah-beitrag-redaktionell
    .dah-beitrag-redaktionell-beitrag ol > li {
        padding-left: 1.6em;
    }

    .dah-beitrag-standard.dah-beitrag-redaktionell
    .dah-beitrag-redaktionell-beitrag blockquote,
    .dah-beitrag-standard.dah-beitrag-redaktionell
    .dah-beitrag-redaktionell-beitrag .wp-block-quote {
        padding: 18px 17px 18px 45px;
        border-radius: 14px;
    }

    .dah-beitrag-standard.dah-beitrag-redaktionell
    .dah-beitrag-redaktionell-beitrag blockquote::before,
    .dah-beitrag-standard.dah-beitrag-redaktionell
    .dah-beitrag-redaktionell-beitrag .wp-block-quote::before {
        top: 8px;
        left: 15px;
        font-size: 3rem;
    }

    .dah-beitrag-standard.dah-beitrag-redaktionell
    .dah-beitrag-redaktionell-beitrag .wp-block-shortcode {
        padding: 12px;
        border-radius: 14px;
    }
}

@media (max-width: 520px) {
    body.single-post article.type-post:has(.dah-beitrag-standard.dah-beitrag-redaktionell)
    .entry-footer {
        margin-right: 16px !important;
        margin-left: 16px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dah-beitrag-standard.dah-beitrag-redaktionell
    .dah-beitrag-redaktionell-beitrag .wp-block-button__link {
        transition: none;
    }
}