/*
Theme Name: JFV Rheinebene
Theme URI: https://fp-webloesungen.de/
Author: FP Weblösungen
Author URI: https://fp-webloesungen.de/
Update URI: false
Description: FSE-Blocktheme für den JFV Rheinebene e. V., gebaut von FP Weblösungen.
Requires at least: 7.0
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jfv
Tags: full-site-editing, block-patterns, sports, one-column
*/

/* ------------
   Token-Brücke
   ------------ */

:root {
  --c-primary: var(--wp--preset--color--primary);
  --c-accent: var(--wp--preset--color--accent);
  --c-ink: var(--wp--preset--color--ink);
  --c-paper: var(--wp--preset--color--paper);
  --c-surface: var(--wp--preset--color--surface);
  --c-surface-strong: var(--wp--preset--color--surface-strong);
  --c-muted: var(--wp--preset--color--muted);
  --c-outline: var(--wp--preset--color--outline);
  --c-white: var(--wp--preset--color--white);
  --c-white-muted: var(--wp--preset--color--white-muted);

  --f-headline: var(--wp--preset--font-family--headline);
  --f-body: var(--wp--preset--font-family--body);

  --sp-edge: var(--wp--preset--spacing--edge);
  --sp-section: var(--wp--preset--spacing--section);

  --shadow-sport: 8px 8px 0 rgba(0, 0, 0, 0.1);
  --shadow-sport-red: 8px 8px 0 var(--c-primary);
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* Fallback-Höhe */
  --hdr-height: 72px;
}

html {
  scroll-padding-top: calc(var(--hdr-height) + 16px);
}

/* ------------------
   Automatik-Abstände
   ------------------ */

:where(.wp-site-blocks) > *,
:root :where(.is-layout-constrained):not(section) > * {
  margin-block-start: 0;
}

/* -----------------------
   Block-Style-Variationen
   ----------------------- */

/* Schräger Abschluss */
.is-style-power-slant {
  clip-path: polygon(0 0, 100% 0, 100% 95%, 0 100%);
}

/* Versetzter Schatten */
.is-style-sport-shadow,
.is-style-sport-shadow img,
.is-style-sport-shadow .wp-block-post-featured-image__overlay {
  box-shadow: var(--shadow-sport);
}

/* Trikot-Textur */
.is-style-dither {
  position: relative;
  isolation: isolate;
}

.is-style-dither::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.55) 1px, transparent 1px);
  background-size: 4px 4px;
  opacity: 0.12;
}

/* Eck-Winkel */
.is-style-corner-frame {
  position: relative;
}

.is-style-corner-frame img {
  position: relative;
  z-index: 1;
  box-shadow: var(--shadow-sport-red);
}

.is-style-corner-frame::before,
.is-style-corner-frame::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 96px;
  height: 96px;
}

.is-style-corner-frame::before {
  inset-block-start: -16px;
  inset-inline-start: -16px;
  border-top: 4px solid var(--c-primary);
  border-left: 4px solid var(--c-primary);
}

.is-style-corner-frame::after {
  inset-block-end: -16px;
  inset-inline-end: -16px;
  border-bottom: 4px solid var(--c-primary);
  border-right: 4px solid var(--c-primary);
}

/* Sticker-Button */
.is-style-sticker .wp-block-button__link {
  box-shadow: var(--shadow-sport-red);
}

.is-style-sticker .wp-block-button__link:hover {
  background-color: var(--c-white) !important;
  border-color: var(--c-white);
  color: var(--c-ink) !important;
}

/* Heller Umriss */
.is-style-outline-light .wp-block-button__link {
  background-color: transparent;
  border: 2px solid var(--c-white);
  color: var(--c-white);
}

.is-style-outline-light .wp-block-button__link:hover {
  background-color: var(--c-white);
  color: var(--c-ink);
}

/* Chip */
.is-style-chip {
  display: inline-block;
  width: fit-content;
  padding: 8px 16px;
  background: var(--c-primary);
  color: var(--c-white);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1;
}

/* Chip */
.is-style-chip-dynamic {
  display: inline-block;
  width: fit-content;
  padding: 4px 8px;
  background: var(--c-primary);
  color: var(--c-white);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1;
}


/* Kicker */
.is-style-kicker {
  font-size: var(--wp--preset--font-size--label);
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--c-accent);
}

/* Balken-Überschrift */
.is-style-rule {
  text-transform: uppercase;
}

.is-style-rule::after {
  content: "";
  display: block;
  width: 96px;
  height: 6px;
  margin-top: 12px;
  background: var(--c-primary);
}

/* Display-Headline */
.is-style-display-italic {
  font-style: italic;
  text-transform: uppercase;
  line-height: 1.05;
  text-wrap: balance;
}

/* Kennzahlen-Spalten */
.is-style-facts > .wp-block-column {
  padding-inline-start: 24px;
  border-inline-start: 2px solid var(--c-primary);
}

/* -----------
   Kopfbereich
   ----------- */

/* Kleben muss der Wrapper, nicht die innere Gruppe. WordPress legt um
   jeden Template-Teil ein eigenes Element – hier <header
   class="wp-block-template-part"> –, und das ist exakt so hoch wie der
   Kopf. Eine sticky Gruppe darin hat keinen Millimeter Weg und scrollt
   mit weg. Sichtbar wird der Unterschied nur beim Scrollen, deshalb
   fällt es im Editor nicht auf. */
header.wp-block-template-part {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
}

/* Am Kleben des Kopfes darf man, solange das Menü offen ist, nichts
   ändern — auch nicht, um Stapelprobleme zu lösen.

   Naheliegend wäre es: position:sticky erzeugt immer einen
   Stapelkontext, unabhängig vom z-index. Weil der Kern das Overlay
   innerhalb des Kopfes ausgibt, gilt dessen z-index: 100000 nur in
   diesem Kontext; nach außen tritt das ganze Overlay mit der 50 des
   Kopfes an. position:static oder :fixed am offenen Menü räumt das
   auf — und bricht dafür etwas Schlimmeres: Beim Schließen gibt der
   Kern den Fokus an den Menüknopf zurück, der Browser scrollt ihn ins
   Bild, und der Knopf liegt dann am Dokumentanfang. Gemessen sprang
   die Seite von y874 auf y0.

   Der Sprung existiert in kleinerem Maß auch ohne diesen Eingriff
   (y874 → y443), weil html während des offenen Menüs auf
   overflow:hidden steht und der Kopf dort ohnehin nicht klebt.
   Behoben wird er deshalb nicht hier, sondern in header-sticky.js:
   Position beim Öffnen merken, beim Schließen wiederherstellen. */

.jfv-header {
  /* Die zwei Logohöhen des Kopfes: normal und geschrumpft. */
  --hdr-logo: 4.25rem;

  box-shadow: 0 2px 12px rgba(25, 25, 25, 0.08);
  transition: padding 0.25s var(--ease);
}

.jfv-header img {
  max-block-size: var(--hdr-logo);
  inline-size: auto;
  transition: max-block-size 0.25s var(--ease);
}

/* Ab 32 px Scrollweg hängt header-sticky.js die Klasse an <body>.
   Die Innenabstände des Kopfes stehen als Inline-Stil im Block-Markup,
   an die kommt eine Regel nur mit !important heran. */
body.is-scrolled .jfv-header {
  --hdr-logo: 3rem;

  padding-block: 0.5rem !important;
}

.jfv-header__right {
  gap: clamp(1rem, 2vw, 2rem);
}

/* Der Knopf im Kopf ist kleiner als der auf den Seiten: In der Zeile
   steht er neben Logo und Navigation und darf sie nicht erdrücken.
   Er bleibt auf jeder Breite sichtbar.

   Gemeint ist der Knopf in der Kopfzeile, nicht jeder Knopf innerhalb
   von .jfv-header — das Navigations-Overlay gibt der Kern innerhalb
   des Kopfes aus, seine beiden Knöpfe stehen also ebenfalls darin.
   Deshalb hängen diese und die folgende Regel an .jfv-header__cta,
   der Klasse des Buttons-Blocks im Kopf. */
.jfv-header .jfv-header__cta .wp-block-button__link {
  padding: 0.625rem 1.125rem;
  font-size: 0.75rem;
  white-space: nowrap;
}

/* Reihenfolge im Kopf. Auf dem Desktop steht der Knopf hinter der
   Menüleiste. Sobald das Menü zum Knopf zusammenfällt, wäre die Zeile
   Logo, Menü, Knopf – dort soll der CTA davor: Logo, Knopf, Menü. */
@media (max-width: 1129.98px) {
  .jfv-header__right .wp-block-buttons {
    order: -1;
  }
}

/* Unter 500 px teilen sich Logo, Knopf und Menü zu wenig Platz, das
   Logo wird zusammengedrückt. Dort fällt der CTA weg.

   Die Grenze lag zuerst bei 430 px, gerechnet auf das Wortlogo. Mit
   dem Bildlogo im Kopf wird es schon früher eng — 500 px ist eine
   Entscheidung nach Augenschein, keine Rechnung. Wer sie verschiebt,
   ändert nur diese eine Zahl.

   Ausgewählt ist der CTA-Block der Kopfzeile. Stand hier
   .jfv-header .wp-block-buttons, verschwanden auch die beiden Knöpfe
   am Fuß des Navigations-Overlays — es liegt im DOM innerhalb des
   Kopfes. Genau dort, wo sie am nötigsten sind.

   Beide Klassen sind nötig, .jfv-header__cta allein genügt nicht: Die
   Global Styles setzen "body .is-layout-flex { display: flex }", und
   der Knopfblock trägt is-layout-flex. Das ist (0,1,1) gegen (0,1,0)
   — die Regel hier verlöre, egal in welcher Reihenfolge die
   Stylesheets geladen werden. Mit dem Elternteil davor steht sie bei
   (0,2,0). Dasselbe gilt für die Größenregel weiter oben. */
@media (max-width: 499.98px) {
  .jfv-header .jfv-header__cta {
    display: none;
  }
}

/* Umschaltpunkt der Navigation: Der Kern klappt die Leiste ab 600 px
   auf und lässt sie darunter im Overlay. Für sieben Punkte plus Knopf
   ist das viel zu früh – bis 1129 px bricht die Zeile um. Die beiden
   Regeln hier drehen die Kern-Regeln in diesem Bereich zurück: Leiste
   verstecken, Menüknopf zeigen. Wer den Punkt verschiebt, ändert ihn
   an drei Stellen: hier zweimal und am Dropdown-Block weiter unten. */
@media (max-width: 1129.98px) {
  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(
      .is-menu-open
    ) {
    display: none;
  }

  .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }
}

/* Untermenü-Dropdown */
.wp-block-navigation .wp-block-navigation-item__content {
  padding-block: 8px;
  border-bottom: 3px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
  color: var(--c-primary);
}

.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
  border-bottom-color: var(--c-primary);
}

/* Ab hier die Aufklapp-Panels der Desktop-Leiste. Unterhalb von
   1130 px steht dieselbe Liste im Overlay – was hier steht, hätte dort
   nur Schaden angerichtet. Die Breite muss zum Umschaltpunkt weiter
   oben passen.

   Zwei Eigenheiten des Navigationsblocks stecken darin:

   1. Er hängt seine Overlay-Farben (ink/weiß) nicht nur ans Overlay,
      sondern auch an jedes Untermenü. Das Panel kam deshalb dunkel
      statt als helle Karte. Die Farbklassen des Kerns tragen
      !important, dagegen hilft nur !important.
   2. Beim Aufklappen setzt der Kern min-width und die rechte Kante mit
      hoher Spezifität. Die doppelte Klasse hebt uns darüber; ohne sie
      blieb das Panel 200 px breit und rechtsbündig. */
@media (min-width: 1130px) {
  .wp-block-navigation
    .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
    padding-block: 12px;
    background-color: var(--c-white) !important;
    color: var(--c-ink) !important;
    border: 0;
    border-top: 3px solid var(--c-primary);
    box-shadow: 0 16px 40px rgba(25, 25, 25, 0.16);
  }

  .wp-block-navigation
    .wp-block-navigation__container
    > .has-child
    > .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
    min-width: 180px;
    inset-block-start: calc(100% + 10px);
    inset-inline-start: -20px;
    inset-inline-end: auto;
    transform: translateY(-8px);
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  }

  .wp-block-navigation
    .wp-block-navigation__container
    > .has-child:hover
    > .wp-block-navigation__submenu-container,
  .wp-block-navigation
    .wp-block-navigation__container
    > .has-child:focus-within
    > .wp-block-navigation__submenu-container,
  .wp-block-navigation
    .wp-block-navigation__container
    > .has-child
    > .wp-block-navigation-submenu__toggle[aria-expanded="true"]
    ~ .wp-block-navigation__submenu-container {
    transform: translateY(0);
  }

  /* Hover-Brücke über die 10 px Lücke, sonst reißt der Weg vom
     Menüpunkt zum Panel ab und das Panel klappt unterwegs zu. */
  .wp-block-navigation .wp-block-navigation__container > .has-child::after {
    content: "";
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    height: 12px;
  }

  /* Gruppen im Dropdown, getrennt allein durch Luft. Der
     Navigationsblock kennt keinen Trenner als Element; der Abstand
     hängt deshalb am Eintrag, über dem die Gruppe beginnt.

     Ausgewählt wird über das Linkziel: So sitzen die Abstände ohne
     Handarbeit im Editor, auch nachdem der Kopf dort neu gebaut wurde.
     Die drei Stellen sind die aus dem Prototyp – »Alle Mannschaften«
     und »Trainingszeiten« gerahmt um die Jahrgänge, »Mitgliedschaft
     kündigen« abgesetzt von den Eltern-Infos. Ändert sich eines dieser
     Linkziele, verschwindet der zugehörige Abstand stillschweigend;
     dann hier nachziehen. Für eine weitere Gruppe genügt am
     Navigationspunkt die Klasse jfv-nav-sep (Block > Erweitert >
     Zusätzliche CSS-Klasse).

     Die doppelte Klasse ist nötig: Der Kern setzt margin: 0 auf jeden
     Eintrag im Untermenü, und das spezifischer als eine Regel über das
     Linkziel. Ohne den Kniff verpufft der Abstand ersatzlos. */
  .wp-block-navigation
    .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container
    .wp-block-navigation-item__content[href$="/bambinis/"],
  .wp-block-navigation
    .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container
    .wp-block-navigation-item__content[href$="/trainingszeiten/"],
  .wp-block-navigation
    .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container
    .wp-block-navigation-item__content[href$="/mitgliedschaft-kuendigen/"],
  .wp-block-navigation
    .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container
    .jfv-nav-sep
    > .wp-block-navigation-item__content {
    margin-block-start: 10px;
  }
}

.wp-block-navigation
  .wp-block-navigation__submenu-container
  .wp-block-navigation-item__content {
  padding: 10px 24px;
  border-bottom: 0;
  border-inline-start: 3px solid transparent;
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.wp-block-navigation
  .wp-block-navigation__submenu-container
  .wp-block-navigation-item__content:hover {
  background: var(--c-surface);
  color: var(--c-primary);
  border-inline-start-color: var(--c-primary);
}

/* Einkaufswagen vor dem Shop-Eintrag.

   Als Maske und nicht als background-image: So nimmt das Symbol die
   Textfarbe an. Derselbe Eintrag steht auf drei Untergründen — im Kopf
   auf Papier (dunkle Schrift), im Overlay auf Ink (weiß), beim
   Überfahren und als aktuelle Seite in Rot. Ein fest eingefärbtes SVG
   müsste dafür dreimal vorliegen und wäre im Kopf weiß auf weiß.

   Ausgewählt über das Linkziel, wie die Gruppenabstände im Dropdown
   weiter oben. Der Shop liegt auf der Hauptdomain, deshalb greift die
   Endung und nicht der ganze Pfad. Für einen weiteren Eintrag genügt
   am Navigationspunkt die Klasse jfv-nav-cart (Block > Erweitert >
   Zusätzliche CSS-Klasse) — dann hängt das Symbol nicht am Linkziel.

   Am Label und nicht am Link: Der Link ist im Overlay ein
   Rasterfeld über die volle Breite, das Symbol säße sonst weit vor
   dem Wort statt daneben. */
.wp-block-navigation-item__content[href$="/shop"]
  .wp-block-navigation-item__label::before,
.wp-block-navigation-item__content[href$="/shop/"]
  .wp-block-navigation-item__label::before,
.jfv-nav-cart
  > .wp-block-navigation-item__content
  .wp-block-navigation-item__label::before,
.jfv-nav-overlay .jfv-nav-link > a[href$="/shop"]::before,
.jfv-nav-overlay .jfv-nav-link > a[href$="/shop/"]::before {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 20 20'%3E%3Cpath fill='%23ffffff' d='M6 13h9c.55 0 1 .45 1 1s-.45 1-1 1H5c-.55 0-1-.45-1-1V4H2c-.55 0-1-.45-1-1s.45-1 1-1h3c.55 0 1 .45 1 1v2h13l-4 7H6v1zm-.5 3c.83 0 1.5.67 1.5 1.5S6.33 19 5.5 19S4 18.33 4 17.5S4.67 16 5.5 16zm9 0c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5z'/%3E%3C/svg%3E");

  content: "";
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  margin-inline-end: 0.45em;
  vertical-align: -0.2em;
  background-color: currentColor;
  -webkit-mask: var(--icon) no-repeat center / contain;
  mask: var(--icon) no-repeat center / contain;
}

/* Overlay-Menü des Kerns.

   Die Rückfallebene: Sie greift, solange am Navigationsblock kein
   eigenes Overlay ausgewählt ist (Attribut "overlay", ab WordPress
   7.0) oder der Template-Part fehlt. Beides erkennt man an der Klasse
   disable-default-overlay, die der Kern nur beim eigenen Overlay
   setzt — die Regeln hier klammern sie aus, sonst bekäme der Part
   einen Innenabstand in Kopfhöhe und die Schrift der Kern-Liste. */
.wp-block-navigation__responsive-container.is-menu-open:not(
    .disable-default-overlay
  ) {
  padding-top: calc(var(--hdr-height) + 24px);
}

.wp-block-navigation__responsive-container.is-menu-open:not(
    .disable-default-overlay
  )
  .wp-block-navigation-item__content {
  font-family: var(--f-headline);
  font-size: 1.125rem;
  font-weight: 700;
  border-bottom: 0;
}

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
  padding: 10px;
  border: 2px solid currentColor;
}

/* -------------------
   Navigations-Overlay
   ------------------- */

/* Ab WordPress 7.0 holt sich der Navigationsblock sein Overlay aus
   einem Template-Part: parts/navigation-overlay.html, ausgewählt am
   Block im Kopfbereich (Attribut "overlay", im Editor unter
   Einstellungen → Overlay). Der Part ist im Editor zusammengesetzt und
   dort auch änderbar — Farben, Abstände, Schrift, Knöpfe.

   Was hier steht, ist das, wofür der Editor kein Eingabefeld hat:
   Trennlinien zwischen den Punkten, das Aufklappen der Untermenüs
   samt Einrückung, der Rahmen um das X. Wer die Optik verschiebt,
   ändert zuerst den Part und erst dann diese Datei.

   Zwei Dinge übernimmt der Kern, sobald ein eigenes Overlay im Spiel
   ist: Er hängt dem Container die Klasse disable-default-overlay an,
   nimmt seine eigenen Innenabstände zurück und blendet die
   Desktop-Liste aus. Die Overlay-Farben am Navigationsblock wertet er
   dann nicht mehr aus — die Fläche bringt der Part selbst mit. */

/* Der Container ist fixiert und deckt den Bildschirm. Seine Fläche
   erbt er vom Navigationsblock, der keine hat; ohne diese Zeile
   scheint die Seite durch, sobald der Part kürzer ist als das
   Fenster. */
.wp-block-navigation__responsive-container.is-menu-open.disable-default-overlay {
  background-color: var(--c-ink);
}

/* Angemeldet liegt die Adminleiste über allem. Der Kern schiebt sein
   eigenes Overlay dafür nach unten, das aus dem Template-Part
   ausdrücklich nicht — ohne die Regel steckt das X unter der Leiste. */
.admin-bar
  .wp-block-navigation__responsive-container.is-menu-open.disable-default-overlay {
  inset-block-start: 46px;
}

@media (min-width: 783px) {
  .admin-bar
    .wp-block-navigation__responsive-container.is-menu-open.disable-default-overlay {
    inset-block-start: 32px;
  }
}

/* svh statt vh: Auf dem Handy zählt vh die Adressleiste mit, das
   Overlay wäre beim Öffnen scrollbar, ohne dass es Inhalt gäbe. Die
   vh-Zeile davor bleibt als Rückfall für ältere Browser stehen. */
.jfv-nav-overlay {
  min-height: 100vh;
  min-height: 100svh;
}

/* Dieselbe Nachbarschaft, dieselbe Falle: Der Kopf schrumpft sein Logo
   beim Scrollen über --hdr-logo. Weil das Overlay im Kopf steckt,
   schrumpfte das Logo in seiner Kopfzeile mit — wer die Seite scrollt
   und dann das Menü öffnet, sah ein kleineres. Hier bleibt es fest. */
.jfv-nav-overlay__bar img {
  max-block-size: 4.25rem;
}

/* Das X ist ein Knopf des Kerns ohne jede Kontur. Im Prototyp ist es
   dasselbe Quadrat mit 2 px Umriss wie der Menüknopf im Kopf. Die
   Farbe kommt über currentColor aus der hellen Kopfzeile des
   Overlays, damit beide Zustände zueinander passen. */
.jfv-nav-overlay .wp-block-navigation-overlay-close {
  padding: 10px;
  border: 2px solid currentColor;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.jfv-nav-overlay .wp-block-navigation-overlay-close:hover {
  background-color: var(--c-ink);
  color: var(--c-paper);
}

/* Menü und Punkte füllen die Breite.

   Beide Zeilen sind nötig, und die erste ist die wichtigere: Bei einem
   senkrechten Flex-Layout schreibt WordPress dem Navigationsblock
   selbst ein align-items — ohne Ausrichtung flex-start, mit
   Ausrichtung »rechts« flex-end. Das gilt der Liste als Ganzes, die
   dadurch auf Textbreite schrumpft und an einer Kante klebt.
   Trennlinien und Pfeilchen enden dann mitten auf dem Bildschirm.
   Die zweite Zeile richtet dasselbe an den einzelnen Punkten aus.

   Damit ist die Ausrichtung am Block gleichgültig — was dort steht,
   ändert im Overlay nichts mehr. */
.jfv-nav-overlay .wp-block-navigation,
.jfv-nav-overlay .wp-block-navigation__container {
  align-items: stretch;
}

/* Trennlinien. Der Navigationsblock kennt keinen Trenner als Element,
   die Linie hängt deshalb an jedem Hauptpunkt. */
.jfv-nav-overlay
  .wp-block-navigation__container
  > .wp-block-navigation-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* Zeilenhöhe der Hauptpunkte. Der 3 px starke Rahmen unten, mit dem
   die Desktop-Leiste die aktuelle Seite markiert, hat hier nichts zu
   suchen — im Overlay markiert die Farbe.

   flex-grow macht die ganze Zeile antippbar: Der Menüpunkt ist ein
   Flex-Container, der Link darin nur so breit wie sein Wort. »News«
   wären sonst 50 px Ziel in einer 390 px breiten Zeile — daneben
   getippt passiert nichts. Bei den aufklappbaren Punkten übernimmt
   das Raster diese Aufgabe, dort verpufft die Zeile folgenlos. */
.jfv-nav-overlay
  .wp-block-navigation__container
  > .wp-block-navigation-item
  > .wp-block-navigation-item__content {
  flex-grow: 1;
  padding-block: 1.125rem;
  border-bottom: 0;
}

/* Auf dunklem Grund ist Vereinsrot zu dunkel; hier führt Trikotrot.
   Die Regel gilt auch für die aktuelle Seite, deren Farbe aus der
   Desktop-Leiste kommt. */
.jfv-nav-overlay .wp-block-navigation .wp-block-navigation-item__content:hover,
.jfv-nav-overlay
  .wp-block-navigation
  .current-menu-item
  > .wp-block-navigation-item__content {
  color: var(--c-accent);
}

/* Aufklappen statt Ausklappen.

   Der Kern legt Untermenüs auch im eigenen Overlay als absolut
   positioniertes Dropdown an. Gewünscht ist die Ziehharmonika aus dem
   Prototyp: Die Gruppe geht unter ihrem Punkt auf und schiebt die
   folgenden nach unten.

   Der Punkt wird dafür zum Raster aus zwei Spalten und zwei Zeilen.
   In Zeile 1 liegt der Knopf über beide Spalten, das Pfeilchen
   darüber in Spalte 2 — bewusst übereinander und nicht nebeneinander:
   Der Kern setzt am Pfeilchen pointer-events:none, ein Klick darauf
   soll den Knopf darunter treffen. Steht es in einer eigenen Spalte,
   geht der Klick auf den Pfeil ins Leere. */
.jfv-nav-overlay .wp-block-navigation-item.has-child {
  display: grid;
  grid-template-columns: 1fr auto;
}

.jfv-nav-overlay
  .wp-block-navigation-item.has-child
  > .wp-block-navigation-submenu__toggle {
  grid-area: 1 / 1 / 2 / 3;
  padding-inline: 0 2rem;
}

.jfv-nav-overlay
  .wp-block-navigation-item.has-child
  > .wp-block-navigation__submenu-icon {
  grid-area: 1 / 2 / 2 / 3;
  align-self: center;
  justify-self: end;
  margin: 0;
}

/* Aufgeklappt färbt sich der Punkt mit, Pfeilchen eingeschlossen.
   Das Drehen des Pfeils macht der Kern. */
.jfv-nav-overlay .wp-block-navigation-submenu__toggle[aria-expanded="true"],
.jfv-nav-overlay
  .wp-block-navigation-submenu__toggle[aria-expanded="true"]
  + .wp-block-navigation__submenu-icon {
  color: var(--c-accent);
}

/* Die Gruppe selbst: aus dem Dropdown wird die zweite Rasterzeile.
   Zugeklappt bleibt sie beim Kern — der setzt height:0 und
   overflow:hidden, hier steht deshalb nichts dazu.

   Fläche und Rahmen müssen weg: Der Kern gibt jedem Untermenü eine
   weiße Karte mit grauem Rahmen, sobald der Navigationsblock selbst
   keine Hintergrundfarbe trägt. */
.jfv-nav-overlay
  .wp-block-navigation
  .has-child
  .wp-block-navigation__submenu-container {
  grid-area: 2 / 1 / 3 / 3;
  position: static;
  min-width: 0;
  padding: 0;
  border: 0;
  background-color: transparent;
  box-shadow: none;
}

/* Der Fußabstand der Gruppe steht am geöffneten Zustand und nicht an
   der Gruppe selbst: Zugeklappt ist sie 0 px hoch, ein Innenabstand
   würde diese Höhe wieder aufmachen. */
.jfv-nav-overlay
  .wp-block-navigation-submenu__toggle[aria-expanded="true"]
  ~ .wp-block-navigation__submenu-container {
  padding-block-end: 0.75rem;
}

/* Die Einträge der Gruppe: eingerückt an der senkrechten Linie,
   Fließtextschrift statt Versalien, zurückgenommen gegenüber den
   Hauptpunkten. Die Linie steht am Eintrag und nicht an der Gruppe —
   so färbt sie beim Überfahren mit und läuft trotzdem durch. */
.jfv-nav-overlay
  .wp-block-navigation__submenu-container
  .wp-block-navigation-item__content {
  flex-grow: 1;
  padding: 0.75rem 0 0.75rem 1.25rem;
  border-inline-start: 2px solid rgba(255, 255, 255, 0.18);
  font-family: var(--f-body);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-white-muted);
}

/* Die helle Fläche beim Überfahren stammt aus dem Desktop-Dropdown
   und wäre hier ein weißer Balken. */
.jfv-nav-overlay
  .wp-block-navigation__submenu-container
  .wp-block-navigation-item__content:hover {
  background: transparent;
  border-inline-start-color: var(--c-accent);
  color: var(--c-white);
}

/* Aufklappbare Gruppen im Overlay.

   Im Handymenü des Navigationsblocks sind Untermenüs immer
   aufgeklappt — im neuen Overlay wie im klassischen Container. Am
   24.09.2026 an beiden Varianten gemessen: aria-expanded steht auf
   true, ein Tipp auf das Pfeilchen bleibt folgenlos. Verantwortlich
   ist der Kern selbst:

     get isSubmenuOpen() {
       return Object.values(ctx.overlayOpenedBy||{}).filter(Boolean)
         .length > 0 || state.isMenuOpen
     }
     wp-includes/js/dist/script-modules/block-library/navigation/view.min.js

   Kein Blockattribut ändert das. Die Einstellung »nur bei Klick
   öffnen« wirkt auf die Desktop-Leiste, nicht aufs Handy.

   Das Overlay baut seine Punkte deshalb aus Details-Blöcken:
   zugeklappt beim Öffnen, aufklappbar per Tipp, ohne eine Zeile
   JavaScript und mit der Tastaturbedienung, die <details> von sich aus
   mitbringt.

   Der Preis: Die Menüpunkte stehen an zwei Stellen, im Kopfbereich als
   Navigationsblock und hier als Liste. Wer einen ändert, ändert beide.

   Die Regeln oben für .jfv-nav-overlay .wp-block-navigation greifen
   nach der Umstellung ins Leere und können dann weg. Sie bleiben
   vorläufig stehen, damit Stylesheet und Markup unabhängig
   voneinander ausgerollt werden können. */

.jfv-nav-overlay details.jfv-nav-group,
.jfv-nav-overlay .jfv-nav-link {
  margin: 0;
  background: transparent;

  /* Die Aufklapper der FAQ-Seite sind weiße Karten mit Rahmen und
     stehen weiter unten in dieser Datei. Gleiche Spezifität verlöre
     gegen sie, deshalb das zusätzliche details vor der Klasse. */
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* Die Zeile einer Gruppe und die eines einzelnen Punktes sehen gleich
   aus. Beide füllen die Breite, damit die ganze Zeile antippbar ist
   und nicht nur das Wort. */
.jfv-nav-overlay details.jfv-nav-group > summary,
.jfv-nav-overlay .jfv-nav-link > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.125rem;
  font-family: var(--f-headline);
  font-size: var(--wp--preset--font-size--body-lg);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-white);
  cursor: pointer;
}

/* Das eigene Dreieck von <details> deutet niemand, und es steht auf der
   falschen Seite. Zwei Schreibweisen, weil ältere WebKit-Stände die
   zweite brauchen. */
.jfv-nav-overlay details.jfv-nav-group > summary {
  padding-inline: 0;
  list-style: none;
}

/* Die Gruppen brauchen space-between, damit das Pfeilchen rechts sitzt.
   Ein einzelner Punkt hat kein Pfeilchen — dort wuerde es das
   Einkaufswagen-Symbol vom Wort Shop wegschieben. */
.jfv-nav-overlay .jfv-nav-link > a {
  justify-content: flex-start;
}

.jfv-nav-overlay details.jfv-nav-group > summary::-webkit-details-marker {
  display: none;
}

/* Das Pfeilchen des Kerns als Maske. Nimmt die Textfarbe an und dreht
   sich beim Aufklappen — dieselbe Bewegung wie im Kopfbereich. */
.jfv-nav-overlay details.jfv-nav-group > summary::after {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 4 6 8l4.5-4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  content: "";
  flex: none;
  width: 0.8em;
  height: 0.8em;

  /* Der Pfeil der FAQ-Aufklapper besteht aus zwei Rahmenkanten. Ohne
     diese beiden Zeilen stünden hier zwei Pfeile übereinander. */
  border: 0;
  transform: none;
  background-color: currentColor;
  -webkit-mask: var(--icon) no-repeat center / contain;
  mask: var(--icon) no-repeat center / contain;
  transition: transform 0.2s var(--ease);
}

.jfv-nav-overlay details.jfv-nav-group[open] > summary::after {
  transform: rotate(180deg);
}

/* Auf dunklem Grund ist Vereinsrot zu dunkel, hier führt Trikotrot.
   Aufgeklappt bleibt die Gruppe gefärbt, damit man beim Scrollen
   wiederfindet, wo man ist. */
.jfv-nav-overlay details.jfv-nav-group > summary:hover,
.jfv-nav-overlay details.jfv-nav-group[open] > summary,
.jfv-nav-overlay .jfv-nav-link > a:hover {
  color: var(--c-accent);
}

/* Die Gruppe selbst: eingerückt an einer senkrechten Linie,
   Fließtextschrift statt Versalien, zurückgenommen gegenüber den
   Hauptpunkten. Die Linie steht am Eintrag und nicht an der Liste —
   so färbt sie beim Überfahren mit und läuft trotzdem durch. */
/* Die Farbe steht an der Liste und nicht nur am Link. Grund: Das
   Stylesheet setzt weiter unten .has-ink-background-color a auf
   currentcolor — gleiche Spezifitaet wie eine Regel am Link, aber
   spaeter in der Datei, also gewinnt sie. Geerbt wuerde dann das Grau,
   das .wp-block-details ihren Inhalten gibt: auf dunklem Grund
   unlesbar. */
.jfv-nav-overlay .jfv-nav-sub {
  margin: 0;
  padding: 0 0 0.75rem;
  list-style: none;
  color: var(--c-white-muted);
}

.jfv-nav-overlay .jfv-nav-sub li {
  margin: 0;
}

.jfv-nav-overlay .jfv-nav-sub li a {
  display: block;
  padding: 0.75rem 0 0.75rem 1.25rem;
  border-inline-start: 2px solid rgba(255, 255, 255, 0.18);
  font-family: var(--f-body);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  color: var(--c-white-muted);
}

.jfv-nav-overlay .jfv-nav-sub li a:hover {
  border-inline-start-color: var(--c-accent);
  color: var(--c-white);
}

/* ----
   Hero
   ---- */

.jfv-hero {
  padding-block: clamp(4rem, 10vw, 7rem);
}

/* Hero-Verlauf */
.jfv-hero > .wp-block-cover__background {
  background-image: linear-gradient(
    100deg,
    rgb(25, 25, 25) 8%,
    rgba(25, 25, 25, 0.82) 45%,
    rgba(25, 25, 25, 0.25) 100%
  );
}

.jfv-hero__content {
  max-width: 46rem;
  margin-inline-end: auto;
}

.jfv-hero__lead {
  max-width: 36rem;
}

/* ---------
   Aktuelles
   --------- */

.jfv-section-head {
  gap: 20px;
}

.jfv-meta {
  color: var(--c-primary);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-block: 20px 8px;
}

.jfv-link-underline a {
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-primary);
  border-bottom: 2px solid var(--c-primary);
  padding-bottom: 2px;
}

.jfv-link-underline a:hover {
  opacity: 0.65;
}

.jfv-news .wp-block-post-featured-image img {
  transition: transform 0.7s var(--ease);
}

.jfv-news .wp-block-post-featured-image:hover img {
  transform: scale(1.05);
}

.jfv-news .wp-block-post-title a:hover {
  color: var(--c-primary);
}

.jfv-news__side .wp-block-post-template > li + li {
  margin-top: 2.5rem;
}

/* ------
   Verein
   ------ */

.jfv-vision__text {
  color: var(--c-white-muted);
  line-height: 1.7;
}

.jfv-fact__value {
  font-family: var(--f-headline);
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.jfv-fact__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

/* --------------------
   Mannschaften (Bento)
   -------------------- */

.jfv-bento {
  gap: 24px;
}

@media (min-width: 1024px) {
  .wp-block-group.jfv-bento {
    grid-auto-rows: 200px;
  }
}

/* Bento-Umbruch */
@media (max-width: 1023px) {
  .wp-block-group.jfv-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jfv-bento > * {
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

@media (max-width: 599px) {
  .wp-block-group.jfv-bento {
    grid-template-columns: 1fr;
  }
}

.jfv-team {
  box-shadow: var(--shadow-sport);
}

.jfv-team .wp-block-cover__image-background {
  transition: transform 1s var(--ease);
}

.jfv-team:hover .wp-block-cover__image-background {
  transform: scale(1.08);
}

.jfv-team__name a:hover {
  color: var(--c-accent);
}

.jfv-team__meta {
  margin-top: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-white-muted);
}

.jfv-team__more {
  margin-top: 16px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.jfv-team__more a {
  color: var(--c-accent);
}

/* Textausrichtung */
.jfv-team--feature > .wp-block-cover__inner-container,
.jfv-team--accent > .wp-block-cover__inner-container {
  align-self: flex-end;
}

.jfv-team--compact > .wp-block-cover__inner-container {
  align-self: center;
}

/* ------------------------
   Heimspiel & Unterstützer
   ------------------------ */

.jfv-match__crest {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--c-surface);
  color: var(--c-ink);
  font-family: var(--f-headline);
  font-size: 0.875rem;
  font-weight: 800;
}

.jfv-match__crest--away {
  background: var(--c-surface-strong);
  color: var(--c-muted);
}

.jfv-match__name {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.jfv-match__vs {
  font-family: var(--f-headline);
  font-size: 1.75rem;
  font-style: italic;
  font-weight: 800;
}

.jfv-match__date {
  margin-top: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--c-accent);
}

.jfv-match__sep {
  border-color: rgba(255, 255, 255, 0.12);
  margin-block: 28px;
}

.jfv-match__venue {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.9375rem;
  margin-bottom: 20px;
}

.jfv-sponsors {
  gap: 24px;
}

.jfv-sponsor {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  margin: 0;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--c-outline);
  box-shadow: var(--shadow-sport);
  font-family: var(--f-headline);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  transition: transform 0.2s var(--ease);
}

.jfv-sponsor:hover {
  transform: translate(-2px, -2px);
}

.jfv-sponsor a:hover {
  color: var(--c-primary);
}

/* ----------
   Fußbereich
   ---------- */

.jfv-footer__intro,
.jfv-footer__address {
  color: var(--c-white-muted);
}

.jfv-footer__head {
  margin-bottom: 24px;
  font-family: var(--f-body);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.jfv-footer__list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 14px;
}

.jfv-footer__list a {
  color: rgba(255, 255, 255, 0.8);
}

.jfv-footer__list a:hover,
.jfv-footer__bar a:hover,
.jfv-footer__address a:hover {
  color: var(--c-accent);
}

.jfv-footer__sep {
  border-color: rgba(255, 255, 255, 0.12);
  margin-block: 40px 24px;
}

.jfv-footer__bar {
  color: rgba(255, 255, 255, 0.6);
  gap: 16px;
}

/* -------------
   Details-Block
   ------------- */

.wp-block-details {
  background: var(--c-white);
  border: 1px solid var(--c-outline);

  /* Links durchgehend 3px breit, damit der Rahmen im geschlossenen
     Zustand geschlossen ist und beim Aufklappen nichts springt –
     die Farbe wechselt, nicht die Breite. */
  border-inline-start: 3px solid var(--c-outline);
  transition: border-color 0.2s var(--ease);
}

.wp-block-details[open] {
  border-inline-start-color: var(--c-primary);
}

.wp-block-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  font-family: var(--f-headline);
  font-size: 0.9375rem;
  font-weight: 700;
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;
  transition: color 0.2s var(--ease);
}

/* Eigener Pfeil */
.wp-block-details > summary::-webkit-details-marker {
  display: none;
}

.wp-block-details > summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--c-primary);
  border-bottom: 2px solid var(--c-primary);
  transform: translateY(-3px) rotate(45deg);
  transition: transform 0.2s var(--ease);
}

.wp-block-details[open] > summary::after {
  transform: translateY(2px) rotate(-135deg);
}

.wp-block-details > summary:hover {
  color: var(--c-primary);
}

.wp-block-details > summary:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: -2px;
}

/* Innenabstand */
.wp-block-details > :not(summary) {
  margin-block: 0;
  padding-inline: 24px;
  color: var(--c-muted);
}

.wp-block-details > :not(summary):last-child {
  padding-bottom: 22px;
}

/* -----
   Links
   ----- */

/* theme.json färbt Links global in Vereinsrot. Auf dunklen Flächen
   käme das auf 2,4:1 Kontrast und wäre unlesbar – dort bleibt der Link
   in der Textfarbe der Fläche, also weiß.

   Die globale Regel aus theme.json steht als
   ":root :where(a:where(:not(.wp-element-button)))" und hat damit die
   Spezifität (0,1,0). Die Selektoren hier liegen bei (0,2,1) und
   gewinnen unabhängig von der Ladereihenfolge. */
.has-ink-background-color a:not(.wp-element-button),
.has-primary-background-color a:not(.wp-element-button),
.has-accent-background-color a:not(.wp-element-button),
.wp-block-cover a:not(.wp-element-button) {
  color: currentColor;
}

/* Rot ist für Links im Fließtext gedacht. Blöcke, die von Haus aus
   verlinkt sind – Navigation, Titel, Datum, Blätterlinks – behalten
   ihre eigene Farbe, sonst färbt sich der Kopfbereich mit ein. */
.wp-block-navigation a:not(.wp-element-button),
.wp-block-site-title a,
.wp-block-post-title a,
.wp-block-post-date a,
.wp-block-query-pagination a:not(.wp-element-button) {
  color: currentColor;
}

/* Auf hellem Grund gibt der Farbwechsel nach Trikotrot die Rückmeldung
   beim Hover. Auf dunklem Grund bleibt die Farbe gleich – dort tritt
   der Unterstrich an ihre Stelle, damit der Hover überhaupt sichtbar
   ist. Bewusst nur hier und nicht global, weil Navigation und Titel
   ihre eigenen Hover-Zustände mitbringen. */
.has-ink-background-color a:not(.wp-element-button):hover,
.has-ink-background-color a:not(.wp-element-button):focus-visible,
.has-primary-background-color a:not(.wp-element-button):hover,
.has-primary-background-color a:not(.wp-element-button):focus-visible,
.wp-block-cover a:not(.wp-element-button):hover,
.wp-block-cover a:not(.wp-element-button):focus-visible {
  text-decoration: underline;
}

/* Ausnahme Navigation: Der Block trägt die Overlay-Farbe auch auf dem
   Desktop am Container, damit gilt dort jeder Menüpunkt als »Link auf
   dunklem Grund« und bekam beim Hover einen Unterstrich. Im Prototyp
   wechselt nur die Farbe. */
.wp-block-navigation a:not(.wp-element-button):hover,
.wp-block-navigation a:not(.wp-element-button):focus-visible {
  text-decoration: none;
}

/* ---------
   Link-Icon
   --------- */

/* Neben dem Absatz auch das Kleingedruckte: JetFormBuilder setzt den
   Hilfetext unter einem Feld nicht in ein <p>, sondern in ein
   <small>. Ohne diesen Zusatz greift "ally-links" am Formular ins
   Leere — dort gibt es überhaupt keinen Absatz, Beschriftungen sind
   <label>, Einwilligungstexte <span>.

   Bewusst über das Element <small> und nicht über die Plugin-Klasse
   .jet-form-builder__desc: style.css bleibt damit frei von
   Plugin-Interna, und die Regel gilt für Kleingedrucktes überall.
   Listen und Buttons bleiben weiterhin außen vor.

   Das Symbol zeigt einen Pfeil, der aus einem Kasten heraus führt: die
   übliche Bedeutung ist "dieser Link verlässt die Seite". Deshalb
   greift die Regel nur bei absoluten Links auf eine fremde Domain.
   Interne Ziele sind relativ notiert (/faq/) und fallen schon an
   [href^="http"] heraus; die eigene Domain schließt :not() aus, alte
   wie neue, weil der Teilstring beide trifft. mailto: und tel: bleiben
   ebenfalls frei — ein Pfeil hinter einer E-Mail-Adresse führt in die
   Irre. */
.ally-links :is(p, small) a[href^="http"]:not([href*="jfv-rheinebene.de"])::after,
:is(p, small).ally-links a[href^="http"]:not([href*="jfv-rheinebene.de"])::after {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M18 14v4.833A1.166 1.166 0 0 1 16.833 20H5.167A1.167 1.167 0 0 1 4 18.833V7.167A1.166 1.166 0 0 1 5.167 6h4.618m4.447-2H20v5.768m-7.889 2.121l7.778-7.778'/%3E%3C/svg%3E");

  content: "";
  display: inline-block;
  width: 0.72em;
  height: 0.72em;
  margin-inline-start: 0.3em;
  vertical-align: -0.05em;
  background-color: currentColor;
  -webkit-mask: var(--icon) no-repeat center / contain;
  mask: var(--icon) no-repeat center / contain;
}

/* -------------
   Scroll-Reveal
   ------------- */

.jfv-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.jfv-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Editor */
.editor-styles-wrapper .jfv-reveal {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  .jfv-reveal {
    opacity: 1;
    transform: none;
  }
}

/* ----------------
   JetEngine-Blöcke
   ---------------- */

/* Die einzige Stelle, an der dieses Stylesheet eine Plugin-Klasse
   anfasst — und sie ist nicht zu vermeiden.

   Der Dynamic Field kapselt seinen Inhalt in einen eigenen Wrapper und
   legt das gewählte Tag erst darin ab. Die Abstandsfelder des Blocks
   wirken am Wrapper; die Vorgabe-Margins des inneren p oder h sind von
   dort nicht erreichbar. Der Reset der Automatik-Abstände weiter oben
   greift ebenfalls nicht, weil er nur direkte Kinder einer
   constrained-Gruppe trifft — das ist der Wrapper, nicht der Absatz.

   Ohne diesen Reset stehen in jeder Listing-Karte je 1 em über und
   unter jedem Feld, die niemand eingestellt hat und niemand im Editor
   wegbekommt. Danach kommen die Abstände wieder aus den
   Blockeinstellungen, wie im Rest des Themes.

   Beide Selektoren mit Absicht: Je nach JetEngine-Version trägt das
   Tag selbst die Klasse __content, oder es liegt darin. Der Dynamic
   Link hat dasselbe Problem unter anderem Klassennamen — er rendert
   seinen Absatz als .jet-listing-dynamic-link. */
.jet-listing-dynamic-field__content,
.jet-listing-dynamic-field :is(p, h1, h2, h3, h4, h5, h6),
p.jet-listing-dynamic-link,
.jet-listing-dynamic-link :is(p, h1, h2, h3, h4, h5, h6) {
  margin-block: 0;
}

.jet-trainer-name {
  font-family: var(--f-headline);
  font-size: 1.125rem;
  font-weight: 700;
}

/* --------------------------------------
   Laufweite und Links (FSE-Theme-Methodik)
   -------------------------------------- */

/* Beides stand als em in theme.json. Laufweite gehoert in ganzen px an
   den Stil, nicht als em ins JSON, und sie ist im Editor abgeschaltet.
   14 px x 0,05 em = 0,7 px, gerundet 1 px. */
.wp-element-button,
.wp-block-button__link,
.wp-block-navigation {
  letter-spacing: 1px;
}

/* Links im Fliesstext sind unterstrichen, das setzt theme.json. Wo ein
   Link ein Bedienelement ist - Navigation, Wortmarke, Social-Symbole,
   Listen im Fussbereich -, waere die Unterstreichung Laerm. */
.wp-block-navigation a,
.wp-block-site-title a,
.wp-block-social-link a,
.jfv-footer__list a {
  text-decoration: none;
}