/* =========================================================================
   whatsonmadeira.info — site-tweaks.css
   Globaler CSS-Escape-Hatch. Registriert von mu-plugins/wom-design-loader.php
   unter dem Handle "wom-tweaks" mit filemtime() als Versionsstempel.
   Niemals per @import einbinden.

   Ausgeliefert unter
     https://whatsonmadeira.info/wp-content/uploads/wom-brand/site-tweaks.css
   und ueber server/sync.sh mit dem Repo abgeglichen. Nicht ueber die
   Medienbibliothek bearbeiten — der naechste Pull ueberschreibt die Aenderung.

   Bildsprache, Spec Abschnitt 7:
     Basis    Anthrazit #232326 und gebrochenes Weiss #F7F5F1
     Primaer  Lorbeerwald-Gruen #1F4032, tief und gesaettigt
     Akzent   Atlantik-Blau #1C6E8C fuer alles Interaktive
     Signal   Fischerboot-Rot #C1442E, sparsam: Zaehler, Event-Marker,
              aktiver Umschalter, aktive Sprache. Nie fuer Flaechen.

   Aufbau: mobile-first. Die Basiswerte gelten fuer Telefone, jede
   Aufweitung laeuft ueber min-width. Kein Framework, keine Utility-Klassen.
   Alle Selektoren haengen an wom-*-Klassen und koennen deshalb nicht in die
   Elementor-Editor-UI lecken.

   Abgedeckt sind alle 28 Klassen des Schnittstellen-Vertrags, saemtliche in
   den Tasks 9–12 vergebenen Element-Klassen (N8), die wom-ev*-Klassen der
   Event-Ansichten aus Task 16 (N40), der vom the_content-Filter erzeugte
   Block wom-hublinks (N7) sowie die Zustands-Hooks .is-active, .is-current
   und die von paginate_links() erzeugten .current und .dots (N19).
   ====================================================================== */

/* ------------------------------------------------------------- Tokens -- */
:root {
  /* Aus dem Global Kit gespiegelt, damit reines Shortcode-Markup ohne
     Elementor-Wrapper dieselben Werte hat. */
  --wom-primary:  #1F4032;
  --wom-ink:      #232326;
  --wom-text:     #2B2B2E;
  --wom-accent:   #1C6E8C;
  --wom-signal:   #C1442E;
  --wom-surface:  #F7F5F1;

  /* Abgeleitet, absichtlich nicht im Kit: Haarlinien, gedaempfter Text,
     Fuellflaechen. Diese Werte gehoeren ins Stylesheet, nicht in die
     Elementor-UI, weil sie nie von Hand gewaehlt werden sollen. */
  --wom-hairline: #DEDAD2;
  --wom-muted:    #63636A;
  --wom-faint:    #8B8B92;
  --wom-wash:     #EDEAE3;
  --wom-scrim:    rgba(35, 35, 38, .82);
  --wom-paper:    #FFFFFF;

  --wom-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --wom-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* N15: Container-Breite 1180 px, Widget-Abstand 24 px. Dieselben Werte
     stehen im Elementor Global Kit (01-kit.php); hier gespiegelt, damit reines
     Shortcode-Markup ausserhalb eines Elementor-Containers gleich sitzt. */
  --wom-container:  1180px;
  --wom-widget-gap: 24px;

  --wom-gutter: 20px;
  --wom-rhythm: 44px;
  --wom-speed:  .18s;
}

@media (min-width: 768px) {
  :root { --wom-gutter: 32px; --wom-rhythm: 64px; }
}
@media (min-width: 1025px) {
  :root { --wom-gutter: 48px; --wom-rhythm: 80px; }
}

body {
  background: var(--wom-surface);
  color: var(--wom-text);
}

/* Satzspiegel fuer Shortcode-Bloecke, die ohne Elementor-Container stehen. */
.wom-container {
  width: 100%;
  max-width: var(--wom-container);
  margin-inline: auto;
  padding-inline: var(--wom-gutter);
}
.wom-container > * + * { margin-block-start: var(--wom-widget-gap); }

/* Die Bildsprache ist redaktionell, nicht App-artig: nirgends Radien. */
.wom-index img,
.wom-region img,
.wom-card img,
.wom-lead img,
.wom-ev img,
.wom-related img { border-radius: 0; }

/* Alle Shortcode-Bilder fuellen ihren Rahmen formatgetreu. */
.wom-index__thumb img,
.wom-region img,
.wom-card__media img,
.wom-lead__media img,
.wom-posthero img,
.wom-ev__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Fokus sichtbar halten — Atlantik-Blau, nie wegoptimiert. */
.wom-index__row:focus-visible,
.wom-toggle__link:focus-visible,
.wom-region:focus-visible,
.wom-card:focus-visible,
.wom-lead:focus-visible,
.wom-before__link:focus-visible,
.wom-pager a:focus-visible,
.wom-breadcrumb a:focus-visible,
.wom-hublinks a:focus-visible,
.wom-related a:focus-visible,
.wom-toc a:focus-visible,
.wom-wordmark a:focus-visible,
.wom-langs a:focus-visible,
.wom-footlinks a:focus-visible,
.wom-newsletter-cta:focus-visible,
.wom-ev a:focus-visible,
.wom-aff:focus-visible {
  outline: 2px solid var(--wom-accent);
  outline-offset: 3px;
}

/* ========================================================== Index-Zeilen */
/* Startseite: nummerierte Zeilen 01 / Headline / Standfirst / Thumbnail.
   Mobil zweispaltig (Nummer + Text), ab Tablet mit Bild, ab Desktop mit
   eigener Standfirst-Spalte. */
.wom-index {
  display: flex;
  flex-direction: column;
  border-top: 2px solid var(--wom-ink);
}

.wom-index__row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 6px;
  align-items: start;
  padding: 18px 0;
  border-bottom: 1px solid var(--wom-hairline);
  text-decoration: none;
  transition: background var(--wom-speed) ease;
}
.wom-index__row:hover,
.wom-index__row:focus-visible { background: var(--wom-wash); }

/* Die laufende Nummer ist der einzige dauerhaft rote Punkt der Startseite. */
.wom-index__num {
  font: 600 12px/1.5 var(--wom-sans);
  letter-spacing: .08em;
  color: var(--wom-signal);
  font-variant-numeric: tabular-nums;
}

.wom-index__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Kicker: im Jetzt-Modus das Datum, im Immer-Modus der Kategoriename.
   Nicht im Vertrag gelistet, aber von wom_index_items() als Feld geliefert. */
.wom-index__kicker {
  font: 600 10px/1 var(--wom-sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--wom-accent);
}

.wom-index__title {
  font: 600 19px/1.22 var(--wom-serif);
  letter-spacing: -.015em;
  color: var(--wom-ink);
  text-wrap: balance;
}

.wom-index__standfirst {
  font: 400 15px/1.55 var(--wom-sans);
  color: var(--wom-muted);
}

.wom-index__thumb {
  display: none;
  overflow: hidden;
  background: var(--wom-wash);
}

@media (min-width: 600px) {
  .wom-index__row {
    grid-template-columns: 40px minmax(0, 1fr) 120px;
    column-gap: 20px;
    padding: 22px 0;
  }
  .wom-index__body  { grid-column: 2; }
  .wom-index__thumb { display: block; grid-column: 3; grid-row: 1; height: 78px; }
  .wom-index__title { font-size: 22px; }
}

@media (min-width: 1025px) {
  .wom-index__row {
    grid-template-columns: 56px minmax(0, 1fr) 260px 160px;
    column-gap: 32px;
    align-items: center;
    padding: 26px 0;
  }
  .wom-index__thumb { grid-column: 4; height: 90px; }
  .wom-index__title { font-size: 27px; }
}

/* ============================================================ Umschalter */
/* Jetzt / Immer. Reine Links mit ?ansicht=, kein JavaScript. */
.wom-toggle {
  display: inline-flex;
  gap: 0;
  border: 1px solid var(--wom-ink);
}

.wom-toggle__link {
  display: inline-block;
  padding: 11px 18px;
  font: 600 11px/1 var(--wom-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wom-ink);
  text-decoration: none;
  background: transparent;
  transition: background var(--wom-speed) ease, color var(--wom-speed) ease;
}
.wom-toggle__link + .wom-toggle__link { border-inline-start: 1px solid var(--wom-ink); }
.wom-toggle__link:hover { background: var(--wom-wash); }

/* Aktiver Zustand: Fischerboot-Rot. Der einzige gefuellte rote Block
   auf der Startseite — genau dafuer ist die Signalfarbe da.
   N19: .is-active greift als generischer Zustands-Hook gleichwertig. */
.wom-toggle__link--active,
.wom-toggle__link.is-active {
  background: var(--wom-signal);
  color: var(--wom-surface);
}
.wom-toggle__link--active:hover,
.wom-toggle__link.is-active:hover { background: var(--wom-signal); }

@media (min-width: 768px) {
  .wom-toggle__link { padding: 13px 24px; font-size: 12px; }
}

/* ======================================================= Regionen-Kacheln */
/* Sieben Kacheln: sechs Regionen plus Porto Santo. Jede traegt eine harte
   Zahl (Hoehe, Fahrzeit, Strandlaenge) als Fakt ueber dem Namen. */
.wom-regions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.wom-region {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 20px;
  background: var(--wom-paper);
  border: 1px solid var(--wom-hairline);
  text-decoration: none;
  transition: border-color var(--wom-speed) ease, transform var(--wom-speed) ease;
}
.wom-region:hover {
  border-color: var(--wom-primary);
  transform: translateY(-2px);
}

/* Porto Santo ist keine Region Madeiras, sondern die zweite Insel. Die
   Kachel traegt deshalb eine eigene Kante in Atlantik-Blau. */
.wom-region--island {
  border-color: var(--wom-accent);
  border-top-width: 3px;
}
.wom-region--island:hover { border-color: var(--wom-accent); }
.wom-region--island .wom-region__fact { color: var(--wom-accent); }

/* Die harte Zahl. Serif, gross, Lorbeerwald — das inhaltliche Versprechen
   "Zahlen statt Adjektive" wird hier optisch eingeloest. */
.wom-region__fact {
  font: 700 30px/1 var(--wom-serif);
  letter-spacing: -.02em;
  color: var(--wom-primary);
  font-variant-numeric: tabular-nums;
}

.wom-region__name {
  font: 600 19px/1.2 var(--wom-serif);
  letter-spacing: -.015em;
  color: var(--wom-ink);
}

.wom-region__meta {
  font: 400 14px/1.5 var(--wom-sans);
  color: var(--wom-muted);
}

/* N3: Fahrzeit ab Funchal. Bei Funchal selbst liefert wom_regions() einen
   leeren String und der Shortcode gibt das Element gar nicht erst aus —
   eine Fahrzeit zu sich selbst waere unsinnig. */
.wom-region__drive {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 8px;
  font: 600 10px/1 var(--wom-sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--wom-faint);
  font-variant-numeric: tabular-nums;
}
.wom-region__drive::before {
  content: '\2192';
  color: var(--wom-accent);
  letter-spacing: normal;
}

/* Das Bild sitzt als randloses Band oben in der Kachel. Die negativen Margins
   heben das Padding der Kachel auf — deshalb stehen sie am __media-Element und
   nicht am img: das img fuellt nur noch seinen Rahmen (Regel weiter oben,
   width/height 100% plus object-fit).

   Fehlt das Beitragsbild, gibt der Shortcode __media gar nicht erst aus. Dann
   greift keine dieser Regeln, und die Kachel ist wieder die reine Textkachel,
   die sie vor der Bebilderung war. Kein Platzhalter, kein leerer Kasten
   (Spec 10, Fehlerverhalten). */
.wom-region__media {
  display: block;
  height: 150px;
  margin: -20px -20px 0;
  width: calc(100% + 40px);
  overflow: hidden;
  /* Fuellfarbe fuer die Zeitspanne zwischen Layout und geladenem Bild. Ohne
     sie blitzt das Weiss der Kachel durch und die Kachel springt optisch. */
  background: var(--wom-wash);
}

/* Der Textteil traegt jetzt den Abstand, den vorher die Kachel selbst trug.
   flex:1 haelt die Kacheln im Raster gleich hoch und laesst
   .wom-region__drive weiterhin per margin-top:auto nach unten rutschen. */
.wom-region__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

@media (min-width: 600px) {
  .wom-regions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (min-width: 1025px) {
  .wom-regions { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .wom-region  { padding: 24px; }
  .wom-region__fact { font-size: 34px; }
  .wom-region__name { font-size: 21px; }
  .wom-region__media { height: 170px; margin: -24px -24px 0; width: calc(100% + 48px); }
}

/* =========================================================== Sektionskopf */
/* Titel links, Meta darunter (mobil) bzw. rechts (Desktop), ueber einer
   2px-Linie in Anthrazit. */
.wom-sechead {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--wom-ink);
}

.wom-sechead__title {
  margin: 0;
  font: 700 26px/1.08 var(--wom-serif);
  letter-spacing: -.025em;
  color: var(--wom-ink);
  text-wrap: balance;
}

.wom-sechead__meta {
  font: 400 15px/1.5 var(--wom-sans);
  color: var(--wom-muted);
}

/* Der Kopf ueber dem Startseiten-Index traegt die Linie in Lorbeerwald statt
   Anthrazit — er ist der Einstieg, nicht eine Sektion unter vielen. */
.wom-sechead--index { border-bottom-color: var(--wom-primary); }
.wom-sechead--index .wom-sechead__title { color: var(--wom-primary); }

@media (min-width: 768px) {
  .wom-sechead {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 20px;
  }
  .wom-sechead__title { font-size: 34px; }
  .wom-sechead__meta  { text-align: end; flex: 0 1 auto; }
}
@media (min-width: 1025px) {
  .wom-sechead__title { font-size: 42px; }
}

/* ================================================== Bevor du buchst (N2) */
/* Drei nummerierte Punkte auf der Startseite. Die Ziele sind Spokes, die es
   zum Renderzeitpunkt noch nicht geben muss — dann rendert der Shortcode den
   Text ohne Link (wom_has_post(), N4). Beide Zustaende muessen tragen. */
.wom-before {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 2px solid var(--wom-ink);
}

.wom-before__item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 6px;
  align-items: start;
  padding: 20px 0;
  border-bottom: 1px solid var(--wom-hairline);
}

.wom-before__num {
  font: 700 22px/1 var(--wom-serif);
  color: var(--wom-signal);
  font-variant-numeric: tabular-nums;
}

.wom-before__title {
  grid-column: 2;
  font: 600 18px/1.25 var(--wom-serif);
  letter-spacing: -.015em;
  color: var(--wom-ink);
  text-wrap: balance;
}

.wom-before__text {
  grid-column: 2;
  font: 400 15px/1.6 var(--wom-sans);
  color: var(--wom-muted);
}

/* Der verlinkte Zustand. Fehlt das Ziel, steht derselbe Text ohne <a> —
   deshalb traegt der Link die Auszeichnung, nicht der Absatz. */
.wom-before__link {
  grid-column: 2;
  justify-self: start;
  font: 600 11px/1 var(--wom-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wom-accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  transition: color var(--wom-speed) ease;
}
.wom-before__link:hover { color: var(--wom-primary); }

@media (min-width: 768px) {
  .wom-before__item { grid-template-columns: 52px minmax(0, 1fr); column-gap: 22px; padding: 26px 0; }
  .wom-before__num  { font-size: 28px; }
  .wom-before__title { font-size: 21px; }
}
@media (min-width: 1025px) {
  .wom-before { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; border-bottom: 1px solid var(--wom-hairline); }
  .wom-before__item { border-bottom: 0; padding: 26px 0 30px; }
}

/* ========================================================= Grid und Karten */
.wom-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

/* Ausdrueckliche Spaltenzahl. Ohne Modifier greift die Standardstaffel
   1 / 2 / 3 aus den Media-Queries weiter unten. */
.wom-grid--cols-2,
.wom-grid--cols-3,
.wom-grid--cols-4 { grid-template-columns: 1fr; }

.wom-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  text-decoration: none;
}

/* Kind-Klassen der Karte. Nicht im Vertrag gefuehrt, hier festgeschrieben. */
.wom-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--wom-wash);
}
.wom-card__media img { transition: transform .5s ease; }
.wom-card:hover .wom-card__media img { transform: scale(1.04); }

.wom-card__kicker {
  font: 600 10px/1 var(--wom-sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--wom-accent);
}

.wom-card__title {
  font: 600 20px/1.22 var(--wom-serif);
  letter-spacing: -.015em;
  color: var(--wom-ink);
  text-wrap: balance;
}

.wom-card__standfirst {
  font: 400 15px/1.55 var(--wom-sans);
  color: var(--wom-muted);
}

@media (min-width: 600px) {
  .wom-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 24px; }
  .wom-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wom-grid--cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wom-grid--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1025px) {
  .wom-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 28px; }
  .wom-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wom-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wom-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wom-card__title { font-size: 22px; }
}

/* ============================================================ Archiv-Kopf */
/* Kontextzeile, Titel und Beschreibung ueber dem Archivraster. Die drei
   Klassen kommen von [wom_archive_eyebrow], [wom_archive_title] und
   [wom_archive_desc]. */
.wom-archive__eyebrow {
  display: block;
  font: 600 10px/1 var(--wom-sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--wom-accent);
}

.wom-archive__title {
  margin: 10px 0 0;
  font: 700 30px/1.06 var(--wom-serif);
  letter-spacing: -.03em;
  color: var(--wom-ink);
  text-wrap: balance;
}

.wom-archive__desc {
  margin: 12px 0 0;
  max-width: 62ch;
  font: 400 16px/1.6 var(--wom-sans);
  color: var(--wom-muted);
}

@media (min-width: 768px) {
  .wom-archive__title { font-size: 42px; }
  .wom-archive__desc  { font-size: 17px; }
}
@media (min-width: 1025px) {
  .wom-archive__title { font-size: 56px; }
}

/* ============================================================ Lead-Beitrag */
/* N9: Auf Seite 1 steht der neueste Beitrag als Lead ueber dem Raster,
   auf Folgeseiten entfaellt er ersatzlos. Deshalb muss der Lead fuer sich
   allein stehen koennen und darf nichts vom Raster erben. */
.wom-lead {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: var(--wom-rhythm);
  padding-bottom: 28px;
  border-bottom: 2px solid var(--wom-ink);
  text-decoration: none;
}

.wom-lead__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--wom-wash);
}
.wom-lead__media img { transition: transform .5s ease; }
.wom-lead:hover .wom-lead__media img { transform: scale(1.03); }

.wom-lead__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wom-lead__kicker {
  font: 600 10px/1 var(--wom-sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--wom-signal);
}

.wom-lead__title {
  font: 700 26px/1.1 var(--wom-serif);
  letter-spacing: -.025em;
  color: var(--wom-ink);
  text-wrap: balance;
}

.wom-lead__standfirst {
  font: 400 16px/1.6 var(--wom-sans);
  color: var(--wom-muted);
  max-width: 60ch;
}

@media (min-width: 768px) {
  .wom-lead__title { font-size: 34px; }
}
@media (min-width: 1025px) {
  .wom-lead {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: 40px;
    align-items: center;
    padding-bottom: 36px;
  }
  .wom-lead__title { font-size: 40px; }
}

/* ================================================================= Pager */
/* Nimmt die Ausgabe von paginate_links() entgegen: <a class="page-numbers">,
   <span class="page-numbers current">, <span class="dots">. Dazu die eigenen
   Klassen aus [wom_archive_pager] (N19). */
.wom-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: var(--wom-rhythm);
  padding-top: 24px;
  border-top: 1px solid var(--wom-hairline);
}

.wom-pager a,
.wom-pager span,
.wom-pager__link,
.wom-pager__state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 11px 13px;
  font: 600 13px/1 var(--wom-sans);
  color: var(--wom-ink);
  text-decoration: none;
  border: 1px solid var(--wom-hairline);
  background: var(--wom-paper);
  transition: border-color var(--wom-speed) ease, color var(--wom-speed) ease;
}
.wom-pager a:hover,
.wom-pager__link:hover {
  border-color: var(--wom-accent);
  color: var(--wom-accent);
}

/* Zurueck und Weiter tragen ihren Pfeil aus dem Stylesheet, nicht aus dem
   Markup — so bleibt der Linktext uebersetzbar. */
.wom-pager__link--prev::before {
  content: '\2190';
  margin-inline-end: 8px;
  color: var(--wom-faint);
}
.wom-pager__link--next::after {
  content: '\2192';
  margin-inline-start: 8px;
  color: var(--wom-faint);
}
.wom-pager__link--prev:hover::before,
.wom-pager__link--next:hover::after { color: var(--wom-accent); }

/* "Seite 2 von 7" — kein Link, deshalb ohne Rahmen und ohne Hover. */
.wom-pager__state {
  border-color: transparent;
  background: transparent;
  color: var(--wom-muted);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.wom-pager .current,
.wom-pager .is-current,
.wom-pager__link.is-current {
  background: var(--wom-primary);
  border-color: var(--wom-primary);
  color: var(--wom-surface);
}
.wom-pager .dots { border-color: transparent; background: transparent; color: var(--wom-faint); }

/* ============================================================ Breadcrumb */
.wom-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font: 600 10px/1.4 var(--wom-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wom-faint);
}
.wom-breadcrumb a,
.wom-breadcrumb__link {
  color: var(--wom-faint);
  text-decoration: none;
  transition: color var(--wom-speed) ease;
}
.wom-breadcrumb a:hover,
.wom-breadcrumb__link:hover { color: var(--wom-accent); }

/* Der Trenner steht als eigenes Element im Markup; die ::before-Regel bleibt
   als Rueckfall fuer Ausgaben ohne eigenen Separator. */
.wom-breadcrumb__sep {
  color: var(--wom-hairline);
  user-select: none;
}
.wom-breadcrumb a + a:not(.wom-breadcrumb__link)::before,
.wom-breadcrumb a + span:not(.wom-breadcrumb__sep):not(.wom-breadcrumb__current)::before {
  content: '/';
  margin-inline-end: 10px;
  color: var(--wom-hairline);
}

.wom-breadcrumb__current,
.wom-breadcrumb [aria-current],
.wom-breadcrumb .is-current { color: var(--wom-ink); }

@media (min-width: 768px) { .wom-breadcrumb { font-size: 11px; } }

/* ====================================================== Einzelbeitrag-Kopf */
.wom-posteyebrow {
  display: block;
  font: 600 10px/1 var(--wom-sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--wom-accent);
}

.wom-posttitle {
  margin: 12px 0 0;
  font: 700 30px/1.06 var(--wom-serif);
  letter-spacing: -.03em;
  color: var(--wom-ink);
  text-wrap: balance;
}

/* Datum, Lesezeit (N11), Region. Punkte als Trenner aus dem Stylesheet. */
.wom-postmeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--wom-hairline);
  font: 400 13px/1.4 var(--wom-sans);
  color: var(--wom-muted);
}

.wom-postmeta__item {
  display: inline-flex;
  align-items: center;
  font-variant-numeric: tabular-nums;
}
.wom-postmeta__item + .wom-postmeta__item::before {
  content: '\00B7';
  margin-inline-end: 14px;
  color: var(--wom-hairline);
}

.wom-posthero {
  display: block;
  overflow: hidden;
  margin: 24px 0 0;
  aspect-ratio: 16 / 9;
  background: var(--wom-wash);
}
.wom-posthero figcaption {
  margin-top: 8px;
  font: 400 12px/1.5 var(--wom-sans);
  color: var(--wom-faint);
}

@media (min-width: 768px) {
  .wom-posttitle { font-size: 42px; }
  .wom-postmeta  { font-size: 14px; }
}
@media (min-width: 1025px) {
  .wom-posttitle { font-size: 52px; max-width: 20ch; }
}

/* ============================================================= Hub-Links */
/* N7: Wird nicht von einem Shortcode erzeugt, sondern von wom-links.php per
   the_content Prioritaet 15 in den Artikel injiziert. Muss trotzdem
   vollstaendig gestaltet sein. Optisch ein eingelassener Kasten mit gruener
   Kopflinie. */
.wom-hublinks {
  margin: 36px 0;
  padding: 22px;
  background: var(--wom-paper);
  border: 1px solid var(--wom-hairline);
  border-top: 3px solid var(--wom-primary);
}
.wom-hublinks h2,
.wom-hublinks h3,
.wom-hublinks strong {
  display: block;
  margin: 0 0 14px;
  font: 600 10px/1 var(--wom-sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--wom-primary);
}
.wom-hublinks ul,
.wom-hublinks ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}
.wom-hublinks li {
  margin: 0;
  border-bottom: 1px solid var(--wom-hairline);
}
.wom-hublinks li:last-child { border-bottom: 0; }
.wom-hublinks a {
  display: block;
  padding: 11px 0;
  font: 500 16px/1.35 var(--wom-sans);
  color: var(--wom-ink);
  text-decoration: none;
  transition: color var(--wom-speed) ease;
}
.wom-hublinks a:hover { color: var(--wom-accent); }
.wom-hublinks a[aria-current],
.wom-hublinks .is-current > a { color: var(--wom-faint); cursor: default; }

@media (min-width: 768px) { .wom-hublinks { padding: 26px 28px; } }

/* =============================================================== Related */
/* the_content Prio 20. Drei Karten unter dem Artikel. */
.wom-related {
  margin: var(--wom-rhythm) 0 0;
  padding-top: 26px;
  border-top: 2px solid var(--wom-ink);
}
.wom-related h2,
.wom-related h3,
.wom-related__title {
  margin: 0 0 20px;
  font: 700 22px/1.1 var(--wom-serif);
  letter-spacing: -.02em;
  color: var(--wom-ink);
}
.wom-related ul,
.wom-related ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
.wom-related li { margin: 0; min-width: 0; }

/* :not(.wom-card) ist der Kern dieser Regel, nicht Beiwerk.
   Der Weiterlesen-Block rendert seine Eintraege als Karten — und eine Karte
   IST ein <a>. Ohne den Ausschluss traf ".wom-related a" (0-1-1) auf
   ".wom-card" (0-1-0) und gewann: die Karte stand auf block statt flex, ihre
   Kinder verloren dadurch die Blockifizierung durch den Flex-Container, und
   Kicker, Titel und Standfirst liefen als Fliesstext ineinander —
   "WANDERN & LEVADASDas HochlandPico do Arieiro ...". Gemeint sind hier die
   schlichten Textlinks des Blocks, nicht die Karten. */
.wom-related a:not(.wom-card) {
  display: block;
  font: 600 17px/1.28 var(--wom-serif);
  letter-spacing: -.01em;
  color: var(--wom-ink);
  text-decoration: none;
  transition: color var(--wom-speed) ease;
}
.wom-related a:not(.wom-card):hover { color: var(--wom-accent); }
/* Enthaelt der Block ganze Karten (wom_archive_card), gilt deren Typografie. */
.wom-related .wom-card__title { font-size: inherit; }

@media (min-width: 600px) {
  .wom-related ul, .wom-related ol { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
  .wom-related h2, .wom-related h3, .wom-related__title { font-size: 26px; }
}

/* =================================================================== TOC */
/* Inhaltsverzeichnis. Mobil ein aufklappbarer Block ueber dem Text,
   ab Desktop eine mitlaufende Spalte. Die Anker-IDs vergibt der
   the_content-Filter mit Prioritaet 9 (N5). */
.wom-toc {
  margin: 0 0 28px;
  padding-top: 16px;
  border-top: 3px solid var(--wom-signal);
}
.wom-toc > strong,
.wom-toc > h2,
.wom-toc > h3,
.wom-toc > summary,
.wom-toc__title {
  display: block;
  margin: 0 0 12px;
  font: 600 10px/1 var(--wom-sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--wom-ink);
  cursor: pointer;
  list-style: none;
}
.wom-toc > summary::-webkit-details-marker { display: none; }
.wom-toc ol,
.wom-toc ul,
.wom-toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.wom-toc li,
.wom-toc__item { margin: 0; }

/* h3 rueckt ein und wird kleiner — die Hierarchie muss ohne Nummern lesbar sein. */
.wom-toc__item--sub {
  padding-inline-start: 16px;
  border-inline-start: 1px solid var(--wom-hairline);
}
.wom-toc__item--sub > a { font-size: 14px; color: var(--wom-muted); }

.wom-toc a {
  font: 500 15px/1.35 var(--wom-sans);
  color: var(--wom-ink);
  text-decoration: none;
  transition: color var(--wom-speed) ease;
}
.wom-toc a:hover { color: var(--wom-accent); }
.wom-toc a.is-current,
.wom-toc .is-current > a { color: var(--wom-signal); }

@media (min-width: 1025px) {
  .wom-toc { position: sticky; top: 96px; margin: 0; }
}

/* ============================================================== Wortmarke */
.wom-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font: 700 20px/1 var(--wom-serif);
  letter-spacing: -.025em;
  color: var(--wom-ink);
  text-decoration: none;
  white-space: nowrap;
}
.wom-wordmark a { color: inherit; text-decoration: none; }

/* Der Trenner in der Wortmarke ist der zweite sparsame Rot-Einsatz. */
.wom-wordmark span,
.wom-wordmark em { color: var(--wom-signal); font-style: normal; }

.wom-wordmark__mark { color: var(--wom-signal); }
.wom-wordmark__name { color: inherit; }
/* Der Zusatz steht auf Telefonen NICHT.
   Wortmarke und Zusatz liegen zusammen in einem inline-flex mit
   white-space: nowrap. Auf 390 px Breite ergab das eine 532 px breite Zeile,
   die nicht umbrechen durfte und das Dokument auf 564 px Scrollbreite aufzog —
   also 174 px horizontales Scrollen, und zwar auf jeder Seite, weil die
   Wortmarke im Kopf und im Fuss steht. Sichtbar war davon nur der rechts
   abgeschnittene Zusatz; der eigentliche Schaden lag darunter.

   Umbrechen statt ausblenden waere die schlechtere Loesung: der Kopf wuerde
   zweizeilig und der Burger rutschte nach unten. Der Zusatz ist auf kleinen
   Geraeten ohnehin redundant — er steht im <title> und im Footer noch einmal. */
.wom-wordmark__tag {
  display: none;
  font: 400 10px/1 var(--wom-sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--wom-faint);
  white-space: nowrap;
}

@media (min-width: 768px) {
  .wom-wordmark { font-size: 24px; }
  .wom-wordmark__tag { display: inline; font-size: 11px; }
}

/* ========================================================= Sprachumschalter */
.wom-langs {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--wom-hairline);
}
.wom-langs a,
.wom-langs__link {
  display: inline-block;
  padding: 7px 11px;
  font: 600 11px/1 var(--wom-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wom-muted);
  text-decoration: none;
  transition: background var(--wom-speed) ease, color var(--wom-speed) ease;
}
.wom-langs a + a,
.wom-langs__link + .wom-langs__link { border-inline-start: 1px solid var(--wom-hairline); }
.wom-langs a:hover,
.wom-langs__link:hover { color: var(--wom-ink); background: var(--wom-wash); }

.wom-langs__link--active,
.wom-langs a[aria-current],
.wom-langs a.is-active,
.wom-langs__link.is-active {
  background: var(--wom-primary);
  color: var(--wom-surface);
}

/* ======================================================== Footer-Rechtliches */
/* [wom_footer_links]. Fehlt eine Rechtsseite noch, rendert der Shortcode den
   Text ohne Link (N4) — ein Impressum-Link, der still auf die Startseite
   fuehrt, waere rechtlich schlechter als ein fehlender. */
.wom-footlinks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  font: 400 13px/1.5 var(--wom-sans);
  color: var(--wom-faint);
}
.wom-footlinks li { margin: 0; }

.wom-footlinks__link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--wom-speed) ease, border-color var(--wom-speed) ease;
}
.wom-footlinks__link:hover {
  color: var(--wom-surface);
  border-bottom-color: currentColor;
}

/* ========================================================= Newsletter-CTA */
/* N10: verlinkt auf home_url('/') . '#newsletter' in der aktuellen Sprache. */
.wom-newsletter-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  font: 600 11px/1 var(--wom-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wom-surface);
  text-decoration: none;
  background: var(--wom-primary);
  border: 0;
  transition: background var(--wom-speed) ease;
}
.wom-newsletter-cta:hover { background: var(--wom-signal); }
.wom-newsletter-cta::after {
  content: '\2192';
  font-size: 14px;
  line-height: 1;
  transition: transform var(--wom-speed) ease;
}
.wom-newsletter-cta:hover::after { transform: translateX(3px); }

@media (min-width: 768px) {
  .wom-newsletter-cta { padding: 15px 26px; font-size: 12px; }
}

/* ======================================================== Affiliate-Links */
/* Sichtbar als Handlung markiert, aber nie schreiend. Kein Button-Look,
   sondern eine gerahmte Zeile in Atlantik-Blau. */
.wom-aff {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  font: 600 12px/1 var(--wom-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wom-accent);
  text-decoration: none;
  border: 1px solid var(--wom-accent);
  background: transparent;
  transition: background var(--wom-speed) ease, color var(--wom-speed) ease;
}
.wom-aff:hover {
  background: var(--wom-accent);
  color: var(--wom-surface);
}
.wom-aff::after {
  content: '\2192';
  font-size: 14px;
  line-height: 1;
  transition: transform var(--wom-speed) ease;
}
.wom-aff:hover::after { transform: translateX(3px); }
/* Inline im Fliesstext: keine Kastenoptik, nur eine Unterstreichung. */
p .wom-aff {
  display: inline;
  padding: 0;
  border: 0;
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
p .wom-aff:hover { background: transparent; color: var(--wom-primary); }
p .wom-aff::after { content: none; }

/* ========================================================= Event-Ansichten */
/* N40: Ersatz der TEC-Views aus wom-events-ui.php. Drei Ansichten unter
   ?ansicht=liste|monat|woche. Die Gestaltung muss mit fuenf Terminen genauso
   tragen wie mit fuenfzig — deshalb keine leeren Rasterflaechen, sondern
   Tagesbloecke, und ein benannter, gestalteter Leerzustand. */
.wom-ev {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.wom-ev__masthead {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--wom-ink);
  font: 400 15px/1.5 var(--wom-sans);
  color: var(--wom-muted);
}
.wom-ev__masthead strong,
.wom-ev__masthead h1,
.wom-ev__masthead h2 {
  margin: 0;
  font: 700 26px/1.08 var(--wom-serif);
  letter-spacing: -.025em;
  color: var(--wom-ink);
}
.wom-ev__masthead a { color: var(--wom-accent); text-decoration: none; }
.wom-ev__masthead a:hover { text-decoration: underline; text-underline-offset: 3px; }

.wom-ev__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  font: 400 13px/1.4 var(--wom-sans);
  color: var(--wom-muted);
}
.wom-ev__filters a {
  color: var(--wom-muted);
  text-decoration: none;
  padding: 6px 10px;
  border: 1px solid var(--wom-hairline);
  background: var(--wom-paper);
  transition: border-color var(--wom-speed) ease, color var(--wom-speed) ease;
}
.wom-ev__filters a:hover { border-color: var(--wom-accent); color: var(--wom-accent); }
.wom-ev__filters a[aria-current],
.wom-ev__filters a.is-active {
  border-color: var(--wom-primary);
  color: var(--wom-primary);
  font-weight: 600;
}

/* Liste / Monat / Woche. Gleicher Bautyp wie der Jetzt/Immer-Umschalter,
   aber in Anthrazit statt Rot: hier wird navigiert, nicht signalisiert. */
.wom-ev__switch {
  display: inline-flex;
  border: 1px solid var(--wom-ink);
}
.wom-ev__switch-link {
  display: inline-block;
  padding: 10px 16px;
  font: 600 11px/1 var(--wom-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wom-ink);
  text-decoration: none;
  transition: background var(--wom-speed) ease, color var(--wom-speed) ease;
}
.wom-ev__switch-link + .wom-ev__switch-link { border-inline-start: 1px solid var(--wom-ink); }
.wom-ev__switch-link:hover { background: var(--wom-wash); }
.wom-ev__switch-link--active,
.wom-ev__switch-link.is-active {
  background: var(--wom-ink);
  color: var(--wom-surface);
}

.wom-ev__day {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--wom-hairline);
}
.wom-ev__day:first-of-type { border-top: 0; }

.wom-ev__day-head {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 12px 0 8px;
  background: var(--wom-surface);
  font: 600 10px/1 var(--wom-sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--wom-signal);
  font-variant-numeric: tabular-nums;
}

.wom-ev__row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 4px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid var(--wom-hairline);
  text-decoration: none;
  transition: background var(--wom-speed) ease;
}
.wom-ev__row:hover { background: var(--wom-wash); }

.wom-ev__time {
  font: 600 13px/1.4 var(--wom-sans);
  color: var(--wom-ink);
  font-variant-numeric: tabular-nums;
}

.wom-ev__title {
  grid-column: 2;
  font: 600 17px/1.25 var(--wom-serif);
  letter-spacing: -.015em;
  color: var(--wom-ink);
  text-wrap: balance;
}

.wom-ev__venue {
  grid-column: 2;
  font: 400 13px/1.5 var(--wom-sans);
  color: var(--wom-muted);
}

.wom-ev__thumb {
  display: none;
  overflow: hidden;
  background: var(--wom-wash);
}

/* Monatsgitter. Bewusst ohne Zellhoehe auf dem Telefon — dort laeuft die
   Monatsansicht als Tagesliste, ein 7x6-Raster waere unlesbar. */
.wom-ev__cal {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--wom-hairline);
  border: 1px solid var(--wom-hairline);
}

.wom-ev__cell {
  min-height: 64px;
  padding: 6px 6px 8px;
  background: var(--wom-paper);
  font: 400 12px/1.4 var(--wom-sans);
  color: var(--wom-muted);
}
.wom-ev__cell > time,
.wom-ev__cell > .wom-ev__day-head {
  position: static;
  display: block;
  padding: 0 0 4px;
  background: transparent;
  font: 600 11px/1 var(--wom-sans);
  letter-spacing: normal;
  color: var(--wom-faint);
  font-variant-numeric: tabular-nums;
}
.wom-ev__cell a {
  display: block;
  margin-top: 3px;
  color: var(--wom-ink);
  text-decoration: none;
  border-inline-start: 2px solid var(--wom-signal);
  padding-inline-start: 6px;
}
.wom-ev__cell a:hover { color: var(--wom-accent); }
.wom-ev__cell.is-current { background: var(--wom-wash); }
.wom-ev__cell.is-active  { outline: 2px solid var(--wom-primary); outline-offset: -2px; }

/* Der leere Zustand ist gestaltet und benannt, nie ein leerer Block. */
.wom-ev__empty {
  padding: 28px 22px;
  background: var(--wom-paper);
  border: 1px solid var(--wom-hairline);
  border-top: 3px solid var(--wom-accent);
  font: 400 16px/1.6 var(--wom-sans);
  color: var(--wom-muted);
}
.wom-ev__empty a {
  color: var(--wom-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.wom-ev__empty a:hover { color: var(--wom-primary); }

.wom-ev__pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--wom-hairline);
}
.wom-ev__pager a {
  font: 600 11px/1 var(--wom-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wom-accent);
  text-decoration: none;
  padding: 11px 0;
  transition: color var(--wom-speed) ease;
}
.wom-ev__pager a:hover { color: var(--wom-primary); }

/* Ansichtsspezifisches. */
.wom-ev--list .wom-ev__cal { display: none; }
.wom-ev--month .wom-ev__day-head { color: var(--wom-ink); }
.wom-ev--week .wom-ev__cal { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.wom-ev--week .wom-ev__cell { min-height: 120px; }

@media (min-width: 600px) {
  .wom-ev__row {
    grid-template-columns: 84px minmax(0, 1fr) 96px;
    column-gap: 18px;
  }
  .wom-ev__thumb { display: block; grid-column: 3; grid-row: 1 / span 2; height: 64px; }
}
@media (min-width: 768px) {
  .wom-ev__masthead {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
  }
  .wom-ev__masthead strong,
  .wom-ev__masthead h1,
  .wom-ev__masthead h2 { font-size: 34px; }
  .wom-ev__cell { min-height: 96px; }
}
@media (min-width: 1025px) {
  .wom-ev { gap: 32px; }
  .wom-ev__row { grid-template-columns: 104px minmax(0, 1fr) 120px; padding: 18px 0; }
  .wom-ev__title { font-size: 19px; }
  .wom-ev__thumb { height: 74px; }
  .wom-ev__cell { min-height: 128px; padding: 8px; }
}

/* ================================================== Elementor-Skelettteile */
/* Klassen, die 02-templates.php auf Elementor-Container setzt. Sie tragen
   ausschliesslich Layout und Rahmen — der Inhalt kommt aus Shortcodes. */

/* Header */
#wom-head,
.wom-chrome__bar {
  background: var(--wom-surface);
  border-bottom: 2px solid var(--wom-ink);
}
.wom-chrome__nav nav.elementor-nav-menu--main ul.elementor-nav-menu { gap: 18px; }
.wom-chrome__nav nav.elementor-nav-menu--main a.elementor-item {
  padding: 8px 0;
  font: 600 11px/1 var(--wom-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wom-ink);
}
.wom-chrome__nav nav.elementor-nav-menu--main a.elementor-item:hover,
.wom-chrome__nav nav.elementor-nav-menu--main a.elementor-item-active { color: var(--wom-primary); }
.wom-chrome__nav .elementor-nav-menu--dropdown,
.wom-chrome__nav ul.sub-menu {
  background: var(--wom-surface);
  border: 1px solid var(--wom-hairline);
  border-radius: 0;
}
.wom-chrome__cta .elementor-button {
  padding: 12px 18px;
  border: 0;
  border-radius: 0;
  background: var(--wom-primary);
  color: var(--wom-surface);
  font: 600 11px/1 var(--wom-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: background var(--wom-speed) ease;
}
.wom-chrome__cta .elementor-button:hover { background: var(--wom-signal); }

@media (min-width: 1025px) {
  .wom-chrome__nav nav.elementor-nav-menu--main ul.elementor-nav-menu { gap: 28px; }
  .wom-chrome__nav nav.elementor-nav-menu--main a.elementor-item { font-size: 12px; }
}

/* Footer */
#wom-foot,
.wom-chrome__foot {
  background: var(--wom-ink);
  border-top: 0;
}
.wom-chrome__foot .wom-wordmark,
.wom-chrome__foot .wom-wordmark a { color: var(--wom-surface); }
.wom-chrome__foot .wom-wordmark__tag { color: rgba(247, 245, 241, .55); }
.wom-chrome__foot .wom-footlinks,
.wom-chrome__foot .wom-footer-links a,
.wom-chrome__foot a {
  color: rgba(247, 245, 241, .74);
  text-decoration: none;
  transition: color var(--wom-speed) ease;
}
.wom-chrome__foot a:hover { color: var(--wom-surface); }
.wom-chrome__foot .wom-langs { border-color: rgba(247, 245, 241, .28); }
.wom-chrome__foot .wom-langs__link + .wom-langs__link { border-inline-start-color: rgba(247, 245, 241, .28); }
.wom-chrome__copy p {
  margin: 0;
  font: 400 12px/1.6 var(--wom-sans);
  color: rgba(247, 245, 241, .55);
}

/* Archiv-Kopf: gruenes Band, gebrochenes Weiss darauf. */
#wom-archive,
.wom-archive__head { background: var(--wom-primary); }
.wom-archive__head .elementor-heading-title,
.wom-archive__head h1,
.wom-archive__head h2,
.wom-archive__head .wom-archive__title { color: var(--wom-surface) !important; }
.wom-archive__head p,
.wom-archive__head .wom-archive__desc { color: rgba(247, 245, 241, .82); }
.wom-archive__head .wom-archive__eyebrow { color: rgba(247, 245, 241, .68); }
.wom-archive__head .wom-breadcrumb,
.wom-archive__head .wom-breadcrumb a,
.wom-archive__head .wom-breadcrumb__link { color: rgba(247, 245, 241, .68); }
.wom-archive__head .wom-breadcrumb a:hover,
.wom-archive__head .wom-breadcrumb__link:hover { color: var(--wom-surface); }
.wom-archive__head .wom-breadcrumb__current { color: var(--wom-surface); }

/* Single: einspaltig mobil, zweispaltig ab Desktop. */
.wom-single__wrap { align-items: flex-start; }
.wom-single__main { min-width: 0; }
.wom-single__side { min-width: 0; }

/* Artikeltext */
.wom-prose {
  font: 400 17px/1.7 var(--wom-sans);
  color: var(--wom-text);
}
.wom-prose p { margin: 0 0 22px; text-wrap: pretty; }
.wom-prose h2 {
  margin: 38px 0 14px;
  font: 700 26px/1.1 var(--wom-serif);
  letter-spacing: -.025em;
  color: var(--wom-ink);
  scroll-margin-top: 96px;
}
.wom-prose h3 {
  margin: 30px 0 12px;
  font: 600 21px/1.2 var(--wom-serif);
  letter-spacing: -.02em;
  color: var(--wom-ink);
  scroll-margin-top: 96px;
}
.wom-prose a {
  color: var(--wom-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.wom-prose a:hover { color: var(--wom-primary); }
.wom-prose img { max-width: 100%; height: auto; }
.wom-prose ul,
.wom-prose ol { margin: 0 0 22px; padding-inline-start: 20px; }
.wom-prose li { margin-bottom: 8px; }
.wom-prose blockquote {
  margin: 28px 0;
  padding: 20px 22px;
  background: var(--wom-primary);
  border: 0;
  font: 400 17px/1.6 var(--wom-serif);
  color: rgba(247, 245, 241, .92);
}
.wom-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 24px;
  display: block;
  overflow-x: auto;
}
.wom-prose th,
.wom-prose td {
  text-align: start;
  padding: 12px 12px 12px 0;
  border-bottom: 1px solid var(--wom-hairline);
  font: 400 15px/1.45 var(--wom-sans);
}
.wom-prose th {
  font: 600 10px/1 var(--wom-sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--wom-faint);
}

@media (min-width: 768px) {
  .wom-prose h2 { font-size: 32px; }
  .wom-prose h3 { font-size: 24px; }
}
@media (min-width: 1025px) {
  .wom-prose { max-width: 68ch; }
  .wom-prose h2 { font-size: 36px; }
}

/* ============================================== Bewegung respektieren ---- */
@media (prefers-reduced-motion: reduce) {
  .wom-index__row,
  .wom-region,
  .wom-card__media img,
  .wom-lead__media img,
  .wom-toggle__link,
  .wom-ev__row,
  .wom-newsletter-cta,
  .wom-newsletter-cta::after,
  .wom-aff,
  .wom-aff::after { transition: none; }
  .wom-region:hover { transform: none; }
  .wom-card:hover .wom-card__media img { transform: none; }
  .wom-lead:hover .wom-lead__media img { transform: none; }
  .wom-newsletter-cta:hover::after { transform: none; }
  .wom-aff:hover::after { transform: none; }
}

/* =========================================================================
   Startseiten-Skelett — die Klassen, die scripts/03-home.php auf die
   Elementor-Container und -Widgets setzt.

   Nachgetragen: Beim ersten Bau waren diese siebzehn Klassen ungestaltet,
   weil der Abdeckungsabgleich nur die Shortcode-Tasks 9-12 und 16 kannte.
   Sichtbare Folge waren zwei blaue Rechtecke statt der Hero-Buttons.
   ====================================================================== */

.wom-home { background: var(--wom-surface); }

/* ------------------------------------------------------------- Hero -- */
/* --wom-hero-image setzt wom-design-loader.php zur Laufzeit aus der Option
   wom_bild_hero. Ist die Property nicht gesetzt — kein Bild importiert —,
   greift keine der Bildregeln unten und der Hero bleibt der Textblock, der er
   vorher war. Deshalb steht die Grundgestaltung hier und nicht in der Bildregel. */
.wom-hero {
  position: relative;
  padding-block: 3rem 2.5rem;
}

.wom-hero__h1 .elementor-heading-title {
  font-family: var(--wom-serif);
  color: var(--wom-primary);
  letter-spacing: -.015em;
  line-height: 1.04;
}

.wom-hero__sub .elementor-heading-title {
  font-family: var(--wom-serif);
  font-weight: 600;
  color: var(--wom-primary);
  line-height: 1.3;
  margin-block-start: .6rem;
  max-width: 34ch;
}

.wom-hero__lead {
  color: var(--wom-text);
  max-width: 62ch;
  margin-block-start: 1rem;
}

/* Das Bild als Band UNTER dem Text, nicht dahinter.
   Ein Foto hinter der Schrift zwingt zu einem Scrim, und ein Scrim ueber
   Anthrazit-Fels macht aus dem Vulkangestein eine graue Flaeche — genau die
   Bildwirkung, wegen der das Motiv ausgewaehlt wurde. Der Text bleibt also auf
   gebrochenem Weiss stehen und das Bild bekommt seinen eigenen Streifen
   darunter. aspect-ratio statt fester Hoehe: der Ausschnitt ist bereits 12:5
   beschnitten, das Band zeigt ihn ungestaucht und ohne zweiten Beschnitt.

   Der Schalter --wom-hero-band entscheidet, ob das Band ueberhaupt erscheint.
   Er steht hier auf none und wird von wom-design-loader.php auf block gesetzt,
   und zwar nur zusammen mit --wom-hero-image. Ohne Bild bleibt also kein leerer
   Kasten stehen. Ein @supports auf die Bild-Property waere dafuer untauglich:
   die Abfrage prueft, ob der Browser var() in background-image versteht, nicht
   ob die Variable einen Wert hat. */
.wom-hero::after {
  content: '';
  display: var(--wom-hero-band, none);
  margin-block-start: 2.25rem;
  aspect-ratio: 12 / 5;
  background-image: var(--wom-hero-image, none);
  background-size: cover;
  background-position: 50% 55%;
  background-color: var(--wom-wash);
}

@media (min-width: 768px) {
  .wom-hero { padding-block: 4.5rem 3.5rem; }
  .wom-hero__sub .elementor-heading-title { max-width: 44ch; }
  .wom-hero::after { margin-block-start: 3rem; }
}

/* ---------------------------------------------------------- Buttons -- */
/* Elementor rendert a.elementor-button; die Farben kommen bewusst von hier
   und nicht aus dem Kit, damit Primaer- und Ghost-Variante ein Paar bleiben. */
.wom-btn .elementor-button {
  font-family: var(--wom-sans);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .01em;
  border-radius: 2px;
  padding: .8rem 1.4rem;
  border: 1px solid transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.wom-btn--primary .elementor-button {
  background-color: var(--wom-primary);
  color: var(--wom-surface);
  border-color: var(--wom-primary);
}
.wom-btn--primary .elementor-button:hover,
.wom-btn--primary .elementor-button:focus-visible {
  background-color: var(--wom-accent);
  border-color: var(--wom-accent);
  color: #fff;
}

.wom-btn--ghost .elementor-button {
  background-color: transparent;
  color: var(--wom-primary);
  border-color: var(--wom-hairline);
}
.wom-btn--ghost .elementor-button:hover,
.wom-btn--ghost .elementor-button:focus-visible {
  border-color: var(--wom-primary);
  background-color: var(--wom-wash);
  color: var(--wom-primary);
}

/* Der Text liegt in einem eigenen span — ohne diese Zeile erbt er die
   Elementor-Voreinstellung und wird auf farbiger Flaeche unsichtbar. */
.wom-btn .elementor-button-text { color: inherit; }

/* ------------------------------------------------- Sektionen der Home -- */
.wom-indexsec { padding-block: 2.5rem; }
.wom-indexsec__head { margin-block-end: .75rem; }
.wom-indexsec__toggle { margin-block-end: 1.5rem; }
.wom-indexsec__list { margin-block-start: .5rem; }

.wom-regionsec { padding-block: 2.5rem; border-block-start: 1px solid var(--wom-hairline); }
.wom-beforesec { padding-block: 2.5rem; border-block-start: 1px solid var(--wom-hairline); }

.wom-about {
  padding-block: 2.5rem;
  border-block-start: 1px solid var(--wom-hairline);
}
.wom-about__h2 .elementor-heading-title {
  font-family: var(--wom-serif);
  color: var(--wom-primary);
  line-height: 1.15;
  max-width: 30ch;
}
.wom-about__body {
  color: var(--wom-text);
  max-width: 62ch;
  margin-block-start: .9rem;
}

@media (min-width: 768px) {
  .wom-indexsec,
  .wom-regionsec,
  .wom-beforesec,
  .wom-about { padding-block: 3.5rem; }
}

/* =========================================================================
   Farbkorrektur gegen das Elementor Global Kit

   Das Kit gibt jedem Link eine Farbe, und zwar ueber ".elementor-kit-5 a".
   Dieser Selektor hat die Spezifitaet 0-1-1. Jede Regel hier, die eine
   EINZELNE Klasse auf ein <a> anwendet, liegt bei 0-1-0 und verliert damit —
   unabhaengig von der Reihenfolge im Stylesheet.

   Sichtbar wurde das am aktiven Jetzt/Immer-Umschalter: Fischerboot-Rot als
   Flaeche, darauf Atlantik-Blau statt gebrochenem Weiss. Kontrastverhaeltnis
   1,13 zu 1 — Text und Flaeche waren praktisch nicht zu unterscheiden. Es ist
   derselbe Mechanismus, der zuvor die beiden Hero-Buttons blau auf blau
   gestellt hat.

   Deshalb hier einmal geschlossen, nach demselben Muster: die Klasse doppelt
   genannt. Das ergibt 0-2-0 und schlaegt das Kit deterministisch, ohne
   !important und ohne Annahme ueber die Ladereihenfolge. Die Farbwerte sind
   unveraendert aus den Regeln oben uebernommen — hier steht keine neue
   Gestaltung, nur dieselbe, die auch ankommt.

   Regeln mit zwei Klassen oder mit Klasse + Element (etwa .wom-prose a oder
   .wom-hublinks a, beide 0-1-1) stehen nicht in dieser Liste: sie liegen mit
   dem Kit gleichauf, und da site-tweaks.css nach dem Kit geladen wird,
   gewinnen sie bereits.
   ====================================================================== */

.wom-wordmark.wom-wordmark                          { color: var(--wom-ink); }
.wom-footlinks__link.wom-footlinks__link            { color: inherit; }

.wom-toggle__link.wom-toggle__link                  { color: var(--wom-ink); }
.wom-toggle__link--active.wom-toggle__link--active,
.wom-toggle__link.is-active                         { color: var(--wom-surface); }

.wom-langs__link.wom-langs__link                    { color: var(--wom-muted); }
.wom-langs__link--active.wom-langs__link--active    { color: var(--wom-surface); }

.wom-newsletter-cta.wom-newsletter-cta              { color: var(--wom-surface); }
.wom-before__link.wom-before__link                  { color: var(--wom-accent); }
.wom-aff.wom-aff                                    { color: var(--wom-accent); }

.wom-pager__link.wom-pager__link                    { color: var(--wom-ink); }
.wom-breadcrumb__link.wom-breadcrumb__link          { color: var(--wom-faint); }
.wom-breadcrumb__current.wom-breadcrumb__current    { color: var(--wom-ink); }

.wom-ev__switch-link.wom-ev__switch-link            { color: var(--wom-ink); }
.wom-ev__switch-link--active.wom-ev__switch-link--active { color: var(--wom-surface); }

/* -------------------------------------------------- Beitragsbild-Deckel --
   Hello Elementor deckelt in theme.css jedes Beitragsbild:
     .post .wp-post-image { max-height: 500px }   (991px: 400, 575px: 300)

   max-height schlaegt height:100%, unabhaengig von der Spezifitaet. Im
   16:9-Rahmen von .wom-posthero endete das Bild deshalb bei 500 px, waehrend
   die figure 675 px hoch war — sichtbar als 175 px hoher grauer Streifen unter
   jedem Artikelbild, in der Fuellfarbe --wom-wash, die genau dafuer da ist,
   das Layout vor dem Laden zu halten.

   Der Deckel wird hier nur fuer die eigenen Bildrahmen aufgehoben. Den
   Zuschnitt uebernimmt der Rahmen ueber aspect-ratio plus object-fit: cover,
   also die Stelle, an der er auch gemeint ist. Ausserhalb dieser Rahmen bleibt
   die Theme-Regel unangetastet.
   ---------------------------------------------------------------------- */
.wom-posthero .wp-post-image,
.wom-card__media .wp-post-image,
.wom-lead__media .wp-post-image,
.wom-index__thumb .wp-post-image,
.wom-region__media .wp-post-image {
  max-height: none;
  height: 100%;
}