/* ══════════════════════════════════════════════════════════════════════════
   wprbn Menü
   Bewusst OHNE @layer: WordPress-Styles stehen außerhalb aller Layer und
   würden Layer-Regeln sonst schlagen (siehe CLAUDE.md, Prioritätsregel).
   Eigenes Markup + eigene Klassen → kein Kampf gegen WP-Nav-Klassen nötig.

   Grundregeln: nichts fix dimensioniert, Automatik vor Konfiguration,
   maximal drei Ebenen, jeder Wert funktioniert hell und dunkel.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Ebene 1 – die Vorgaben greifen auf die Typografie-Tab-Variablen zurück
     (--font-nav, --weight-nav, …), damit dessen Einstellungen weiter wirken.
     Der Menü-Tab überschreibt sie, sobald dort etwas gesetzt ist. */
  --wprbn-menu-l1-size:      var(--size-nav, var(--text-xs, 0.75rem));
  --wprbn-menu-l1-weight:    var(--weight-nav, 600);
  --wprbn-menu-l1-tracking:  var(--ls-nav, 0.1em);
  --wprbn-menu-l1-transform: var(--tt-nav, uppercase);
  --wprbn-menu-l1-gap:       var(--space-md, 1.5rem);
  --wprbn-menu-l1-color:     var(--header-text-color, var(--color-nav, var(--text-primary)));
  --wprbn-menu-l1-hover:     var(--text-muted);
  --wprbn-menu-l1-active:    var(--wprbn-menu-l1-color);
  --wprbn-menu-l1-family:    var(--font-nav, inherit);

  /* Overlay (mobiles Menü und Desktop-Hamburger). Eigene Variablen mit den
     ursprünglichen Festwerten als Vorgabe: Sind die Felder unter ▌Erste Ebene
     gepflegt, spiegelt inc/menu/menu-css.php sie hierher und das Overlay folgt
     der Menü-Schrift. Sind sie leer, bleibt die große Overlay-Optik stehen –
     sonst fiele sie auf die Kopfzeilen-Größe zusammen. */
  /* Logohöhe im Overlay. Ein einziger Wert für beide Rollen: Der Mobil-Block
     in inc/menu/menu-css.php überschreibt ihn mit der Dashboard-Option, hier
     steht die zurückhaltende Desktop-Vorgabe. */
  --wprbn-menu-overlay-logo-h:   40px;
  /* Innenabstand der Kopfleiste im Menü – bewusst fest, keine Option. */
  --wprbn-menu-overlay-bar-pad:  0.85rem;
  --wprbn-menu-overlay-bar-h:    calc(var(--wprbn-menu-overlay-logo-h) +
                                      2 * var(--wprbn-menu-overlay-bar-pad) +
                                      env(safe-area-inset-top, 0px));

  --wprbn-menu-ov-family:    var(--font-heading);
  --wprbn-menu-ov-size:      clamp(1.75rem, 4.5vw, 3rem);
  --wprbn-menu-ov-weight:    400;
  --wprbn-menu-ov-tracking:  0.02em;
  --wprbn-menu-ov-transform: none;
  --wprbn-menu-ov-color:     var(--text-primary);
  --wprbn-menu-ov-hover:     var(--wprbn-menu-ov-color);
  --wprbn-menu-ov-active:    var(--wprbn-menu-ov-color);
  --wprbn-menu-ov2-size:     1rem;
  --wprbn-menu-ov2-color:    var(--text-primary);

  /* Untermenü-Panel */
  --wprbn-menu-panel-bg:      var(--bg-primary);
  --wprbn-menu-panel-border:  var(--border-strong);
  --wprbn-menu-panel-bw:      0.5px;
  --wprbn-menu-panel-radius:  0;
  --wprbn-menu-panel-shadow:  none;
  --wprbn-menu-panel-pad:     0.5rem;
  /* Versatz beim Einblenden – 0 = reines Überblenden */
  --wprbn-menu-panel-shift:   4px;
  /* Trennlinien zwischen den Einträgen – 0 = keine */
  --wprbn-menu-l2-divider:    0;
  --wprbn-menu-l2-divider-color: var(--border);

  /* Untermenü-Einträge */
  --wprbn-menu-l2-size:      0.9rem;
  --wprbn-menu-l2-weight:    500;
  --wprbn-menu-l2-tracking:  0.02em;
  --wprbn-menu-l2-transform: none;
  --wprbn-menu-l2-color:     var(--text-primary);
  --wprbn-menu-l2-hover:     var(--text-primary);
  --wprbn-menu-l2-hover-bg:  var(--bg-secondary);
  --wprbn-menu-l2-pad-x:     1rem;
  --wprbn-menu-l2-pad-y:     0.6rem;

  /* Breite: nie fix – wächst mit dem längsten Label, gedeckelt am Viewport */
  --wprbn-menu-panel-min:    240px;
  --wprbn-menu-panel-max:    min(92vw, 640px);

  --wprbn-menu-transition:   0.2s ease;
}

/* ── Slot im Header-Grid ────────────────────────────────────────────────────
   Ersetzt .wp-block-navigation als Grid-Kind. Die Regeln in main.css greifen
   auf die WP-Klasse und laufen jetzt ins Leere – hier gespiegelt.
   Das `!important` ist nötig, weil die Basis-Grid-Regeln selbst `!important`
   tragen (siehe Memory header-inner-grid-immovable). */
.site-header .header-inner > .wprbn-menu-slot,
.site-header .wp-block-group.header-inner > .wprbn-menu-slot {
  grid-row: 1 !important;
  grid-column: 2 !important;
  justify-self: center !important;
  min-width: 0 !important;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.header-menu--ham-right.site-header .header-inner > .wprbn-menu-slot {
  grid-column: 2 !important;
  justify-self: end !important;
}

.header-menu--ham-left.site-header .header-inner > .wprbn-menu-slot {
  grid-column: 1 !important;
  justify-self: start !important;
}

/* Hamburger links: Logo in die Mitte, Aktionen bleiben rechts. Die zweite
   Regel hebt die Alt-Regel auf, die ohne .wp-block-navigation greifen würde. */
.header-menu--ham-left.site-header .header-inner:has(> .wprbn-menu-slot) > .site-branding {
  grid-column: 2 !important;
  justify-self: start !important;
}
.header-menu--ham-left.site-header .header-inner:has(> .wprbn-menu-slot) > .header-actions {
  grid-column: 3 !important;
  justify-self: end !important;
}

/* Logo-Ausrichtung – ebenfalls aus main.css gespiegelt, dort greifen die Regeln
   auf die alte Klasse .site-nav. Ohne diese Entsprechungen kollabiert bei
   „Logo zentriert" die erste Grid-Spalte auf 0 und das Menü läuft quer über
   das Logo. */

/* Zentriert: Logo in Zeile 1 über alle Spalten, Menü in Zeile 2 darunter. */
.logo-align--center.site-header .header-inner > .wprbn-menu-slot,
.logo-align--center.site-header .wp-block-group.header-inner > .wprbn-menu-slot {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  justify-self: center !important;
}

/* Rechts: Menü links, Aktionen mittig, Logo rechts. */
.logo-align--right.site-header .header-inner > .wprbn-menu-slot,
.logo-align--right.site-header .wp-block-group.header-inner > .wprbn-menu-slot {
  grid-column: 1 !important;
  justify-self: start !important;
}

/* ── Ebene 1 ─────────────────────────────────────────────────────────────── */

.wprbn-menu {
  min-width: 0;
}

.wprbn-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wprbn-menu--header > .wprbn-menu__list {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Viele Punkte mit langen Labels (Vereinsseite) brechen um statt zu überlaufen */
  flex-wrap: wrap;
  row-gap: 0.35rem;
  column-gap: var(--wprbn-menu-l1-gap);
  max-width: 100%;
}

.wprbn-menu__item {
  position: relative;
  margin: 0;
}

.wprbn-menu__link {
  display: inline-block;
  text-decoration: none;
  color: inherit;
  transition: color var(--wprbn-menu-transition);
}

.wprbn-menu--header > .wprbn-menu__list > .wprbn-menu__item > .wprbn-menu__link {
  font-family: var(--wprbn-menu-l1-family);
  font-size: var(--wprbn-menu-l1-size);
  font-weight: var(--wprbn-menu-l1-weight);
  letter-spacing: var(--wprbn-menu-l1-tracking);
  text-transform: var(--wprbn-menu-l1-transform);
  color: var(--wprbn-menu-l1-color);
  padding-block: 4px;
}

.wprbn-menu--header > .wprbn-menu__list > .wprbn-menu__item > .wprbn-menu__link:hover,
.wprbn-menu--header > .wprbn-menu__list > .wprbn-menu__item > .wprbn-menu__link:focus-visible {
  color: var(--wprbn-menu-l1-hover);
}

/* Aufklapp-Pfeil in der Farbe der Beschriftung.
   Nötig, weil der Pfeil nicht im Link sitzt, sondern in einem <button>
   daneben – beide sind Geschwister im selben <li>. Der Button erbt deshalb
   die Textfarbe des Headers, nicht die Menüfarbe: Auf gefärbten Leisten
   stand ein weißer Pfeil neben blauer Schrift. Der Pfeil selbst zeichnet
   mit currentColor, es genügt also, hier die richtige Farbe zu setzen.
   Der Hover zieht mit, sonst bliebe der Pfeil beim Überfahren stehen. */
.wprbn-menu--header > .wprbn-menu__list > .wprbn-menu__item > .wprbn-menu__toggle {
  color: var(--wprbn-menu-l1-color);
}
.wprbn-menu--header > .wprbn-menu__list > .wprbn-menu__item:hover > .wprbn-menu__toggle,
.wprbn-menu--header > .wprbn-menu__list > .wprbn-menu__item:focus-within > .wprbn-menu__toggle {
  color: var(--wprbn-menu-l1-hover);
}

/* Aktive Kennzeichnung: feiner Balken, passt zu 0.5px-Trennlinien-Sprache */
.wprbn-menu--header > .wprbn-menu__list > .wprbn-menu__item.is-current > .wprbn-menu__link,
.wprbn-menu--header > .wprbn-menu__list > .wprbn-menu__item.is-ancestor > .wprbn-menu__link {
  box-shadow: inset 0 -1px 0 0 currentColor;
}

/* ── Strukturpunkte (kein Link) ─────────────────────────────────────────────
   Sehen aus wie die übrigen Punkte, sind aber kein <a>. Mit Untermenü lassen
   sie sich anklicken, um es zu öffnen; ohne Untermenü sind sie reine
   Beschriftung. */
.wprbn-menu__link--static {
  cursor: default;
}
.wprbn-menu__item.has-children > .wprbn-menu__link--static {
  cursor: pointer;
}
/* Ohne Ziel gibt es auch keine Aktiv-Kennzeichnung zu erben */
.wprbn-menu__item.is-static.is-ancestor > .wprbn-menu__link--static {
  box-shadow: none;
}

/* ── Aufklapp-Schalter ───────────────────────────────────────────────────── */

.wprbn-menu__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0 0 0 0.35rem;
  color: inherit;
  cursor: pointer;
  line-height: 1;
}

.wprbn-menu__chevron {
  display: block;
  width: 0.55em;
  height: 0.55em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-0.1em, -0.1em);
  transition: transform var(--wprbn-menu-transition);
}

.wprbn-menu__item.is-open > .wprbn-menu__toggle .wprbn-menu__chevron {
  transform: rotate(-135deg) translate(-0.1em, -0.1em);
}

/* ── Untermenü-Panel (Ebene 2 und 3) ─────────────────────────────────────── */

.wprbn-menu--header .wprbn-menu__submenu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  min-width: var(--wprbn-menu-panel-min);
  max-width: var(--wprbn-menu-panel-max);
  width: max-content;
  padding: var(--wprbn-menu-panel-pad);
  background: var(--wprbn-menu-panel-bg);
  border: var(--wprbn-menu-panel-bw) solid var(--wprbn-menu-panel-border);
  border-radius: var(--wprbn-menu-panel-radius);
  box-shadow: var(--wprbn-menu-panel-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--wprbn-menu-panel-shift));
  transition: opacity var(--wprbn-menu-transition),
              transform var(--wprbn-menu-transition),
              visibility var(--wprbn-menu-transition);
}

/* Öffnen per Hover – abschaltbar über die Body-Klasse (Einstellung „per Klick").
   Tastatur-Fokus öffnet immer, sonst wäre das Menü nicht bedienbar. */
body:not(.menu-l2-click) .wprbn-menu--header .wprbn-menu__item:hover > .wprbn-menu__submenu,
.wprbn-menu--header .wprbn-menu__item:focus-within > .wprbn-menu__submenu,
.wprbn-menu--header .wprbn-menu__item.is-open > .wprbn-menu__submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Trennlinien zwischen den Einträgen (0 = aus) */
.wprbn-menu__submenu > .wprbn-menu__item + .wprbn-menu__item {
  border-top: var(--wprbn-menu-l2-divider) solid var(--wprbn-menu-l2-divider-color);
}

/* Ebene 3: seitliches Flyout statt weiterer Aufklapp-Ebene */
.wprbn-menu--header .wprbn-menu__submenu .wprbn-menu__submenu {
  top: -0.5rem;
  left: 100%;
  transform: translateX(var(--wprbn-menu-panel-shift));
}
body:not(.menu-l2-click) .wprbn-menu--header .wprbn-menu__submenu .wprbn-menu__item:hover > .wprbn-menu__submenu,
.wprbn-menu--header .wprbn-menu__submenu .wprbn-menu__item:focus-within > .wprbn-menu__submenu,
.wprbn-menu--header .wprbn-menu__submenu .wprbn-menu__item.is-open > .wprbn-menu__submenu {
  transform: translateX(0);
}

/* Ebene 3 alternativ eingerückt im selben Panel statt als Flyout.
   Vorteil bei schmalen Panels und am rechten Bildschirmrand. */
body.menu-l3-indent .wprbn-menu--header .wprbn-menu__submenu .wprbn-menu__submenu {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  min-width: 0;
  max-width: none;
  width: auto;
  padding: 0 0 0 1rem;
  border: 0;
  box-shadow: none;
  background: none;
}
body.menu-l3-indent .wprbn-menu--header .wprbn-menu__submenu .wprbn-menu__item.has-children > .wprbn-menu__toggle {
  display: none;
}

/* Panel am rechten Rand: nach innen ausrichten statt aus dem Bild laufen */
.wprbn-menu--header > .wprbn-menu__list > .wprbn-menu__item:last-child > .wprbn-menu__submenu {
  left: auto;
  right: 0;
}

/* Automatik: viele Kinder → mehrspaltig (Klasse setzt PHP) */
.wprbn-menu__submenu.is-cols-2,
.wprbn-menu__submenu.is-cols-3 {
  max-width: min(92vw, 900px);
}
.wprbn-menu--header .wprbn-menu__submenu.is-cols-2 { columns: 2; column-gap: 1rem; }
.wprbn-menu--header .wprbn-menu__submenu.is-cols-3 { columns: 3; column-gap: 1rem; }
.wprbn-menu--header .wprbn-menu__submenu.is-cols-2 > .wprbn-menu__item,
.wprbn-menu--header .wprbn-menu__submenu.is-cols-3 > .wprbn-menu__item {
  break-inside: avoid;
}

/* Einträge im Panel */
.wprbn-menu__submenu .wprbn-menu__link {
  display: block;
  padding: var(--wprbn-menu-l2-pad-y) var(--wprbn-menu-l2-pad-x);
  font-family: var(--wprbn-menu-l2-family, inherit);
  font-size: var(--wprbn-menu-l2-size);
  font-weight: var(--wprbn-menu-l2-weight);
  letter-spacing: var(--wprbn-menu-l2-tracking);
  text-transform: var(--wprbn-menu-l2-transform);
  color: var(--wprbn-menu-l2-color);
  transition: background var(--wprbn-menu-transition), color var(--wprbn-menu-transition);
}

.wprbn-menu__submenu .wprbn-menu__link:hover,
.wprbn-menu__submenu .wprbn-menu__link:focus-visible {
  background: var(--wprbn-menu-l2-hover-bg);
  color: var(--wprbn-menu-l2-hover);
}

.wprbn-menu__submenu .wprbn-menu__item.is-current > .wprbn-menu__link {
  background: var(--wprbn-menu-l2-hover-bg);
}

/* ── Karten im Untermenü ────────────────────────────────────────────────────
   Die Farbe kommt pro Menüpunkt als Inline-Variable. Punkte ohne eigene
   Farbe bleiben schlicht – kein Stil setzt eine Karte voraus. */
.wprbn-menu__submenu > .wprbn-menu__item.has-card {
  background: var(--wprbn-menu-card-bg);
  border-radius: var(--wprbn-menu-card-radius, 8px);
  overflow: hidden;
}

/* Die Kartenfarbe gilt in BEIDEN Modi unverändert – sie ist bewusst gewählt.
   Mitziehen muss nur die Schrift: Der Renderer berechnet aus der Kartenfarbe
   eine lesbare Textfarbe und gibt sie daneben aus. Ohne diese Kopplung erbt
   eine helle Karte im Dunkel-Modus die helle Panel-Schrift. */
.wprbn-menu__submenu > .wprbn-menu__item.has-card > .wprbn-menu__link {
  color: var(--wprbn-menu-card-text, inherit);
}
.wprbn-menu__submenu > .wprbn-menu__item.has-card .wprbn-menu__label,
.wprbn-menu__submenu > .wprbn-menu__item.has-card .wprbn-menu__desc {
  color: inherit;
}

/* Abstand zwischen den Karten – nur dort, wo es wirklich Karten gibt */
.wprbn-menu__submenu:has(> .wprbn-menu__item.has-card) {
  display: flex;
  flex-direction: column;
  gap: var(--wprbn-menu-card-gap, 6px);
}

/* Mehrspaltig plus Karten: Spalten-Layout kann keine Flex-Lücken, deshalb
   bekommt jede Karte hier ihren Abstand selbst. */
.wprbn-menu--header .wprbn-menu__submenu.is-cols-2:has(> .has-card),
.wprbn-menu--header .wprbn-menu__submenu.is-cols-3:has(> .has-card) {
  display: block;
}
.wprbn-menu--header .wprbn-menu__submenu.is-cols-2 > .wprbn-menu__item.has-card,
.wprbn-menu--header .wprbn-menu__submenu.is-cols-3 > .wprbn-menu__item.has-card {
  margin-bottom: var(--wprbn-menu-card-gap, 6px);
}

/* Bei Karten trägt der Eintrag die Trennlinie nicht mehr – die Karte trennt */
.wprbn-menu__submenu > .wprbn-menu__item.has-card + .wprbn-menu__item.has-card {
  border-top: 0;
}

/* Auf einer Karte bleibt die Fläche unangetastet: Ein Hover-Hintergrund würde
   die eigens gewählte Kartenfarbe überdecken. Reagieren darf nur die Schrift. */
.wprbn-menu__submenu > .wprbn-menu__item.has-card > .wprbn-menu__link:hover,
.wprbn-menu__submenu > .wprbn-menu__item.has-card > .wprbn-menu__link:focus-visible,
.wprbn-menu__submenu > .wprbn-menu__item.has-card.is-current > .wprbn-menu__link {
  background: transparent;
}
/* Auf der Karte reagiert nur die Beschriftung – und zwar über die Deckkraft,
   nicht über eine feste Farbe: Die eingestellte Hover-Farbe ist auf das Panel
   abgestimmt und wäre auf einer andersfarbigen Karte womöglich unsichtbar. */
.wprbn-menu__submenu > .wprbn-menu__item.has-card > .wprbn-menu__link:hover .wprbn-menu__label,
.wprbn-menu__submenu > .wprbn-menu__item.has-card > .wprbn-menu__link:focus-visible .wprbn-menu__label {
  opacity: var(--wprbn-menu-card-hover-opacity, 0.7);
}
.wprbn-menu__submenu > .wprbn-menu__item.has-card .wprbn-menu__label {
  transition: opacity var(--wprbn-menu-transition);
}

/* ── Beschreibung („Slogan") ────────────────────────────────────────────── */
.wprbn-menu__text {
  display: block;
  min-width: 0;
}

.wprbn-menu__desc {
  display: block;
  margin-top: 0.15em;
  font-size: var(--wprbn-menu-desc-size, 0.78rem);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  /* Aus der Textfarbe abgeleitet statt aus --text-muted: Der Muted-Ton ist im
     Dunkel-Modus zu dunkel für lesbaren Fließtext auf dem Panel. */
  color: var(--wprbn-menu-desc-color, currentColor);
  opacity: var(--wprbn-menu-desc-opacity, 0.72);
}

/* Mit Bild: Bild links, Titel und Slogan rechts daneben */
.wprbn-menu__link.has-media.has-desc {
  align-items: flex-start;
}

/* ── Bild/Icon je Menüpunkt ─────────────────────────────────────────────────
   Nur vorhanden, wenn eines gepflegt ist – Einträge ohne Bild bleiben
   unverändert und rutschen nicht ein. */
.wprbn-menu__link.has-media {
  display: flex;
  align-items: center;
  gap: var(--wprbn-menu-media-gap, 0.7rem);
}

.wprbn-menu__media {
  flex: 0 0 auto;
  display: block;
  width: var(--wprbn-menu-media-size, 32px);
  height: var(--wprbn-menu-media-size, 32px);
  overflow: hidden;
}

.wprbn-menu__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Harte Kanten wie bei den Foto-Tiles */
  border-radius: var(--wprbn-menu-media-radius, 0);
}

/* Im Overlay etwas größer, dort ist mehr Platz */
.wprbn-menu--overlay .wprbn-menu__media {
  width: var(--wprbn-menu-media-size-overlay, 40px);
  height: var(--wprbn-menu-media-size-overlay, 40px);
}

/* Schalter im Panel rechtsbündig neben dem Label */
.wprbn-menu--header .wprbn-menu__submenu .wprbn-menu__item.has-children {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wprbn-menu--header .wprbn-menu__submenu .wprbn-menu__item.has-children > .wprbn-menu__link {
  flex: 1;
}
.wprbn-menu--header .wprbn-menu__submenu .wprbn-menu__toggle {
  padding-inline: 0.5rem;
}
/* Dritte Ebene: Pfeil in der Farbe der Untermenü-Einträge. Bei Karten trägt
   der Eintrag eine eigene Textfarbe – die gewinnt, damit der Pfeil auf der
   farbigen Fläche lesbar bleibt. */
.wprbn-menu__submenu .wprbn-menu__toggle {
  color: var(--wprbn-menu-card-text, var(--wprbn-menu-l2-color));
}
.wprbn-menu__submenu .wprbn-menu__item:hover > .wprbn-menu__toggle,
.wprbn-menu__submenu .wprbn-menu__item:focus-within > .wprbn-menu__toggle {
  color: var(--wprbn-menu-card-text, var(--wprbn-menu-l2-hover));
}
.wprbn-menu--header .wprbn-menu__submenu .wprbn-menu__item.has-children > .wprbn-menu__toggle .wprbn-menu__chevron {
  transform: rotate(-45deg);
}

/* ── Menü-Button ─────────────────────────────────────────────────────────── */

.wprbn-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  /* Touch-Ziel nie unter 44px */
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  cursor: pointer;
}

/* Hamburger-Anzeige: Button auf allen Breiten sichtbar */
.header-menu--ham-right.site-header .wprbn-menu-toggle,
.header-menu--ham-left.site-header .wprbn-menu-toggle {
  display: inline-flex;
}

/* ── Overlay ─────────────────────────────────────────────────────────────── */

/* Der Selektor mit .wp-site-blocks ist Absicht, kein Zufall: Das Overlay ist
   ein direktes Kind von .wp-site-blocks, und WordPress vergibt dort den
   Block-Abstand an alle Top-Level-Kinder. Diese Regel steht außerhalb jedes
   Layers und schlägt deshalb menu.css. Folge war ein Rand von oben ~16px:
   Das Overlay rutschte nach unten und wurde entsprechend kürzer, oben blieb
   ein Streifen, durch den die Seite schaute. Zwei Klassen genügen, um die
   WordPress-Regel zu überstimmen – kein !important nötig. */
.wp-site-blocks > .wprbn-menu-overlay,
.wprbn-menu-overlay {
  margin: 0;
}

.wprbn-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  /* Oben ausgerichtet statt zentriert: Beim Aufklappen von Untermenüs wächst
     der Block stark – zentriert würde das gesamte Menü bei jedem Klick
     springen. Waagerecht bleibt es mittig. */
  place-items: start center;
  background: var(--wprbn-nav-overlay-bg, var(--bg-primary));
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s;
}

.wprbn-menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.wprbn-menu-overlay--anim-slide_up {
  transform: translateY(4rem);
  transition: opacity 0.35s ease, visibility 0.35s, transform 0.35s ease;
}
.wprbn-menu-overlay--anim-slide_up.is-open {
  transform: translateY(0);
}

/* Aufbau nach der Vorlage: Marke oben, Liste darunter, Fußleiste am unteren
   Rand. Der Inhalt ist eine Spalte über die volle Höhe – so klebt die
   Fußleiste unten, auch wenn das Menü kurz ist, und schiebt sich bei langen
   Menüs mit nach unten (dann scrollt der Block). */
.wprbn-menu-overlay__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 640px;
  min-height: 100dvh;
  max-height: 100dvh;
  overflow-y: auto;
  padding: 0;
  text-align: center;
}

/* Der obere Abstand richtet sich nach der Kopfleiste, nicht mehr nach der
   Header-Höhe: Sonst schöbe eine große Logohöhe die Leiste über die
   Menüpunkte. Ohne Marke fällt die Leiste weg, dann trägt der Fallback. */
.wprbn-menu-overlay__main {
  flex: 1 0 auto;
  padding: calc(var(--header-height, 70px) + var(--space-md, 1.5rem)) var(--space-md, 1.5rem) var(--space-lg, 2rem);
}

.wprbn-menu-overlay:has(.wprbn-menu-overlay__brand) .wprbn-menu-overlay__main {
  padding-top: calc(var(--wprbn-menu-overlay-bar-h) + var(--space-md, 1.5rem));
}

/* ── Marke oben ───────────────────────────────────────────────────────────
   Zwei getrennte Varianten, weil das Overlay zwei verschiedene Rollen hat:

   HIER: Desktop – das Overlay erscheint nur, wenn jemand bewusst einen
   Hamburger eingestellt hat. Die Marke steht dann bündig links über den
   Menüpunkten, zurückhaltend in der Größe; auf breiten Schirmen wirkt ein
   mittiges Riesenlogo verloren.

   MOBIL: siehe wprbn_menu_css_mobile() in inc/menu/menu-css.php – dort steht
   die Marke mittig und größer. Der Umschaltpunkt ist eine Option, deshalb
   muss dieser Teil serverseitig entstehen. Wer hier etwas ändert, prüft
   bitte auch dort. */
/* Kopfleiste hinter dem Logo – gleiche Farbe wie der Seiten-Header.
   Bewusst als Pseudo-Element und nicht als Hintergrund der Marke selbst:
   Die Marke ist ein Link zur Startseite. Zöge man sie auf volle Breite,
   führte jeder Klick in die Leiste – auch neben dem Schließen-Knopf – zur
   Startseite. Die Leiste erscheint nur, wenn es eine Marke gibt. */
.wprbn-menu-overlay:has(.wprbn-menu-overlay__brand)::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--wprbn-menu-overlay-bar-h);
  /* Farbe UND Bild wie die Header-Leiste: Die Kopfleiste liegt beim Öffnen
     genau über dem Header. Bliebe sie einfarbig, tauschte das Aufklappen das
     Muster gegen eine flache Fläche. Gleiche Werte wie in main.css
     (cover / top center), damit derselbe Bildausschnitt stehen bleibt.
     Kein `background`-Kurzschreibweise – die setzte das Bild wieder zurück. */
  background-color: var(--header-bg-color, var(--bg-secondary));
  background-image: var(--header-bg-image, none);
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}

.wprbn-menu-overlay__brand {
  position: fixed;
  top: calc(var(--wprbn-menu-overlay-bar-pad) + env(safe-area-inset-top, 0px));
  left: max(var(--space-md, 1.5rem), env(safe-area-inset-left, 0px));
  z-index: 1;
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--text-primary);
}

/* Schließen-Knopf auf die Mittellinie des Logos, nicht auf den oberen Rand:
   Beide sitzen dadurch mittig in der Leiste, unabhängig von der Logohöhe.
   Nur in diesem Fall liegt der Knopf auf der Kopfleiste, trägt also deren
   Hintergrund (Header-Farbe bzw. -Bild) – und nimmt deshalb die Header-Text-
   farbe an, wie Menü-Links und Titel auf der Leiste auch. Ohne Marke gibt es
   keine Leiste; dort sitzt der Knopf auf dem Overlay-Hintergrund und behält
   die normale Textfarbe aus der Basisregel weiter unten.
   Der Rand folgt der Schriftfarbe (halbtransparent), damit er auf einem
   gemusterten Hintergrund nicht verschwindet; Gleiches beim Überfahren. */
.wprbn-menu-overlay:has(.wprbn-menu-overlay__brand) .wprbn-menu-overlay__close {
  top: calc(var(--wprbn-menu-overlay-bar-pad) + env(safe-area-inset-top, 0px) +
            (var(--wprbn-menu-overlay-logo-h) - 44px) / 2);
  color: var(--header-text-color, var(--text-primary));
  border-color: color-mix(in srgb, currentColor 45%, transparent);
}
.wprbn-menu-overlay:has(.wprbn-menu-overlay__brand) .wprbn-menu-overlay__close:hover {
  background: color-mix(in srgb, currentColor 14%, transparent);
}

.wprbn-menu-overlay__logo {
  display: block;
  width: auto;
  max-height: var(--wprbn-menu-overlay-logo-h, 40px);
  max-width: min(40vw, 320px);
  object-fit: contain;
  object-position: left center;
}

.wprbn-menu-overlay__sitename {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  letter-spacing: 0.02em;
}

/* ── Fußleiste unten ──────────────────────────────────────────────────────── */
.wprbn-menu-overlay__footer {
  flex: 0 0 auto;
  margin-top: auto;
  padding: var(--space-md, 1.5rem) var(--space-md, 1.5rem)
           calc(var(--space-md, 1.5rem) + env(safe-area-inset-bottom, 0px));
  /* Leicht abgesetzt statt hart getrennt – wie in der Vorlage */
  background: var(--wprbn-menu-overlay-footer-bg, rgb(255 255 255 / 6%));
}

.wprbn-menu-overlay__footer .wprbn-menu__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem var(--space-md, 1.5rem);
}

.wprbn-menu-overlay__footer .wprbn-menu__link {
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  opacity: 0.85;
}

.wprbn-menu-overlay__footer .wprbn-menu__link:hover,
.wprbn-menu-overlay__footer .wprbn-menu__link:focus-visible {
  opacity: 1;
}

.wprbn-menu-overlay--align-left .wprbn-menu-overlay__inner {
  text-align: left;
}

/* Am Bildschirm verankert, nicht am Inhaltsblock: Der Block wird positioniert
   und beginnt nicht zwingend oben – ein darin absolut gesetzter Knopf schwebte
   sonst mitten im Bild. `fixed` bezieht sich auf den Viewport, das Overlay
   selbst liegt ohnehin dort. `env()` hält den Knopf unter der Notch. */
.wprbn-menu-overlay__close {
  position: fixed;
  top: max(var(--space-md, 1.5rem), env(safe-area-inset-top, 0px));
  right: max(var(--space-md, 1.5rem), env(safe-area-inset-right, 0px));
  z-index: 1;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  color: var(--text-primary);
  border: 0.5px solid var(--border-strong);
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--wprbn-menu-transition);
}
.wprbn-menu-overlay__close:hover {
  background: var(--bg-secondary);
}

/* Ebene 1 im Overlay: große Serifen-Typografie */
.wprbn-menu--overlay > .wprbn-menu__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm, 0.75rem);
}

/* Aktive Seite unterstrichen – in der Vorlage die Kennzeichnung im Overlay.
   Der Balken aus der Kopfzeile wirkt hier bei großer Schrift zu schwer. */
.wprbn-menu--overlay > .wprbn-menu__list > .wprbn-menu__item.is-current > .wprbn-menu__link,
.wprbn-menu--overlay > .wprbn-menu__list > .wprbn-menu__item.is-ancestor > .wprbn-menu__link {
  color: var(--wprbn-menu-ov-active);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 2px;
}

/* Das Overlay folgt derselben Typografie wie die Kopfzeile – Menü-Tab,
   Gruppe ▌Erste Ebene. Vorher stand hier eine eigene, fest verdrahtete
   Optik; die Schriftart aus dem Dashboard erreichte das mobile Menü nie.
   Rollengetrieben, deshalb bewusst ohne @media (siehe CLAUDE.md). */
.wprbn-menu--overlay > .wprbn-menu__list > .wprbn-menu__item > .wprbn-menu__link {
  font-family: var(--wprbn-menu-ov-family);
  /* Der Faktor kommt aus der Mobil-Einstellung „Schriftgröße skalieren" */
  font-size: calc(var(--wprbn-menu-ov-size) * var(--wprbn-menu-mob-scale, 1));
  font-weight: var(--wprbn-menu-ov-weight);
  letter-spacing: var(--wprbn-menu-ov-tracking);
  text-transform: var(--wprbn-menu-ov-transform);
  line-height: 1.2;
  /* Die Kopfzeilen-Größe ist für eine Zeile gedacht, nicht für Fingerziele.
     Der Innenabstand hält die Zeilen auch bei kleiner Schrift bedienbar. */
  padding-block: 0.55rem;
  color: var(--wprbn-menu-ov-color);
}

.wprbn-menu--overlay > .wprbn-menu__list > .wprbn-menu__item > .wprbn-menu__link:hover,
.wprbn-menu--overlay > .wprbn-menu__list > .wprbn-menu__item > .wprbn-menu__link:focus-visible {
  color: var(--wprbn-menu-ov-hover);
}

/* Chevron gehört ans Wort, nicht an den Bildschirmrand. Mit `1fr auto` stand
   das Label mittig in einer breiten Spalte und der Pfeil klebte ganz rechts –
   auf 375px lagen rund 150px dazwischen. `auto auto` macht aus beiden ein
   Paar, das gemeinsam ausgerichtet wird. */
.wprbn-menu--overlay .wprbn-menu__item.has-children {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
}

/* Linksbündig: Wort links, Pfeil am rechten Rand – auf jeder Breite, ohne
   Media Query. Die erste Spalte nimmt mit `1fr` allen freien Platz, der
   Pfeil bleibt inhaltsbreit.
   Bewusst NUR hier: Bei zentrierter Ausrichtung stünden die Wörter mittig
   und die Pfeile ganz außen – dazwischen läge dann eine feste große Lücke.
   Deshalb behält die Grundregel oben `auto auto`. */
.wprbn-menu-overlay--align-left .wprbn-menu__item.has-children {
  grid-template-columns: 1fr auto;
  justify-content: start;
}

/* Einheitlicher Zeilenrhythmus: Ohne diese Mindesthöhe waren Zeilen ohne
   Untermenü 34px hoch, mit Untermenü 44px – die Abstände wechselten sichtbar
   zwischen 45 und 56px. 44px ist zugleich das empfohlene Touch-Ziel. */
.wprbn-menu--overlay > .wprbn-menu__list > .wprbn-menu__item {
  min-height: 44px;
  align-content: center;
}
.wprbn-menu--overlay .wprbn-menu__submenu {
  grid-column: 1 / -1;
}

/* Overlay: Untermenüs sind Accordion, kein Panel – Aufklappen per Schalter.

   Bewusst NICHT die 0fr→1fr-Grid-Technik: Die setzt ein einzelnes
   Wrapper-Element voraus. Hier sind die Kinder die <li> selbst – dann
   definiert grid-template-rows nur die ERSTE Zeile, der erste Eintrag wird
   auf Höhe 0 gequetscht und überlappt den zweiten, während alle weiteren in
   impliziten auto-Zeichen stehen bleiben und sichtbar sind. Zugeklappt war
   also gar nicht zu. */
.wprbn-menu--overlay .wprbn-menu__submenu {
  display: block;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  visibility: hidden;
  transition: max-height 0.3s ease, opacity 0.25s ease, visibility 0.3s;
  padding-inline-start: 1rem;
}
.wprbn-menu--overlay .wprbn-menu__item.is-open > .wprbn-menu__submenu {
  /* Großzügig bemessen: deckt auch lange Untermenüs ab, ohne dass die
     Animation bei kurzen sichtbar „nachläuft". */
  max-height: 200vh;
  opacity: 1;
  visibility: visible;
}
/* Größe der zweiten Ebene kommt aus ▌Untermenüs und wird vom selben Faktor
   erfasst wie die erste. Vorher stand hier 1rem fest – ein hochgedrehter
   Faktor ließ die Hauptpunkte wachsen, die Unterpunkte aber stehen. */
.wprbn-menu--overlay .wprbn-menu__submenu .wprbn-menu__link {
  font-size: calc(var(--wprbn-menu-ov2-size) * var(--wprbn-menu-mob-scale, 1));
  padding-block: 0.6rem;
  color: var(--wprbn-menu-ov2-color);
}

/* Trefferfläche von der Breite entkoppeln.
   Vorher trug der Schalter selbst `min-width: 44px`. Der Pfeil ist aber nur
   0.55em breit und stand mittig darin – die übrigen ~36px lagen als
   unsichtbarer Rand zwischen Wort und Pfeil. Jetzt ist der Schalter so
   breit wie sein Inhalt, und ein Pseudo-Element spannt die 44×44px
   Trefferfläche mittig darüber auf. Optisch dicht am Wort, für den Finger
   unverändert groß. */
/* Farbe wie in der Kopfzeile: der Pfeil folgt der Beschriftung, nicht der
   geerbten Textfarbe. Siehe die ausführliche Begründung bei
   .wprbn-menu--header … > .wprbn-menu__toggle weiter oben. */
.wprbn-menu--overlay > .wprbn-menu__list > .wprbn-menu__item > .wprbn-menu__toggle {
  color: var(--wprbn-menu-ov-color);
}
.wprbn-menu--overlay > .wprbn-menu__list > .wprbn-menu__item:hover > .wprbn-menu__toggle,
.wprbn-menu--overlay > .wprbn-menu__list > .wprbn-menu__item:focus-within > .wprbn-menu__toggle {
  color: var(--wprbn-menu-ov-hover);
}

/* Untermenü im Overlay: eigene Ebene-2-Farbe, nicht die der Kopfzeile. */
.wprbn-menu--overlay .wprbn-menu__submenu .wprbn-menu__toggle {
  color: var(--wprbn-menu-card-text, var(--wprbn-menu-ov2-color));
}

.wprbn-menu--overlay .wprbn-menu__toggle {
  position: relative;
  min-width: 0;
  min-height: 0;
  padding-inline-start: 0.4rem;
  font-size: 1.25rem;
}

.wprbn-menu--overlay .wprbn-menu__toggle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

/* ── Mobil ─────────────────────────────────────────────────────────────────
   Der Umschaltpunkt ist eine Dashboard-Option. Media Queries können keine
   CSS-Variablen auswerten, deshalb wird der @media-Block serverseitig in
   inc/menu/menu-css.php erzeugt – hier steht bewusst kein fester Wert.

   Hier standen bis zur Musterbereinigung vier weitere Darstellungen
   (Schublade links/rechts, Panel unter dem Header, Blatt von unten). Sie sind
   entfallen, weil das Overlay als Vollbild-Konzept gebaut ist: Kopfleiste und
   Fußleiste sind am Bildschirm verankert und hatten in einer 320px breiten
   Schublade keinen Bezugsrahmen – die Leiste ragte über die Schublade hinaus,
   der Schließen-Knopf lag außerhalb. Zusätzlich setzte `min-height: 100dvh`
   auf `__inner` die Höhenbegrenzung von Panel und Blatt außer Kraft, sodass
   beide ohnehin wie das Vollbild aussahen. Wer sie zurückholen will, muss
   zuerst diese vier Bausteine von `fixed` auf `absolute` umstellen. */

/* Bilder im Menü mobil ausblenden (Option) */
body.menu-mob-no-images .wprbn-menu__media {
  display: none;
}
body.menu-mob-no-images .wprbn-menu__link.has-media {
  display: block;
}

/* ── Drill-down (Option) ────────────────────────────────────────────────────
   Ebene 2 klappt nicht auf, sondern schiebt sich als eigene Fläche von rechts
   herein und ersetzt die Liste. Bei tiefen Menüs zeigt der Bildschirm so immer
   nur eine Ebene, statt zwanzig Einträge untereinander. */
body.menu-mob-l2-drill .wprbn-menu--overlay .wprbn-menu__submenu {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: block;
  max-height: none;
  opacity: 1;
  visibility: hidden;
  overflow-y: auto;
  padding: calc(var(--space-md, 1.5rem) + env(safe-area-inset-top, 0px))
           var(--space-md, 1.5rem)
           calc(var(--space-xl, 3rem) + env(safe-area-inset-bottom, 0px));
  background: var(--wprbn-nav-overlay-bg, var(--bg-primary));
  transform: translateX(100%);
  transition: transform 0.3s ease, visibility 0.3s;
}

body.menu-mob-l2-drill .wprbn-menu--overlay .wprbn-menu__item.is-open > .wprbn-menu__submenu {
  transform: translateX(0);
  visibility: visible;
}

/* Der Pfeil kündigt einen Wechsel an, kein Aufklappen – also nach rechts. */
body.menu-mob-l2-drill .wprbn-menu--overlay .wprbn-menu__chevron {
  transform: rotate(-45deg);
}
body.menu-mob-l2-drill .wprbn-menu--overlay .wprbn-menu__item.is-open > .wprbn-menu__toggle .wprbn-menu__chevron {
  transform: rotate(-45deg);
}

/* Zurück-Zeile über die volle Breite, wie in der Vorlage */
.wprbn-menu__item--back .wprbn-menu__back {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 56px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--text-primary);
  font: inherit;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  opacity: 0.85;
}
.wprbn-menu__item--back .wprbn-menu__back:hover,
.wprbn-menu__item--back .wprbn-menu__back:focus-visible {
  opacity: 1;
}

.wprbn-menu__back-icon {
  width: 0.5em;
  height: 0.5em;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

/* Der wiederholte Elternpunkt wird als Übersicht gelesen – etwas kräftiger */
.wprbn-menu__item--parent > .wprbn-menu__link {
  font-weight: 600;
}

/* Außerhalb des Drill-downs haben beide Zeilen keine Funktion */
body:not(.menu-mob-l2-drill) .wprbn-menu__item--back,
body:not(.menu-mob-l2-drill) .wprbn-menu__item--parent {
  display: none;
}

/* Untermenüs im Overlay dauerhaft offen statt als Accordion (Option) */
body.menu-mob-l2-open .wprbn-menu--overlay .wprbn-menu__submenu {
  max-height: none;
  opacity: 1;
  visibility: visible;
}
body.menu-mob-l2-open .wprbn-menu--overlay .wprbn-menu__toggle {
  display: none;
}


/* ── Sichtbarer Tastatur-Fokus ──────────────────────────────────────────────
   Ohne eigene Regel schluckt der Header-Hintergrund den Browser-Standardring.
   :focus-visible trifft nur die Tastaturbedienung, Mausklicks bleiben ruhig. */
.wprbn-menu__link:focus-visible,
.wprbn-menu__toggle:focus-visible,
.wprbn-menu-toggle:focus-visible,
.wprbn-menu-overlay__close:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 1px;
}

@media (prefers-reduced-motion: reduce) {
  .wprbn-menu__submenu,
  .wprbn-menu__chevron,
  .wprbn-menu-overlay {
    transition: none !important;
  }
}