/* Article composition only. Shared blocks retain their editor and other-page styles. */
.vdw-article-view {
    /* Runde 2: EINE Textbreite für alles unter dem Kopf. 48rem = 768 px; bei
       1.25rem Open Sans (≈ 10,5 px je Zeichen im deutschen Fließtext) sind das
       rund 72 Zeichen je Zeile, also unter der Lesegrenze von ~85. */
    --vdw-reading-measure: 48rem;
    --vdw-reading-frame: 70rem;
    --vdw-reading-gutter: clamp(1.25rem, 4vw, 3rem);
    margin: 0;
    background: #fff;
    color: #1a1a1a;
    font-family: var(--vdw-font-base, "Open Sans", system-ui, sans-serif);
}

.vdw-reading-shell {
    padding-inline: var(--vdw-reading-gutter);
}

.vdw-article-view .vdw-mag-util,
.vdw-article-view .vdw-bento__topbar {
    display: block;
    padding-inline: var(--vdw-reading-gutter);
}

/* Die Leiste steht als Block, nicht im Raster: Inhalt mittig vertikal. */
.vdw-article-view .vdw-mag-util {
    display: flex;
    align-items: center;
}

.vdw-article-view .vdw-mag-util__inner {
    flex: 1 1 auto;
}

/* Versatz: siehe magazine-topbar.css (Verbandsleiste + Spektrum darüber). */
.vdw-article-view .vdw-mag-util__inner,
.vdw-article-view .vdw-bento__topbar-inner {
    max-width: var(--vdw-reading-frame);
    margin-inline: auto;
    min-width: 0;
}

.vdw-article-view .vdw-bento__chapnav {
    min-width: 0;
}

.vdw-article-view .vdw-bento__chapnav a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
}


.vdw-bento__topbar a.vdw-bento__overview {
    flex-shrink: 0;
    white-space: nowrap;
}

.vdw-bento__topbar a.vdw-bento__overview,
.vdw-bento__topbar a.vdw-bento__overview:hover,
.vdw-bento__topbar a.vdw-bento__overview:focus-visible {
    /* Wie der Inhaltsverzeichnis-Knopf der Startseite (Feedback Runde 3,
       einheitlicher Kopf; Beschriftung seit 2026-10-07 wieder ausgeschrieben). */
    color: #fff;
    background: var(--vdw-color-ink, #1a1a1a);
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0 0.9rem;
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
}

.vdw-bento__topbar a.vdw-bento__overview:focus-visible {
    outline: 3px solid var(--vdw-color-blau, #1c388f);
    outline-offset: 2px;
}

/* Rubrik des gelesenen Artikels in der Kapitelnavigation. */
.vdw-bento__topbar .vdw-bento__chapnav a[aria-current="true"] {
    color: var(--vdw-color-ink, #1a1a1a);
    border-bottom-color: var(--vdw-color-ink, #1a1a1a);
}

.vdw-article-view .vdw-article-breadcrumb {
    position: static;
    max-width: var(--vdw-reading-measure);
    margin: 1.75rem auto 0;
    padding: 0;
    font-size: 0.75rem;
    line-height: 1.6;
}

.vdw-article-view .vdw-article {
    max-width: var(--vdw-reading-frame);
    margin-inline: auto;
    padding: 2.5rem 0 0;
    display: flow-root;
}

/* A common reading axis, with named exceptions for actual visual/column blocks.
   Direct-child scope preserves authored nested grids and their local sizing. */
.vdw-article-view .vdw-article > * {
    box-sizing: border-box;
    max-width: var(--vdw-reading-measure);
    margin-inline: auto;
}

/* Runde 2 (Redaktion): Nur der farbige Artikelkopf bleibt breit. Bilder,
   Galerien, Heros, Spalten und „volle Breite"/alignwide/alignfull stehen
   bündig auf der Textbreite — vorher lagen sie mal 1120 px, mal 512 px mittig,
   und links wie rechts fluchtete nichts. `width: auto` hebt 100vw-Ausbrüche
   fremder Theme-Regeln für alignfull auf. */
.vdw-article-view .vdw-article > :is(.alignwide, .alignfull) {
    width: auto;
    max-width: var(--vdw-reading-measure);
    margin-inline: auto;
}

/* Bilder unter voller Textbreite werden umflossen statt mittig mit Weißraum
   daneben zu stehen. Die Spalte ist kein eigener Kasten — jedes Kind wird für
   sich per margin-inline:auto zentriert, und ein Float ignoriert auto-Ränder.
   Er würde also an den Rand der 70rem-Fläche rutschen. Deshalb rückt der
   Außenrand um genau den Abstand zwischen Artikel- und Textkante ein; die
   Prozentwerte beziehen sich auf die Artikelbreite. Breite: höchstens 45 %
   der Textbreite, damit daneben ≥ 55 % (≈ 40 Zeichen) Lauftext bleiben. */
.vdw-article-view .vdw-article > :is(.vdw-image--half, .vdw-image--quarter, .vdw-ad--half, .vdw-ad--quarter, .alignright, .wp-block-image:has(> .alignright)),
.vdw-article-view .vdw-article > .vdw-info-box--right {
    float: right;
    clear: right;
    margin: 0.4rem max(0px, calc((100% - var(--vdw-reading-measure)) / 2)) 1.25rem 2rem;
}

.vdw-article-view .vdw-article > :is(.alignleft, .wp-block-image:has(> .alignleft)),
.vdw-article-view .vdw-article > .vdw-info-box--left {
    float: left;
    clear: left;
    margin: 0.4rem 2rem 1.25rem max(0px, calc((100% - var(--vdw-reading-measure)) / 2));
}

/* Redaktionsbild und Anzeige brauchen eine feste Breite: beide sind
   Inline-Size-Container und fielen im Float sonst auf 0 zusammen. Die Anzeige
   folgt denselben Breiten wie das Redaktionsbild; ohne diese Regeln setzte die
   Textachse oben (> *) sie immer auf volle Breite. */
.vdw-article-view .vdw-article > :is(.vdw-image--half, .vdw-ad--half) {
    width: calc(min(100%, var(--vdw-reading-measure)) * 0.45);
    max-width: none;
}

.vdw-article-view .vdw-article > :is(.vdw-image--quarter, .vdw-ad--quarter) {
    width: calc(min(100%, var(--vdw-reading-measure)) * 0.3);
    max-width: none;
}

/* core/image: schmale Bilder behalten ihre Eigenbreite, gekappt auf 45 %. */
.vdw-article-view .vdw-article > :is(.alignleft, .alignright, .wp-block-image:has(> .alignleft, > .alignright)) {
    max-width: calc(min(100%, var(--vdw-reading-measure)) * 0.45);
}

.vdw-article-view .vdw-article > .wp-block-image > :is(.alignleft, .alignright) {
    float: none;
    margin: 0;
}

.vdw-article-view .vdw-article :is(.vdw-image, .wp-block-image) img {
    max-width: 100%;
    height: auto;
}

/* Flächen und Bildbänder beginnen unter einem laufenden Float, statt unter
   ihm durchzulaufen; nur Fließtext umfließt. */
.vdw-article-view .vdw-article > :not(.vdw-text, p, ul, ol, h2, h3, h4, h5, h6, .vdw-sr-only) {
    clear: both;
}

.vdw-article-view .vdw-article > :is(.vdw-image--half, .vdw-image--quarter, .vdw-ad--half, .vdw-ad--quarter, .alignright, .wp-block-image:has(> .alignright), .vdw-info-box--right) {
    clear: right;
}

.vdw-article-view .vdw-article > :is(.alignleft, .wp-block-image:has(> .alignleft), .vdw-info-box--left) {
    clear: left;
}

/* Unter 600 px bliebe neben einem 45-%-Bild kaum eine Zeile übrig: dort steht
   jedes Bild wieder auf voller Textbreite, die Bildunterschrift darunter. */
@media (max-width: 37.5rem) {
    .vdw-article-view .vdw-article > :is(.vdw-image--half, .vdw-image--quarter, .vdw-ad--half, .vdw-ad--quarter, .alignleft, .alignright, .wp-block-image:has(> .alignleft, > .alignright)),
    .vdw-article-view .vdw-article > :is(.vdw-info-box--left, .vdw-info-box--right) {
        float: none;
        width: auto;
        max-width: var(--vdw-reading-measure);
        margin: 2rem auto;
    }
}

/* Nur der headline-cluster bleibt flach. Er trägt von Haus aus keine Fläche,
   sondern Akzent-Borders, die diese Datei entfernt — seine einzige
   Auszeichnung ist der Farbstrich unten. */
.vdw-article-view .vdw-article > .vdw-headline-cluster {
    width: 100%;
    padding: 0;
    margin-bottom: 2.75rem;
    background: transparent;
    color: #1a1a1a;
}

/* #39 (Redaktion 2026-09-17): Der Artikelkopf bekommt seine Farbfläche zurück.
   Die Rücknahme ist bewusst VOLLSTÄNDIG — Fläche und Textfarben gehören
   restlos dem Block (vdw-suite/src/blocks/article-header/style.scss), der je
   Spektrum-Farbe die lesbare Schrift wählt. Eine Teil-Rücknahme, die hier noch
   Tinte setzt, ergäbe #1a1a1a auf Blau (1,67:1) bzw. Lila (1,65:1). */
.vdw-article-view .vdw-article > .vdw-article-header {
    width: 100%;
    max-width: 100%;
    margin-bottom: 2.75rem;
}

/* Die Fläche bleibt breit, ihr Text steht auf der Textbreite und fluchtet so
   links mit dem Fließtext darunter (Redaktion zu „Tagung Aktuelles
   Mietrecht"). Der Innenabstand bleibt beim Block; ist die Fläche schmaler
   als Textbreite plus Innenabstand, füllt der Text die Fläche wie bisher. */
.vdw-article-view .vdw-article > .vdw-article-header .vdw-article-header__inner {
    max-width: var(--vdw-reading-measure);
}

/* Retain the chosen colour as a small mark. */
.vdw-article-view .vdw-article > .vdw-headline-cluster::before {
    content: "";
    display: block;
    width: 3rem;
    height: 0.3rem;
    margin-bottom: 1.5rem;
    background: var(--vdw-accent, var(--vdw-color-blau, #1c388f));
}

.vdw-article-view .vdw-article > .vdw-headline-cluster .vdw-hc__headline,
.vdw-article-view .vdw-article > .vdw-article__title {
    font-size: clamp(2rem, 1.35rem + 2.4vw, 3rem);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.035em;
    text-wrap: balance;
    color: #1a1a1a;
    margin-block: 0 1.5rem;
    padding: 0;
    border: 0;
    hyphens: manual;
}

.vdw-article-view .vdw-article > .vdw-headline-cluster .vdw-hc__subline {
    color: #555;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    margin: 0 0 1rem;
    padding: 0;
    border: 0;
}

.vdw-article-view .vdw-article > .vdw-headline-cluster .vdw-hc__lead {
    color: #333;
    max-width: none;
    font-size: clamp(1.25rem, 1.05rem + 0.5vw, 1.4375rem);
    line-height: 1.6;
    font-weight: 400;
    margin: 0;
    padding: 0;
    border: 0;
}

.vdw-article-view .vdw-article > .vdw-text:not([class*="vdw-text--size-"]) :is(p, li),
.vdw-article-view .vdw-article > :is(p, ul, ol) {
    font-size: 1.25rem;
    line-height: 1.75;
}

.vdw-article-view .vdw-article > .vdw-text {
    margin-block: 1.75rem;
}

.vdw-article-view .vdw-article > .vdw-text > :last-child {
    margin-bottom: 0;
}

/* #41: Der Abstand zum Abbinder sitzt hier und nicht als `margin-top` am
   Abbinder selbst. Zwischen beiden liegt nur `<main>` ohne eigene Polsterung,
   also kollabiert ein margin-top des Abbinders mit diesem margin-bottom —
   gemessen (Chromium, Lesetemplate) blieb der Abstand mit einem
   `margin-top: clamp(3.5rem, 7vw, 6rem)` am Abbinder bis 914 px Viewportbreite
   bei exakt 64 px, also unverändert. Wächst der Wert hier, wächst der Abstand. */
.vdw-article-view .vdw-article-ending {
    max-width: var(--vdw-reading-frame);
    margin: 3rem auto clamp(4.5rem, 7vw, 6rem);
}

.vdw-article-view .vdw-article-ending > * {
    box-sizing: border-box;
    max-width: var(--vdw-reading-measure);
    margin-inline: auto;
}

.vdw-article-view :is(.vdw-article-person, .vdw-article > .vdw-person-card) {
    padding: 1.5rem 0;
    background: transparent;
    border-block: 1px solid #dedede;
    border-radius: 0;
    box-shadow: none;
}

/* Artikelende: eine Trennlinie zwischen Ansprechpartner und „Artikel teilen“,
   nicht zwei. Steht die Personenkarte als Block am Artikelende, lagen vorher
   ihre Unterlinie, 40 px Block-Abstand, 48 px Abstand zum Artikelende und die
   Oberlinie der Teilen-Leiste übereinander — gemessen 88 px Leere zwischen
   zwei Linien (Prod, 9 von 34 Artikeln, 2026-10-07). Jetzt übernimmt die
   Linie der Teilen-Leiste die Unterkante der Karte, im Abstand ihres eigenen
   Innenabstands. Gleiches für die automatisch angehängte Karte (dort
   gemessen 48 px Außenabstand unter ihrer Linie). */
.vdw-article-view .vdw-article > .vdw-person-card:last-child {
    margin-bottom: 0;
    border-bottom: 0;
}

.vdw-article-view .vdw-article:has(> .vdw-person-card:last-child) + .vdw-article-ending {
    margin-top: 0;
}

.vdw-article-view .vdw-article-ending > .vdw-article-person:has(+ .vdw-share) {
    margin-bottom: 0;
    border-bottom: 0;
}

.vdw-article-view :is(.vdw-article-person, .vdw-article > .vdw-person-card) .vdw-person-card__inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 1.5rem;
    padding: 0;
    text-align: left;
}

.vdw-article-view :is(.vdw-article-person, .vdw-article > .vdw-person-card) .vdw-person-card__photo {
    flex: 0 0 5.5rem;
    width: 5.5rem;
    margin: 0;
    padding: 0;
}

.vdw-article-view :is(.vdw-article-person, .vdw-article > .vdw-person-card) .vdw-person-card__photo-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
}

.vdw-article-view :is(.vdw-article-person, .vdw-article > .vdw-person-card) .vdw-person-card__body {
    min-width: 0;
    padding: 0;
    text-align: left;
}

.vdw-article-view .vdw-article-person__label {
    color: #555;
    font-size: 0.8125rem;
    margin: 0 0 0.4rem;
}

.vdw-article-view :is(.vdw-article-person, .vdw-article > .vdw-person-card) .vdw-person-card__name {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.4;
    margin: 0;
}

.vdw-article-view :is(.vdw-article-person, .vdw-article > .vdw-person-card) .vdw-person-card__role {
    font-size: 0.9375rem;
    margin: 0.25rem 0 0;
}

/* #37: Die Mailadresse gehört unmittelbar unter die Position. Gemessen
   (Chromium, Text-Oberkante zu Text-Unterkante) lagen zwischen Funktion und
   Adresse 17,5 px, sobald das Block-Stylesheet mitlädt, und 9,3 px ohne. Der
   Abstand kommt fast vollständig aus dem `padding-block` des Links, mit dem
   der Block sein 44-px-Ziel baut — an den Listen-Abständen liegt es nicht.
   Deshalb behält der Link hier sein Ziel über `min-height` und legt es nach
   unten, statt es über den Text zu stülpen. */
.vdw-article-view :is(.vdw-article-person, .vdw-article > .vdw-person-card) .vdw-person-card__contact {
    list-style: none;
    padding: 0;
    margin: 0.125rem 0 0;
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

/* Vorsorge gegen Listen-Abstände fremder Themes; auf Hello Biz ist das `li`
   bereits abstandslos, hier fällt also nichts weg. */
.vdw-article-view :is(.vdw-article-person, .vdw-article > .vdw-person-card) .vdw-person-card__contact-item {
    margin: 0;
    padding: 0;
}

.vdw-article-view :is(.vdw-article-person, .vdw-article > .vdw-person-card) .vdw-person-card__link {
    display: block;
    min-height: 2.75rem; /* WCAG 2.5.5 — Ziel bleibt, wächst aber nach unten */
    padding-block: 0;
    line-height: 1.5;
}

/* Der Abbinder (VDW_Magazine_Colophon, Grundstil in magazine-colophon.css)
   läuft über die volle Breite und steht deshalb hinter .vdw-reading-shell.
   Untergrenze für den Abstand ohne Artikelende (etwa die Redaktionsvorschau
   eines leeren Beitrags); auf dem Artikel gibt `.vdw-article-ending` den
   größeren Wert vor, beide Ränder kollabieren. */
.vdw-article-view .vdw-reading-footer {
    margin-top: 3rem;
}

@media (max-width: 40rem) {
    .vdw-article-view .vdw-bento__topbar-inner {
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 0.25rem 1rem;
    }

    .vdw-article-view .vdw-bento__chapnav {
        display: flex;
        order: 3;
        flex-basis: 100%;
    }

    /* „Inhaltsverzeichnis" passt bei Standardschrift ab 320 px in die Zeile
       (147 px, Prod 2026-10-07). Bei großer Grundschrift trennt der Knopf
       am weichen Trennstrich als „Inhalts-/verzeichnis", statt aus dem
       Viewport zu laufen — ohne Wörterbuch (CI-Chromium trennt Deutsch
       mit hyphens:auto nicht, 333 > 320 px bei 32 px Grundschrift). */
    .vdw-article-view .vdw-bento__topbar a.vdw-bento__overview {
        flex-shrink: 1;
        min-width: min-content;
        white-space: normal;
        hyphens: manual;
        line-height: 1.2;
    }

    .vdw-article-view .vdw-article {
        padding-top: 2rem;
    }

    .vdw-article-view .vdw-article > .vdw-article-header .vdw-article-header__title,
    .vdw-article-view .vdw-article > .vdw-headline-cluster .vdw-hc__headline {
        hyphens: manual;
        overflow-wrap: break-word;
    }

    /* Wie im article-header-Block: ohne Silbentrennung muss das längste Wort
       in die Zeile passen. 7,4vw bringt „Wohnungsunternehmen“ (19 Zeichen,
       -0,035em Laufweite) von 320 bis 430 px auf 94–98 % der Zeilenbreite,
       vorher 106–132 % mit hartem Bruch (Prod 2026-10-07). */
    .vdw-article-view .vdw-article > .vdw-headline-cluster .vdw-hc__headline,
    .vdw-article-view .vdw-article > .vdw-article__title {
        font-size: min(clamp(2rem, 1.35rem + 2.4vw, 3rem), 7.4vw);
    }

    .vdw-article-view :is(.vdw-article-person, .vdw-article > .vdw-person-card) .vdw-person-card__inner {
        gap: 1rem;
    }

    .vdw-article-view :is(.vdw-article-person, .vdw-article > .vdw-person-card) .vdw-person-card__photo {
        width: 4rem;
        flex-basis: 4rem;
    }
}

.vdw-article-view a.vdw-reading-skip {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 100000;
    padding: 0.75rem 1rem;
    background: #fff;
    color: #1c388f;
    transform: translateY(-200%);
}

.vdw-article-view a.vdw-reading-skip:focus {
    transform: none;
    outline: 3px solid #1c388f;
}

.vdw-article-view .vdw-article > .vdw-person-card {
    margin-block: 2.5rem;
}

.vdw-article-view .vdw-article > .vdw-related {
    margin-block: 3rem 0;
    padding-top: 2rem;
    border-top: 1px solid #dedede;
}

.vdw-article-view .vdw-article > .vdw-related .vdw-related__heading {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
}

/* A quiet utility row followed by equally weighted adjacent contributions.
   #29: die Leiste lief über die volle Lesefläche (70rem) und begann damit
   deutlich links vom Fließtext. Sie folgt jetzt der Lesebreite wie jedes
   andere Kind von `.vdw-article-ending`. */
.vdw-article-view .vdw-article-ending > .vdw-share {
    position: relative;
    gap: 0.25rem 0.75rem;
    margin: 0 auto;
    padding: 0.75rem 0;
    border: 0;
    border-top: 1px solid #dedede;
}

.vdw-article-view .vdw-share .vdw-share__label {
    flex: 0 0 auto;
    font-weight: 400;
    font-size: 0.8125rem;
    margin: 0;
}

.vdw-article-view .vdw-share__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.25rem;
    min-width: 0;
    max-width: 100%;
}

/* Keep the live region accessible without an empty layout row. */
.vdw-article-view .vdw-share__status:empty {
    position: absolute;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

/* #29: Die Dienste tragen nur noch ihr Zeichen — der Name steht als
   Screenreader-Text im Link. Ohne sichtbaren Text braucht die Schaltfläche ein
   eigenes quadratisches Ziel, sonst schrumpft sie auf die Icon-Kante. */
.vdw-article-view .vdw-share a.vdw-share__link,
.vdw-article-view .vdw-share button.vdw-share__copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 2.75rem;
    min-width: 2.75rem;
    padding: 0.375rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--vdw-color-blau, #1c388f);
    cursor: pointer;
    text-transform: none;
    transition: background-color 0.15s ease;
}

/* Ohne sichtbaren Text kann die Hover-Rückmeldung keine Unterstreichung sein. */
.vdw-article-view .vdw-share a.vdw-share__link:hover,
.vdw-article-view .vdw-share a.vdw-share__link:focus-visible,
.vdw-article-view .vdw-share button.vdw-share__copy:hover,
.vdw-article-view .vdw-share button.vdw-share__copy:focus-visible {
    background: rgba(28, 56, 143, 0.1);
    color: var(--vdw-color-blau, #1c388f);
    text-decoration: none;
}

.vdw-article-view .vdw-share a.vdw-share__link:focus-visible,
.vdw-article-view .vdw-share button.vdw-share__copy:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.vdw-article-view .vdw-share__icon {
    flex: 0 0 1.375rem;
    width: 1.375rem;
    height: 1.375rem;
}

@media (prefers-reduced-motion: reduce) {
    .vdw-article-view .vdw-share a.vdw-share__link,
    .vdw-article-view .vdw-share button.vdw-share__copy {
        transition: none;
    }
}

.vdw-article-view .vdw-share__status,
.vdw-article-view .vdw-share__fallback {
    flex-basis: 100%;
    font-size: 0.8125rem;
    color: #555;
}

.vdw-article-view .vdw-share__fallback input {
    display: block;
    width: 100%;
    margin-top: 0.5rem;
    min-height: 2.75rem;
    font-size: 1rem;
}

.vdw-article-view .vdw-share button.vdw-share__copy[hidden],
.vdw-article-view .vdw-share .vdw-share__fallback[hidden] {
    display: none;
}

.vdw-article-view .vdw-article-ending > .vdw-article-paging--cards {
    display: block;
    margin-top: 0;
    padding: 1.25rem 0 0;
    border-top: 0;
}

.vdw-article-view .vdw-article-paging__heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin-bottom: 1.5rem;
}

.vdw-article-view .vdw-article-paging__heading h2 {
    font-size: clamp(1.25rem, 1rem + 0.5vw, 1.5rem);
    line-height: 1.3;
    margin: 0;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.vdw-article-view .vdw-article-paging__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 3rem;
    /* W2-B-02: Bezugsrahmen für die Kartenumstellung bei großer Schrift (s. unten). */
    container-type: inline-size;
}

.vdw-article-view .vdw-article-paging a.vdw-article-paging__card,
.vdw-article-view .vdw-article-paging a.vdw-article-paging__card:hover,
.vdw-article-view .vdw-article-paging a.vdw-article-paging__card:focus-visible {
    color: #1a1a1a;
    text-decoration: none;
}

/* #31: Die Karten sollen als Blätter-Schaltflächen lesbar sein, nicht als
   angehängte Textzeilen — deshalb Rahmen, Innenabstand und eine Reaktion,
   die die ganze Karte erfasst. */
.vdw-article-view .vdw-article-paging a.vdw-article-paging__card {
    display: grid;
    --vdw-paging-thumbnail: clamp(6rem, 10vw, 9rem);
    grid-template-columns: var(--vdw-paging-thumbnail, 9rem) minmax(0, 1fr);
    align-content: start;
    align-items: start;
    gap: 0 1.25rem;
    min-width: 0;
    padding: 1rem 1.125rem 1.25rem;
    border: 1px solid #dedede;
    transition:
        border-color 0.15s ease,
        background-color 0.15s ease;
}

.vdw-article-view .vdw-article-paging a.vdw-article-paging__card:hover,
.vdw-article-view .vdw-article-paging a.vdw-article-paging__card:focus-visible {
    border-color: var(--vdw-color-blau, #1c388f);
    background: rgba(28, 56, 143, 0.04);
}

@media (prefers-reduced-motion: reduce) {
    .vdw-article-view .vdw-article-paging a.vdw-article-paging__card {
        transition: none;
    }
}

/* #32: Fehlt ein Nachbar, behält der verbliebene Beitrag seine Spalte — der
   nächste steht rechts, links bleibt Weißfläche. Die frühere Regel zog ihn
   über beide Spalten und damit nach links. */
.vdw-article-view .vdw-article-paging__card[rel="prev"]:only-child {
    grid-column: 1;
}

.vdw-article-view .vdw-article-paging__card[rel="next"]:only-child {
    grid-column: 2;
}

.vdw-article-view .vdw-article-paging__card .vdw-article-paging__dir {
    grid-column: 1 / -1;
    margin-bottom: 0.875rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--vdw-color-blau, #1c388f);
}

.vdw-article-view .vdw-article-paging__media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.vdw-article-view .vdw-article-paging__media img.vdw-article-paging__image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.vdw-article-view .vdw-article-paging__credit {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    max-height: calc(100% - 1rem);
    writing-mode: vertical-rl;
    font-size: 0.625rem;
    line-height: 1.3;
    padding: 0.4rem 0.2rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.94);
    color: #1a1a1a;
    overflow-wrap: anywhere;
}

.vdw-article-view .vdw-article-paging__body {
    grid-column: 1 / -1;
    min-width: 0;
}

.vdw-article-view .vdw-article-paging__media + .vdw-article-paging__body {
    grid-column: 2;
}

.vdw-article-view .vdw-article-paging__kicker {
    display: block;
    color: #555;
    font-size: 0.8125rem;
    margin-bottom: 0.4rem;
}

.vdw-article-view .vdw-article-paging__card .vdw-article-paging__title {
    font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
    hyphens: manual;
    overflow-wrap: break-word;
}

.vdw-article-view .vdw-article-paging__card:hover .vdw-article-paging__title,
.vdw-article-view .vdw-article-paging__card:focus-visible .vdw-article-paging__title {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

@media (max-width: 40rem) {
    .vdw-article-view .vdw-article-paging a.vdw-article-paging__card {
        --vdw-paging-thumbnail: 6.875rem;
        gap: 0 1rem;
    }

    .vdw-article-view .vdw-article-paging__card .vdw-article-paging__title {
        font-size: 1.125rem;
    }

    .vdw-article-view .vdw-article-paging__cards {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.5rem;
    }

    /* Einspaltig gibt es keine rechte Spalte mehr, in die #32 ausweichen
       könnte — sonst legt der Browser eine implizite an. */
    .vdw-article-view .vdw-article-paging__card[rel="next"]:only-child {
        grid-column: 1;
    }
}

@media (max-width: 22rem) {
    .vdw-article-view .vdw-article-paging a.vdw-article-paging__card {
        --vdw-paging-thumbnail: 6rem;
    }
}

/* Mirror the next contribution while keeping the text itself left aligned. */
.vdw-article-view .vdw-article-paging a.vdw-article-paging__card[rel="next"] {
    grid-template-columns: minmax(0, 1fr) var(--vdw-paging-thumbnail, 9rem);
}

.vdw-article-view .vdw-article-paging__card[rel="next"] .vdw-article-paging__dir {
    justify-self: end;
}

.vdw-article-view .vdw-article-paging__card[rel="next"] .vdw-article-paging__media {
    grid-column: 2;
    grid-row: 2;
}

.vdw-article-view .vdw-article-paging__card[rel="next"] .vdw-article-paging__media + .vdw-article-paging__body {
    grid-column: 1;
    grid-row: 2;
}

@media (max-width: 40rem) {
    .vdw-article-view .vdw-share .vdw-share__label {
        flex-basis: 100%;
    }

    .vdw-article-view .vdw-share__actions {
        column-gap: 0.75rem;
    }
}

/* Runde 2: Auf der 48rem-Textbreite bleiben je Karte rund 360 px. Mit dem
   Vorschaubild daneben blieben dem Titel ~160 px, und Wörter wie
   „Wohnraumförderung" brachen mitten im Wort. Ab zweispaltig steht das Bild
   deshalb über dem Text; einspaltig (≤ 40rem) bleibt es daneben, dort ist die
   Karte breit genug. */
@media (min-width: 40.0625rem) {
    .vdw-article-view .vdw-article-paging a.vdw-article-paging__card,
    .vdw-article-view .vdw-article-paging a.vdw-article-paging__card[rel="next"] {
        grid-template-columns: minmax(0, 1fr);
    }

    .vdw-article-view .vdw-article-paging__media,
    .vdw-article-view .vdw-article-paging__card[rel="next"] .vdw-article-paging__media {
        grid-column: 1;
        grid-row: auto;
        aspect-ratio: 16 / 9;
        margin-bottom: 1rem;
    }

    .vdw-article-view .vdw-article-paging__media + .vdw-article-paging__body,
    .vdw-article-view .vdw-article-paging__card[rel="next"] .vdw-article-paging__media + .vdw-article-paging__body {
        grid-column: 1;
        grid-row: auto;
    }
}

/* W2-B-02: Bei großer Standardschrift wächst das 6rem-Vorschaubild mit, die
   Karte auf schmalen Geräten nicht — dem Titel blieb keine Spalte, die Karte
   lief über den Viewport. Ist die Kartenliste schmaler als 14rem, steht das
   Bild wie im zweispaltigen Layout über dem Text. Bei Standardschrift greift
   das erst unter 224 px Kartenbreite, ab 320 px Viewport also nie. */
@container (max-width: 14rem) {
    .vdw-article-view .vdw-article-paging a.vdw-article-paging__card,
    .vdw-article-view .vdw-article-paging a.vdw-article-paging__card[rel="next"] {
        grid-template-columns: minmax(0, 1fr);
        padding-inline: 0.75rem;
    }

    .vdw-article-view .vdw-article-paging__media,
    .vdw-article-view .vdw-article-paging__card[rel="next"] .vdw-article-paging__media {
        grid-column: 1;
        grid-row: auto;
        margin-bottom: 0.75rem;
    }

    .vdw-article-view .vdw-article-paging__media + .vdw-article-paging__body,
    .vdw-article-view .vdw-article-paging__card[rel="next"] .vdw-article-paging__media + .vdw-article-paging__body {
        grid-column: 1;
        grid-row: auto;
    }

    .vdw-article-view .vdw-article-paging__card[rel="next"] .vdw-article-paging__dir {
        justify-self: start;
    }
}