/* =====================================================================
   client.css — vrb hessen
   Quelle: 05 Kunden-Notizen/DLH/Design-Vorgaben vrb hessen.md
   Stand: 01.09.2026

   Teil A = Werte (Tokens). Teil B = vrb-Sonderstile, für die Astra
   keine Customizer-Felder hat.
   Farben werden NICHT dupliziert, sondern auf die Astra Global Colors
   gelegt — eine Wahrheit, gesetzt im Customizer.
   ===================================================================== */

/* ---------- TEIL A · TOKENS ------------------------------------------ */
:root {
  /* Farben — Astra Global Colors (Palette "vrb hessen") */
  --c-vrb-gelb:       var(--ast-global-color-0); /* #FFE500 */
  --c-vrb-dunkelblau: var(--ast-global-color-1); /* #00405E */
  --c-vrb-hellblau:   var(--ast-global-color-6); /* #49C9E6 */
  --c-vrb-pink:       var(--ast-global-color-8); /* #FF007D */
  --c-brand-soft:     rgba(255, 229, 0, 0.4);    /* vrb gelb 40 % */

  /* Rollen-Tokens (erwartet von gf-base.css) */
  --c-brand:        var(--ast-global-color-0);
  --c-brand-dark:   var(--ast-global-color-1);
  --c-accent:       var(--ast-global-color-1);
  --c-accent-dark:  #000000;
  --c-text:         var(--ast-global-color-3);   /* #000000 */
  --c-text-muted:   var(--ast-global-color-3);
  --c-bg:           var(--ast-global-color-4);   /* #FFFFFF */
  --c-bg-soft:      var(--ast-global-color-5);   /* #FFFFFF */
  --c-bg-tile:      var(--ast-global-color-6);   /* #49C9E6 */
  --c-border:       var(--ast-global-color-7);   /* #E5E5E5 — Platzhalter, im Entwurf nicht definiert */

  /* Statusflächen — aus der GF-Vorlage übernommen, nicht aus dem vrb-Entwurf */
  --c-danger-bg:    #FCEAED;
  --c-warn-bg:      #FDF3E7;
  --c-ok-bg:        #ECFDF5;

  /* Schriften — Provisorium mit Google Fonts, Ersatz für DIN 2014 /
     Minion Pro / Menlo. Tausch erfolgt im Astra-Customizer, sobald die
     Weblizenzen geklärt sind. */
  --font-base:   "minion-pro", Georgia, "Times New Roman", serif;  /* Adobe Fonts, Kit gcr4mfq (05.10.2026) */
  --font-head:   "din-2014", "Helvetica Neue", Arial, sans-serif;  /* Adobe Fonts, Kit gcr4mfq (05.10.2026) */
  --font-akzent: "IBM Plex Mono", "Courier New", monospace;

  --fw-light: 400;  --fw-medium: 600;  --fw-semi: 600;  --fw-bold: 700;

  /* Größen — Artboard 1920 px, 1:1 als CSS-px */
  --fs-body:  20px;
  --fs-small: 16px;
  --fs-h1:    64px;
  --fs-h2:    56px;   /* "H IM BALKEN" — die im Entwurf tatsächlich genutzte 2. Ebene */
  --fs-h2-alt: 40px;  /* Figma-Stil "H2"/"FrageBalken", im Layout als freie Größe */
  --fs-h3:    32px;
  --fs-h4:    24px;
  --fs-h5:    20px;
  --fs-h6:    16px;
  --fs-cta:    24px;
  --fs-akzent: 24px;

  --lh-tight: 1.25;  --lh-body: 1.3;  --lh-h1: 1.5;
  --ls-cta: 0.02em;  --ls-akzent: 0.16em;

  /* Abstände — abgeleitet aus der Figma-Auslesung (6·16·24·32·45·67·80).
     Vorläufig: die Skala steht erst, wenn mehr Sektionen ausgelesen sind. */
  --space-xs: 6px;   --space-s: 16px;  --space-sm: 24px;
  --space-m: 32px;   --space-ml: 45px; --space-l: 67px;  --space-xl: 80px;

  /* Flächen: im gesamten Entwurf weder Radien noch Schatten */
  --radius: 0;
  --radius-card: 0;
  --shadow-card: none;

  --maxw-content: 1200px;

  /* Schrägstellung — Gestaltungsprinzip, Zitat der dlh-Schwesterseite */
  --schraeg: -2.16deg;
}

/* ---------- TEIL B · VRB-SONDERSTILE --------------------------------- */

/* Radien und Schatten, die Astra und Spectra von sich aus mitbringen.
   Der Entwurf ist durchgehend rechtwinklig und flach. */
button, .ast-button, .ast-custom-button, .button,
input[type="button"], input[type="reset"], input[type="submit"],
input[type="text"], input[type="number"], input[type="email"],
input[type="url"], input[type="password"], input[type="search"],
input[type="tel"], input[type="date"], select, textarea, fieldset,
.wp-block-button__link, a:where(.wp-block-button__link),
.wp-block-search__button, .wp-block-file__button,
.ast-article-inner, .ast-separate-container .ast-article-post,
.uagb-buttons-repeater, .wp-block-uagb-buttons-child .uagb-buttons-repeater,
.wp-block-image img, .wp-block-image figure {
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-card) !important;
}

/* Fließtext bleibt Serife, Überschriften Grotesk — auch in gf-base-Scopes */
.gf-scope h1, .gf-scope h2, .gf-scope h3,
.gf-scope h4, .gf-scope h5, .gf-scope h6 { font-family: var(--font-head); }

/* H1: einzelnes Wort im Satz auf Demi absetzen ("bildung.") */
.h1-demi { font-weight: var(--fw-medium); }

/* Überschrift im farbigen Balken */
.h-balken {
  font-family: var(--font-head);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  text-transform: none;
}

/* Fragebalken / freie 40-px-Stufe */
.fragebalken {
  font-family: var(--font-head);
  font-size: var(--fs-h2-alt);
  line-height: 1.5;
}

/* CTA — line-height 1 plus Ausgleich der Oberlänge (Vertical Trim
   "Cap height" im Entwurf), sonst sitzt der Text zu tief. */
.cta {
  font-family: var(--font-head);
  font-size: var(--fs-cta);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: var(--ls-cta);
  text-transform: uppercase;
  padding-top: 0.18em;
}

/* Akzent — Menlo-Ersatz, laut Styleguide nur für Slogans und Key-Claims,
   maximal zweizeilig, nie im Fließtext. */
.akzent {
  font-family: var(--font-akzent);
  font-size: var(--fs-akzent);
  font-weight: var(--fw-bold);
  font-style: italic;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-akzent);
  text-transform: uppercase;
}

/* Schräggestellter Kasten — Button und Menlo-Statement, gleiches Prinzip */
.schraeg { transform: rotate(var(--schraeg)); transform-origin: center; }
.akzent-kasten {
  display: inline-block;
  background: var(--c-bg);
  color: var(--c-text);
  padding: var(--space-s) var(--space-sm);
  transform: rotate(var(--schraeg));
  transform-origin: center;
}
/* Rotierte Elemente belegen weiter ihr unrotiertes Rechteck — etwas Luft,
   damit die Ecken nichts überlappen, und kein Querscrollen auf Mobil. */
.schraeg, .akzent-kasten { margin: 0.35em 0; max-width: 100%; }
body { overflow-x: hidden; }

/* Sektions-Farbkombinationen — gemessen an den Frame-Exporten 01.09.2026 */
.sek-hellblau { background: var(--c-vrb-hellblau); }
.sek-hellblau, .sek-hellblau p, .sek-hellblau li,
.sek-hellblau h1, .sek-hellblau h2 { color: var(--c-vrb-dunkelblau); }
.sek-hellblau h3 { color: #FFFFFF; }

.sek-dunkelblau { background: var(--c-vrb-dunkelblau); }
.sek-dunkelblau, .sek-dunkelblau p, .sek-dunkelblau li,
.sek-dunkelblau h1, .sek-dunkelblau h2, .sek-dunkelblau h3 { color: #FFFFFF; }

.sek-pink { background: var(--c-vrb-pink); }
.sek-pink h1, .sek-pink h2 { color: var(--c-vrb-gelb); }
.sek-pink, .sek-pink p, .sek-pink li, .sek-pink h3 { color: #FFFFFF; }

.sek-gelb { background: var(--c-vrb-gelb); }
.sek-gelb, .sek-gelb p, .sek-gelb li,
.sek-gelb h1, .sek-gelb h2, .sek-gelb h3 { color: var(--c-text); }

.sek-gelb-soft { background: var(--c-brand-soft); }

/* Meta-Zeilen und Kategorien: hellblau auf Weiß */
.meta-hellblau { color: var(--c-vrb-hellblau); font-size: var(--fs-small); }

/* Links sind nicht allein an der Farbe erkennbar (WCAG 1.4.1).
   Gilt fuer Links im FLIESSTEXT — nicht fuer Ueberschriften, Karten-Titel
   oder Buttons. Die erste Fassung galt fuer alle Links in .entry-content
   und hat deshalb auch die Titel im Beitragsraster unterstrichen
   (gefunden von Tanja am 01.09.2026). */
.entry-content p a,
.entry-content li a,
.entry-content td a,
.site-footer a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- SUCHFELD IN DER METAZEILE -------------------------------- */
/* Weiße Fläche 170 × 40 px zwischen "Archiv" und "Downloads", ohne Rahmen,
   ohne Radius, ohne Icon — gemessen an START.pdf, 01.09.2026.
   Der Menüpunkt selbst wird durch das Formular ersetzt (siehe functions.php);
   die Regel unten fängt den Fall ab, dass der Filter nicht greift. */
.vrb-suche > a { display: none; }
.vrb-suchform { margin: 0; display: flex; }
.vrb-suchfeld[type="search"] {
  width: 170px;
  height: 40px;
  padding: 0 12px;
  background: var(--c-bg);
  border: 0;
  border-radius: var(--radius);
  box-shadow: none;
  font-family: var(--font-head);
  font-size: var(--fs-small);
  color: var(--c-text);
  -webkit-appearance: none;
  appearance: none;
}
.vrb-suchfeld[type="search"]::placeholder { color: var(--c-text); opacity: .55; }
/* Sichtbarer Fokus — der Entwurf sieht keinen vor (WCAG 2.4.7) */
.vrb-suchfeld[type="search"]:focus-visible {
  outline: 2px solid var(--c-text);
  outline-offset: 2px;
}
@media (max-width: 921px) {
  .vrb-suchform { width: 100%; }
  .vrb-suchfeld[type="search"] { width: 100%; }
}

/* ---------- HEADER --------------------------------------------------- */
/* Gemessen an den acht Frame-Exporten, 01.09.2026. Auf allen acht ist das
   gelbe Kopfband identisch: volle Breite, Höhe 590 px, darauf eine weiße
   Form mit 50 % Deckkraft (NICHT "gelb 40 %" — anderer Mechanismus).
   Das Band umfasst Header UND Hero als einen Block.
   Solange der Hero nicht steht, trägt der Header das Gelb allein. Beim
   Hero-Bau wandert Fläche und Form auf .vrb-hero, der Header wird
   transparent gestellt — sonst läuft eine Kante durch die Form. */
#masthead { background: var(--c-vrb-gelb); }
/* Astra malt Weiß auf die BALKEN, nicht nur auf die Wrapper — beides
   transparent stellen, sonst bleibt der Header weiß. */
.ast-above-header-wrap,
.ast-main-header-wrap,
.ast-above-header-bar,
.ast-primary-header-bar,
.main-header-bar { background: transparent; background-color: transparent; }

/* Das Logo steht im Entwurf bei x362–610, y26–287 und überspannt damit
   beide Zeilen. Es sitzt deshalb in der OBEREN Zeile und steht nach unten
   über, statt nach oben auszubrechen. */
.ast-above-header-bar { overflow: visible; }
.site-above-header-wrap { position: relative; }
/* Aus dem Fluss genommen: sonst DEHNT das Logo die obere Zeile (gemessen
   250 px statt 178), statt nach unten in die primaere Zeile ueberzustehen. */
.site-header-above-section-left {
  position: absolute;
  /* 20 px = Innenabstand von Astras .ast-container; damit sitzt die linke
     Logokante auf der Containerkante (gemessen 192,5 px bei 1600 Viewport). */
  left: 20px;
  top: 26px;
  z-index: 2;
  align-items: flex-start;
  overflow: visible;
}
/* Astra legt um das Logo noch einen eigenen Innenabstand (20px oben/unten
   auf .ast-site-identity) — der schob das Logo auf y46 statt y26. */
.site-header-above-section-left .ast-builder-layout-element,
.site-header-above-section-left .ast-site-identity { padding: 0; }

/* Zeilenhöhen: Suchfeld zentriert bei y89, aktiver Menüpunkt zentriert
   bei y275. Daraus 178 px für die obere, 194 px für die primäre Zeile.
   Die Höhe gehört auf die Grid-Reihe, nicht auf den Balken — sonst sitzt
   der Inhalt oben statt mittig (gemessen: Suchfeld bei y5 statt y69). */
/* Astras Grid reserviert für die (absolut gesetzte) Logo-Sektion weiter eine
   Spalte — gemessen 149,7 px, um die die Metazeile zu früh endete. Als Flex
   mit flex-end sitzt sie auf der Containerkante. */
.ast-above-header-bar .ast-builder-grid-row  { display: flex; justify-content: flex-end; min-height: 178px; align-items: center; }
.ast-primary-header-bar .ast-builder-grid-row { min-height: 194px; align-items: center; }

/* Beide Zeilen rechtsbündig, Abstände aus dem Entwurf.
   Hauptzeile: zwischen den Beschriftungen durchgehend 57 px.
   Metazeile: 57–64 px, im Entwurf nicht einheitlich — auf 57 vereinheitlicht. */
#ast-hf-menu-1, #ast-hf-menu-2 { align-items: center; gap: 17px; }
#ast-hf-menu-1 > li > .menu-link,
#ast-hf-menu-2 > li > .menu-link { padding-inline: 20px; }

/* Metazeile: 24 px, Großbuchstaben, schwarz. Alle vier Punkte unterstrichen —
   im Entwurf sind es nur DOWNLOADS und LINKS, aber bei schwarzer Schrift auf
   Gelb ist die Unterstreichung das einzige Erkennungsmerkmal (WCAG 1.4.1).
   Vorgelegt an Micha am 01.09.2026. */
#ast-hf-menu-2 > li > .menu-link {
  font-family: var(--font-head);
  font-size: 24px;
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: var(--ls-cta);
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
}
#ast-hf-menu-2 > li.vrb-suche { padding-inline: 20px; }

/* Aktiver Hauptmenüpunkt: dunkelblaue Fläche, weiße Schrift, rechtwinklig.
   Gemessen 143 × 51 px um eine Beschriftung von 102 × 17 px. */
#ast-hf-menu-1 > li.current-menu-item > .menu-link,
#ast-hf-menu-1 > li.current-menu-ancestor > .menu-link,
#ast-hf-menu-1 > li.current_page_item > .menu-link {
  background: var(--c-vrb-dunkelblau);
  color: #FFFFFF;
  border-radius: var(--radius);
}
#ast-hf-menu-1 > li > .menu-link { padding-block: 13px; }

/* Astra haengt an jeden Menuepunkt ein Pfeil-Icon; ohne Untermenue weg damit. */
#ast-hf-menu-1 > li:not(.menu-item-has-children) > .menu-link > .ast-icon,
#ast-hf-menu-2 > li > .menu-link > .ast-icon { display: none; }

@media (max-width: 921px) {
  .ast-above-header-bar, .ast-primary-header-bar { min-height: 0; }
  .site-header-above-section-left { position: static; align-items: center; }
}

/* ---------- HEADER: TASTATURBEDIENUNG -------------------------------- */
/* BEFUND 01.09.2026, im Browser gemessen: Das Untermenue unter "News" liess
   sich per Tastatur nicht oeffnen — weder durch Fokus auf den Menuepunkt noch
   durch Enter auf Astras Toggle (aria-expanded blieb "false", das Untermenue
   "hidden"). Berichte, Positionen und Presse waren damit nur mit der Maus
   erreichbar. WCAG 2.1.1.
   Die URSACHE ist nicht geprueft — hier steht nur der Weg, der es behebt. */
#ast-hf-menu-1 > li.menu-item-has-children:focus-within > .sub-menu,
#ast-hf-menu-2 > li.menu-item-has-children:focus-within > .sub-menu {
  visibility: visible;
  opacity: 1;
  transform: none;
}

/* Fokusrahmen. Astra liefert im Header "dotted, thin" — gemessen 0,57 px in
   Dunkelblau auf Gelb, praktisch unsichtbar. Ersetzt durch einen soliden
   schwarzen Rahmen mit Abstand (WCAG 2.4.7, und 2.4.11 in 2.2). */
#masthead a:focus-visible,
#masthead .dropdown-menu-toggle:focus-visible,
#masthead button:focus-visible {
  outline: 2px solid var(--c-text);
  outline-offset: 2px;
  outline-style: solid;
}

/* ---------- HERO ----------------------------------------------------- */
/* Das gelbe Band umfasst Header UND Hero und ist deshalb EIN Element:
   Flaeche und Form liegen auf #masthead, der Hero haengt per
   astra_masthead_bottom darin. Keine Kante, keine zweite Flaeche.
   Gemessen an den acht Frames (Artboard 1920 x 590):
   Header 372 px + Hero 218 px (H1 96 + Subline 62 + 60 Abstand) = 590. */
#masthead {
  position: relative;
  background-color: var(--c-vrb-gelb);
  background-image: url("vrb-header-form.svg");
  background-repeat: no-repeat;
  background-position: right top;
  background-size: 100% 100%;
}

.vrb-hero {
  max-width: var(--maxw-content);
  margin: 0 auto;
  padding: 0 20px 60px;
  text-align: center;
}
.vrb-hero-titel {
  font-family: var(--font-head);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h1);
  text-transform: lowercase;
  color: var(--c-text);
  margin: 0;
}
/* Subline: Grotesk im Normalschnitt, nicht die Fließtext-Serife — am
   Frame-Render geprueft 01.09.2026, entspricht DIN 2014 Regular. */
.vrb-hero-sub {
  font-family: var(--font-head);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--c-text);
  max-width: 1080px;
  margin: 0 auto;
}

/* Der Button haengt im Entwurf ueber die Containerkante hinaus und sitzt
   auf jedem Frame woanders (y388 bis y485, Mitte x1560 bis x1666).
   Festgelegt auf die Position der Startseite — an Micha gemeldet. */
.vrb-hero-cta {
  position: absolute;
  top: 485px;
  right: 8.75%;
  text-decoration: none;
  z-index: 3;
}

/* 23.10.2026: Grenze von 1279 auf 1499 px. Gemessen: zwischen 1280 und ~1400 px
   verdeckte der absolut gesetzte Button das Ende der Hero-Unterzeile (bis 50 px),
   bei 1440 px blieben 16 px. Ab 1500 px mindestens 40 px Luft. */
@media (max-width: 1499px) {
  .vrb-hero-cta { position: static; display: inline-block; margin-top: var(--space-m); }
  .vrb-hero { padding-bottom: var(--space-m); }
}
/* Ab 1500 px sitzt der Button absolut rechts. Die zentrierte Unterzeile darf nur so
   breit werden, dass sie vor dem Button endet: Button links = 91,25vw - 324px,
   Textende = 50vw + Breite/2, dazu 24px Luft und Puffer fuer die Scrollleiste. */
@media (min-width: 1500px) {
  .vrb-hero-sub { max-width: min(1080px, calc(82.5vw - 730px)); }
}

/* ---------- METAZEILE: PLATZ FUER DAS LOGO --------------------------- */
/* Das Logo ist absolut gesetzt und liegt damit nicht im Fluss. Unter rund
   1400 px Viewport lief die Metazeile darunter durch — gemessen bei 1000 px:
   Logo endet bei x220, "TERMINE" begann bei x84. */
.ast-above-header-bar .ast-builder-grid-row { padding-left: 240px; }

@media (max-width: 1400px) {
  #ast-hf-menu-2 { gap: 8px; }
  #ast-hf-menu-2 > li > .menu-link,
  #ast-hf-menu-2 > li.vrb-suche { padding-inline: 10px; }
}
@media (max-width: 921px) {
  .ast-above-header-bar .ast-builder-grid-row { padding-left: 0; }
}

/* ---------- ABSTAND UEBER DEM INHALT --------------------------------- */
/* Astra setzt an #primary im Layout "Volle Breite / Contained" oben UND
   unten 60 px. Das steht fest im Theme, nicht als Customizer-Option:
   astra/inc/class-astra-dynamic-css.php, Zeile 1479 ff., ausgegeben ab
   min-width 1200. Darunter greift Astras allgemeine Regel mit 1,5em.
   Der Hero endet buendig — oben braucht es keinen Abstand, unten bleibt er. */
.ast-plain-container.ast-no-sidebar #primary,
.ast-plain-container #primary { margin-top: 0; margin-bottom: 60px; }

/* ---------- BEITRAGSLISTE (News) ------------------------------------- */
/* Zweispaltig, gemessen am Frame START.pdf: Datum und Kategorien in
   vrb hellblau 16 px Grossbuchstaben, Titel als H3. */
.vrb-newsliste .wp-block-post-template { gap: var(--space-xl) var(--space-l); }
.vrb-news-datum,
.vrb-news-kategorien {
  font-family: var(--font-head);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-cta);
  color: var(--c-vrb-hellblau);
}
.vrb-newsliste .wp-block-post-title { margin: var(--space-s) 0; }
.vrb-newsliste .wp-block-post-title a { color: var(--c-text); text-decoration: none; }
.vrb-newsliste .wp-block-post-title a:hover { text-decoration: underline; }
.vrb-newsliste .wp-block-post-excerpt__more-text { margin-top: var(--space-s); }

/* ---------- HELLBLAUER BALKEN --------------------------------------- */
/* Gemessen an START, PRESSE, BERICHTE, POSITIONEN: 1198 x 302 px,
   volle Containerbreite. Innenabstaende aus der Boxkante abgeleitet:
   H2 links bei x42, Ornamente bei x620 und x1115, Hoehe y23-261. */
.vrb-balken {
  min-height: 302px;
  padding: var(--space-m) var(--space-ml);
  margin-block: var(--space-xl);
  display: flex;
  align-items: center;
}
.vrb-balken > .wp-block-columns { width: 100%; margin: 0; }
.vrb-balken-titel {
  font-family: var(--font-head);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  margin: 0;
}
.vrb-balken-aussage h3 { margin-top: 0; }
.vrb-balken-aussage p:last-child { margin-bottom: 0; }

/* Ornamente links und rechts vom Textblock. Hoehe 238 px im Entwurf. */
.vrb-balken-aussage {
  position: relative;
  padding-inline: 72px;
}
.vrb-balken-aussage::before,
.vrb-balken-aussage::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
}
.vrb-ornament-klammer::before,
.vrb-ornament-klammer::after { width: 42px; height: 238px; }
.vrb-ornament-klammer::before { left: 0;  background-image: url("vrb-klammer-links.svg"); }
.vrb-ornament-klammer::after  { right: 0; background-image: url("vrb-klammer-rechts.svg"); }

.vrb-ornament-zitat::before,
.vrb-ornament-zitat::after { width: 44px; height: 90px; background-image: url("vrb-zitat.svg"); }
.vrb-ornament-zitat::before { left: 0;  top: 18%; }
.vrb-ornament-zitat::after  { right: 0; bottom: 18%; top: auto; transform: rotate(180deg); }

@media (max-width: 921px) {
  .vrb-balken { min-height: 0; padding: var(--space-m) var(--space-s); }
  .vrb-balken-aussage { padding-inline: 48px; }
  .vrb-ornament-klammer::before, .vrb-ornament-klammer::after { width: 24px; height: 140px; }
}

/* ---------- EINZELBEITRAG -------------------------------------------- */
/* Astra gibt im Kopf zuerst die H1 aus, danach die Metazeile. Fuer vrb steht
   das Datum davor — wie in der Uebersicht. Astra hat dafuer keine Einstellung:
   Titel und Meta sind dort ein gemeinsamer Strukturpunkt. Ueber Flex geloest,
   die DOM-Reihenfolge bleibt (Titel zuerst) und damit auch die Vorlesereihen-
   folge fuer Screenreader sinnvoll. */
.ast-single-post .entry-header {
  display: flex;
  flex-direction: column;
}
.ast-single-post .entry-header .entry-meta { order: -1; margin-bottom: var(--space-s); }

/* ---------- BEITRAGSRASTER: ICONS ------------------------------------ */
/* Spectra setzt Dashicons vor Datum (dashicons-calendar) und Kategorien
   (dashicons-tag). Fuer das Datum gibt es keine Einstellung, und
   hideTaxonomyIcon greift beim Tag-Symbol nicht — gemessen 01.09.2026.
   Der Entwurf zeigt beides ohne Symbol. */
.uagb-post-grid .dashicons,
.uagb-post__taxonomy .dashicons,
.uagb-post__date .dashicons { display: none; }

/* ==========================================================================
   KERNSEITEN · 25.09.2026 (Cowork)
   Aufgebaut nach den Figma-Frames UEBER UNS, SERVICE, KONTAKT (Prototyp-
   Ansicht). Werte sind am Frame-Screenshot GEMESSEN (Massstab 0,417), nicht
   in Figma abgelesen — vor der QA-Woche gegen Figma gegenpruefen.
   ========================================================================== */

/* Bildband unter dem gelben Kopfband: Freisteller auf Dunkelblau.
   Frame: 1920 x 679 px, 14 px weisser Abstand zum Kopfband (gemessen). */
.vrb-bildband {
  position: relative;
  background: var(--c-vrb-dunkelblau);
  margin-top: 14px !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}
.vrb-bildband .vrb-bildband-bild { margin: 0 !important; }
.vrb-bildband .vrb-bildband-bild img { display: block; width: 100%; height: auto; }
.vrb-bildband-labels {
  position: absolute;
  top: 57%;
  left: 12.5%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin: 0 !important;
  padding: 0 !important;
}
.vrb-bildband--rechts .vrb-bildband-labels { left: 61%; }
.vrb-bildband--tief .vrb-bildband-labels { top: 67%; }
.vrb-label {
  display: inline-block;
  margin: 0 !important;
  padding: 4px 18px;
  background: var(--c-vrb-hellblau);
  color: #FFFFFF;
  font-family: var(--font-head);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.vrb-bildband-labels .vrb-label:nth-child(2) { margin-left: 48px !important; }
.vrb-bildband--gelb .vrb-label { background: var(--c-vrb-gelb); color: var(--c-vrb-dunkelblau); }
@media (max-width: 921px) {
  .vrb-bildband-labels { position: static; padding: 16px 20px 24px !important; }
  .vrb-label { font-size: 20px; }
  .vrb-bildband-labels .vrb-label:nth-child(2) { margin-left: 24px !important; }
}

/* Abschnitte der Kernseiten */
.vrb-abschnitt { margin-top: var(--space-xl) !important; }
.vrb-h-caps {
  font-family: var(--font-head);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}

/* Farbkasten neben Text (Grundsatzprogramm, Service) */
.vrb-kasten { padding: var(--space-m) var(--space-m) var(--space-l) !important; }
.vrb-kasten h2 {
  font-family: var(--font-head);
  font-size: 44px;
  hyphens: manual;
  font-weight: var(--fw-bold);
  line-height: 1.15;
  margin: 0 0 var(--space-sm);
}
.vrb-kasten p, .vrb-kasten li { font-family: var(--font-head); font-size: 18px; }
.sek-hellblau.vrb-kasten h2 { color: var(--c-vrb-gelb); }
.sek-hellblau.vrb-kasten p, .sek-hellblau.vrb-kasten li { color: #FFFFFF; }
.sek-gelb.vrb-kasten h2 { color: var(--c-vrb-dunkelblau); }
.sek-dunkelblau.vrb-kasten h2 { color: var(--c-vrb-gelb); }
.sek-pink.vrb-kasten h2 { color: var(--c-vrb-gelb); }

/* Schraege Akzent-Buttons (Menlo-Ersatz), drei Farbvarianten */
.vrb-akzent-btns { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; margin-top: var(--space-m); }
.vrb-akzent-btns p { margin: 0 !important; }
.vrb-akzent-btn {
  display: inline-block;
  padding: 10px 24px;
  font-family: var(--font-akzent);
  font-size: 22px;
  font-weight: var(--fw-bold);
  font-style: italic;
  letter-spacing: var(--ls-akzent);
  text-transform: uppercase;
  text-decoration: none !important;
  transform: rotate(var(--schraeg));
  background: var(--c-vrb-dunkelblau);
  color: var(--c-vrb-gelb) !important;
}
.vrb-akzent-btn--hellblau { background: var(--c-vrb-hellblau); color: var(--c-vrb-dunkelblau) !important; }
.vrb-akzent-btn--weiss { background: #FFFFFF; color: #000000 !important; }
.vrb-akzent-btn:focus-visible { outline: 2px solid #000; outline-offset: 3px; }

/* Aussage mit gelben Klammern auf Weiss (Ueber uns, Service, Kontakt) */
.vrb-aussage { max-width: 560px !important; margin-inline: auto !important; text-align: center; }
.vrb-aussage h3 {
  color: var(--c-vrb-hellblau);
  font-family: var(--font-head);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  line-height: 1.3;
  margin: 0 0 12px;
}
.vrb-aussage p { font-family: var(--font-head); font-size: 18px; margin: 0; color: var(--c-vrb-dunkelblau); }
.sek-hellblau .vrb-aussage h3, .sek-hellblau .vrb-aussage p { color: #FFFFFF; text-align: left; }

/* Personen-Raster (Landesvorstand, Referate) */
.vrb-personen { gap: 32px 32px !important; }
.vrb-person { margin-bottom: var(--space-sm); }
.vrb-person figure { margin: 0 0 12px !important; }
.vrb-person img { width: 100%; aspect-ratio: 580 / 386; object-fit: cover; }
.vrb-person p { font-size: 16px; line-height: 1.35; margin: 0; }
.vrb-bild-platzhalter {
  aspect-ratio: 580 / 386;
  background: var(--c-border);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-size: 16px; color: #555;
  margin-bottom: 12px !important;
}

/* Magazin-Balken */
.vrb-magazin { padding: var(--space-m) var(--space-ml) !important; }
.vrb-magazin h2 { color: var(--c-vrb-gelb) !important; font-family: var(--font-head); font-size: 48px; margin: 0 0 12px; }
.vrb-magazin p { font-family: var(--font-head); font-size: 18px; }
.vrb-magazin img { max-width: 240px; margin-inline: auto; display: block; }

/* Kontakt: weisser Formularkasten im hellblauen Block */
.vrb-formkasten { background: #FFFFFF; padding: var(--space-m) !important; margin-top: var(--space-m) !important; }
.vrb-formkasten p { color: var(--c-text) !important; }

/* FOOTER-TYPO 25.09.2026 — Textstil 'Footer und Balken': DIN 2014 Regular 20 px, LH 130 % (Figma, abgelesen 27.08.) */
.site-footer, .site-footer p, .site-footer a, .site-footer .ast-footer-copyright, .site-footer .menu-link { font-family: var(--font-head); font-size: 20px; font-weight: 400; line-height: 1.3; color: #000000; }
.site-footer strong { font-weight: 700; }
.site-footer .site-primary-footer-wrap { padding-top: 48px; }

/* ---------- NAVI-FEINSCHLIFF 25.09.2026 (Tanja) ------------------------ */
/* Metazeile kleiner, sie konkurrierte mit der Hauptnavigation (beide 24 px). */
#ast-hf-menu-2 > li > .menu-link { font-size: 18px; }

/* Untermenue: kleiner und so breit wie der laengste Eintrag.
   Figma-Komponente "sub menu item": weisse Flaeche, Hover hellblau. */
#ast-hf-menu-1 .sub-menu {
  width: max-content;
  min-width: 240px;
  padding: 6px 0;
  border: 0;
  box-shadow: none;
}
#ast-hf-menu-1 .sub-menu .menu-link {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: var(--ls-cta);
  text-transform: uppercase;
  white-space: nowrap;
  padding: 10px 20px;
  color: #000000;
  background: #FFFFFF;
}
#ast-hf-menu-1 .sub-menu .menu-link:hover,
#ast-hf-menu-1 .sub-menu .menu-link:focus-visible,
#ast-hf-menu-1 .sub-menu .current-menu-item > .menu-link {
  background: var(--c-vrb-hellblau);
  color: var(--c-vrb-dunkelblau);
}
/* ---------- HOVER+BADGE 25.09.2026 (Tanja) ----------------------------- */
/* Hauptmenue: Hover und Tastaturfokus sehen aus wie der aktive Punkt.
   Vorher wechselte nur die Schrift von Schwarz auf Dunkelblau — auf Gelb
   kaum zu sehen. Der Entwurf zeigt keinen Hover-Zustand. */
#ast-hf-menu-1 > li > .menu-link { transition: background-color .15s ease, color .15s ease; }
#ast-hf-menu-1 > li:hover > .menu-link,
#ast-hf-menu-1 > li > .menu-link:focus-visible,
#ast-hf-menu-1 > li:focus-within > .menu-link {
  background: var(--c-vrb-dunkelblau);
  color: #FFFFFF;
}
#ast-hf-menu-1 > li:hover > .menu-link .ast-icon svg,
#ast-hf-menu-1 > li:focus-within > .menu-link .ast-icon svg { fill: #FFFFFF; }
@media (prefers-reduced-motion: reduce) { #ast-hf-menu-1 > li > .menu-link { transition: none; } }

/* Badge "Fuer Mitglieder – gemeinsam mehr erreichen" im Bildband, rechts oben.
   Position am Frame-Screenshot gemessen (START): rechte Kante 92,5 %, oben 11 %,
   Durchmesser 168 px bei 1920. Datei: Mediathek ID 259 (Vector.png, 167 px). */
.vrb-bildband::after {
  content: "";
  position: absolute;
  top: 11%;
  right: 7.5%;
  width: clamp(80px, 8.75vw, 168px);
  aspect-ratio: 1;
  background: url("/wp-content/uploads/Vector.png") center / contain no-repeat;
  pointer-events: none;
  z-index: 2;
}

/* ---------- KACHELN STARTSEITE 25.09.2026 -------------------------------
   Blauer Kasten "10 Gruende" und pinker Kasten "Junger/Frauen/Senioren vrb".
   Masse am Frame-Screenshot START gemessen (Massstab 0,417): je 583 x 810 px,
   36 px Abstand. Die gelben Formen sind Deko (CSS-Hintergrund, fuer
   Screenreader unsichtbar), vektorisiert aus Tanjas PNG-Exporten
   (Mediathek 260 und 262) -> assets/vrb-form-hessen.svg / vrb-form-schwung.svg. */
.vrb-kacheln { gap: 36px !important; }
@media (min-width: 782px) { .vrb-kacheln > .vrb-kachel { flex: 0 0 calc(50% - 18px) !important; min-width: 0; box-sizing: border-box; } }
.vrb-kachel {
  position: relative;
  overflow: hidden;
  min-height: 810px;
  display: flex;
  flex-direction: column;
  padding: 44px 36px 44px !important;
}
.vrb-kachel > * { position: relative; z-index: 1; }
.vrb-kachel::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.vrb-kachel h2 {
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  margin: 0 0 12px;
}
.vrb-kachel p { font-family: var(--font-head); font-size: 18px; line-height: 1.35; color: #FFFFFF; margin: 0 0 28px; }
.vrb-kachel .vrb-kachel-btn { margin: 0 0 28px; }

/* Blau: Hessen-Flaeche oben rechts, Button darauf, Text unten */
.vrb-kachel--hessen::before {
  background-image: url("vrb-form-hessen.svg");
  top: 1.5%;
  left: 31%;
  width: 64%;
  aspect-ratio: 339 / 485;
}
.vrb-kachel--hessen .vrb-kachel-btn { margin-top: 200px; }
.vrb-kachel--hessen h2 { margin-top: auto; font-size: var(--fs-h2); color: var(--c-vrb-hellblau) !important; }
.vrb-kachel--hessen h2 a { color: inherit; text-decoration: underline; text-underline-offset: 6px; }
.vrb-kachel--hessen p:last-child { margin-bottom: 0; }

/* Pink: gelber Schwung links ueber die volle Hoehe, Text rechts daneben */
.vrb-kachel--schwung::before {
  background-image: url("vrb-form-schwung.svg");
  top: 0;
  left: 0;
  height: 100%;
  width: 32.6%;
}
.vrb-kachel--schwung { padding-left: 0 !important; }
.vrb-kachel--schwung > * { margin-left: 34% !important; }
.vrb-kachel--schwung > .vrb-kachel-btn { margin-left: 28px !important; }
.vrb-kachel--schwung h2 { font-size: 44px; color: var(--c-vrb-gelb) !important; }
.vrb-kachel--schwung > p:last-child { margin-bottom: 0; }

@media (max-width: 921px) {
  .vrb-kachel { min-height: 0; }
  .vrb-kachel--hessen .vrb-kachel-btn { margin-top: 140px; }
  .vrb-kachel--hessen h2 { font-size: 40px; }
  .vrb-kachel--schwung::before { width: 18%; }
  .vrb-kachel--schwung > * { margin-left: 22% !important; padding-right: 0; }
  .vrb-kachel--schwung > .vrb-kachel-btn { margin-left: 16px !important; }
  .vrb-kachel { padding: 32px 24px !important; }
  .vrb-kachel--schwung { padding-left: 0 !important; }
  .vrb-kachel--schwung h2 { font-size: 34px; }
}

/* Termine-Button in der News-Box (Startseite), 25.09.2026. Entwurf: weisser schraeger Kasten unter der H2, leicht eingerueckt. */
.vrb-balken-btn { margin: 28px 0 0 !important; padding-left: 110px; }
@media (max-width: 921px) { .vrb-balken-btn { padding-left: 0; margin-top: 16px !important; } }

/* ---------- KONTAKTFORMULAR 25.09.2026 (Fluent Forms, Formular ID 5) ------
   Der Formularteil im Figma-Frame KONTAKT ist ein eingefuegter Screenshot eines
   Fluent-Formulars (graue Felder, fette Labels, dunkler Button). Hier auf die
   vrb-Schriften und -Farben gezogen. */
.vrb-formkasten .fluentform .ff-el-input--label label { font-family: var(--font-head); font-size: 16px; font-weight: var(--fw-bold); color: #000; }
.vrb-formkasten .fluentform .ff-el-form-control {
  font-family: var(--font-head); font-size: 18px; color: #000;
  background: #F5F5F5; border: 1px solid #C8C8C8; border-radius: 0;
}
.vrb-formkasten .fluentform .ff-el-form-control:focus { outline: 2px solid var(--c-vrb-dunkelblau); outline-offset: 1px; border-color: var(--c-vrb-dunkelblau); }
.vrb-formkasten .fluentform .ff_t_c, .vrb-formkasten .fluentform .ff-el-tc label { font-family: var(--font-head); font-size: 16px; }
.vrb-formkasten .fluentform .ff-btn-submit {
  font-family: var(--font-head); font-size: 18px; font-weight: var(--fw-medium);
  background: var(--c-vrb-dunkelblau) !important; color: #FFFFFF !important;
  border: 0; border-radius: 0; padding: 12px 24px;
}
.vrb-formkasten .fluentform .ff-btn-submit:hover,
.vrb-formkasten .fluentform .ff-btn-submit:focus-visible { background: #000000 !important; outline: 2px solid #000; outline-offset: 2px; }
/* ==========================================================
   MITGLIED WERDEN · 28.09.2026
   Beitragstabelle im gelben Kasten, Abschnitts-Überschriften
   in der Beitrittserklärung (Fluent Forms, Formular 6)
   ========================================================== */
.vrb-beitraege .wp-block-table { margin: 0; }
.vrb-beitraege table { width: 100%; border-collapse: collapse; font-size: 16px; }
.vrb-beitraege th,
.vrb-beitraege td { padding: 8px 10px 8px 0; border: 0; border-bottom: 1px solid rgba(0,0,0,.3); text-align: left; vertical-align: top; }
.vrb-beitraege thead th { font-family: var(--font-head); font-weight: var(--fw-bold); border-bottom: 2px solid #000; }
.vrb-beitraege td:last-child,
.vrb-beitraege th:last-child { text-align: right; white-space: nowrap; padding-right: 0; }
.vrb-formkasten .vrb-form-abschnitt { margin: 40px 0 8px; font-size: 22px; line-height: 1.3; color: #000; }
.vrb-formkasten .ff-el-group:first-child .vrb-form-abschnitt { margin-top: 0; }
.vrb-formkasten .ff-el-form-check-label { display: inline-flex; gap: 8px; align-items: center; margin-right: 24px; }
.vrb-beitraege .wp-block-table th,
.vrb-beitraege .wp-block-table td { border-left: 0; border-right: 0; border-top: 0; word-break: normal; overflow-wrap: normal; hyphens: auto; }
.vrb-beitraege .wp-block-table td:first-child,
.vrb-beitraege .wp-block-table th:first-child { white-space: nowrap; }
.vrb-beitraege .wp-block-table td:last-child { white-space: normal; }
/* mobil: jede Zeile zweizeilig (Gruppe + Beitrag oben, Status darunter) */
@media (max-width: 544px) {
  .vrb-beitraege.vrb-kasten { padding-left: 20px; padding-right: 20px; }
  .vrb-beitraege thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .vrb-beitraege tbody tr { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,.3); }
  .vrb-beitraege tbody tr:first-child { border-top: 2px solid #000; }
  .vrb-beitraege .wp-block-table tbody td { border: 0; padding: 0; }
  .vrb-beitraege .wp-block-table tbody td:nth-child(1) { grid-row: 1; grid-column: 1; font-weight: 700; }
  .vrb-beitraege .wp-block-table tbody td:nth-child(3) { grid-row: 1; grid-column: 2; text-align: right; }
  .vrb-beitraege .wp-block-table tbody td:nth-child(2) { grid-row: 2; grid-column: 1 / -1; }
}

/* ==========================================================
   BEITRAGS-TRENNER STARTSEITE · 28.09.2026
   Figma START: graue Linie unter jedem Beitrag, volle Spaltenbreite,
   ca. 34 px unter den Kategorien, ca. 36 px bis zum nächsten Datum
   (am Frame-Screenshot gemessen, Maßstab 0,416). Farbe: Schwarz 40 %.
   ========================================================== */
/* Spectra setzt gap und padding blockbezogen (.uagb-block-xxx.is-grid ...), daher body.home + is-grid */
body.home .uagb-post-grid.is-grid.uagb-post__items { row-gap: 36px; }
body.home .uagb-post-grid.is-grid > article.uagb-post__inner-wrap { padding-bottom: 34px; border-bottom: 1px solid rgba(0, 0, 0, .4); }

/* ==========================================================
   NEWS-BEREICH · 28.09.2026
   Aufbau nach den Figma-Frames NEWS, BERICHTE (-> Aktuelles),
   POSITIONEN, PRESSE. Maße am Prototyp-Screenshot gemessen
   (Maßstab 0,417), vor der QA gegen Figma prüfen.
   ========================================================== */

/* Beitragslisten Aktuelles / Positionen / Presse: Trenner wie Startseite */
body.page-id-148 .uagb-post-grid.is-grid.uagb-post__items,
body.page-id-149 .uagb-post-grid.is-grid.uagb-post__items,
body.page-id-150 .uagb-post-grid.is-grid.uagb-post__items { row-gap: 36px; }
body.page-id-148 .uagb-post-grid.is-grid > article.uagb-post__inner-wrap,
body.page-id-149 .uagb-post-grid.is-grid > article.uagb-post__inner-wrap,
body.page-id-150 .uagb-post-grid.is-grid > article.uagb-post__inner-wrap { padding-bottom: 34px; border-bottom: 1px solid rgba(0, 0, 0, .4); }

/* "Weitere Beiträge anzeigen": Spectra-Pagination ohne Seitenzahlen */
.uagb-post-pagination-wrap { display: flex; justify-content: center; gap: 32px; margin-top: 48px; }
.uagb-post-pagination-wrap .page-numbers:not(.next):not(.prev) { display: none; }
.uagb-post-pagination-wrap .page-numbers.next,
.uagb-post-pagination-wrap .page-numbers.prev {
  background: none !important; border: 0 !important; padding: 8px 4px !important;
  font-family: var(--font-head); font-size: 16px; font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: .02em; color: #000 !important; text-decoration: none;
}
.uagb-post-pagination-wrap .page-numbers.next:hover,
.uagb-post-pagination-wrap .page-numbers.prev:hover,
.uagb-post-pagination-wrap .page-numbers:focus-visible { text-decoration: underline; text-underline-offset: 4px; }

/* Termine-Balken: hellblau, "Termine." dunkelblau, Datum gelb, Ort weiß */
.vrb-termin-balken { position: relative; z-index: 1; min-height: 125px; display: flex; align-items: center; padding: 20px 36px; margin-block: var(--space-xl) 0; }
.vrb-termin-balken > .wp-block-columns { width: 100%; margin: 0; gap: 32px; }
.vrb-termin-titel { margin: 0; font-size: var(--fs-h2); line-height: 1; white-space: nowrap; }
.vrb-termin-titel, .vrb-termin-titel a { color: var(--c-vrb-dunkelblau) !important; text-decoration: none; }
.vrb-termin-datum { margin: 0; font-family: var(--font-head); font-size: 28px; font-weight: 600; line-height: 1.15; text-transform: uppercase; color: #fff; }
.vrb-termin-tag { color: var(--c-vrb-gelb); }
.vrb-termin-text { margin: 0; font-family: var(--font-head); font-size: 18px; line-height: 1.35; color: var(--c-vrb-dunkelblau); }

/* Intro + Vorteile-Kasten, gelbe Hessen-Fläche dahinter (Deko) */
.vrb-news-intro { position: relative; align-items: center; gap: 64px !important; margin-top: 0 !important; padding-top: var(--space-l); }
.vrb-news-intro::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: -70px; right: -4%; width: 32%; aspect-ratio: 339 / 485;
  background: url("vrb-form-hessen.svg") no-repeat center / contain;
}
.vrb-news-intro > .wp-block-column { position: relative; z-index: 1; }
.vrb-vorteile { padding: 44px 36px !important; }
.vrb-vorteile h2 { color: var(--c-vrb-hellblau) !important; margin: 28px 0 16px; }
.vrb-vorteile p { color: #fff; font-family: var(--font-head); font-size: 18px; line-height: 1.35; }
.vrb-vorteile p:last-child { margin-bottom: 0; }

/* Intro, Zahlen, Instagram bündig mit der Termine-Box (Figma), ohne den globalen 60-px-Innenabstand der Spalten */
.vrb-news-intro, .vrb-zahlen, .vrb-insta { padding-left: 0 !important; padding-right: 0 !important; }
.vrb-zahlen { position: relative; z-index: 1; }

/* Zahlenreihe */
.vrb-zahlen { margin-block: var(--space-xl) var(--space-xl) !important; padding-bottom: 16px; border-bottom: 1px solid rgba(0, 0, 0, .15); }
.vrb-zahl { display: flex; align-items: center; gap: 14px; margin: 0; font-family: var(--font-head); font-size: 16px; line-height: 1.25; }
.vrb-zahl strong { font-size: 56px; font-weight: var(--fw-bold); line-height: 1; }

/* Instagram (Platzhalter bis Feed und Konto geklärt sind) */
.vrb-insta-titel a { color: inherit; text-decoration: underline; text-underline-offset: 6px; }
.vrb-insta { gap: 20px !important; }
.vrb-insta .vrb-bild-platzhalter { aspect-ratio: 1 / 1; min-height: 0; }
.vrb-insta p:last-child { font-size: 16px; line-height: 1.35; }

@media (max-width: 781px) {
  .vrb-termin-balken { padding: 24px 20px; }
  .vrb-termin-balken > .wp-block-columns { gap: 12px; }
  .vrb-news-intro::before { width: 80%; top: auto; bottom: -40px; right: -20%; opacity: .9; }
  .vrb-zahl strong { font-size: 44px; }
}


/* ---------- EINZELBEITRAG 13.10.2026 (Tanja) --------------------------- */
/* Schreibweise wie auf der alten Seite: Beitragstitel in Versalien, H3 im
   Text normal. Die importierten Beitraege nutzen H3 fuer ganze Absaetze, in
   Versalien nicht lesbar. Seiten behalten die globale Typo (H1 lowercase,
   H3 uppercase). Lag vorher im Customizer-CSS, hierher umgezogen. */
.single-post .entry-title { text-transform: uppercase; }
.single-post .entry-content h3 { text-transform: none; }

/* Zurueck-Link ueber dem Beitrag (Hook vrb_zurueck_button in functions.php).
   Bewusst Textlink, kein schraeger Button (Tanja, 13.10.2026). */
.vrb-zurueck { margin: 0 0 var(--space-s) !important; }
.vrb-zurueck-link {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-cta);
  text-transform: uppercase;
  color: var(--c-vrb-dunkelblau) !important;
  text-decoration: none !important;
}
.vrb-zurueck-link:hover { text-decoration: underline !important; text-underline-offset: 3px; }
.vrb-zurueck-link:focus-visible { outline: 2px solid #000; outline-offset: 3px; }


/* ---------- WEITERLESEN-LINK 13.10.2026 (Einweisung) ------------------ */
/* Figma: 'Mehr lesen (Link wie bisher, nur kein Button)'. Spectra gibt den
   CTA im Beitragsraster als .wp-block-button__link aus, daher Button-Optik
   zuruecksetzen. Text 'Weiterlesen' laut Einweisung mit Frau Mueck. */
.uagb-post-grid .uagb-post__cta { margin-top: var(--space-s); }
.uagb-post-grid .uagb-post__cta a.wp-block-button__link.uagb-text-link {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  color: var(--c-text);
  font: inherit;
  text-transform: none;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.uagb-post-grid .uagb-post__cta a.wp-block-button__link.uagb-text-link:hover,
.uagb-post-grid .uagb-post__cta a.wp-block-button__link.uagb-text-link:focus-visible {
  background: none;
  color: var(--c-text);
  text-decoration-thickness: 2px;
}

/* Reihenfolge im Beitragsraster (13.10.2026, Tanja): Text → Weiterlesen → Kategorien.
   Spectra gibt die Kategorien vor dem CTA aus, deshalb per Flex-Order umgestellt. */
/* Spectra setzt .uagb-post-grid.is-grid article auf inline-block, daher hoehere Spezifitaet. */
.uagb-post-grid.is-grid article.uagb-post__inner-wrap { display: flex; flex-direction: column; }
.uagb-post-grid .uagb-post__inner-wrap > .uagb-post__cta { order: 1; }
.uagb-post-grid .uagb-post__inner-wrap > .uagb-post__excerpt ~ .uagb-post__text:not(.uagb-post__cta) { order: 2; margin-top: var(--space-s); }

/* SILBENTRENNUNG AUSSAGE-H3 MOBIL 19.10.2026: lange Woerter (POSTALISCHER) brachen ohne Trennstrich mitten im Wort */
@media (max-width: 600px) {
  .vrb-aussage h3 { -webkit-hyphens: auto; hyphens: auto; }
}

/* TERMINE 19.10.2026 (Events Manager, Formate in den EM-Einstellungen, Plugin-CSS aus)
   Liste auf /termine/: dunkelblaue Balken, Datum gelb, Text weiss (Kontrast AA). */
.vrb-termine-liste { max-width: var(--maxw-content); margin: var(--space-xl) auto; padding-inline: 20px; display: flex; flex-direction: column; gap: var(--space-s); }
.vrb-termin-zeile { display: grid; grid-template-columns: minmax(220px, 28%) 1fr; gap: 32px; align-items: center; background: var(--c-vrb-dunkelblau); padding: 24px 36px; }
.vrb-termin-zeile .vrb-termin-datum { color: #fff; }
.vrb-termin-zeile .vrb-termin-name { margin: 0 0 6px; font-family: var(--font-head); font-size: var(--fs-h4); font-weight: 600; line-height: 1.2; text-transform: uppercase; }
.vrb-termin-zeile .vrb-termin-name a { color: #fff; text-decoration: none; }
.vrb-termin-zeile .vrb-termin-name a:hover, .vrb-termin-zeile .vrb-termin-name a:focus-visible { text-decoration: underline; }
.vrb-termin-zeile .vrb-termin-text { color: #fff; margin: 0; }
.vrb-termin-mehr { display: inline-block; margin-top: 8px; font-family: var(--font-base); font-size: 18px; color: #fff; text-decoration: underline; }
.vrb-termine-leer { max-width: var(--maxw-content); margin: var(--space-xl) auto; padding-inline: 20px; }

/* Einzeltermin */
.single-event .entry-meta { display: none; }
.single-event .entry-title { text-transform: uppercase; }
.vrb-termin-einzel .vrb-termin-datum, .vrb-termin-einzel .vrb-termin-tag { color: var(--c-vrb-dunkelblau); }
.vrb-termin-einzel .vrb-termin-datum { margin-bottom: var(--space-sm); }
.vrb-termin-zurueck { margin-top: var(--space-m); }
.vrb-termin-abgesagt { font-family: var(--font-head); font-weight: 600; color: var(--c-vrb-pink); }

@media (max-width: 781px) {
  .vrb-termin-zeile { grid-template-columns: 1fr; gap: 12px; padding: 20px; }
  .vrb-termin-zeile .vrb-termin-datum { font-size: 22px; }
}
/* Termine-Balken News: Eintraege aus Events Manager (19.10.2026) */
.vrb-termin-balken-eintrag { display: grid; grid-template-columns: minmax(200px, 36%) 1fr; gap: 32px; align-items: center; }
.vrb-termin-balken-eintrag + .vrb-termin-balken-eintrag { margin-top: 16px; }
.vrb-termin-balken-eintrag .vrb-termin-text a { color: var(--c-vrb-dunkelblau); text-decoration: none; font-weight: 600; }
.vrb-termin-balken-eintrag .vrb-termin-text a:hover, .vrb-termin-balken-eintrag .vrb-termin-text a:focus-visible { text-decoration: underline; }
.vrb-termin-balken .vrb-termine-leer { margin: 0; padding: 0; font-family: var(--font-head); color: var(--c-vrb-dunkelblau); }
@media (max-width: 781px) { .vrb-termin-balken-eintrag { grid-template-columns: 1fr; gap: 4px; } }

/* UEBERLAUF MOBIL 19.10.2026: Seite liess sich bei 390 px seitlich wischen.
   Ueber uns: Hero-Wort "lehrerverband." breiter als der Bildschirm. News: Spalten vrb-news-intro (Ursache im Flex-Layout nicht weiter eingegrenzt). */
.vrb-hero-titel { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
@media (max-width: 600px) { .vrb-hero-titel { font-size: clamp(40px, 12vw, 64px); } }
@media (max-width: 781px) { .vrb-news-intro { overflow-x: clip; } }

/* 23.10.2026: Auf News lief die Seite auch bei 1024 und 1280 px seitlich ueber (8-19 px).
   Ursache gemessen: .vrb-news-intro::before (Hessen-Form, right: -4%) ragt absichtlich ueber
   die Spalte hinaus und erreicht bei schmalen Fenstern den Fensterrand. Abgeschnitten wird
   am Fensterrand (.site, volle Breite), damit die Form auf grossen Bildschirmen sichtbar bleibt. */
.site { overflow-x: clip; }