/*
 * bb_frontend FlexNav — "Crate" skin.
 * Dark mono rail + cream paper mega-panels, bb-hiphop tokens. Pure-CSS hover/focus reveal until
 * flexnav.js disclosure lands. Index uses GRID TRACKS (source order = focus order, Codex D5).
 * One motion signature: panel fade/rise + a single orange top-edge wipe (Codex D4).
 */

/* CUTOVER SUPPRESSION — when FlexNav is the active nav, the legacy Dropper (kk_dropper's
 * KK_FlexMenu, nav.kk-fm) must NOT co-render, or visitors see two stacked category bars.
 * This file is enqueued ONLY when navMode === bb_flexnav (Bootstrap gate, ~line 109), so this
 * rule is inert in dropper mode (the file isn't loaded) and self-reverts on rollback. The theme's
 * utility navbar (nav.navbar: logo/search/account) is intentionally left untouched. */
nav.kk-fm { display: none !important; }

/* D65-F2 — die zwei Pfeile, die den Desktop-Kopf um 51 px wachsen liessen.
 *
 * JTLs `navscrollbar.js` (Remake) haengt sich an `#mainNavigation` und schiebt
 * dort zwei `.nav-scrollbar-arrow` nach, sobald es bootet. Im FlexNav-Mount hat
 * dieses Plugin nichts zu tun: `.nav-scrollbar-inner` — der Behaelter, den es
 * scrollen wuerde — existiert hier gar nicht. Gemessen 2026-08-16 bei 1440,
 * 1200 und 1000 px Breite: beide Pfeile dauerhaft `disabled`, scrollWidth ==
 * clientWidth, also nie ein Scrollbedarf. Sie sind strukturell funktionslos.
 *
 * Bezahlt wurden sie trotzdem: je 26 px im Fluss, zusammen +51 px Kopfhoehe bei
 * ~0,9 s. Der gesamte Inhalt rutschte damit nach unten (`main#main-wrapper`
 * y 165 -> 216) — Desktop-CLS 0,035 (Home) bis 0,059 (PDP), gemessen ueber je
 * drei Laeufe je Route mit identischem Ergebnis. Das ist der Desktop-Zwilling
 * des mobilen 78-px-Sprungs, nur mit fremder Ursache.
 *
 * Wirkt ab dem ersten Paint, auch wenn die Knoten spaeter kommen: was
 * `display:none` traegt, betritt den Fluss nie. Rollback = diese Regel
 * entfernen. Sollte JTL den Mount je wirklich scrollbar machen, faellt das an
 * `.nav-scrollbar-inner` auf, nicht an den Pfeilen. */
.bb-fn-mount .nav-scrollbar-arrow { display: none; }

.bb-fn,
.bb-fn-m {
  --bbfn-rail-bg: var(--bb-dark, #0c0c0a);
  --bbfn-rail-bg-2: var(--bb-dark-2, #14120f);
  --bbfn-rail-fg: var(--bb-paper, #fffdf7);
  --bbfn-rail-fg-dim: rgba(255, 253, 247, .6);
  --bbfn-accent: var(--bb-accent, #ff7a33);
  /* Panel internals are FIXED (not the theme's --bb-* tokens) — the paper sheet stays a light surface
     in both day and night; the theme's --bb-ink flips light in night mode and would vanish on cream.
     TODO: add an explicit night-mode dark-panel variant under html.bb-night. */
  --bbfn-panel-bg: #fffdf7;
  --bbfn-panel-bg-2: #f4f1e8;
  --bbfn-ink: #17150f;
  --bbfn-ink-soft: #4c4538;
  --bbfn-line: #d8ccba;
  --bbfn-radius: var(--bb-radius, 4px);
  --bbfn-shadow: 0 24px 60px -24px rgba(12, 12, 10, .55);
  --bbfn-mono: "Space Mono", ui-monospace, "Cascadia Mono", monospace;
  --bbfn-body: "Hanken Grotesk", "IBM Plex Sans", system-ui, sans-serif;
  --bb-fn-world-color: var(--bbfn-accent);
  --bb-fn-world-bg: rgba(255, 255, 255, .045);
  --bb-fn-world-border: rgba(255, 253, 247, .16);
  --bb-fn-world-spacing: 10px;
  --bbfn-in: 180ms;
  --bbfn-out: 240ms;        /* sliding-marker travel — a touch slower for the signature slide */
  --bbfn-ease: cubic-bezier(.2, .7, .2, 1);
  /* Z-index contract: drawer sits below consent/age/sidecart overlays when those open; JS focus-trap yields
     to those overlays. Keep backdrop < drawer < raised sticky header. */
  --bbfn-overlay-consent-z: 1050;
  --bbfn-overlay-sidecart-z: 1090;
  --bbfn-overlay-age-z: 1100;
  --bbfn-drawer-backdrop-z: 1060;
  --bbfn-drawer-z: 1070;
}

/* ---------------- rail ---------------- */
/* The mount is the sole child of Remake's .navbar flex row; as a default flex item it shrinks to the
   rail's content width (~777px) and the absolutely-positioned panel inherits that. Force it to fill the
   full navbar/container width so the rail AND the mega-panel span the site container (like Dropper). */
.bb-fn-mount { background: var(--bbfn-rail-bg); flex: 1 1 100%; min-width: 0; }
.bb-fn { display: block; background: linear-gradient(var(--bbfn-rail-bg), var(--bbfn-rail-bg-2)); }
.bb-fn-bar {
  position: relative; display: flex; align-items: stretch; gap: 2px;
  max-width: 100%; margin-inline: auto; padding: 0; list-style: none;
}
.bb-fn-entry { display: flex; }
.bb-fn-world-group {
  display: flex; align-items: stretch; min-width: 0; margin: 0; padding: 0; list-style: none;
}
.bb-fn-world-group[hidden] { display: none; }
.bb-fn-world-group__list {
  display: flex; align-items: stretch; gap: 2px; min-width: 0; margin: 0; padding: 0; list-style: none;
}
.bb-fn-world {
  display: inline-flex; align-items: center; align-self: stretch; flex: 0 0 auto;
  margin-inline: var(--bb-fn-world-spacing) 2px; padding: 0 8px;
  border-inline-start: 1px solid var(--bb-fn-world-border); background: var(--bb-fn-world-bg);
  color: var(--bb-fn-world-color); font-family: var(--bbfn-mono); font-size: 9px; font-weight: 700;
  line-height: 1; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  pointer-events: none; user-select: none;
}
/* T-M2: Ziel-Link und Panel-Umschalter sind zwei Elemente. Gemeinsame Typo/Farbe,
   getrennte Geometrie. Die alte Klasse .bb-fn-entry__label gibt es nicht mehr —
   das ist Absicht: so kann kein Disclosure-Handler versehentlich am Link landen. */
.bb-fn-entry__link,
.bb-fn-entry__toggle {
  font-family: var(--bbfn-mono); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; line-height: 1;
  color: var(--bbfn-rail-fg-dim); text-decoration: none; background: none; border: 0; cursor: pointer;
  position: relative; transition: color var(--bbfn-in) var(--bbfn-ease);
}
.bb-fn-entry__link {
  display: inline-flex; align-items: center; gap: .5ch;
  min-width: 0; padding: 18px 4px 18px 14px;
}
/* Ohne Panel traegt der Link die volle rechte Innenkante wie frueher. */
.bb-fn-entry:not(:has(> .bb-fn-entry__toggle)) > .bb-fn-entry__link { padding-right: 14px; }
.bb-fn-entry__toggle {
  display: inline-flex; align-items: center; justify-content: center;
  align-self: stretch; flex: 0 0 auto; min-width: 30px; padding: 0 8px 0 0;
}
/* Ohne Hover (Touch) gibt es keinen anderen Weg ins Panel — dort ein echtes Ziel. */
@media (hover: none) {
  .bb-fn-entry__toggle { min-width: 44px; padding-inline: 0; }
}
.bb-fn-entry__toggle--overflow { gap: .6ch; padding-inline: 14px; }
.bb-fn-entry__toggle-icon {
  width: 6px; height: 6px; flex: 0 0 auto;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform var(--bbfn-in) var(--bbfn-ease);
}
.bb-fn-entry__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bb-fn-entry__badge {
  align-items: center;
  background: var(--bbfn-accent);
  border-radius: 4px;
  color: var(--bbfn-ink);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 10px;
  line-height: 1;
  max-width: 7rem;
  overflow: hidden;
  padding: 3px 5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bb-fn-entry--featured > .bb-fn-entry__link {
  color: var(--bbfn-rail-fg);
}
.bb-fn-entry__link::after {
  content: ""; position: absolute; left: 14px; right: 4px; bottom: 12px; height: 2px;
  background: var(--bbfn-accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--bbfn-in) var(--bbfn-ease);
}
.bb-fn-entry:not(:has(> .bb-fn-entry__toggle)) > .bb-fn-entry__link::after { right: 14px; }
/* Hover/Fokus faerben BEIDE Elemente — der Eintrag reagiert als Einheit, egal ob
   die Maus auf dem Namen oder auf dem Chevron steht. */
.bb-fn-entry:hover > .bb-fn-entry__link,
.bb-fn-entry:focus-within > .bb-fn-entry__link,
.bb-fn-entry:hover > .bb-fn-entry__toggle,
.bb-fn-entry:focus-within > .bb-fn-entry__toggle,
.bb-fn-entry__link:focus-visible,
.bb-fn-entry__toggle:focus-visible { color: var(--bbfn-rail-fg); }
.bb-fn-entry:hover > .bb-fn-entry__link::after,
.bb-fn-entry:focus-within > .bb-fn-entry__link::after { transform: scaleX(1); }
/* Zwei getrennte Fokusrahmen — Link und Umschalter sind zwei Tab-Ziele. */
.bb-fn-entry__link:focus-visible,
.bb-fn-entry__toggle:focus-visible { outline: 2px solid var(--bbfn-accent); outline-offset: -2px; }
.bb-fn-entry:hover > .bb-fn-entry__toggle .bb-fn-entry__toggle-icon { transform: translateY(0) rotate(225deg); }
/* JS mode: the per-item underline is replaced by one sliding .bb-fn-marker; open entry stays lit. */
.bb-fn--js .bb-fn-entry__link::after { display: none; }
.bb-fn--js .bb-fn-entry--open > .bb-fn-entry__link,
.bb-fn--js .bb-fn-entry--open > .bb-fn-entry__toggle { color: var(--bbfn-rail-fg); }
.bb-fn--js .bb-fn-entry--open > .bb-fn-entry__toggle .bb-fn-entry__toggle-icon { transform: translateY(0) rotate(225deg); }
.bb-fn-marker {
  position: absolute; left: 0; bottom: 12px; height: 2px; width: 0; opacity: 0;
  background: var(--bbfn-accent); transform: translateX(0); pointer-events: none; z-index: 1;
  transition: transform var(--bbfn-out) var(--bbfn-ease), width var(--bbfn-out) var(--bbfn-ease),
              opacity var(--bbfn-in) var(--bbfn-ease);
}

/* icon-only rail link (Dropper "Home") */
.bb-fn-entry__link--icon { gap: 0; }
.bb-fn-icon { width: 18px; height: 18px; fill: currentColor; display: block; }

/* ---------------- mega-panel (paper sheet) ---------------- */
.bb-fn-panel {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 60;
  background: var(--bbfn-panel-bg);
  border-radius: 0 0 var(--bbfn-radius) var(--bbfn-radius); box-shadow: var(--bbfn-shadow);
  opacity: 0; transform: translateY(-8px);
  transition: opacity var(--bbfn-in) var(--bbfn-ease), transform var(--bbfn-in) var(--bbfn-ease);
}
.bb-fn-panel::before {            /* the single signature: orange top-edge wipe */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--bbfn-accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--bbfn-in) var(--bbfn-ease);
}
/* No-JS fallback: pure-CSS hover/focus reveal. When flexnav.js boots it adds .bb-fn--js and OWNS
   open/close via the .bb-fn-entry--open state class (keyboard + click + hover-intent). */
.bb-fn:not(.bb-fn--js) .bb-fn-entry:hover > .bb-fn-panel[hidden],
.bb-fn:not(.bb-fn--js) .bb-fn-entry:focus-within > .bb-fn-panel[hidden] { display: block; }
.bb-fn:not(.bb-fn--js) .bb-fn-entry:hover > .bb-fn-panel,
.bb-fn:not(.bb-fn--js) .bb-fn-entry:focus-within > .bb-fn-panel { opacity: 1; transform: translateY(0); }
.bb-fn:not(.bb-fn--js) .bb-fn-entry:hover > .bb-fn-panel::before,
.bb-fn:not(.bb-fn--js) .bb-fn-entry:focus-within > .bb-fn-panel::before { transform: scaleX(1); }
/* JS-driven open state */
.bb-fn--js .bb-fn-entry--open > .bb-fn-panel { opacity: 1; transform: translateY(0); }
.bb-fn--js .bb-fn-entry--open > .bb-fn-panel::before { transform: scaleX(1); }
.bb-fn-panel-inner { padding: 28px 36px 32px; max-height: min(86vh, 820px); overflow-y: auto; }

/* T-M2: erster Panel-Eintrag — der Weg auf die Oberkategorie, auch aus dem offenen
   Panel heraus. Steht bewusst als ERSTES Element in .bb-fn-panel-inner, damit
   ArrowDown vom Chevron genau hier landet. */
.bb-fn-panel__all {
  display: inline-flex; align-items: center; gap: .55ch; margin: 0 0 18px;
  color: var(--bbfn-accent); font-family: var(--bbfn-mono); font-size: 12px; font-weight: 700;
  line-height: 1.3; letter-spacing: .04em; text-decoration: none; text-transform: uppercase;
}
.bb-fn-panel__all:hover { text-decoration: underline; }
.bb-fn-panel__all:focus-visible { outline: 2px solid var(--bbfn-accent); outline-offset: 3px; }
.bb-fn-panel__all-arrow { transition: transform var(--bbfn-in) var(--bbfn-ease); }
.bb-fn-panel__all:hover .bb-fn-panel__all-arrow,
.bb-fn-panel__all:focus-visible .bb-fn-panel__all-arrow { transform: translateX(3px); }

/* regions */
.bb-fn-cols { display: flex; gap: 36px; align-items: flex-start; }
.bb-fn-region--left, .bb-fn-region--right { flex: 0 0 300px; }
.bb-fn-region--center { flex: 1 1 auto; min-width: 0; }
.bb-fn-region--top { margin-bottom: 24px; }
.bb-fn-region--bottom { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--bbfn-line); }

/* kicker (mono section label) */
.bb-fn-kicker {
  display: block; font-family: var(--bbfn-mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--bbfn-ink-soft);
  padding-bottom: 8px; margin-bottom: 10px; border-bottom: 1px solid var(--bbfn-line); text-decoration: none;
}
a.bb-fn-kicker:hover { color: var(--bbfn-accent); }

/* ---------------- feature (editorial card / band) ---------------- */
.bb-fn-feature { background: var(--bbfn-panel-bg-2); border: 1px solid var(--bbfn-line); border-radius: var(--bbfn-radius); overflow: hidden; }
.bb-fn-feature--card { display: flex; flex-direction: column; }
/* Band = full-width strip: media (when present) fixed-left, body fills the rest. Flex (not grid) so a
   missing/onerror-removed image lets the body expand full width instead of staying in a 200px track. */
.bb-fn-feature--band { display: flex; align-items: center; gap: 24px; }
.bb-fn-feature--band .bb-fn-feature__body { flex: 1 1 auto; min-width: 0; }
.bb-fn-feature__media { display: block; background: #fff; }
.bb-fn-feature--card .bb-fn-feature__media { aspect-ratio: 16 / 10; }
.bb-fn-feature--band .bb-fn-feature__media { flex: 0 0 200px; align-self: stretch; aspect-ratio: 4 / 3; }
.bb-fn-feature__media img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 10px; }
.bb-fn-feature__body { padding: 16px 18px; }
.bb-fn-feature__title { display: block; font-family: var(--bbfn-body); font-weight: 800; font-size: 22px; line-height: 1.05; color: var(--bbfn-ink); margin: 6px 0 8px; }
.bb-fn-feature__text { font-family: var(--bbfn-body); font-size: 13.5px; line-height: 1.5; color: var(--bbfn-ink-soft); margin: 0 0 12px; }
.bb-fn-feature__cta { font-family: var(--bbfn-mono); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--bbfn-accent); text-decoration: none; }
.bb-fn-feature__cta:hover { text-decoration: underline; }

/* ---------------- index (grouped subcats, grid tracks) ---------------- */
.bb-fn-index { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); gap: 8px 32px; }
.bb-fn-index__group { break-inside: avoid; margin-bottom: 14px; }
.bb-fn-index__head { margin-bottom: 6px; }
.bb-fn-index__head--icon { display: flex; align-items: center; gap: 10px; }
.bb-fn-index__icon { flex: 0 0 auto; width: 54px; height: 54px; display: inline-flex; }
.bb-fn-index__icon img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform 180ms var(--bbfn-ease); }
.bb-fn-index__head--icon:hover .bb-fn-index__icon img,
.bb-fn-index__head--icon:focus-visible .bb-fn-index__icon img { transform: scale(1.08); }
.bb-fn-index--icons .bb-fn-index__children { padding-left: 64px; }
.bb-fn-index__children { list-style: none; margin: 0; padding: 0; }
/* optional panel-footer "Alle in <Kategorie> anzeigen" corridor (settings.showAllLink) */
.bb-fn-index__foot { grid-column: 1 / -1; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--bbfn-line); }

/* ---------------- tab-panel archetype (groups as vertical tabs, flexnav.js initTabs) ---------------- */
.bb-fn-tabs { display: grid; grid-template-columns: minmax(170px, 230px) minmax(0, 1fr); gap: 4px 28px; align-items: start; }
.bb-fn-tabs__list { display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--bbfn-line); padding-right: 14px; }
.bb-fn-tabs__tab {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border: 0; border-radius: 8px; background: none; cursor: pointer; text-align: left;
  font-family: var(--bbfn-body); font-size: 14px; font-weight: 600; color: var(--bbfn-ink);
  transition: background 140ms var(--bbfn-ease), color 140ms var(--bbfn-ease);
}
.bb-fn-tabs__tab:hover { color: var(--bbfn-accent); }
.bb-fn-tabs__tab:focus-visible { outline: 2px solid var(--bbfn-accent); outline-offset: 2px; }
.bb-fn-tabs__tab[aria-selected="true"] { background: color-mix(in srgb, var(--bbfn-accent) 12%, transparent); color: var(--bbfn-accent); }
.bb-fn-tabs__tab-count { font-size: 11px; font-weight: 700; color: var(--bbfn-ink-soft); }
.bb-fn-tabs__head { display: inline-block; margin-bottom: 8px; }
.bb-fn-tabs__links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2px 24px; }
.bb-fn-tabs__foot { grid-column: 1 / -1; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--bbfn-line); }
@media (max-width: 640px) {
  /* drawer: the vertical rail becomes a horizontally scrollable tab row */
  .bb-fn-tabs { grid-template-columns: minmax(0, 1fr); }
  .bb-fn-tabs__list { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--bbfn-line); padding: 0 0 8px; }
  .bb-fn-tabs__tab { flex: 0 0 auto; }
}
.bb-fn-link {
  display: inline-flex; align-items: baseline; gap: .4ch; font-family: var(--bbfn-body); font-size: 14px;
  line-height: 1.55; color: var(--bbfn-ink); text-decoration: none; padding: 2px 0;
  transition: color 120ms var(--bbfn-ease), transform 120ms var(--bbfn-ease);
}
.bb-fn-link:hover, .bb-fn-link:focus-visible { color: var(--bbfn-accent); transform: translateX(2px); }
.bb-fn-link:focus-visible { outline: 2px solid var(--bbfn-accent); outline-offset: 2px; }
.bb-fn-link--all { font-weight: 700; color: var(--bbfn-ink-soft); }
.bb-fn-link--all:hover { color: var(--bbfn-accent); }
.bb-fn-link--empty { opacity: .72; }
.bb-fn-link--empty::after {
  content: "leer"; display: inline-block; margin-left: 6px; padding: 1px 5px; border: 1px solid var(--bbfn-line);
  border-radius: 999px; color: var(--bbfn-ink-soft); font-size: 10px; font-weight: 700; line-height: 1.2; text-transform: uppercase;
}

/* ---------------- cards (label-images) ---------------- */
.bb-fn-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
/* imageSize variants (bb-fn-cards--sm is the base above; xs = denser, md = larger cards) */
.bb-fn-cards--xs { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.bb-fn-cards--md { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.bb-fn-card { display: block; text-decoration: none; border: 1px solid var(--bbfn-line); border-radius: var(--bbfn-radius); overflow: hidden; background: #fff; transition: border-color 140ms var(--bbfn-ease), transform 140ms var(--bbfn-ease); }
.bb-fn-card__media { display: block; aspect-ratio: 1 / 1; background: #fff; }
.bb-fn-card__media img { width: 100%; height: 100%; object-fit: contain; padding: 12px; display: block; transition: transform 220ms var(--bbfn-ease); }
.bb-fn-card__label { display: block; padding: 8px 10px; font-family: var(--bbfn-body); font-size: 13px; font-weight: 600; color: var(--bbfn-ink); background: var(--bbfn-panel-bg-2); border-top: 1px solid var(--bbfn-line); }
.bb-fn-card--text { min-height: 58px; display: flex; align-items: center; }
.bb-fn-card--text .bb-fn-card__label { width: 100%; border-top: 0; line-height: 1.25; }
.bb-fn-card--empty { opacity: .78; }
.bb-fn-card--empty .bb-fn-card__label::after {
  content: "leer"; float: right; margin-left: 6px; padding: 1px 5px; border: 1px solid var(--bbfn-line);
  border-radius: 999px; color: var(--bbfn-ink-soft); font-size: 10px; font-weight: 700; line-height: 1.2; text-transform: uppercase;
}
.bb-fn-card:hover { border-color: var(--bbfn-accent); transform: translateY(-2px); }
.bb-fn-card:hover .bb-fn-card__label { color: var(--bbfn-accent); }
.bb-fn-card:hover .bb-fn-card__media img { transform: scale(1.05); }
.bb-fn-card:focus-visible { outline: 2px solid var(--bbfn-accent); outline-offset: 2px; }

/* ---------------- image grid (image-forward subcats) ---------------- */
.bb-fn-imagegrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
/* imageSize variants (bb-fn-imagegrid--sm is the base above; xs = denser, md = larger tiles) */
.bb-fn-imagegrid--xs { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.bb-fn-imagegrid--md { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.bb-fn-imgtile { display: block; text-decoration: none; color: var(--bbfn-ink); }
.bb-fn-imgtile__media { display: block; aspect-ratio: 1 / 1; background: #fff; border: 1px solid var(--bbfn-line); border-radius: var(--bbfn-radius); overflow: hidden; transition: border-color 140ms var(--bbfn-ease); }
.bb-fn-imgtile__media img { width: 100%; height: 100%; object-fit: contain; padding: 8px; display: block; transition: transform 220ms var(--bbfn-ease); }
.bb-fn-imgtile__label { display: block; margin-top: 6px; font-family: var(--bbfn-body); font-size: 12px; line-height: 1.2; color: var(--bbfn-ink-soft); text-align: center; }
.bb-fn-imgtile:hover .bb-fn-imgtile__media { border-color: var(--bbfn-accent); }
.bb-fn-imgtile:hover .bb-fn-imgtile__media img { transform: scale(1.06); }
.bb-fn-imgtile:hover .bb-fn-imgtile__label { color: var(--bbfn-accent); }
.bb-fn-imgtile:focus-visible .bb-fn-imgtile__media { outline: 2px solid var(--bbfn-accent); outline-offset: 2px; }

/* ---------------- A–Z directory ---------------- */
.bb-fn-az { columns: 4 180px; column-gap: 28px; }
.bb-fn-az__group { break-inside: avoid; margin-bottom: 12px; }
.bb-fn-az__letter { display: inline-block; font-family: var(--bbfn-mono); font-size: 13px; font-weight: 700; color: var(--bbfn-accent); border-bottom: 2px solid var(--bbfn-line); padding-bottom: 2px; margin-bottom: 4px; min-width: 1.4em; }
.bb-fn-az__list { list-style: none; margin: 0; padding: 0; }

/* ---------------- lazy slim shell + loading state ---------------- */
/* Initial (pre-fetch / no-JS) panel content: L2 group heads as anchors, multi-column. Replaced by the
   full rich panel on first open (flexnav.js loadPanel). aria-busy dims the slim list while fetching. */
.bb-fn-slim { list-style: none; margin: 0; padding: 0; columns: 3 170px; column-gap: 28px; }
.bb-fn-slim li { break-inside: avoid; }
.bb-fn-slim__item { display: inline-block; padding: 3px 0; }
.bb-fn-panel-inner[aria-busy="true"] { min-height: 72px; }
.bb-fn-panel-inner[aria-busy="true"] .bb-fn-slim { opacity: .5; transition: opacity var(--bbfn-in) var(--bbfn-ease); }

/* ---------------- promo banner (structured, replaces raw html) + spacer ---------------- */
.bb-fn-promo { display: flex; gap: 16px; align-items: center; padding: 16px 18px; border-radius: var(--bbfn-radius); background: var(--bbfn-panel-bg-2); border: 1px solid var(--bbfn-line); }
.bb-fn-promo--dark { background: var(--bbfn-rail-bg); border-color: transparent; }
.bb-fn-promo--dark .bb-fn-promo__headline, .bb-fn-promo--dark .bb-fn-promo__text { color: var(--bbfn-rail-fg); }
.bb-fn-promo--accent { background: var(--bbfn-accent); border-color: transparent; }
.bb-fn-promo--accent .bb-fn-promo__headline, .bb-fn-promo--accent .bb-fn-promo__text { color: #fff; }
.bb-fn-promo__media { flex: 0 0 96px; }
.bb-fn-promo__media img { width: 100%; height: auto; object-fit: contain; display: block; }
.bb-fn-promo__body { flex: 1 1 auto; min-width: 0; }
.bb-fn-promo__headline { display: block; font-family: var(--bbfn-body); font-weight: 800; font-size: 18px; line-height: 1.1; color: var(--bbfn-ink); margin-bottom: 4px; }
.bb-fn-promo__text { font-family: var(--bbfn-body); font-size: 13px; line-height: 1.45; color: var(--bbfn-ink-soft); margin: 0 0 8px; }
.bb-fn-promo__cta { font-family: var(--bbfn-mono); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--bbfn-accent); text-decoration: none; }
.bb-fn-promo--accent .bb-fn-promo__cta { color: #fff; text-decoration: underline; }
.bb-fn-promo__cta:hover { text-decoration: underline; }
.bb-fn-spacer--s { height: 8px; }
.bb-fn-spacer--m { height: 16px; }
.bb-fn-spacer--l { height: 32px; }

/* ---------------- host-theme defense ----------------
   Remake/Sweet night-mode styles anchors via `a:link` etc. (specificity (0,1,1)) which out-specify our
   single-class `.bb-fn-link`/`.bb-fn-crate__chip` (0,1,0) and would paint them in the dark-theme's light
   ink — invisible on our cream panel. Force our panel ink with !important so the menu is readable under
   ANY host theme/specificity. (The cream paper sheet is intentionally light in both day and night.) */
.bb-fn-panel a.bb-fn-link,
.bb-fn-panel a.bb-fn-card,
.bb-fn-panel a.bb-fn-card .bb-fn-card__label { color: var(--bbfn-ink) !important; }
.bb-fn-panel a.bb-fn-link--all { color: var(--bbfn-ink-soft) !important; }
.bb-fn-panel a.bb-fn-link:hover, .bb-fn-panel a.bb-fn-link:focus-visible,
.bb-fn-panel a.bb-fn-link--all:hover,
.bb-fn-panel a.bb-fn-card:hover .bb-fn-card__label { color: var(--bbfn-accent) !important; }
.bb-fn-panel a.bb-fn-crate__chip { color: var(--bbfn-ink) !important; }
.bb-fn-panel a.bb-fn-crate__chip:hover { color: var(--bbfn-accent) !important; }
.bb-fn-panel a.bb-fn-chip { color: var(--bbfn-ink) !important; }
.bb-fn-panel a.bb-fn-chip:hover, .bb-fn-panel a.bb-fn-chip:focus-visible { color: var(--bbfn-accent) !important; }
.bb-fn-panel a.bb-fn-imgtile { color: var(--bbfn-ink) !important; }
.bb-fn-panel a.bb-fn-imgtile:hover .bb-fn-imgtile__label { color: var(--bbfn-accent) !important; }
.bb-fn-panel a.bb-fn-promo__cta { color: var(--bbfn-accent) !important; }
.bb-fn-panel .bb-fn-promo--accent a.bb-fn-promo__cta { color: #fff !important; }
.bb-fn-panel a.bb-fn-feature__cta { color: var(--bbfn-accent) !important; }
.bb-fn-panel a.bb-fn-kicker { color: var(--bbfn-ink-soft) !important; }
.bb-fn-panel a.bb-fn-kicker:hover { color: var(--bbfn-accent) !important; }
.bb-fn-overflow__panel a.bb-fn-overflow__item { color: var(--bbfn-ink) !important; }
.bb-fn-overflow__panel a.bb-fn-overflow__item:hover,
.bb-fn-overflow__panel a.bb-fn-overflow__item:focus-visible { color: var(--bbfn-accent) !important; }

/* ---------------- brand crate (slider) + brands list ---------------- */
.bb-fn-crate { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: thin; }
/* Marken-Kachel (Top Marken): fester Kasten (128x104), KEIN grauer Tile-Hintergrund.
   Logo maximal + mittig im freien Raum; Textlink klein auf fester Linie unten
   (~1 Zeile Abstand darunter); Logo-Schatten + Hover-Lift als "cooler" Effekt. */
.bb-fn-crate__chip {
  scroll-snap-align: start; flex: 0 0 auto;
  width: 128px; height: 104px; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 0; padding: 12px 10px 0;
  background: transparent; border: 0; border-radius: 0;
  text-decoration: none; color: var(--bbfn-ink); font-family: var(--bbfn-body);
  overflow: visible;
}
.bb-fn-crate__chip img {
  flex: 1 1 auto; min-height: 0;
  width: auto; max-width: 96%; max-height: 100%; object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .20));
  transition: transform 220ms var(--bbfn-ease), filter 220ms var(--bbfn-ease);
}
.bb-fn-crate__chip span {
  flex: 0 0 auto; font-size: 11px; line-height: 1.2;
  margin: 6px 0 14px; text-align: center; color: var(--bbfn-ink-soft);
}
/* Marken ohne Logo: Name vertikal zentriert als kräftigeres Text-Logo */
.bb-fn-crate__chip span:only-child { margin: auto 0; font-size: 14px; font-weight: 700; color: var(--bbfn-ink); }
.bb-fn-crate__chip:hover img { transform: translateY(-6px) scale(1.07); filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .30)); }
.bb-fn-crate__chip:hover span { color: var(--bbfn-accent); }
.bb-fn-crate__chip:focus-visible { outline: 2px solid var(--bbfn-accent); outline-offset: 2px; }
/* flexnav.js wraps the crate in .bb-fn-slider and injects prev/next; arrows show only when overflowing.
   Inside the slider the native scrollbar is hidden (arrows are the affordance, like Dropper). */
.bb-fn-slider { position: relative; }
.bb-fn-slider .bb-fn-crate { scrollbar-width: none; }
.bb-fn-slider .bb-fn-crate::-webkit-scrollbar { width: 0; height: 0; }
.bb-fn-slider__btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; padding: 0;
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--bbfn-line);
  background: var(--bbfn-panel-bg); color: var(--bbfn-ink); cursor: pointer;
  display: none; align-items: center; justify-content: center; font-size: 20px; line-height: 1;
  box-shadow: 0 2px 10px rgba(12, 12, 10, .18);
  transition: background var(--bbfn-in) var(--bbfn-ease), color var(--bbfn-in) var(--bbfn-ease), opacity var(--bbfn-in) var(--bbfn-ease);
}
.bb-fn-slider--overflow .bb-fn-slider__btn { display: flex; }
.bb-fn-slider__btn--prev { left: -10px; }
.bb-fn-slider__btn--next { right: -10px; }
.bb-fn-slider__btn:hover { background: var(--bbfn-accent); color: #fff; border-color: var(--bbfn-accent); }
.bb-fn-slider__btn:disabled { opacity: .3; cursor: default; box-shadow: none; }
.bb-fn-brands { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 2px 20px; }
.bb-fn-brands__count { font-size: .72em; opacity: .5; font-variant-numeric: tabular-nums; }

/* ---------------- search specials ("Entdecken") ---------------- */
.bb-fn-specials { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.bb-fn-special { gap: .6ch; }
.bb-fn-special__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--bbfn-accent); flex: 0 0 auto; align-self: center; opacity: .7; transition: opacity 120ms var(--bbfn-ease); }
.bb-fn-special:hover .bb-fn-special__dot, .bb-fn-special:focus-visible .bb-fn-special__dot { opacity: 1; }

/* ---------------- property facets ("shop by attribute") ---------------- */
.bb-fn-facets { display: flex; flex-direction: column; gap: 16px; }
.bb-fn-facet .bb-fn-kicker { margin-bottom: 8px; }
.bb-fn-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.bb-fn-chip {
  display: inline-flex; align-items: baseline; gap: .5ch; padding: 5px 10px;
  font-family: var(--bbfn-body); font-size: 13px; line-height: 1.1; color: var(--bbfn-ink);
  background: var(--bbfn-panel-bg-2); border: 1px solid var(--bbfn-line); border-radius: 999px;
  text-decoration: none; transition: border-color 120ms var(--bbfn-ease), color 120ms var(--bbfn-ease);
}
.bb-fn-chip:hover, .bb-fn-chip:focus-visible { border-color: var(--bbfn-accent); color: var(--bbfn-accent); }
.bb-fn-chip:focus-visible { outline: 2px solid var(--bbfn-accent); outline-offset: 2px; }
.bb-fn-chip__count { font-size: .72em; opacity: .5; font-variant-numeric: tabular-nums; }

/* non-panel rail entries */
a.bb-fn-entry__link { text-decoration: none; }

/* ---------------- priority overflow ("Mehr") ---------------- */
.bb-fn-overflow { margin-left: auto; }                 /* pin to the right edge of the rail */
.bb-fn-overflow__panel { left: auto; right: 0; width: min(320px, 92vw); }
.bb-fn-overflow__list { list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.bb-fn-overflow__item {
  display: block; padding: 11px 14px; color: var(--bbfn-ink); text-decoration: none;
  font-family: var(--bbfn-mono); font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; border-radius: var(--bbfn-radius);
  transition: color var(--bbfn-in) var(--bbfn-ease), background var(--bbfn-in) var(--bbfn-ease);
}
.bb-fn-overflow__item:hover, .bb-fn-overflow__item:focus-visible { color: var(--bbfn-accent); background: var(--bbfn-panel-bg-2); }

/* ---------------- mobile drawer ---------------- */
.bb-fn-burger { display: none; }
.bb-fn-burger__box { position: relative; width: 18px; height: 2px; background: currentColor; transition: background var(--bbfn-in); }
.bb-fn-burger__box::before, .bb-fn-burger__box::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor;
  transition: transform var(--bbfn-in) var(--bbfn-ease);
}
.bb-fn-burger__box::before { top: -6px; }
.bb-fn-burger__box::after { top: 6px; }
.bb-fn--drawer-open .bb-fn-burger__box { background: transparent; }
.bb-fn--drawer-open .bb-fn-burger__box::before { transform: translateY(6px) rotate(45deg); }
.bb-fn--drawer-open .bb-fn-burger__box::after { transform: translateY(-6px) rotate(-45deg); }
html.bb-fn-noscroll { overflow: hidden; }
html.bb-fn-noscroll #jtl-nav-wrapper { z-index: 1080; } /* lift Sweet's sticky header above consent while drawer is open */
.bb-fn-m { display: none; }
.bb-fn-m-burger { display: none; }

/* ---------------- responsive (drawer + JS later; explicit tracks, Codex D5) ---------------- */
@media (max-width: 1024px) {
  .bb-fn-cols { gap: 24px; }
  .bb-fn-region--left, .bb-fn-region--right { flex-basis: 240px; }
  .bb-fn-index { grid-template-columns: repeat(2, 1fr); }
  .bb-fn-panel-inner { padding: 20px; }
}

@media (max-width: 991.98px) {
  html.bb-fn-mobile-nav-on #burger-menu,
  body:has(.bb-fn-m) #burger-menu {
    display: none !important;
  }

  html.bb-fn-mobile-nav-on .bb-fn-mount > .bb-fn-desktop,
  body:has(.bb-fn-m) .bb-fn-mount > .bb-fn-desktop {
    display: none;
  }

  .bb-fn-m {
    display: block;
    background: linear-gradient(var(--bbfn-rail-bg), var(--bbfn-rail-bg-2));
  }

  /* D65-F1 — kein `--js`-Gate mehr. Die Klasse kam erst mit dem Boot, und mit
     ihr sprang die Kopfzeile um 78 px (Burger 52 px an, Drawer 129 px aus).
     Beide Regeln gelten jetzt ab dem ersten Paint; der Burger wird server-
     gerendert (MenuRenderer), der No-JS-Fall über ein `<noscript><style>`
     direkt vor der Nav zurückgedreht. `--open` sticht beides weiterhin (Z. u.).
     Spezifität geprüft: die Grundregel `.bb-fn-m-burger{display:none}` steht
     ausserhalb dieser Media-Query weiter oben und verliert bei Gleichstand
     über die Dokumentordnung. */
  .bb-fn-m-burger {
    display: inline-flex;
    align-items: center;
    gap: .8ch;
    width: 100%;
    justify-content: flex-start;
    font-family: var(--bbfn-mono);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bbfn-rail-fg);
    background: none;
    border: 0;
    cursor: pointer;
    padding: 16px 18px;
  }

  .bb-fn-m:not(.bb-fn-m--open) .bb-fn-m__home {
    display: none;
  }

  /* Der SSR-Burger ist bis zum Boot `disabled`. Sichtbar aendern darf sich
     dadurch NICHTS — sonst tauscht man einen Layout-Sprung gegen ein
     Farbflackern. Fremde Knopf-Defaults (Bootstrap `:disabled{opacity:.65}`
     greift nur auf `.btn`) sind hier explizit ausgeschaltet. */
  .bb-fn-m-burger[disabled] {
    opacity: 1;
    cursor: default;
  }

  .bb-fn-m--open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: var(--bbfn-drawer-backdrop-z);
    background: rgba(8, 8, 6, .55);
  }

  /* N20-B1.4 — der Schleier bekommt einen Namen.
     Die Abdunklung oben ist ein Pseudoelement und bleibt es: sie faerbt, ist
     aber fuer Tastatur und Screenreader gar nicht vorhanden. Der Knopf hier
     liegt transparent genau darueber und macht dieselbe Flaeche zu einem
     beschrifteten Bedienelement ("Menü schließen"). Optik unveraendert.
     tabindex="-1" im Markup ist Absicht: der Tab-Ring soll nicht ueber eine
     leere Flaeche laufen — der Kopf-Knopf und die Fussleiste sind die
     Tastaturwege, der Schleier ist der Zeigerweg. */
  .bb-fn-m-veil {
    display: none;
  }

  .bb-fn-m--open .bb-fn-m-veil {
    display: block;
    position: fixed;
    inset: 0;
    z-index: calc(var(--bbfn-drawer-backdrop-z) + 1);
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }

  /* N20-B1.6 — der Burger verschwindet, solange der Drawer offen ist.
     Gemessen 2026-08-14: er lag mit z-index `auto` unter der Drawer-Flaeche
     (z 1070); elementFromPoint auf seinem eigenen Mittelpunkt traf
     `bb-fn-m__home`. Der gehobene Header (#jtl-nav-wrapper z 1080) half nicht —
     der Burger sitzt in `nav.bb-fn-m`, nicht in dessen Stapelkontext.
     Statt ihn darueber zu heben (er saesse dann sichtbar auf dem Suchfeld des
     Drawers) faellt er weg: B1.2 liefert mit Kopf-Knopf, Fussleiste und
     Schleier drei bessere Ausgaenge.
     Fokus-sicher, und das ist der Grund, warum das hier stehen darf:
     closeDrawer() nimmt `bb-fn-m--open` ab, BEVOR es this.burger.focus()
     ruft — der Burger ist im Moment der Fokusrueckgabe also wieder da.
     Nebenwirkung mit Absicht: visible() filtert ihn solange aus dem Tab-Ring,
     der Ring umfasst damit nur noch den Drawer. Das ist fuer eine modale
     Flaeche das richtige Verhalten. */
  .bb-fn-m--open .bb-fn-m-burger {
    display: none;
  }

  /* N20-B1.2 — der Kopf-Knopf. Rund, 44 px Trefferflaeche, sitzt im
     68-px-Kopfraum des Drawers rechts oben. Er ist im Markup das erste
     fokussierbare Element: beim Oeffnen wird der Ausgang angesagt. */
  .bb-fn-m-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--bbfn-line);
    border-radius: 999px;
    background: #fff;
    color: var(--bbfn-ink);
    cursor: pointer;
  }

  .bb-fn-m-close__icon {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
  }

  /* Drawer haengt links (Owner-Entscheid 2026-07-09): Burger sitzt links im
     Header, der Panel-Drill bleibt konventionell von rechts. */
  .bb-fn-m--open .bb-fn-m__home {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: var(--bbfn-drawer-z);
    display: flex;
    flex-direction: column;
    width: min(92vw, 390px);
    height: 100dvh;
    overflow: hidden;
    padding: 68px 14px 0;
    background: var(--bbfn-panel-bg);
    color: var(--bbfn-ink);
    box-shadow: 24px 0 60px -24px rgba(0, 0, 0, .6);
  }

  .bb-fn-m__stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  /* PR-3: Suchfeld als fester Kopf ueber der scrollenden Stage — die Kopfzeilen-Suche
     liegt unter dem Full-Overlay-Drawer. Touch-Ziel 46px (Vorgabe >= 44px),
     Eingabe 16px, sonst zoomt iOS beim Fokus in das Feld hinein. */
  .bb-fn-m-search {
    display: flex;
    flex: 0 0 auto;
    gap: 6px;
    margin: 0 0 .6rem;
  }

  .bb-fn-m-search__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 46px;
    padding: 0 12px;
    font-family: var(--bbfn-body);
    font-size: 16px;
    line-height: 46px;
    color: var(--bbfn-ink);
    background: var(--bbfn-panel-bg-2);
    border: 1px solid var(--bbfn-line);
    border-radius: var(--bbfn-radius);
    -webkit-appearance: none;
    appearance: none;
  }

  .bb-fn-m-search__input::placeholder {
    color: var(--bbfn-ink-soft);
    opacity: 1;
  }

  .bb-fn-m-search__input:focus-visible {
    outline: 2px solid var(--bbfn-accent);
    outline-offset: 1px;
  }

  .bb-fn-m-search__button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    color: var(--bbfn-rail-fg);
    background: var(--bbfn-accent);
    border: 0;
    border-radius: var(--bbfn-radius);
    cursor: pointer;
  }

  .bb-fn-m-search__icon {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .bb-fn-m__l0,
  .bb-fn-m__panels {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    transition: transform var(--bbfn-in) var(--bbfn-ease);
  }

  .bb-fn-m__l0 {
    display: grid;
    /* Size each L0 row (e.g. a bb-fn-m-world section) to its CONTENT and let the
       fixed-height, absolutely-positioned container scroll (overflow-y:auto below).
       Without this, the implicit auto rows collapse to equal fractions of the
       container height, so a taller world (more categories) overflows its track and
       paints over the next world — the SHISHA/VAPE overlap found in D5 mobile QA
       2026-07-12 (docs/snapshots/2026-07-12-mobile-drawer-world-overlap-bug.md). */
    grid-auto-rows: max-content;
    align-content: start;
    gap: .5rem;
    transform: translateX(0);
  }

  .bb-fn-m__panels {
    transform: translateX(100%);
  }

  .bb-fn-m--panel-open .bb-fn-m__l0 {
    transform: translateX(-100%);
  }

  .bb-fn-m--panel-open .bb-fn-m__panels {
    transform: translateX(0);
  }

  /* N20-B4 — die Trefferliste ist eine dritte Flaeche in derselben Buehne.
     Sie wird bewusst NICHT ueber die Transform-Kette der beiden anderen
     gefahren: die Suche ist quer zur Tiefe (man sucht aus jeder Ebene heraus),
     eine vierte Stufe im Schiebemodell haette den Zustand vervielfacht. */
  .bb-fn-m__results {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--bbfn-panel-bg);
  }

  .bb-fn-m--search .bb-fn-m__results {
    display: block;
  }

  /* `display: none` und nicht `visibility` oder `inert`: nur display nimmt die
     verdeckten Flaechen aus dem Tab-Ring UND aus visible(), das den Ring
     berechnet. Bei `visibility: hidden` bliebe offsetWidth > 0, der Fokus liefe
     hinter die Trefferliste — und bei `inert` wuerde visible() sie weiter
     mitzaehlen und den Fokus auf ein Element schieben, das ihn nicht annimmt. */
  .bb-fn-m--search .bb-fn-m__l0,
  .bb-fn-m--search .bb-fn-m__panels {
    display: none;
  }

  .bb-fn-m-results__head {
    margin: 0 2px .5rem;
    font-family: var(--bbfn-mono);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bbfn-ink-soft);
  }

  .bb-fn-m-results__list {
    display: grid;
    gap: .4rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .bb-fn-m-result {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1px .5rem;
    width: 100%;
    min-height: 48px;
    padding: .5rem .6rem;
    border: 1px solid var(--bbfn-line);
    border-radius: var(--bbfn-radius);
    background: #fff;
    color: var(--bbfn-ink) !important;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }

  .bb-fn-m-result:active {
    border-color: var(--bbfn-accent);
    box-shadow: inset 0 0 0 1px var(--bbfn-accent);
  }

  .bb-fn-m-result__label {
    grid-column: 1;
    min-width: 0;
    font-family: var(--bbfn-body);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  .bb-fn-m-result__path {
    grid-column: 1;
    min-width: 0;
    font-family: var(--bbfn-mono);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--bbfn-ink-soft);
    overflow-wrap: anywhere;
  }

  .bb-fn-m-result__kind {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: center;
    padding: 2px 6px;
    border: 1px solid var(--bbfn-line);
    border-radius: 999px;
    font-family: var(--bbfn-mono);
    font-size: 9px;
    font-weight: 800;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
    color: var(--bbfn-ink-soft);
  }

  .bb-fn-m-result:focus-visible {
    outline: 2px solid var(--bbfn-accent);
    outline-offset: 2px;
  }

  /* N20-B3/B6 — `.bb-fn-m-accordion*` ist aus allen Selektorlisten dieses
     Blocks entfernt: der mobile Renderer erzeugt seit B3 keine Akkordeons mehr,
     jeder Bereich ist eine eigene Fläche. Die `.bb-fn-m-tree*`-Regeln BLEIBEN —
     der Baum ist der Fail-safe-Fall aus B2 (Kachelbox trägt nicht alle Welten)
     und wird dann weiterhin gerendert. */
  .bb-fn-m-stack,
  .bb-fn-m-tree,
  .bb-fn-m-panel__list,
  .bb-fn-linklist,
  .bb-fn-m-worldgrid,
  .bb-fn-m-row__list,
  .bb-fn-m-brandrow__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .bb-fn-m-stack,
  .bb-fn-m-tree,
  .bb-fn-m-tree-section,
  .bb-fn-m-world {
    display: grid;
    gap: .5rem;
  }

  .bb-fn-m-eyebrow {
    margin: 0 2px .45rem;
    font-family: var(--bbfn-mono);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bbfn-ink-soft);
  }

  .bb-fn-m-block,
  .bb-fn-m-top {
    border: 1px solid var(--bbfn-line);
    border-radius: var(--bbfn-radius);
    background: var(--bbfn-panel-bg-2);
    overflow: hidden;
  }

  .bb-fn-m-block {
    padding: 10px;
    min-height: 0;
  }

  .bb-fn-m-tree-section {
    min-height: 0;
  }

  .bb-fn-m-world {
    min-height: 0;
  }

  .bb-fn-m-world__title {
    margin: 0 2px .15rem;
    padding-inline-start: .55rem;
    border-inline-start: 2px solid var(--bb-fn-world-color);
    color: var(--bb-fn-world-color);
    font-family: var(--bbfn-mono);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  /* N20-B8 — zurueck auf KACHELN, aber mit Symbol statt Hintergrundfoto.
     Owner-Entscheid nach dem Zeilenlayout: „vorher die Kacheln, das war
     besser — aber Symbole". Das Foto lag vorher vollflaechig hinter dem Text
     und wurde dabei beschnitten („Feuerzeuge" als halber Kreis); jetzt steht
     es als Symbol im getoenten Quadrat ueber dem Namen, unbeschnitten.
     ⚠ Hoehenrechnung: 3 Reihen a 92 px + 2 Abstaende = 292 px Raster. Mit
     Eyebrow ~331 fuer den cards-Block; Ebene 0 traegt dazu brands-index 70 und
     eine Chipreihe 83, zusammen ~484 bei 647 px Buehne. Wer die Kachel hoeher
     macht, rechnet nach — das Kriterium „Ebene 0 ohne Scrollen" ist binaer. */
  .bb-fn-m-worldgrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
  }

  .bb-fn-m-worldcard {
    position: relative;
    display: grid;
    grid-template-rows: auto auto;
    align-content: center;
    justify-items: center;
    gap: .4rem;
    /* ⚠ 128 statt 92: gemessen waren zwischen dem letzten Block und der
       Daumenleiste **156 px frei**, bei drei Reihen also ~52 je Reihe. 128
       nimmt 36 davon und laesst ~46 px Rand — genug, damit ein laengerer
       Weltname zweizeilig werden darf, ohne dass Ebene 0 scrollt. Wer weiter
       hochgeht, misst den Freiraum neu (scripts: ebene0_freiraum). */
    min-height: 128px;
    width: 100%;
    padding: .8rem .5rem .85rem;
    border: 1px solid var(--bbfn-line);
    border-radius: var(--bbfn-radius);
    background: #fff;
    color: var(--bbfn-ink) !important;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 10px 24px -20px rgba(12, 12, 10, .45);
    overflow: hidden;
  }

  /* N20-B6/B8 — die Rasta-Kante der Kachel, wieder UNTEN.
     ⓘ `z-index` bleibt, obwohl kein Bildverlauf mehr darueber liegt: er hat
     sie seinerzeit sichtbar gemacht (von 2 px blieb unter dem Verlauf genau
     1 px uebrig) und kostet nichts. Eine Farbe prueft man gegen die
     Stapelordnung, nicht gegen den computed Wert. */
  .bb-fn-m-worldcard::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    height: 3px;
    background: var(--bbfn-accent);
  }

  .bb-fn-m-worldcard:active,
  .bb-fn-m-row__link:active,
  .bb-fn-m-footbar__button:active {
    border-color: var(--bbfn-accent);
    box-shadow: inset 0 0 0 1px var(--bbfn-accent);
  }

  /* N20-B9 — das Symbol traegt die Kachel: 80 statt 44 px, in der Einfassung
     als abgerundetes Quadrat (wie in der Zeilenfassung), nicht als Kreis.
     ⓘ `contain` bleibt: das Motiv wird gezeigt, nicht beschnitten — genau
     deshalb faellt der wechselnde Anschnitt der freigestellten Fotos hier
     nicht auf. Die Ursache bleibt N22. */
  .bb-fn-m-worldcard__media {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: var(--bbfn-radius);
    background: var(--bbfn-panel-bg-2);
    overflow: hidden;
  }

  .bb-fn-m-worldcard__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
  }

  /* ⓘ N20-B8: hier stand `object-fit: cover` fuer die Bildkachel. Das Foto
     wird jetzt als SYMBOL gezeigt — `contain` aus der Grundregel, also
     unbeschnitten. Kein eigener Override mehr noetig; der `--image`-Modifier
     bleibt als Klassenname, weil `--icon`/`--placeholder` sich davon
     unterscheiden muessen. */

  .bb-fn-m-worldcard__placeholder {
    font-family: var(--bbfn-mono);
    font-size: 13px;
    font-weight: 800;
    color: var(--bbfn-ink-soft);
  }

  /* N20-B8 — nur noch der Name, mittig unter dem Symbol. `anywhere` bleibt:
     „PAPERS & BLUNTS" muss in der halben Drawerbreite umbrechen duerfen, ohne
     die Kachel zu sprengen. */
  .bb-fn-m-worldcard__label {
    min-width: 0;
    display: grid;
    justify-items: center;
    overflow-wrap: anywhere;
    font-family: var(--bbfn-body);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.15;
  }

  .bb-fn-m-row__title {
    margin-bottom: .4rem;
    font-family: var(--bbfn-mono);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--bbfn-ink-soft);
  }

  .bb-fn-m-row__list {
    display: flex;
    flex-wrap: nowrap;
    gap: .45rem;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .bb-fn-m-row__item {
    flex: 0 0 auto;
  }

  .bb-fn-m-row__link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 44px;
    padding: 0 .65rem;
    border: 1px solid var(--bbfn-line);
    border-radius: var(--bbfn-radius);
    background: #fff;
    color: var(--bbfn-ink) !important;
    text-decoration: none;
    font-family: var(--bbfn-body);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
  }

  .bb-fn-m-row__icon {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    color: var(--bbfn-ink);
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .bb-fn-m-block--quick-links .bb-fn-m-row__link {
    border-color: var(--bbfn-accent);
  }

  .bb-fn-m-block--utility-row .bb-fn-m-eyebrow,
  .bb-fn-m-block--utility-row .bb-fn-m-row__label {
    color: var(--bbfn-ink-soft);
  }

  .bb-fn-m-block--utility-row {
    padding-block: 8px;
  }

  .bb-fn-m-block--utility-row .bb-fn-m-row__list {
    gap: .4rem;
  }

  .bb-fn-m-block--utility-row .bb-fn-m-row__link {
    min-height: 44px;
    padding-inline: .55rem;
    font-size: 13px;
  }

  .bb-fn-m-block--spacer {
    border: 0;
    background: none;
    padding: 0;
    overflow: visible;
  }

  .bb-fn-m-spacer--s {
    height: 4px;
  }

  .bb-fn-m-spacer--m {
    height: 10px;
  }

  .bb-fn-m-spacer--l {
    height: 20px;
  }

  .bb-fn-m-promo {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: center;
    gap: .65rem;
    min-height: 74px;
    padding: 10px;
    border: 1px solid var(--bbfn-line);
    border-radius: var(--bbfn-radius);
    background: var(--bbfn-panel-bg-2);
    color: var(--bbfn-ink);
  }

  .bb-fn-m-promo--dark {
    border-color: transparent;
    background: var(--bbfn-rail-bg);
    color: var(--bbfn-rail-fg);
  }

  .bb-fn-m-promo--accent {
    border-color: transparent;
    background: var(--bbfn-accent);
    color: #fff;
  }

  .bb-fn-m-promo__media {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: calc(var(--bbfn-radius) - 1px);
    background: #fff;
    overflow: hidden;
  }

  .bb-fn-m-promo__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .bb-fn-m-promo__body {
    display: grid;
    min-width: 0;
    gap: .3rem;
  }

  .bb-fn-m-promo__headline {
    font-family: var(--bbfn-body);
    font-size: 15px;
    font-weight: 900;
    line-height: 1.12;
    overflow-wrap: anywhere;
  }

  .bb-fn-m-promo__text {
    margin: 0;
    font-family: var(--bbfn-body);
    font-size: 12px;
    line-height: 1.35;
    color: var(--bbfn-ink-soft);
    overflow-wrap: anywhere;
  }

  .bb-fn-m-promo--dark .bb-fn-m-promo__text,
  .bb-fn-m-promo--accent .bb-fn-m-promo__text {
    color: currentColor;
  }

  .bb-fn-m-promo__cta {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 32px;
    padding: 0 .65rem;
    border: 1px solid var(--bbfn-accent);
    border-radius: 999px;
    background: #fff;
    color: var(--bbfn-ink) !important;
    text-decoration: none;
    font-family: var(--bbfn-mono);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
  }

  .bb-fn-m-promo--dark .bb-fn-m-promo__cta,
  .bb-fn-m-promo--accent .bb-fn-m-promo__cta {
    border-color: #fff;
  }

  .bb-fn-m-promo__arrow {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .bb-fn-m-brandrow__list {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .bb-fn-m-brandrow__list::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .bb-fn-m-brandrow__item {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .bb-fn-m-brandrow__chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 44px;
    padding: 0 .65rem;
    border: 1px solid var(--bbfn-line);
    border-radius: var(--bbfn-radius);
    background: #fff;
    color: var(--bbfn-ink) !important;
    text-decoration: none;
    font-family: var(--bbfn-body);
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
  }

  .bb-fn-m-brandrow__chip img {
    width: auto;
    max-width: 62px;
    height: 22px;
    object-fit: contain;
  }

  .bb-fn-m-brandrow__label {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .bb-fn-linklist {
    display: grid;
    gap: .4rem;
  }

  .bb-fn-linklist__title {
    margin-bottom: .45rem;
    font-family: var(--bbfn-mono);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--bbfn-ink-soft);
  }

  .bb-fn-linklist__link,
  .bb-fn-m-link,
  .bb-fn-m-top__button {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-height: 44px;
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--bbfn-ink) !important;
    text-align: left;
    text-decoration: none;
    font-family: var(--bbfn-body);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
  }

  .bb-fn-m-top__button {
    min-height: 76px;
    padding: 0 14px;
    justify-content: flex-start;
  }

  .bb-fn-m-uiicon,
  .bb-fn-m-chevron,
  .bb-fn-m-link__arrow,
  .bb-fn-m-footbar__icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .bb-fn-m-chevron {
    width: 16px;
    height: 16px;
    margin-left: auto;
    transition: transform var(--bbfn-in) var(--bbfn-ease);
  }

  .bb-fn-m-top__button[aria-expanded="true"] .bb-fn-m-chevron {
    transform: rotate(180deg);
  }

  .bb-fn-m-visual {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--bbfn-panel-bg);
    color: var(--bbfn-ink);
    overflow: hidden;
  }

  .bb-fn-m-visual--24 {
    width: 24px;
    height: 24px;
  }

  .bb-fn-m-visual--28 {
    width: 28px;
    height: 28px;
  }

  /* N20-B8 — die Blattzeilen tragen 32 statt 24 px. Die Zeile bleibt 44 hoch
     (Touch-Grenze), das Motiv wird um ein Drittel groesser: der Platz war da,
     er lag nur brach. */
  .bb-fn-m-visual--32 {
    width: 32px;
    height: 32px;
  }

  .bb-fn-m-visual--40 {
    width: 40px;
    height: 40px;
  }

  .bb-fn-m-visual__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .bb-fn-m-visual--icon-img .bb-fn-m-visual__img {
    padding: 3px;
    object-fit: contain;
  }

  .bb-fn-m-visual__initial {
    font-family: var(--bbfn-mono);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
  }

  .bb-fn-m-visual--40 .bb-fn-m-visual__initial {
    font-size: 15px;
  }

  .bb-fn-m-panel {
    border-top: 1px solid var(--bbfn-line);
    background: var(--bbfn-panel-bg);
  }

  .bb-fn-m-panel {
    min-height: 100%;
    border: 1px solid var(--bbfn-line);
    border-radius: var(--bbfn-radius);
    background: var(--bbfn-panel-bg-2);
    overflow: hidden;
  }

  .bb-fn-m-panel__header {
    display: grid;
    gap: .65rem;
    padding: 12px;
    border-bottom: 1px solid var(--bbfn-line);
    background: var(--bbfn-panel-bg);
  }

  .bb-fn-m-panel__title {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin: 0;
    padding: 0;
    font-family: var(--bbfn-body);
    font-size: 18px;
    font-weight: 900;
    line-height: 1.15;
    color: var(--bbfn-ink);
  }

  .bb-fn-m-panel__title-text {
    display: grid;
    min-width: 0;
    gap: .15rem;
  }

  .bb-fn-m-panel__label {
    overflow-wrap: anywhere;
  }

  .bb-fn-m-panel__subline {
    font-family: var(--bbfn-mono);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--bbfn-ink-soft);
  }

  .bb-fn-m-panel__list {
    display: grid;
    /* N20-B3 — .4rem → .3rem. Klingt nach Geschmack, ist Arithmetik: die
       größte Warengruppe hat 14 Kinder à 44 px Trefferfläche (A7, unantastbar),
       das sind 616 px Liste bei 645 px Bühne. Mit .4rem lag sie bei genau
       1,20× — bestanden, aber auf der Kante, und eine 15. Unterkategorie in
       der WAWI hätte das Kriterium gekippt. So bleiben ~2 Positionen Luft.
       ⚠ Der Zusammenhang ist hart: 1,2 Bühnen bei 44 px Zeilen heißt höchstens
       ~16 Kinder je Bereich. Wächst eine Warengruppe darüber, ist nicht der
       Test falsch, sondern die Fläche braucht ein anderes Modell. */
    gap: .3rem;
    padding: 8px 12px 12px;
  }

  .bb-fn-m-link {
    padding: 0 2px;
    font-weight: 600;
  }

  /* ── N20-B3 · die eine klebende Aktion ──────────────────────────────────
     Sie ersetzt 51 „Alle … anzeigen"-Knöpfe, die vorher je im Kopf ihrer
     Fläche standen. Zwei Gründe, und der zweite ist der harte: sie kostete
     44 px in JEDER Fläche (die größte Warengruppe stand damit bei 1,29
     Bühnenhöhen statt 1,16) und rund 7 KB Markup, die nach K4 auch das
     Desktop-Dokument mitträgt.
     Sie sitzt zwischen Bühne und Daumenleiste, also im Daumenbereich und
     außerhalb des Scrollflusses — sie scrollt nicht weg. */
  .bb-fn-m-action {
    flex: 0 0 auto;
    padding: .5rem 0 0;
  }

  .bb-fn-m-action[hidden] {
    display: none;
  }

  .bb-fn-m-action__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    min-height: 46px;
    padding: 0 .85rem;
    border: 1px solid var(--bbfn-accent);
    border-radius: 999px;
    background: var(--bbfn-accent);
    color: var(--bbfn-rail-fg) !important;
    font-family: var(--bbfn-body);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
  }

  .bb-fn-m-action__label {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .bb-fn-m-action__arrow {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .bb-fn-m-action__link:focus-visible {
    outline: 2px solid var(--bbfn-ink);
    outline-offset: 2px;
  }

  .bb-fn-m-link__label,
  .bb-fn-m-top__label {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* ── N20-B3 · Bereichszeile ─────────────────────────────────────────────
     Was vorher ein Akkordeon-Auslöser war, ist jetzt ein Wegweiser: der Pfeil
     zeigt nach rechts (es geht eine Ebene weiter), nicht nach unten (es klappt
     etwas auf). Die Zeile nennt gleich mit, wie viel dahinter liegt — das ist
     die Information, die vorher erst nach dem Aufklappen sichtbar wurde. */
  .bb-fn-m-branch {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    /* N20-B8 — 52 statt 48: die Zeile ist einzeilig geworden und traegt dafuer
       ein 40-px-Visual (vorher 24 px unter zwei Textzeilen). ⚠ Rechnung gegen
       das B3-Kriterium (Flaeche <= 1,2x Buehne): groesste Warengruppe 14 Kinder,
       14 x 52 = 728 bei 645 px Buehne = 1,13x. Wer hoeher geht, misst nach.
       ⚠ `.bb-fn-m-brandsopen` teilt diese Geometrie ausdruecklich — beide
       zusammen aendern, sonst liest sich der Markenauslöser als Fremdkoerper. */
    min-height: 52px;
    padding: 2px;
    border: 0;
    background: transparent;
    color: var(--bbfn-ink) !important;
    text-align: left;
    cursor: pointer;
  }

  .bb-fn-m-branch__text {
    display: grid;
    gap: 1px;
    min-width: 0;
    flex: 1 1 auto;
  }

  .bb-fn-m-branch__label {
    font-family: var(--bbfn-body);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  /* ⓘ N20-B8: `.bb-fn-m-branch__meta` (die Unterkategorienzahl) wird nicht mehr
     gerendert. Die Regel bleibt NICHT stehen — eine tote Regel liest sich beim
     naechsten Mal wie ein Element, das es gibt. Was sie kostete, steht jetzt
     im Bild: die Zeile ist einzeilig, und das Visual ist 40 statt 24 px. */

  .bb-fn-m-branch__arrow {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    padding: 3px;
    border: 1px solid var(--bbfn-line);
    border-radius: 999px;
    background: #fff;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .bb-fn-m-branch:focus-visible {
    outline: 2px solid var(--bbfn-accent);
    outline-offset: 2px;
  }

  /* Der Kopf der Unterfläche trägt kein 40-px-Visual: die größte Warengruppe
     hat 14 Kinder à 44 px Trefferfläche, und was der Kopf spart, entscheidet,
     ob die Fläche eine Bildschirmhöhe bleibt. */
  .bb-fn-m-panel__title--sub {
    font-size: 16px;
  }

  /* ── N20-B5 · Marken A–Z ────────────────────────────────────────────────
     Der Auslöser sitzt im Stack wie eine Bereichszeile — dieselbe Geometrie,
     damit er sich nicht als Fremdkörper liest. */
  .bb-fn-m-brandsopen {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    /* N20-B8 — mitgezogen mit `.bb-fn-m-branch` (s. dort). */
    min-height: 52px;
    padding: 2px;
    border: 0;
    background: transparent;
    color: var(--bbfn-ink) !important;
    text-align: left;
    cursor: pointer;
  }

  .bb-fn-m-brandsopen__icon {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .bb-fn-m-brandsopen__text {
    display: grid;
    gap: 1px;
    min-width: 0;
    flex: 1 1 auto;
  }

  .bb-fn-m-brandsopen__label {
    font-family: var(--bbfn-body);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
  }

  .bb-fn-m-brandsopen__meta {
    font-family: var(--bbfn-mono);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--bbfn-ink-soft);
  }

  /* ⚠ Diese Fläche ist ABSICHTLICH länger als eine Bildschirmhöhe — 218 Marken
     sind kein Panel, das man auf eine Seite zwingt. Deshalb ist sie vom
     B3-Kriterium („jede Fläche ≤ 1,2 × Bühne") ausgenommen, und deshalb trägt
     sie als einzige eine Buchstabenleiste: die ist hier das Navigationsmittel,
     das sonst „eine Bildschirmhöhe" wäre. */
  /* ⚠ `overflow: clip` statt des geerbten `hidden` aus `.bb-fn-m-panel` — und
     das ist die Bedingung dafür, dass die Buchstabenleiste überhaupt stehen
     bleibt. `position: sticky` orientiert sich am nächsten SCROLL-Vorfahren, und
     jeder Vorfahr mit `overflow ≠ visible` wird zu einem: die Leiste klebte
     dann an einem Kasten, der selbst nie scrollt, und wanderte mit der Liste
     hinaus (gemessen `y = -6511` bei Bühne `y = 158`). `clip` schneidet
     genauso ab, macht aber keinen Scroll-Container.
     Ältere Browser ohne `clip` (Safari < 16) fallen auf `hidden` zurück: dann
     ist die Leiste nicht klebend, aber sie steht am Anfang der Liste und bleibt
     benutzbar. Genau diese Reihenfolge ist gewollt. */
  .bb-fn-m-panel--brands {
    overflow: clip;
  }

  /* Zwei Spalten statt `float` + `sticky`: die Kombination ist fragil und
     `float: inline-end` braucht Chrome 118. Als Grid-Spalte kann die Leiste
     nichts überdecken, und `sticky` hält sie am oberen Rand der scrollenden
     Bühne. */
  .bb-fn-m-panel__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px;
    gap: 0 4px;
    padding: 8px 12px 12px;
  }

  .bb-fn-m-brandindex,
  .bb-fn-m-brandgroup__list {
    display: grid;
    gap: .3rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .bb-fn-m-brandindex {
    grid-column: 1;
    gap: .9rem;
  }

  .bb-fn-m-brandgroup__key {
    margin: 0 0 .35rem;
    padding-bottom: 2px;
    border-bottom: 2px solid var(--bbfn-accent);
    font-family: var(--bbfn-mono);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .08em;
    color: var(--bbfn-ink-soft);
  }

  .bb-fn-m-rail {
    grid-column: 2;
    position: sticky;
    top: 4px;
    align-self: start;
    display: grid;
    gap: 1px;
  }

  /* ⚠ 20 px hoch und damit unter der 44-px-Regel (A7) — begründet, nicht
     bequem: 27 Buchstaben à 44 px sind 1.188 px und passen in keine Bühne von
     645. Eine A–Z-Leiste ist ein Scrub-Ziel, kein Tap-Ziel; iOS Contacts und
     Android nutzen dieselben ~20 px. Bezahlt wird in der BREITE (28 px), und
     die Leiste ist nie der einzige Weg zu einer Marke — die Liste selbst und
     die Drawer-Suche führen auch hin. Die Ausnahme steht auch im Abnahmeskript. */
  .bb-fn-m-rail__key {
    min-height: 20px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--bbfn-ink-soft);
    font-family: var(--bbfn-mono);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
  }

  .bb-fn-m-rail__key:active {
    background: var(--bbfn-accent);
    color: #fff;
  }

  .bb-fn-m-rail__key:focus-visible {
    outline: 2px solid var(--bbfn-accent);
    outline-offset: 1px;
  }

  /* ── N20-B3 · Pfadzeile ─────────────────────────────────────────────────
     Sie steht über der Bühne und nicht darin: in der Bühne würde sie mit dem
     Panel wegscrollen, und ein Weg zurück, den man erst suchen muss, ist
     keiner. Auf Ebene 0 ist sie `hidden` — dort gibt es keinen Pfad, und die
     Ebene hat nur 183 px Luft. */
  .bb-fn-m-crumb {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 4px;
    margin: 0 0 .5rem;
    font-family: var(--bbfn-mono);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
  }

  .bb-fn-m-crumb[hidden] {
    display: none;
  }

  .bb-fn-m-crumb__item {
    min-height: 28px;
    padding: 2px 8px;
    border: 1px solid var(--bbfn-line);
    border-radius: 999px;
    background: #fff;
    color: var(--bbfn-ink) !important;
    font: inherit;
    text-transform: uppercase;
    letter-spacing: .04em;
    cursor: pointer;
  }

  .bb-fn-m-crumb__item:focus-visible {
    outline: 2px solid var(--bbfn-accent);
    outline-offset: 1px;
  }

  .bb-fn-m-crumb__here {
    min-width: 0;
    padding: 2px 2px;
    color: var(--bbfn-ink-soft);
    text-transform: uppercase;
    letter-spacing: .04em;
    overflow-wrap: anywhere;
  }

  .bb-fn-m-crumb__sep {
    color: var(--bbfn-ink-soft);
  }

  /* N20-B1.3 — drei Spalten statt zwei: Zurück · Home · Schließen.
     Die Leiste ist jetzt dauerhaft sichtbar (das `hidden` im Markup ist weg),
     deshalb traegt sie auf Ebene 0 den einzigen Daumen-Ausgang. */
  .bb-fn-m-footbar {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: .5rem;
    margin: 10px -14px 0;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--bbfn-line);
    background: var(--bbfn-panel-bg);
    box-shadow: 0 -12px 24px -20px rgba(0, 0, 0, .45);
  }

  .bb-fn-m-footbar[hidden] {
    display: none;
  }

  .bb-fn-m-footbar__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 44px;
    border: 1px solid var(--bbfn-line);
    border-radius: var(--bbfn-radius);
    background: #fff;
    color: var(--bbfn-ink);
    font-family: var(--bbfn-body);
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
  }

  /* Zurück auf Ebene 0: abgeblendet statt entfernt. Die Leiste behaelt ihre
     Hoehe, es springt beim Ebenenwechsel nichts. `disabled` nimmt den Knopf
     ausserdem von selbst aus dem Tab-Ring — FOCUSABLE schliesst
     button:not([disabled]) ein. */
  .bb-fn-m-footbar__button[disabled] {
    opacity: .4;
    cursor: default;
  }

  /* Schließen ist der Ausgang, nicht eine Navigationstaste unter dreien —
     er traegt deshalb die Akzentfarbe. */
  .bb-fn-m-footbar__button--close {
    border-color: var(--bbfn-accent);
    color: var(--bbfn-accent);
  }

  .bb-fn-m-burger:focus-visible,
  .bb-fn-m-close:focus-visible,
  .bb-fn-m-worldcard:focus-visible,
  .bb-fn-m-row__link:focus-visible,
  .bb-fn-m-top__button:focus-visible,
  .bb-fn-m-branch:focus-visible,
  .bb-fn-m-crumb__item:focus-visible,
  .bb-fn-m-action__link:focus-visible,
  .bb-fn-m-result:focus-visible,
  .bb-fn-m-footbar__button:focus-visible,
  .bb-fn-m-link:focus-visible,
  .bb-fn-linklist__link:focus-visible,
  .bb-fn-m-promo__cta:focus-visible,
  .bb-fn-m-brandrow__chip:focus-visible {
    outline: 2px solid var(--bbfn-accent);
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    .bb-fn-m__l0,
    .bb-fn-m__panels,
    .bb-fn-m-chevron {
      transition: none;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .bb-fn-m-worldcard,
    .bb-fn-m-row__link,
    .bb-fn-m-footbar__button {
      transition: border-color var(--bbfn-in) var(--bbfn-ease), box-shadow var(--bbfn-in) var(--bbfn-ease);
    }

    /* N20-B3 — die Richtung erzählt die Tiefe: von rechts herein heißt „eine
       Ebene tiefer", von links heißt „zurück". Die Animation läuft von selbst
       neu an, weil bei jedem Ebenenwechsel ein ANDERES Element aktiv wird —
       es braucht kein Zurücksetzen und keinen Reflow-Trick. */
    .bb-fn-m--forward .bb-fn-m-panel--active {
      animation: bb-fn-m-tiefer 180ms var(--bbfn-ease) both;
    }

    .bb-fn-m--back .bb-fn-m-panel--active {
      animation: bb-fn-m-zurueck 180ms var(--bbfn-ease) both;
    }

    @keyframes bb-fn-m-tiefer {
      from { opacity: .35; transform: translateX(14px); }
      to   { opacity: 1;   transform: none; }
    }

    @keyframes bb-fn-m-zurueck {
      from { opacity: .35; transform: translateX(-14px); }
      to   { opacity: 1;   transform: none; }
    }
  }
}

@media (min-width: 992px) {
  .bb-fn-m {
    display: none !important;
  }
}

@media (max-width: 640px) {
  .bb-fn-entry--mhide { display: none; } /* node_meta bMobileHidden, baked as a CSS class (vision §11.6) */
  .bb-fn-bar { flex-wrap: wrap; gap: 0; }
  /* T-M2: Link und Chevron nebeneinander, das Panel darunter ueber die volle Breite. */
  .bb-fn-entry { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; }
  .bb-fn-entry__link { padding: 14px 6px 14px 12px; font-size: 12px; }
  .bb-fn-entry:not(:has(> .bb-fn-entry__toggle)) > .bb-fn-entry__link { grid-column: 1 / -1; padding-right: 12px; }
  .bb-fn-entry__toggle { min-width: 44px; padding-inline: 0; }
  .bb-fn-panel { grid-column: 1 / -1; }
  .bb-fn-panel { position: static; opacity: 1; transform: none; box-shadow: none; border-radius: 0; }
  .bb-fn--js .bb-fn-entry:not(.bb-fn-entry--open) > .bb-fn-panel { display: none; } /* JS accordion in the drawer */
  .bb-fn-panel-inner { max-height: none; }
  .bb-fn-cols { flex-direction: column; }
  .bb-fn-region--left, .bb-fn-region--right { flex-basis: auto; }
  .bb-fn-index { grid-template-columns: 1fr; }
  .bb-fn-feature--band { flex-direction: column; align-items: stretch; }
  .bb-fn-feature--band .bb-fn-feature__media { flex: 0 0 auto; width: 100%; }

  /* JS drawer: burger toggles an off-canvas rail; bar hidden until opened */
  .bb-fn--js .bb-fn-burger {
    display: inline-flex; align-items: center; gap: .8ch; width: 100%; justify-content: flex-start;
    font-family: var(--bbfn-mono); font-size: 13px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--bbfn-rail-fg); background: none; border: 0; cursor: pointer;
    padding: 16px 18px;
  }
  .bb-fn--js .bb-fn-overflow { display: none; }
  .bb-fn-slider__btn { display: none !important; }   /* touch swipe on mobile; no arrows */
  .bb-fn--js .bb-fn-bar { display: none; }
  .bb-fn--js.bb-fn--drawer-open::before {
    content: ""; position: fixed; inset: 0; z-index: var(--bbfn-drawer-backdrop-z); background: rgba(8, 8, 6, .55); pointer-events: none;
  }
  .bb-fn--js.bb-fn--drawer-open .bb-fn-bar {
    display: flex; flex-direction: column; flex-wrap: nowrap;
    position: fixed; top: 0; right: 0; bottom: 0; left: auto; z-index: var(--bbfn-drawer-z);
    width: min(86vw, 360px); height: 100dvh; padding: 64px 0 32px; overflow-y: auto;
    background: linear-gradient(var(--bbfn-rail-bg), var(--bbfn-rail-bg-2));
    box-shadow: -24px 0 60px -24px rgba(0, 0, 0, .6);
  }
  .bb-fn--js.bb-fn--drawer-open .bb-fn-marker { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bb-fn-entry__link, .bb-fn-entry__link::after,
  .bb-fn-entry__toggle, .bb-fn-entry__toggle-icon, .bb-fn-panel__all-arrow,
  .bb-fn-panel, .bb-fn-panel::before, .bb-fn-link, .bb-fn-card, .bb-fn-card__media img,
  .bb-fn-crate__chip, .bb-fn-crate__chip img { transition: none !important; }
  .bb-fn-crate__chip:hover img { transform: none; }
  .bb-fn-panel { transform: none; }
  .bb-fn-panel::before { transform: scaleX(1); }
}