/**
 * Bento-Editorial magazine startpage (preview: /magazin?preview=bento).
 *
 * „Farbarchitektur-Bento" look (Marketing-Favorit Fee+Jan): Spektrum-Rubrikfarben
 * als vollflächige Kapitel-Architektur, eckig durchgehend (border-radius:0),
 * farbcodiertes Inhaltsverzeichnis, große Typo-Kontraste.
 *
 * Layout: das Inhaltsverzeichnis ist eine sticky Rail links (.vdw-bento__shell
 * = [IV-Rail | Content]). Die Farbbänder (.vdw-bento__bleed) fluten die VOLLE
 * Viewportbreite — auch hinter der Sidebar — via negative Ränder relativ zum
 * zentrierten Container (--vdw-mtl), mit passendem Padding, das den Innencontent
 * bündig auf c-main hält (deckungsgleich mit den weißen Sektionen). `overflow-x:
 * clip` am .vdw-bento fängt den Rand-/Scrollbar-Überhang. Setzt voraus, dass
 * <main class="vdw-bento"> auf Hello Biz die volle Viewportbreite einnimmt
 * (auf Staging verifiziert). Kein 100vw für die Innenausrichtung (Scrollbar-Fehler
 * kürzt sich zwischen margin und padding via gemeinsamem --vdw-mtl-Term).
 *
 * Tokens: nur die in magazine.css gebrückten Marken-Tokens (--vdw-color-*,
 * --vdw-accent, -20-Tints, --vdw-tuerkis-text-bg, --vdw-gutter, --vdw-font-base).
 * Spacing/Schriftgrößen als Literale — die --vdw-sp/fs-Skala ist auf klassischen
 * Themes (Hello Biz) UNDEFINIERT, daher hier bewusst nicht genutzt.
 */

/* Layout-Wrapper: Named-Line-Grid für randlose Farbbänder --------------- */
.vdw-bento {
  --vdw-bento-container: 99rem;
  --vdw-bento-read: 75rem;
  /* W2-V-02: Untergrenze min(1rem, 5vw) statt 1rem — bei Standardschrift
     unverändert (16 px), bei großer Schrift auf schmalen Geräten wächst der
     Rand nicht mehr mit der Schrift (32 px Schrift: 24 statt 32 px je Ebene). */
  --vdw-bento-gutter: var(--vdw-gutter, clamp(min(1rem, 5vw), 0.5rem + 2.5vw, 2.5rem));
  --vdw-iv-w: clamp(15rem, 21vw, 19rem);
  --vdw-shell-gap: clamp(1.25rem, 2.5vw, 2.5rem);
  /* Linker Rand des zentrierten Main-Tracks (Viewport→Container). Basis für den
     Vollbreiten-Ausbruch der Farbbänder hinter die INHALT-Sidebar. */
  --vdw-mtl: max(var(--vdw-bento-gutter), (100vw - var(--vdw-bento-container)) / 2);
  /* Höhe des sticky Kopf-Stacks: 8px Spektrum-Leiste + ~3.4rem Topbar.
     Speist Sidebar-Offset + Ankersprung-Freiraum. */
  --vdw-topbar-h: 3.9rem;
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--vdw-bento-gutter), 1fr)
    [main-start] minmax(0, var(--vdw-bento-container))
    [main-end] minmax(var(--vdw-bento-gutter), 1fr)
    [full-end];
  overflow-x: clip;
  /* Die Luft zum Footer steckte früher im blauen Newsletter-Band, das unten
     viel padding trug. Das Band ist entfallen — der Abstand muss jetzt hier
     stehen, sonst klebt die letzte Sektion am Website-Footer. */
  padding-bottom: clamp(4rem, 2rem + 4vw, 7rem);
  color: var(--vdw-color-ink, #1a1a1a);
  font-family: var(--vdw-font-base, "Open Sans", system-ui, sans-serif);
  font-size: 1rem;
  line-height: 1.6;
}

/* Every direct child sits in the centered main column by default … */
.vdw-bento > * {
  grid-column: main-start / main-end;
  min-width: 0;
}

/* … außer Verbandsleiste und Spektrum-Band: die laufen randlos (Codex-Review
   #61 — ihre Regeln stehen in magazine-topbar.css, das VOR diesem Stylesheet
   lädt und den Gleichstand mit `.vdw-bento > *` sonst verliert). */
.vdw-bento > .vdw-mag-util,
.vdw-bento > .vdw-bento__spectrum {
  grid-column: full-start / full-end;
}

/* Shell = sticky Inhaltsverzeichnis-Rail links + Content-Spalte rechts.
   (Mockup-Fallback: die Farbkapitel fluten randlos die CONTENT-Spalte statt
   den vollen Viewport — WP-robust ohne 100vmax/clip-path, IV bleibt sticky.) */
.vdw-bento__shell {
  grid-column: main-start / main-end;
  display: grid;
  grid-template-columns: var(--vdw-iv-w) minmax(0, 1fr);
  gap: 0 var(--vdw-shell-gap);
  align-items: start;
}

.vdw-bento__shell--solo {
  grid-template-columns: minmax(0, 1fr);
  /* Kein Inhaltsverzeichnis (leerer Pool) → kein Sidebar-Offset; die Bänder
     fluten symmetrisch um den zentrierten Container (analog is-collapsed). */
  --vdw-iv-w: 0rem;
  --vdw-shell-gap: 0rem;
}

/* Content column re-establishes a named-line grid so its bands bleed randlos
   from edge to edge of the column, inner content re-aligns to c-main. */
.vdw-bento__content {
  grid-column: 2;
  min-width: 0;
  display: grid;
  grid-template-columns:
    [c-full-start] var(--vdw-bento-gutter)
    [c-main-start] minmax(0, 1fr)
    [c-main-end] var(--vdw-bento-gutter)
    [c-full-end];
  align-content: start;
  /* o3-Rhythmus: Farbbänder/Sektionen schweben mit Weißraum dazwischen
     (o3 = 64–80px), nicht bündig aneinander. Responsiv 2.5rem→5rem. */
  row-gap: clamp(2.5rem, 1.5rem + 3vw, 5rem);
}

.vdw-bento__shell--solo .vdw-bento__content {
  grid-column: 1;
}

.vdw-bento__content > * {
  grid-column: c-main-start / c-main-end;
  min-width: 0;
}

/* … full-bleed bands span the content column and re-establish the grid so
   their inner content re-aligns to the main track. */
.vdw-bento__content > .vdw-bento__bleed {
  grid-column: c-full-start / c-full-end;
}

.vdw-bento__bleed {
  display: grid;
  grid-template-columns: inherit;
}

.vdw-bento__bleed > * {
  grid-column: c-main-start / c-main-end;
  min-width: 0;
}

/* Ab 64rem (Sidebar sichtbar: iPad quer + Desktop): die farbigen Bänder fluten
   die VOLLE Viewportbreite — auch hinter die sticky INHALT-Sidebar. Der
   Hintergrund bricht per negativen Rändern bis an beide Viewport-Ränder aus
   (overflow-x:clip am .vdw-bento fängt den Rest); der Innencontent wird per
   Padding zurück in die Content-Spalte gedrückt, bündig mit den weißen Sektionen
   (c-main). Die Sidebar liegt per z-index oben. */
@media (min-width: 64rem) {
  .vdw-bento__content > .vdw-bento__bleed {
    display: block;
    position: relative;
    z-index: 0;
    margin-left: calc(-1 * (var(--vdw-mtl) + var(--vdw-iv-w) + var(--vdw-shell-gap)));
    margin-right: calc(-1 * var(--vdw-mtl));
    padding-left: calc(var(--vdw-mtl) + var(--vdw-iv-w) + var(--vdw-shell-gap) + var(--vdw-bento-gutter));
    padding-right: calc(var(--vdw-mtl) + var(--vdw-bento-gutter));
  }

  /* Sidebar über den durchlaufenden Farbbändern. */
  .vdw-bento__shell:not(.is-collapsed) .vdw-bento__iv {
    z-index: 20;
  }
  /* (Kapitelnummer braucht KEINEN Offset: ihr Bezugsrahmen ist die
     position:relative .vdw-bento__chapter-head, die durch das Band-Padding
     bereits bei c-main-end endet → right:0 sitzt korrekt am Content-Rand.) */
}

.vdw-bento *,
.vdw-bento *::before,
.vdw-bento *::after {
  box-sizing: border-box;
}

/* Hausregel eckig: nie runde Ecken. */
.vdw-bento :where(img, figure, button, input, .vdw-bento__card, .vdw-bento__media) {
  border-radius: 0;
}

.vdw-bento img {
  max-width: 100%;
}

.vdw-bento h1,
.vdw-bento h2,
.vdw-bento h3,
.vdw-bento p,
.vdw-bento ol,
.vdw-bento ul,
.vdw-bento figure,
.vdw-bento blockquote {
  margin: 0;
}

.vdw-bento a {
  color: inherit;
}

/* Linkfarben-Regel: `.vdw-bento a` liegt mit (0,1,1) gleichauf mit
   `.elementor-kit-N a`. In der Redaktionsvorschau druckt WordPress das Kit-CSS
   NACH diesem Stylesheet — Titel, Inhaltsverzeichnis und Bildlinks standen dort
   in der Theme-Linkfarbe (türkis, Feedback Runde 3). Deshalb (0,2,1) plus
   eigene :hover-/:focus-visible-Variante (0,3,1) gegen `.elementor-kit-N a:hover`. */
.vdw-bento .vdw-bento__lead-title a,
.vdw-bento .vdw-bento__card-title a,
.vdw-bento .vdw-bento__termin-title a,
.vdw-bento .vdw-bento__focus-title a,
.vdw-bento a.vdw-bento__iv-link,
.vdw-bento a.vdw-bento__media-link,
.vdw-bento .vdw-bento__lead-title a:hover,
.vdw-bento .vdw-bento__lead-title a:focus-visible,
.vdw-bento .vdw-bento__card-title a:hover,
.vdw-bento .vdw-bento__card-title a:focus-visible,
.vdw-bento .vdw-bento__termin-title a:hover,
.vdw-bento .vdw-bento__termin-title a:focus-visible,
.vdw-bento .vdw-bento__focus-title a:hover,
.vdw-bento .vdw-bento__focus-title a:focus-visible,
.vdw-bento a.vdw-bento__iv-link:hover,
.vdw-bento a.vdw-bento__iv-link:focus-visible,
.vdw-bento a.vdw-bento__media-link:hover,
.vdw-bento a.vdw-bento__media-link:focus-visible {
  color: var(--vdw-color-ink, #1a1a1a);
}

/* Quellenlink im Stimme-Band: folgt der Farbe der Quellenzeile (weiß auf dem
   Vollfarb-Band, dunkel auf Tint/Grüngelb — dort setzen spätere (0,3,1)-Regeln
   die Farbe direkt und gewinnen den Gleichstand per Quellreihenfolge). */
.vdw-bento .vdw-bento__quote-cite a,
.vdw-bento .vdw-bento__quote-cite a:hover,
.vdw-bento .vdw-bento__quote-cite a:focus-visible {
  color: inherit;
}

/* Anchor jumps clear the sticky Spektrum+Topbar-Stack.
   `.vdw-bento__masthead[id]` kam mit dem Vollbild-Einstieg dazu: dessen
   Scroll-Signal springt auf #vdw-masthead, das sonst unter dem Kopf-Stack
   landet. */
.vdw-bento [id^="artikel-"],
.vdw-bento [id^="band-"],
.vdw-bento__section[id],
.vdw-bento__masthead[id],
.vdw-bento__ad[id] {
  /* Kopf-Stapel inkl. Adminleiste und IMMER der Verbandsleiste: ein Sprung
     nach oben blendet sie wieder ein (Codex-Review #61). W2-03: deren echte
     Höhe (--vdw-util-h, magazine-head.js) statt fest 2rem, ebenso Spektrum +
     Magazinleiste (--vdw-head-h) statt fest 3.9rem — beide brechen bei großer
     Schrift um, das Ziel landete sonst unter dem Kopf. */
  scroll-margin-top: calc(var(--vdw-head-h, 3.9rem) + 1rem + var(--vdw-adminbar, 0px) + var(--vdw-util-h, 2rem));
}

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

/* Accent per section/card (already emitted via .vdw-article--* from magazine.css,
   redefined here defensively so the surfaces work even without that stylesheet). */
.vdw-bento .vdw-article--blau { --vdw-accent: var(--vdw-color-blau, #1c388f); }
.vdw-bento .vdw-article--lila { --vdw-accent: var(--vdw-color-lila, #5d2082); }
.vdw-bento .vdw-article--tuerkis { --vdw-accent: var(--vdw-color-tuerkis, #009bb5); }
.vdw-bento .vdw-article--gruengelb { --vdw-accent: var(--vdw-color-gruengelb, #c7d300); }

/* Spektrum-Leiste (full-bleed, sticky über der Topbar) ----------------- */
/* Spektrum-Band, Verbandsleiste und alle sticky-Versätze: magazine-topbar.css. */

/* Host-Seite: (Elementor-)Theme-Header NICHT mitkleben lassen -----------
   Auf der Bento-Startseite übernimmt die schlanke .vdw-bento__topbar das
   Sticky. Hello Biz macht die inneren Header-Container per Elementor-Pro-JS
   `position:fixed` (Klasse .elementor-sticky--active) und schiebt einen
   .elementor-sticky__spacer als Höhen-Platzhalter ein — beides kollidiert bei
   top:0 mit der Topbar bzw. hinterlässt eine Lücke. Container zurück in den
   Fluss zwingen (scrollt normal weg) und Spacer entfernen. Scoped auf
   body.vdw-magazin-bento (Live gegen Staging verifiziert, 2026-07-21). */
body.vdw-magazin-bento .elementor-location-header .elementor-sticky--active {
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  width: auto !important;
  transform: none !important;
  box-shadow: none !important;
  animation: none !important;
}

body.vdw-magazin-bento .elementor-location-header .elementor-sticky__spacer {
  display: none !important;
}

/* Shared topbar styles are loaded through magazine-topbar.css. */

.vdw-bento button.vdw-bento__toc-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 0;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff;
  background: var(--vdw-color-ink, #1a1a1a);
  border: 0;
  /* Explicit (not only via :where()): outrank Elementor/theme button radius. */
  border-radius: 0;
  padding: 0.4rem 0.9rem;
  min-height: 2.75rem;
  cursor: pointer;
  white-space: nowrap;
}

/* Das Elementor-Kit stylt jedes <button> generisch hell mit einem
   invertierenden :hover/:focus-Zustand (Spezifität 0,1,1 bzw. 0,2,1). Der
   Toggle soll stattdessen SEINEN Zustand spiegeln, statt permanent gefüllt zu
   wirken: an (IV sichtbar, aria-expanded=true) = gefüllt dunkel; aus (IV
   ausgeblendet, aria-expanded=false) = heller Umriss. Der Zustandsselektor
   [aria-expanded] hebt die Spezifität auf 0,3,0/0,4,0 → schlägt Elementor in
   allen States (auch dem haftenden :focus nach Mausklick). Feste Literale statt
   var(--vdw-color-ink) — das Ink-Token ist auf Hello Biz nicht gebrückt. Der
   Tastatur-Fokusring aus `.vdw-bento :focus-visible` bleibt unberührt. */
.vdw-bento .vdw-bento__toc-toggle {
  border: 1px solid #1a1a1a;
}

.vdw-bento .vdw-bento__toc-toggle[aria-expanded="true"],
.vdw-bento .vdw-bento__toc-toggle[aria-expanded="true"]:hover,
.vdw-bento .vdw-bento__toc-toggle[aria-expanded="true"]:focus {
  color: #fff;
  background: #1a1a1a;
  border-color: #1a1a1a;
}

.vdw-bento .vdw-bento__toc-toggle[aria-expanded="false"],
.vdw-bento .vdw-bento__toc-toggle[aria-expanded="false"]:hover,
.vdw-bento .vdw-bento__toc-toggle[aria-expanded="false"]:focus {
  color: #1a1a1a;
  background: #fff;
  border-color: #1a1a1a;
}

/* Kein Fokusring nach Mausklick: Hello Elementor setzt `button:focus` einen
   blauen Systemring, der nach dem Klick stehen blieb. Der Tastaturring
   (:focus-visible) bleibt. */
.vdw-bento .vdw-bento__toc-toggle:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* Toggle sits at the far right of the topbar, after the chapter nav. */
.vdw-bento__topbar-inner .vdw-bento__toc-toggle {
  margin-left: 0.75rem;
  flex: none;
}

/* Scrim behind the IV drawer (phones + tablets). Bewusst LEICHT (0.15): der
   Seiteninhalt neben dem ~22rem breiten Drawer soll sichtbar bleiben und nur
   dezent überlagert werden — der Drawer floatet über dem Heft, statt es zu
   verdecken. Klickbar zum Schließen. */
.vdw-bento button.vdw-bento__iv-scrim,
.vdw-bento button.vdw-bento__iv-scrim:hover,
.vdw-bento button.vdw-bento__iv-scrim:focus {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 210;
  background: rgba(26, 26, 26, 0.15);
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

/* Full-image cover: typography sits directly in the editorial negative space. */
.vdw-bento__atf {
  --atf-pad: clamp(1.25rem, 4vw, 4.5rem);
  --atf-focus: var(--atf-desktop-focus, 50% 50%);
  --atf-text: #1c388f;
  --atf-surface: 255, 255, 255;
  grid-column: full-start / full-end;
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(4rem, 1fr) auto;
  gap: 0;
  min-height: calc(100vh - var(--vdw-header-h, 80px));
  min-height: min(52rem, max(30rem, calc(100svh - var(--vdw-header-h, 80px))));
  background: rgb(var(--atf-surface, 255, 255, 255));
  font-family: var(--vdw-font-base, "Open Sans", sans-serif);
}

.vdw-atf__motiv,
.vdw-atf__motiv-wrap {
  grid-area: 1 / 1 / 4 / 2;
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: var(--atf-focus, 50% 50%);
}

.vdw-atf__inner {
  width: 100%;
  max-width: var(--vdw-bento-container, 99rem);
  margin-inline: auto;
  padding-inline: var(--atf-pad, 1.5rem);
  min-width: 0;
  box-sizing: border-box;
}

.vdw-atf__head {
  grid-area: 1 / 1;
  padding-block: clamp(1.5rem, 3vw, 2.75rem);
  position: relative;
}

.vdw-atf__head-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-right: calc(var(--atf-pad, 1.5rem) + 1rem);
}

.vdw-atf__publication {
  min-width: 0;
  padding: 0.7rem 1rem;
  background: #1c388f;
  color: #fff;
}

.vdw-bento .vdw-atf__flag {
  margin: 0;
  color: #fff;
  font-size: calc(clamp(1.125rem, 1.6vw, 1.5rem) * var(--atf-masthead-scale, 1));
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.035em;
  white-space: nowrap;
}

.vdw-bento .vdw-atf__edition-note {
  overflow-wrap: break-word;
  margin: 0.4rem 0 0;
  color: #fff;
  font-size: calc(0.75rem * var(--atf-tagline-scale, 1));
  line-height: 1.45;
  font-weight: 400;
  max-width: none;
}

.vdw-bento .vdw-atf__issue {
  margin: 0;
  width: fit-content;
  padding: 0.7rem 0.85rem;
  background: #1c388f;
  color: #fff;
  font-size: calc(clamp(0.75rem, 1vw, 0.875rem) * var(--atf-label-scale, 1));
  font-weight: 600;
  line-height: 1.4;
  text-align: right;
  max-width: 20ch;
  overflow-wrap: anywhere;
}

.vdw-bento .vdw-atf__credit {
  position: absolute;
  z-index: 2;
  top: 0.875rem;
  right: 0.4rem;
  max-height: calc(100% - 2rem);
  padding: 0.5rem 0.3rem;
  background: #1c388f;
  color: #fff;
  font-size: calc(0.625rem * var(--atf-credit-scale, 1));
  line-height: 1.2;
  writing-mode: vertical-rl;
  overflow-wrap: anywhere;
}

.vdw-atf__foot {
  grid-area: 3 / 1;
  position: relative;
  padding-block: 1.5rem clamp(3rem, 8svh, 6rem);
  background: transparent;
}

.vdw-atf__foot-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  position: relative;
}

.vdw-atf__type {
  min-width: 0;
  width: 46%;
  max-width: 46rem;
}

.vdw-bento .vdw-atf__title {
  margin: 0;
  font-family: inherit;
  font-size: calc(clamp(2.5rem, 5vw, 5rem) * var(--atf-responsive-title-scale, var(--atf-title-scale, 1)));
  font-weight: var(--atf-title-weight, 700);
  line-height: 1.08;
  letter-spacing: -0.06em;
  max-width: 19ch;
  color: var(--atf-text, #1c388f);
  text-wrap: balance;
  overflow-wrap: anywhere;
  hyphens: manual;
}

.vdw-bento .vdw-atf__sub {
  margin: 1rem 0 0;
  max-width: 52ch;
  color: var(--atf-text, #1c388f);
  font-size: calc(clamp(1rem, 1.35vw, 1.125rem) * var(--atf-subtitle-scale, 1));
  line-height: 1.55;
  text-wrap: pretty;
  hyphens: manual;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}

.vdw-atf a.vdw-atf__scroll {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 48px;
  padding: 0.35rem 0;
  color: var(--atf-text, #1c388f);
  font-size: calc(0.875rem * var(--atf-button-scale, 1));
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  flex: 0 0 auto;
  max-width: 16rem;
}

.vdw-atf a.vdw-atf__scroll:hover,
.vdw-atf a.vdw-atf__scroll:focus-visible {
  color: var(--atf-text, #1c388f);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.vdw-atf__scroll-arrow {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.5rem;
  flex: none;
}

.vdw-atf :focus-visible {
  outline: 3px solid var(--atf-text, #1c388f);
  outline-offset: 4px;
  box-shadow: 0 0 0 7px rgb(var(--atf-surface, 255, 255, 255));
}

.vdw-atf[data-tone="dark"] {
  --atf-text: #fff;
  --atf-surface: 28, 56, 143;
}

.vdw-atf[data-position="right"] .vdw-atf__foot-inner {
  flex-direction: column;
  align-items: flex-end;
}

.vdw-atf[data-position="right"] .vdw-atf__type {
  text-align: right;
}

.vdw-atf[data-position="right"] .vdw-atf__sub {
  margin-left: auto;
}

@media (max-width: 47.99rem) {
  .vdw-bento__atf {
    --atf-focus: var(--atf-mobile-focus, 32% 50%);
    grid-template-rows: auto minmax(clamp(15rem, 40svh, 25rem), 1fr) auto;
  }

  .vdw-atf__head-inner {
    flex-wrap: wrap;
    gap: 0.65rem;
  }

  .vdw-bento .vdw-atf__issue { text-align: left; }

  .vdw-atf__foot-inner,
  .vdw-atf[data-position="right"] .vdw-atf__foot-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .vdw-atf__type { width: 100%; }
  .vdw-atf[data-position="right"] .vdw-atf__type { text-align: left; }
  .vdw-atf[data-position="right"] .vdw-atf__sub { margin-left: 0; }

  .vdw-bento .vdw-atf__title {
    font-size: calc(clamp(2rem, 8.6vw, 4rem) * var(--atf-responsive-title-scale, var(--atf-title-scale, 1)));
    letter-spacing: -0.045em;
  }

  .vdw-atf a.vdw-atf__scroll { align-self: flex-end; }
}

/* Layout alternatives share the same content and focal-point controls. */
.vdw-atf[data-has-image="false"] {
  background: rgb(var(--atf-surface, 255, 255, 255));
}

/* Split: a dedicated text column beside an uninterrupted photograph. */
.vdw-atf:is([data-layout="split"], [data-layout="window"]) {
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  grid-template-rows: auto minmax(20rem, 1fr);
  background: rgb(var(--atf-surface, 255, 255, 255));
}
.vdw-atf:is([data-layout="split"], [data-layout="window"]) :is(.vdw-atf__motiv, .vdw-atf__motiv-wrap) {
  grid-area: 1 / 1 / 3 / 2;
}
.vdw-atf:is([data-layout="split"], [data-layout="window"]) .vdw-atf__head { grid-area: 1 / 1 / 2 / 3; }
.vdw-atf:is([data-layout="split"], [data-layout="window"]) .vdw-atf__foot {
  grid-area: 2 / 2;
  align-self: center;
  padding-block: 3rem;
}
.vdw-atf:is([data-layout="split"], [data-layout="window"]) .vdw-atf__foot-inner {
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
}
.vdw-atf:is([data-layout="split"], [data-layout="window"]) .vdw-atf__type { width: 100%; text-align: left; }
.vdw-atf:is([data-layout="split"], [data-layout="window"]) .vdw-atf__title {
  font-size: calc(clamp(2rem, 3.8vw, 4.5rem) * var(--atf-responsive-title-scale, var(--atf-title-scale, 1)));
  letter-spacing: -0.05em;
}
.vdw-atf:is([data-layout="split"], [data-layout="window"])[data-position="left"] {
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
}
.vdw-atf:is([data-layout="split"], [data-layout="window"])[data-position="left"] :is(.vdw-atf__motiv, .vdw-atf__motiv-wrap) { grid-area: 1 / 2 / 3 / 3; }
.vdw-atf:is([data-layout="split"], [data-layout="window"])[data-position="left"] .vdw-atf__foot { grid-area: 2 / 1; }

@media (max-width: 47.99rem) {
  .vdw-atf:is([data-layout="split"], [data-layout="window"]),
  .vdw-atf:is([data-layout="split"], [data-layout="window"])[data-position="left"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(18rem, 1fr) auto;
  }
  .vdw-atf:is([data-layout="split"], [data-layout="window"]) .vdw-atf__head { grid-area: 1 / 1; }
  .vdw-atf:is([data-layout="split"], [data-layout="window"]) :is(.vdw-atf__motiv, .vdw-atf__motiv-wrap),
  .vdw-atf:is([data-layout="split"], [data-layout="window"])[data-position="left"] :is(.vdw-atf__motiv, .vdw-atf__motiv-wrap) { grid-area: 1 / 1 / 3 / 2; }
  .vdw-atf:is([data-layout="split"], [data-layout="window"]) .vdw-atf__foot,
  .vdw-atf:is([data-layout="split"], [data-layout="window"])[data-position="left"] .vdw-atf__foot { grid-area: 3 / 1; padding-block: 1.75rem; }
  .vdw-atf:is([data-layout="split"], [data-layout="window"]) .vdw-atf__title { font-size: calc(clamp(2rem, 8.6vw, 4rem) * var(--atf-responsive-title-scale, var(--atf-title-scale, 1))); }

}

/* Window: a complete photograph floats in the same field as the typography. */
.vdw-atf[data-layout="window"] :is(.vdw-atf__motiv, .vdw-atf__motiv-wrap),
.vdw-atf[data-layout="window"][data-position="left"] :is(.vdw-atf__motiv, .vdw-atf__motiv-wrap) {
  inset: var(--atf-pad, 1.5rem);
  width: calc(100% - 2 * var(--atf-pad, 1.5rem));
  height: calc(100% - 2 * var(--atf-pad, 1.5rem));
  object-fit: contain;
}
.vdw-atf[data-layout="window"] :is(.vdw-atf__motiv, .vdw-atf__motiv-wrap) { grid-area: 2 / 1 / 3 / 2; }
.vdw-atf[data-layout="window"][data-position="left"] :is(.vdw-atf__motiv, .vdw-atf__motiv-wrap) { grid-area: 2 / 2 / 3 / 3; }
.vdw-atf:is([data-layout="split"], [data-layout="window"]) .vdw-atf__sub {
  font-size: calc(clamp(1.125rem, 1.5vw, 1.5rem) * var(--atf-subtitle-scale, 1));
  line-height: 1.5;
  max-width: 32ch;
  margin: 1.25rem 0 0;
}
@media (max-width: 47.99rem) {
  .vdw-atf[data-layout="window"],
  .vdw-atf[data-layout="window"][data-position="left"] {
    grid-template-rows: auto minmax(14rem, 32svh) auto;
  }
  .vdw-atf[data-layout="window"] :is(.vdw-atf__motiv, .vdw-atf__motiv-wrap),
  .vdw-atf[data-layout="window"][data-position="left"] :is(.vdw-atf__motiv, .vdw-atf__motiv-wrap) {
    grid-area: 2 / 1 / 3 / 2;
    inset-block: 0;
    height: 100%;
  }
  .vdw-atf[data-layout="window"] .vdw-atf__foot,
  .vdw-atf[data-layout="window"][data-position="left"] .vdw-atf__foot {
    align-self: start;
    padding-top: 2rem;
  }
}

/* Bound the raster independently of long text; the cover surface may grow. */
.vdw-atf > .vdw-atf__motiv,
.vdw-atf > .vdw-atf__motiv-wrap { max-height: 52rem; }
.vdw-atf__motiv-wrap > .vdw-atf__motiv,
.vdw-atf[data-layout="window"] .vdw-atf__motiv-wrap > .vdw-atf__motiv,
.vdw-atf[data-layout="window"][data-position="left"] .vdw-atf__motiv-wrap > .vdw-atf__motiv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: inherit;
}
.vdw-atf[data-layout="free"] .vdw-atf__foot::before {
  content: "";
  position: absolute;
  inset: -5rem 0 0;
  pointer-events: none;
  opacity: var(--atf-wash-strength, 0.75);
  background: linear-gradient(to bottom, rgba(var(--atf-wash, 255, 255, 255), 0) 0%, rgba(var(--atf-wash, 255, 255, 255), 0.62) 30%, rgba(var(--atf-wash, 255, 255, 255), 0.62) 65%, rgba(var(--atf-wash, 255, 255, 255), 0.97) 100%);
}
.vdw-atf__credit--mobile { display: none; }
.vdw-atf__head-inner { flex-wrap: wrap; }
.vdw-atf__publication { max-width: 100%; }

@media (min-width: 48rem) and (max-width: 64rem) {
  .vdw-atf[data-layout="free"] .vdw-atf__type { width: 70%; }
}

/* A separate mobile motif frame preserves landscape width and lets text grow. */
@media (max-width: 47.99rem) {
  .vdw-bento__atf,
  .vdw-atf:is([data-layout="split"], [data-layout="window"]),
  .vdw-atf:is([data-layout="split"], [data-layout="window"])[data-position="left"] {
    min-height: 0;
    grid-template-rows: auto clamp(14rem, 60vw, 24rem) auto;
  }
  .vdw-atf > :is(.vdw-atf__motiv, .vdw-atf__motiv-wrap),
  .vdw-atf:is([data-layout="split"], [data-layout="window"]) > :is(.vdw-atf__motiv, .vdw-atf__motiv-wrap),
  .vdw-atf:is([data-layout="split"], [data-layout="window"])[data-position="left"] > :is(.vdw-atf__motiv, .vdw-atf__motiv-wrap) {
    grid-area: 2 / 1 / 3 / 2;
    max-height: 24rem;
  }
  .vdw-atf__head { padding-block: 1rem; }
  .vdw-atf__head-inner { padding-right: var(--atf-pad, 1.5rem); }
  .vdw-atf__foot { padding-block: 1.5rem 2rem; }
  .vdw-atf__credit--desktop { display: none; }
  .vdw-atf__credit--mobile { display: block; }
  .vdw-atf__credit { grid-area: 2 / 1 / 3 / 2; }
}

/* Reserve the scaled vertical credit width, its inset and a text gap.
   On mobile the credit lives in the separate photograph row. */
@media (min-width: 48rem) {
  .vdw-atf:has(> .vdw-atf__credit:not(.vdw-atf__credit--mobile):not([data-desktop-flow="true"])) .vdw-atf__inner {
    padding-right: max(var(--atf-pad, 1.5rem), calc(1.5rem + 0.75rem * var(--atf-credit-scale, 1)));
  }
}

/* Long or enlarged credits use their own intrinsic row, so wrapping never
   creates extra vertical columns on top of the title. Short default pills stay. */
@media (min-width: 48rem) {
  .vdw-bento .vdw-atf__credit[data-desktop-flow="true"] {
    position: relative;
    grid-area: 4 / 1 / 5 / -1;
    justify-self: end;
    top: auto;
    right: auto;
    max-height: none;
    max-width: calc(100% - 2 * var(--atf-pad, 1.5rem));
    margin: 0 var(--atf-pad, 1.5rem) 1rem;
    writing-mode: horizontal-tb;
  }
}
@media (max-width: 47.99rem) {
  .vdw-atf:has(> .vdw-atf__credit[data-mobile-flow="true"]:not(.vdw-atf__credit--desktop)) > .vdw-atf__foot {
    grid-area: 4 / 1 / 5 / -1;
  }
  .vdw-bento .vdw-atf__credit[data-mobile-flow="true"] {
    position: relative;
    grid-area: 3 / 1 / 4 / -1;
    justify-self: end;
    top: auto;
    right: auto;
    max-height: none;
    max-width: calc(100% - 2 * var(--atf-pad, 1.5rem));
    margin: 0 var(--atf-pad, 1.5rem) 1rem;
    writing-mode: horizontal-tb;
  }
}

/* Responsive cover typography. Each device keeps its own editorial values. */
@media (min-width: 48rem) {
  .vdw-atf {
    --atf-responsive-title-scale: var(--atf-desktop-title-scale, var(--atf-title-scale, 1));
    --atf-subtitle-scale: var(--atf-desktop-subtitle-scale, 1);
    --atf-masthead-scale: var(--atf-desktop-masthead-scale, 1);
    --atf-tagline-scale: var(--atf-desktop-tagline-scale, 1);
    --atf-label-scale: var(--atf-desktop-label-scale, 1);
    --atf-button-scale: var(--atf-desktop-button-scale, 1);
    --atf-credit-scale: var(--atf-desktop-credit-scale, 1);
  }
  .vdw-atf__head-inner[data-desktop-placement="custom"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }
  .vdw-atf__head-inner[data-desktop-placement="custom"] .vdw-atf__issue { grid-column: 2; grid-row: 1; }
  .vdw-atf__head-inner[data-desktop-placement="custom"] .vdw-atf__publication {
    justify-self: var(--atf-desktop-masthead-align, start);
    text-align: var(--atf-desktop-masthead-align, start);
    margin-top: var(--atf-desktop-masthead-y, 0svh);
    box-sizing: border-box;
  }
}
@media (max-width: 47.99rem) {
  .vdw-atf {
    --atf-responsive-title-scale: var(--atf-mobile-title-scale, var(--atf-title-scale, 1));
    --atf-subtitle-scale: var(--atf-mobile-subtitle-scale, 1);
    --atf-masthead-scale: var(--atf-mobile-masthead-scale, 1);
    --atf-tagline-scale: var(--atf-mobile-tagline-scale, 1);
    --atf-label-scale: var(--atf-mobile-label-scale, 1);
    --atf-button-scale: var(--atf-mobile-button-scale, 1);
    --atf-credit-scale: var(--atf-mobile-credit-scale, 1);
  }
  .vdw-atf__head-inner[data-mobile-placement="custom"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  .vdw-atf__head-inner[data-mobile-placement="custom"] .vdw-atf__publication {
    justify-self: var(--atf-mobile-masthead-align, start);
    text-align: var(--atf-mobile-masthead-align, start);
    margin-top: var(--atf-mobile-masthead-y, 0svh);
    box-sizing: border-box;
  }
}

/* Masthead: Ausgabe als Farbarchitektur ------------------------------- */
.vdw-bento__masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: end;
  padding: 3.5rem 0 2.5rem;
}

.vdw-bento__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
  color: var(--vdw-color-ink-60, #5c5c5c);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.vdw-bento__eyebrow::before {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  background: var(--vdw-color-lila, #5d2082);
}

.vdw-bento .vdw-bento__wordmark {
  /* W2-NB: min(…, 15vw) greift nur bei großer Browser-Grundschrift auf
     schmalen Schirmen (320 px / 32 px: sonst ragt „aktuell" aus der Spalte);
     bei 16 px Grundschrift liegt der clamp-Wert überall darunter. */
  font-size: min(clamp(2.25rem, 1.6rem + 3.2vw, 4rem), 15vw);
  overflow-wrap: anywhere;
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.03em;
}

/* Seit dem Vollbild-Einstieg ist die Wortmarke ein <p>, sobald der Cover-Titel
   das h1 der Seite trägt (ohne Einstieg bleibt sie ein h1, s. Template). Was
   die p-Fassung an Heading-Defaults verliert, steht damit hier ausdrücklich:
   `font-size`/`font-weight` liegen ohnehin auf der Klasse oben, `margin`
   räumt `.vdw-bento p { margin: 0 }` weiter oben ab und `line-height: 0.95`
   ebenfalls die Klassenregel — beides wird hier nur mit (0,2,1) gegen
   Theme-Regeln auf dem Element (`.elementor-kit-N p`, (0,1,1)) abgesichert,
   damit die Umstellung h1 → p typografisch nichts verschiebt. */
.vdw-bento p.vdw-bento__wordmark {
  margin: 0;
  line-height: 0.95;
}

.vdw-bento__wordmark em {
  font-style: normal;
  color: var(--vdw-color-blau, #1c388f);
}

.vdw-bento__tagline {
  margin-top: 1rem;
  max-width: var(--vdw-measure, 46rem);
  /* W2-NB: lange Komposita („Wohnungswirtschaft") umbrechen statt überlaufen.
     W3-V-02: break-word ohne hyphens — bricht nur ein Wort, das allein nicht in
     die Zeile passt (32 px Grundschrift); bei 16 px und lang=de-DE trennt die
     Silbentrennung sonst „Wohnungs-wirtschaft", wo main ganz umbricht. */
  overflow-wrap: break-word;
  color: var(--vdw-color-ink-60, #5c5c5c);
  font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
}

.vdw-bento__masthead-main,
.vdw-bento__masthead-side {
  min-width: 0;
}

.vdw-bento__masthead-side {
  text-align: right;
}

.vdw-bento__issue-no {
  display: block;
  /* W2-NB: 22vw deckelt die Ziffer nur bei großer Grundschrift auf schmalen Schirmen. */
  font-size: min(clamp(3.5rem, 9vw, 7.5rem), 22vw);
  overflow-wrap: anywhere;
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: -0.05em;
  color: var(--vdw-color-lila, #5d2082);
  font-variant-numeric: tabular-nums;
}

.vdw-bento__issue-label {
  display: block;
  overflow-wrap: anywhere;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.vdw-bento__masthead-blocks {
  display: flex;
  gap: 0.4rem;
  justify-content: flex-end;
  margin-top: 0.75rem;
}

.vdw-bento__masthead-blocks i {
  display: block;
  height: 1rem;
}

.vdw-bento__masthead-blocks i:nth-child(1) { width: 3.2rem; background: var(--vdw-color-blau, #1c388f); }
.vdw-bento__masthead-blocks i:nth-child(2) { width: 2rem; background: var(--vdw-color-lila, #5d2082); }
.vdw-bento__masthead-blocks i:nth-child(3) { width: 1.3rem; background: var(--vdw-color-tuerkis, #009bb5); }
.vdw-bento__masthead-blocks i:nth-child(4) { width: 0.85rem; background: var(--vdw-color-gruengelb, #c7d300); }

/* Inhaltsverzeichnis: farbcodierte Sticky-Rail (mobil: Drawer) --------- */
.vdw-bento__iv {
  grid-column: 1;
  position: sticky;
  top: calc(var(--vdw-adminbar, 0px) + var(--vdw-util, 0px) + var(--vdw-topbar-h) + 1rem);
  align-self: start;
  /* Abstand nach unten: Sticky endet sonst bündig mit dem Shell-Ende (letztes
     Farbband). Der Rand zählt beim Sticky-Anschlag mit → Rail hält 2rem Luft. */
  margin-bottom: 2rem;
  max-height: calc(100vh - var(--vdw-adminbar, 0px) - var(--vdw-util, 0px) - var(--vdw-topbar-h) - 2rem);
  transition: top 0.2s ease;
  /* Vertikaler Scroll-Container → overflow-x computed als hidden (Spec: clip fällt
     bei scrollendem Nachbar zurück). Kein UI-Horizontalscroll (kein Wheel/Touch/
     Scrollbar); ein ~18px padding-right-Rest bleibt nur programmatisch, nicht
     nutzersichtbar. Kein Kind ragt über den Content-Rand (verifiziert). */
  overflow-x: clip;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Native Scrollbar ausgeblendet; Scrollbarkeit signalisiert stattdessen eine
     dezente Fade-Maske an den Rändern (s. .is-overflow-* unten, per JS gesetzt). */
  scrollbar-width: none;
  border: 1px solid var(--vdw-color-line, #e4e4e7);
  border-top: 6px solid var(--vdw-color-ink, #1a1a1a);
  background: var(--vdw-color-paper, #fff);
  padding: 1.25rem;
}

.vdw-bento__iv::-webkit-scrollbar {
  display: none;
}

/* Am Fuß der Seite passt nicht einmal mehr der Rahmen der Leiste: sie tritt
   sofort aus (keine Ausblend-Phase, in der sie unter den Kopf geschoben
   sichtbar wäre), statt vom Containerende hochgeschoben zu werden (JS: fitRail). */
.vdw-bento__iv.is-ending {
  visibility: hidden;
}

/* „Bewegung reduzieren": das sanfte Scrollen des Themes gilt hier nicht. */
@media (prefers-reduced-motion: reduce) {
  html:has(.vdw-bento) {
    scroll-behavior: auto;
  }
}

/* Scroll-Indikator (Backlog #4): weiche Fade-Maske am UNTEREN Rand, nur wenn die Rail
   noch nach unten scrollbar ist (JS setzt .is-overflow-bottom). Am Listenende verschwindet
   sie. Bewusst NUR unten — eine obere Maske würde den markanten 6px-Ink-Top-Border der Rail
   mit verblassen; „mehr unten" ist ohnehin die entscheidende Affordanz. */
.vdw-bento__iv.is-overflow-bottom {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent 100%);
}

.vdw-bento__iv-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.vdw-bento__iv-title {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* S6-01: Der Inhalt-Knopf schaltet nur per JavaScript. Ohne JS bleibt er
   unsichtbar (visibility statt display — kein Layoutsprung, wenn das Skript
   html.vdw-toc-js setzt); das Verzeichnis selbst ist dann im Fluss sichtbar. */
html:not(.vdw-toc-js) .vdw-bento .vdw-bento__toc-toggle {
  visibility: hidden;
}

.vdw-bento button.vdw-bento__iv-close,
.vdw-bento button.vdw-bento__iv-close:hover,
.vdw-bento button.vdw-bento__iv-close:focus {
  display: none;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-weight: 700;
  line-height: 1;
  color: var(--vdw-color-ink, #1a1a1a);
  background: none;
  border: 2px solid var(--vdw-color-ink, #1a1a1a);
  border-radius: 0;
  padding: 0.15rem 0.5rem;
  cursor: pointer;
}

.vdw-bento__iv-issue {
  margin-top: 0.35rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--vdw-color-ink, #1a1a1a);
  font-size: 0.75rem;
  color: var(--vdw-color-ink-60, #5c5c5c);
}

.vdw-bento__iv-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.75rem;
  font-size: 0.75rem;
  color: var(--vdw-color-ink-60, #5c5c5c);
}

.vdw-bento__iv-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.vdw-bento__iv-legend i {
  width: 0.65rem;
  height: 0.65rem;
  display: inline-block;
  background: var(--vdw-color-ink-60, #5c5c5c);
}

.vdw-bento__iv-legend i.is-blau { background: var(--vdw-color-blau, #1c388f); }
.vdw-bento__iv-legend i.is-lila { background: var(--vdw-color-lila, #5d2082); }
.vdw-bento__iv-legend i.is-tuerkis { background: var(--vdw-color-tuerkis, #009bb5); }

.vdw-bento__iv-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
}

.vdw-bento__iv-item {
  break-inside: avoid;
  border-top: 1px solid var(--vdw-color-line, #e4e4e7);
}

.vdw-bento__iv-item:first-child {
  border-top: 0;
}

/* Dezente Kapitel-Zwischenzeile im IV (nur Titel + kleiner Farbstrich in Kapitelfarbe). */
.vdw-bento__iv-chapter {
  padding: 0.9rem 0.5rem 0.3rem 0;
  border-top: 1px solid var(--vdw-color-line, #e4e4e7);
}

.vdw-bento__iv-chapter:first-child {
  border-top: 0;
}

.vdw-bento__iv-chapter + .vdw-bento__iv-item {
  border-top: 0;
}

.vdw-bento__iv-chapter-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  margin: 0;
  min-width: 0;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  color: var(--vdw-color-ink-60, #5c5c5c);
}

/* Kein Farbstrich vor dem Rubriknamen mehr: er stand mal da, mal nicht (Bänder
   trugen keinen) und las sich als versehentliche Trennlinie. Die Rubrikfarbe
   zeigt weiterhin der Balken an jedem Eintrag (.vdw-bento__iv-bar). */

/* Band-Eintrag im IV (klickbarer Sprung zum Band, wenn „im IV" aktiv). */
.vdw-bento__iv-chapter--band {
  padding: 0;
}

/* Spezifischer als .vdw-bento__iv-link (display:grid), damit der Band-Eintrag
   nicht ins Artikel-Grid gequetscht wird. */
.vdw-bento__iv-link.vdw-bento__iv-band {
  display: block;
  padding: 0.9rem 0.5rem 0.3rem 0;
  text-decoration: none;
}

.vdw-bento__iv-link.vdw-bento__iv-band:hover {
  background: var(--vdw-color-paper-2, #f6f6f4);
}

/* Band als eigener Eintrag (2026-10-01): Abstand und Linie wie ein Kapitelstart,
   damit er nicht als letzter Artikel des vorigen Kapitels gelesen wird. */
.vdw-bento__iv-item--band {
  margin-top: 0.6rem;
  padding-top: 0.3rem;
  border-top: 1px solid var(--vdw-color-line, #e4e4e7);
}

.vdw-bento__iv-item--band:first-child {
  margin-top: 0;
  border-top: 0;
}

.vdw-bento__iv-link {
  display: grid;
  grid-template-columns: 0.3rem minmax(0, 1fr);
  align-items: stretch;
  column-gap: 0.75rem;
  padding: 0.5rem 0.5rem 0.5rem 0;
  text-decoration: none;
}

.vdw-bento__iv-link:hover {
  background: var(--vdw-color-paper-2, #f6f6f4);
}

.vdw-bento__iv-bar {
  background: var(--vdw-accent, #1c388f);
  min-height: 100%;
}

.vdw-bento__iv-text {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.vdw-bento__iv-headline {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.35;
  /* Titel brechen nur zwischen Wörtern (Runde 2) — die Spalte trägt bei 14px
     Wörter bis rund 25 Zeichen. .vdw-bento__iv-text vererbt sonst `anywhere`. */
  hyphens: manual;
  overflow-wrap: normal;
}

/* Vorspann im Inhaltsverzeichnis: höchstens drei Zeilen (Feedback Runde 3 —
   gemessen standen bis zu acht). */
.vdw-bento__iv-sub {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  margin-top: 0.1rem;
  font-size: 0.8125rem;
  color: var(--vdw-color-ink-60, #5c5c5c);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.vdw-bento__media-link {
  display: block;
  height: 100%;
}

/* Aktueller/gewählter Eintrag deutlich (2026-10-01): blauer Hauch, Balken
   breiter, Titel in VdW-Blau. Blau #1c388f auf dem Hauch ≈ 9:1. */
.vdw-bento__iv-link[aria-current="page"] {
  background: rgba(28, 56, 143, 0.08);
  box-shadow: inset 0 0 0 1px rgba(28, 56, 143, 0.18);
}

.vdw-bento__iv-link[aria-current="page"] .vdw-bento__iv-bar {
  transform: scaleX(1.8);
  transform-origin: left;
}

.vdw-bento .vdw-bento__iv-link[aria-current="page"] .vdw-bento__iv-headline {
  color: var(--vdw-color-blau, #1c388f);
}

/* Kapitelname als Sprungziel (2026-10-01): sieht aus wie bisher, unterstreicht
   beim Überfahren. (0,2,1) gegen den Elementor-Kit-Link (Linkfarben-Regel). */
.vdw-bento a.vdw-bento__iv-chapter-link,
.vdw-bento a.vdw-bento__iv-chapter-link:hover,
.vdw-bento a.vdw-bento__iv-chapter-link:focus-visible {
  color: inherit;
  text-decoration: none;
}

.vdw-bento a.vdw-bento__iv-chapter-link:hover .vdw-bento__iv-chapter-title,
.vdw-bento a.vdw-bento__iv-chapter-link:focus-visible .vdw-bento__iv-chapter-title {
  color: var(--vdw-color-ink, #1a1a1a);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Anzeige-Zeile im IV (Fee-Wunsch: Anzeigen ins Inhaltsverzeichnis). */
.vdw-bento__iv-item--ad .vdw-bento__iv-link {
  grid-template-columns: 0.3rem minmax(0, 1fr);
}

.vdw-bento__iv-item--ad .vdw-bento__iv-bar {
  background: var(--vdw-color-ink, #1a1a1a);
}

.vdw-bento__iv-flag {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0 0.35em;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 0.1em;
  color: #fff;
  background: var(--vdw-color-ink, #1a1a1a);
}

/* „News aus dem Saarland" — farblich hervorgehobene Rubrik (Fee-Wunsch). */
.vdw-bento__iv-item--saarland {
  background: var(--vdw-color-tuerkis-20, #ccecf1);
}

.vdw-bento__iv-item--saarland .vdw-bento__iv-bar {
  background: var(--vdw-tuerkis-text-bg, #00788a);
}

.vdw-bento__iv-flag--saarland {
  color: #fff;
  background: var(--vdw-tuerkis-text-bg, #00788a);
}

/* Shared media (Bild oder Rubrik-Farbfläche) --------------------------- */
.vdw-bento__media {
  position: relative;
  display: flex;
  align-items: flex-end;
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--vdw-accent, #1c388f);
}

.vdw-bento__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Centered crop by default; the per-article focal point
     (_vdw_mag_hero_focus) overrides this inline. */
  object-position: 50% 50%;
}

/* Bildlose Kacheln: s. „Kompakte Kachel ohne Bild" beim Kachel-Grid. Die frühere
   48/10-Sonderregel für die volle Reihenbreite ist darin aufgegangen. */

.vdw-bento__media--fallback::after {
  content: "";
  position: absolute;
  top: -20%;
  right: 10%;
  width: 32%;
  height: 140%;
  background: rgba(var(--vdw-bento-mark-rgb, 255, 255, 255), 0.16);
  transform: skewX(-22deg);
}

/* Auf Grüngelb (#c7d300) ist Weiß praktisch unsichtbar (~1.5:1): die bildlose
   Kachel wäre dort wieder ein leeres Farbfeld — genau der Zustand, den #24
   beseitigen sollte. Das Motiv wechselt deshalb auf dunkle Tinte, sobald die
   Fläche die helle Markenfarbe trägt. */
.vdw-bento .vdw-article--gruengelb .vdw-bento__media--fallback {
  --vdw-bento-mark-rgb: 26, 26, 26;
}

/* Bildlose Kachel: Blockmotiv aus dem Zeitungskopf statt Rubrikname auf weißer
   Pille. Der Name stand eine Zeile tiefer ohnehin als Dachzeile — auf der
   Farbfläche las er sich nicht als Gestaltung, sondern als Fehlermeldung
   („da steht Text, wo ein Bild sein sollte"). Rein dekorativ, kein Text, damit
   kein Kontrastfall auf den hellen Akzenten (Türkis, Grüngelb) entsteht. */
.vdw-bento__media-blocks {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.35rem;
  width: clamp(2.5rem, 12%, 4.5rem);
  margin: 1.25rem;
  aspect-ratio: 1;
}

.vdw-bento__media-blocks i {
  display: block;
  background: rgba(var(--vdw-bento-mark-rgb, 255, 255, 255), 0.55);
}

.vdw-bento__media-blocks i:nth-child(2) {
  background: rgba(var(--vdw-bento-mark-rgb, 255, 255, 255), 0.28);
}

.vdw-bento__media-blocks i:nth-child(3) {
  background: rgba(var(--vdw-bento-mark-rgb, 255, 255, 255), 0.85);
}

/* Bildnachweis — an den dezenten Stil der normalen Website (.vdw-media-credit
   im vdw-suite-Plugin) angeglichen: leichtes dunkles Pill oben rechts. Eckig
   (radius 0) statt der 8px der Hauptseite — bewusst, passt zur Print-Ästhetik. */
.vdw-media-credit {
  position: absolute;
  z-index: 2;
  top: 0.875rem;
  right: 0.875rem;
  padding: 0.375rem 0.25rem;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.4px;
  border-radius: 0;
  writing-mode: vertical-rl;
  line-height: 1.3;
  max-height: calc(100% - 1.75rem);
  max-width: calc(100% - 1.75rem);
  box-sizing: border-box;
  overflow-wrap: anywhere;
  white-space: normal;
}

/* Kapitel = vollflächige Farbarchitektur ------------------------------- */
.vdw-bento__chapter {
  position: relative;
  color: #fff;
  padding-block: 4rem;
  /* Kopf-Stapel inkl. Adminleiste und IMMER der Verbandsleiste: ein Sprung
     nach oben blendet sie wieder ein (Codex-Review #61). W2-03: deren echte
     Höhe (--vdw-util-h, magazine-head.js) statt fest 2rem, ebenso Spektrum +
     Magazinleiste (--vdw-head-h) statt fest 3.9rem — beide brechen bei großer
     Schrift um, das Ziel landete sonst unter dem Kopf. */
  scroll-margin-top: calc(var(--vdw-head-h, 3.9rem) + 1rem + var(--vdw-adminbar, 0px) + var(--vdw-util-h, 2rem));
}

.vdw-bento__chapter--lila { background: var(--vdw-color-lila, #5d2082); }
.vdw-bento__chapter--blau { background: var(--vdw-color-blau, #1c388f); }
.vdw-bento__chapter--tuerkis { background: var(--vdw-color-tuerkis, #009bb5); color: var(--vdw-on-tuerkis, #f5f5f5); }

/* Voll-gruengelb ist als große Sektions-Flutung KEINE valide Vollfarbe (weißer Text auf
   hellem #c7d300 = 1.5:1) und daher NICHT als Sektionsfarbe wählbar (SECTION_FULL_COLORS).
   Die Kapitel-/Hero-Bandfarbe wird aber auch über name_for_post() abgeleitet (article_type
   advertorial → gruengelb, oder gruengelb-Rubrik/-Artikel-Override) — dieser Pfad umgeht den
   Auswahl-Guard. Ohne Regel bliebe das Band transparent mit weißem Text = unsichtbar. Ein
   abgeleitetes gruengelb-Band wird deshalb wie das helle tint-gruengelb gerendert: heller
   Grund, dunkler Text, kontrastreicher Kicker-Strich — sichtbar UND WCAG-konform. */
.vdw-bento__chapter--gruengelb { background: var(--vdw-color-gruengelb-20, #f4f6cc); color: var(--vdw-color-ink, #1a1a1a); }
/* Der `.vdw-bento`-Präfix hebt die Spezifität auf 0,3,0 — nötig, um die spätere
   Basisregel `.vdw-bento .vdw-bento__chapter-title { color:#fff }` (ebenfalls 0,2,0,
   gewinnt sonst per Quellreihenfolge) zu schlagen. Analog zu den Tint-Regeln. */
.vdw-bento .vdw-bento__chapter--gruengelb .vdw-bento__chapter-title,
.vdw-bento .vdw-bento__chapter--gruengelb .vdw-bento__quote-text { color: var(--vdw-color-ink, #1a1a1a); }
.vdw-bento .vdw-bento__chapter--gruengelb .vdw-bento__chapter-sub,
.vdw-bento .vdw-bento__chapter--gruengelb .vdw-bento__stimme-kicker,
.vdw-bento .vdw-bento__chapter--gruengelb .vdw-bento__quote-cite,
.vdw-bento .vdw-bento__chapter--gruengelb .vdw-bento__quote-cite a { color: rgba(0, 0, 0, 0.72); }

/* Getönte Kapitel/Band-Varianten (#5a): helles Tint-Band + DUNKLER Text statt
   weiß. Attribut-Selektor deckt Kapitel und farb-übersteuerte Bänder ab; höhere
   Spezifität schlägt die weißen Defaults. */
.vdw-bento__chapter--tint-blau { background: var(--vdw-color-blau-20, #d2d7e9); }
.vdw-bento__chapter--tint-lila { background: var(--vdw-color-lila-20, #dfd2e6); }
.vdw-bento__chapter--tint-tuerkis { background: var(--vdw-color-tuerkis-20, #ccecf1); }
.vdw-bento__chapter--tint-gruengelb { background: var(--vdw-color-gruengelb-20, #f4f6cc); }

.vdw-bento [class*="__chapter--tint-"] { color: var(--vdw-color-ink, #1a1a1a); }
.vdw-bento [class*="__chapter--tint-"] .vdw-bento__chapter-title { color: var(--vdw-color-ink, #1a1a1a); }
.vdw-bento [class*="__chapter--tint-"] .vdw-bento__chapter-sub { color: rgba(0, 0, 0, 0.72); }
.vdw-bento [class*="__chapter--tint-"] :focus-visible { outline-color: var(--vdw-color-ink, #1a1a1a); }
/* B2: Stimme-Band + Termine-Text auf getöntem Band — Kicker/Zitat/Quelle sind sonst
   hart weiß (Vollfarb-Band) und verschwinden auf dem hellen Tint. Dunkler Text erzwingen. */
.vdw-bento [class*="__chapter--tint-"] .vdw-bento__stimme-kicker,
.vdw-bento [class*="__chapter--tint-"] .vdw-bento__quote-cite,
.vdw-bento [class*="__chapter--tint-"] .vdw-bento__quote-cite a { color: rgba(0, 0, 0, 0.72); }
.vdw-bento [class*="__chapter--tint-"] .vdw-bento__quote-text { color: var(--vdw-color-ink, #1a1a1a); }

.vdw-bento__chapter :focus-visible { outline-color: #fff; }
/* W5-FE-07: Karten und Aufmacher liegen als weiße Fläche auf dem Kapitel — dort
   wäre der weiße Ring unsichtbar. Auf der Papierfläche Markenblau (11:1 zu Weiß).
   (0,3,0) schlägt die Kapitelregel; die Bildkacheln mit Textfläche
   (`--overlay`, weiter unten, ebenfalls (0,3,0)) setzen ihren Ring danach wieder
   in der Plattenfarbe. */
.vdw-bento__chapter .vdw-bento__card :focus-visible,
.vdw-bento__chapter .vdw-bento__lead :focus-visible {
  outline-color: var(--vdw-color-blau, #1c388f);
}

.vdw-bento__chapter-head {
  position: relative;
  margin-bottom: 2rem;
  /* Bezugsgröße für die wortgenaue Kopfgröße (cqi unten). Block-Kind eines
     Block-Elements — kein Flex-Kontext, also kein container-type-Kollaps. */
  container-type: inline-size;
}

.vdw-bento__chapter-kicker {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Der frühere Balken vor dem Kicker ist entfallen (Redaktion: „Strich unter der
   Rubrik mal da, mal nicht — kann weg"). Er erschien nur an Sektionen mit Kicker,
   und seit die Rubrik-Kapitel keinen mehr tragen, wäre er nur noch am Aufmacher
   gestanden. Die farbabhängigen Überschreibungen dazu sind mitentfallen. */

.vdw-bento .vdw-bento__chapter-title {
  margin-top: 0.75rem;
  font-size: clamp(2.2rem, 1.3rem + 4vw, 4.5rem);
  font-weight: 800;
  /* VAKT-3: 0.98 ließ bei zweizeiligen Display-Titeln die zweite Zeile an den
     Unterlängen der ersten kleben ("Genossenschaftstag / in Kassel"). 1.05
     gibt genug Luft für Ober-/Unterlängen, bleibt aber kompakt-wuchtig. */
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
  /* Keine Silbentrennung und kein Umbruch mitten im Wort (Runde 2: bei 1440 px
     stand „Veranstaltungskalen" / „der" — `overflow-wrap: break-word` brach das
     Wort, weil es breiter war als 18ch). Lange Wörter passen jetzt über die
     Größenstufen --word-N unten, die das Template nach dem längsten Wort setzt. */
  hyphens: manual;
  overflow-wrap: normal;
  max-width: 18ch;
  /* Explicit: classic themes (Hello Biz) set a dark h2 color that would beat
     the band's inherited white and tank the contrast on the colour field. */
  color: #fff;
}

/* Größenstufen nach dem längsten Wort (vdw_magazine_word_fit_bucket()).
   N Zeichen × 0,65em ist die gemessene Breite eines Open-Sans-ExtraBold-Worts
   mit -0,03em Laufweite plus Reserve (gemessen 0,52–0,63em je Zeichen). Der
   Kopf wird höchstens so groß, dass dieses Wort in die Spalte passt (100cqi),
   und max-width öffnet sich auf die Wortbreite. Ohne cqi-Unterstützung fällt
   die font-size-Deklaration weg und die Grundgröße bleibt. */
.vdw-bento .vdw-bento__chapter-title--word-14 { --vdw-word: 14; }
.vdw-bento .vdw-bento__chapter-title--word-16 { --vdw-word: 16; }
.vdw-bento .vdw-bento__chapter-title--word-18 { --vdw-word: 18; }
.vdw-bento .vdw-bento__chapter-title--word-20 { --vdw-word: 20; }
.vdw-bento .vdw-bento__chapter-title--word-22 { --vdw-word: 22; }
.vdw-bento .vdw-bento__chapter-title--word-24 { --vdw-word: 24; }
.vdw-bento .vdw-bento__chapter-title--word-26 { --vdw-word: 26; }
.vdw-bento .vdw-bento__chapter-title--word-28 { --vdw-word: 28; }
.vdw-bento .vdw-bento__chapter-title--word-30 { --vdw-word: 30; }
.vdw-bento .vdw-bento__chapter-title--word-32 { --vdw-word: 32; }

.vdw-bento .vdw-bento__chapter-title[class*="__chapter-title--word-"] {
  max-width: max(18ch, calc(var(--vdw-word, 18) * 0.65em));
  font-size: min(clamp(2.2rem, 1.3rem + 4vw, 4.5rem), calc(100cqi / (var(--vdw-word, 18) * 0.65)));
}

.vdw-bento__chapter-sub {
  margin-top: 0.75rem;
  max-width: var(--vdw-measure, 46rem);
  /* W2-NB: lange Wörter umbrechen statt überlaufen (320 px / 32 px Grundschrift).
     W3-V-02: break-word ohne hyphens, sonst trennt lang=de-DE bei 16 px „Ver-bands". */
  overflow-wrap: break-word;
  /* Solid-ish white: clears WCAG-AA (>=4.5:1) even on the türkis chapter bg. */
  color: rgba(255, 255, 255, 0.94);
  font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
}

/* Lead-Kachel im Titelthema-Kapitel ----------------------------------- */
.vdw-bento__lead {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--vdw-color-paper, #fff);
  color: var(--vdw-color-ink, #1a1a1a);
  /* Auf Papiergrund die Akzentkante; auf der Kapitelfläche wird sie weiter unten
     ganz abgeschaltet (siehe „Keine Oberkante auf der Kapitelfläche"). */
  border-top: 6px solid var(--vdw-accent, #1c388f);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.06);
}

.vdw-bento__lead .vdw-bento__media {
  aspect-ratio: 16 / 10;
}

.vdw-bento__lead-body {
  min-width: 0;
  overflow-wrap: anywhere;
  hyphens: manual;
  overflow-wrap: break-word;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.vdw-bento__label {
  color: var(--vdw-tuerkis-text-bg, #00788a);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.vdw-bento__dachzeile {
  color: var(--vdw-color-ink-60, #5c5c5c);
  font-size: 0.875rem;
  font-weight: 600;
}

.vdw-bento .vdw-bento__lead-title {
  font-size: clamp(1.75rem, 1.4rem + 1.75vw, 2.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  /* Nur zwischen Wörtern umbrechen; .vdw-bento__lead-body vererbt sonst den
     Überlaufschutz des Fließtexts (`anywhere`). `break-word` greift erst, wenn
     ein Wort allein breiter ist als die Zeile (S6-02, 320 px) — sonst bleibt
     der Umbruch zwischen Wörtern. */
  overflow-wrap: break-word;
}

.vdw-bento__lead-title a,
.vdw-bento__card-title a,
.vdw-bento__termin-title a,
.vdw-bento__focus-title a,
.vdw-bento__overview-link,
.vdw-bento__quote-cite a {
  text-decoration: none;
}

.vdw-bento__lead-title a:hover,
.vdw-bento__lead-title a:focus-visible,
.vdw-bento__card-title a:hover,
.vdw-bento__card-title a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.15em;
}

.vdw-bento__lead-text {
  color: var(--vdw-color-ink-60, #5c5c5c);
  max-width: var(--vdw-measure, 46rem);
  /* Aufmacher-Anriss: höchstens vier Zeilen (Runde 2), serverseitig zusätzlich
     auf 220 Zeichen gekürzt (vdw_magazine_teaser_excerpt()). */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}

/* Read link. Zur Kopfzeile der Aufmacherkachel: OHNE Vollbild-Einstieg trägt der
   Kapitelkopf den Aufmachertitel und die Kachel hat keine eigene Überschrift;
   MIT Einstieg nennt der Kapitelkopf die Rubrik und der Titel steht wieder als
   h3 in der Kachel (.vdw-bento__lead-title, s. Template + Entwurf 1b). */
.vdw-bento__lead-more {
  align-self: start;
  margin-top: 0.25rem;
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-decoration: none;
}

/* W2-B-05, Linkfarben-Regel: `.vdw-bento a { color: inherit }` (0,1,1) und
   das Kit (0,1,1 / 0,2,1) schlugen die einfache Klasse — je nach
   Druckreihenfolge stand der Link schwarz oder in Theme-Türkis (2,6:1).
   Deshalb (0,2,1) plus eigene :hover/:focus-visible-Variante (0,3,1). */
.vdw-bento a.vdw-bento__lead-more,
.vdw-bento a.vdw-bento__lead-more:hover,
.vdw-bento a.vdw-bento__lead-more:focus-visible {
  color: var(--vdw-tuerkis-text-bg, #00788a);
}

.vdw-bento a.vdw-bento__lead-more:hover,
.vdw-bento a.vdw-bento__lead-more:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.15em;
}

@media (min-width: 48rem) {
  .vdw-bento__lead {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .vdw-bento__lead .vdw-bento__media {
    aspect-ratio: auto;
    height: 100%;
    min-height: 22rem;
  }
}

/* Kachel-Grid (Top-Themen im Kapitel + Praxis-Mosaik) ------------------ */
.vdw-bento__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: 1.5rem;
}

.vdw-bento__grid-item {
  margin: 0;
}

/* Split-Grid (additiv, o3-Muster): 2/3 + 1/3 statt uniformer auto-fill-Reihen.
   Eine Reihe = 1 Artikel --wide (span 2 = 2/3) + 1 Artikel --narrow (span 1 = 1/3).
   Span gehört auf das direkte Grid-Kind (.vdw-bento__grid-item = <li>), NICHT auf
   die .vdw-bento__card. Der Basis-.vdw-bento__grid (auto-fill) bleibt unberührt. */
.vdw-bento__grid--split {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vdw-bento__grid-item--wide {
  grid-column: span 2;
}

.vdw-bento__grid-item--narrow {
  grid-column: span 1;
}

/* Volle Reihe (3/3). Redaktionell waehlbar seit VDW_Magazine_Tile_Size 'full'.
   Vorher gab es nur 2/3 und 1/3 — eine Kachel, die eine Reihe fuellen sollte,
   war schlicht nicht einstellbar (Rueckmeldung Tobias 2026-09-02). */
.vdw-bento__grid-item--full {
  grid-column: 1 / -1;
}

/* Auffangregel gegen Rasterluecken (Anmerkung A-21 „keine Luecken in der
   Uebersicht", Ursache U-9 „kein Regelwerk fuer unvollstaendige Reihen").
   Eine Kachel als einziges Kind fuellt die Reihe — greift auf jeder Breite,
   unabhaengig davon, wie viele Spalten das auto-fill-Raster gerade bildet.
   Gemessen am 2026-09-02 auf Staging: Kapitel 05 und 06 standen so mit je
   einer 1/3-Kachel und zwei Dritteln leerer Farbflaeche daneben. */
.vdw-bento__grid > .vdw-bento__grid-item:not(.vdw-bento__grid-item--wide):not(.vdw-bento__grid-item--narrow):not(.vdw-bento__grid-item--full):only-child {
  grid-column: 1 / -1;
}

/* Automatic rhythm applies only to cards without an editorial size override. */
/* Desktop (>=75rem, 3 Spalten): 2/3 + 1/3 als DURCHGÄNGIGER Rhythmus über alle
   Reihen, dabei von Reihe zu Reihe gespiegelt — nicht nur die erste Reihe.
   Paar A (Items 1–2): breit links (span 2 = 2/3) + schmal rechts (1/3).
   Paar B (Items 3–4): schmal links (1/3) + breit rechts (span 2). usw.
   Rein per nth-child auf die <li> — kein Template-Eingriff, die --wide/--narrow-
   Klassen der ersten beiden Items bleiben deckungsgleich. Unter 75rem (Tablet =
   2 gleiche Spalten, Handy = 1 Spalte) greift das NICHT. Ungerade Gesamtzahl:
   das allein stehende letzte Item (ungerade Position) füllt die volle Reihe. */
@media (min-width: 75rem) {
  .vdw-bento__grid--split > .vdw-bento__grid-item--span-d1 {
    grid-column: span 1;
  }

  .vdw-bento__grid--split > .vdw-bento__grid-item--span-d2 {
    grid-column: span 2;
  }

  .vdw-bento__grid--split > .vdw-bento__grid-item--span-d3 {
    grid-column: 1 / -1;
  }

  /* Stapel zum Kapitelauftakt (VDW_Magazine_Tile_Grid::pack_with_stack()):
     große Kachel über zwei Reihen links, die beiden folgenden Kacheln setzt die
     Auto-Platzierung rechts untereinander. Das Bild füllt die ganze Höhe statt
     16/10, sonst stünde unter ihm weißer Leerraum. */
  .vdw-bento__grid--split > .vdw-bento__grid-item--stack-d {
    grid-row: span 2;
  }

  .vdw-bento__grid-item--stack-d > .vdw-bento__card > .vdw-bento__media {
    aspect-ratio: auto;
    flex: 1 1 auto;
    min-height: 16rem;
  }

  .vdw-bento__grid-item--stack-d > .vdw-bento__card > .vdw-bento__card-body {
    flex: 0 0 auto;
  }

  .vdw-bento__grid-item--stack-d .vdw-bento__teaser {
    -webkit-line-clamp: 4;
    line-clamp: 4;
  }

  /* Basis-Raster (auto-fill, ohne redaktionelle Groessen) bildet ab 75rem drei
     Spalten. Ohne die folgenden zwei Regeln bleibt die letzte Reihe angebrochen
     stehen — bei 8 Kacheln etwa ein Drittel leer. Das --split-Raster braucht sie
     nicht, dort regelt der 4n-Rhythmus oben die Reihen paarweise voll. */
  .vdw-bento__grid:not(.vdw-bento__grid--split) > .vdw-bento__grid-item:last-child:nth-child(3n+1) {
    grid-column: 1 / -1;
  }

  .vdw-bento__grid:not(.vdw-bento__grid--split) > .vdw-bento__grid-item:last-child:nth-child(3n+2) {
    grid-column: span 2;
  }
}

/* Auf Papiergrund markiert die Oberkante die Artikelfarbe. */
.vdw-bento__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--vdw-color-paper, #fff);
  color: var(--vdw-color-ink, #1a1a1a);
  border-top: 4px solid var(--vdw-accent, #1c388f);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Keine Oberkante auf der Kapitelfläche (#22) ------------------------- */
/* Direkt unter der Kante beginnt das Kachelbild, und die Kante las sich als
   Rand am Bild — gemeldet als „weißer Rand", weil sie im Farbkapitel `#fff`
   trug. Sie durch die Akzentfarbe zu ersetzen genügt NICHT: der Akzent kommt
   vom Artikel, die Fläche vom Kapitel, und spätestens die Wiederholungs-
   vermeidung (#19) schiebt die Kapitelfläche auf eine andere Farbe — dann
   stünde über jedem Bild ein andersfarbiger Streifen statt eines weißen.
   Auf der Fläche trägt die Kachel deshalb gar keine Kante; sie trennt sich
   durch Papierweiß und Schatten. */
.vdw-bento__chapter .vdw-bento__card,
.vdw-bento__chapter .vdw-bento__lead {
  border-top-width: 0;
}

.vdw-bento__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}

.vdw-bento__card-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.vdw-bento .vdw-bento__card-title {
  font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
  /* Kachel-Titel brechen nur zwischen Wörtern (Runde 2). Die schmalste Kachel
     (1/3 auf Desktop, ~300px) trägt bei 22px Wörter bis rund 22 Zeichen.
     Notbremse `break-word`: nur ein Wort, das allein nicht in die Zeile passt,
     wird geteilt (S6-02, 320 px). */
  hyphens: manual;
  overflow-wrap: break-word;
}

/* Teaser (Feld `lead`) unter der Kartenüberschrift — o3-„Untertitel".
   Gleich lange Anrisse (Runde 2: von einer bis acht Zeilen): höchstens drei
   Zeilen mit Ellipse; dahinter kürzt vdw_magazine_teaser_excerpt() hart auf
   220 Zeichen, damit auch ohne line-clamp nichts ausufert. */
.vdw-bento__teaser {
  margin: 0;
  color: var(--vdw-color-ink-80, #333333);
  font-size: 0.9375rem;
  line-height: 1.5;
  /* W5-FE-01: ein Wort, das allein breiter ist als die Kachel, bricht um statt
     abgeschnitten zu werden (zwischen Wörtern bleibt der normale Umbruch). */
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

/* Kompakte Kachel ohne Bild (Runde 2) --------------------------------- */
/* Neun Kacheln auf Staging haben schlicht kein Bild (kein <img>, nicht nur
   Lazy-Loading). Statt einer Farbfläche im Bildformat 16/10 trägt die Kachel
   nur noch einen schmalen Farbstreifen mit dem Blockmotiv, darunter Text auf
   der weißen Karte. Die Karte selbst füllt weiter ihre Rasterzelle (height:
   100%) und die Spalten setzt der Packer — die Reihe bleibt lückenlos; neben
   einer Bildkachel steht die Resthöhe als Papierweiß, wie bei jeder Bildkachel
   mit kurzem Text. Ein mitwachsender Streifen wäre dort wieder eine große
   leere Farbfläche (auf Staging bis 416px gemessen). Ersetzt die frühere
   Sonderregel „48/10 für bildlose Kacheln in voller Breite". */
.vdw-bento__card--no-image > .vdw-bento__media--fallback {
  aspect-ratio: auto;
  flex: 0 0 auto;
  min-height: 5rem;
}

.vdw-bento__card--no-image .vdw-bento__media-blocks {
  width: 2.5rem;
}

/* Bildkachel mit Textfläche (1/3 neben 2/3) ---------------------------- */
/* Die 1/3-Kachel wird auf die Höhe der 2/3-Kachel daneben gestreckt, deren
   16/10-Bild doppelt so hoch ist — unter dem Text blieben ~200px Papierweiß
   (Rückmeldung Jan 2026-09-30). Diese Kacheln (--overlay, gesetzt über
   VDW_Magazine_Tile_Grid::beside_wide()) zeigen das Bild über die volle Resthöhe,
   der Text steht auf einer deckenden Farbfläche. Das Bild endet dort, wo die
   Fläche beginnt; nur der 4,5rem-Übergang liegt noch auf dem Bild. Kein Gesicht
   rutscht so unter den Text, und der Fokuspunkt gilt für den sichtbaren Teil.
   Die Stapelpartner bleiben normale Karten.

   Farbe: VDW_Magazine_Tile_Plate::token() — dunklere Stufe der Kapitelfarbe,
   Vollfarbe auf hellen Kapiteln, per Artikel überschreibbar. Unter dem Text
   ist die Fläche voll deckend, der Kontrast hängt also nie vom Bild ab.
   MagazineTilePlateTest rechnet die Kontraste aus diesen Regeln nach. */
.vdw-bento__card--plate-blau { --vdw-plate-bg: #1c388f; --vdw-plate-ink: #fff; }
.vdw-bento__card--plate-blau-dunkel { --vdw-plate-bg: #112359; --vdw-plate-ink: #fff; }
.vdw-bento__card--plate-lila { --vdw-plate-bg: #5d2082; --vdw-plate-ink: #fff; }
.vdw-bento__card--plate-lila-dunkel { --vdw-plate-bg: #3a1451; --vdw-plate-ink: #fff; }
.vdw-bento__card--plate-tuerkis { --vdw-plate-bg: #009bb5; --vdw-plate-ink: #f5f5f5; }
.vdw-bento__card--plate-tuerkis-dunkel { --vdw-plate-bg: #004a56; --vdw-plate-ink: #fff; }
.vdw-bento__card--plate-gruengelb { --vdw-plate-bg: #c7d300; --vdw-plate-ink: #1a1a1a; }

@media (min-width: 75rem) {
  .vdw-bento__grid--split > .vdw-bento__grid-item--overlay > .vdw-bento__card {
    background: var(--vdw-plate-bg, #112359);
    color: var(--vdw-plate-ink, #fff);
  }

  .vdw-bento__grid--split > .vdw-bento__grid-item--overlay > .vdw-bento__card > .vdw-bento__media {
    aspect-ratio: auto;
    flex: 1 1 auto;
    min-height: 10rem;
  }

  .vdw-bento__grid--split > .vdw-bento__grid-item--overlay > .vdw-bento__card > .vdw-bento__card-body {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    margin-top: -4.5rem;
    padding-top: 4.5rem;
    background: linear-gradient(to bottom, transparent 0, var(--vdw-plate-bg, #112359) 4.5rem);
  }

  /* Bildnachweis bleibt über dem Übergang lesbar. */
  .vdw-bento__grid--split > .vdw-bento__grid-item--overlay .vdw-media-credit {
    z-index: 2;
  }

  /* Linkfarben-Regel: (0,3,1) bzw. (0,4,1) mit :hover/:focus-visible — schlägt
     das Elementor-Kit und die (0,3,1)-Titelregel am Dateianfang. */
  .vdw-bento .vdw-bento__grid-item--overlay .vdw-bento__card-title a,
  .vdw-bento .vdw-bento__grid-item--overlay .vdw-bento__card-title a:hover,
  .vdw-bento .vdw-bento__grid-item--overlay .vdw-bento__card-title a:focus-visible,
  .vdw-bento .vdw-bento__grid-item--overlay .vdw-bento__dachzeile,
  .vdw-bento .vdw-bento__grid-item--overlay .vdw-bento__teaser {
    color: var(--vdw-plate-ink, #fff);
  }

  .vdw-bento .vdw-bento__grid-item--overlay :focus-visible {
    outline-color: var(--vdw-plate-ink, #fff);
  }
}

/* Papier-Sektionen (Praxis, Register, Fokus) -------------------------- */
.vdw-bento__section {
  padding-block: 3.5rem;
}

/* Getönte Rubrik-Bänder (o3-Farbarchitektur) — VORBEREITET, noch NICHT verdrahtet.
   Für einen Folge-Pass: Sektion mit .vdw-bento__bleed (randlose Flutung der
   Content-Spalte) + einer .vdw-bento__section--tint-* markieren; der Tint flutet
   dann c-full-start…c-full-end, der Inhalt richtet sich via .vdw-bento__bleed > *
   wieder auf c-main aus. Das Template setzt diese Klassen aktuell noch nicht.
   Nur die 4 Spektrum-Tints aus magazine.css, keine neuen Hex. */
.vdw-bento__section--tint-blau { background: var(--vdw-color-blau-20, #d2d7e9); }
.vdw-bento__section--tint-lila { background: var(--vdw-color-lila-20, #dfd2e6); }
.vdw-bento__section--tint-tuerkis { background: var(--vdw-color-tuerkis-20, #ccecf1); }
.vdw-bento__section--tint-gruengelb { background: var(--vdw-color-gruengelb-20, #f4f6cc); }

.vdw-bento__section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  margin-bottom: 1.5rem;
  padding-top: 0.75rem;
  border-top: 2px solid var(--vdw-color-ink, #1a1a1a);
}

.vdw-bento .vdw-bento__section-title {
  font-size: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.vdw-bento__section-hint {
  margin-left: auto;
  font-size: 0.875rem;
  color: var(--vdw-color-ink-60, #5c5c5c);
}

/* Stimme-Band (Interview, blau) --------------------------------------- */
.vdw-bento__stimme {
  color: #fff;
  padding-block: 3.5rem;
}

.vdw-bento__stimme-inner {
  display: grid;
  gap: 2rem;
  align-items: center;
}

.vdw-bento__stimme-kicker {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}

.vdw-bento__quote {
  margin: 0;
}

.vdw-bento__quote-text {
  margin-top: 0.75rem;
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.6rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.vdw-bento__quote-cite {
  display: block;
  margin-top: 1rem;
  font-size: 0.875rem;
  font-style: normal;
  color: rgba(255, 255, 255, 0.85);
}

.vdw-bento__quote-cite a {
  font-weight: 700;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.15em;
}

/* Veranstaltungskalender (automatisches Terminband) ------------------- */
.vdw-bento__termine-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* 20rem statt 15rem: neben dem Datumsblock braucht der Titel Platz für
     lange Komposita („Wohnungswirtschaft") — die Startseite bricht Wörter
     bewusst nicht (overflow-wrap: normal). */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: 1.5rem;
  /* W2-V-02: Bezugsrahmen fuer die Terminkarten (s. @container unten). Die
     Liste ist Blockkind des Bands, kein Flex-Kind — keine container-type-Falle. */
  container-type: inline-size;
}

/* Aktiver Kalender ohne Termine: Hinweis in Bandtextfarbe. */
.vdw-bento__termine-empty {
  margin: 0;
  font-size: 1rem;
}

/* Weitere Termine (ab dem siebten) klappen auf — Feedback Runde 3. Die
   Schaltfläche erbt die Textfarbe des Bands (weiß auf Vollfarbe, dunkel auf
   Tint) und trägt deshalb currentColor als Rahmen. */
.vdw-bento__termine-more {
  margin-top: 1.5rem;
}

.vdw-bento__termine-more > summary {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border: 2px solid currentColor;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.vdw-bento__termine-more > summary::-webkit-details-marker {
  display: none;
}

.vdw-bento__termine-more > summary::after {
  content: "+";
  margin-left: 0.6rem;
  font-weight: 800;
}

.vdw-bento__termine-more[open] > summary::after {
  content: "–";
}

.vdw-bento__termine-more > summary:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

.vdw-bento__termine-more > .vdw-bento__termine-list {
  margin-top: 1.5rem;
}

/* Terminkarte: Datumsblock links (Tag groß, Monat, Jahr), rechts Titel und
   eine Zeile je Angabe (Uhrzeit, Ort) mit Symbol. Ohne Oberkante: die frühere
   `border-top: 4px solid #fff` saß auf einer weißen Karte und war per
   Konstruktion unsichtbar (#22). Die ganze Karte ist Klickfläche (Titel-Link
   mit ::after über die Karte); der Fokusring liegt deshalb auf der Karte. */
.vdw-bento__termin {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "date body";
  gap: 1rem;
  align-items: start;
  background: var(--vdw-color-paper, #fff);
  color: var(--vdw-color-ink, #1a1a1a);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.06);
  padding: 1.5rem;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.vdw-bento__termin:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 0 10px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

/* Innen liegender Ring: sichtbar auf jeder Bandfarbe, weil er auf der weißen
   Karte sitzt (ein äußerer Ring verschwände auf Vollfarbe bzw. Tint). */
@supports selector(:has(*)) {
  .vdw-bento .vdw-bento__termin:has(a:focus-visible) {
    outline: 3px solid var(--vdw-color-ink, #1a1a1a);
    outline-offset: -3px;
  }

  .vdw-bento .vdw-bento__termin-title a:focus-visible {
    outline: none;
  }
}

/* Auf hellen Tint-Bändern trägt der Schatten allein kaum — feine Kante. */
.vdw-bento [class*="__chapter--tint-"] .vdw-bento__termin {
  box-shadow: 0 0 0 1px rgba(28, 56, 143, 0.2), 0 4px 12px rgba(0, 0, 0, 0.06);
}

.vdw-bento [class*="__chapter--tint-"] .vdw-bento__termin:hover {
  box-shadow: 0 0 0 1px rgba(28, 56, 143, 0.3), 0 10px 24px rgba(0, 0, 0, 0.12);
}

/* Termin ohne lesbares Datum: kein leerer Datumsblock, Text volle Breite. */
.vdw-bento__termin--undated {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "body";
}

@media (prefers-reduced-motion: reduce) {
  .vdw-bento__termin {
    transition: none;
  }

  .vdw-bento__termin:hover {
    transform: none;
  }
}

.vdw-bento__termin-body {
  grid-area: body;
  min-width: 0;
}

/* Türkis #00788a auf Weiß: 5,3:1 (AA). */
.vdw-bento__termin-date {
  grid-area: date;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Feste Breite: sonst springt die Titelkante je nach Monatslänge („Sept"). */
  inline-size: 4rem;
  padding: 0.5rem 0.25rem;
  background: var(--vdw-tuerkis-text-bg, #00788a);
  color: #fff;
  line-height: 1;
  text-align: center;
}

.vdw-bento__termin-day {
  font-size: 1.75rem;
  font-weight: 800;
}

.vdw-bento__termin-month {
  margin-top: 0.2rem;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.vdw-bento__termin-year {
  margin-top: 0.25rem;
  font-size: 0.75rem;
}

.vdw-bento .vdw-bento__termin-title {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.3;
  hyphens: manual;
  /* S6-02: Wörter wie „Wohnungsbaugenossenschaften" sind bei 320 px breiter als
     die Spalte neben dem Datum — nur dann wird im Wort umbrochen. */
  overflow-wrap: break-word;
}

.vdw-bento__termin-title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.vdw-bento__termin:hover .vdw-bento__termin-title a,
.vdw-bento__termin-title a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.15em;
}

.vdw-bento__termin-meta {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
  color: var(--vdw-color-ink-60, #5c5c5c);
  font-size: 0.875rem;
  line-height: 1.35;
}

.vdw-bento__termin-meta > li {
  display: flex;
  gap: 0.4rem;
  align-items: flex-start;
  margin: 0;
}

.vdw-bento__termin-icon {
  flex: none;
  width: 1rem;
  height: 1rem;
  /* Zeilenhöhe 0,875rem × 1,35 ≈ 1,18rem → Symbol optisch mittig zur ersten Zeile. */
  margin-top: 0.09rem;
  color: var(--vdw-tuerkis-text-bg, #00788a);
}

/* W2-V-02: Wird die Liste schmaler als 13rem (große Standardschrift auf
   kleinen Geräten — rem wächst mit, die Kartenbreite nicht), bliebe neben dem
   4rem-Datumsblock keine Titelspalte mehr („Buchstabenturm"). Dann steht das
   Datum als kompakte Zeile über dem Text, und das Innenpolster schrumpft. */
@container (max-width: 13rem) {
  .vdw-bento__termin {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "date" "body";
    gap: 0.5rem;
    padding: 0.5rem;
  }

  .vdw-bento__termin-meta {
    margin-top: 0.5rem;
  }

  .vdw-bento__termin-date {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-start;
    justify-self: start;
    gap: 0 0.35em;
    inline-size: auto;
    max-inline-size: 100%;
    padding: 0.25rem 0.5rem;
  }

  .vdw-bento__termin-day {
    font-size: 1.25rem;
  }

  .vdw-bento__termin-month,
  .vdw-bento__termin-year {
    margin-top: 0;
  }

  .vdw-bento__termin-meta > li {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

/* Mitglied im Fokus (türkis-Band) ------------------------------------- */
.vdw-bento__focus {
  background: var(--vdw-color-tuerkis-20, #ccecf1);
  border-top: 4px solid var(--vdw-tuerkis-text-bg, #00788a);
  padding: 2rem;
}

.vdw-bento__focus-label {
  color: var(--vdw-blau, #1c388f);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.vdw-bento .vdw-bento__focus-title {
  margin-top: 0.5rem;
  font-size: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
  font-weight: 800;
  line-height: 1.15;
  hyphens: manual;
  overflow-wrap: normal;
}

/* Anzeige-Band (grüngelb, kein „mehr erfahren"-Link) ------------------ */
.vdw-bento__ad {
  background: var(--vdw-color-gruengelb, #c7d300);
  color: var(--vdw-color-ink, #1a1a1a);
  padding-block: 2.5rem;
}

.vdw-bento__ad-inner {
  display: grid;
  gap: 0.35rem;
}

.vdw-bento__ad-label {
  /* Feedback Runde 3: „Anzeige" knapp oben rechts über dem Motiv, als
     Kennzeichnung statt als schwarzes Schild. */
  justify-self: end;
  margin: 0;
  color: var(--vdw-color-ink, #1a1a1a);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Linie unter der Anzeige — im Builder wählbar. */
.vdw-bento__ad--rule .vdw-bento__ad-inner {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--vdw-color-ink, #1a1a1a);
}

.vdw-bento__ad-slot {
  min-height: 6rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.vdw-bento__ad-placeholder {
  font-size: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  max-width: 26ch;
}

/* Chronologische Gesamtübersicht („Das Heft — Seite für Seite") ------- */
.vdw-bento__overview-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  gap: 0 2.5rem;
}

.vdw-bento__overview-item {
  display: grid;
  grid-template-columns: 2.1rem 0.3rem 1fr;
  align-items: stretch;
  column-gap: 0.75rem;
  padding: 0.6rem 0.5rem;
  border-top: 1px solid var(--vdw-color-line, #e4e4e7);
}

.vdw-bento__overview-bar {
  background: var(--vdw-accent, #1c388f);
  min-height: 100%;
}

.vdw-bento__overview-num {
  font-weight: 800;
  color: var(--vdw-color-ink, #1a1a1a);
  font-variant-numeric: tabular-nums;
  align-self: baseline;
  line-height: 1.4;
}

.vdw-bento__overview-link {
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.35;
}

.vdw-bento__overview-link:hover,
.vdw-bento__overview-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.vdw-bento__overview-sub {
  display: block;
  margin-top: 0.1rem;
  color: var(--vdw-color-ink-60, #5c5c5c);
  font-size: 0.8125rem;
}

.vdw-bento__overview-item--saarland {
  background: var(--vdw-color-tuerkis-20, #ccecf1);
}

.vdw-bento__overview-item--saarland .vdw-bento__overview-bar {
  background: var(--vdw-tuerkis-text-bg, #00788a);
}

/* Empty / no-issue state ---------------------------------------------- */
.vdw-bento__empty {
  padding: 2rem 0 4rem;
  color: var(--vdw-color-ink-60, #5c5c5c);
}

/* Responsive ----------------------------------------------------------- */

/* Desktop: the topbar toggle collapses the sticky rail (content → full width). */
@media (min-width: 64rem) {
  .vdw-bento__shell.is-collapsed {
    grid-template-columns: minmax(0, 1fr);
    /* Ohne Sidebar entfällt der Sidebar-Offset des Vollbreiten-Ausbruchs —
       die Bänder fluten dann nur um den zentrierten Container (mtl). */
    --vdw-iv-w: 0rem;
    --vdw-shell-gap: 0rem;
  }

  .vdw-bento__shell.is-collapsed .vdw-bento__iv {
    display: none;
  }

  .vdw-bento__shell.is-collapsed .vdw-bento__content {
    grid-column: 1;
  }

  /* Kein „Mitscrollen und Zurückspringen" am Seitenende (2026-10-01): Der
     Browser schiebt eine sticky Leiste am Containerende selbst nach oben —
     beim flüssigen Scrollen (Trackpad, Schwung) noch bevor JavaScript sie
     kürzen kann, danach springt sie zurück. Ein unsichtbarer Platzhalter
     verlängert den Container um eine Bildschirmhöhe, der negative Rand nimmt
     die Länge wieder heraus: Die Leiste wird nie hochgeschoben, fitRail kürzt
     sie nur noch (gemessen am Inhaltsende, nicht am Shell-Ende). */
  .vdw-bento__shell:not(.is-collapsed):not(.vdw-bento__shell--solo) {
    margin-bottom: -100vh;
  }

  .vdw-bento__shell:not(.is-collapsed):not(.vdw-bento__shell--solo)::after {
    content: "";
    grid-column: 1 / -1;
    height: 100vh;
    pointer-events: none;
  }

  /* Der Platzhalter ragt über das Seitenende hinaus — ohne Abschneiden entstünde
     darunter eine leere Bildschirmhöhe. clip (nicht hidden) erzeugt keinen
     Scroll-Container, sticky bleibt intakt; zugleich bleibt die Leiste
     innerhalb der Magazinseite und überdeckt nie den Abbinder. */
  .vdw-bento {
    overflow-y: clip;
  }
}

/* Below 64rem (phones + iPad portrait): rail becomes an off-canvas drawer,
   content full width. From 64rem up (iPad landscape + desktop) the in-flow
   sidebar returns — there the content is wide enough for a visible 240px rail
   plus a readable grid. Below 64rem a fixed rail would squeeze the article grid
   to unreadable cards (~117px at 768px). MUST stay in sync with mql in
   magazine-startpage-bento.js. */
@media (max-width: 63.99rem) {
  .vdw-bento__shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .vdw-bento__content {
    grid-column: 1;
  }

  /* Farbbänder auch auf Mobile in voller Viewportbreite (analog Desktop, aber
     ohne Sidebar-Offset: die INHALT-Rail ist hier ein Off-Canvas-Drawer, also
     nicht im Fluss → Offset = nur der zentrierte Main-Rand --vdw-mtl, das
     Padding bringt den Innencontent bündig zurück auf c-main). overflow-x:clip
     am .vdw-bento fängt den Überhang wie im Desktop-Pfad. */
  .vdw-bento__content > .vdw-bento__bleed {
    display: block;
    position: relative;
    z-index: 0;
    margin-left: calc(-1 * var(--vdw-mtl));
    margin-right: calc(-1 * var(--vdw-mtl));
    padding-left: calc(var(--vdw-mtl) + var(--vdw-bento-gutter));
    padding-right: calc(var(--vdw-mtl) + var(--vdw-bento-gutter));
  }

  /* Der Drawer ist ein Modal und muss die Website-Chrome überdecken. Sein
     z-index gilt aber nur gegen Geschwister im WURZEL-Stapelkontext — und dort
     liegen die Elementor-Header-Widgets mit gemessenen z-index 99/1000/9997/
     9999 und 2147483620 (Hello-Biz-Kopf auf Staging, 2026-09-16). Gegen
     2147483620 ist kein Zahlenrennen zu gewinnen, deshalb bekommt die
     Theme-Chrome EINEN eigenen Stapelkontext (s. unten) und wird als Ganzes
     unter Scrim/Drawer einsortiert. Verbindliche Ebenenfolge unterhalb 64rem:
     Bento-Topbar 30 · Spektrum 31 · Theme-Header/-Footer 100 · Scrim 210 ·
     Drawer 220 · WP-Adminleiste 99999 (Core, bleibt oben und wird per
     --vdw-iv-top ausgespart statt überdeckt).
     S6-01: Drawer nur mit JavaScript (magazine-startpage-bento.js setzt
     html.vdw-toc-js). Ohne JS steht das Verzeichnis im Fluss UNTER dem Inhalt —
     sichtbar und per Anker #vdw-toc erreichbar, ohne den Inhalt zu verdecken. */
  .vdw-bento__iv {
    grid-row: 2;
    position: static;
    max-height: none;
  }

  html.vdw-toc-js .vdw-bento__iv {
    grid-row: auto;
    position: fixed;
    inset: var(--vdw-iv-top, 0px) auto 0 0;
    z-index: 220;
    width: min(22rem, 88vw);
    box-sizing: border-box;
    height: calc(100vh - var(--vdw-iv-top, 0px));
    height: calc(100dvh - var(--vdw-iv-top, 0px));
    max-height: calc(100dvh - var(--vdw-iv-top, 0px));
    margin: 0;
    visibility: hidden;
    transform: translateX(-102%);
    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  /* Ein Stapelkontext (positioniert + z-index) kapselt die riesigen
     Widget-z-index der Theme-Chrome nach innen: die interne Ordnung (Logo,
     aufklappendes Menü) bleibt unverändert, nach außen zählt nur die 100.
     Die inneren Container sind bereits position:relative, der Wrapper wird
     also kein neuer Bezugsrahmen für absolut positionierte Kinder. */
  body.vdw-magazin-bento .elementor-location-header,
  body.vdw-magazin-bento .elementor-location-footer {
    position: relative;
    z-index: 100;
  }

  html.vdw-toc-js .vdw-bento__iv.is-open {
    visibility: visible;
    transform: none;
  }

  html.vdw-toc-js .vdw-bento button.vdw-bento__iv-close,
  html.vdw-toc-js .vdw-bento button.vdw-bento__iv-close:hover,
  html.vdw-toc-js .vdw-bento button.vdw-bento__iv-close:focus {
    display: inline-flex;
  }

  .vdw-bento button.vdw-bento__iv-scrim.is-open,
  .vdw-bento button.vdw-bento__iv-scrim.is-open:hover,
  .vdw-bento button.vdw-bento__iv-scrim.is-open:focus {
    display: block;
  }
}

@media (max-width: 60rem) {
  .vdw-bento__masthead {
    /* minmax(0, …): sonst setzt das längste Wort die Spaltenbreite (W2-NB). */
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    padding-top: 2.5rem;
  }

  .vdw-bento__masthead-side {
    text-align: left;
  }

  .vdw-bento__masthead-blocks {
    justify-content: flex-start;
  }
}

@media (max-width: 40rem) {
  .vdw-bento__chapnav {
    display: none;
  }

  /* W2-NB: Letzte Rettung bei großer Grundschrift — passt ein Wort trotz der
     Größenstufen nicht in die Spalte („Weitere Beiträge" bei 320 px / 32 px),
     bricht es um, statt aus der Fläche zu ragen. Desktop bleibt bei
     overflow-wrap: normal (Runde 2, „Veranstaltungskalen/der"). */
  .vdw-bento .vdw-bento__chapter-title {
    overflow-wrap: anywhere;
  }

  /* W2-B-04: Bei großer Schrift passen Marke und Inhalt-Knopf nicht in eine
     Zeile — der Knopf rutscht in die nächste und bricht seine Beschriftung
     notfalls um, statt rechts aus dem Viewport zu laufen. */
  .vdw-bento__topbar-inner {
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }

  /* (0,3,1): muss .vdw-bento button.vdw-bento__toc-toggle (Polster, nowrap) schlagen. */
  .vdw-bento .vdw-bento__topbar-inner button.vdw-bento__toc-toggle {
    /* W2-V2-02: Knopf direkt hinter der Marke (Abstand = gap), wie vor W2-B-04.
       Das frühere margin-left:auto dieser Breakpoint-Regel verlor gegen
       (0,2,1) und war wirkungslos — mit (0,3,1) schob es den Knopf nach rechts. */
    margin-left: 0;
    /* „Inhaltsverzeichnis" passt bei 320 px nicht mehr neben die Marke: der
       Knopf nimmt den Rest der Zeile und trennt am weichen Trennstrich der
       Beschriftung („Inhalts-/verzeichnis"). Erst wenn selbst das längste
       Wortstück nicht passt (große Schrift), rutscht er in die nächste Zeile. */
    flex: 1 1 0;
    min-width: min-content;
    max-width: max-content;
    /* Seitenpolster höchstens 4,5vw (bei Standardschrift ab 320 px gleich). */
    padding-inline: min(0.9rem, 4.5vw);
    white-space: normal;
    overflow-wrap: break-word;
    text-align: left;
  }

  .vdw-bento__chapter {
    padding-block: 2.75rem;
  }
}

/* Tablet (48–75rem): 2 GLEICHWERTIGE, großzügige Spalten statt des 2/3+1/3-
   Split-Grids, das hier gequetscht wirken und den Magazin-Charakter verlieren
   würde. Deckt beide Tablet-Teilbänder ab: 768–1023px (IV im Drawer, Content
   volle Breite → ~318px/Karte) UND 1024–1199px (IV-Sidebar sichtbar → ~330–
   410px/Karte). Die Wide/Narrow-Spans (2/3 + 1/3) greifen erst wieder ab Desktop
   (>=75rem = 1200px, dann 3 Spalten). Isoliert auf die Split-Klassen — die
   fluiden auto-fill-Grids unberührt. */
@media (min-width: 48rem) and (max-width: 74.99rem) {
  .vdw-bento__grid--split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* --full wird hier BEWUSST nicht zurueckgesetzt: volle Breite soll auf jeder
     Viewport-Breite volle Breite bleiben, auf Tablet also beide Spalten. */
  .vdw-bento__grid-item--wide,
  .vdw-bento__grid-item--narrow {
    grid-column: auto;
  }

  .vdw-bento__grid--split > .vdw-bento__grid-item--span-t1 {
    grid-column: span 1;
  }

  .vdw-bento__grid--split > .vdw-bento__grid-item--span-t2 {
    grid-column: 1 / -1;
  }
}

/* Split-Grid kollabiert unter 48rem auf eine Spalte; Spans zurücksetzen.
   Isoliert auf die neuen Split-Klassen — bestehende auto-fill-Grids unberührt.
   W5-FE-01: `1fr` heißt minmax(auto, 1fr) — die Spur wuchs auf die intrinsische
   Bildbreite (831 px bei 320 px Viewport), alle Kacheln liefen rechts hinaus.
   minmax(0, 1fr) plus min-width:0 auf Kachel, Karte und Bildfläche hält die
   Spalte auf Viewportbreite. */
@media (max-width: 47.99rem) {
  .vdw-bento__grid--split {
    grid-template-columns: minmax(0, 1fr);
  }

  .vdw-bento__grid--split > .vdw-bento__grid-item,
  .vdw-bento__grid--split .vdw-bento__card,
  .vdw-bento__grid--split .vdw-bento__media {
    min-width: 0;
    max-width: 100%;
  }

  .vdw-bento__grid--split .vdw-bento__img {
    max-width: 100%;
  }

  .vdw-bento__grid-item--wide,
  .vdw-bento__grid-item--narrow {
    grid-column: auto;
  }
}

/* W2-V-01: Selektor muss die Drawer-Regel html.vdw-toc-js .vdw-bento__iv
   (0,2,1) mindestens erreichen und steht danach — sonst laeuft die
   transform-Transition trotz reduzierter Bewegung weiter. */
@media (prefers-reduced-motion: reduce) {
  html.vdw-toc-js .vdw-bento__iv,
  .vdw-bento__iv {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vdw-bento__card {
    transition: none;
  }

  .vdw-bento__card:hover {
    transform: none;
  }
}

/* Full turquoise carries off-white; inner white cards retain dark text. */
.vdw-bento .vdw-bento__chapter--tuerkis .vdw-bento__chapter-title,
.vdw-bento .vdw-bento__chapter--tuerkis .vdw-bento__chapter-sub,
.vdw-bento .vdw-bento__chapter--tuerkis .vdw-bento__stimme-kicker,
.vdw-bento .vdw-bento__chapter--tuerkis .vdw-bento__quote-text,
.vdw-bento .vdw-bento__chapter--tuerkis .vdw-bento__quote-cite,
.vdw-bento .vdw-bento__chapter--tuerkis .vdw-bento__quote-cite a,
.vdw-bento .vdw-bento__chapter--tuerkis .vdw-bento__quote-cite a:hover,
.vdw-bento .vdw-bento__chapter--tuerkis .vdw-bento__quote-cite a:focus-visible {
  color: var(--vdw-on-tuerkis, #f5f5f5);
}