/* FitBike Mega-Menü — EINZIGE Quelle für alle Render-Pfade (Theme, Design-Seiten, Startseite).
 *
 * Vorgeschichte: Layout lag in 17 Kopien mit unterschiedlichen Werten, dazu ein Footer-Script,
 * das inline column-count mit !important setzte. Folge: die Startseite sah anders aus als
 * Kategorie- und Shop-Seiten, und je nach Browser-Balancing sprang die Spaltenaufteilung.
 *
 * Jetzt deterministisch und ohne JS: das Panel bekommt server-seitig die Klasse cols-1 … cols-5
 * (= Anzahl Kategorie-Gruppen, max. 5). Feste Panelbreite + feste Spaltenzahl je Klasse heisst:
 * gleiche Grösse, gleiche Schrift, gleiche Anordnung auf jeder Seite. Spalten-Layout statt Flex,
 * damit bei vielen Gruppen keine Löcher entstehen (Flex richtet an der höchsten Gruppe aus).
 *
 * Kanonische Werte: Spaltenbreite 220px, Spaltenabstand 30px, Panel = n*220 + (n-1)*30.
 * Angelegt 25.07.2026. Änderungen NUR hier.
 */
/* Panels sitzen mittig unter der Navigation, nicht am Menüpunkt: so ist die Position auf
   jeder Seite gleich und kein Panel kann rechts aus dem Bild laufen. */
.catbar, nav.catbar { position: relative !important; }
.catbar .has-drop { position: static !important; }

.catbar .has-drop .drop.mega,
.drop.mega {
  position: absolute !important;
  top: 100% !important;
  right: auto !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: block !important;
  column-gap: 30px !important;
  column-fill: balance;
  row-gap: 0 !important;
  gap: normal !important;
  grid-template-columns: none !important;
  min-width: 0 !important;
  max-height: 86vh;
  overflow-y: auto;
  padding: 22px 26px !important;
  box-sizing: border-box !important;   /* sonst rechnet das Theme das Padding anders und
     die Panelbreite weicht zwischen Shop (970) und Startseite (1024) ab */
}

/* Panelbreite und Spaltenzahl nach Anzahl Gruppen: immer gleich, egal welche Seite */
.drop.mega.cols-1 { width: 272px  !important; column-count: 1 !important; }
.drop.mega.cols-2 { width: 522px  !important; column-count: 2 !important; }
.drop.mega.cols-3 { width: 772px  !important; column-count: 3 !important; }
.drop.mega.cols-4 { width: 1022px !important; column-count: 4 !important; }
.drop.mega.cols-5 { width: 1022px !important; column-count: 4 !important; }  /* bewusst gedeckelt: 5 Spalten (1220px) liefen auf 1400er-Bildschirmen rechts aus dem
     Bild. Vier Spalten passen immer, bei vielen Gruppen wird das Panel höher statt breiter. */
/* Fallback, wenn die Klasse fehlt: wie cols-4 */
.drop.mega:not([class*="cols-"]) { width: 1022px !important; column-count: 4 !important; }

@media (max-width: 1040px) {
  .drop.mega.cols-4, .drop.mega.cols-5,
  .drop.mega:not([class*="cols-"]) { width: 772px !important; column-count: 3 !important; }
}

.catbar .drop.mega .dcol,
.drop.mega .dcol {
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
  width: 220px !important;
  max-width: 220px !important;
  min-width: 0 !important;
  margin: 0 0 18px !important;
  display: inline-block !important;
  vertical-align: top;
}

.catbar .drop.mega .dcol a,
.drop.mega .dcol a {
  white-space: normal !important;
  line-height: 1.35;
  font-size: 14.5px !important;
  display: block;
  padding: 3px 0 !important;
}

.catbar .drop.mega .dct,
.drop.mega .dct {
  display: block;
  margin: 0 0 8px !important;
  padding-bottom: 6px !important;
  border-bottom: 1px solid #eef0f4;
  color: #FF4900 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: .3px;
  text-transform: uppercase;
  white-space: nowrap !important;
  text-decoration: none;
  cursor: pointer;
}

/* Gruppen ohne Unterkategorien (Klasse "lean", z.B. E-Scooter): die Gruppentitel SIND der
   ganze Inhalt. Mit der festen cols-Breite entstand ein breiter, fast leerer Kasten
   (Elias 25.07.2026). Darum hier schmal, einspaltig und dicht. */
.catbar .has-drop.lean { position: relative !important; }
/* Spezifitaet: die Basisregel oben ist .catbar .has-drop .drop.mega (4 Klassen) und traegt
   !important — die lean-Regel muss also mindestens gleich lang sein, sonst verliert sie. */
.catbar .has-drop.lean .drop.mega.lean,
.drop.mega.lean {
  left: 0 !important;
  transform: none !important;
  width: auto !important;
  min-width: 200px !important;
  max-width: 320px !important;
  column-count: 1 !important;
  padding: 12px 20px !important;
}
.catbar .has-drop.lean .drop.mega.lean .dcol,
.drop.mega.lean .dcol {
  width: auto !important;
  max-width: none !important;
  display: block !important;
  margin: 0 !important;
}
.catbar .has-drop.lean .drop.mega.lean .dct,
.drop.mega.lean .dct {
  border-bottom: 0 !important;
  margin: 0 !important;
  padding: 7px 0 !important;
}