/* ==========================================================================
   VdW Magazin — Base Stylesheet
   Spektrum CD custom-property tokens (Open Sans: vdw-suite `vdw-fonts`)
   + base block styles for magazine article rendering.
   ========================================================================== */

/* --------------------------------------------------------------------------
   D2 — Open Sans: kommt seit 2026-10-07 aus vdw-suite (`vdw-fonts`,
   vdw-suite/assets/css/fonts.css), einer Quelle für die ganze Website und
   jedes Theme. `vdw-magazine` hängt davon ab. Hier kein eigenes @font-face
   mehr: zwei Deklarationen derselben Familie konkurrieren, und die zuletzt
   gedruckte gewinnt — auch wenn ihre Datei nicht lädt.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   D1 — Spektrum token ALIASES onto the shared canon (vdw-theme tokens.css)
   --------------------------------------------------------------------------
   No hex color values live here anymore. The canon is vdw-theme/assets/css/
   tokens.css (fed by theme.json). These aliases keep the legacy
   --vdw-color-* / --vdw-measure / --vdw-flow / --vdw-gutter / --vdw-font-base
   names that the 7 magazine blocks reference, so nothing breaks while the
   single source of truth lives in the theme.

   Fallbacks (after the comma) only apply when tokens.css is NOT loaded — e.g.
   the suite running standalone on the legacy Elementor site without vdw-theme.
   Once vdw-theme is active, the canon values win.

   Note: --vdw-color-gruengelb is BACKGROUND-ONLY (contrast 1.5:1, never text).
   -------------------------------------------------------------------------- */

:root {
    /* Spektrum 4-color palette — alias the canon */
    --vdw-color-blau:      var(--vdw-blau, #1c388f);
    --vdw-color-lila:      var(--vdw-lila, #5d2082);
    --vdw-color-tuerkis:   var(--vdw-tuerkis, #009bb5);
    --vdw-color-gruengelb: var(--vdw-gruengelb, #c7d300); /* background-only — never as text color */

    /* Dark turquoise remains a foreground on light surfaces. */
    --vdw-on-tuerkis: #f5f5f5;
    --vdw-tuerkis-text-bg: var(--vdw-tuerkis-text, #00788a);

    /* 20 % tone steps — alias the canon tints */
    --vdw-color-blau-20:      var(--vdw-blau-tint-20, #d2d7e9);
    --vdw-color-lila-20:      var(--vdw-lila-tint-20, #dfd2e6);
    --vdw-color-tuerkis-20:   var(--vdw-tuerkis-tint-20, #ccecf1);
    --vdw-color-gruengelb-20: var(--vdw-gruengelb-tint-20, #f4f6cc);

    /* Typography — alias the canon font token */
    --vdw-font-base: var(--vdw-font, "Open Sans", system-ui, sans-serif);
}

/* --vdw-measure / --vdw-flow / --vdw-gutter are canon names defined in
   vdw-theme/assets/css/tokens.css; we do NOT redefine them here (a
   self-referential custom property would invalidate the token). Consuming
   rules below carry inline fallbacks (e.g. var(--vdw-measure, 46rem)) so the
   suite still renders sensibly if it loads standalone without vdw-theme. */

/* --------------------------------------------------------------------------
   Magazine body scope
   -------------------------------------------------------------------------- */

body.vdw-magazin {
    font-family: var(--vdw-font-base);
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--vdw-contrast, #1a1a1a);
    background: var(--vdw-weiss, #fff);
}

/* --------------------------------------------------------------------------
   Global focus style — blau only, never grün-gelb (contrast 1.5:1)
   -------------------------------------------------------------------------- */

a:focus-visible {
    outline: var(--vdw-focus-breite, 2px) solid var(--vdw-focus, var(--vdw-color-blau));
    outline-offset: var(--vdw-focus-abstand, 2px);
}

/* --------------------------------------------------------------------------
   Article color-variant wrappers — sets --vdw-accent for child elements.
   Body text remains black on white; Spektrum only as accent.
   Grün-Gelb variant uses background-color only (never color:).
   -------------------------------------------------------------------------- */

.vdw-article--blau     { --vdw-accent: var(--vdw-color-blau); }
.vdw-article--lila     { --vdw-accent: var(--vdw-color-lila); }
.vdw-article--tuerkis  { --vdw-accent: var(--vdw-color-tuerkis); }
.vdw-article--gruengelb {
    /* Grün-Gelb: accent used as background only — WCAG contrast 1.5:1 */
    --vdw-accent: var(--vdw-color-gruengelb);
}

/* --------------------------------------------------------------------------
   Article reading column — single source of measure + page gutters.
   Per-block max-width was removed; the container governs width so all blocks
   (text, quote, key-figure, info-box, störer, hero) align to one measure.
   Vertical rhythm stays on the blocks themselves (works in editor too) via
   the --vdw-flow token.
   -------------------------------------------------------------------------- */

.vdw-article {
    /* Wider magazine reading column (Tobias: 46rem war zu schmal, viel Leerraum).
       Frame/Bilder/Text nutzen die breitere Spalte; zentriert. */
    overflow-wrap: anywhere;
    hyphens: manual;
    overflow-wrap: break-word;
    max-width: 62rem;
    margin: 0 auto;
    padding: 3rem var(--vdw-gutter, 1.5rem) 4.5rem;
}

/* First block sits flush to the top of the column. */
.vdw-article > *:first-child {
    margin-top: 0;
}

/* --------------------------------------------------------------------------
   Article byline
   -------------------------------------------------------------------------- */

.vdw-article__byline {
    font-size: 0.9375rem;
    color: #555; /* muted meta grey — magazine-local, not a brand token */
    margin: var(--vdw-flow, 2.5rem) 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid #e0e0e0; /* hairline grey — magazine-local */
}

/* --------------------------------------------------------------------------
   /magazin startpage — current-issue aggregator.
   Accent is used as a decorative border only; titles stay dark (#1a1a1a) so
   the grün-gelb variant never violates text contrast (WCAG AA).
   -------------------------------------------------------------------------- */

.vdw-start,
.vdw-issue {
    max-width: 72rem;
    margin: 0 auto;
    padding: 3rem var(--vdw-gutter, 1.5rem) 5rem;
}

.vdw-issue__editorial {
    font-size: 1.0625rem;
    color: var(--vdw-schwarz-80, #333);
    margin: 0 0 1rem;
}

.vdw-start__title {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 700;
    margin: 0 0 1.5rem;
}

.vdw-start__empty {
    font-size: 1.125rem;
    color: #555;
}

.vdw-start__hero {
    border-top: 6px solid var(--vdw-accent, var(--vdw-color-blau));
    padding: 2rem 0 2.5rem;
    margin-bottom: 3.5rem;
}

.vdw-start__hero-title {
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
    font-weight: 700;
    margin: 0;
    color: var(--vdw-contrast, #1a1a1a);
    /* W2-V2-01: Wörter wie „Wohnungsbaugenossenschaften“ sind bei großer
       Schrift breiter als die Spalte — nur dann wird im Wort umbrochen. */
    overflow-wrap: break-word;
}

.vdw-start__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    /* W2-V2-01: min(…, 100%) — bei großer Schrift (32 px) wären 17rem = 544 px
       breiter als ein 320-px-Viewport; die Spalte schrumpft dann auf die Breite. */
    grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
    gap: 2rem;
}

.vdw-start__card {
    border-top: 4px solid var(--vdw-accent, var(--vdw-color-blau));
    padding: 1.25rem 0 0;
}

.vdw-start__card-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
    color: var(--vdw-contrast, #1a1a1a);
    /* W2-V2-01: wie .vdw-start__hero-title. */
    overflow-wrap: break-word;
}

.vdw-start__hero-link,
.vdw-start__card-link {
    text-decoration: none;
    color: inherit;
}

.vdw-start__hero-link:hover .vdw-start__hero-title,
.vdw-start__card-link:hover .vdw-start__card-title {
    text-decoration: underline;
}

.vdw-start__card-byline {
    font-size: 0.8125rem;
    color: #555;
    margin: 0.5rem 0 0;
}

/* Slot sections (startpage + issue TOC). Spektrum blue accent under the label. */
.vdw-start__section,
.vdw-issue__section {
    margin-top: 3.5rem;
}

.vdw-start__section-title {
    font-size: 1.25rem;
    margin: 0 0 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid var(--vdw-color-blau);
}

/* --------------------------------------------------------------------------
   WP-B — Article navigation (breadcrumbs, prev/next paging) + byline date.
   Breadcrumb + paging render outside .vdw-article (before/after hooks), so they
   carry their own reading-column width to stay aligned with the article body.
   -------------------------------------------------------------------------- */

.vdw-article-breadcrumb {
    max-width: 62rem;
    margin: 1.5rem auto 0;
    padding: 0 var(--vdw-gutter, 1.5rem);
    font-size: 0.875rem;
    color: #555; /* muted meta grey — magazine-local */
    /* W2-B-01: lange Titel („Wohnungsbaugenossenschaften") brechen im Wort,
       statt die Seite bei schmalen Geräten seitlich scrollen zu lassen. */
    overflow-wrap: break-word;
}

.vdw-article-breadcrumb__link {
    color: var(--vdw-color-blau);
    text-decoration: none;
}

.vdw-article-breadcrumb__link:hover,
.vdw-article-breadcrumb__link:focus-visible {
    text-decoration: underline;
}

.vdw-article-breadcrumb__sep {
    margin: 0 0.4em;
    color: #999;
}

.vdw-article-breadcrumb__current {
    color: #1a1a1a;
}

/* Byline date + author separators. */
.vdw-article__date {
    font-variant-numeric: tabular-nums;
}

.vdw-article__byline-sep {
    margin: 0 0.5em;
    color: #999;
}

/* Prev / back-to-issue / next row. Empty spacers keep the issue link centered
   even when only one neighbour exists. */
.vdw-article-paging {
    /* Gleiche Spaltenbreite wie `.vdw-article` und die Teilen-Leiste, damit die
       drei Trennlinien am Artikelende exakt fluchten. */
    max-width: 62rem;
    margin: 3rem auto 0;
    padding: 2rem var(--vdw-gutter, 1.5rem) 0;
    border-top: 1px solid #e0e0e0;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem 1.5rem;
    align-items: start;
}

.vdw-article-paging__link {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    text-decoration: none;
    color: #1a1a1a;
    min-height: 44px; /* WCAG 2.5.5 touch target */
}

.vdw-article-paging__link--next {
    text-align: right;
}

.vdw-article-paging__link--empty {
    min-height: 0;
}

.vdw-article-paging__dir {
    font-size: 0.8125rem;
    color: var(--vdw-color-blau);
    font-weight: 600;
}

.vdw-article-paging__link:hover .vdw-article-paging__title,
.vdw-article-paging__link:focus-visible .vdw-article-paging__title {
    text-decoration: underline;
}

.vdw-article-paging__title {
    font-size: 0.9375rem;
    line-height: 1.35;
}

.vdw-article-paging__issue {
    align-self: center;
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--vdw-color-blau);
    text-decoration: none;
    padding: 0.5rem 0.25rem;
}

.vdw-article-paging__issue:hover,
.vdw-article-paging__issue:focus-visible {
    text-decoration: underline;
}

/* On narrow viewports stack the three cells into a single column. */
@media (max-width: 600px) {

    .vdw-article-paging {
        grid-template-columns: 1fr;
    }

    .vdw-article-paging__link--next {
        text-align: left;
    }

    .vdw-article-paging__link--empty {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   WP-B — /vdw-aktuell/typ/{typ} article-type archive (lean listing; WP-D enriches).
   -------------------------------------------------------------------------- */

.vdw-archive {
    max-width: 60rem;
    margin: 0 auto;
    padding: 3rem var(--vdw-gutter, 1.5rem) 5rem;
}

.vdw-archive__eyebrow {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* W2-B-05, Linkfarben-Regel: (0,2,1) plus eigene :hover/:focus-visible-
   Variante (0,3,1) — hält gegen `.elementor-kit-N a` in beiden
   Druckreihenfolgen. */
.vdw-archive__eyebrow a.vdw-archive__eyebrow-link,
.vdw-archive__eyebrow a.vdw-archive__eyebrow-link:hover,
.vdw-archive__eyebrow a.vdw-archive__eyebrow-link:focus-visible {
    color: var(--vdw-color-blau, #1c388f);
    text-decoration: none;
}

.vdw-archive__eyebrow a.vdw-archive__eyebrow-link:hover,
.vdw-archive__eyebrow a.vdw-archive__eyebrow-link:focus-visible {
    text-decoration: underline;
}

.vdw-archive__title {
    margin: 0 0 2.5rem;
}

.vdw-archive__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
    gap: 1.5rem;
}

.vdw-archive__link {
    display: block;
    height: 100%;
    padding: 1.5rem;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-top: 4px solid var(--vdw-color-blau);
    text-decoration: none;
    color: #1a1a1a;
}

.vdw-archive__link:hover,
.vdw-archive__link:focus-visible {
    border-color: var(--vdw-color-blau);
}

.vdw-archive__date {
    display: block;
    font-size: 0.8125rem;
    color: #555;
    font-variant-numeric: tabular-nums;
    margin-bottom: 0.5rem;
}

.vdw-archive__item-title {
    font-size: 1.1875rem;
    margin: 0;
}

.vdw-archive__subline {
    margin: 0.5rem 0 0;
    font-size: 0.9375rem;
    color: #555;
}

.vdw-archive__empty {
    color: #555;
}

/* --------------------------------------------------------------------------
   WP-F — Event single template (single-vdw-event.php).
   Same accent pattern as .vdw-article--*: --vdw-accent drives borders/labels
   only, body text stays black on white. Grün-Gelb stays background-only.
   -------------------------------------------------------------------------- */

.vdw-event--blau     { --vdw-accent: var(--vdw-color-blau); }
.vdw-event--lila     { --vdw-accent: var(--vdw-color-lila); }
.vdw-event--tuerkis  { --vdw-accent: var(--vdw-color-tuerkis); }
.vdw-event--gruengelb {
    /* Grün-Gelb: accent used as background only — WCAG contrast 1.5:1 */
    --vdw-accent: var(--vdw-color-gruengelb);
}

.vdw-event {
    /* W2-B-01: Rand höchstens 7,5vw — bei Standardschrift ab 320 px unverändert
       1,5rem, bei großer Schrift wächst er nicht mehr mit. */
    --vdw-event-gutter: var(--vdw-gutter, min(1.5rem, 7.5vw));
    max-width: var(--vdw-measure, 46rem);
    margin: 0 auto;
    padding: 0 var(--vdw-event-gutter) 4.5rem;
}

.vdw-event > *:first-child {
    margin-top: 0;
}

.vdw-event__hero {
    margin: 0 calc(var(--vdw-event-gutter, 1.5rem) * -1) var(--vdw-flow, 2.5rem);
}

.vdw-event__hero img {
    display: block;
    width: 100%;
    height: auto;
}

.vdw-event__header {
    padding-top: 3rem;
    border-top: 6px solid var(--vdw-accent, var(--vdw-color-blau));
    margin-bottom: var(--vdw-flow, 2.5rem);
}

.vdw-event__hero + .vdw-event__header {
    padding-top: 0;
    border-top: none;
}

.vdw-event__title {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 700;
    margin: 0 0 1rem;
    color: var(--vdw-contrast, #1a1a1a);
    /* W2-B-01: Komposita breiter als die Spalte brechen nur dann im Wort. */
    overflow-wrap: break-word;
}

.vdw-event__daterange {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--vdw-contrast, #1a1a1a);
    font-variant-numeric: tabular-nums;
    margin: 0 0 0.25rem;
}

.vdw-event__location {
    display: block;
    font-size: 0.9375rem;
    color: #555; /* muted meta grey — magazine-local */
    margin: 0;
}

.vdw-event__lead {
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--vdw-schwarz-80, #333);
    margin: 0 0 var(--vdw-flow, 2.5rem);
}

.vdw-event__body {
    margin: 0 0 var(--vdw-flow, 2.5rem);
}

.vdw-event__body :first-child {
    margin-top: 0;
}

.vdw-event__programm {
    margin: 0 0 var(--vdw-flow, 2.5rem);
    padding-top: var(--vdw-flow, 2.5rem);
    border-top: 1px solid #e0e0e0;
}

.vdw-event__programm-title {
    font-size: 1.25rem;
    margin: 0 0 1rem;
}

.vdw-event__fee {
    font-size: 0.9375rem;
    color: #333;
    margin: 0 0 var(--vdw-flow, 2.5rem);
    padding: 1rem 1.25rem;
    background: var(--vdw-color-blau-20);
}

.vdw-event--lila .vdw-event__fee {
    background: var(--vdw-color-lila-20);
}

.vdw-event--tuerkis .vdw-event__fee {
    background: var(--vdw-color-tuerkis-20);
}

.vdw-event--gruengelb .vdw-event__fee {
    background: var(--vdw-color-gruengelb-20);
}

/* CTA band — Anmeldebutton (upcoming) or a muted past-event notice. */
.vdw-event__cta {
    margin: 0 0 var(--vdw-flow, 2.5rem);
    padding: 1.5rem min(1.5rem, 7.5vw);
    background: var(--vdw-color-blau-20);
    text-align: center;
}

.vdw-event--lila .vdw-event__cta {
    background: var(--vdw-color-lila-20);
}

.vdw-event--tuerkis .vdw-event__cta {
    background: var(--vdw-color-tuerkis-20);
}

.vdw-event--gruengelb .vdw-event__cta {
    background: var(--vdw-color-gruengelb-20);
}

/*
 * Linkfarben-Regel (CLAUDE.md): das Elementor-Kit färbt `.elementor-kit-N a`
 * mit (0,1,1) und `a:hover` mit (0,2,1). Die Schriftfarbe sitzt deshalb auf
 * `.vdw-event__cta a.vdw-event__cta-button` (0,2,1) plus eigener
 * :hover/:focus-visible-Variante (0,3,1) — hält unabhängig davon, ob das Kit
 * vor oder nach magazine.css gedruckt wird.
 */
.vdw-event__cta a.vdw-event__cta-button {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    /* W2-B-01: nie breiter als das CTA-Band; Beschriftung bricht um, und das
       Seitenpolster wächst bei großer Schrift nicht über 10vw hinaus. */
    max-width: 100%;
    min-height: 44px; /* WCAG 2.5.5 touch target */
    padding: 0.75rem min(2rem, 10vw);
    text-align: center;
    overflow-wrap: break-word;
    background: var(--vdw-accent, var(--vdw-color-blau, #1c388f));
    color: var(--vdw-weiss, #fff);
    font-weight: 600;
    text-decoration: none;
    border: none;
}

.vdw-event--tuerkis .vdw-event__cta a.vdw-event__cta-button {
    background: var(--vdw-color-tuerkis, #009bb5);
    color: var(--vdw-on-tuerkis, #f5f5f5);
}

.vdw-event--gruengelb .vdw-event__cta a.vdw-event__cta-button {
    /* Grün-Gelb accent fails text contrast — force blau for the button label */
    background: var(--vdw-color-blau, #1c388f);
}

.vdw-event__cta a.vdw-event__cta-button:hover,
.vdw-event__cta a.vdw-event__cta-button:focus-visible {
    color: var(--vdw-weiss, #fff);
    text-decoration: underline;
}

.vdw-event__cta-past {
    font-size: 0.9375rem;
    color: #555;
    margin: 0;
}

.vdw-event__download {
    margin: 0 0 var(--vdw-flow, 2.5rem);
}

.vdw-event__download-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px; /* WCAG 2.5.5 touch target */
    padding: 0.5rem 0;
    color: var(--vdw-color-blau);
    font-weight: 600;
    text-decoration: none;
}

.vdw-event__download-link:hover,
.vdw-event__download-link:focus-visible {
    text-decoration: underline;
}

/* Ansprechperson — person-card pattern (photo + name). */
.vdw-event__contact {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: var(--vdw-flow, 2.5rem);
    border-top: 1px solid #e0e0e0;
}

.vdw-event__contact-photo {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.vdw-event__contact-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--vdw-contrast, #1a1a1a);
}

/* --------------------------------------------------------------------------
   WP-F — event-cta block (src/blocks/event-cta). Compact teaser card used in
   article bodies / cross-links to promote an event. Reuses the --vdw-accent
   pattern via .vdw-event-cta--{farbe} modifiers set inline by render.php.
   -------------------------------------------------------------------------- */

.vdw-event-cta {
    display: flex;
    flex-direction: column;
    border: 1px solid #e0e0e0;
    border-top: 4px solid var(--vdw-accent, var(--vdw-color-blau));
    background: #fff;
    overflow: hidden;
}

.vdw-event-cta--blau     { --vdw-accent: var(--vdw-color-blau); }
.vdw-event-cta--lila     { --vdw-accent: var(--vdw-color-lila); }
.vdw-event-cta--tuerkis  { --vdw-accent: var(--vdw-color-tuerkis); }
.vdw-event-cta--gruengelb {
    /* Grün-Gelb: accent used as background/border only — WCAG contrast 1.5:1 */
    --vdw-accent: var(--vdw-color-gruengelb);
}

.vdw-event-cta__image {
    display: block;
    width: 100%;
    height: auto;
}

.vdw-event-cta__body {
    padding: 1.25rem 1.5rem;
}

.vdw-event-cta__date {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--vdw-accent, var(--vdw-color-blau));
    font-variant-numeric: tabular-nums;
    margin: 0 0 0.5rem;
}

.vdw-event-cta--gruengelb .vdw-event-cta__date {
    /* Grün-Gelb accent fails text contrast — fall back to dark neutral */
    color: var(--vdw-contrast, #1a1a1a);
}

.vdw-event-cta__title {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    color: var(--vdw-contrast, #1a1a1a);
}

.vdw-event-cta__location {
    display: block;
    font-size: 0.875rem;
    color: #555; /* muted meta grey — magazine-local */
    margin: 0 0 1rem;
}

.vdw-event-cta__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px; /* WCAG 2.5.5 touch target */
    padding: 0.5rem 1.5rem;
    background: var(--vdw-accent, var(--vdw-color-blau));
    color: var(--vdw-weiss, #fff);
    font-weight: 600;
    text-decoration: none;
    border: none;
    align-self: flex-start;
}

/* Kein Grüngelb-Override mehr: Er zwang den Button auf blauen Grund, während
   die Block-Bibliothek für diese Variante dunkle Schrift setzt — zusammen
   ergab das #1a1a1a auf #1c388f, also 1,67:1. Der Block regelt die Variante
   selbst korrekt (grüngelber Grund + dunkle Schrift, ~15:1); Grüngelb bleibt
   damit reine Hintergrundfarbe, wie es das CI verlangt. */

.vdw-event-cta__button:hover,
.vdw-event-cta__button:focus-visible {
    text-decoration: underline;
}

.vdw-event-cta__past {
    font-size: 0.875rem;
    font-weight: 600;
    color: #555;
    align-self: flex-start;
}

/* Teilen-Leiste ==========================================================
 *
 * `VDW_Magazine_Share` gibt diese Navigation seit jeher aus, ein Stylesheet
 * dafür gab es nie — die drei Links rendern als nackter Fließtext in der
 * Theme-Linkfarbe (türkis auf weiß, Kontrast 2,6:1). Hier bekommen sie zum
 * ersten Mal eine Form: kantige Outline-Buttons im VdW-Blau, die beim Hover
 * volllaufen.
 *
 * Alle Farbregeln adressieren `a.vdw-share__link` innerhalb von `.vdw-share`
 * (Spezifität 0,2,1), weil klassische Themes jedes `a` global einfärben und
 * deren `.elementor-kit-NNNN a` (0,1,1) eine einfache Blockklasse (0,1,0)
 * schlägt. Wichtig: die Hover-Variante des Kits liegt bei (0,2,1) und damit
 * gleichauf mit `.parent a.element` — bei Gleichstand gewinnt das später
 * gedruckte Kit-CSS. Deshalb gehört zu jeder solchen Regel zwingend eine
 * eigene `:hover, :focus-visible`-Variante (0,3,1).
 */
.vdw-share {
    /* Gleiche Spaltenbreite wie `.vdw-article`, damit die Leiste bündig unter
       dem Fließtext sitzt statt eingerückt zu schweben. */
    max-width: 62rem;
    margin: 2.5rem auto 0;
    padding: 1.5rem var(--vdw-gutter, 1.5rem) 0;
    border-top: 1px solid #e0e0e0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.vdw-share__label {
    margin-right: 0.25rem;
    font-family: var(--vdw-font-base, "Open Sans", system-ui, sans-serif);
    font-size: 0.875rem;
    font-weight: 700;
    color: #555;
}

/* Die Dienste sind seit 2026-09-21 reine Symbole (#29) — der sichtbare Name
   ist weg, also braucht der Knopf ein quadratisches statt eines an der
   Textlänge hängenden Ziels. */
.vdw-share a.vdw-share__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px; /* WCAG 2.5.5 touch target */
    min-width: 44px;
    padding: 0.5rem;
    border: 2px solid var(--vdw-color-blau, #1c388f);
    border-radius: 0; /* kantig — VdW-CI */
    background: transparent;
    color: var(--vdw-color-blau, #1c388f);
    font-family: var(--vdw-font-base, "Open Sans", system-ui, sans-serif);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}

.vdw-share a.vdw-share__link:hover,
.vdw-share a.vdw-share__link:focus-visible {
    background: var(--vdw-color-blau, #1c388f);
    color: #fff;
    text-decoration: none;
}

.vdw-share a.vdw-share__link:focus-visible {
    outline: 3px solid var(--vdw-contrast, #1a1a1a);
    outline-offset: 2px;
}

/* Screenreader-only Utility — bewusst UNSCOPED.

   Die globale Definition liegt in `vdw-theme/assets/css/tokens.css`, also im
   Relaunch-Block-Theme, das auf Prod/Staging (Hello Biz) nie geladen wird.
   Bisher existierte sie nur blocklokal in vier Blöcken; überall sonst rendete
   der Hinweistext sichtbar mit — am 2026-08-18 am Anmelde-Button beobachtet
   ("Jetzt anmelden (öffnet in neuem Tab)").

   `magazine.css` liegt auf jeder Magazin-Seite und deckt damit auch die
   klassisch emittierten Stellen ab (Teilen-Leiste, Ansprechpartner-Anhang,
   Startseiten-Templates), bei denen kein Block-CSS mitgeladen wird. */
.vdw-sr-only {
    /* Keep clipped text out of scrollable layout while retaining its accessible name. */
    position: absolute;
    width: 0.0625rem;
    height: 0.0625rem;
    margin: -0.0625rem;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {

    .vdw-share a.vdw-share__link {
        transition: none;
    }
}

/* Theme-Override-Schutz für die übrigen Magazin-Links ---------------------
 *
 * Gleiche Ursache wie oben: Breadcrumb, Paging und Ausgaben-Link setzen ihre
 * Farbe über eine einfache Blockklasse und verlieren gegen die globale
 * Theme-Linkregel. Ohne diese Nachschärfung erscheinen sie türkis (2,6:1)
 * statt im VdW-Blau (10,4:1).
 */
.vdw-article-breadcrumb a.vdw-article-breadcrumb__link,
.vdw-article-breadcrumb a.vdw-article-breadcrumb__link:hover,
.vdw-article-breadcrumb a.vdw-article-breadcrumb__link:focus-visible {
    color: var(--vdw-color-blau, #1c388f);
}

.vdw-article-paging a.vdw-article-paging__link,
.vdw-article-paging a.vdw-article-paging__link:hover,
.vdw-article-paging a.vdw-article-paging__link:focus-visible {
    color: #1a1a1a;
}

.vdw-article-paging a.vdw-article-paging__issue,
.vdw-article-paging a.vdw-article-paging__issue:hover,
.vdw-article-paging a.vdw-article-paging__issue:focus-visible {
    color: var(--vdw-color-blau, #1c388f);
}

/* Inline-Links im Artikel-Fließtext (W5-FE-02) ---------------------------
 *
 * Links im Absatz- und Listentext des Artikelkörpers (direkt oder im
 * Textblock) erschienen in der Kit-Linkfarbe (türkis 0,8, ohne
 * Unterstreichung, ~2,6:1) — weder lesbar (WCAG 1.4.3) noch ohne Farbe als
 * Link erkennbar (1.4.1). Jetzt VdW-Blau (10,4:1) und unterstrichen.
 * Nur Links OHNE eigene Klasse: Buttons und Block-Links behalten ihr Design.
 * Spezifität (0,2,2) schlägt `.elementor-kit-N a` (0,1,1), die Hover-/
 * Fokus-Variante (0,3,2) das Kit-Hover (0,2,1).
 */
.vdw-article > p a:not([class]),
.vdw-article > :is(ul, ol) li a:not([class]),
.vdw-article > .vdw-text p a:not([class]),
.vdw-article > .vdw-text li a:not([class]) {
    color: var(--vdw-color-blau, #1c388f);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
}

.vdw-article > p a:not([class]):is(:hover, :focus-visible),
.vdw-article > :is(ul, ol) li a:not([class]):is(:hover, :focus-visible),
.vdw-article > .vdw-text p a:not([class]):is(:hover, :focus-visible),
.vdw-article > .vdw-text li a:not([class]):is(:hover, :focus-visible) {
    color: var(--vdw-color-blau, #1c388f);
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
}

/* Ansprechpartner-Anhang (`VDW_Magazine_Person_Append`) ------------------
 *
 * Das Modul emittiert `.vdw-person-card`-BEM klassisch unter jedem Artikel.
 * Steckt im Artikelkörper kein person-card-BLOCK, lädt dessen Stylesheet gar
 * nicht — die Kontaktlinks erben dann die Theme-Linkfarbe (türkis, 2,6:1).
 * Hover-Variante ist Pflicht, siehe Begründung oben. */
.vdw-person-card a.vdw-person-card__link,
.vdw-person-card a.vdw-person-card__link:hover,
.vdw-person-card a.vdw-person-card__link:focus-visible {
    color: var(--vdw-color-blau, #1c388f);
}

/* Archive navigation must retain its own colours against the Elementor kit. */
.vdw-archive a.vdw-archive__link,
.vdw-archive a.vdw-archive__link:hover,
.vdw-archive a.vdw-archive__link:focus-visible {
    color: #1c388f;
    overflow-wrap: anywhere;
    hyphens: manual;
    overflow-wrap: break-word;
}

.vdw-archive a.vdw-archive__link:hover .vdw-archive__item-title,
.vdw-archive a.vdw-archive__link:focus-visible .vdw-archive__item-title {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.vdw-archive a.vdw-archive__link:focus-visible,
.vdw-archive__pagination a.page-numbers:focus-visible {
    outline: 3px solid #1c388f;
    outline-offset: 3px;
}

.vdw-archive__pagination {
    margin-block: 2rem;
}

.vdw-archive__pagination ul.page-numbers {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.vdw-archive__pagination li {
    margin: 0;
}

.vdw-archive__pagination a.page-numbers,
.vdw-archive__pagination span.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #1c388f;
    color: #1c388f;
    background: #fff;
    text-decoration: none;
    line-height: 1.4;
}

.vdw-archive__pagination a.page-numbers:hover,
.vdw-archive__pagination a.page-numbers:focus-visible,
.vdw-archive__pagination span.page-numbers.current {
    color: #fff;
    background: #1c388f;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.vdw-archive__pagination span.page-numbers.current {
    font-weight: 700;
    text-decoration: none;
}

.vdw-archive__pagination span.page-numbers.dots {
    border-color: transparent;
}

/* Redaktionsvorschau-Hinweis (VDW_Magazine_Editorial::prepare_preview) ---
   Stand bisher ungestylt als Fließtext über dem Kopf. Eigene Leiste; Links
   mit (0,1,2)/(0,2,2) gegen `.elementor-kit-N a` bzw. `a:hover`. */
.vdw-editorial-preview {
  position: relative;
  z-index: 32;
  padding: 0.5rem 1rem;
  background: var(--vdw-color-lila, #5d2082);
  color: #fff;
  font-size: 0.875rem;
  line-height: 1.4;
}

body .vdw-editorial-preview a,
body .vdw-editorial-preview a:hover,
body .vdw-editorial-preview a:focus-visible {
  color: #fff;
  text-decoration: underline;
}

.vdw-event--tuerkis .vdw-event__cta a.vdw-event__cta-button:hover,
.vdw-event--tuerkis .vdw-event__cta a.vdw-event__cta-button:focus-visible {
    color: var(--vdw-on-tuerkis, #f5f5f5);
}