/** Shopify CDN: Minification failed

Line 252:0 Unexpected "}"

**/
/* Produktseite 2026 (Vorschau) — band „Echtheit“ (sections/mbb-pd-echtheit.liquid).

   Reuses the hologram card of the home page (.mbb-karte* from mbb-start.css) —
   without its back and buttons: the IDs in the text choose the number. This file lays
   out the dark band and fits the card into it. mbb-start.css sizes the card by
   window media queries (392 px, phone 480 px); every such value is overridden here
   with one class more, so the order of the stylesheets does not matter.

   Layout (operator, 03.11.2026): from 990 px text left, right the card and below it
   the photo of the features — the photo starts level with the features, so they
   can be found on it. Phone: head, card, features, photo (the order of the HTML).
   The card has the proportions of the real seal on the box, 9 : 5 (measured 1.9 : 1
   on the photo of The First PlayStation); before, it stood upright at 4 : 5.

   Nothing changes size after the first paint: the card and the photo have fixed
   aspect ratios, the first ID comes from the server, the digits roll with
   transform, the marked ID chip changes colour only. The theme sets 1rem = 10px,
   so px here. */

.mbb-pd-holo {
  /* Dark band: over-line, text links and focus rings of mbb-start.css read the
     foreground of the colour scheme. */
  --color-foreground: 255, 255, 255;
  color: #fff;
}
.mbb-pd-holo [hidden] { display: none !important; }

/* ── Layout ────────────────────────────────────────────────────────── */
.mbb-pd-echtheit__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}
.mbb-pd-echtheit__kopf,
.mbb-pd-echtheit__merkmale-block,
.mbb-pd-echtheit__foto { min-width: 0; }
.mbb-pd-holo__buehne {
  justify-self: center;
  width: min(100%, 440px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.mbb-pd-echtheit__foto { justify-self: center; width: min(100%, 440px); margin: 0; }
@media screen and (min-width: 990px) {
  .mbb-pd-echtheit__raster {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: 'kopf merkmale';
    column-gap: 64px;
    row-gap: 32px;
    align-items: start;
  }
  .mbb-pd-echtheit__kopf { grid-area: kopf; }
  .mbb-pd-echtheit__merkmale-block { grid-area: merkmale; }
  .mbb-pd-holo__buehne { grid-area: buehne; width: 100%; }
  .mbb-pd-echtheit__foto { grid-area: foto; width: 100%; }
  /* Card and photo: right column, the photo level with the features. */
  .mbb-pd-echtheit__raster--karte,
  .mbb-pd-echtheit__raster--foto { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); }
  .mbb-pd-echtheit__raster--karte.mbb-pd-echtheit__raster--foto { grid-template-areas: 'kopf buehne' 'merkmale foto'; }
  .mbb-pd-echtheit__raster--karte:not(.mbb-pd-echtheit__raster--foto) { grid-template-areas: 'kopf buehne' 'merkmale .'; }
  .mbb-pd-echtheit__raster--foto:not(.mbb-pd-echtheit__raster--karte) { grid-template-areas: 'kopf foto' 'merkmale foto'; }
}

/* ── Text ──────────────────────────────────────────────────────────── */
.mbb-pd-echtheit .mbb-ueberzeile { color: rgba(255, 255, 255, 0.72); }
.mbb-pd-echtheit .mbb-pd-echtheit__lage { margin: 16px 0 0; max-width: 60ch; color: rgba(255, 255, 255, 0.8); }

.mbb-pd-holo .mbb-pd-holo__ids {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.mbb-pd-holo__ids [data-holo-eintrag] {
  padding: 5px 12px;
  border-radius: 999px;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32);
  font-family: var(--mbb-flex);
  font-size: 15px;
  line-height: 20px;
  font-weight: 650;
  font-stretch: 110%;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  transition: background-color 200ms var(--mbb-ease), color 200ms var(--mbb-ease), box-shadow 200ms var(--mbb-ease);
}
.mbb-pd-holo__ids [data-holo-eintrag][aria-current='true'] {
  background: #fff;
  color: var(--mbb-tinte);
  box-shadow: inset 0 0 0 1px #fff;
}
/* Several IDs: each chip is a button, its padding the click area. */
.mbb-pd-holo__ids [data-holo-eintrag]:has(> button) { padding: 0; }
.mbb-pd-holo__ids [data-holo-wahl] {
  display: block;
  margin: 0;
  padding: 5px 12px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}
.mbb-pd-holo__ids [data-holo-eintrag]:not([aria-current='true']):hover { box-shadow: inset 0 0 0 1px #fff; }
.mbb-pd-holo__ids [data-holo-wahl]:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* Sound switch after the IDs: a round button in the chips' height, icon only. */
.mbb-pd-holo__ton-platz { display: flex; }
.mbb-pd-holo__ton-platz:has(> [hidden]) { display: none; }
.mbb-pd-holo__ton {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.mbb-pd-holo__ton:hover { border-color: #fff; }
.mbb-pd-holo__ton:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.mbb-pd-holo__ton .mbb-icon { width: 20px; height: 20px; }
.mbb-pd-holo__ton .mbb-icon + .mbb-icon,
.mbb-pd-holo__ton[aria-pressed='false'] .mbb-icon:first-child { display: none; }
.mbb-pd-holo__ton[aria-pressed='false'] .mbb-icon + .mbb-icon { display: block; }
.mbb-pd-holo__weitere { font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, 0.72); }

.mbb-pd-echtheit .mbb-pd-echtheit__merkmale {
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mbb-pd-echtheit__merkmale li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: start; }
.mbb-pd-echtheit__merkmale img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  padding: 5px;
  border-radius: 10px;
  background: #fff;
}
.mbb-pd-echtheit__merkmale strong { display: block; font-size: 16px; line-height: 22px; font-weight: 650; }
.mbb-pd-echtheit__merkmale li > span > span {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  line-height: 21px;
  color: rgba(255, 255, 255, 0.75);
  text-wrap: pretty;
}
.mbb-pd-echtheit .mbb-pd-echtheit__links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  margin: 28px 0 0;
}
.mbb-pd-echtheit .mbb-textlink { color: #fff; }
.mbb-pd-echtheit .mbb-textlink:hover { color: var(--mbb-rosa); }

/* ── Card ──────────────────────────────────────────────────────────── */
/* Width from the column, height from the seal's proportions (the home page fixes
   the height). */
.mbb-pd-holo .mbb-karte { width: 100%; height: auto; aspect-ratio: 9 / 5; cursor: default; }
.mbb-pd-holo .mbb-karte__seite {
  padding: 12px 16px;
  border-radius: 16px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
}
/* Sizes follow the front's own width (it is a container in mbb-start.css). Flat as
   the seal, the height is the limit: wordmark, ID, label and footer fit 9 : 5 down
   to the phone (≈ 358 × 199 px). */
.mbb-pd-holo .mbb-karte__marke { font-size: clamp(23px, 11cqi, 50px); translate: 0 -0.2em; }
.mbb-pd-holo .mbb-karte__id { font-size: clamp(24px, 11.5cqi, 48px); }
.mbb-pd-holo .mbb-karte__label { margin-top: 4px; font-size: 11px; }
/* No footer here (operator, 03.11.2026: neither the size nor one dot per ID), so the
   seal fills the front; the @ and the bear sit a little lower than centred, the
   bear's ears no longer touch the top edge. */
.mbb-pd-holo .mbb-karte__motiv { translate: -50% -44%; }


/* ── Photo of the features ─────────────────────────────────────────── */
.mbb-pd-echtheit__lupenfeld { position: relative; }
.mbb-pd-echtheit__lupenbild {
  display: block;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}
.mbb-pd-echtheit__lupenfeld img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  transform: scale(1);
  transition: transform 300ms var(--mbb-ease);
}
.mbb-pd-echtheit__lupenfeld.ist-gross img { transform: scale(var(--zoom, 2.5)); transition: transform 300ms var(--mbb-ease), transform-origin 0ms; }
/* The glass: 3 × the photo under the pointer, from the large file (background). */
.mbb-pd-echtheit__lupenglas {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  border: 3px solid #fff;
  background-color: #fff;
  background-repeat: no-repeat;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(26, 26, 26, 0.15);
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms linear;
}
.mbb-pd-echtheit__lupenfeld.lupe-an .mbb-pd-echtheit__lupenglas { opacity: 1; }
.mbb-pd-echtheit__lupe-maus,
.mbb-pd-echtheit__lupe-touch { display: none; }
@media (hover: hover) and (pointer: fine) {
  .mbb-pd-echtheit__lupenfeld { cursor: none; }
  .mbb-pd-echtheit__lupe-maus { display: inline; }
}
@media not ((hover: hover) and (pointer: fine)) {
  .mbb-pd-echtheit__lupenfeld { cursor: zoom-in; }
  .mbb-pd-echtheit__lupenfeld.ist-gross { cursor: zoom-out; }
  .mbb-pd-echtheit__lupe-touch { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  .mbb-pd-echtheit__lupenfeld img,
  .mbb-pd-echtheit__lupenglas { transition: none; }
}
.mbb-pd-echtheit__foto figcaption { margin: 10px 2px 0; font-size: 13px; line-height: 19px; color: rgba(255, 255, 255, 0.72); }

@media (prefers-reduced-motion: reduce) {
  .mbb-pd-holo__ids [data-holo-eintrag],
}
