/** Shopify CDN: Minification failed

Line 1368:54 Unexpected "*"

**/
/* Startseite 2026 (Vorschau) — styles of the mbb-* sections.

   Idea: every Bearbrick shares one form, so the page plays with that form —
   one bear that changes its design (hero), comes out of a box (blind box),
   stands on a belt (arrivals). Each module is a full colour
   field of the shop's schemes (white, sand #f0eae4, lilac #eae4ee, ink
   #1a1a1a), bordeaux #a04b60 only for actions. Type: Roboto Flex (self-hosted,
   declared in sections/mbb-wechselbaer.liquid) — the hero headline at normal
   width so the fallback Roboto does not shift the layout when the font
   arrives, headings below the fold slightly wide.

   Motion answers the visitor (wipe, drag, tap). The only things that
   move by themselves are the hero changing every few seconds and the belt
   drifting — both stop on hover/focus, off screen and with reduced motion.
   The theme sets 1rem = 10px, so everything here is in px. */

:root {
  --mbb-tinte: #1a1a1a;
  --mbb-sand: #f0eae4;
  --mbb-lila: #eae4ee;
  --mbb-bordeaux: #a04b60;
  --mbb-rosa: #e3a6b6;
  --mbb-linie: rgba(26, 26, 26, 0.12);
  --mbb-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --mbb-feder: cubic-bezier(0.34, 1.56, 0.64, 1);
  --mbb-flex: 'MBB Flex', var(--font-heading-family), sans-serif;
  /* One rhythm for every section (operator, 02.11.2026: headings, left edge
     and space above were different in every section). Padding top and bottom
     follows the window height — on a laptop (570 px) the blind box and the
     hologram card still fit one screen —, the head block keeps one distance to
     its content. */
  --mbb-abstand: clamp(32px, 6.5vh, 72px);
  --mbb-kopf-abstand: 32px;
}
@media screen and (max-width: 749px) {
  :root { --mbb-abstand: 48px; --mbb-kopf-abstand: 24px; }
}

/* ── Text ──────────────────────────────────────────────────────────── */
.mbb-h1,
.mbb-h2,
.mbb-h3 {
  font-family: var(--mbb-flex);
  font-weight: 650;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}
.mbb-h1 { font-size: 68px; line-height: 68px; font-stretch: 100%; }
/* Every section heading has this size — no section sets its own. */
.mbb-h2 { font-size: 44px; line-height: 48px; font-stretch: 108%; }
.mbb-h3 { font-size: 30px; line-height: 36px; font-stretch: 104%; }
.mbb-titel { font-size: 20px; line-height: 28px; font-weight: 500; margin: 0; text-wrap: balance; }
.mbb-text-gross { font-size: 18px; line-height: 28px; margin: 0; text-wrap: pretty; }
.mbb-text { font-size: 16px; line-height: 24px; margin: 0; text-wrap: pretty; }
.mbb-text-klein { font-size: 14px; line-height: 20px; margin: 0; text-wrap: pretty; }
.mbb-gedaempft { color: rgba(var(--color-foreground), 0.72); }
@media screen and (max-width: 989px) {
  .mbb-h1 { font-size: 52px; line-height: 54px; }
  .mbb-h2 { font-size: 38px; line-height: 42px; }
}
@media screen and (max-width: 749px) {
  .mbb-h1 { font-size: 38px; line-height: 42px; }
  .mbb-h2 { font-size: 32px; line-height: 36px; }
  .mbb-h3 { font-size: 24px; line-height: 30px; }
  .mbb-text-gross { font-size: 16px; line-height: 24px; }
}

.mbb-abschnitt { padding: var(--mbb-abstand) 0; }
/* Over-line above a heading or a group, the same in every section (Blindbox
   and Wissen carry the identical values in their own rules). */
.mbb-ueberzeile,
.mbb-th__gruppe {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(var(--color-foreground), 0.72);
}

/* hidden must win over the display values of the module classes. */
[data-mbb] [hidden] { display: none !important; }

/* ── Controls ──────────────────────────────────────────────────────── */
.mbb-icon { width: 24px; height: 24px; flex: none; }
.mbb-knopf {
  min-height: 48px;
  padding: 12px 28px;
  font-size: 16px;
  font-weight: 600;
  transition: transform 300ms var(--mbb-ease);
}
.mbb-knopf:active { transform: scale(0.98); }
.mbb-textlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: rgb(var(--color-foreground));
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.mbb-textlink .mbb-icon { width: 18px; height: 18px; transition: transform 300ms var(--mbb-ease); }
.mbb-textlink:hover .mbb-icon { transform: translateX(4px); }
.mbb-rund {
  width: 44px;
  height: 44px;
  flex: none;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--mbb-linie);
  background: #fff;
  color: var(--mbb-tinte);
  cursor: pointer;
  transition: transform 200ms var(--mbb-ease), border-color 200ms var(--mbb-ease);
}
.mbb-rund:hover { border-color: var(--mbb-tinte); }
.mbb-rund:active { transform: scale(0.94); }
.mbb-rund .mbb-icon { width: 20px; height: 20px; }
.mbb-rund--hell { background: rgba(255, 255, 255, 0.92); border-color: transparent; }
.mbb-textlink:focus-visible,
.mbb-rund:focus-visible,
.mbb-wb__video:focus-visible,
.mbb-box__knopf:focus-visible,
.mbb-holo__knopf:focus-visible,
.mbb-band__bahn:focus-visible {
  outline: 2px solid rgb(var(--color-foreground));
  outline-offset: 4px;
}

/* ── 1 · Wechselbär (hero) ─────────────────────────────────────────── */
/* --wb-leiste: height of the caption bar under the bear (two reserved name lines
   + price line, the arrows are smaller); with --wb-leiste-abstand above it, it is
   part of the place held for the bear before its markup has arrived (below). */
.mbb-wb { padding: 40px 0 64px; overflow: hidden; --wb-leiste: 60px; --wb-leiste-abstand: 16px; }
.mbb-wb__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; }
.mbb-wb__text { max-width: 560px; }
/* Headline lines (sections/mbb-wechselbaer.liquid): a sentence per line, on
   narrow containers its two halves (below). */
.mbb-wb__satz { display: block; }
.mbb-wb__platz { display: none; }
.mbb-wb__suche { display: none; }
/* Own stacking context: the hint on the stage (z-index 4) painted over the sticky
   header (z-index 3) and over the search opened from the field below the
   headline (measured 03.11.2026; the only element on the page that did). */
.mbb-wb { isolation: isolate; }
.mbb-wb__unter { margin-top: 24px; max-width: 520px; }
.mbb-wb__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 32px; }
.mbb-wb__video {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 0;
  border: 0;
  background: none;
  color: rgb(var(--color-foreground));
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
/* Poster frame 16:9 with the play button on top — fixed size, so the image
   arriving later moves nothing. */
.mbb-wb__poster {
  position: relative;
  flex: none;
  width: 128px;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
  background: var(--mbb-tinte);
  box-shadow: 0 0 0 1px var(--mbb-linie), 0 6px 18px rgba(26, 26, 26, 0.18);
}
.mbb-wb__poster-bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms var(--mbb-ease);
}
.mbb-wb__play {
  position: relative;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  /* Dark on purpose: the poster (the video's title frame) is light. */
  background: var(--mbb-tinte);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85), 0 4px 14px rgba(26, 26, 26, 0.3);
  transition: transform 300ms var(--mbb-feder);
}
.mbb-wb__play .mbb-icon { width: 18px; height: 18px; margin-left: 3px; }
.mbb-wb__video:hover .mbb-wb__play { transform: scale(1.1); }
.mbb-wb__video:hover .mbb-wb__poster-bild { transform: scale(1.05); }
.mbb-wb__video-text { display: flex; flex-direction: column; gap: 2px; }
.mbb-wb__video-laenge { font-size: 13px; line-height: 18px; font-weight: 500; color: rgba(var(--color-foreground), 0.65); }
/* Overall rating (snippet mbb-bewertung-gesamt): five stars filled to the share
   of five — the full row is clipped over the empty one. In the hero two lines
   like the video card beside it, a link to the reviews; above the reviews the big
   figure (.mbb-note). */
.mbb-gesamt { display: inline-flex; align-items: center; gap: 8px; color: rgb(var(--color-foreground)); text-decoration: none; }
.mbb-gesamt__sterne { position: relative; display: inline-flex; flex: none; color: #ffa500; }
.mbb-gesamt__leer,
.mbb-gesamt__voll { display: flex; gap: 2px; }
.mbb-gesamt__voll { position: absolute; inset: 0 auto 0 0; width: var(--anteil, 100%); overflow: hidden; }
.mbb-gesamt__sterne svg { flex: none; width: 16px; height: 16px; }
.mbb-gesamt__leer svg { fill: none; stroke: currentColor; stroke-width: 1.2; }
.mbb-gesamt__voll svg { fill: currentColor; }
.mbb-gesamt--hero { flex-direction: column; align-items: flex-start; gap: 2px; }
.mbb-gesamt--hero .mbb-gesamt__zeile { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; line-height: 22px; }
.mbb-gesamt--hero strong { font-weight: 600; }
.mbb-gesamt__anzahl { font-size: 13px; line-height: 18px; font-weight: 500; color: rgba(var(--color-foreground), 0.65); text-decoration: underline; text-decoration-color: rgba(var(--color-foreground), 0.3); text-underline-offset: 3px; }
.mbb-gesamt--hero:hover .mbb-gesamt__anzahl { text-decoration-color: currentColor; }
.mbb-gesamt__quelle { white-space: nowrap; }
.mbb-gesamt__quelle img { display: inline-block; width: 14px; height: 14px; margin-right: 4px; border-radius: 3px; vertical-align: -2px; }
/* Big rating figure: the average large, stars above the count beside it — one look
   for the shop's rating above the reviews and the model's rating on the product page
   (operator 04.11.2026). */
.mbb-note { display: flex; align-items: center; gap: 14px; margin: 0; }
.mbb-note__zahl { font-size: 52px; line-height: 1; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.mbb-note__rest { display: flex; flex-direction: column; gap: 6px; }
.mbb-note .mbb-gesamt__sterne svg { width: 20px; height: 20px; }
.mbb-note__text { font-size: 14px; line-height: 20px; }
@media screen and (max-width: 749px) {
  .mbb-note__zahl { font-size: 44px; }
}
#bewertungen { scroll-margin-top: 24px; }
@media screen and (max-width: 749px) {
  .mbb-wb__poster { width: 112px; }
}
/* Tall desktop windows: the explainer as a real poster next to the larger photo
   (Betreiber 03.11.2026). Laptops keep the small one — the hero must fit their
   first screen. */
@media screen and (min-width: 990px) and (min-height: 800px) {
  .mbb-wb__video { gap: 20px; font-size: 18px; }
  .mbb-wb__poster { width: 232px; border-radius: 14px; }
  .mbb-wb__play { width: 60px; height: 60px; }
  .mbb-wb__play .mbb-icon { width: 22px; height: 22px; margin-left: 4px; }
}
/* Four points as a 2 × 2 grid (operator, 03.11.2026: three in a row broke into
   2 + 1 on the laptop). Each column as wide as its longest point, never wider
   than half the text column — then a point wraps inside its cell. */
.mbb-wb__punkte { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 12px 32px; }
.mbb-wb__punkte li { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; font-weight: 500; }
.mbb-wb__punkte .mbb-icon { flex: none; width: 20px; height: 20px; }

.mbb-wb__rahmen { position: relative; }
.mbb-wb__buehne {
  position: relative;
  aspect-ratio: 1 / 1;
  max-height: 72vh;
  margin: 0 auto;
  border-radius: 32px;
  background: radial-gradient(closest-side at 50% 46%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 100%);
  touch-action: pan-y;
  container-type: inline-size;
  user-select: none;
  -webkit-user-select: none;
  cursor: ew-resize;
}
/* A click opens the bear that fills the stage (mbb-start.js, gemeint). */
.mbb-wb__buehne.ist-klickbar { cursor: pointer; }
.mbb-wb__boden {
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 5%;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(26, 26, 26, 0.22), rgba(26, 26, 26, 0));
}
.mbb-figur { position: absolute; inset: 0; margin: 0; visibility: hidden; pointer-events: none; }
.mbb-figur.ist-aktiv { visibility: visible; z-index: 1; }
.mbb-figur.ist-naechste { visibility: visible; z-index: 2; clip-path: inset(0 0 0 calc(var(--kante, 1) * 100%)); }
.mbb-figur.ist-naechste.von-links { clip-path: inset(0 calc((1 - var(--kante, 0)) * 100%) 0 0); }
.mbb-figur__bild {
  position: absolute;
  left: 50%;
  bottom: 6%;
  height: 84%;
  width: auto;
  max-width: none;
  transform: translateX(-50%);
}
.mbb-figur__bild[data-gemessen] { transform-origin: 0 0; }
/* Box photos (Bildart „mit Verpackung“): opaque, square, own background — shown
   as a photo with a clear edge, rounded corners and a soft shadow, like the cards
   further down (Betreiber 03.11.2026, variant B). Until then the edges faded into
   the section, which read as a blurred photo. Each figure clips its own photo, so
   the wipe edge cuts a rounded picture; the photo is 4 % larger than the stage,
   which trims the grey strip some shots carry at a side. */
.mbb-wb--foto .mbb-wb__boden { display: none; }
.mbb-wb--foto .mbb-wb__buehne { border-radius: 20px; background: var(--mbb-sand); box-shadow: 0 20px 44px rgba(26, 26, 26, 0.14); }
.mbb-wb--foto .mbb-figur { overflow: hidden; border-radius: 20px; }
.mbb-wb--foto .mbb-figur__bild {
  inset: -2%;
  bottom: auto;
  left: -2%;
  width: 104%;
  height: 104%;
  object-fit: cover;
  transform: none;
}
.mbb-wb__kante {
  position: absolute;
  top: 3%;
  bottom: 3%;
  left: 0;
  transform: translateX(calc(var(--kante, 1) * 100cqw));
  z-index: 3;
  width: 2px;
  margin-left: -1px;
  background: var(--mbb-rosa);
  box-shadow: 0 0 18px 2px rgba(227, 166, 182, 0.9);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--mbb-ease);
}
.mbb-wb__buehne.zeigt-kante .mbb-wb__kante { opacity: 1; }
.mbb-wb__griff {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--mbb-tinte);
  box-shadow: 0 6px 20px rgba(26, 26, 26, 0.18);
  transform: translate(-50%, -50%);
}
.mbb-wb__griff .mbb-icon { width: 22px; height: 22px; }
.mbb-wb__hinweis {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--mbb-tinte);
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  pointer-events: none;
  transition: opacity 300ms var(--mbb-ease);
}
.mbb-wb__hinweis .mbb-icon { width: 18px; height: 18px; animation: mbb-nicken 1.6s var(--mbb-ease) infinite; }
.mbb-wb__hinweis.ist-weg { opacity: 0; }
@keyframes mbb-nicken {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-4px); }
}
.mbb-wb__leiste { display: flex; align-items: center; gap: 12px; height: var(--wb-leiste); margin-top: var(--wb-leiste-abstand); }
.mbb-wb__info { flex: 1; min-width: 0; margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
/* Up to two lines, balanced, the arrow flowing after the last word. The two lines
   are reserved (min-height): a bear with a one-line name after one with two
   would otherwise move everything below, every few seconds. A one-line name
   sits on the lower line (flex end), right above the price, so the price line
   never moves either. Only beyond two lines (rare after dropping the licence,
   see the section) the text is cut — the clamp sits on an inner wrapper,
   because -webkit-box ignores the alignment of its lines. */
.mbb-wb__name {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* Full width of the caption: shrunk to its text and centred, the box moved with
     every name (measured as layout shift while the bears change). */
  align-self: stretch;
  min-height: 40px;
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  color: rgb(var(--color-foreground));
  text-decoration: none;
}
.mbb-wb__zeilen {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-wrap: balance;
}
/* Names over 40 characters („Hieronymus Bosch "The Garden of Earthly Delights"“)
   need three lines at 15 px; at 13 px they fit two. Same line height, so the
   reserved height does not change. */
.mbb-wb__zeilen.ist-lang { font-size: 13px; }
.mbb-wb__name:hover [data-info-name] { text-decoration: underline; }
.mbb-wb__name .mbb-icon { display: inline-block; width: 15px; height: 15px; vertical-align: -2px; transition: transform 300ms var(--mbb-ease); }
.mbb-wb__name:hover .mbb-icon { transform: translateX(3px); }
/* Full width like the name: shrunk to its text and centred, the price line
   moved sideways between €219,00 and €1.499,00. */
.mbb-wb__meta { align-self: stretch; font-size: 14px; line-height: 20px; color: rgba(var(--color-foreground), 0.72); }
/* Fixed width: „9 / 11“ → „10 / 11“ would otherwise narrow the caption next to it. */
.mbb-wb__zaehler { min-width: 48px; text-align: center; font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums; color: rgba(var(--color-foreground), 0.6); }
/* Wide screens: compact. A laptop at 150 % scaling is about 1,220 × 570 CSS px,
   and the shop's header already takes 226 px of it — the first version (text in
   a 5fr column, square stage in 7fr) made the hero 748 px tall: headline in four
   lines, buttons and points wrapped, the bear centred in a column far wider than
   itself with its label at the column's edge. Now the text gets the width
   (headline in two lines, buttons and points in one row each), the bear a
   portrait stage exactly as wide as it needs (min-content column), its height
   following the window, and name and price right under its feet. Sizes scale
   with the window height (vh) so the hero shrinks on short screens first.
   - The right column has a FIXED width (stage width, at least 320 px for the
     caption). Sized by its content it followed the longest name, and every
     change of the bear would have moved the stage (layout shift).
   - The headline is set in fixed lines (a sentence each, halves on narrow
     containers) and follows the width of its own column (cqi), not the window.
     Its widest sentence „Europas größte Bearbrick-Auswahl.“ measures 15.8 em in
     MBB Flex 650, 15.3 em in Roboto (the theme font, painted before MBB Flex has
     arrived) and 16.3 em in Arial (before either has); its widest half
     „Bearbrick-Auswahl.“ 8.7 / 8.5 / 9.0 em. Every size is chosen so the widest
     of the three fits with 3 % to spare: sentences at 5.8cqi, halves at 10.5cqi,
     at the 30 px floor sentences only from a 505 px column (16.3 em × 30 px ×
     1.03) — narrower, the halves. Left to the browser, the lines broke
     differently per font at 320–360, 575–630 and 990–1035 px, and the hero
     below jumped up to 42 px when MBB Flex arrived. Changing the headline means
     measuring again (all three; erp/shopify-theme-startseite-2026/README.md).
   - The bear fills 74 % of the stage instead of 80 %, so the hint in the top
     right corner clears its ears even on the smallest stage. The hint sits in
     the corner of the COLUMN, not of the stage: on a short screen the stage is
     narrower than the hint (192 px at 1,220 × 570), the hint wrapped and
     covered the head.
   - Stage height capped at 460 px: taller, the text stood in a sea of space
     next to a 540 px bear (1,440 × 900). */
@media screen and (min-width: 990px) {
  .mbb-wb {
    --wb-h: clamp(240px, calc(100vh - 360px), 460px);
    /* Width : height of the stage — portrait for a cut-out bear, square for the
       square box photos (and a lower cap, so the text column keeps its width). */
    --wb-format: 0.8;
    --wb-spalte: max(calc(var(--wb-h) * var(--wb-format)), 320px);
    padding: clamp(16px, 3vh, 40px) 0 clamp(24px, 4.5vh, 56px);
    --wb-leiste-abstand: 8px;
    --wb-rahmen-h: calc(var(--wb-h) + var(--wb-leiste-abstand) + var(--wb-leiste));
  }
  /* Box photos up to 500 px (Betreiber 03.11.2026: room to spare on tall screens);
     the formula below the cap is unchanged, so laptops keep their first screen. */
  .mbb-wb--foto { --wb-h: clamp(240px, calc(100vh - 360px), 500px); --wb-format: 1; }
  .mbb-wb--foto .mbb-wb__buehne { aspect-ratio: 1; }
  /* Row and bear have their full height before the bear's markup has arrived:
     the text column comes first and is centred against the row — with the row
     growing when the bear (then its caption, after the 16 figures) arrived, the
     text moved down and the bear up (measured with the HTML cut in two). */
  .mbb-wb__raster { grid-template-columns: minmax(0, 1fr) var(--wb-spalte); grid-template-rows: minmax(var(--wb-rahmen-h), auto); gap: clamp(32px, 4vw, 64px); }
  .mbb-wb__rahmen { min-height: var(--wb-rahmen-h); }
  .mbb-wb__text { max-width: 720px; container: mbb-wb-text / inline-size; }
  .mbb-wb .mbb-h1 { font-size: clamp(30px, min(5.8cqi, 8vh), 72px); line-height: 1.04; }
  .mbb-wb__unter { margin-top: clamp(12px, 2.4vh, 24px); max-width: 600px; }
  .mbb-wb__aktionen,
  .mbb-wb__punkte { margin-top: clamp(16px, 3.2vh, 32px); }
  .mbb-wb__buehne { --wb-figur: 0.74; width: auto; height: var(--wb-h); max-height: none; aspect-ratio: 4 / 5; }
  /* The column is as narrow as the bear: the counter would squeeze the name. */
  .mbb-wb__zaehler { display: none; }
  .mbb-wb__hinweis {
    top: 10px;
    right: calc(10px - (var(--wb-spalte) - var(--wb-h) * var(--wb-format)) / 2);
    padding: 6px 12px;
    font-size: 13px;
    line-height: 18px;
    white-space: nowrap;
  }
}
/* Headline halves where the sentences would not fit with 3 % to spare (see
   above): desktop columns under 505 px (30 px floor), narrow screens under
   655 px (where the halves reach their 38 px cap and the sentences would start
   at 38 px — the size stays continuous at the switch). */
@container mbb-wb-text (max-width: 504px) {
  .mbb-wb__halb { display: block; }
}
/* Narrow screens: headline, then the bear, then the action — the bear is the
   reason to stay, it has to be in the first screen. */
@media screen and (max-width: 989px) {
  .mbb-wb__raster { grid-template-columns: minmax(0, 1fr); gap: 0; container: mbb-wb-text / inline-size; }
  .mbb-wb__text { display: contents; }
  /* Phones: four lines (the halves) at 10.5cqi up to 38 px — 30.5 px at 320,
     37.8 px at 390. Tablets from a 655 px content width: two lines (the
     sentences) at 5.8cqi up to 52 px. */
  .mbb-wb__text .mbb-h1 { grid-row: 1; font-size: min(10.5cqi, 38px); line-height: 1.1; }
  @container mbb-wb-text (max-width: 654px) {
    .mbb-wb__halb { display: block; }
  }
  @container mbb-wb-text (min-width: 655px) {
    .mbb-wb__text .mbb-h1 { font-size: min(5.8cqi, 52px); }
  }
  /* Explicit rows instead of order: the bear (row 2) comes after the text in the
     markup, and with order the buttons took its place until it arrived. The
     placeholder (sections/mbb-wechselbaer.liquid) shares row 2 and has the
     bear's height — margin, square stage (as wide as the column, at most
     --wb-buehne-max high), caption — so nothing moves when the bear arrives. */
  .mbb-wb { --wb-buehne-max: 52vh; }
  /* Both with an explicit column: two items with a row but no column in the
     same cell make the grid open a second column for the later one. The bear
     hangs from the top of the cell: centred, it moved up 34 px when its
     caption arrived after the stage. */
  /* Search under the headline (row 2), so it is in the first screen. */
  .mbb-wb__suche {
    grid-row: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    margin-top: 16px;
    padding: 0 18px;
    border: 1px solid rgba(var(--color-foreground), 0.25);
    border-radius: 24px;
    background: rgb(var(--color-background));
    color: rgba(var(--color-foreground), 0.65);
    font-size: 16px;
    line-height: 20px;
    text-decoration: none;
  }
  .mbb-wb__suche .mbb-icon { flex: none; width: 20px; height: 20px; color: rgb(var(--color-foreground)); }
  .mbb-wb__suche span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .mbb-wb__suche:focus-visible { outline: 2px solid rgb(var(--color-foreground)); outline-offset: 2px; }
  .mbb-wb__platz { display: block; grid-area: 3 / 1; height: calc(16px + min(100cqi, var(--wb-buehne-max)) + var(--wb-leiste-abstand) + var(--wb-leiste)); }
  .mbb-wb__rahmen { grid-area: 3 / 1; align-self: start; margin-top: 16px; }
  .mbb-wb__aktionen { grid-row: 4; margin-top: 20px; }
  .mbb-wb__unter { grid-row: 5; margin-top: 24px; max-width: 640px; }
  .mbb-wb__punkte { grid-row: 6; margin-top: 24px; }
  .mbb-wb__buehne { max-height: var(--wb-buehne-max); }
}
@media screen and (max-width: 749px) {
  .mbb-wb { padding: 20px 0 48px; --wb-buehne-max: 40vh; --wb-leiste-abstand: 8px; }
  /* One column: in two columns of 164 px (390 px screen) every point wrapped. */
  .mbb-wb__punkte { grid-template-columns: minmax(0, 1fr); }
  /* The caption sits between arrows and counter (188 px): 13 px still took three lines. */
  .mbb-wb__zeilen.ist-lang { font-size: 12px; }
  .mbb-wb__hinweis { top: 8px; right: 8px; }
}

/* The dialog is as large as the video can be shown WHOLE: capped by the width
   (1,120 px, 94 % of the window) and by the window height through the video's
   own aspect ratio (set on the element from the video object, 16:9 fallback).
   Sized by width alone, the 16:9 video was 630 px tall at 1,120 px — on a laptop
   at 150 % scaling (about 570 CSS px high) the browser's max-height for modal
   dialogs cut off its bottom, controls included. Scaled, never cropped: the
   texts are part of the picture. dvh after vh: the mobile toolbar takes height. */
.mbb-dialog {
  --mbb-dialog-rand: 24px;
  width: min(1120px, 94vw, calc((100vh - 2 * var(--mbb-dialog-rand)) * var(--mbb-video-format, 1.7777)));
  width: min(1120px, 94vw, calc((100dvh - 2 * var(--mbb-dialog-rand)) * var(--mbb-video-format, 1.7777)));
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: #000;
  overflow: hidden;
}
.mbb-dialog::backdrop { background: rgba(26, 26, 26, 0.78); backdrop-filter: blur(4px); }
.mbb-dialog video { display: block; width: 100%; height: auto; aspect-ratio: var(--mbb-video-format, 1.7777); }
.mbb-dialog__kopf { position: absolute; top: 12px; right: 12px; z-index: 2; margin: 0; }
/* Link to the watch page (A-655), top left opposite the close button. */
.mbb-dialog__mehr {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 100px;
  background: rgba(26, 26, 26, 0.62);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 200ms;
}
.mbb-dialog__mehr:hover { background: rgba(26, 26, 26, 0.85); }
.mbb-dialog__mehr:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.mbb-dialog__mehr .mbb-icon { width: 16px; height: 16px; fill: currentColor; }
/* Phones held upright where no landscape full screen is possible: a hint over
   the video; taps go through to the player. */
.mbb-dialog__drehen {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: calc(100% - 48px);
  margin: 0;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(26, 26, 26, 0.82);
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  text-align: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.mbb-dialog__drehen[hidden] { display: none; }
.mbb-dialog__drehen .mbb-icon { width: 28px; height: 28px; animation: mbbDrehen 2.4s var(--mbb-ease) infinite; }
@keyframes mbbDrehen { 0%, 25% { transform: rotate(0); } 50%, 85% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) { .mbb-dialog__drehen .mbb-icon { animation: none; transform: rotate(-90deg); } }
/* Phone held sideways: less margin around the video, it takes the height. */
@media screen and (orientation: landscape) and (max-height: 500px) {
  .mbb-dialog { --mbb-dialog-rand: 8px; }
}

/* ── 2 · Themen ───────────────────────────────────────────────────── */
/* One markup, two layouts (sections/mbb-themen.liquid): from 990 px a
   panorama per group, below a bento grid. Both keep the crop of a scene
   between about 0.9 : 1 and 1.8 : 1, so one 3 : 2 master per theme fits every
   tile (README „Szenenbilder“). Movement only via transform, clip-path and
   opacity. */
.mbb-th__kopf { max-width: 680px; margin-bottom: var(--mbb-kopf-abstand); }
.mbb-th__kopf .mbb-text-gross { margin-top: 16px; }
.mbb-th__gruppe { margin: 40px 0 12px; }
.mbb-th__flaeche { container-type: inline-size; }
.mbb-th__kachel {
  position: relative;
  display: block;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  background: #2a2626;
}
.mbb-th__bild { display: block; object-fit: cover; }
.mbb-th__schleier {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.62) 100%);
  pointer-events: none;
}
.mbb-th__name { font-family: var(--mbb-flex); font-weight: 700; letter-spacing: -0.015em; }
.mbb-th__kurz { opacity: 0.88; }
/* „43 Modelle“ — product count of the tile's collection (mbb-themen). */
.mbb-th__zahl { font-size: 14px; line-height: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mbb-th__los { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.mbb-th__los .mbb-icon { width: 20px; height: 20px; }
.mbb-th__kachel--alle { background: var(--mbb-bordeaux); }
.mbb-th__fuss { margin-top: 28px; }

/* Panorama. Every strip is a full-width layer; clip-path cuts it to
   [--l, --l + --w]. --offen (width of the open strip, % of the row) places the
   layers, --offen-px (the same in px, from the container width) sizes the
   row: the open strip stays between 0.95 : 1 (narrow windows) and about
   1.4 : 1 (closed strips widen instead of the open one growing). */
@media screen and (min-width: 990px) {
  .mbb-th__reihe {
    /* On the page grid like every heading and every other section (the
       container is the page-width box, 100cqi is its content width). */
    --breite: 100cqi;
    --luecke: 6px;
    --zu: clamp(40px, (var(--breite) - 730px) / max(var(--n) - 1, 1) - var(--luecke), 90px);
    --offen: calc(100% - (var(--n) - 1) * (var(--zu) + var(--luecke)));
    /* The height comes from the WORLD row: the finishes row gets its strip
       count as --n-hoehe from the section, so both rows stand equally high. */
    --n-hoehe: var(--n);
    --zu-hoehe: clamp(40px, (var(--breite) - 730px) / max(var(--n-hoehe) - 1, 1) - var(--luecke), 90px);
    --offen-hoehe: calc(var(--breite) - (var(--n-hoehe) - 1) * (var(--zu-hoehe) + var(--luecke)));
    position: relative;
    width: var(--breite);
    height: clamp(300px, min(100vh - 170px, var(--offen-hoehe) / 0.95), 520px);
    margin: 0 auto;
    overflow: hidden;
    border-radius: 18px;
  }
  /* Finishes: the open card is exactly as wide as the world row's
     (--offen-hoehe), the closed strips share the rest — same scheme, same crop
     of the photo (operator 04.11.2026: with eight finishes the former 90-px
     minimum per strip left the open card 428 px against 548 px above, and the
     outer figures were cut). With more finishes than worlds the strips stop
     at 40 px and the open card gets narrower. */
  .mbb-th__reihe--klein {
    --zu: max(40px, (var(--breite) - var(--offen-hoehe)) / max(var(--n) - 1, 1) - var(--luecke));
  }
  .mbb-th__kachel {
    position: absolute;
    inset: 0;
    clip-path: inset(0 calc(100% - var(--l) - var(--w)) 0 var(--l) round 18px);
    transition: clip-path 650ms var(--mbb-ease);
  }
  .mbb-th__kachel--alle { display: none; }
  .mbb-th__bildebene {
    position: absolute;
    inset: 0;
    transform: translateX(calc(var(--l) + var(--w) / 2 - var(--offen) / 2));
    transition: transform 650ms var(--mbb-ease);
  }
  .mbb-th__bild {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--offen);
    height: 100%;
    transform: scale(1.06);
    filter: saturate(0.75) brightness(0.8);
    transition: transform 900ms var(--mbb-ease), filter 400ms var(--mbb-ease);
  }
  .mbb-th__kachel.ist-offen .mbb-th__bild { transform: scale(1); filter: none; }
  .mbb-th__ebene {
    position: absolute;
    inset: 0;
    transform: translateX(var(--l));
    transition: transform 650ms var(--mbb-ease);
    pointer-events: none;
  }
  /* The vertical name is drawn from data-titel: as text it would stand in the
     HTML twice per tile (Betreiber 02.11.2026: no wording twice on the page). */
  .mbb-th__senkrecht::before { content: attr(data-titel); }
  .mbb-th__senkrecht {
    position: absolute;
    left: calc(var(--zu) / 2);
    bottom: 22px;
    transform-origin: 0 0;
    transform: rotate(-90deg) translateY(-50%);
    white-space: nowrap;
    font-family: var(--mbb-flex);
    font-size: 17px;
    line-height: 20px;
    font-weight: 650;
    font-stretch: 110%;
    letter-spacing: 0.01em;
    transition: opacity 300ms var(--mbb-ease);
  }
  .mbb-th__text {
    position: absolute;
    left: 32px;
    bottom: 30px;
    width: calc(var(--offen) - 64px);
    display: flex;
    flex-direction: column;
    gap: 6px;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 300ms var(--mbb-ease), transform 500ms var(--mbb-ease);
  }
  .mbb-th__name { font-size: 46px; line-height: 48px; font-stretch: 112%; }
  .mbb-th__kurz { font-size: 16px; line-height: 22px; }
  .mbb-th__los { margin-top: 10px; font-size: 15px; }
  .mbb-th__kachel.ist-offen .mbb-th__senkrecht { opacity: 0; }
  .mbb-th__kachel.ist-offen .mbb-th__text { opacity: 1; transform: none; transition-delay: 220ms; }
  .mbb-th__kachel:focus-visible { outline: none; }
  .mbb-th__kachel:focus-visible .mbb-th__ebene::after {
    content: '';
    position: absolute;
    inset: 6px auto auto 6px;
    width: calc(var(--w) - 12px);
    height: calc(100% - 12px);
    border: 2px solid #fff;
    border-radius: 14px;
  }
}

/* Bento. Six columns, rows as tall as a column (capped on tablets), tiles by
   their position in the group: 1 large, 2–3 and 12–13 square, 7–8 wide, the
   rest small; the finishes small, „Alle Modelle“ across. The section's sizes
   attribute follows the same list. */
@media screen and (max-width: 989px) {
  .mbb-th__reihe {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: min((100cqi - 40px) / 6, 96px);
    gap: 8px;
  }
  .mbb-th__kachel {
    grid-column: span 2;
    grid-row: span 2;
    border-radius: 16px;
    isolation: isolate;
    container-type: inline-size;
  }
  .mbb-th__reihe--welten > :nth-child(1) { grid-column: span 6; grid-row: span 5; }
  .mbb-th__reihe--welten > :nth-child(2),
  .mbb-th__reihe--welten > :nth-child(3),
  .mbb-th__reihe--welten > :nth-child(12),
  .mbb-th__reihe--welten > :nth-child(13) { grid-column: span 3; grid-row: span 3; }
  .mbb-th__reihe--welten > :nth-child(7),
  .mbb-th__reihe--welten > :nth-child(8) { grid-column: span 3; }
  .mbb-th__kachel--alle { grid-column: span 6; }
  .mbb-th__bildebene,
  .mbb-th__ebene { position: absolute; inset: 0; }
  .mbb-th__ebene { pointer-events: none; }
  .mbb-th__bild { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform 900ms var(--mbb-ease); }
  .mbb-th__senkrecht { display: none; }
  .mbb-th__text { position: absolute; left: 12px; right: 12px; bottom: 11px; display: flex; flex-direction: column; gap: 3px; }
  .mbb-th__name { font-size: clamp(15px, 12cqi, 40px); line-height: 1.05; font-stretch: 94%; hyphens: auto; overflow-wrap: break-word; }
  .mbb-th__kurz { display: none; font-size: 13px; line-height: 17px; }
  .mbb-th__zahl { font-size: 12px; line-height: 16px; }
  .mbb-th__los { display: none; }
  .mbb-th__kachel--alle .mbb-th__text { right: 64px; }
  .mbb-th__kachel--alle .mbb-th__name { font-size: clamp(20px, 6.5cqi, 28px); }
  .mbb-th__kachel--alle .mbb-th__kurz { display: block; }
  .mbb-th__pfeil {
    position: absolute;
    right: 14px;
    bottom: 12px;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    color: var(--mbb-tinte);
  }
  .mbb-th__kachel:focus-visible { outline: 2px solid var(--mbb-tinte); outline-offset: 3px; }
  .mbb-th__fuss { display: none; }
  @container (min-width: 170px) {
    .mbb-th__kurz { display: block; }
  }
}
@media screen and (max-width: 749px) {
  /* Phones: each group is one row to swipe instead of the bento (operator,
     03.11.2026: the bento took 2.2 screens) — the worlds in two lines, the
     special editions in one, every tile the same square. The next column peeks
     in at the right edge, so the row says that it goes on; the row runs to the
     screen edge and snaps to the page margin. */
  .mbb-th__flaeche { padding-inline: 0; }
  .mbb-th__reihe {
    --kachel: min(40vw, 168px);
    grid-template-columns: none;
    grid-template-rows: repeat(2, var(--kachel));
    grid-auto-flow: column;
    grid-auto-columns: var(--kachel);
    grid-auto-rows: var(--kachel);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 15px;
    padding: 0 15px;
    scrollbar-width: none;
  }
  .mbb-th__reihe::-webkit-scrollbar { display: none; }
  .mbb-th__reihe--klein { grid-template-rows: var(--kachel); }
  .mbb-th__reihe > .mbb-th__kachel { grid-column: auto; grid-row: auto; scroll-snap-align: start; }
  /* The examples („Iron Man, Spider-Man, Wolverine“) cover too much of the
     small tiles (Betreiber 03.11.2026); from tablets on they stay. */
  .mbb-th__kachel:not(.mbb-th__kachel--alle) .mbb-th__kurz { display: none; }
  .mbb-th__kachel--alle .mbb-th__text { right: 12px; bottom: 58px; }
  .mbb-th__kachel--alle .mbb-th__name { font-size: 20px; }
}
/* Tablets: twelve columns with the same tiles, so two phone rows stand side by
   side (six columns there made the selection 2,800 px high); dense packing
   fills the gaps the large tile leaves. */
@media screen and (min-width: 750px) and (max-width: 989px) {
  .mbb-th__reihe {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: calc((100cqi - 88px) / 12);
    grid-auto-flow: dense;
  }
  /* The last pair would fill only half a row: each takes half, 1.5 : 1. */
  .mbb-th__reihe--welten > :nth-child(12),
  .mbb-th__reihe--welten > :nth-child(13) { grid-column: span 6; grid-row: span 4; }
  .mbb-th__kachel--alle { grid-column: span 12; }
  /* Special editions four per row; the last row filled as on phones. */
  .mbb-th__reihe--klein > .mbb-th__kachel:not(.mbb-th__kachel--alle) { grid-column: span 3; grid-row: span 3; }
  .mbb-th__reihe--klein > .mbb-th__kachel:nth-child(4n + 1):nth-last-child(2) { grid-column: span 12; grid-row: span 4; }
  .mbb-th__reihe--klein > .mbb-th__kachel:nth-child(4n + 1):nth-last-child(3),
  .mbb-th__reihe--klein > .mbb-th__kachel:nth-child(4n + 2):nth-last-child(2) { grid-column: span 6; }
  .mbb-th__reihe--klein > .mbb-th__kachel:nth-child(4n + 1):nth-last-child(4),
  .mbb-th__reihe--klein > .mbb-th__kachel:nth-child(4n + 2):nth-last-child(3),
  .mbb-th__reihe--klein > .mbb-th__kachel:nth-child(4n + 3):nth-last-child(2) { grid-column: span 4; }
}
@media screen and (max-width: 989px) and (hover: hover) and (pointer: fine) {
  .mbb-th__kachel:hover .mbb-th__bild { transform: scale(1.05); }
}

/* Stage for themes without a scene photo (snippets/mbb-themen-szene.liquid).
   Own stacking context: the front figure's z-index must not lift it above the
   name of the tile. */
.mbb-szene {
  display: block;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, transparent 0 72%, rgba(0, 0, 0, 0.28) 72% 100%),
    radial-gradient(120% 90% at 50% 25%, color-mix(in srgb, var(--ton) 55%, #fff) 0%, var(--ton) 62%, color-mix(in srgb, var(--ton) 70%, #000) 100%);
}
.mbb-szene__figur {
  position: absolute;
  bottom: 9%;
  height: 64%;
  aspect-ratio: 1;
  transform: translateX(-50%);
}
.mbb-szene__figur img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.35)); }
.mbb-szene__figur--1 { left: 28%; }
.mbb-szene__figur--2 { left: 50%; height: 74%; bottom: 7%; z-index: 1; }
.mbb-szene__figur--3 { left: 72%; }
.mbb-szene__figur--1:only-child { left: 50%; height: 74%; }

/* ── 2b · Bewertungen (Mosaik) ───────────────────────────────────── */
/* Four reviews at a glance instead of a slideshow: the heading is the first
   column, then a tall tile (customer photo), two small and a wide quote tile.
   Each bought bear peeks over the edge of its tile. Tiles have fixed sizes, so
   dealing new reviews turns them over without moving anything (CLS). */
.mbb-bw { padding: var(--mbb-abstand) 0; }
.mbb-bw__raster { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 3fr); gap: 16px 40px; }
.mbb-bw__kopf { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.mbb-bw__hinweis { max-width: 340px; }
.mbb-bw__steuerung { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.mbb-bw__mischen { display: inline-flex; align-items: center; gap: 10px; }
.mbb-bw__mischen .mbb-icon { width: 20px; height: 20px; transition: transform 500ms var(--mbb-ease); }
.mbb-bw__mischen:hover .mbb-icon { transform: rotate(180deg); }
.mbb-bw__zaehler { font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums; color: rgba(var(--color-foreground), 0.65); }

.mbb-bw__kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 184px 184px; gap: 16px; }
.mbb-bw__platz { position: relative; min-width: 0; perspective: 1000px; }
.mbb-bw__platz--hoch { grid-column: 1; grid-row: 1 / 3; }
.mbb-bw__platz--breit { grid-column: 2 / 4; }
.mbb-bw__stimme {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: #fff;
  color: var(--mbb-tinte);
  transition: transform 300ms var(--mbb-ease), opacity 300ms var(--mbb-ease);
}
.mbb-bw__platz:hover .mbb-bw__stimme { transform: translateY(-4px); }
.mbb-bw__platz.dreht .mbb-bw__stimme { transform: rotateY(90deg); opacity: 0; }
.mbb-bw__innen { position: absolute; inset: 0; border-radius: inherit; }
.mbb-bw__text { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 16px; }
/* Gold as in the old carousel (Betreiber 02.11.2026: „größer und golden, wie bisher“). */
.mbb-bw__sterne { display: flex; gap: 2px; margin: 0; color: #ffa500; }
.mbb-bw__sterne svg { width: 18px; height: 18px; fill: currentColor; }
.mbb-bw__platz--breit .mbb-bw__sterne svg { width: 20px; height: 20px; }
.mbb-bw__sterne svg.ist-leer { fill: none; stroke: currentColor; stroke-width: 1.2; }
.mbb-bw__titel { display: none; }
/* The theme styles blockquote italic with a rule on the left. */
.mbb-bw__zitat { margin: 0; padding: 0; border: 0; font-family: var(--mbb-flex); font-style: normal; color: inherit; }
.mbb-bw__zitat p {
  margin: 0;
  font-size: 15px;
  line-height: 21px;
  font-weight: 500;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}
.mbb-bw__stimme:not(.ohne-baer) .mbb-bw__sterne,
.mbb-bw__stimme:not(.ohne-baer) .mbb-bw__zitat p { padding-right: 60px; }
.mbb-bw__fuss { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.mbb-bw__wer { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; line-height: 18px; }
.mbb-bw__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.mbb-bw__name-voll { display: none; }
/* Flags come in their own ratios (2:1 to 1:1); cut to the box instead of squeezing them — as the old review carousel did (Lighthouse „falsches Seitenverhältnis“, 04.11.2026). */
.mbb-bw__wer > img { width: 18px; height: 13px; flex: none; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px var(--mbb-linie); }
/* #008054: 4.99:1 on white (the carousel's value). */
/* „verifiziert“ behind Judge.me's mark (its own tick on teal), text in a dark teal
   that holds 4.9 : 1 on white. */
.mbb-bw__geprueft { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-weight: 600; color: #1d7d72; }
.mbb-bw__jm { width: 16px; height: 16px; flex: none; border-radius: 3px; }
.mbb-bw__hinweis .mbb-bw__jm { display: inline-block; vertical-align: -3px; margin-right: 4px; }
/* Opens the whole review: on every tile, so a cut quote and a short one read alike. */
.mbb-bw__auf { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--mbb-linie); transition: background-color 200ms var(--mbb-ease), color 200ms var(--mbb-ease), border-color 200ms var(--mbb-ease); }
.mbb-bw__auf .mbb-icon { width: 15px; height: 15px; rotate: -45deg; }
.mbb-bw__platz:hover .mbb-bw__auf { background: var(--mbb-tinte); border-color: var(--mbb-tinte); color: #fff; }
/* Narrow tiles need the footer for name, flag and „verifiziert“ (with the icon
   „Stefanos C.“ was cut at 1220–1440 px); the whole tile stays clickable. */
.mbb-bw__platz--klein .mbb-bw__stimme { container-type: inline-size; }
@container (max-width: 260px) {
  .mbb-bw__auf { display: none; }
}
/* On the photo the footer needs its width for the name; the icon sits top right like the chip. */
[data-art='foto'] .mbb-bw__auf { position: absolute; top: 14px; right: 14px; border-color: transparent; background: rgba(255, 255, 255, 0.92); color: var(--mbb-tinte); }
.mbb-bw__platz:hover [data-art='foto'] .mbb-bw__auf { background: #fff; border-color: #fff; color: var(--mbb-tinte); }
.mbb-bw__mehr { display: none; }
/* The whole tile opens the review; the product link only appears in the dialog. */
.mbb-bw__ganz { position: absolute; inset: 0; z-index: 2; width: 100%; padding: 0; border: 0; border-radius: inherit; background: transparent; cursor: pointer; }
.mbb-bw__ganz:focus-visible { outline: 2px solid var(--mbb-tinte); outline-offset: 3px; }

/* The bought bear peeks over the top edge of its tile. */
.mbb-bw__baer { position: absolute; top: -30px; right: 12px; z-index: 1; width: 76px; height: 104px; pointer-events: none; transition: transform 450ms var(--mbb-feder); }
.mbb-bw__baer-bild { position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; max-width: none; transform: translateX(-50%); filter: drop-shadow(0 6px 8px rgba(26, 26, 26, 0.18)); }
.mbb-bw__baer-bild[data-gemessen] { transform-origin: 0 0; }
.mbb-bw__platz:hover .mbb-bw__baer { transform: translateY(-6px) rotate(-4deg); }
/* The wide tile has a tile above it: its bear only peeks into the 16 px gap —
   10 px overhang + 4 px tile lift + 2 px hop on hover, never into the tile
   above (operator, 01.11.2026: the first, larger bear reached into it). */
.mbb-bw__platz--breit .mbb-bw__baer { top: -10px; right: 24px; width: 96px; height: 124px; }
.mbb-bw__platz--breit:hover .mbb-bw__baer { transform: translateY(-2px) rotate(-4deg); }
.mbb-bw__platz--breit .mbb-bw__zitat p { font-size: 21px; line-height: 29px; font-weight: 550; font-stretch: 102%; -webkit-line-clamp: 3; }
.mbb-bw__platz--breit .mbb-bw__stimme:not(.ohne-baer) .mbb-bw__sterne,
.mbb-bw__platz--breit .mbb-bw__stimme:not(.ohne-baer) .mbb-bw__zitat p { padding-right: 116px; }

/* Tall tile with a customer photo: the photo fills it, the quote stands on a shade. */
.mbb-bw__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; transition: transform 600ms var(--mbb-ease); }
.mbb-bw__stimme[data-art='foto'] { background: var(--mbb-tinte); }
[data-art='foto'] .mbb-bw__innen { overflow: hidden; }
[data-art='foto'] .mbb-bw__innen::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26, 26, 26, 0) 30%, rgba(26, 26, 26, 0.86) 100%); }
[data-art='foto'] .mbb-bw__text { z-index: 1; justify-content: flex-end; color: #fff; }
[data-art='foto'] .mbb-bw__fuss { margin-top: 4px; }
[data-art='foto'] .mbb-bw__zitat p { -webkit-line-clamp: 5; padding-right: 0; }
[data-art='foto'] .mbb-bw__sterne { padding-right: 0; }
[data-art='foto'] .mbb-bw__geprueft { color: #a3e6dc; }
[data-art='foto'] .mbb-bw__wer > img { box-shadow: none; }
[data-art='foto'] .mbb-bw__baer { display: none; }
.mbb-bw__platz:hover [data-art='foto'] .mbb-bw__foto { transform: scale(1.04); }
.mbb-bw__marke { position: absolute; top: 14px; left: 14px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: var(--mbb-tinte); font-size: 12px; line-height: 16px; font-weight: 600; }
.mbb-bw__marke .mbb-icon { width: 14px; height: 14px; }
/* Tall tile without photo reviews (the English page): the bear large, the quote below. */
.mbb-bw__platz--hoch [data-art='text'] .mbb-bw__baer { top: 22px; right: auto; left: 50%; translate: -50% 0; width: 58%; height: 46%; }
.mbb-bw__platz--hoch [data-art='text'] .mbb-bw__text { justify-content: flex-end; }
.mbb-bw__platz--hoch [data-art='text'] .mbb-bw__fuss { margin-top: 4px; }
.mbb-bw__platz--hoch .mbb-bw__stimme .mbb-bw__sterne,
.mbb-bw__platz--hoch .mbb-bw__stimme .mbb-bw__zitat p { padding-right: 0; }

/* The whole review */
.mbb-bw__dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 32px;
  border: 0;
  border-radius: 24px;
  background: #fff;
  color: var(--mbb-tinte);
  overflow: auto;
}
.mbb-bw__dialog::backdrop { background: rgba(26, 26, 26, 0.6); backdrop-filter: blur(3px); }
.mbb-bw__dialog-kopf { position: absolute; top: 12px; right: 12px; margin: 0; }
.mbb-bw__dialog .mbb-bw__innen,
.mbb-bw__dialog .mbb-bw__text { position: static; padding: 0; color: var(--mbb-tinte); }
.mbb-bw__dialog .mbb-bw__innen::after,
.mbb-bw__dialog .mbb-bw__marke,
.mbb-bw__dialog .mbb-bw__baer,
.mbb-bw__dialog .mbb-bw__auf,
.mbb-bw__dialog .mbb-bw__name-kurz { display: none; }
.mbb-bw__dialog .mbb-bw__name-voll { display: inline; }
.mbb-bw__dialog .mbb-bw__foto { position: static; float: right; width: 112px; height: 112px; margin: 36px 0 12px 16px; border-radius: 14px; }
.mbb-bw__dialog .mbb-bw__titel { display: block; margin: 12px 0 0; font-family: var(--mbb-flex); font-size: 17px; line-height: 24px; font-weight: 650; }
.mbb-bw__dialog .mbb-bw__zitat p { display: block; overflow: visible; padding: 0; font-size: 20px; line-height: 29px; -webkit-line-clamp: none; }
.mbb-bw__dialog .mbb-bw__sterne { padding: 0; }
.mbb-bw__dialog .mbb-bw__geprueft { color: #1d7d72; }
.mbb-bw__dialog .mbb-bw__wer > img { box-shadow: 0 0 0 1px var(--mbb-linie); }
.mbb-bw__dialog .mbb-bw__fuss { clear: both; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 20px; }
.mbb-bw__dialog .mbb-bw__mehr { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; line-height: 20px; color: rgba(26, 26, 26, 0.72); }
.mbb-bw__dialog .mbb-bw__mehr a { color: var(--mbb-tinte); font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; }

@media screen and (max-width: 989px) {
  .mbb-bw__raster { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .mbb-bw__kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 32px; align-items: end; }
  .mbb-bw__hinweis { grid-column: 1; max-width: 520px; }
  .mbb-bw__steuerung { grid-column: 2; grid-row: 1 / 3; margin: 0; }
}
@media screen and (max-width: 749px) {
  .mbb-bw__raster { gap: 4px; }
  .mbb-bw__kopf { display: flex; align-items: flex-start; }
  .mbb-bw__steuerung { margin-top: 4px; }
  /* A row to swipe: four cards of one height, the next one peeking in. The
     top padding leaves room for the bears (a scroll container clips both axes). */
  .mbb-bw__kacheln {
    display: flex;
    gap: 12px;
    margin: 0 -1.5rem;
    padding: 22px 1.5rem 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 1.5rem;
    scrollbar-width: none;
  }
  .mbb-bw__kacheln::-webkit-scrollbar { display: none; }
  /* Betreiber 03.11.2026: the bears stood out too far and most quotes left the
     lower half of the card empty — the bear now overhangs by 14 px only, the
     cards are lower, and a long quote ends after six lines (the whole review
     opens on tap). */
  .mbb-bw__platz { flex: 0 0 80%; height: 248px; scroll-snap-align: start; }
  .mbb-bw__platz:hover .mbb-bw__stimme { transform: none; }
  .mbb-bw__zitat p { -webkit-line-clamp: 6; }
  .mbb-bw__platz--breit .mbb-bw__zitat p { font-size: 17px; line-height: 24px; -webkit-line-clamp: 6; }
  .mbb-bw__stimme:not(.ohne-baer) .mbb-bw__sterne,
  .mbb-bw__stimme:not(.ohne-baer) .mbb-bw__zitat p,
  .mbb-bw__platz--breit .mbb-bw__stimme:not(.ohne-baer) .mbb-bw__sterne,
  .mbb-bw__platz--breit .mbb-bw__stimme:not(.ohne-baer) .mbb-bw__zitat p { padding-right: 84px; }
  .mbb-bw__platz .mbb-bw__baer,
  .mbb-bw__platz--breit .mbb-bw__baer { top: -14px; right: 14px; width: 74px; height: 102px; }
  [data-art='foto'] .mbb-bw__zitat p { -webkit-line-clamp: 5; }
  .mbb-bw__dialog { padding: 24px 20px; }
  .mbb-bw__dialog .mbb-bw__zitat p { font-size: 18px; line-height: 26px; }
}

/* ── 3 · Förderband ───────────────────────────────────────────────── */
.mbb-band { overflow: hidden; }
.mbb-band__kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: var(--mbb-kopf-abstand); }
.mbb-band__kopf .mbb-text-gross { margin-top: 16px; }
/* Tabs „Neu eingetroffen · Bestseller“: above the heading, where other sections
   carry their overline. Ink, not Bordeaux — switching is not an action. */
.mbb-band__reiter { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 16px; border-radius: 999px; background: var(--mbb-sand); }
.mbb-band__reiter [role='tab'] {
  appearance: none;
  margin: 0;
  padding: 8px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgb(var(--color-foreground));
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  cursor: pointer;
  transition: background-color 200ms var(--mbb-ease), color 200ms var(--mbb-ease);
}
.mbb-band__reiter [role='tab']:hover { background: rgba(26, 26, 26, 0.07); }
.mbb-band__reiter [role='tab'][aria-selected='true'] { background: var(--mbb-tinte); color: #fff; }
.mbb-band__reiter [role='tab']:focus-visible { outline: 2px solid rgb(var(--color-foreground)); outline-offset: 2px; }
.mbb-band__bahn {
  /* Positioned, so it paints above the hall/stage backdrop (::before of the
     wrapper) also where it has no mask (phones). */
  position: relative;
  /* Perspective on the scroller: the floor plane inside the scrolled list keeps
     its vanishing point in the middle of the visible belt while it moves. */
  perspective: 700px;
  perspective-origin: 50% calc(var(--oben) + var(--figur) * 0.3);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.mbb-band__bahn::-webkit-scrollbar { display: none; }
.mbb-band__bahn.zieht { cursor: grabbing; }
.mbb-band__liste {
  list-style: none;
  margin: 0;
  padding: var(--oben) 5vw 0;
  display: flex;
  gap: 32px;
  width: max-content;
  position: relative;
  transform-style: preserve-3d;
}
/* The floor the figures stand on (Betreiber 02.11.2026: it has to be UNDER the
   feet, not a strip behind them): a plane tilted back around its front edge,
   which lies --vorn in front of the feet. It is a child of the list, so it moves
   with the figures; seen through the scroller's perspective its seams run into
   the depth. Behind the feet it shows about two thirds of its depth, in front one
   third. Figures stay at z = 0, the plane only goes back from there — it can
   never cover them. */
.mbb-band__liste::before {
  content: '';
  position: absolute;
  /* Wider than the row on the left only: the back edge is shortened towards the
     vanishing point (middle of the visible belt) by about a quarter of its
     distance from it — flush with the row, a triangle of floor was missing back
     left at the start. 18vw keeps that edge out of view and costs nothing,
     overflow to the left of the start is not scrollable. Not on the right: there
     it would add 18vw of empty floor to the scroll range, and at the end of the
     stage the carpet then ends in perspective at the edge, behind the last
     figure — the way a real one does. */
  left: -18vw;
  right: 0;
  top: calc(var(--oben) + var(--figur) + var(--vorn) - var(--tiefe));
  height: var(--tiefe);
  transform-origin: 50% 100%;
  transform: rotateX(72deg);
  /* Baggage belt: steel plates, each leading edge a dark seam with a highlight;
     darker far back, lit at the front. */
  background:
    repeating-linear-gradient(90deg, rgba(26, 26, 26, 0.34) 0 2px, rgba(255, 255, 255, 0.85) 2px 4px, transparent 4px 56px),
    linear-gradient(180deg, #b4bac1 0%, #dadee2 50%, #f4f5f6 100%);
  pointer-events: none;
}
/* Front lip of the belt (brushed steel) and the shadow of the rubber skirt. */
.mbb-band__liste::after {
  content: '';
  position: absolute;
  left: -18vw;
  right: 0;
  top: calc(var(--oben) + var(--figur) + var(--vorn));
  height: 20px;
  background: linear-gradient(180deg, #8f969e 0, #f3f4f5 3px, #b6bcc3 7px, #868d95 10px, rgba(26, 26, 26, 0.24) 10px, rgba(26, 26, 26, 0) 20px);
  pointer-events: none;
}
/* The arrivals hall behind the belt: faint, fading into the section at the top
   and into the belt at the bottom; the image is set only near the viewport. */
.mbb-band__halle { --figur: 240px; --oben: 56px; --vorn: 26px; --tiefe: 230px; --pfosten: 104px; position: relative; }
.mbb-band__halle::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: calc(var(--oben) + var(--figur) + var(--vorn));
  background: center 70% / cover no-repeat;
  opacity: 0;
  transition: opacity 600ms var(--mbb-ease);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 35%);
  mask-image: linear-gradient(180deg, transparent, #000 35%);
  pointer-events: none;
}
.mbb-band__halle.ist-nah::before { background-image: var(--halle); opacity: 0.6; }
/* Intake at the right: steel housing, rubber flaps in its opening. Above the
   belt (the figures pass behind it), clicks go through. */
.mbb-band__vorhang {
  position: absolute;
  top: calc(var(--oben) + var(--figur) * 0.14);
  bottom: 0;
  right: 0;
  z-index: 2;
  width: 88px;
  border-radius: 14px 0 0 0;
  background: linear-gradient(90deg, #8f969e, #e9ebee 18%, #c3c8ce 60%, #a7adb4);
  box-shadow: -6px 0 18px rgba(26, 26, 26, 0.12);
  pointer-events: none;
}
.mbb-band__vorhang::before {
  content: '';
  position: absolute;
  left: 12px;
  right: 0;
  top: 22px;
  height: calc(var(--figur) * 0.86 + var(--vorn) - 22px);
  border-radius: 8px 0 0 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0) 30%),
    repeating-linear-gradient(90deg, #3a3c40 0 11px, #151618 11px 13px);
}
/* Arrival board, once on the page (first tab only), in the headroom above the
   figures' heads and seals. */
.mbb-band__tafel {
  position: absolute;
  top: 8px;
  right: 100px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 6px 12px 6px 6px;
  border-radius: 8px;
  background: var(--mbb-tinte);
  color: #ffd27a;
  font-family: var(--mbb-flex);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
}
.mbb-band__tafel-nr { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; background: #ffd27a; color: var(--mbb-tinte); font-size: 16px; letter-spacing: 0; }
.mbb-band__tafel .mbb-icon { width: 18px; height: 18px; }
/* Bestseller stage (second tab): instead of the hall a dark backdrop with distant
   camera flashes; instead of the slats a wine-red carpet (darker than the Bordeaux
   of the buttons, so the carpet never competes with an action) with gold edges,
   velvet ropes on brass posts behind the figures (move with the list), and a
   light cone on every figure — the one in the spot (.ist-im-licht) at full
   strength. Height of the dark area like the hall's. */
.mbb-band__halle--buehne::before {
  opacity: 1;
  background:
    radial-gradient(circle at 8% 30%, rgba(255, 255, 255, 0.55) 0 1.5px, transparent 3px),
    radial-gradient(circle at 21% 18%, rgba(255, 244, 220, 0.45) 0 1px, transparent 2.5px),
    radial-gradient(circle at 34% 40%, rgba(255, 255, 255, 0.35) 0 1px, transparent 2.5px),
    radial-gradient(circle at 47% 22%, rgba(255, 244, 220, 0.5) 0 1.5px, transparent 3px),
    radial-gradient(circle at 61% 34%, rgba(255, 255, 255, 0.4) 0 1px, transparent 2.5px),
    radial-gradient(circle at 74% 16%, rgba(255, 244, 220, 0.5) 0 1.5px, transparent 3px),
    radial-gradient(circle at 87% 38%, rgba(255, 255, 255, 0.35) 0 1px, transparent 2.5px),
    radial-gradient(circle at 95% 24%, rgba(255, 244, 220, 0.45) 0 1.5px, transparent 3px),
    radial-gradient(120% 80% at 50% 100%, #3a1824 0%, #1c1016 50%, #0d0a0d 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 5%);
  mask-image: linear-gradient(180deg, transparent, #000 5%);
}
.mbb-band__halle--buehne .mbb-band__liste {
  /* Velvet ropes on brass posts, standing at the far edge of the carpet. */
  background:
    radial-gradient(90px 24px at 50% 0, transparent calc(100% - 4px), #7d1a2e calc(100% - 4px), #a8324a calc(100% - 2px), transparent 100%) 0 calc(var(--oben) + var(--figur) - var(--pfosten) + 6px) / 180px 26px repeat-x,
    linear-gradient(90deg, #d8b46a 0 4px, transparent 4px) 0 calc(var(--oben) + var(--figur) - var(--pfosten)) / 180px 58px repeat-x;
}
/* The carpet: gold edge far back and at the front, velvet pile, darker in the
   back, lit where the figures stand. */
.mbb-band__halle--buehne .mbb-band__liste::before {
  background:
    linear-gradient(180deg, #c9a45c 0 4px, transparent 4px calc(100% - 6px), #d8b46a calc(100% - 6px)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, #2e070f 0%, #571020 45%, #7c1b31 100%);
}
.mbb-band__halle--buehne .mbb-band__liste::after {
  height: 10px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
}
.mbb-band__halle--buehne .mbb-band__figur::before {
  content: '';
  position: absolute;
  z-index: -2;
  left: -25%;
  right: -25%;
  top: calc(-1 * var(--oben));
  bottom: -8px;
  background:
    radial-gradient(ellipse 46% 12px at 50% calc(100% - 7px), rgba(255, 236, 200, 0.55), rgba(255, 236, 200, 0)),
    linear-gradient(180deg, rgba(255, 236, 200, 0.02), rgba(255, 236, 200, 0.2));
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
  opacity: 0.3;
  transition: opacity 900ms var(--mbb-ease);
  pointer-events: none;
}
.mbb-band__halle--buehne .ist-im-licht .mbb-band__figur::before { opacity: 1; }
.mbb-band__halle--buehne .mbb-band__bahn { cursor: grab; }
/* Stage controls: arrows with a mouse, a swipe hint on touch screens. */
.mbb-band__pfeil {
  position: absolute;
  z-index: 3;
  top: calc(var(--oben) + var(--figur) * 0.45 - 22px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transition: opacity 300ms var(--mbb-ease), transform 200ms var(--mbb-ease), border-color 200ms var(--mbb-ease);
}
.mbb-band__pfeil--zurueck { left: 16px; }
.mbb-band__pfeil--weiter { right: 16px; }
.mbb-band__pfeil[data-aus] { opacity: 0; pointer-events: none; }
.mbb-band__pfeil:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.mbb-band__wisch {
  position: absolute;
  z-index: 3;
  top: 10px;
  left: 50%;
  translate: -50% 0;
  display: none;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--mbb-tinte);
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 400ms var(--mbb-ease);
  pointer-events: none;
}
.mbb-band__wisch .mbb-icon { width: 18px; height: 18px; }
.mbb-band__wisch.ist-sichtbar { opacity: 1; }
@media (hover: none), (pointer: coarse) {
  .mbb-band__pfeil { display: none; }
  .mbb-band__wisch { display: inline-flex; }
}
.mbb-band__stueck { flex: 0 0 196px; }
.mbb-band__link { display: flex; flex-direction: column; color: rgb(var(--color-foreground)); text-decoration: none; -webkit-user-drag: none; }
.mbb-band__figur { position: relative; z-index: 0; height: var(--figur); display: flex; align-items: flex-end; justify-content: center; }
/* Contact shadow on the slats, behind the figure (stacking context above). */
/* Contact shadows (module foerderband sets --s1*/--s2*): one under the main
   figure, one under a companion standing in front (100 % piece of a set);
   without the measurement a centred shadow as before. */
.mbb-band__figur::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: calc(100% - 7px);
  height: calc(12px + var(--s2y, 0px));
  background:
    radial-gradient(closest-side, rgba(26, 26, 26, 0.3), rgba(26, 26, 26, 0)) var(--s1x, 50%) 0 / var(--s1w, 64%) 12px no-repeat,
    radial-gradient(closest-side, rgba(26, 26, 26, 0.28), rgba(26, 26, 26, 0)) var(--s2x, 0px) var(--s2y, 0px) / var(--s2w, 0px) 10px no-repeat;
  pointer-events: none;
}
.mbb-band__bild { max-height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: 50% 100%; transform: translateY(var(--sinken, 0px)) scale(var(--gross, 1)); transform-origin: var(--ox, 50%) var(--oy, 100%); transition: transform 300ms var(--mbb-feder); pointer-events: none; }
/* --sinken (module foerderband): the transparent margin below the feet, so every
   figure stands on the belt or carpet instead of floating above it. --gross: sets
   scaled up to the height of a single 400% figure, around the main figure's feet
   (--ox / --oy). */
.mbb-band__link:hover .mbb-band__bild { transform: translateY(calc(var(--sinken, 0px) - 8px)) scale(var(--gross, 1)); }
/* Arrival seal: on the card it overhangs the image corner; the belt is a scroll
   container that would clip it, so it sits inside the corner here (as in the
   theme's sliders). Width against the 196 px piece, like on a card. */
/* --kopf (module foerderband): down to the visible head — as translate, so the
   late measurement moves nothing in the layout. */
.mbb-band__figur .zugang-siegel { translate: 0 var(--kopf, 0px); width: 30%; max-width: 60px; }
.mbb-band__figur .zugang-luftpost { translate: 0 var(--kopf, 0px); }
.mbb-band__name {
  margin-top: 52px;
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mbb-band__zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; font-size: 14px; line-height: 20px; }
.mbb-band__preis { font-weight: 600; }
/* „seit … da“ as a luggage tag: tapered end with an eyelet. */
.mbb-band__seit { position: relative; padding: 2px 10px 2px 20px; border-radius: 0 4px 4px 0; background: #f4e6c8; color: #4a3b22; font-size: 12px; line-height: 18px; clip-path: polygon(9px 0, 100% 0, 100% 100%, 9px 100%, 0 50%); }
.mbb-band__seit::before { content: ''; position: absolute; left: 8px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: rgb(var(--color-background)); box-shadow: inset 0 0 0 1px rgba(74, 59, 34, 0.4); }
@media screen and (max-width: 749px) {
  .mbb-band__halle { --figur: 190px; --oben: 44px; --tiefe: 200px; --pfosten: 92px; }
  .mbb-band__halle.ist-nah::before { background-image: var(--halle-s); background-position: 28% 70%; }
  .mbb-band__liste { gap: 20px; padding-inline: 16px; }
  .mbb-band__vorhang { width: 48px; }
  .mbb-band__vorhang::before { left: 8px; top: 16px; }
  .mbb-band__tafel { right: 56px; padding: 4px 10px 4px 4px; font-size: 12px; line-height: 16px; gap: 8px; }
  .mbb-band__tafel-nr { width: 24px; height: 24px; font-size: 14px; }
  .mbb-band__stueck { flex-basis: 156px; }
  .mbb-band__bahn { -webkit-mask-image: none; mask-image: none; }
}

/* ── 5 · Blindbox ─────────────────────────────────────────────────── */
/* The burst and the opened lid reach beyond the stage; nothing may reach the
   neighbouring sections or widen the page on a phone. */
/* Layout (Betreiber 02.11.2026: „grundsätzlich noch nicht optimal“): a title row
   like the belt section (heading left, link to the series right), below it three
   columns — text or result | stage | the collection as a display case, like the
   line-up panel on the side of a Series box. Box, result and collection fit one
   laptop screen (1270 × 533 CSS px at 150 %): padding and stage follow the window
   height. Below 1.200 px text and stage side by side, the case underneath; on a
   phone stage, text, case. */
.mbb-box { overflow: clip; }
.mbb-box__titelzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  /* At least 20 px: the open lid of the box reaches up to it (measured, Betreiber wanted the row closer). */
  margin-bottom: clamp(20px, 3vh, 28px);
}
.mbb-box__raster {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr) minmax(0, 1.2fr);
  grid-template-areas: "text buehne kasten";
  gap: 32px;
  align-items: center;
}
.mbb-box__text { grid-area: text; }
.mbb-box__buehne { grid-area: buehne; }
.mbb-box__sammlung { grid-area: kasten; }
@media screen and (max-width: 1199px) {
  .mbb-box__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "text buehne" "kasten kasten"; row-gap: 20px; }
}
@media screen and (max-width: 989px) {
  .mbb-box__raster { grid-template-columns: minmax(0, 1fr); grid-template-areas: "buehne" "text" "kasten"; gap: 16px; }
}
/* Over-line and the first line of every result: the Series name, set like the print on the box. */
.mbb-box__ueberzeile,
.mbb-box__linie {
  margin: 0;
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(var(--color-foreground), 0.72);
}
.mbb-box__ueberzeile { margin-bottom: 8px; }
/* The other lines of the year (blocks „Weitere Reihe“, operator 03.11.2026): a row
   under the game, the label set like the over-line, the cards like the display
   case. Below the game, so the laptop screen still holds box, result and case. */
.mbb-box__reihen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: clamp(20px, 3vh, 32px); }
.mbb-box__reihen-titel { margin: 0; font-size: 13px; line-height: 20px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(var(--color-foreground), 0.72); }
.mbb-box__reihen-liste { flex: 1 1 520px; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 16px; }
.mbb-box__reihe {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
  padding: 8px 16px 8px 8px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
  color: rgb(var(--color-foreground));
  text-decoration: none;
  transition: background 200ms var(--mbb-ease);
}
.mbb-box__reihe:hover { background: rgba(255, 255, 255, 0.85); }
.mbb-box__reihe-bild { flex: none; display: grid; place-items: center; width: 64px; height: 64px; }
.mbb-box__reihe-bild img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.mbb-box__reihe-text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.mbb-box__reihe-art { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mbb-bordeaux); }
.mbb-box__reihe-name { font-size: 15px; line-height: 20px; font-weight: 600; }
.mbb-box__reihe-zahl { font-size: 13px; line-height: 18px; color: rgba(var(--color-foreground), 0.72); }
.mbb-box__reihe .mbb-icon { flex: none; width: 18px; height: 18px; transition: transform 300ms var(--mbb-ease); }
.mbb-box__reihe:hover .mbb-icon { transform: translateX(4px); }
/* Phones: the cards side by side to swipe, like the other rows of the page —
   stacked they added 240 px under the game. */
@media screen and (max-width: 749px) {
  .mbb-box__reihen { display: block; }
  .mbb-box__reihen-titel { margin-bottom: 10px; }
  .mbb-box__reihen-liste {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(80vw, 320px);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 15px;
    margin-inline: -15px;
    padding: 0 15px 4px;
    scrollbar-width: none;
  }
  .mbb-box__reihen-liste::-webkit-scrollbar { display: none; }
  .mbb-box__reihen-liste > li { scroll-snap-align: start; }
}
/* Intro and result in one cell, each centred in it: the cell is as tall as the
   result from the start, the short intro does not leave a gap under itself. */
.mbb-box__wechsel { display: grid; }
.mbb-box__wechsel > * { grid-area: 1 / 1; align-self: center; }
.mbb-box__intro,
.mbb-box__ergebnis { transition: opacity 300ms var(--mbb-ease), visibility 300ms; }
.mbb-box__intro[data-aus],
.mbb-box__ergebnis[data-leer] { visibility: hidden; opacity: 0; }
.mbb-box__intro .mbb-text-gross { margin: 0; }
/* Two lines reserved; a third (long names in the narrow column) grows inside the
   stage height, so nothing around it moves. */
.mbb-box__name { font-size: 24px; line-height: 30px; min-height: 60px; }
@media screen and (min-width: 1200px) {
  .mbb-box__name { font-size: 22px; line-height: 28px; min-height: 56px; }
}
.mbb-box__secret[data-aus] { visibility: hidden; }
/* Two lines reserved everywhere: the odds line, and for the secrets the AI sentence. */
.mbb-box__ergebnis .mbb-text { margin-top: 4px; min-height: 48px; }
/* One row, height fixed by the pill — the Secret pill only toggles its visibility. */
.mbb-box__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 6px; min-height: 26px; }
.mbb-box__secret {
  display: inline-block;
  margin: 0;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--mbb-tinte);
  color: #fff;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
}
/* Both buttons one width — the longer label's — with the labels centred
   (Betreiber 02.11.2026): stacked in the narrow text column from 1.200 px and on a
   phone, side by side where the text has the room (750–1.199 px). The primary
   label changes with availability; its hidden copy (.mbb-box__platz) keeps the
   width, so the pair never changes with the figure. */
.mbb-box__aktionen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px 12px; width: fit-content; max-width: 100%; margin-top: 14px; }
@media screen and (min-width: 750px) and (max-width: 1199px) {
  .mbb-box__aktionen { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
}
.mbb-box__aktionen .mbb-knopf { min-height: 44px; padding: 10px 20px; font-size: 15px; letter-spacing: 0.01em; white-space: nowrap; justify-content: center; text-align: center; }
.mbb-box__platz { display: inline-grid; }
.mbb-box__platz > * { grid-area: 1 / 1; text-align: center; }
.mbb-box__platz > [aria-hidden] { visibility: hidden; }
/* "Noch eine Box" closes the result (always in it, so the result has one height). */
.mbb-box__nochmal {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  color: rgb(var(--color-foreground));
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.mbb-box__nochmal-kreis {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--mbb-linie);
  background: #fff;
  transition: transform 400ms var(--mbb-feder);
}
.mbb-box__nochmal-kreis .mbb-icon { width: 18px; height: 18px; }
.mbb-box__nochmal:hover .mbb-box__nochmal-kreis { transform: rotate(-90deg); }
.mbb-box__nochmal:focus-visible { outline: 2px solid rgb(var(--color-foreground)); outline-offset: 4px; }
/* Stage height from the window height. Before opening, the box with its „Box öffnen“
   pill sits on the centre line of the row, like the intro text and the case beside it
   (Betreiber 02.11.2026: standing on the floor it looked a good 90 px too low); the
   figure that comes out fills the stage and stands on its floor. Lid and burst reach
   above the box into the section (which clips only at its edges). */
.mbb-box__buehne {
  /* At most 370 px: from 1.200 px the stage column is about 340 px wide and the
     figure (a square photo) cannot be wider — a taller stage was empty space between
     the title and the row (Betreiber 02.11.2026: row closer under the title). */
  --mbb-h: clamp(320px, calc(100vh - 150px), 370px);
  /* The box at 0.62 H: centred, its lid swings up to a third of the box above it —
     at 0.66 H that reached into the title line (Betreiber wants the row close under
     the title). */
  --mbb-dose: min(380px, 80cqw, calc(var(--mbb-h) * 0.62));
  /* Figure and bag: a square photo, never wider than the stage (else it shrinks
     inside its box and floats above the floor). Used only by children of the
     stage, so 100cqw is the stage's width. */
  --mbb-figur: min(440px, calc(var(--mbb-h) * 0.88), 100cqw);
  /* Top edge of the box photo — the one position the box, its floor shadow, the
     card and the bag all start from. Centred: the visible block (box from 4.8 % to
     94.9 % of the photo, then the pill 4 px below the square) has its middle on the
     stage's centre line. */
  --mbb-oben: calc(var(--mbb-h) * 0.5 - var(--mbb-dose) * 0.524 - 2px);
  position: relative;
  height: var(--mbb-h);
  display: grid;
  place-items: center;
  container-type: inline-size;
}
/* A soft floor under box and figure, so neither floats. Its home is the bottom of the
   stage (under the figure); while the box is closed it lies under the box (its middle
   5 px below the box's bottom edge at 94.9 % of the photo) and glides down when the
   box sinks away and the bag rises. */
.mbb-box__boden {
  position: absolute;
  left: 50%;
  bottom: 1%;
  width: min(62%, calc(var(--mbb-h) * 0.6));
  height: calc(var(--mbb-h) * 0.07);
  transform: translate(-50%, calc(var(--mbb-oben) + var(--mbb-dose) * 0.949 + 5px - var(--mbb-h) * 0.955));
  background: radial-gradient(closest-side, rgba(26, 26, 26, 0.16), rgba(26, 26, 26, 0));
  pointer-events: none;
  transition: transform 700ms var(--mbb-ease);
}
.mbb-box__buehne:has(.mbb-box__knopf.ist-weg) .mbb-box__boden { transform: translateX(-50%); }
.mbb-box__strahlen {
  position: absolute;
  inset: -10%;
  background: repeating-conic-gradient(from 0deg, rgba(160, 75, 96, 0.16) 0 8deg, rgba(160, 75, 96, 0) 8deg 20deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent 70%);
  mask-image: radial-gradient(closest-side, #000 20%, transparent 70%);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 500ms var(--mbb-ease), transform 700ms var(--mbb-ease);
  pointer-events: none;
}
.mbb-box.ist-offen .mbb-box__strahlen { opacity: 1; transform: scale(1); animation: mbb-drehen 24s linear infinite; }
@keyframes mbb-drehen { to { rotate: 360deg; } }
.mbb-box__knopf {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  align-self: start;
  margin-top: var(--mbb-oben);
  transition: transform 400ms var(--mbb-feder), opacity 300ms var(--mbb-ease);
}
/* Square frame of the box photo; the lid SVG lies exactly on it (viewBox 1000 = 100 % of the photo). */
.mbb-box__dose { position: relative; display: block; width: var(--mbb-dose); aspect-ratio: 1; }
.mbb-box__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.mbb-box__deckel { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; visibility: hidden; }
.mbb-box__knopf.oeffnet .mbb-box__deckel { visibility: visible; }
.mbb-box__deckel-innen { stroke: rgba(26, 26, 26, 0.18); stroke-width: 2; stroke-linejoin: round; }
.mbb-box__glut { opacity: 0; }
.mbb-box__deckel.glueht .mbb-box__glut { animation: mbb-glut 1600ms var(--mbb-ease) forwards; }
@keyframes mbb-glut {
  0% { opacity: 0; }
  14% { opacity: 1; }
  100% { opacity: 0.4; }
}
.mbb-box__knopf:hover { transform: rotate(-3deg) scale(1.03); }
.mbb-box__knopf.wackelt { animation: mbb-wackeln 650ms var(--mbb-ease); }
/* Emptied, the box sinks away below the bag that rises out of it. */
.mbb-box__knopf.ist-weg {
  opacity: 0;
  transform: translateY(12%) scale(0.88);
  pointer-events: none;
  transition: opacity 300ms var(--mbb-ease), transform 500ms var(--mbb-ease);
}
@keyframes mbb-wackeln {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(-8deg) scale(1.03); }
  35% { transform: rotate(7deg) scale(1.05); }
  55% { transform: rotate(-5deg) scale(1.04); }
  75% { transform: rotate(3deg) scale(1.02); }
}
.mbb-box__tipp {
  position: absolute;
  bottom: -4px;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--mbb-tinte);
  color: #fff;
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  white-space: nowrap;
  transform: translateX(-50%);
  transition: opacity 200ms var(--mbb-ease), transform 200ms var(--mbb-ease);
}
.mbb-box__tipp .mbb-icon { width: 18px; height: 18px; }
.mbb-box__knopf.oeffnet .mbb-box__tipp { opacity: 0; transform: translate(-50%, 8px); }

/* „SECRET“ lettering: flies out with the burst (script), rests right of the figure
   just below eye height (Betreiber, 02.11.2026): its centre at a third of the stage,
   where the head has ended before the word starts — at the arms it touched the hand.
   Gold through background-clip, an ink outline for the lilac ground, a slow gleam.
   The outline is four 1-px shadows of the whole word, not -webkit-text-stroke: the
   variable font builds letters from overlapping parts, and a stroke drew the seam
   where the leg of the R runs into its bowl (Betreiber, 02.11.2026). */
.mbb-box__secret-wort {
  position: absolute;
  right: 0;
  top: calc(33% - 0.5em);
  z-index: 3;
  margin: 0;
  font-family: var(--mbb-flex);
  font-size: clamp(18px, 6.5cqw, 34px);
  font-weight: 800;
  font-stretch: 125%;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: transparent;
  background: linear-gradient(100deg, #8a6a1f 0%, #f6dc85 28%, #b8862b 52%, #fff1b8 68%, #9b7425 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(1px 0 0 rgba(26, 26, 26, 0.85)) drop-shadow(-1px 0 0 rgba(26, 26, 26, 0.85))
    drop-shadow(0 1px 0 rgba(26, 26, 26, 0.85)) drop-shadow(0 -1px 0 rgba(26, 26, 26, 0.85))
    drop-shadow(0 2px 6px rgba(160, 120, 40, 0.35));
  transform: rotate(-8deg);
  pointer-events: none;
  animation: mbb-secret-glanz 3.2s linear infinite;
}
@keyframes mbb-secret-glanz { to { background-position: -200% 0; } }
/* EU label „AI generated“ beside a secret's AI image: right of the figure at the
   height of its ear, above SECRET — at the top edge it sat right under the title once
   the row moved up (Betreiber 02.11.2026). The sentence stands in the odds line. */
.mbb-box__ki { position: absolute; top: 11%; right: 0; z-index: 2; margin: 0; animation: mbb-ki-ein 400ms var(--mbb-ease); }
.mbb-box__ki img { display: block; width: clamp(84px, 24cqw, 118px); height: auto; }
@keyframes mbb-ki-ein { from { opacity: 0; } to { opacity: 1; } }

/* The burst: spans placed by the script at the opening, moved only by transform/opacity. */
/* Sound on/off: on the line of the „Box öffnen“ pill (its centre is 16 px above
   the photo's bottom edge), at the right edge of the stage; it stays when the box
   is gone. The script shows it only where the browser can play the sounds. */
.mbb-box__ton {
  position: absolute;
  top: calc(var(--mbb-oben) + var(--mbb-dose) - 34px);
  right: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(var(--color-foreground), 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  color: rgba(var(--color-foreground), 0.72);
  cursor: pointer;
  transition: color 200ms var(--mbb-ease), border-color 200ms var(--mbb-ease);
}
.mbb-box__ton::after { content: ''; position: absolute; inset: -4px; }
.mbb-box__ton .mbb-icon { width: 18px; height: 18px; }
.mbb-box__ton .mbb-icon + .mbb-icon,
.mbb-box__ton[aria-pressed='false'] .mbb-icon:first-child { display: none; }
.mbb-box__ton[aria-pressed='false'] .mbb-icon + .mbb-icon { display: block; }
.mbb-box__ton:hover { color: rgb(var(--color-foreground)); border-color: rgba(var(--color-foreground), 0.45); }
.mbb-box__ton:focus-visible { outline: 2px solid rgb(var(--color-foreground)); outline-offset: 3px; }
.mbb-box__funken { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 3; pointer-events: none; }
.mbb-funke { position: absolute; left: 0; top: 0; display: block; opacity: 0; will-change: transform, opacity; }
.mbb-funke--blitz { border-radius: 50%; background: radial-gradient(circle, #fff 0, rgba(255, 246, 220, 0.95) 18%, rgba(255, 222, 150, 0.5) 42%, rgba(255, 222, 150, 0) 70%); }
.mbb-funke--welle { border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.95); box-shadow: 0 0 18px rgba(255, 214, 140, 0.8), inset 0 0 12px rgba(255, 214, 140, 0.6); }
.mbb-funke--puff { border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0, rgba(255, 255, 255, 0.6) 45%, rgba(255, 255, 255, 0) 70%); }
.mbb-funke--konfetti { border-radius: 2px; }
.mbb-funke--punkt { border-radius: 50%; }
.mbb-funke--stern { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.mbb-funke--strahl { border-radius: 2px; background: linear-gradient(to top, rgba(255, 236, 190, 0), #fff7e0 60%, #fff); }
/* Bag and figure stand on the floor like the box (bottom of the stage), not in its middle. */
.mbb-box__figur { position: absolute; inset: 0 0 calc(var(--mbb-h) * 0.03); margin: 0; display: grid; place-items: end center; pointer-events: none; }
.mbb-box__figur img { height: var(--mbb-figur); width: auto; max-width: 100%; object-fit: contain; opacity: 0; transform: translateY(24px) scale(0.6); transition: opacity 300ms var(--mbb-ease), transform 700ms var(--mbb-feder); }
.mbb-box__figur.ist-da img { opacity: 1; transform: none; }
/* The figure is a link to its page (the stage around it stays click-through);
   under the mouse it grows a little. */
.mbb-box__figur-link { display: block; max-width: 100%; line-height: 0; pointer-events: auto; }
@media (hover: hover) and (pointer: fine) {
  .mbb-box__figur.ist-da .mbb-box__figur-link:hover img { transform: scale(1.03); }
}

/* Unboxing, step 1: the companion card slides out of the box and leans on the
   left. Square box (the card photos are square with the card standing or
   lying in them); offsets in container units so it stays on the stage from
   the 358 px phone to the 640 px desktop column. */
.mbb-box__karte {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(220px, 34cqw, calc(var(--mbb-h) * 0.46));
  aspect-ratio: 1;
  margin: 0;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, calc(-50% + var(--mbb-oben) + var(--mbb-dose) * 0.15 - var(--mbb-h) * 0.5)) scale(0.25);
  transition: opacity 250ms var(--mbb-ease), transform 800ms var(--mbb-feder);
}
.mbb-box__karte img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(26, 26, 26, 0.18)); }
.mbb-box__karte.ist-raus {
  opacity: 1;
  transform: translate(calc(-50% - min(200px, 34cqw)), calc(-64% - var(--mbb-h) * 0.13)) rotate(-9deg);
  animation: mbb-karte-raus 950ms var(--mbb-ease);
}
/* Out of the opening (0.15 D below the top edge of the box photo), up over the box —
   but not above a tenth of the stage, the title is close above — then down to its
   place beside the figure, above the shoulder whether the card stands or lies
   (Betreiber 02.11.2026). */
@keyframes mbb-karte-raus {
  0% { opacity: 0; transform: translate(-50%, calc(-50% + var(--mbb-oben) + var(--mbb-dose) * 0.15 - var(--mbb-h) * 0.5)) scale(0.25); }
  10% { opacity: 1; }
  42% { transform: translate(calc(-50% - min(80px, 12cqw)), calc(-50% + max(var(--mbb-oben) - var(--mbb-dose) * 0.3, var(--mbb-h) * 0.1) - var(--mbb-h) * 0.5)) rotate(-26deg) scale(0.85); }
  100% { opacity: 1; transform: translate(calc(-50% - min(200px, 34cqw)), calc(-64% - var(--mbb-h) * 0.13)) rotate(-9deg); }
}

/* Step 2: the clear bag rises, the strip above the seal tears off along a
   jagged line, the rest drops away while the figure comes out. Two copies of
   the same photo with complementary clip-paths — intact they read as one bag.
   The lower piece reaches 1 % higher so no seam shows where the edges meet. */
.mbb-box__tuete { position: absolute; inset: 0 0 calc(var(--mbb-h) * 0.03); display: grid; place-items: end center; pointer-events: none; }
.mbb-box__riss {
  grid-area: 1 / 1;
  height: var(--mbb-figur);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  opacity: 0;
  /* Starts small in the opening of the box (0.15 D below the photo's top edge); its
     own centre stands half its height above the floor at 0.97 H. */
  transform: translateY(calc(var(--mbb-oben) + var(--mbb-dose) * 0.15 + var(--mbb-figur) * 0.5 - var(--mbb-h) * 0.97)) scale(0.32);
  transition: opacity 300ms var(--mbb-ease), transform 700ms var(--mbb-feder);
}
.mbb-box__tuete.ist-da .mbb-box__riss { opacity: 1; transform: none; }
.mbb-box__riss--oben { clip-path: polygon(0 0, 100% 0, 100% 15%, 93% 17%, 86% 14%, 79% 17.5%, 72% 14.5%, 65% 17%, 58% 13.5%, 51% 16.5%, 44% 14%, 37% 17.5%, 30% 14.5%, 23% 17%, 16% 13.5%, 9% 16.5%, 0 14.5%); }
.mbb-box__riss--unten { clip-path: polygon(0 13.5%, 9% 15.5%, 16% 12.5%, 23% 16%, 30% 13.5%, 37% 16.5%, 44% 13%, 51% 15.5%, 58% 12.5%, 65% 16%, 72% 13.5%, 79% 16.5%, 86% 13%, 93% 16%, 100% 14%, 100% 100%, 0 100%); }
.mbb-box__tuete.reisst .mbb-box__riss--oben {
  opacity: 0;
  transform: translate(22%, -26%) rotate(16deg);
  transition: opacity 500ms var(--mbb-ease) 150ms, transform 650ms var(--mbb-ease);
}
.mbb-box__tuete.reisst .mbb-box__riss--unten {
  opacity: 0;
  transform: translateY(16%) scale(0.94);
  transition: opacity 400ms var(--mbb-ease) 120ms, transform 550ms var(--mbb-ease) 120ms;
}
/* The display case: a light card with title and counter, a progress bar, the
   line-up (7 per row in the three-column layout) and the AI note at its foot
   (static from the start — a note that came with the first secret would push
   the page). */
.mbb-box__sammlung {
  padding: 12px 12px 10px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
}
.mbb-box__sammlung-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.mbb-box__sammlung-titel { margin: 0; font-size: 14px; line-height: 18px; font-weight: 700; }
.mbb-box__zaehler { margin: 0 0 0 auto; font-size: 13px; line-height: 18px; font-variant-numeric: tabular-nums; color: rgba(var(--color-foreground), 0.72); }
/* „Leeren“ beside the counter: small text action, underlined instead of a frame so
   the header keeps its 18-px line (the laptop budget has 7 px to spare). Both labels
   sit in one grid cell, so the button is as wide as „Rückgängig“ at all times; the
   touch target reaches past the text without taking room. Hidden (not removed)
   while the case is empty, so the counter never moves. */
.mbb-box__leeren {
  position: relative;
  display: inline-grid;
  justify-items: end;
  flex: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  color: rgba(var(--color-foreground), 0.72);
  cursor: pointer;
}
.mbb-box__leeren::after { content: ''; position: absolute; inset: -13px -10px; }
.mbb-box__leeren[data-aus] { visibility: hidden; }
.mbb-box__leeren-text {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: rgba(26, 26, 26, 0.3);
  text-underline-offset: 3px;
  transition: color 200ms;
}
.mbb-box__leeren-text .mbb-icon { width: 12px; height: 12px; flex: none; }
.mbb-box__leeren-text + .mbb-box__leeren-text,
.mbb-box__leeren[data-zurueck] .mbb-box__leeren-text:first-child { visibility: hidden; }
.mbb-box__leeren[data-zurueck] .mbb-box__leeren-text + .mbb-box__leeren-text { visibility: visible; color: rgb(var(--color-foreground)); }
.mbb-box__leeren:hover .mbb-box__leeren-text { color: rgb(var(--color-foreground)); text-decoration-color: currentColor; }
.mbb-box__leeren:focus-visible { outline: 2px solid rgb(var(--color-foreground)); outline-offset: 3px; border-radius: 4px; }
/* Emptied: the fields fade back to their question marks. */
.mbb-box__slots.ist-geleert .mbb-box__slot-bild { animation: mbb-ki-ein 400ms var(--mbb-ease); }
.mbb-box__fortschritt { height: 4px; margin: 8px 0 10px; border-radius: 2px; background: rgba(26, 26, 26, 0.1); overflow: hidden; }
.mbb-box__fortschritt > span {
  display: block;
  height: 100%;
  background: var(--mbb-tinte);
  transform: scaleX(var(--mbb-anteil, 0));
  transform-origin: left;
  transition: transform 600ms var(--mbb-ease);
}
.mbb-box__serie-link { display: none; }
.mbb-box__ki-hinweis { margin: 8px 0 0; font-size: 11px; line-height: 14px; color: rgba(var(--color-foreground), 0.72); }
.mbb-box__ki-marke {
  display: inline-block;
  padding: 0 3px;
  border-radius: 4px;
  background: var(--mbb-tinte);
  color: #fff;
  font-size: 9px;
  line-height: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  vertical-align: 1px;
}
/* On a found secret's field: the AI image is marked like a badge on the field's top
   right corner, half outside it — inside, it covered the right half of the head
   (Betreiber 02.11.2026). 4 px out leaves 2 px of the 6-px gap to the neighbour;
   the light ring keeps it apart from the field's edge. */
.mbb-box__ki-marke--feld { position: absolute; top: -4px; right: -4px; z-index: 1; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.9); }
.mbb-box__slots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 6px; }
/* Fixed counts so the 22 fields come out in even rows: 8 + 8 + 6 in the case,
   2 × 11 under text and stage, 6 per row on a phone. */
@media screen and (min-width: 1200px) {
  .mbb-box__slots { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
@media screen and (min-width: 750px) and (max-width: 1199px) {
  .mbb-box__slots { grid-template-columns: repeat(11, minmax(0, 60px)); }
}
@media screen and (max-width: 749px) {
  .mbb-box__slots { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.mbb-box__slot,
.mbb-box__slot-link { display: grid; gap: 2px; min-width: 0; }
/* A found field is a link to the figure's page: same layout as the plain slot,
   lifted a little under the mouse. */
.mbb-box__slot-link { color: inherit; text-decoration: none; border-radius: 10px; }
.mbb-box__slot-link .mbb-box__slot-bild { transition: transform 200ms var(--mbb-ease), box-shadow 200ms var(--mbb-ease); }
.mbb-box__slot-link:focus-visible { outline: 2px solid rgb(var(--color-foreground)); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .mbb-box__slot-link:hover .mbb-box__slot-bild { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(26, 26, 26, 0.14); }
  .mbb-box__slot-link:hover .mbb-box__slot-thema { color: rgb(var(--color-foreground)); }
}
.mbb-box__slot-bild {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px dashed rgba(26, 26, 26, 0.24);
  font-size: 15px;
  font-weight: 600;
  color: rgba(26, 26, 26, 0.35);
}
.mbb-box__slot-bild img { width: 82%; height: 82%; object-fit: contain; }
.mbb-box__slot.ist-gefunden .mbb-box__slot-bild { border-style: solid; border-color: transparent; background: rgba(255, 255, 255, 0.7); }
.mbb-box__slot.ist-neu .mbb-box__slot-bild { animation: mbb-ploppen 500ms var(--mbb-feder); }
/* Theme and, for a secret, a second line „Secret“ — plain text in ink, both lines
   reserved under every field so all of them stand level. */
.mbb-box__slot-geheim {
  min-height: 12px;
  font-size: 10px;
  line-height: 12px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  color: rgb(var(--color-foreground));
}
.mbb-box__slot-thema {
  min-height: 12px;
  font-size: 10px;
  line-height: 12px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(var(--color-foreground), 0.72);
}
@keyframes mbb-ploppen { from { transform: scale(0.4); } to { transform: scale(1); } }
@media screen and (max-width: 1199px) {
  .mbb-box__buehne { --mbb-h: clamp(300px, calc(100vh - 380px), 420px); }
}
@media screen and (max-width: 989px) {
  /* The stage stands alone above the text: the box back on the floor (0.97 H),
     which also keeps its lid clear of the two-line title. */
  .mbb-box__buehne { --mbb-h: 320px; --mbb-dose: min(300px, 80cqw, calc(var(--mbb-h) * 0.7)); --mbb-oben: calc(var(--mbb-h) * 0.97 - var(--mbb-dose)); }
  /* Phone and tablet portrait: the stage right under the title (the link to the
     series closes the case instead), the intro at the top of its cell. */
  .mbb-box__serie-knopf { display: none; }
  .mbb-box__serie-link { display: inline-flex; margin-top: 12px; }
  .mbb-box__wechsel > * { align-self: start; }
}
@media screen and (max-width: 749px) {
  /* Long names need three lines on a phone; reserved, so the buttons do not jump. */
  .mbb-box__name { font-size: 22px; line-height: 26px; min-height: 78px; }
}

/* ── 6 · Hologramm-Karte ──────────────────────────────────────────── */
/* Compact for the laptop (1270 × 533 CSS px at 150 %, Betreiber 02.11.2026: the
   section was 653 px high, buttons under the card out of view): padding and card
   height follow the window height, the card column is a fixed 500 px — wider and
   flatter, so the back still takes its three features (fits at the 330 px floor) —
   and the text gets the rest, the promises two lines each. 472 px at 1270 × 533. */
/* Title, card, text in the HTML (the card first on phones). Side by side, title and
   text share the left column, centred against the card by the two 1fr rows. */
.mbb-holo__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr; column-gap: 64px; row-gap: 0; }
.mbb-holo__kopf { grid-column: 1; grid-row: 2; }
.mbb-holo__text { grid-column: 1; grid-row: 3; }
.mbb-holo__buehne { grid-column: 2; grid-row: 1 / -1; align-self: center; }
.mbb-holo__gedaempft { margin-top: 16px; color: rgba(var(--color-foreground), 0.78); }
.mbb-holo__versprechen { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 14px; }
.mbb-holo__versprechen li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 24px; }
.mbb-holo__versprechen .mbb-icon { color: var(--mbb-rosa); }
.mbb-holo__link { margin-top: 32px; }
.mbb-holo__buehne { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.mbb-karte { width: min(460px, 100%); height: 392px; perspective: 1400px; cursor: pointer; }
.mbb-karte__innen {
  --rx: 0deg;
  --ry: 0deg;
  --dreh: 0deg;
  --mx: 50%;
  --my: 40%;
  --kx: 0;
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(calc(var(--ry) + var(--dreh)));
  transition: transform 700ms var(--mbb-ease);
}
.mbb-karte.folgt .mbb-karte__innen { transition: transform 120ms linear; }
.mbb-karte.ist-gedreht .mbb-karte__innen { --dreh: 180deg; }
.mbb-karte__seite {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  padding: 28px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
}
.mbb-karte__vorne {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--mbb-tinte);
  background: linear-gradient(135deg, #ece8f1 0%, #cfd3dc 45%, #f4eef3 100%);
}
.mbb-karte__folie {
  position: absolute;
  inset: -40%;
  background: conic-gradient(from calc(var(--ry) * 4) at var(--mx) var(--my), #ffb3c7, #ffe9a8, #b6f0d0, #a8d8ff, #d7b8ff, #ffb3c7);
  mix-blend-mode: color;
  opacity: 0.75;
  pointer-events: none;
}
.mbb-karte__vorne::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.35) 0 1px, rgba(255, 255, 255, 0) 1px 7px);
  mix-blend-mode: overlay;
  pointer-events: none;
}
.mbb-karte__glanz {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 45%);
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.mbb-karte__siegel,
.mbb-karte__marke,
.mbb-karte__label,
.mbb-karte__id,
.mbb-karte__produkt { position: relative; }
/* The seal: wordmark, number and label centred over the two motifs. Sizes follow
   the card (cqi), the phone card is 140 px narrower. */
.mbb-karte__vorne { container-type: inline-size; }
.mbb-karte__siegel { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.mbb-karte__marke {
  margin: 0;
  font-family: var(--mbb-flex);
  font-size: clamp(30px, 12cqi, 54px);
  line-height: 1;
  font-weight: 800;
  font-stretch: 130%;
  letter-spacing: -0.01em;
  color: #fff;
  /* Block letters like the print on the seal: white with a dark outline (stroke
     under the fill) and a solid offset as the extrusion. */
  -webkit-text-stroke: 0.14em var(--mbb-tinte);
  paint-order: stroke fill;
  text-shadow: 0.06em 0.07em 0 var(--mbb-tinte);
  /* Up between the bear's ears, away from the number (Betreiber 02.11.2026: 11 px
     apart looked cramped; -0.35em gives 30 px, -0.5em touched the ring). Only the
     wordmark moves — translate, so number and label keep their place. */
  translate: 0 -0.35em;
}
.mbb-karte__label { margin: 6px 0 0; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; }
.mbb-karte__id {
  margin: 0.2em 0 0;
  font-family: var(--mbb-flex);
  font-size: clamp(36px, 13cqi, 56px);
  line-height: 1;
  font-weight: 700;
  font-stretch: 118%;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
/* Rolling digits (next piece): a window one digit tall over its strip, all on one
   top line so the plain number afterwards sits exactly where the strips stopped. */
.mbb-karte__rad { display: inline-block; height: 1em; overflow: hidden; vertical-align: top; }
.mbb-karte__rad > span { display: block; white-space: pre; }
.mbb-karte__motiv {
  position: absolute;
  left: 50%;
  top: 50%;
  width: auto;
  /* At most the card's width: on the tall phone card the bear would run over its edges. */
  height: min(104%, 92cqi);
  aspect-ratio: 260 / 250;
  translate: -50% -50%;
  overflow: visible;
  pointer-events: none;
  transition: opacity 200ms linear;
}
.mbb-karte__motiv--at { opacity: calc(0.32 + 0.58 * max(0, -1 * var(--kx))); }
.mbb-karte__motiv--baer { color: #fff; opacity: calc(0.22 + 0.73 * max(0, var(--kx))); filter: drop-shadow(0 1px 0 rgba(26, 26, 26, 0.35)); }
/* The model as the advert (Betreiber 02.11.2026): figure on a white tile, name in
   the heading face on up to two lines, release month above. The bar's height comes
   from the tile (text at most 78 px), so it stays the same for every piece. */
.mbb-karte__produkt {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 12px 8px 8px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--mbb-tinte);
  text-decoration: none;
  transition: background-color 200ms var(--mbb-ease);
}
.mbb-karte__produkt:hover { background: rgba(255, 255, 255, 0.92); }
.mbb-karte__produkt img { width: 88px; height: 88px; object-fit: contain; flex: none; border-radius: 10px; background: #fff; }
.mbb-karte__produkt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mbb-karte__neu { font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.6; }
.mbb-karte__produkt strong {
  font-family: var(--mbb-flex);
  font-size: 17px;
  line-height: 21px;
  font-weight: 650;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.mbb-karte__meta { font-size: 13px; line-height: 18px; opacity: 0.7; }
.mbb-karte__pfeil { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--mbb-tinte); color: #fff; }
.mbb-karte__pfeil .mbb-icon { width: 18px; height: 18px; transition: transform 300ms var(--mbb-ease); }
.mbb-karte__produkt:hover .mbb-karte__pfeil .mbb-icon { transform: translateX(2px); }
/* The phone card (360 px): without the round arrow the text has room for the release
   line and the price on one line each — the whole bar stays the link. */
@container (max-width: 400px) {
  .mbb-karte__pfeil { display: none; }
  .mbb-karte__produkt { padding-right: 14px; }
}
.mbb-karte__hinten { background: #f7f3f6; color: var(--mbb-tinte); transform: rotateY(180deg); }
.mbb-karte[data-nur-hinten] .mbb-karte__hinten { transform: none; }
.mbb-karte__merkmale { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.mbb-karte__merkmale li { display: flex; align-items: flex-start; gap: 14px; }
.mbb-karte__merkmale strong { display: block; font-size: 15px; line-height: 20px; font-weight: 600; }
.mbb-karte__merkmale li > span:last-child > span { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; color: rgba(26, 26, 26, 0.75); }
/* The pictograms of the product pages (100 × 73 px, theme assets), rectangular as there. */
.mbb-karte__bild { width: 64px; height: auto; aspect-ratio: 100 / 73; flex: none; margin-top: 2px; border-radius: 4px; }
/* Own files (Betreiber 02.11.2026): the Hidden Tag seal without its dark photo
   border (transparent corners), the du-al.io mark without its grey tile and as tall
   as its three-line text — at 47 px its mark was barely legible. */
.mbb-karte__bild--tag { aspect-ratio: 132 / 105; border-radius: 0; }
.mbb-karte__bild--dualio { height: 76px; aspect-ratio: auto; object-fit: contain; border-radius: 0; margin-top: 0; }
/* Own layer: the card's 3D context painted its drop shadow over the buttons and
   greyed them from the left (measured 02.11.2026). */
.mbb-holo__leiste { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.mbb-holo__knopf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: none;
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 200ms var(--mbb-ease);
}
.mbb-holo__knopf:hover { border-color: #fff; }
.mbb-holo__knopf .mbb-icon { width: 18px; height: 18px; }
/* Turning over is the main control: filled, the label says what is on the back
   (Betreiber 02.11.2026). Both labels in one cell, the button keeps the longer width. */
.mbb-holo__knopf--haupt { background: #fff; border-color: #fff; color: var(--mbb-tinte); transition: background-color 200ms var(--mbb-ease), border-color 200ms var(--mbb-ease); }
.mbb-holo__knopf--haupt:hover { background: var(--mbb-lila); border-color: var(--mbb-lila); }
.mbb-holo__knopf--haupt .mbb-icon { transition: transform 500ms var(--mbb-ease); }
.mbb-holo__knopf--haupt:hover .mbb-icon { transform: rotate(180deg); }
.mbb-holo__wechsel { display: inline-grid; }
/* Sound switch, icon only: the same symbols as at the blindbox, crossed out when off. */
.mbb-holo__ton { justify-content: center; padding: 0 14.5px; } /* 18 + 29 + 2 = 49 px, as tall as the text buttons */
.mbb-holo__ton .mbb-icon + .mbb-icon,
.mbb-holo__ton[aria-pressed='false'] .mbb-icon:first-child { display: none; }
.mbb-holo__ton[aria-pressed='false'] .mbb-icon + .mbb-icon { display: block; }
.mbb-holo__ton:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.mbb-holo__wechsel > * { grid-area: 1 / 1; text-align: center; }
.mbb-holo__zurueck,
.mbb-karte.ist-gedreht ~ .mbb-holo__leiste .mbb-holo__vorn { visibility: hidden; }
.mbb-karte.ist-gedreht ~ .mbb-holo__leiste .mbb-holo__zurueck { visibility: visible; }
@media screen and (min-width: 990px) {
  .mbb-holo__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 500px); column-gap: clamp(32px, 4vw, 64px); }
  .mbb-holo__gedaempft { margin-top: 12px; }
  .mbb-holo__versprechen { margin-top: clamp(16px, 3vh, 32px); gap: 10px; }
  .mbb-holo__link { margin-top: clamp(16px, 3vh, 32px); }
  .mbb-holo__buehne { gap: 12px; }
  .mbb-karte { width: 100%; height: clamp(330px, calc(100vh - 175px), 392px); }
  .mbb-karte__seite { padding: 24px 28px; }
}
/* Very low windows shrink the card to 330 px: smaller figure, wordmark less high,
   or it touches the top edge. */
@media screen and (min-width: 990px) and (max-height: 540px) {
  .mbb-karte__produkt img { width: 72px; height: 72px; }
  /* Text (up to 78 px) is taller than the figure here: reserve it, or a one-line name
     would shrink the bar while going through the pieces. */
  .mbb-karte__produkt-text { min-height: 78px; justify-content: center; }
  .mbb-karte__marke { translate: 0 -0.2em; }
}
@media screen and (max-width: 989px) {
  .mbb-holo__raster { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .mbb-holo__kopf, .mbb-holo__text, .mbb-holo__buehne { grid-column: auto; grid-row: auto; }
  .mbb-holo__buehne { margin-top: var(--mbb-kopf-abstand); }
  .mbb-holo__text { margin-top: 40px; }
  .mbb-holo__text > :first-child { margin-top: 0; }
}
@media screen and (max-width: 749px) {
  .mbb-karte { height: 480px; }
  .mbb-karte__bild { width: 56px; }
  .mbb-karte__bild--dualio { height: 68px; }
  .mbb-karte__seite { padding: 22px; }
  .mbb-karte__id { font-size: 42px; }
  .mbb-karte__produkt { gap: 12px; }
  .mbb-karte__produkt strong { font-size: 16px; line-height: 20px; }
}

/* ── 7 · Kurz erklärt (SEO-Text) ─────────────────────────────────── */
/* From 1200 px: text left, the six sizes right, the three points as one row
   of three underneath (as points under the text the left column was twice as
   tall as the sizes, and a gap opened between their heading and the figures —
   the figures grow with the width of their column, not its height). Below
   1200 px: text, sizes, points. The size column is a container: 1 cm = --k
   follows its width so that the 1000 % figure and the five smaller columns
   fit, at most 6.6 px. Figure boxes are exactly as tall as the size;
   mbb-start.js (module wissen) places each cut-out on its visible outline. */
.mbb-ws__raster {
  display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 12fr);
  grid-template-areas: "text groessen" "punkte punkte";
  column-gap: 56px;
}
.mbb-ws__text { grid-area: text; }
.mbb-ws__punkte { grid-area: punkte; }
.mbb-ws__groessen { grid-area: groessen; }
.mbb-ws__ueberzeile {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(var(--color-foreground), 0.72);
}
.mbb-ws__titel { margin-bottom: 16px; }
.mbb-ws__lead p { margin: 0; font-size: 17px; line-height: 27px; text-wrap: pretty; }
.mbb-ws__lead p + p { margin-top: 12px; }
.mbb-ws__text a,
.mbb-ws__punkt a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(var(--color-foreground), 0.35);
  transition: text-decoration-color 200ms;
}
.mbb-ws__text a:hover,
.mbb-ws__punkt a:hover { text-decoration-color: currentColor; }

.mbb-ws__punkte {
  list-style: none;
  margin: 36px 0 0;
  padding: 28px 0 0;
  border-top: 1px solid var(--mbb-linie);
  display: grid;
  gap: 22px;
  align-content: start;
}
.mbb-ws__punkt { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 20px; align-items: center; }
.mbb-ws__punkt-titel {
  margin: 0 0 4px;
  font-family: var(--mbb-flex);
  font-weight: 650;
  font-stretch: 104%;
  letter-spacing: -0.01em;
  font-size: 19px;
  line-height: 24px;
  text-wrap: balance;
}
.mbb-ws__punkt-text { margin: 0; font-size: 15px; line-height: 22px; color: rgba(var(--color-foreground), 0.8); text-wrap: pretty; }
/* Three equal tiles (Betreiber 03.11.2026: a dark photo tile, two free cut-outs
   and a figure cut off at the top looked unfinished): same size, corners and sand
   ground; the figures fitted by mbb-start.js to the same visible height on the
   same floor, the photo fills its tile. One label style for photo and sold out. */
.mbb-ws__bild { position: relative; width: 88px; height: 88px; border-radius: 16px; overflow: hidden; background: var(--mbb-sand); }
.mbb-ws__bild--foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mbb-ws__bild-text {
  position: absolute;
  left: 5px;
  bottom: 5px;
  max-width: calc(100% - 10px);
  padding: 1px 5px;
  border-radius: 99px;
  background: rgba(26, 26, 26, 0.6);
  color: #fff;
  font-size: 9px;
  line-height: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Until mbb-start.js has measured the cut-outs: centred, inside the tile. */
.mbb-ws__mini { position: absolute; left: 50%; bottom: 8%; width: auto; max-width: none; height: 80%; transform: translateX(-50%); }
.mbb-ws__bild--gruppe .mbb-ws__mini { left: 27%; }
.mbb-ws__bild--gruppe .mbb-ws__mini:nth-child(2) { left: 73%; }
.mbb-ws__mini[data-gemessen] { transform-origin: 0 0; }
/* Muted, not grey: the model must stay recognisable (Betreiber 02.11.2026). */
.mbb-ws__bild--vergriffen .mbb-ws__mini { filter: saturate(0.55); opacity: 0.85; }
.mbb-ws__groessen { container-type: inline-size; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.mbb-ws__kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; }
.mbb-ws__kopf p { margin: 0; }
.mbb-ws__buehne {
  --lineal: 44px;
  --spalte: 52px;
  --mass: 44px;
  --luecke: 8px;
  --k: clamp(2.8px, calc((100cqi - var(--lineal) - 4 * var(--spalte) - 5 * var(--luecke)) / 44.1), 6.6px);
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--luecke);
  height: calc(72 * var(--k) + var(--mass));
  padding-left: var(--lineal);
  overflow: hidden;
}
.mbb-ws__buehne::after {
  content: '';
  position: absolute;
  left: var(--lineal);
  right: 0;
  bottom: calc(var(--mass) - 2px);
  height: 2px;
  background: rgb(var(--color-foreground));
}
.mbb-ws__lineal { position: absolute; left: 0; top: 0; bottom: var(--mass); width: var(--lineal); pointer-events: none; }
.mbb-ws__lineal span {
  position: absolute;
  left: 0;
  bottom: calc(var(--cm) * var(--k));
  transform: translateY(50%);
  padding-left: 14px;
  font-size: 11px;
  line-height: 14px;
  color: rgba(var(--color-foreground), 0.55);
  white-space: nowrap;
}
.mbb-ws__lineal span::before { content: ''; position: absolute; left: 0; top: 50%; width: 10px; border-top: 1px solid rgba(var(--color-foreground), 0.35); }
.mbb-ws__groesse { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; min-width: var(--spalte); color: inherit; text-decoration: none; }
.mbb-ws__figur { position: relative; display: block; width: calc(var(--cm) * var(--k) * 0.45); height: calc(var(--cm) * var(--k)); transition: transform 350ms var(--mbb-ease); }
/* The image is a square with a transparent margin; scaled up, the 1000 % image
   reaches over the 400 % figure and caught its pointer. Only the box counts. */
.mbb-ws__figur-bild { position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; max-width: none; transform: translateX(-50%); pointer-events: none; }
.mbb-ws__figur-bild[data-gemessen] { transform-origin: 0 0; }
.mbb-ws__mass { display: flex; flex-direction: column; align-items: center; height: var(--mass); padding-top: 8px; white-space: nowrap; }
.mbb-ws__mass b { font-family: var(--mbb-flex); font-weight: 650; font-stretch: 104%; font-size: 17px; line-height: 20px; }
.mbb-ws__mass > span { font-size: 13px; line-height: 16px; color: rgba(var(--color-foreground), 0.65); }
.mbb-ws__groesse:hover .mbb-ws__figur,
.mbb-ws__groesse:focus-visible .mbb-ws__figur { transform: translateY(-6px); }
.mbb-ws__groesse:hover b { text-decoration: underline; text-underline-offset: 3px; }
.mbb-ws__groesse:focus-visible { outline: 2px solid rgb(var(--color-foreground)); outline-offset: 4px; border-radius: 4px; }
@media screen and (min-width: 1200px) {
  .mbb-ws__punkte { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; }
  .mbb-ws__punkt { align-items: start; }
}
@media screen and (max-width: 1199px) {
  .mbb-ws__raster { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "groessen" "punkte"; }
  .mbb-ws__lead,
  .mbb-ws__punkte { max-width: 720px; }
  .mbb-ws__groessen { max-width: 600px; margin-top: 40px; }
}
@media screen and (max-width: 749px) {
  .mbb-ws__lead p { font-size: 16px; line-height: 25px; }
  .mbb-ws__buehne { --lineal: 30px; --spalte: 44px; --luecke: 2px; }
  .mbb-ws__lineal span { padding-left: 12px; font-size: 10px; }
  .mbb-ws__mass b { font-size: 14px; line-height: 18px; }
  .mbb-ws__mass > span { font-size: 11px; line-height: 15px; }
  .mbb-ws__punkt { grid-template-columns: 80px minmax(0, 1fr); gap: 16px; align-items: start; }
  .mbb-ws__bild { width: 80px; height: 80px; border-radius: 14px; }
  /* The three points as a row to swipe (operator, 03.11.2026: stacked they
     added half a screen). Without the line above: running to the screen edge
     it would stand wider than the text. */
  .mbb-ws__punkte {
    grid-auto-flow: column;
    grid-auto-columns: min(80vw, 320px);
    gap: 16px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 15px;
    margin: 32px -15px 0;
    padding: 0 15px 4px;
    border-top: 0;
    scrollbar-width: none;
  }
  .mbb-ws__punkte::-webkit-scrollbar { display: none; }
  .mbb-ws__punkt { scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) {
  .mbb-ws__figur { transition: none; }
  .mbb-ws__groesse:hover .mbb-ws__figur,
  .mbb-ws__groesse:focus-visible .mbb-ws__figur { transform: none; }
}

/* ── 8 · Versprechen ───────────────────────────────────────────────── */
/* The way of an order in five stations on one route. From 990 px one row:
   every station is a subgrid of the same five rows (dot, date, title, text,
   extra), so the titles of all stations start on one line whatever the
   dates above them say. Below 990 px the route runs down the left edge.
   The route is one segment per station, from its dot to the next. While
   the section is still below the fold the script sets .wartet; a station
   that comes into view gets .ist-da (its dot fills), the one before it
   .ist-weiter (its segment draws up to the new dot). In the row all five
   arrive at once and the delays stagger them: dot i at i × --takt, its
   segment 120 ms later for --takt − 120 ms, so each segment ends exactly when
   the next dot starts. Down the left edge each station comes on its own as
   the visitor scrolls. Transform and colour only. Without script, or with
   reduced motion, the route is drawn from the start. */
.mbb-vs__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 48px;
  margin-bottom: var(--mbb-kopf-abstand);
}
/* Right of the heading: what the dates mean, and who answers questions. */
.mbb-vs__seite { display: grid; gap: 10px; max-width: 440px; }
.mbb-vs__pause { font-weight: 600; }

.mbb-vs__weg {
  --punkt: 40px;
  --spalt: 24px;
  --takt: 360ms;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(5, auto);
  column-gap: var(--spalt);
}
.mbb-vs__halt {
  position: relative;
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  align-content: start;
  margin: 0;
}
.mbb-vs__punkt {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--punkt);
  height: var(--punkt);
  margin-bottom: 14px;
  border-radius: 50%;
  border: 1px solid var(--mbb-tinte);
  background: var(--mbb-tinte);
  color: #fff;
  --verzug: calc(var(--i) * var(--takt));
  transition: background-color 260ms var(--mbb-ease) var(--verzug),
    color 260ms var(--mbb-ease) var(--verzug),
    transform 300ms var(--mbb-ease);
}
.mbb-vs__punkt .mbb-icon { width: 20px; height: 20px; }
.mbb-vs.wartet .mbb-vs__halt:not(.ist-da) .mbb-vs__punkt { background: transparent; color: var(--mbb-tinte); transition-delay: 0s; }
@media (hover: hover) {
  .mbb-vs__halt:hover .mbb-vs__punkt { transform: translateY(-3px); }
}
.mbb-vs__halt:focus-within .mbb-vs__punkt { transform: translateY(-3px); }

/* Route: dashed underneath, solid on top. */
.mbb-vs__halt:not(:last-child)::before,
.mbb-vs__halt:not(:last-child)::after {
  content: '';
  position: absolute;
  top: calc(var(--punkt) / 2 - 1px);
  left: calc(var(--punkt) + 8px);
  width: calc(100% + var(--spalt) - var(--punkt) - 16px);
  height: 2px;
  border-radius: 2px;
}
.mbb-vs__halt:not(:last-child)::before {
  background: repeating-linear-gradient(90deg, rgba(var(--color-foreground), 0.3) 0 6px, transparent 6px 12px);
}
.mbb-vs__halt:not(:last-child)::after {
  background: var(--mbb-tinte);
  transform-origin: 0 50%;
  transition: transform calc(var(--takt) - 120ms) linear calc(var(--i) * var(--takt) + 120ms);
}
.mbb-vs.wartet .mbb-vs__halt:not(.ist-weiter)::after { transform: scaleX(0); transition-delay: 0s; }

.mbb-vs__wann { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 0 0 10px; }
.mbb-vs__schritt {
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(var(--color-foreground), 0.72);
}
/* One line, always: a date that wrapped after the script replaced the
   fallback would push the titles of all five stations down. */
.mbb-vs__datum {
  font-family: var(--mbb-flex);
  font-weight: 560;
  font-stretch: 100%;
  font-size: 16px;
  line-height: 22px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* Countdown in the extra row of the first station, hidden (not removed)
   until the script has filled it. */
.mbb-vs__uhr {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 99px;
  background: #fff;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mbb-vs__uhr:not(.ist-an) { visibility: hidden; }
.mbb-vs__live { width: 7px; height: 7px; border-radius: 50%; background: #5b8c5a; animation: mbbVsPuls 2.4s ease-in-out infinite; }
@keyframes mbbVsPuls { 50% { opacity: 0.3; } }

.mbb-vs__titel {
  margin: 0 0 6px;
  font-family: var(--mbb-flex);
  font-weight: 650;
  font-stretch: 104%;
  letter-spacing: -0.01em;
  font-size: 19px;
  line-height: 24px;
  text-wrap: balance;
}
.mbb-vs__text { margin: 0; font-size: 15px; line-height: 22px; color: rgba(var(--color-foreground), 0.8); text-wrap: pretty; }
/* Dawn hides empty elements; the extra row stays in the subgrid. */
.mbb-vs__extra,
.mbb-vs__extra:empty { display: block; padding-top: 14px; }
.mbb-vs__link { font-size: 14px; line-height: 20px; }
.mbb-vs__link .mbb-icon { width: 16px; height: 16px; }

/* Free shipping (or minimum order value) against the visitor's own cart. */
.mbb-vs__meter { display: grid; gap: 6px; }
.mbb-vs__balken { display: block; height: 6px; border-radius: 3px; background: rgba(var(--color-foreground), 0.12); overflow: hidden; }
.mbb-vs__balken > span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--mbb-tinte);
  transform-origin: 0 50%;
  transition: transform 600ms var(--mbb-ease), background-color 300ms;
}
.mbb-vs__meter.ist-voll .mbb-vs__balken > span { background: #5b8c5a; }
.mbb-vs__meter-text { font-size: 13px; line-height: 18px; font-weight: 600; }

.mbb-vs__kontakt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  text-wrap: pretty;
}
.mbb-vs__kontakt .mbb-icon { width: 20px; height: 20px; }
.mbb-vs__kontakt a {
  color: inherit;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(var(--color-foreground), 0.35);
}
.mbb-vs__kontakt a:hover { text-decoration-color: currentColor; }

@media screen and (min-width: 990px) and (max-width: 1199px) {
  .mbb-vs__weg { --spalt: 18px; }
  .mbb-vs__datum { font-size: 15px; }
  .mbb-vs__titel { font-size: 18px; line-height: 24px; }
  .mbb-vs__text { font-size: 14px; line-height: 20px; }
}
/* Tablets: the route runs down the left edge (phones swipe it, below). */
@media screen and (min-width: 750px) and (max-width: 989px) {
  .mbb-vs__weg { --punkt: 40px; --zeile: 28px; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: var(--zeile); }
  .mbb-vs__halt { grid-row: auto; grid-template-rows: none; grid-template-columns: var(--punkt) minmax(0, 1fr); column-gap: 16px; }
  .mbb-vs__halt > * { grid-column: 2; }
  .mbb-vs__punkt { grid-column: 1; grid-row: 1 / span 5; align-self: start; margin-bottom: 0; }
  .mbb-vs__punkt .mbb-icon { width: 20px; height: 20px; }
  .mbb-vs__halt:not(:last-child)::before,
  .mbb-vs__halt:not(:last-child)::after {
    top: calc(var(--punkt) + 8px);
    left: calc(var(--punkt) / 2 - 1px);
    width: 2px;
    height: calc(100% + var(--zeile) - var(--punkt) - 16px);
  }
  .mbb-vs__halt:not(:last-child)::before {
    background: repeating-linear-gradient(180deg, rgba(var(--color-foreground), 0.3) 0 6px, transparent 6px 12px);
  }
  /* One station at a time: its segment draws at once, the next dot fills
     when the segment has arrived. */
  .mbb-vs__halt:not(:last-child)::after { transform-origin: 50% 0; transition-delay: 0s; }
  .mbb-vs__punkt { --verzug: calc(min(var(--i), 1) * (var(--takt) - 120ms)); }
  .mbb-vs.wartet .mbb-vs__halt:not(.ist-weiter)::after { transform: scaleY(0); }
  .mbb-vs__wann { margin-bottom: 8px; }
  .mbb-vs__extra { padding-top: 10px; }
  .mbb-vs__extra:empty { display: none; }
  .mbb-vs__meter { max-width: 320px; }
}
@media screen and (max-width: 749px) {
  /* Phones: the route of the desktop as a row to swipe (operator, 03.11.2026:
     down the left edge it took 1.5 screens). Each station a column; the route
     still draws station by station as each comes into view, now while
     swiping. The row runs to the screen edge and snaps to the page margin;
     the padding on top keeps the lifted dot out of the clip. */
  .mbb-vs__weg {
    --spalt: 16px;
    grid-template-columns: repeat(5, min(76vw, 300px));
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 15px;
    margin-inline: -15px;
    padding: 4px 15px 6px;
    scrollbar-width: none;
  }
  .mbb-vs__weg::-webkit-scrollbar { display: none; }
  .mbb-vs__halt { scroll-snap-align: start; }
  .mbb-vs__extra:empty { display: none; }
  .mbb-vs__titel { font-size: 19px; line-height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .mbb-vs__punkt,
  .mbb-vs__halt::after,
  .mbb-vs__balken > span { transition: none; }
  .mbb-vs__live { animation: none; }
  .mbb-vs__halt:hover .mbb-vs__punkt,
  .mbb-vs__halt:focus-within .mbb-vs__punkt { transform: none; }
}

/* ── Reduced motion ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .mbb-band__halle--buehne .mbb-band__figur::before { opacity: 0.7; transition: none; }
  .mbb-knopf,
  .mbb-th__kachel,
  .mbb-th__bildebene,
  .mbb-th__ebene,
  .mbb-th__bild,
  .mbb-th__text,
  .mbb-th__senkrecht,
  .mbb-wb__play,
  .mbb-wb__poster-bild,
  .mbb-textlink .mbb-icon,
  .mbb-band__bild,
  .mbb-box__knopf,
  .mbb-box__knopf.ist-weg,
  .mbb-box__boden,
  .mbb-box__tipp,
  .mbb-box__figur img,
  .mbb-box__karte,
  .mbb-box__riss,
  .mbb-box__tuete.reisst .mbb-box__riss--oben,
  .mbb-box__tuete.reisst .mbb-box__riss--unten,
  .mbb-box__nochmal-kreis,
  .mbb-box__fortschritt > span,
  .mbb-box__leeren-text,
  .mbb-box__ton,
  .mbb-box__strahlen,
  .mbb-karte__innen,
  .mbb-bw__stimme,
  .mbb-bw__baer,
  .mbb-bw__foto,
  .mbb-bw__mischen .mbb-icon,
  .mbb-holo__knopf--haupt .mbb-icon,
  .mbb-karte__produkt,
  .mbb-karte__pfeil .mbb-icon { transition: none; }
  .mbb-bw__platz:hover .mbb-bw__stimme,
  .mbb-bw__platz:hover .mbb-bw__baer,
  .mbb-bw__platz:hover [data-art='foto'] .mbb-bw__foto,
  .mbb-bw__mischen:hover .mbb-icon,
  .mbb-holo__knopf--haupt:hover .mbb-icon,
  .mbb-karte__produkt:hover .mbb-karte__pfeil .mbb-icon,
  .mbb-box__figur.ist-da .mbb-box__figur-link:hover img { transform: none; }
  .mbb-wb__hinweis .mbb-icon,
  .mbb-box.ist-offen .mbb-box__strahlen,
  .mbb-box__slot.ist-neu .mbb-box__slot-bild,
  .mbb-box__slots.ist-geleert .mbb-box__slot-bild,
  .mbb-box__ki,
  .mbb-box__secret-wort,
  .mbb-box__karte.ist-raus,
  .mbb-box__knopf.wackelt { animation: none; }
  .mbb-band__link:hover .mbb-band__bild { transform: translateY(var(--sinken, 0px)) scale(var(--gross, 1)); }
  .mbb-box__knopf:hover { transform: none; }
}