/**
* Fahrradshop24 – Blocksy-Mega-Menü (Desktop-CSS-Grundgerüst)
* ---------------------------------------------
* Betrifft ausschließlich die von der Menü-Bridge
* (template-parts/mega-menu-blocksy-bridge.php) synthetisch erzeugten
* Menüpunkte – erkennbar an der von WordPress selbst aus dem Item-
* Objektfeld "object" erzeugten Klasse ".menu-item-object-fs24-taxonomy-link".
* Jeder Selektor in dieser Datei enthält diese Klasse, damit garantiert
* kein anderes Menü und kein echter DB-Menüpunkt betroffen ist.
*
* Nur Desktop: Blocksys eigener, code-geprüfter Tablet-Breakpoint ist
* "max-width: 999.98px" (wp-content/themes/blocksy/inc/classes/
* class-ct-css-injector.php). "min-width: 1000px" ist dazu exakt
* komplementär – darunter bleibt Blocksys natives Mobile-/Tablet-
* Offcanvas vollständig unangetastet. Die Bridge fügt die
* Gruppen-Zwischenebene (siehe Abschnitt 2) ohnehin nur für den
* echten Desktop-Mega-Menü-Render ein (Argument "blocksy_mega_menu"),
* daher existieren die Klassen "fs24-mega-group"/"fs24-mega-col-N" im
* Mobile-Offcanvas-Markup gar nicht erst.
*
* Design-Referenz: design-reference/index-mockup.html (helles,
* großzügiges Mega-Panel, klare Spalten, ruhige Typografie) – nicht der
* heutige Ridez-/LIVE-Look.
*/
@media (min-width: 1000px) {
/* ==========================================================
1) Panel-Position und -Breite
Blocksy setzt auf dem auslösenden Top-Level- selbst
"position:relative" (Basisregel "[class*=animated-submenu]
[data-submenu] { position:relative }") – dadurch wird bislang
GENAU DIESES kleine (z. B. "E-Bikes", nur ca. 90px breit)
zum Containing Block für das absolut positionierte Panel
darunter. "left:50%; transform:translateX(-50%)" zentrierte
das Panel deshalb bisher relativ zur eigenen Trigger-Breite und
-Position statt zum Headerbereich – bei einem weit rechts
stehenden Trigger wie "Zubehör" lief das Panel dadurch nach
rechts aus dem sichtbaren Bereich.
Fix: "position:static" gezielt nur für unser eigenes Top-Level-
, wodurch das Panel als nächsten positionierten Vorfahren
automatisch den nächstgelegenen echten Blocksy-Header-Wrapper
nutzt (im geprüften DOM: ein volle Breite spannender
Header-Container, "position:relative", per Playwright/CDP
bestätigt – im Zweifel als Fallback weiter oben zusätzlich
"header.ct-header", ebenfalls "position:relative"). Dadurch
zentriert sich das Panel zuverlässig im Headerbereich statt am
kleinen Trigger. Innerhalb des Trigger- selbst gibt es
keine absolut positionierten Kind-Elemente (Pfeil-Icon ist
"position:relative", per Playwright/CDP geprüft) – die
Positions-Änderung hat daher keine Nebenwirkungen auf Blocksys
eigene Elemente. Sticky-/Scroll-Verhalten bleibt unberührt, da
ausschließlich "position" (nicht "sticky"/"fixed") verwendet
wird.
========================================================== */
.menu-container li.menu-item-object-fs24-taxonomy-link.animated-submenu-block {
position: static;
}
.menu-container li.menu-item-object-fs24-taxonomy-link.animated-submenu-block > .sub-menu {
left: 50%;
transform: translateX(-50%);
top: calc(100% + 14px);
/* Ungefähr die Breite des großen Seitencontainers (Blocksys
".ct-container", im geprüften DOM ca. 1290px bei 1440px
Viewport), mit Sicherheitsabstand zum Viewport-Rand knapp
oberhalb des 1000px-Breakpoints statt einer festen Breite. */
width: min(1290px, calc(100vw - 32px));
max-width: none;
/* Werte 1:1 aus design-reference/index-mockup.html übernommen
(".mega-menu", computed styles per Headless-Browser geprüft,
siehe blocksy-header-preview.css Dateikopf-Kommentar für die
Methode): weißes Panel, unten abgerundet (oben flach, da
direkt unter der Navigationszeile andockend), dezenter
Rahmen, großer weicher Schatten. */
background-color: #ffffff;
border: 1px solid rgba(17, 19, 21, 0.12);
border-radius: 0 0 24px 24px;
box-shadow: 0 35px 80px rgba(0, 0, 0, 0.25);
padding: 28px 30px 30px;
list-style: none;
margin: 0;
}
/* ==========================================================
1b) Schmale Hover-Brücke Trigger -> Panel
Der 14px-Abstand oben ("top: calc(100% + 14px)") lässt beim
Übergang von der Maus vom Trigger- zum Panel eine kurze
Lücke, die weder zum noch zum Panel gehört – die Maus
verlässt dort kurzzeitig echt den Hover-Bereich, Blocksys
eigenes JS (mouseleave -> closeSubmenu(), entfernt ".ct-active"
sofort synchron) schließt das Panel dadurch, bevor die Maus es
erreicht (per Playwright reproduziert: Bewegung vom Trigger
direkt ins Panel schloss es vorzeitig).
Ein erster Versuch mit einem "::before"-Pseudo-Element auf dem
Panel registrierte trotz korrekter computed-style-Geometrie
(top:-14px/height:14px, per getComputedStyle bestätigt) und
selbst mit "z-index:999999" keine Treffer in genau dieser Zone
(per Playwright/elementFromPoint reproduzierbar) – ein reales
DOM-Element ist für dieses Hit-Testing zuverlässiger. Die
eigentliche Brücke wird daher stattdessen als echtes, kleines
von assets/js/header-mega-menu.js in jedes Panel
eingefügt (dort ausführlich begründet); hier nur dessen Optik/
Position (unsichtbar, exakt auf die Lückenhöhe begrenzt).
========================================================== */
.menu-container li.menu-item-object-fs24-taxonomy-link.animated-submenu-block > .sub-menu .fs24-mega-bridge {
position: absolute;
top: -14px;
left: 0;
right: 0;
height: 14px;
}
/* ==========================================================
2) Eigene Gruppencontainer statt gemeinsamem Item-Grid
Frühere Fassung: alle Kategorie-Links einer Spalte lagen als
flache Geschwister-s direkt im selben CSS-Grid des Panels.
Auch mit "grid-auto-flow: row dense" blieb das strukturell
fehleranfällig, sobald eine Spalte hohe echte Taxonomie-Kinder
enthielt (z. B. E-MTB > Hardtail/Fully): diese s bildeten
weiterhin einzelne Grid-Zeilen, die von ALLEN Spalten geteilt
wurden – eine hohe Zeile in einer Spalte vergrößerte dadurch
zwangsläufig die Zeilenhöhe im ganzen Panel und zog dünnere
Nachbarspalten sichtbar auseinander.
Fix (siehe mega-menu-blocksy-bridge.php): Jede Mockup-Spalte
bekommt auf Desktop einen eigenen echten Zwischen-Menüpunkt
(Klasse "fs24-mega-group") als Elternteil ihrer Links. Dadurch
ist JEDE Spalte im Panel-Grid nur noch genau EIN Grid-Item
(der Gruppen-Container); die komplette interne Verteilung
(Überschrift, Links, eingerückte echte Unterkategorien) findet
als ganz normaler Block-Fluss INNERHALB dieses einen Grid-Items
statt und kann dadurch keine andere Spalte mehr beeinflussen.
"grid-auto-columns: minmax(0, 1fr)" statt einer festen
200px-Mindestbreite, damit auch ein 5-spaltiges Panel (Zubehör)
nicht über die in Abschnitt 1 gesetzte Panelbreite hinausläuft,
sondern die Spalten sich anteilig verkleinern.
========================================================== */
.menu-container li.menu-item-object-fs24-taxonomy-link.animated-submenu-block > .sub-menu {
display: grid;
grid-auto-flow: row;
grid-auto-columns: minmax(0, 1fr);
column-gap: 26px;
row-gap: 28px;
align-items: start;
}
.menu-container li.menu-item-object-fs24-taxonomy-link.fs24-mega-col-1 { grid-column: 1; }
.menu-container li.menu-item-object-fs24-taxonomy-link.fs24-mega-col-2 { grid-column: 2; }
.menu-container li.menu-item-object-fs24-taxonomy-link.fs24-mega-col-3 { grid-column: 3; }
.menu-container li.menu-item-object-fs24-taxonomy-link.fs24-mega-col-4 { grid-column: 4; }
.menu-container li.menu-item-object-fs24-taxonomy-link.fs24-mega-col-5 { grid-column: 5; }
.menu-container li.menu-item-object-fs24-taxonomy-link.fs24-mega-col-6 { grid-column: 6; }
/* ==========================================================
2a) Explizite Zeilen-Zuordnung ("fs24-mega-row-N")
Ergänzt "fs24-mega-col-N" für Panels, in denen mehrere
Mockup-Gruppen dieselbe Spalte teilen (Zubehör/Teile, siehe
mega-menu-blocksy-bridge.php Dateikopf-Kommentar zu 'row'):
CSS-Grids Standard-Auto-Platzierung verwendet einen einzigen,
nur vorwärts laufenden Cursor über ALLE Items hinweg statt
pro Spalte – ohne explizites "grid-row" würde eine Gruppe in
Spalte 2 dadurch in der falschen Zeile landen, sobald zuvor
in Spalte 1 bereits mehrere Zeilen belegt wurden (per
Playwright/CDP reproduziert). Nur 3 Zeilen nötig (Teile-Spalte
4 hat aktuell die meisten gestapelten Gruppen).
========================================================== */
.menu-container li.menu-item-object-fs24-taxonomy-link.fs24-mega-row-1 { grid-row: 1; }
.menu-container li.menu-item-object-fs24-taxonomy-link.fs24-mega-row-2 { grid-row: 2; }
.menu-container li.menu-item-object-fs24-taxonomy-link.fs24-mega-row-3 { grid-row: 3; }
/* ==========================================================
3) Echte Kategorie-Links innerhalb des Panels (Grundfarbe)
Ursache der ursprünglich unsichtbaren Links: Blocksy setzt die
Linkfarbe im Menü über ".sub-menu .ct-menu-link { color:
var(--theme-link-initial-color) }" (siehe Blocksy-Core
inc/panel-builder/header/menu/dynamic-styles.php, "Dropdown
font color"). Für dieses per Menü-Bridge synthetisch erzeugte
Menü greift die dortige, auf das jeweilige Header-Builder-Item
gescopte Variable nicht regulär und löste im gerenderten
Preview-DOM auf Weiß (#fff) auf, identisch zum weißen
Panel-Hintergrund. Fix: eigene, klar gescopte Farbe statt der
ererbten Variable.
Diese Regel ist bewusst die "Basis" für JEDEN .ct-menu-link
innerhalb des Panels (auch Gruppenüberschriften und dritte
Ebenen matchen sie über die Kaskade); die spezifischeren Regeln
in Abschnitt 4 und 6 überschreiben Farbe/Größe für diese beiden
Sonderfälle gezielt wieder – mit einem Selektor, der denselben
Vorfahren-Pfad wiederholt und daher garantiert spezifischer
ist (siehe dortiger Kommentar).
Farbe/Größe/Innenabstand jetzt 1:1 aus index-mockup.html
übernommen (".mega-menu .mega-column a", computed styles
geprüft): die eigentlichen Kategorie-Links sind dort bewusst
GEDÄMPFT/grau, nicht dunkel-kräftig – dunkel wird ausschließlich
die Gruppenüberschrift (Abschnitt 4). Hover wechselt auf den
Akzent-Ton (".mega-menu a:not(.mega-feature):hover").
========================================================== */
.menu-container li.menu-item-object-fs24-taxonomy-link.animated-submenu-block .sub-menu .ct-menu-link {
display: block;
padding: 5px 6px;
margin: 0 -6px;
border-radius: 6px;
font-size: 14px;
font-weight: 400;
color: #656b70;
transition: color 0.12s ease, background-color 0.12s ease;
}
.menu-container li.menu-item-object-fs24-taxonomy-link.animated-submenu-block .sub-menu .ct-menu-link:hover {
color: #d94700;
background-color: rgba(217, 71, 0, 0.06);
}
.menu-container li.menu-item-object-fs24-taxonomy-link.animated-submenu-block .sub-menu .ct-menu-link:focus-visible {
outline: 2px solid #d94700;
outline-offset: 1px;
}
/* ==========================================================
3b) Blocksys Dropdown-Pfeil-Icon ausblenden
Blocksy hängt an jeden Link mit Kindern (E-MTB, Bremsen,
Fahrradtaschen, Regenbekleidung UND die Gruppenüberschriften
selbst) einen an –
von Haus aus "display:flex" mit einem sehr großen linken Margin,
der nur in Blocksys ursprünglichem "Link + Pfeil nebeneinander
in einer Flex-Zeile"-Layout Sinn ergibt (Pfeil wird per
Auto-Margin an den rechten Rand geschoben). Durch unser eigenes
"display:block" auf dem Link (Abschnitt 3) bricht dieser
Mechanismus: das Pfeil- ist selbst block-level
(display:flex ohne "inline-") und erzwingt dadurch einen
Zeilenumbruch NACH dem Linktext, wodurch z. B. der E-MTB-Link
ca. 18px höher wurde als die übrigen Links in seiner Spalte.
Kategorien mit echten Kindern (Klasse "fs24-has-subcats") bekommen
seit Abschnitt 8b einen eigenen, dafür gebauten Chevron-Trigger –
Blocksys natives Pfeil- (samt dem gleichnamigen, aber
funktionslosen "ct-toggle-dropdown-desktop-ghost"-Button direkt
daneben) bleibt daher unabhängig davon immer ausgeblendet, um
nicht zwei unterschiedliche, optisch verwirrende Auf-/Zu-Symbole
nebeneinander anzuzeigen (Begründung für die eigene Lösung statt
Weiterverwendung von Blocksys Ghost-Button: siehe Dateikopf-
Kommentar in mega-menu-blocksy-bridge.php, Abschnitt
"DESKTOP-AUFKLAPPBARE UNTERKATEGORIEN").
========================================================== */
.menu-container li.menu-item-object-fs24-taxonomy-link.animated-submenu-block .sub-menu .ct-menu-link .ct-toggle-dropdown-desktop {
display: none;
}
/* Der von Blocksy serverseitig danebengesetzte, gleich funktionslose
".ct-toggle-dropdown-desktop-ghost"-Button bleibt ohne dieses Fix
ein leerer, unbeschrifteter Tab-Stopp im Panel (per Tastatur
erreichbar, aber ohne erkennbare Funktion) – ausgeblendet und aus
der Tab-Reihenfolge genommen, aus demselben Grund wie oben. */
.menu-container li.menu-item-object-fs24-taxonomy-link.animated-submenu-block .sub-menu .ct-toggle-dropdown-desktop-ghost {
display: none;
}
/* ==========================================================
4) Gruppenüberschrift (Klasse "fs24-mega-group")
Der Gruppen-Menüpunkt selbst ist rein visuell (URL "#", siehe
Bridge) und soll wie eine ruhige, kleine Überschrift wirken,
nicht wie ein Link: kleiner, dezent, ohne Link-Optik/Hover,
nicht klickbar (pointer-events:none; per Bridge zusätzlich
tabindex="-1", also auch per Tastatur nicht fokussierbar).
Höherer Selektor-Vorfahren-Pfad (identischer Anfang wie
Abschnitt 3 + zusätzliche Klasse/Element) ist absichtlich
genauso lang wie die Basisregel plus eine weitere Klassenstufe
– das garantiert per Spezifität zuverlässig Vorrang vor
Abschnitt 3, unabhängig von der Reihenfolge in der Datei.
Farbe/Gewicht/Laufweite jetzt 1:1 aus index-mockup.html
übernommen (".mega-menu .mega-column h4", computed styles
geprüft): deutlich dunkler/kräftiger als vorher (#8a9088 war zu
hell/unauffällig) – im Mockup ist gerade die Gruppenüberschrift
der optisch stärkste Text im Panel, nicht die Links darunter.
========================================================== */
.menu-container li.menu-item-object-fs24-taxonomy-link.animated-submenu-block .sub-menu li.menu-item-object-fs24-taxonomy-link.fs24-mega-group > .ct-menu-link {
display: block;
padding: 0;
margin: 0 0 10px;
font-size: 12.8px;
font-weight: 850;
letter-spacing: 0.015em;
text-transform: uppercase;
color: #1b1e1c;
cursor: default;
pointer-events: none;
}
/* ==========================================================
5) Flex-Layout-Reset für alle Elemente mit echten Kindern
(sowohl die neuen Gruppen-Container "fs24-mega-group" als auch
echte Taxonomie-Eltern wie E-MTB/Bremsen/Fahrradtaschen/
Regenbekleidung): Blocksy vergibt an JEDES mit Kindern
automatisch die Klasse "animated-submenu-inline" (Kern-Logik:
depth > 0 + hat Kinder, siehe blocksy/inc/components/menus.php),
von Haus aus "display:flex; flex-direction:row" gedacht für den
ursprünglichen seitlichen Flyout (Link und