/** Shopify CDN: Minification failed

Line 68:52 Unexpected "/"
Line 808:2 Unexpected "{"
Line 808:3 Expected identifier but found "%"
Line 809:38 Expected identifier but found whitespace
Line 810:51 Unexpected "10px"
Line 812:3 Expected identifier but found "%"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:brand-statement (INDEX:0) */
.brand-statement__inner {
    max-width: 56rem;
    margin: 0 auto;
    padding: var(--section-pad-block) var(--section-pad-inline);
    text-align: center;
  }

  .brand-statement__text {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: clamp(1.4rem, 3vw, 2rem);
    line-height: 1.4;
    letter-spacing: -0.01em;
    margin: 0;
  }

  .brand-statement__mark {
    margin: 0 0.08em;
  }
/* END_SECTION:brand-statement */

/* START_SECTION:cart-drawer (INDEX:1) */
/* ═══════════ DIE EINE Overlay-Huelle fuer ALLE Popups ═══════════
     Warenkorb-Karte UND Bilder-Galerie benutzen exakt diese Klassen — eine
     Quelle, ein Rahmen, eine Blende, ein Oeffnen/Schliessen. Groesse ist der
     einzige Parameter (--mq-ov-w Breite, --mq-ov-h Hoehe), weil die Inhalte
     verschieden sind. Auf/Zu laeuft ueber window.overlayAuf/Zu (assets/cart.js). */
  .mq-ov { position: fixed; inset: 0; z-index: 1000; visibility: hidden; }
  .mq-ov.is-open { visibility: visible; }
  /* will-change laesst den Browser die Ebene fuer Blende und Karte SCHON BEIM
     LADEN anlegen. Ohne das entsteht sie erst beim ersten Oeffnen — dann muss er
     im selben Moment die Unschaerfe ueber die ganze Seite zum ersten Mal rechnen,
     und genau das ruckelt einmalig. Ab dem zweiten Mal liegt sie im Speicher. */
  .mq-ov__tint { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px); opacity: 0; will-change: opacity;
    transition: opacity var(--overlay-fade, 0.12s) ease; }
  .mq-ov.is-open .mq-ov__tint { opacity: 1; }
  .mq-ov__card {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: min(var(--mq-ov-w, 420px), calc(100% - 40px));
    height: var(--mq-ov-h, auto); max-height: calc(100% - 96px);
    background: var(--color-background, #fff); color: var(--color-ink, #17151d);
    border-radius: 18px; opacity: 0; will-change: opacity;
    transition: opacity var(--overlay-fade, 0.12s) ease;
    font-family: var(--font-body, sans-serif);
  }
  .mq-ov.is-open .mq-ov__card { opacity: 1; }
  @media (prefers-reduced-motion: reduce) { .mq-ov__card, .mq-ov__tint { transition: none; } }

  /* Warenkorb-Eigenes: nur Innen-Layout + Henkel. Rahmen kommt aus .mq-ov oben. */
  /* Werte am laufenden Checkout am "Pay now"-Knopf ausgelesen:
     Grundfarbe #005BD1, beim Ueberfahren und Druecken #00459E, Ecken 12px. */
  \* Die drei Werte stehen jetzt auf :root in layout/theme.liquid — sonst gilt
     .cd__checkout nur im Schieber. Gleiche Werte, nur eine Ebene hoeher. */
  .cd__panel { display: flex; flex-direction: column; }

  /* DER Aufbau jeder Blende: Kopf (Titel + Schliessen), Rumpf, Fuss.
     Nur Inhalt und Groesse wechseln, der Aufbau nie. Benutzt vom
     Warenkorb-Schieber und vom Sprachfenster (snippets/locale-dialog.liquid). */
  .mq-ov__head { display: flex; align-items: center; justify-content: space-between; padding: 20px; }
  /* In px, nicht in rem: Auf der Cart-Seite liegen die Dateien des Checkouts,
     und die setzen die Grundeinheit auf 10px. Ein rem-Wert waere dort nur noch
     62,5 % gross — der Titel kam mit 11px statt 17,6px heraus. */
  .mq-ov__title { font-family: var(--font-heading, sans-serif); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; margin: 0; }
  /* Grosse, gut treffbare Schliessflaeche: 20px Symbol + 6px Rand rundum = 32px. */
  .mq-ov__x { display: flex; border: 0; background: none; line-height: 1; cursor: pointer; color: var(--color-ink, #17151d); padding: 6px; }
  .mq-ov__x svg { width: 20px; height: 20px; display: block; }
  .mq-ov__x:hover { color: #005bd1; }
  /* Innenabstand fuer den Rumpf einer BLENDE. .cd__inner steckt auch in der
     rechten Spalte der Cart-Seite — deshalb nur innerhalb des Schiebers
     (.cd__panel), sonst wuerde die Cart-Seite mitverschoben. */
  .mq-ov__body,
  .cd__panel .cd__inner { min-height: 0; padding: 0 20px; }
  .cd__inner { min-height: 0; }

  /* Der Schieber ist weiss. Das Grau kommt aus dem Checkout, wo die Uebersicht
     auf der grauen Spalte liegt — hier gibt es diese Spalte nicht. */
  .cd__panel .x-summary > div { background-color: #fff; }

  /* Gescrollt wird NUR die Artikelliste — das ist der eigene Rollbereich des
     Checkouts. Damit bleiben Zwischensumme, Versand, Gesamt und die Knoepfe
     fest unten stehen. Der aeussere Kasten darf deshalb nicht mehr rollen:
     sein overflow hat auch die Mengen-Blase ueber dem ersten Bild abgeschnitten
     (die ragt oben heraus; der Checkout faengt das mit padding/margin ab). */
  .mq-ov__foot { padding: 20px; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
  .mq-ov__foot[hidden] { display: none; }

  /*
    The cart body is NOT styled here. Its markup is the checkout's own order
    summary and its stylesheet is assets/checkout-summary.css — the original,
    pulled out of the checkout's stylesheets. Nothing below touches it; the
    drawer only says how tall it may get and what sits around it. Its inner
    padding comes from the checkout's summary panel, so there is none here.
  */
  /* No flex:1 here. It gave the cart body a definite height, and the checkout's
     rows carry height:100% (._1fragem4q) — so each row stretched to the whole
     panel and then shrank back to an even share: two 104/156px rows both came
     out 130px tall. The rows size themselves; the checkout's own scroll area
     (._1b9t7yp2, max-height 40vh) caps the list. */
  .cd__inner { min-height: 0; }
  /* Warenkorb-Reste, die es vor dem gemeinsamen Aufbau gab, sind ersetzt durch
     .mq-ov__head / .mq-ov__body / .mq-ov__foot. */
  /* In the drawer the cart body is wrapped by Shopify's own section div, so the
     scrolling has to sit on THAT element — it is the flex child of the panel.
     shrink-only (0 1 auto), never grow: growing would hand the checkout's rows
     a definite height and they carry height:100%. */
  .cd__panel > .shopify-section { flex: 0 1 auto; overflow: visible; }
  /* primary button, 1:1 with the checkout "Pay now" button */
  .cd__checkout {
    display: flex; align-items: center; justify-content: center; text-align: center; text-decoration: none;
    font-family: var(--font-heading, sans-serif); font-weight: 700; font-size: 14px;
    color: #fff; background: var(--cd-accent); padding: 14px; min-height: 50px;
    border-radius: var(--cd-radius); cursor: pointer; border: 0; width: 100%;
    /* Uebergang 1:1 aus dem Checkout: 0.2s ease-in-out auf denselben sechs
       Eigenschaften. Ohne ihn springt die Farbe, im Checkout blendet sie. */
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out,
                border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out,
                opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
  }
  .cd__checkout:hover { background: var(--cd-accent-hover); }
  /* Fokus-Rahmen wie im Checkout: 1px innen, in der dunkleren Blauvariante. */
  .cd__checkout:focus-visible { outline: 0; box-shadow: inset 0 0 0 1px var(--cd-accent-hover); }
  /* everything about this button lives in .btn-grey (assets/base.css) — only
     its distance to the blue button above is local */
  .cd__view { margin-top: 10px; }

  .cd__empty { padding: 60px 22px; text-align: center; }
  .cd__emptytxt { color: rgba(23,21,29,0.6); margin: 0 0 20px; }
/* END_SECTION:cart-drawer */

/* START_SECTION:feature-banner (INDEX:3) */
/*
    Rebuilt from samsung.com/us — their .hd08-hero-kv-home. Source read
    directly, not inferred: CSS at .../home/ho-g-hero-kv-home/clientlibs/
    site.min.*.css, JS at the matching site.min.*.js (its updateShrinkMotion
    is transferred in assets/scroll-shrink.js).

    The effect: __contents starts full-width and its max-width shrinks
    linearly to 1440px as you scroll, staying centred. Only the coloured
    panel narrows — the text does NOT move with it, because the text is
    anchored to the CENTRE, not to the edge:

      .hd08-hero-kv-home--text-align-desktop-middle-right __text-wrap {
        right: 50%; margin-right: -748px; padding-right: 88px;
      }

    right:50% resolves to the container's midpoint, and that midpoint is
    always the viewport midpoint (left:50% + translateX(-50%) on __contents)
    no matter how narrow it gets. The -748px offset is fixed. Anchoring to
    the edge instead (right:60px) would drag the text along — that is the
    whole trick.
  */
  .feature-banner {
    position: relative;
    width: 100%;
    max-width: 1920px;
    height: 100vh;
    /*
      Pull back up under the overlay's top bar + header so this section starts
      at the very top of the overlay and keeps its full height. Those bars
      keep their place in flow (which is what stacks them) but are lifted over
      this section by z-index — see sections/section2-top-bar.liquid and
      sections/section2-header.liquid. --overlay-bars-height is measured in
      layout/theme.liquid.
    */
    margin: calc(-1 * var(--overlay-bars-height, 0px)) auto 0;
    font-size: 0;
  }

  .feature-banner__contents {
    overflow: hidden;
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 100%;
    height: 100%;
    max-width: 1920px;
    margin: 0 auto;
    transform: translateX(-50%);
    background: #d9d9d9;
  }

  /*
    Their .hd08-hero-kv-home__contents.is-animation, verbatim. Added by
    assets/scroll-shrink.js only while the shrink is mid-flight, lifting the
    panel onto its own compositing layer for the duration. Without it the
    resize repaints on the main thread every frame and the motion judders.
  */
  .feature-banner__contents.is-animation {
    will-change: transform;
  }

  /*
    Anchored to the centre (right/left: 50% + a fixed margin), never to the
    edge — see the note above. Their exact offsets: -748px / -720px, with
    88px / 60px of padding pulling the text back inward.
  */
  .feature-banner__text-wrap {
    position: absolute;
    top: 50%;
    z-index: 10;
    width: 620px;
    box-sizing: content-box;
    transform: translateY(-50%);
    font-size: 1rem;
  }

  .feature-banner--align-left .feature-banner__text-wrap {
    left: 50%;
    margin-left: -720px;
    padding-left: 60px;
  }

  .feature-banner--align-right .feature-banner__text-wrap {
    right: 50%;
    margin-right: -748px;
    padding-right: 88px;
  }

  .feature-banner--align-center .feature-banner__text-wrap {
    left: 50%;
    width: 720px;
    transform: translate(-50%, -50%);
    text-align: center;
  }

  /* Their fluid band below 1440px — same ratios, vw instead of px. */
  @media only screen and (min-width: 48em) and (max-width: 90em) {
    .feature-banner--align-left .feature-banner__text-wrap {
      margin-left: -50vw;
      padding-left: 4.16666667vw;
    }

    .feature-banner--align-right .feature-banner__text-wrap {
      margin-right: -51.94444444vw;
      padding-right: 6.11111111vw;
    }

    .feature-banner--align-center .feature-banner__text-wrap {
      width: 50vw;
    }
  }

  @media only screen and (max-width: 47.99em) {
    .feature-banner {
      height: 177.77777778vw;
    }

    .feature-banner__text-wrap,
    .feature-banner--align-left .feature-banner__text-wrap,
    .feature-banner--align-right .feature-banner__text-wrap,
    .feature-banner--align-center .feature-banner__text-wrap {
      top: 50%;
      left: 50%;
      right: auto;
      width: 86.66666667vw;
      margin: 0;
      padding: 0;
      transform: translate(-50%, -50%);
      text-align: center;
    }
  }

  .feature-banner--text-black {
    color: var(--color-ink);
  }

  .feature-banner--text-white {
    color: var(--color-background);
  }

  .feature-banner__headline {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.75rem, 3.5vw, 3rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0 0 var(--space-2);
  }

  .feature-banner__desc {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: clamp(1.1rem, 2vw, 1.6rem);
    line-height: 1.3;
    margin: 0;
  }

  .feature-banner__cta-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
  }

  .feature-banner--align-center .feature-banner__cta-wrap {
    justify-content: center;
  }

  .feature-banner__link {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
  }

  .feature-banner__button {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: inherit;
    text-decoration: none;
    border: 1px solid currentColor;
    border-radius: 999px;
    padding: 0.5em 1.4em;
    transition: background-color 0.15s ease, color 0.15s ease;
  }

  .feature-banner--text-black .feature-banner__button:hover {
    background: var(--color-ink);
    color: var(--color-background);
  }

  .feature-banner--text-white .feature-banner__button:hover {
    background: var(--color-background);
    color: var(--color-ink);
  }

  /*
    Their text reveal, values from the same stylesheet:
      opacity   .5s linear
      transform 1.5s cubic-bezier(0, 0.18, 0.07, 1)
    staggered .067s / .134s / .201s, starting at translateY(20px). This is a
    one-shot entrance and is unrelated to the shrink, which stays glued to
    the scroll position.
  */
  .feature-banner__headline,
  .feature-banner__desc,
  .feature-banner__cta-wrap {
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.5s linear, transform 1.5s cubic-bezier(0, 0.18, 0.07, 1);
  }

  .feature-banner__text-wrap.is-ani .feature-banner__headline,
  .feature-banner__text-wrap.is-ani .feature-banner__desc,
  .feature-banner__text-wrap.is-ani .feature-banner__cta-wrap {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .feature-banner__text-wrap.is-ani .feature-banner__headline {
    transition-delay: 0.067s;
  }

  .feature-banner__text-wrap.is-ani .feature-banner__desc {
    transition-delay: 0.134s;
  }

  .feature-banner__text-wrap.is-ani .feature-banner__cta-wrap {
    transition-delay: 0.201s;
  }

  @media (prefers-reduced-motion: reduce) {
    .feature-banner__headline,
    .feature-banner__desc,
    .feature-banner__cta-wrap {
      opacity: 1;
      visibility: visible;
      transform: none;
      transition: none;
    }
  }
/* END_SECTION:feature-banner */

/* START_SECTION:features (INDEX:4) */
.features__inner {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: var(--section-pad-block) var(--section-pad-inline);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    border-top: 1px solid var(--color-line);
  }

  @media (min-width: 48em) {
    .features__inner {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .features__index {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--color-accent);
    letter-spacing: 0.08em;
    margin: 0 0 var(--space-2);
  }

  .features__title {
    font-size: 1.15rem;
    margin: 0 0 var(--space-1);
  }

  .features__text {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.6;
    opacity: 0.75;
    margin: 0;
    max-width: 32ch;
  }
/* END_SECTION:features */

/* START_SECTION:footer (INDEX:5) */
.site-footer {
    border-top: 1px solid var(--color-line);
  }

  .site-footer__inner {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: var(--section-pad-block) var(--section-pad-inline);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
  }

  .site-footer__tagline {
    font-size: 0.85rem;
    color: var(--color-ink);
    opacity: 0.6;
    margin: 0;
  }

  .site-footer__meta {
    display: flex;
    gap: var(--space-3);
    font-size: 0.85rem;
  }

  .site-footer__meta a {
    text-decoration: none;
  }
/* END_SECTION:footer */

/* START_SECTION:header (INDEX:7) */
/*
    The hero's header. Plain and self-contained: no scroll-linked behavior,
    no effects, no animation, no hiding. It just sits there, full stop. Has
    nothing to do with sections/section2-header.liquid — that one lives
    inside the overlay and is a separate section entirely.

    Position goes on the shopify-section-* WRAPPER, not .site-header
    itself: Shopify sizes that wrapper exactly to its content, leaving no
    room to position within it.
  */
  #shopify-section-header {
    position: fixed;
    top: var(--topbar-height, 0px);
    left: 0;
    right: 0;
    z-index: 10;
  }

  @media (min-width: 48em) {
    /*
      Inside .scroll-stage (position:fixed, inset:0 — see base.css), absolute
      pins to the viewport exactly like fixed did, but keeps this header in
      the stage's stacking context so the section-2 overlay (z-index 100)
      can actually cover it. As `fixed` it sat in the root context instead,
      out of the overlay's reach at any z-index.
    */
    #shopify-section-header {
      position: absolute;
      /*
        Reserve the overlay's scrollbar here. The hero layer has no scrollbar of
        its own, the overlay below does (.scroll-stage__content is
        overflow-y:auto), so without this the two layers offer different usable
        widths and the logo jumps sideways on the hero → section-2 switch. The
        document-level gutter is off on the homepage (assets/base.css), so this
        reserves it exactly once.
      */
      right: var(--scrollbar-width, 0px);
    }
  }

  .site-header {
    background: transparent;
  }

  .site-header__inner {
    /* Same centred content box as the checkout/split, so the logo lands at the
       same x everywhere (intelligent max-width centring, not a left/right gap).
       40px inline padding = the checkout's panel padding, so the logo sits at
       box-left + 40 = the checkout logo x. Icons ride the right edge of the same
       box (further right than the split, as intended). */
    max-width: calc(var(--overlay-width) - var(--scrollbar-width, 0px));
    margin: 0 auto;
    padding: var(--space-3) 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .site-header__logo {
    display: block;
    line-height: 0;
  }

  /* Same brand asset and same 130px width as the checkout header, so the mark
     is identical on every surface. */
  .site-header__logo img {
    width: 130px;
    height: auto;
    display: block;
  }
/* END_SECTION:header */

/* START_SECTION:hero (INDEX:8) */
.hero {
    position: relative;
    z-index: 1;
    height: 100vh;
    min-height: 480px;
    overflow: hidden;
  }

  /*
    Below the snap-scroll breakpoint, .scroll-stage isn't fixed (see
    base.css), so the page is one normal flowing document again and hero
    needs its own pull-up behind the header/top-bar, same as before.
  */
  @media (max-width: 47.99em) {
    .hero {
      margin-top: calc(-1 * var(--bars-height, 0px));
    }
  }

  .hero__frame {
    position: absolute;
    inset: 0;
    background-color: var(--color-ink);
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }

  .hero__frame-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(30, 30, 30, 0.35) 0%, rgba(30, 30, 30, 0.55) 100%);
  }

  .hero__frame-content {
    position: relative;
    height: 100%;
    /* full width — the hero is the one section that spans 100%, unlike the
       header (checkout width) and the sections below it. It used to sit in the
       old --container-width (1200) box, which matched nothing. */
    width: 100%;
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: var(--space-7);
    color: var(--color-background);
  }

  .hero__eyebrow {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.925rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0 0 var(--space-2);
  }

  .hero__mark {
    margin-right: 0.15em;
  }

  .hero__mark .cls-1 {
    fill: var(--color-background);
  }

  .hero__heading {
    font-size: clamp(2rem, 5vw, 3.75rem);
    letter-spacing: -0.01em;
    margin: 0 0 var(--space-3);
    max-width: 20ch;
  }

  .hero__subheading {
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 40ch;
    opacity: 0.85;
    margin: 0 0 var(--space-4);
  }

  .hero__cta {
    display: inline-block;
    width: fit-content;
    font-family: var(--font-heading);
    font-weight: 500;
    text-decoration: none;
    color: var(--color-ink);
    background: var(--color-background);
    padding: var(--space-2) var(--space-4);
    border-radius: 2px;
  }

  .hero__cta:hover {
    background: var(--color-accent);
    color: var(--color-background);
  }
/* END_SECTION:hero */

/* START_SECTION:main-404 (INDEX:9) */
.nf {
    background: var(--color-background);
    color: var(--color-ink);
    font-family: var(--font-body);
    display: grid;
    place-items: center;
    min-height: 60vh;
  }
  .nf__inner {
    max-width: 520px;
    padding: var(--section-pad-block) var(--section-pad-inline);
    text-align: center;
  }
  .nf__code {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(3rem, 9vw, 5.5rem);
    line-height: 1;
    letter-spacing: -0.05em;
    color: var(--color-accent);
    margin: 0;
  }
  .nf__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.4rem, 3vw, 2rem);
    letter-spacing: -0.02em;
    margin: var(--space-3) 0 var(--space-2);
  }
  .nf__text { opacity: 0.7; margin: 0 0 var(--space-5); }
  .nf__cta {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.95rem;
    padding: 14px 30px;
    border-radius: 8px;
    background: var(--color-accent);
    color: #fff;
    text-decoration: none;
  }
/* END_SECTION:main-404 */

/* START_SECTION:main-cart2 (INDEX:11) */
/* Split, header, footer, kicker/badges and the whole cart body (.cd__*) come
     from the global rules (bundled theme-wide). Cart-page-own = the title, the
     right-column checkout/offer/guarantee, and a few context overrides so the
     drawer's compact cart body sits right in this wide column. */

  .ct__title {
    font-family: var(--font-heading); font-weight: 700;
    font-size: clamp(1.6rem, 3.4cqw, 2.1rem); letter-spacing: -0.03em;
    margin: 0 0 var(--pb-pad);
  }

  .ct__continue { display: inline-block; margin-top: 20px; color: var(--pb-uv); font-weight: 700; }
  .ct__continue:hover { color: #004aa8; }
  .ct__continue[hidden] { display: none; }

  /* ---- right · offer + guarantee + checkout (bottom) ---- */
  .ct__side { display: flex; flex-direction: column; gap: 28px; }
  .ct__block { display: grid; gap: 14px; }
  /* Same 28px rhythm on the left, but as margins — NOT by making the column a
     flex container. The header inside it carries `margin-left:auto`, and in a
     flex column that stops stretching it and shrinks it to its content: the
     logo jumped from 499px wide to 298 and slid right. Measured, not guessed. */
  #pb-cart .ct__block { margin-top: 28px; }
  .ct__perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
  .ct__perks li {
    position: relative; padding-left: 26px;
    font-size: 0.95rem; line-height: 1.4; color: var(--pb-ink);
  }
  .ct__perks li::before {
    content: ""; position: absolute; left: 0; top: 0.15em;
    width: 16px; height: 16px; border-radius: 999px;
    background: var(--pb-uv);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 8.5 6.8 11 12 5'/%3E%3C/svg%3E") center/16px no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 8.5 6.8 11 12 5'/%3E%3C/svg%3E") center/16px no-repeat;
  }

  /* checkout sits right under the offer/guarantee — the bottom of the content,
     snug like the drawer (not floated to the viewport edge). Button = the
     checkout's blue "Pay now" look, own class. */
  .ct__co { display: grid; gap: 12px; }
  .ct__co[hidden] { display: none; }
  .ct__checkout {
    width: 100%; min-height: 50px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; border: 0; border-radius: var(--pb-radius); padding: 14px;
    font-family: var(--font-heading); font-weight: 700; font-size: 14px;
    color: #fff; background: var(--pb-uv); text-decoration: none;
    transition: background-color 0.2s ease-in-out;
  }
  .ct__checkout:hover { background: #004aa8; }
  .ct__secure { margin: 0; text-align: center; font-size: 0.82rem; color: var(--pb-mut); }

  @media screen and (max-width: 999px) {
    .ct__side { gap: 24px; }
  }
/* END_SECTION:main-cart2 */

/* START_SECTION:main-collection (INDEX:12) */
/* Only the product grid is collection-own; the split, header and cart come
     from the global .pb / .pb__* / .cd__* rules (theme-wide bundled). */
  .clx__title {
    font-family: var(--font-heading); font-weight: 700;
    font-size: clamp(1.6rem, 3.4cqw, 2.1rem); letter-spacing: -0.03em;
    margin: 0 0 var(--pb-pad);
  }
  .clx__grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
  }
  .clx__link { display: grid; gap: 6px; text-decoration: none; color: inherit; }
  .clx__media {
    display: block; aspect-ratio: 1; background: #f4f4f5;
    border-radius: 12px; overflow: hidden;
  }
  .clx__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .clx__name { font-family: var(--font-heading); font-weight: 700; font-size: 0.98rem; margin-top: 8px; }
  .clx__price { font-size: 0.95rem; font-variant-numeric: tabular-nums; }
  .clx__was { color: var(--pb-mut); margin-left: 6px; }
  .clx__pager { margin-top: var(--pb-pad); text-align: center; }
  .clx__empty { color: var(--pb-mut); }

  /* Right column · trust section (press + awards + image) */
  .clx__trust { display: flex; flex-direction: column; gap: 28px; }
  .clx__trustimg { margin: 0; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden;
    background: #e9e9ec; display: flex; align-items: center; justify-content: center; }
  .clx__trustimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .clx__ph { color: var(--pb-mut); font-size: 0.85rem; letter-spacing: 0.04em; }
  .clx__block { display: grid; gap: 14px; }
  .clx__kicker { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--pb-uv); font-weight: 700; margin: 0; }
  .clx__quotes { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
  .clx__quotes li { padding-bottom: 16px; border-bottom: 1px solid var(--pb-line); }
  .clx__quotes li:last-child { padding-bottom: 0; border-bottom: 0; }
  .clx__quotes p { margin: 0 0 6px; font-weight: 600; font-size: 1.02rem; line-height: 1.4; letter-spacing: -0.01em; }
  .clx__quotes cite { font-style: normal; font-size: 0.8rem; color: var(--pb-mut); }
  .clx__badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
  .clx__badges li { font-size: 0.78rem; padding: 8px 13px; border: 1px solid var(--pb-line);
    border-radius: 999px; background: #fff; color: var(--pb-ink); }

  @media screen and (max-width: 640px) {
    .clx__grid { grid-template-columns: 1fr; }
  }
/* END_SECTION:main-collection */

/* START_SECTION:main-page (INDEX:13) */
.pg {
    background: var(--color-background);
    color: var(--color-ink);
    font-family: var(--font-body);
  }
  .pg__inner {
    max-width: 760px;
    margin-inline: auto;
    padding: var(--section-pad-block) var(--section-pad-inline);
  }
  {%- comment -%}
    Alle Groessen in px, nicht in rem: Auf diesen Seiten liegen die Dateien des
    Checkouts, und die setzen die Grundeinheit auf 10px. Ein rem-Wert waere dort
    nur noch 62,5 % gross — der Fliesstext kam mit 10px statt 16px heraus.
  {%- endcomment -%}
  .pg__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin: 0 0 var(--space-4);
  }
  .rte {
    font-size: 16px;
    line-height: 1.65;
  }
  .rte > * + * { margin-top: 1em; }
  .rte h2 {
    font-family: var(--font-heading);
    font-size: clamp(20px, 2vw, 26px);
    letter-spacing: -0.02em;
    margin-top: 1.6em;
  }
  .rte h3 {
    font-family: var(--font-heading);
    font-size: 17px;
    margin-top: 1.4em;
  }
  .rte ul, .rte ol { padding-left: 1.25em; }
  .rte li + li { margin-top: 0.35em; }
  .rte a { color: var(--color-accent); }
  .rte img { height: auto; border-radius: 8px; }
/* END_SECTION:main-page */

/* START_SECTION:main-password (INDEX:14) */
.pw {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 48px 24px;
    background: var(--color-background);
    color: var(--color-ink);
    font-family: var(--font-body);
  }
  .pw__card { width: 100%; max-width: 480px; text-align: center; }

  .pw__logo { line-height: 0; margin: 0 0 40px; }
  .pw__logo img { width: 150px; height: auto; display: inline-block; }
  .pw__wordmark { font-family: var(--font-heading); font-weight: 800; font-size: 26px; letter-spacing: -0.02em; line-height: 1; }

  .pw__eyebrow {
    font-size: 12px; font-weight: 800; letter-spacing: 0.32em; text-transform: uppercase;
    color: #005bd1; margin: 0 0 18px;
  }
  .pw__title {
    font-family: var(--font-heading); font-weight: 800;
    font-size: clamp(30px, 6vw, 50px); letter-spacing: -0.035em; line-height: 1.02;
    text-wrap: balance; margin: 0 0 16px;
  }
  .pw__sub { margin: 0 auto 30px; max-width: 42ch; font-size: clamp(15px, 2.4vw, 17px);
    line-height: 1.55; color: var(--color-ink); opacity: 0.62; }

  .pw__field { display: flex; gap: 8px; }
  .pw__enter { margin-top: var(--space-3); }
  .pw__field input {
    flex: 1; min-width: 0; font: inherit; font-size: 15px; color: var(--color-ink);
    background: #fff; border: 1px solid var(--color-line); border-radius: 12px;
    padding: 14px 16px; outline: none; transition: border-color 0.15s, box-shadow 0.15s;
  }
  .pw__field input:focus { border-color: #005bd1; box-shadow: 0 0 0 3px rgba(0,91,209,0.18); }
  .pw__btn {
    font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; white-space: nowrap;
    color: #fff; background: #005bd1; border: 0; border-radius: 12px; padding: 14px 22px;
    transition: background-color 0.15s;
  }
  .pw__btn:hover { background: #004aa8; }
  .pw__ok { font-weight: 700; color: #005bd1; margin: 0; }

  .pw .errors { list-style: none; margin: 0 0 12px; padding: 0; color: #c0341d; font-size: 14px; }

  @media (max-width: 520px) {
    .pw__field { flex-direction: column; }
    .pw__btn { width: 100%; }
  }
/* END_SECTION:main-password */

/* START_SECTION:main-product (INDEX:15) */
.pb {
    /* colours copied 1:1 from the live checkout, read 2026-07-20:
         --x-default-color-background    #FFFFFF   -> main panel
         order-summary panel (computed)  #F5F5F5
         --x-default-color-text          #000000
         --x-default-color-text-subdued  #707070
         --x-default-color-border        #DEDEDE
         --x-default-color-accent        #005BD1   (Pay now button, white text)
       The checkout has no second accent and no glow, so this theme's
       uv-lite / glow tokens collapse onto the accent and transparent. */
    --pb-main-bg: #ffffff;
    --pb-aside-bg: #f5f5f5;
    --pb-surface: #f5f5f5;
    --pb-ink: #000000;
    --pb-mut: #707070;
    --pb-line: #dedede;
    --pb-uv: #005bd1;
    --pb-uv-lite: #005bd1;
    --pb-glow: transparent;
    /* checkout radius: buttons 12px, fields 12px (read from the live checkout) */
    --pb-radius: 12px;
    /* checkout shell values. The checkout's root font-size is 10px, so its rem
       values are written here as the px they actually render at. */
    --pb-aside-max: 480px;  /* --x-shell-order-summary-inline-size: 48rem */
    --pb-pad: 40px;         /* --x-spacing-large-500: 4rem */
    /* The content width of the LEFT column, one number for every split page.
       It is the gallery row measured across: 96px thumbnails + 40px gap +
       499px stage = 635px. Everything in the left column lines up on it, so
       product, cart and collection share one edge instead of three. Apply it
       with the .pb__col class below — never repeat the calculation. */
    --pb-col: calc(96px + var(--pb-pad) + 499px);
    --pb-col-offset: 50px;  /* --x-shell-section-columns-offset: (58rem - 48rem) / 2 */
    --pb-sticky-top: calc(var(--bars-height, 100px) + 16px);
    font-family: var(--font-body);
    color: var(--pb-ink);
    background: var(--pb-main-bg);
  }
  .pb *, .pb *::before, .pb *::after { box-sizing: border-box; }

  /* =====================================================================
     THE SPLIT — copied 1:1 from the live Shopify checkout shell, read on
     2026-07-20 from mosquit.store/checkouts/cn/... via the Chrome extension.
     Authored checkout rules, reproduced verbatim below:

       .Sxi8I            display: grid;
                         grid-template-areas: "main order-summary";
                         grid-template-columns: minmax(min-content, calc(50% + offset)) 1fr;
       ._9F1Rf           grid-area: main; display: flex;
                         justify-content: flex-end; height: 100%;
       ._9F1Rf .gdtca    width: 100%; height: 100%; max-width: 580px; padding: 40px;
                         border-right: 1px solid var(--x-default-color-border);
       .i4DWM            grid-area: order-summary; display: block;
       .i4DWM ._4QenE    position: sticky; inset: 0 auto;
                         width: 100%; max-width: 480px; padding: 40px;

     Breakpoint is the checkout's own: screen and (min-width: 1000px).
     Below it the checkout hides the summary entirely; here it stacks instead.
     ===================================================================== */
  /* Raster, Spalten, Farben und Abstaende kommen aus den Checkout-Dateien
     (Sxi8I / _9F1Rf / gdtca / i4DWM / _4QenE) — genau wie auf der Cart-Seite.
     Die frueheren Regeln .pb__grid / .pb__gallery / .pb__info / .pb__aside
     haben dasselbe nachgebaut und sind deshalb entfernt. */

  /* left side = 100% of the column width; the left/right spacing is padding */
  .pb__gallery-in,
  .pb__info-in,
  .pb__story { width: 100%; }
  .pb__gallery-in,
  .pb__info-in { padding: var(--pb-pad); }
  .pb__info-in { padding-top: 0; }
  /* story: NOT full-bleed — its bands sit flush-left with the content (176px)
     and keep the 40px gap on the right, exactly like the title/description box. */
  .pb__story { padding-inline: var(--pb-pad); }
  @media screen and (min-width: 1000px) {
    /* no fixed header on the product page → clear nothing, just the panel pad */
    .pb__gallery-in { padding-top: var(--pb-pad); }
  }

  /* checkout-style header: logo left, our function icons (contact / account /
     cart) right, using Shopify checkout's own sprite glyphs, in the accent blue */
  .pb__hdr { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: var(--pb-pad); }
  .pb__brand { display: block; line-height: 0; }
  /* Same brand asset and same 130px width as the checkout header, so the mark is
     identical on both surfaces and the centred cart icon lands at the same y. */
  .pb__brand img { width: 130px; height: auto; display: block; }
  /* The bag is Shopify's original and sets the size: 11.5 of its 14 units at
     the former 24px box = 19.71px tall. Every glyph is cropped to its own
     outline (see the markup), so this one height makes all four exactly as
     tall as the bag while each keeps its own width. The 1.5px stroke sits
     centred on the outline and spills 0.75px past the box on every side --
     the same on all four, so one flex gap gives one optical gap. 24px is the
     spacing account-to-bag already had. */
  .pb__hdr-nav { display: flex; align-items: center; gap: 24px; }
  .pb__hdr-ico { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--pb-uv, #005bd1); text-decoration: none; }
  .pb__hdr-ico svg { height: 19.71px; width: auto; overflow: visible; display: block; }
  .pb__hdr-ico:hover { color: #004aa8; }
  /* Checkout draws the bag in a 24px box, so its outline stops 3.43px short of
     the header's right edge ((24 - 24 * 10/14) / 2). Our boxes hug the outline,
     which would push the bag flush to the edge. This margin puts it back on the
     checkout's pixel without touching the 24px spacing on its left. */
  .pb__hdr-cart { margin-right: 3.43px; }
  .pb__hdr-count { position: absolute; top: -6px; right: -8px; min-width: 15px; height: 15px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-body); font-size: 10px; font-weight: 700; line-height: 1; color: #fff; background: var(--pb-uv, #005bd1); border-radius: 999px; font-variant-numeric: tabular-nums; }
  .pb__hdr-count[hidden] { display: none; }
  @media screen and (min-width: 1000px) {
    /* Header ONLY sits in the checkout's box, not the full column: 500px content
       (= 580px wrapper − 80px padding), right-aligned to the seam. Result: logo
       x=459 and cart x=934/958 match the checkout pixel-for-pixel, while the
       gallery / info / story / footer below stay 100% width (per earlier request). */
    /* Same width formula as the image column: 499 when there is room,
       otherwise whatever is left after the fixed 96px thumbnails + 40px gap.
       Keeps the logo's left edge glued to the image's left edge at EVERY
       viewport, not only at full width. */
    .pb__hdr { max-width: min(499px, calc(100% - 96px - var(--pb-pad))); margin-left: auto; }
  }

  /* checkout-style footer at the bottom of the left column.
     Mobile: full width with side padding. Desktop border-box gets pinned under
     the logo below (499px @ x=333) so the top border matches the checkout's. */
  .pb__footer { border-top: 1px solid var(--pb-line);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 10px 24px; font-size: 14px; color: var(--pb-mut);
    padding: 14px var(--pb-pad) var(--pb-pad); margin-top: 8px; }
  @media screen and (min-width: 1000px) {
    /* 1:1 with the checkout footer: border-box 499px wide, left edge under the logo
       (x=333). Right edge shares the header's content edge (seam − 40 = 832);
       margin-left:auto + 499 width lands the left at 333. Links start at 333, no
       side padding. Border therefore spans exactly 333→832, like the checkout. */
    .pb__footer { width: 499px; max-width: calc(100% - 2 * var(--pb-pad));
      margin-left: auto; margin-right: var(--pb-pad); padding-inline: 0; }
  }
  .pb__footer-links { display: flex; flex-wrap: wrap; gap: 10px 20px; }
  /* policy links 1:1 with the checkout footer: accent blue, underlined, hover darkens */
  .pb__footer-links a { color: var(--pb-uv); text-decoration: underline; }
  .pb__footer-links a:hover { color: #004aa8; }
  .pb__footer-copy { color: var(--pb-mut); }

  .pb__aside-in {
    width: 100%;
    max-width: var(--pb-aside-max);
    margin-inline: auto;
    padding: var(--pb-pad);
  }
  @media screen and (min-width: 1000px) {
    .pb__aside-in {
      position: sticky;
      /* checkout uses inset: 0 auto — it has no fixed header. This theme does,
         so the top offset clears it; everything else is the checkout's rule. */
      inset: var(--pb-sticky-top) auto;
      margin-inline: 0;
      /* Panel fills the visible column height and lays out as a column, so the
         CTA sits on its bottom edge via margin-top:auto on .pb__pay. */
      min-height: calc(100vh - var(--pb-sticky-top));
      display: flex;
      flex-direction: column;
    }
  }

  /* ---- gallery: thumbnails (left, stacked) + square main image (right) ----
     every gap = var(--pb-pad) (40px), the same as the section's left/right inset:
       - between stacked thumbnails
       - from the thumb column across to the main image
     all product images are forced square via aspect-ratio: 1. */
  .pb__media { display: flex; gap: var(--pb-pad); align-items: flex-start; position: relative;
    padding-left: calc(clamp(64px, 6vw, 96px) + var(--pb-pad)); }
  .pb__media:not(:has(.pb__thumbs)) { padding-left: 0; }
  @media screen and (min-width: 1000px) {
    /* Patryk's geometry: the big image is flush-left with the LOGO — i.e. it
       gets exactly the checkout form's 499px and ends on the content edge the
       header already sits on. Left of it, the same 40px gap the content keeps
       to the buy column, then the 96px thumbnails. The whole row is
       right-aligned, and its total width (96 + 40 + 499 = 635px) becomes the
       width of every section below (info + story). */
    .pb__media { width: min(var(--pb-col), 100%); margin-left: auto;
      padding-left: calc(96px + var(--pb-pad)); }
    .pb__thumbs { width: 96px; }
    /* The image may SHRINK below 499 when the pane gets narrow (1000–1550px
       viewports) — same behaviour as the header box above it (max-width 499,
       right-aligned), so the picture keeps sharing its left edge with the
       logo at every width. Thumbnails and the 40px gap stay fixed. */
    .pb__stage { flex: 0 1 499px; min-width: 0; }
    /* THE left-column content box. One class, one width — used by the product
       page (description, story), the cart (items, totals) and the collection
       (product grid), so all three start and end on the same line. The pane has
       no right padding of its own, so the 40px to the seam goes on as margin;
       right edges land on the same content edge as the image above. */
    .pb__col {
      width: min(var(--pb-col), calc(100% - var(--pb-pad)));
      margin-left: auto;
      margin-right: var(--pb-pad);
      padding-inline: 0;
    }
  }

  /* 5 QUADRATISCHE Kacheln, zusammen exakt so hoch wie die Buehne:
     bei 499px Buehne: 5 x 96px + 4 Luecken x 4.75px = 499. Die Luecke ist fix,
     die Quadrat-Groesse folgt der Buehnenhoehe (Breite = Hoehe via aspect-ratio). */
  .pb__thumbs { --pb-tgap: 14.75px; display: flex; flex-direction: column; align-items: flex-start;
    gap: var(--pb-tgap); margin: 0;
    position: absolute; left: 0; top: 0; height: 100%; width: clamp(64px, 6vw, 96px); }
  /* Rand IMMER innen: Kontur mit Innen-Versatz liegt UEBER dem Bild,
     Kachelgroesse aendert sich nie, nichts verschiebt sich */
  .pb__more { height: calc((100% - 4 * var(--pb-tgap)) / 5); aspect-ratio: 1; width: auto; max-width: 100%;
    flex: 0 0 auto; padding: 0; border: 0;
    outline: 1px solid var(--pb-line); outline-offset: -1px; background: var(--pb-surface); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-heading); font-weight: 700; font-size: 16px; color: var(--pb-uv-lite);
    transition: outline-color 0.18s ease; }
  .pb__more:hover { outline-color: rgba(0, 91, 209, 0.55); }
  .pb__thumb { height: calc((100% - 4 * var(--pb-tgap)) / 5); aspect-ratio: 1; width: auto; max-width: 100%;
    flex: 0 0 auto; padding: 0; border: 0; outline: 1px solid var(--pb-line); outline-offset: -1px;
    background: var(--pb-surface); cursor: pointer; overflow: hidden; transition: outline-color 0.18s ease; }
  .pb__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .pb__thumb:hover { outline-color: rgba(0, 91, 209, 0.55); }
  .pb__thumb.is-active { outline: 2px solid var(--pb-uv-lite); outline-offset: -2px; box-shadow: 0 0 22px -4px var(--pb-glow); }

  .pb__stage { position: relative; flex: 1 1 auto; min-width: 0; aspect-ratio: 1; background: var(--pb-surface); overflow: hidden; }
  .pb__slide { position: absolute; inset: 0; display: none; }
  .pb__slide.is-active { display: block; }
  /* Overlay-Karussell (alle Bilder): benutzt DIE geteilte Huelle .mq-ov / .mq-ov__tint
     / .mq-ov__card aus sections/cart-drawer.liquid — identisch zum Warenkorb.
     Hier nur das Galerie-Eigene: Innen-Layout (Thumbs links + Hauptbild) und die
     Kartengroesse (breiter, weil Bilder). Rahmen/Blende/Oeffnen = geteilt. */
  .pb__ov-card { display: flex; overflow: hidden; }
  /* Thumbs LINKS als Spalte: 88er Quadrate, feste Abstaende, Scrollbar sichtbar,
     Breite fest + reservierte Scrollbar-Breite */
  .pb__ov-strip { flex: 0 0 auto; width: calc(128px + var(--scrollbar-width, 0px));
    display: flex; flex-direction: column; gap: 12px; padding: 20px;
    overflow-y: auto; box-shadow: inset -1px 0 0 rgba(23, 21, 29, 0.08); }
  .pb__ov-strip button { width: 88px; height: 88px; flex: 0 0 auto; padding: 0; border: 0;
    outline: 1px solid var(--pb-line); outline-offset: -1px; background: #fff; cursor: pointer; overflow: hidden; }
  .pb__ov-strip button img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .pb__ov-strip button.is-active { outline: 2px solid var(--pb-uv-lite); outline-offset: -2px; }
  /* Hauptbereich rechts: feste Abstaende in alle Richtungen */
  .pb__ov-main { flex: 1 1 auto; min-width: 0; position: relative; }
  .pb__ov-stage { position: absolute; inset: 64px 88px; display: flex; align-items: center; justify-content: center; }
  .pb__ov-stage img { max-width: 100%; max-height: 100%; display: block; }
  .pb__ov-x { position: absolute; top: 14px; right: 16px; border: 0; background: none; cursor: pointer;
    color: var(--pb-ink); padding: 6px; }
  .pb__ov-x svg { width: 18px; height: 18px; display: block; }
  .pb__ov-x:hover { color: var(--pb-uv-lite); }
  .pb__ov-pf { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px;
    border-radius: 50%; border: 0; outline: 1px solid var(--pb-line); outline-offset: -1px;
    background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--pb-ink); }
  .pb__ov-pf:hover { background: #f5f5f5; }
  .pb__ov-pf svg { width: 18px; height: 18px; }
  .pb__ov-pf--l { left: 22px; }
  .pb__ov-pf--r { right: 22px; }
  .pb__ov-count { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); margin: 0;
    font-size: 13px; color: var(--pb-mut); font-variant-numeric: tabular-nums; }
  .pb__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .pb__ph { display: grid; place-items: center; color: var(--pb-mut); letter-spacing: 0.12em; text-transform: uppercase; font-size: 12px; }

  /* ---- left column typography ----
     From here on the sizes and gaps are the checkout's own steps, read out of
     its stylesheet on 2026-07-21. Its root font-size is 10px, so its rem values
     are written here as the px they actually render at:
       text    12 / 14 / 16 / 18 / 20 / 22 / 28px
       line    1.2 (tight) or 1.35 (base)
       spacing 2 / 4 / 6 / 8 / 10 / 14 / 16 / 20 / 24 / 32 / 40 / 48px
     Every value moved to its nearest step. Where one sat exactly between two
     steps it went to the smaller one — applied the same way everywhere, so the
     result stays predictable. */
  .pb__eyebrow { font-family: var(--font-heading); font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; font-weight: 700; color: var(--pb-uv-lite); margin: 0 0 10px; }
  .pb__title { font-family: var(--font-heading); font-size: 28px; line-height: 1.2; letter-spacing: -0.035em; font-weight: 700; margin: 0 0 20px; }
  .pb__h2 { font-family: var(--font-heading); font-size: 20px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 700; margin: 0 0 20px; }
  .pb__rte { font-size: 16px; line-height: 1.35; color: var(--pb-mut); }
  .pb__rte > * + * { margin-top: 1em; }
  .pb__rte a { color: var(--pb-uv-lite); }

  .pb__block { margin-top: clamp(40px, 5vw, 48px); padding-top: clamp(24px, 3vw, 40px); border-top: 1px solid var(--pb-line); }

  .pb__reviews { display: grid; gap: 2px; }
  .pb__review { margin: 0; padding: 20px; background: var(--pb-surface); }
  .pb__stars { display: flex; gap: 2px; margin-bottom: 10px; }
  .pb__star { color: var(--pb-line); font-size: 14px; line-height: 1; }
  .pb__star.is-on { color: var(--pb-uv-lite); }
  .pb__review blockquote { margin: 0 0 10px; font-size: 16px; line-height: 1.35; }
  .pb__review figcaption { font-size: 12px; color: var(--pb-mut); }

  .pb__faq details { border-top: 1px solid var(--pb-line); }
  .pb__faq details:last-child { border-bottom: 1px solid var(--pb-line); }
  .pb__faq summary { cursor: pointer; padding: 16px 0; font-weight: 700; font-size: 16px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
  .pb__faq summary::-webkit-details-marker { display: none; }
  .pb__faq summary::after { content: "+"; color: var(--pb-uv-lite); font-weight: 400; }
  .pb__faq details[open] summary::after { content: "−"; }
  .pb__faq details > .pb__rte { padding: 0 0 16px; font-size: 14px; }

  /* ---- right column: buy panel ---- */
  .pb__aside-name { font-family: var(--font-heading); font-size: 16px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 14px; }
  .pb__pricerow { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
  .pb__price { font-family: var(--font-heading); font-size: 28px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.2; }
  .pb__was { color: var(--pb-mut); font-size: 16px; }
  .pb__was[hidden], .pb__off[hidden] { display: none; }
  .pb__off { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; padding: 4px 10px; color: #fff; background: var(--pb-uv); }

  .pb__stock { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--pb-mut); margin: 0 0 24px; }
  .pb__dot { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 10px 1px rgba(74, 222, 128, 0.55); }
  .pb__dot--out { background: #f87171; box-shadow: 0 0 10px 1px rgba(248, 113, 113, 0.5); }

  .pb__form { margin: 0; }
  .pb__label { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pb-mut); font-weight: 700; }

  .pb__option { border: 0; padding: 0; margin: 0 0 20px; }
  .pb__option legend { padding: 0; margin-bottom: 10px; }
  .pb__swatches { display: flex; flex-wrap: wrap; gap: 8px; position: relative; }
  .pb__radio { position: absolute; opacity: 0; pointer-events: none; }
  .pb__swatch { cursor: pointer; padding: 10px 16px; font-size: 14px; border: 1px solid var(--pb-line); border-radius: var(--pb-radius); color: var(--pb-ink); transition: border-color 0.16s ease, background-color 0.16s ease; }
  .pb__swatch:hover { border-color: rgba(0, 91, 209, 0.6); }
  .pb__radio:checked + .pb__swatch { border-color: var(--pb-uv-lite); background: rgba(0, 91, 209, 0.1); }
  .pb__radio:focus-visible + .pb__swatch { outline: 2px solid var(--pb-uv-lite); outline-offset: 2px; }
  .pb__swatch.is-soldout { opacity: 0.35; text-decoration: line-through; }

  .pb__qtyrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
  .pb__qty { display: flex; align-items: center; border: 1px solid var(--pb-line); border-radius: var(--pb-radius); overflow: hidden; }
  .pb__qtybtn { width: 40px; height: 48px; background: none; border: 0; color: var(--pb-ink); font-size: 16px; cursor: pointer; transition: background-color 0.16s ease; }
  .pb__qtybtn:hover { background: rgba(0, 0, 0, 0.05); }
  .pb__qtyinput { width: 48px; height: 48px; text-align: center; background: none; border: 0; color: var(--pb-ink); font-size: 16px; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
  .pb__qtyinput::-webkit-outer-spin-button, .pb__qtyinput::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

  /* 1:1 with the checkout "Pay now" button (#checkout-pay-button, measured 2026-07-20):
     bg #005bd1, radius 12px, NO shadow, 14px padding, 50px tall, Plus Jakarta 14px/700,
     NO press animation. Hover darken kept subtle — the checkout's exact hover shade sits
     in Shopify's cross-origin CSS and can't be read. */
  .pb__add { width: 100%; min-height: 50px; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 0; border-radius: var(--pb-radius); padding: 14px; font-family: var(--font-heading); font-weight: 700; font-size: 14px; color: #fff; background: var(--pb-uv); transition: background-color 0.2s ease-in-out; }
  .pb__add:hover { background: #004aa8; }
  .pb__add:disabled { opacity: 0.4; cursor: not-allowed; }

  /* the visible add-to-cart: a plain block at the bottom of the sticky buy panel
     — full panel width, no positioning tricks. Desktop only (see below). */
  .pb__stickyadd { display: none; }
  @media screen and (min-width: 1000px) {
    /* desktop: the sticky button is the only add-to-cart → hide the in-panel one
       (it stays in the DOM so the sticky button's addBtn.click() submits the
       form). On mobile the sticky is hidden and .pb__add is the buy button. */
    .pb__add { display: none; }
    /* 1:1 with the checkout "Pay now" button: flat, radius 12px, 14px padding,
       50px tall, Plus Jakarta 14px/700. */
    .pb__stickyadd {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      margin-top: 14px;
      min-height: 50px;
      cursor: pointer;
      border: 0;
      border-radius: var(--pb-radius);
      padding: 14px;
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: 14px;
      color: #fff;
      background: var(--pb-uv);
      transition: background-color 0.2s ease-in-out;
    }
    .pb__stickyadd:hover { background: #004aa8; }
    .pb__stickyadd:disabled { opacity: 0.4; cursor: not-allowed; }
  }

  /* everything about this button lives in .btn-grey (assets/base.css) — only
     its distance to the buy button above it is local */
  .pb__viewcart { margin-top: 10px; }

  .pb__dynamic { margin-top: 10px; }
  /* The placeholder stands in for the wallet button and steps aside as soon as
     Shopify has inserted it. 44px placeholder + 29.69px link block = the same
     73.69px the finished block occupies, so nothing moves. */
  .pb__dynamic:has(shop-pay-wallet-button) .skel,
  .pb__dynamic:has(.shopify-payment-button__button) .skel { display: none; }
  .pb__dynamic .shopify-payment-button__button { border-radius: var(--pb-radius); font-family: var(--font-heading); }
  .pb__dynamic .shopify-payment-button__more-options { color: var(--pb-mut); font-size: 14px; margin-top: 10px; }

  .pb__meta { list-style: none; margin: 24px 0 0; padding: 20px 0 0; border-top: 1px solid var(--pb-line); display: grid; gap: 10px; }
  .pb__meta li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.35; color: var(--pb-mut); }
  .pb__ico { color: var(--pb-uv-lite); flex: 0 0 auto; }

  /* payment methods + secure-checkout line; margin-top:auto drops this block and
     the CTA under it to the bottom of the sticky panel */
  .pb__pay { margin-top: auto; padding-top: 20px; }
  .pb__pay-icons { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 0; }
  .pb__pay-icons li { display: flex; }
  .pb__pay-icons .pb__pay-svg { height: 24px; width: auto; display: block; }
  .pb__pay-secure { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; color: var(--pb-mut); }
  .pb__pay-secure svg { width: 14px; height: 14px; flex: 0 0 auto; }

  .pb__badges { list-style: none; margin: 20px 0 0; padding: 16px 0 0; border-top: 1px solid var(--pb-line); display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 14px; }
  .pb__badges li { display: grid; gap: 2px; text-align: center; }
  .pb__badges strong { font-family: var(--font-heading); font-size: 12px; letter-spacing: 0.04em; }
  .pb__badges span { font-size: 12px; color: var(--pb-mut); line-height: 1.35; }

  .pb-reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
  .pb-reveal.is-in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    .pb-reveal { opacity: 1; transform: none; transition: none; }
  }
/* END_SECTION:main-product */

/* START_SECTION:main-tracking (INDEX:16) */
/* Alle Groessen in px: auf dieser Seite liegen die Dateien des Checkouts, und
     die setzen die Grundeinheit auf 10px (siehe sections/main-page.liquid).
     Alle Abstaende stammen aus dem Raster des Checkouts. */
  .trk__form { margin-top: 32px; }
  .trk__out { margin-top: 32px; }

  /* Die drei Stationen. Waagerecht, mit einer Linie dazwischen.
     Der Punkt ist 14px hoch und sitzt bei 4px — der Text beginnt bei 24px,
     also 6px darunter. Alle drei Werte stehen im Raster. */
  .trk__steps { list-style: none; margin: 0 0 32px; padding: 0; display: flex; }
  .trk__step { flex: 1; position: relative; padding-top: 24px; font-size: 14px; color: #6a6a6a; text-align: center; }
  .trk__step::before {
    content: ''; position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
    width: 14px; height: 14px; border-radius: 50%;
    background: #fff; border: 2px solid #DEDEDE;
  }
  /* Die Linie verbindet den vorherigen Punkt mit diesem. Sie liegt UNTER dem
     Punkt (z-index 0 gegen 1), nicht hinter dem Kasten — mit z-index:-1 war sie
     hinter dem weissen Hintergrund verschwunden. */
  .trk__step::before { z-index: 1; }
  .trk__step::after {
    content: ''; position: absolute; top: 10px; left: -50%; width: 100%; height: 2px;
    background: #DEDEDE; z-index: 0;
  }
  .trk__step:first-child::after { display: none; }
  .trk__step--done { color: var(--color-ink); font-weight: 700; }
  .trk__step--done::before { background: var(--cd-accent); border-color: var(--cd-accent); }
  .trk__step--done::after { background: var(--cd-accent); }

  .trk__card { border: 1px solid #DEDEDE; border-radius: var(--cd-radius); padding: 24px; }
  .trk__row { display: flex; justify-content: space-between; gap: 16px; font-size: 16px; }
  .trk__row + .trk__row { margin-top: 8px; }
  .trk__label { color: #6a6a6a; }
  .trk__items { list-style: none; margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid #DEDEDE; }
  .trk__items li { display: flex; justify-content: space-between; gap: 16px; font-size: 16px; }
  .trk__items li + li { margin-top: 8px; }
  .trk__link { display: inline-block; margin-top: 16px; color: var(--cd-accent); }
  .trk__msg { font-size: 16px; }
/* END_SECTION:main-tracking */

/* START_SECTION:media-text (INDEX:17) */
.media-text__inner {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: var(--section-pad-block) var(--section-pad-inline);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    align-items: center;
  }

  @media (min-width: 48em) {
    .media-text__inner {
      grid-template-columns: 1fr 1fr;
      gap: var(--space-6);
    }
    /* Image side toggle: on right, the media cell moves after the text. */
    .media-text--img-right .media-text__media {
      order: 2;
    }
  }

  .media-text__img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
  }

  /* Shown only when no image is set yet — keeps the section's place visible. */
  .media-text__ph {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    border: 1px dashed var(--color-line);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.02);
  }

  .media-text__ph span {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    color: var(--color-ink);
    opacity: 0.4;
  }

  .media-text--text-white {
    color: var(--color-background);
  }

  .media-text__eyebrow {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0 0 var(--space-2);
  }

  .media-text__heading {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0 0 var(--space-3);
  }

  .media-text__text {
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.6;
    opacity: 0.8;
    margin: 0 0 var(--space-3);
    max-width: 46ch;
  }

  .media-text__list {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.5;
    margin: 0 0 var(--space-4);
    padding: 0;
    list-style: none;
  }

  .media-text__list li {
    position: relative;
    padding-left: 1.5em;
    margin-bottom: var(--space-1);
  }

  .media-text__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background: var(--color-accent);
  }

  .media-text__cta {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: 500;
    text-decoration: none;
    color: var(--color-background);
    background: var(--color-ink);
    padding: var(--space-2) var(--space-4);
    border-radius: 2px;
  }

  .media-text--text-white .media-text__cta {
    color: var(--color-ink);
    background: var(--color-background);
  }

  .media-text__cta:hover {
    background: var(--color-accent);
    color: var(--color-background);
  }
/* END_SECTION:media-text */

/* START_SECTION:product-highlight (INDEX:18) */
.product-highlight {
    position: relative;
    z-index: 2;
    background: var(--color-ink);
    color: var(--color-background);
  }

  .product-highlight__inner {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: var(--section-pad-block) var(--section-pad-inline);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    align-items: center;
  }

  @media (min-width: 48em) {
    .product-highlight__inner {
      grid-template-columns: 1fr 1fr;
    }

    .product-highlight__media {
      order: -1;
    }
  }

  .product-highlight__media {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    padding: var(--space-5);
  }

  .product-highlight__media img {
    width: 100%;
    height: auto;
  }

  .product-highlight__title {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    margin: 0 0 var(--space-3);
  }

  .product-highlight__mark {
    margin-right: 0.15em;
  }

  .product-highlight__mark .cls-1 {
    fill: var(--color-background);
  }

  .product-highlight__description {
    font-family: var(--font-body);
    line-height: 1.6;
    opacity: 0.75;
    margin: 0 0 var(--space-4);
    max-width: 48ch;
  }

  .product-highlight__specs {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin: 0 0 var(--space-4);
  }

  .product-highlight__spec {
    display: flex;
    justify-content: space-between;
    padding: var(--space-2) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    font-family: var(--font-body);
    font-size: 0.9rem;
  }

  .product-highlight__spec dt {
    opacity: 0.6;
  }

  .product-highlight__spec dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
  }

  .product-highlight__cta {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: 500;
    text-decoration: none;
    color: var(--color-ink);
    background: var(--color-background);
    padding: var(--space-2) var(--space-4);
    border-radius: 2px;
    transition: background-color 0.15s ease, color 0.15s ease;
  }

  .product-highlight__cta:hover {
    background: var(--color-accent);
    color: var(--color-background);
  }
/* END_SECTION:product-highlight */

/* START_SECTION:section2-header (INDEX:19) */
/*
    Section 2's own header. Lives inside the overlay (assets/section-snap.js
    moves everything past the hero in there). Layered ON TOP of section 1
    rather than stacked above it in flow: it keeps its flow position, takes a
    z-index to lift it, and section 1 pulls back up underneath via a negative
    margin — see sections/feature-banner.liquid and --overlay-bars-height in
    layout/theme.liquid.

    Sticky, and this is the important part: sticky positions against the
    nearest scrolling ancestor, which here is the overlay. So it docks to the
    top of the OVERLAY and is structurally incapable of escaping up to the
    hero — no scroll maths, no guard conditions, nothing to get wrong. It
    docks below the top bar (which sticks at 0) rather than over it, hence the
    --overlay-topbar-height offset; the two travel as one block.

    It once had position:fixed, which tore it out of the overlay and pinned it
    to the viewport instead, so it jumped to the top on its own while the
    overlay was still sliding. That was the "swipes along weirdly" bug — and
    exactly the class of problem sticky rules out. Nothing here is shared with
    sections/header.liquid: separate section, separate rules.
  */
  .scroll-stage__content > .shopify-section:has(.section2-header) {
    position: sticky;
    top: var(--overlay-topbar-height, 0px);
    z-index: 20;
  }

  /*
    Transparent while parked over section 1's grey panel, solid white once the
    overlay is scrolled and content passes underneath — .is-scrolled is set by
    assets/section-snap.js and drives the top bar the same way.
  */
  .section2-header {
    background: transparent;
    transition: background-color 0.2s ease;
  }

  .scroll-stage__content.is-scrolled .section2-header {
    background: var(--color-background);
  }

  .section2-header__inner {
    /* Identical box to the hero header (sections/header.liquid): the overlay's
       own scrollbar is the only one reserved on the homepage, so both headers
       subtract it exactly once and land on the same left AND right edge as the
       checkout. */
    max-width: calc(var(--overlay-width) - var(--scrollbar-width, 0px));
    margin: 0 auto;
    padding: var(--space-3) 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
  }

  /* identical to the hero header's logo rule (sections/header.liquid) */
  .section2-header__logo {
    display: block;
    line-height: 0;
  }

  .section2-header__logo img {
    width: 130px;
    height: auto;
    display: block;
  }
/* END_SECTION:section2-header */

/* START_SECTION:section2-top-bar (INDEX:20) */
/*
    Section 2's own top bar — counterpart to sections/top-bar.liquid, which
    belongs to the hero. Same deal as sections/section2-header.liquid: it is
    just the first thing inside the overlay (assets/section-snap.js moves
    everything past the hero in there) and does nothing — no position, no
    z-index, no scroll logic. It rides up with the overlay because it IS
    part of the overlay. Shares nothing with the hero's top bar: separate
    section, separate settings, separate rules.
  */
  /*
    Sits as a LAYER on top of section 1, not stacked above it in flow: it
    keeps its place in the flow (so it and the header stack naturally without
    anyone measuring anything), gets a z-index to lift it, and section 1
    pulls itself back up underneath via a negative margin — see
    sections/feature-banner.liquid and --overlay-bars-height in
    layout/theme.liquid.

    Sticky, not fixed: sticky is scoped to its scroll container, so it docks
    to the top of the OVERLAY and can never escape it up to the hero. It also
    keeps its slot in the flow, which is what lets the header below it dock
    right underneath rather than on top of it. The pair travels together.
  */
  .scroll-stage__content > .shopify-section:has(.section2-top-bar) {
    position: sticky;
    top: 0;
    z-index: 21;
  }

  /*
    Transparent while parked over section 1's grey panel, solid once the
    overlay is scrolled and content starts passing underneath — the same
    .is-scrolled flag drives the header (assets/section-snap.js sets it).
  */
  .section2-top-bar {
    background: transparent;
    color: var(--color-ink);
    transition: background-color 0.2s ease;
  }

  .scroll-stage__content.is-scrolled .section2-top-bar {
    background: var(--color-background);
  }

  .section2-top-bar__inner {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: var(--space-1) var(--space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
  }

  .section2-top-bar__icon {
    flex-shrink: 0;
  }

  .section2-top-bar__text {
    font-family: var(--font-body);
    font-size: 0.8rem;
    letter-spacing: 0.02em;
  }

  .section2-top-bar--ticker .section2-top-bar__inner {
    justify-content: flex-start;
    overflow: hidden;
  }

  .section2-top-bar--ticker .section2-top-bar__text {
    display: inline-block;
    white-space: nowrap;
    transform: translateX(-100%);
  }

  @media (prefers-reduced-motion: no-preference) {
    .section2-top-bar--ticker .section2-top-bar__text {
      animation: section2-top-bar-ticker 14s linear infinite;
    }
  }

  @keyframes section2-top-bar-ticker {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(100vw);
    }
  }
/* END_SECTION:section2-top-bar */

/* START_SECTION:top-bar (INDEX:21) */
/*
    The hero's top bar. Transparent, full stop — it sits over the hero image
    and never changes. It used to swap to a solid dark background the moment
    you scrolled away (via an is-hero-overlay class toggled from JS), which
    was both a leftover of the old overlay-then-solid header and pointless:
    the section-2 overlay covers this bar anyway, so all it ever produced was
    a visible flash to black during the 0.3s slide.
  */
  .top-bar {
    background: transparent;
    color: var(--color-background);
  }

  /* Page level, below the section-2 overlay — see the layer map in base.css. */
  #shopify-section-top-bar {
    position: relative;
    z-index: 13;
  }

  @media (min-width: 48em) {
    /*
      Same reasoning as sections/header.liquid: absolute inside the fixed
      .scroll-stage pins to the viewport while staying in the stage's
      stacking context, so the overlay can cover it. Out of flow here also
      means the hero starts at y=0 and keeps its full 100vh.
    */
    #shopify-section-top-bar {
      position: absolute;
      top: 0;
      left: 0;
      /* Same scrollbar reservation as sections/header.liquid — see the note there. */
      right: var(--scrollbar-width, 0px);
    }
  }

  .top-bar__inner {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: var(--space-1) var(--space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
  }

  .top-bar__icon {
    flex-shrink: 0;
  }

  .top-bar__text {
    font-family: var(--font-body);
    font-size: 0.8rem;
    letter-spacing: 0.02em;
  }

  .top-bar--ticker .top-bar__inner {
    justify-content: flex-start;
    overflow: hidden;
  }

  .top-bar--ticker .top-bar__text {
    display: inline-block;
    white-space: nowrap;
    transform: translateX(-100%);
  }

  @media (prefers-reduced-motion: no-preference) {
    .top-bar--ticker .top-bar__text {
      animation: top-bar-ticker 14s linear infinite;
    }
  }

  @keyframes top-bar-ticker {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(100vw);
    }
  }
/* END_SECTION:top-bar */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:localization-form (INDEX:26) */
.loc {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .loc form {
    margin: 0;
  }

  /* checkout values: 14px text, 12px corners, #DEDEDE border, #707070 text */
  .loc__select {
    font-family: inherit;
    font-size: 14px;
    line-height: 1;
    color: #707070;
    background: transparent;
    border: 1px solid #dedede;
    border-radius: 12px;
    padding: 8px 10px;
    cursor: pointer;
  }

  .loc__select:hover {
    color: #000000;
  }
/* END_SNIPPET:localization-form */

/* START_SNIPPET:logo-mark (INDEX:27) */
.logo-mark {
    display: inline;
  }

  .logo-mark svg {
    display: inline;
    height: 0.8756em;
    width: auto;
    vertical-align: -0.1306em;
  }
/* END_SNIPPET:logo-mark */

/* START_SNIPPET:pdp-content-laser (INDEX:31) */
/* ————— mg · MEGA-Vergleichsversion (A Shop / B Flagship / C Design-Tool) ————— */
  .mg { --mg-ink:#0a0a0a; --mg-mut:#6e6e73; --mg-line:#e5e5e7; --mg-uv:#005bd1;
        background:#fff; color:var(--mg-ink); font-family:var(--font-body); }
  .mg-sec { padding:34px 0 44px; }
  .mg-center { text-align:center; }
  .mg-area { margin-top:64px; padding:12px 0; border-top:2px solid var(--mg-ink); font-size:0.72rem;
    letter-spacing:0.16em; text-transform:uppercase; font-weight:800; color:var(--mg-ink); }
  .mg-tag { display:inline-block; font-size:0.64rem; letter-spacing:0.12em; text-transform:uppercase;
    font-weight:700; color:var(--mg-mut); border:1px dashed #c9c9ce; border-radius:999px; padding:5px 12px; margin:18px 0 0; }
  .mg-kicker { font-size:0.72rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--mg-uv); margin:0 0 14px; font-weight:700; }
  .mg-h { font-weight:800; font-size:clamp(1.6rem,4.6cqw,2.3rem); letter-spacing:-0.03em; line-height:1.08; margin:0 0 16px; }
  .mg-hA { font-family:var(--font-heading); font-weight:700; letter-spacing:-0.025em; font-size:clamp(1.7rem,4.6cqw,2.4rem); line-height:1.1; margin:6px 0 18px; }
  .mg-display { font-weight:800; letter-spacing:-0.035em; font-size:clamp(2.2rem,6.5cqw,3.4rem); line-height:1.03; margin:6px 0 22px; }
  .mg-display--c span { color:var(--mg-uv); }
  .mg-lede { color:var(--mg-mut); font-size:1.02rem; line-height:1.65; max-width:52ch; margin:0 0 6px; }
  .mg-center .mg-lede { margin-inline:auto; }
  .mg-note { font-size:0.8rem; color:var(--mg-mut); margin:16px 0 0; line-height:1.55; }
  .mg-note--line { padding-top:18px; border-top:1px solid #ededed; }
  .mg sup { color:var(--mg-uv); font-size:0.6em; }
  .mg-supw { color:#fff !important; }
  .mg-i { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
  .mg-ic { display:inline-flex; color:var(--mg-uv); }
  .mg-icbox { display:inline-flex; width:40px; height:40px; align-items:center; justify-content:center;
    border:1px solid #dedede; border-radius:12px; color:var(--mg-uv); flex:0 0 auto; }
  .mg-icbox--lg { width:54px; height:54px; border-radius:15px; }
  .mg-ctarow { display:flex; gap:14px; flex-wrap:wrap; margin-top:26px; }
  .mg-center .mg-ctarow { justify-content:center; }
  .mg-cta { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:15px 28px;
    border-radius:12px; background:var(--mg-uv); color:#fff; font-family:var(--font-heading); font-weight:700; font-size:14px; text-decoration:none; }
  .mg-cta:hover { background:#004aa8; }
  .mg-cta--ghost { background:none; border:1px solid var(--mg-line); color:var(--mg-ink); }
  .mg-cta--wide { width:100%; margin-top:20px; }
  .mg-heroimg { width:min(460px,100%); height:auto; margin:26px auto 0; display:block; }
  .mg-heroC { aspect-ratio:4/3; border-radius:20px; overflow:hidden; margin:26px 0; }
  .mg-heroC img { width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.9); }
  .mg-press { margin:34px 0 0; font-size:0.8rem; color:var(--mg-mut); }
  .mg-press strong { color:var(--mg-ink); font-weight:600; }
  /* Stats B */
  .mg-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:44px 20px; }
  .mg-num { font-weight:800; font-variant-numeric:tabular-nums; font-size:clamp(2.4rem,5.6cqw,3.2rem); letter-spacing:-0.035em; line-height:1; }
  .mg-num em { font-style:normal; font-size:0.4em; color:var(--mg-uv); margin-left:3px; font-weight:700; }
  .mg-stats p { margin:10px 0 0; font-size:0.78rem; color:var(--mg-mut); line-height:1.5; }
  /* Stats C */
  .mg-statsC { display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid #ededed; }
  .mg-statsC > div { padding:0 16px 20px 0; }
  .mg-statsC > div + div { border-left:1px solid #ededed; padding-left:20px; }
  .mg-num--c { font-size:2.4rem; }
  .mg-statsC p { margin:10px 0 0; font-size:0.76rem; color:var(--mg-mut); }
  .mg-statline { display:flex; flex-wrap:wrap; gap:8px 26px; padding-top:16px; font-size:0.82rem; color:var(--mg-mut); }
  .mg-statline strong { color:var(--mg-ink); font-weight:700; }
  /* Stats A */
  .mg-bento { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
  .mg-card { border:1px solid #dedede; border-radius:12px; padding:20px; }
  .mg-card--hero { grid-column:1/-1; }
  .mg-card .mg-num { font-size:clamp(1.7rem,5cqw,2.5rem); font-weight:700; }
  .mg-card p { margin:8px 0 0; font-size:0.82rem; color:var(--mg-mut); }
  /* Zitat */
  .mg-bigquote { font-weight:700; font-size:clamp(1.4rem,4cqw,1.9rem); letter-spacing:-0.02em; line-height:1.25; margin:0; }
  .mg-src { margin:18px 0 0; font-size:0.8rem; color:var(--mg-mut); }
  .mg-qrow { display:grid; grid-template-columns:1fr 1fr; gap:36px; margin-top:44px; text-align:left; }
  .mg-qrow p { font-weight:600; font-size:1rem; line-height:1.45; margin:0 0 8px; }
  .mg-qrow i { font-style:normal; font-size:0.76rem; color:var(--mg-mut); }
  /* Panels (C) */
  .mg-panel { background:#f6f7f8; border-radius:24px; padding:24px; margin-top:24px; }
  .mg-stage { position:relative; border-radius:16px; overflow:hidden; background:#eef1f4; }
  .mg-huntcv { display:block; width:100%; height:300px; }
  .mg-stage__phase { position:absolute; left:14px; top:14px; background:#fff; border:1px solid var(--mg-line);
    border-radius:999px; padding:6px 13px; font-size:0.62rem; letter-spacing:0.12em; color:var(--mg-uv); font-weight:700; }
  .mg-stage__toggle { position:absolute; right:14px; top:14px; display:flex; gap:4px; background:#fff;
    border:1px solid var(--mg-line); border-radius:999px; padding:4px; }
  .mg-stage__toggle button { border:0; border-radius:999px; padding:6px 12px; font-size:0.68rem; font-weight:700;
    cursor:pointer; background:none; color:var(--mg-mut); font-family:inherit; }
  .mg-stage__toggle button.on { background:var(--mg-uv); color:#fff; }
  .mg-stage__hint { position:absolute; left:14px; bottom:14px; right:14px; font-size:0.78rem; color:#5a5a5f;
    background:rgba(255,255,255,0.92); border-radius:10px; padding:8px 12px; }
  .mg-htabs { display:flex; gap:8px; margin:22px 0; border-bottom:1px solid #e0e2e6; }
  .mg-htabs button { flex:1; background:none; border:0; padding:0 0 12px; cursor:pointer; text-align:left;
    font-weight:700; font-size:0.9rem; color:#a2a6ad; font-family:inherit; position:relative; }
  .mg-htabs button.on { color:var(--mg-ink); }
  .mg-htabs button.on::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--mg-uv); }
  .mg-hbody { min-height:86px; }
  .mg-hbody__t { font-weight:700; font-size:1.3rem; letter-spacing:-0.02em; margin:0 0 8px; }
  .mg-hbody p { color:#5a5a5f; font-size:0.95rem; line-height:1.6; margin:0; }
  /* Rail */
  .mg-rail { list-style:none; margin:26px 0 0; padding:0; }
  .mg-rail li, .mg-row { display:flex; gap:18px; align-items:flex-start; padding:18px 0; }
  .mg-rail li + li, .mg-row + .mg-row { border-top:1px solid var(--mg-line); }
  .mg-rail b, .mg-row b { display:block; font-size:1rem; margin-bottom:5px; }
  .mg-rail li > div > span, .mg-row > div > span { color:var(--mg-mut); font-size:0.92rem; line-height:1.6; display:block; }
  .mg-media { margin:34px 0 0; position:relative; }
  .mg-media img { width:100%; height:auto; border-radius:14px; display:block; filter:saturate(.88); }
  .mg-media figcaption { position:absolute; left:0; right:0; bottom:0; padding:70px 24px 20px; color:#fff;
    font-size:0.9rem; line-height:1.5; background:linear-gradient(transparent, rgba(0,0,0,0.55)); border-radius:0 0 14px 14px; }
  .mg-media--light figcaption { position:static; padding:12px 2px 0; color:var(--mg-mut); background:none; font-size:0.84rem; }
  /* Anatomie */
  .mg-anat { position:relative; margin:36px auto 0; max-width:635px; padding-inline:118px; }
  .mg-anat img { width:100%; height:auto; display:block; }
  .mg-call { position:absolute; display:flex; align-items:center; gap:8px; font-size:0.8rem; font-weight:600; background:#fff; text-align:left; }
  .mg-call::before { content:""; width:9px; height:9px; border-radius:50%; background:var(--mg-uv); flex:0 0 auto; }
  .mg-call small { display:block; font-weight:400; color:var(--mg-mut); font-size:0.7rem; }
  /* Zielfilter C */
  .mg-target { display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:start; margin-top:26px; }
  .mg-target__fire { border-left:3px solid var(--mg-uv); padding-left:18px; }
  .mg-target__fire p { font-size:0.66rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--mg-uv); font-weight:700; margin:0 0 8px; }
  .mg-target__fire div { font-weight:800; font-size:1.5rem; letter-spacing:-0.02em; line-height:1; margin:0 0 8px; }
  .mg-target__fire span { color:var(--mg-mut); font-size:0.88rem; line-height:1.5; }
  .mg-target__ign p { font-size:0.66rem; letter-spacing:0.14em; text-transform:uppercase; color:#a2a6ad; font-weight:700; margin:0 0 10px; }
  .mg-target__ign ul { list-style:none; margin:0; padding:0; display:grid; gap:9px; }
  .mg-target__ign li { font-size:0.86rem; color:var(--mg-mut); line-height:1.4; padding-left:20px; position:relative; }
  .mg-target__ign li::before { content:"✕"; position:absolute; left:0; color:#c0c0c0; font-size:0.75rem; }
  /* Sicherheit */
  .mg-safepanel { background:#f2f6fd; border-radius:24px; padding:36px; }
  .mg-safepanel__img { border-radius:16px; overflow:hidden; margin:6px 0 10px; }
  .mg-safepanel__img img { width:100%; height:auto; display:block; filter:saturate(.9); }
  .mg-checks > div { display:grid; grid-template-columns:28px 1fr; gap:14px; align-items:start; padding:15px 0; border-top:1px solid rgba(0,60,160,0.12); }
  .mg-check { width:26px; height:26px; border-radius:50%; background:var(--mg-uv); color:#fff; display:inline-flex;
    align-items:center; justify-content:center; font-size:0.75rem; font-weight:700; margin-top:1px; }
  .mg-checks b { display:block; font-size:0.96rem; margin-bottom:3px; }
  .mg-checks div > div > span { color:#4a5568; font-size:0.88rem; line-height:1.5; }
  .mg-fgrid { display:grid; grid-template-columns:1fr 1fr; gap:38px 32px; margin-top:32px; }
  .mg-fgrid--3 { grid-template-columns:repeat(3,1fr); }
  .mg-fgrid b { display:block; font-size:1rem; margin:12px 0 7px; }
  .mg-fgrid > div > span:not(.mg-ic) { color:var(--mg-mut); font-size:0.9rem; line-height:1.6; display:block; }
  .mg-cells { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .mg-cells--3 { grid-template-columns:repeat(3,1fr); }
  .mg-scenegrid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:8px 0 16px; }
  .mg-scenegrid > div { position:relative; aspect-ratio:3/4; border-radius:12px; overflow:hidden; }
  .mg-scenegrid img { width:100%; height:100%; object-fit:cover; display:block; }
  .mg-scenegrid span { position:absolute; left:12px; bottom:10px; font-size:0.72rem; letter-spacing:0.08em;
    text-transform:uppercase; color:#fff; text-shadow:0 1px 8px rgba(0,0,0,0.8); }
  .mg-table--tint .own { background:rgba(0,91,209,0.05); }
  .mg-cell { border:1px solid #dedede; border-radius:12px; padding:18px; display:grid; gap:8px; justify-items:start; }
  .mg-cell b { font-size:0.95rem; }
  .mg-cell > span:not(.mg-icbox) { color:var(--mg-mut); font-size:0.88rem; line-height:1.55; }
  /* Welle */
  .mg-wavehead { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:16px; }
  .mg-wavedb { font-weight:800; font-size:3rem; letter-spacing:-0.04em; line-height:0.85; font-variant-numeric:tabular-nums; }
  .mg-wavedb em { font-style:normal; font-size:0.28em; color:var(--mg-uv); margin-left:4px; }
  .mg-wavename { color:var(--mg-mut); font-size:0.82rem; padding-bottom:5px; }
  .mg-wavecv { display:block; width:100%; height:92px; }
  .mg-wavetabs { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:16px; }
  .mg-wavetabs button { border:1px solid var(--mg-line); background:#fff; color:var(--mg-ink); border-radius:10px;
    padding:10px 6px; cursor:pointer; text-align:center; font-family:inherit; }
  .mg-wavetabs button.on { border-color:var(--mg-uv); background:var(--mg-uv); color:#fff; }
  .mg-wavetabs button span { display:block; font-weight:700; font-size:0.78rem; }
  .mg-wavetabs button span + span { font-weight:400; font-size:0.68rem; opacity:0.8; margin-top:2px; }
  /* dB Meter B */
  .mg-db { display:grid; gap:14px; max-width:560px; margin:34px auto 0; }
  .mg-db__r { display:grid; grid-template-columns:116px 1fr 54px; gap:13px; align-items:center; font-size:0.85rem; color:var(--mg-mut); text-align:left; }
  .mg-db__r.on { color:var(--mg-ink); font-weight:700; }
  .mg-track { height:5px; border-radius:99px; background:#f0f0f2; overflow:hidden; }
  .mg-track span { display:block; height:100%; border-radius:99px; background:#d4d4d8; }
  .mg-db__r.on .mg-track span { background:var(--mg-uv); }
  .mg-db__v { text-align:right; font-variant-numeric:tabular-nums; }
  /* Kegel */
  .mg-cone { display:grid; grid-template-columns:1fr 200px; gap:26px; align-items:center; }
  .mg-cone__svg { width:100%; height:auto; display:block; background:#eef1f4; border-radius:12px; }
  .mg-cone__stats { display:flex; gap:22px; margin-bottom:16px; }
  .mg-cone__stats div > div { font-weight:800; font-size:1.6rem; letter-spacing:-0.03em; line-height:1; }
  .mg-cone__stats em { font-style:normal; font-size:0.5em; color:var(--mg-uv); }
  .mg-cone__stats span { color:var(--mg-mut); font-size:0.72rem; display:block; margin-top:4px; }
  .mg-cone label { display:block; font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--mg-mut); font-weight:700; margin-bottom:8px; }
  .mg-cone input[type=range] { width:100%; accent-color:var(--mg-uv); cursor:pointer; }
  .mg-cone button { margin-top:16px; width:100%; border:1px solid var(--mg-line); background:#fff; color:var(--mg-ink);
    border-radius:10px; padding:11px; font-weight:700; font-size:0.82rem; cursor:pointer; font-family:inherit; }
  .mg-cone button.on { border-color:var(--mg-uv); background:var(--mg-uv); color:#fff; }
  /* Strom C */
  .mg-powerC { display:grid; grid-template-columns:repeat(3,1fr); margin-top:24px; border-top:1px solid var(--mg-line); }
  .mg-powerC > div { padding:22px 20px 0 0; }
  .mg-powerC > div + div { border-left:1px solid var(--mg-line); padding-left:22px; }
  .mg-powerC b { display:block; font-size:1.02rem; margin:12px 0 6px; }
  .mg-powerC > div > span:not(.mg-ic) { color:var(--mg-mut); font-size:0.86rem; line-height:1.5; display:block; }
  .mg-approw { display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start; }
  .mg-approw b { display:block; font-size:1.12rem; font-weight:700; letter-spacing:-0.01em; margin-bottom:5px; }
  .mg-approw div > span { color:var(--mg-mut); font-size:0.9rem; line-height:1.55; }
  /* Mosaik */
  .mg-mosaic { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:26px 0 16px; }
  .mg-mosaic > div { position:relative; border-radius:18px; overflow:hidden; }
  .mg-mosaic__wide { grid-column:1/-1; aspect-ratio:16/8; }
  .mg-mosaic > div:not(.mg-mosaic__wide) { aspect-ratio:1; }
  .mg-mosaic img { width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.9); }
  .mg-mosaic span { position:absolute; left:16px; bottom:13px; font-size:0.72rem; letter-spacing:0.08em;
    text-transform:uppercase; color:#fff; text-shadow:0 1px 8px rgba(0,0,0,0.85); }
  /* Szenen-Tabs B */
  .mg-tabs { display:flex; gap:10px; flex-wrap:wrap; margin:8px 0 20px; }
  .mg-tabs button { border:1px solid var(--mg-line); border-radius:999px; padding:10px 18px; font-size:0.84rem;
    font-weight:600; background:none; cursor:pointer; font-family:inherit; color:var(--mg-ink); }
  .mg-tabs button.on { background:var(--mg-ink); color:#fff; border-color:var(--mg-ink); }
  .mg-scenes img { display:none; width:100%; height:auto; border-radius:14px; filter:saturate(.88); }
  .mg-scenes img.on { display:block; }
  /* Vergleich C */
  .mg-cmpC { font-size:0.85rem; margin-top:26px; }
  .mg-cmpC__hd, .mg-cmpC__r { display:grid; grid-template-columns:minmax(0,1.6fr) repeat(4,1fr); align-items:stretch; }
  .mg-cmpC__hd span { padding:12px 10px; text-align:center; color:var(--mg-mut); }
  .mg-cmpC__hd .own { color:#fff; font-weight:700; background:var(--mg-uv); border-radius:10px 10px 0 0; }
  .mg-cmpC__r { border-top:1px solid #ededed; }
  .mg-cmpC__r span { padding:12px 10px; text-align:center; color:#a2a6ad; }
  .mg-cmpC__r span:first-child { text-align:left; color:#3a3a3a; }
  .mg-cmpC__r .own { color:var(--mg-uv); font-weight:700; background:rgba(0,91,209,0.07); }
  /* Vergleich B */
  .mg-table { width:100%; border-collapse:collapse; font-size:0.88rem; margin-top:10px; }
  .mg-table th, .mg-table td { padding:13px 12px; text-align:center; color:var(--mg-mut); font-weight:400; }
  .mg-table td:first-child, .mg-table th:first-child { text-align:left; color:var(--mg-ink); }
  .mg-table tbody tr { border-top:1px solid var(--mg-line); }
  .mg-table .own { color:var(--mg-ink) !important; font-weight:700; }
  .mg-table thead .own { color:var(--mg-uv) !important; }
  /* Specs */
  .mg-specs { margin:26px 0 0; }
  .mg-specs > div { display:flex; justify-content:space-between; gap:18px; padding:14px 0; font-size:0.92rem; }
  .mg-specs > div + div { border-top:1px solid var(--mg-line); }
  .mg-specs dt { color:var(--mg-mut); }
  .mg-specs dd { margin:0; font-weight:600; text-align:right; font-variant-numeric:tabular-nums; }
  .mg-dim { max-width:380px; display:block; margin-top:30px; font-family:var(--font-body); }
  /* Deal */
  .mg-deal { margin-top:30px; }
  .mg-deal__l { display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:17px 0;
    font-size:1rem; border-top:1px solid var(--mg-line); }
  .mg-deal__l small { display:block; font-size:0.82rem; color:var(--mg-mut); margin-top:4px; font-weight:400; }
  .mg-deal__free { color:var(--mg-uv); font-weight:700; white-space:nowrap; }
  .mg-deal__free s { color:var(--mg-mut); font-weight:400; margin-right:10px; }
  .mg-deal__total { border-bottom:1px solid var(--mg-line); font-weight:800; font-size:1.15rem; }
  .mg-deal__fine { font-size:0.8rem; color:var(--mg-mut); margin:16px 0 0; line-height:1.6; }
  .mg-trust { display:grid; grid-template-columns:repeat(4,1fr); gap:24px 14px; margin-top:52px; text-align:center; }
  .mg-trust > div { display:grid; gap:9px; justify-items:center; }
  .mg-trust b { font-size:0.86rem; }
  .mg-trust > div > span:not(.mg-ic) { font-size:0.74rem; color:var(--mg-mut); line-height:1.45; }
  /* FAQ */
  .mg-faq { margin-top:22px; }
  .mg-faq details { padding:17px 0; }
  .mg-faq details + details { border-top:1px solid var(--mg-line); }
  .mg-faq summary { cursor:pointer; font-weight:600; font-size:0.98rem; }
  .mg-faq p { margin:11px 0 0; color:var(--mg-mut); font-size:0.9rem; line-height:1.65; }
  /* Abschluss C */
  .mg-closeC { background:var(--mg-uv); border-radius:24px; padding:52px 36px; text-align:center; color:#fff; }
  .mg-closeC p { font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase; color:rgba(255,255,255,0.7); margin:0 0 14px; font-weight:700; }
  .mg-closeC h3 { font-weight:800; font-size:clamp(1.6rem,4.6cqw,2.1rem); letter-spacing:-0.03em; line-height:1.06; margin:0 auto 14px; max-width:16ch; color:#fff; }
  .mg-closeC > span { display:block; color:rgba(255,255,255,0.85); margin:0 auto 26px; max-width:42ch; font-size:0.95rem; line-height:1.6; }
  .mg-closeC a { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:15px 32px;
    border-radius:12px; background:#fff; color:var(--mg-uv); font-weight:700; font-size:15px; text-decoration:none; }
  .mg-closeC__chips { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:24px; }
  .mg-closeC__chips span { font-size:0.72rem; letter-spacing:0.03em; padding:6px 12px; border:1px solid rgba(255,255,255,0.4); border-radius:999px; color:#fff; }
  .mg-endimg { width:min(340px,100%); height:auto; margin:0 auto 10px; display:block; }
  .mg-chips { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 0; }
  .mg-chips--center { justify-content:center; }
  .mg-chips span { display:inline-flex; align-items:center; gap:7px; font-size:0.76rem; letter-spacing:0.03em;
    padding:8px 13px; border:1px solid var(--mg-line); border-radius:999px; color:var(--mg-ink); }
  .mg-chips .mg-i { width:15px; height:15px; color:var(--mg-uv); }
  .mg-foot ol { margin:0; padding-left:20px; color:var(--mg-mut); font-size:0.74rem; line-height:1.6; display:grid; gap:8px; }
  /* Reveal */
  .mg-reveal { opacity:0; transform:translateY(18px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
  .mg-reveal.in { opacity:1; transform:none; }
  @media (prefers-reduced-motion: reduce) { .mg-reveal { opacity:1; transform:none; transition:none; } }
  @media screen and (max-width: 640px) {
    .mg-stats, .mg-statsC, .mg-powerC { grid-template-columns:1fr 1fr; }
    .mg-fgrid, .mg-fgrid--3, .mg-qrow, .mg-target, .mg-cone, .mg-cells, .mg-bento { grid-template-columns:1fr; }
    .mg-trust { grid-template-columns:1fr 1fr; }
    .mg-anat { padding-inline:0; }
    .mg-call { position:static; margin-top:10px; }
    .mg-mosaic { grid-template-columns:1fr; }
    .mg-mosaic__wide { aspect-ratio:16/10; }
  }
/* END_SNIPPET:pdp-content-laser */

/* START_SNIPPET:pdp-content (INDEX:32) */
.px {
    /* the story responds to the COLUMN width, not the viewport */
    container-type: inline-size;
    container-name: pxcol;
    --px-night: #07060a; --px-night2: #0d0b13; --px-day: #ffffff; --px-paper: #f2f1f4;
    --px-ink: #121016; --px-ink-mut: #6a6673; --px-snow: #f6f4f9; --px-snow-mut: rgba(246,244,249,0.6);
    --px-uv: #b526d3; --px-uv-lite: #d986f0; --px-glow: rgba(181,38,211,0.45);
    --px-f: var(--font-heading, "Helvetica Neue", Inter, -apple-system, "Segoe UI", sans-serif);
    font-family: var(--px-f); color: var(--px-ink); -webkit-font-smoothing: antialiased;
  }
  .px * { box-sizing: border-box; margin: 0; }
  /* the band edges come from .pb__story (flush-left at 176px, 40px gap right).
     A modest inner padding keeps the text off the band edges without pushing it
     far from the title's 176px alignment. */
  .px-sec { padding: clamp(48px, 9cqw, 100px) clamp(20px, 3cqw, 32px); }
  .px-in { max-width: 100%; margin: 0 auto; }
  .px-day { background: var(--px-day); } .px-paper { background: var(--px-paper); }
  .px-night { background: var(--px-night); color: var(--px-snow); } .px-night2 { background: var(--px-night2); }

  .px-eyebrow { font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; font-weight: 700; color: var(--px-uv); }
  .px-night .px-eyebrow, .px-warm .px-eyebrow { color: var(--px-uv-lite); }
  .px-h1 { font-size: clamp(1.9rem, 8cqw, 3.4rem); line-height: 0.94; letter-spacing: -0.045em; font-weight: 700; }
  .px-h2 { font-size: clamp(1.6rem, 6cqw, 2.6rem); line-height: 1.03; letter-spacing: -0.035em; font-weight: 700; margin-bottom: 16px; }
  .px-h3 { font-size: clamp(1.3rem, 4cqw, 1.9rem); letter-spacing: -0.02em; font-weight: 700; }
  .px-lede { font-size: clamp(0.98rem, 2cqw, 1.12rem); line-height: 1.6; color: var(--px-ink-mut); max-width: 46ch; }
  .px-night .px-lede { color: var(--px-snow-mut); }
  .px-uv { color: var(--px-uv-lite); }

  .px-cta { display: inline-block; padding: 15px 32px; background: var(--px-uv); color: #fff; font-weight: 700; font-size: 0.95rem; text-decoration: none; }
  .px-cta:hover { background: #8f1fa8; color: #fff; }
  .px-cta--ghost { background: transparent; color: var(--px-snow); box-shadow: inset 0 0 0 1px rgba(246,244,249,0.4); }
  .px-cta--ghost:hover { background: rgba(246,244,249,0.08); color: var(--px-snow); }

  .px-photo { background-size: cover; background-position: center; }
  .px-slot { position: relative; background: linear-gradient(160deg, #17151d, #0b0a0f); display: grid; place-items: center; overflow: hidden; }
  .px-day .px-slot, .px-paper .px-slot { background: linear-gradient(160deg, #eceaf0, #dedbe6); }
  .px-slot__tag { position: absolute; left: 16px; bottom: 14px; font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(18,16,22,0.34); }
  .px-slot__cap { position: absolute; left: 18px; bottom: 16px; z-index: 2; font-weight: 700; font-size: 0.9rem; color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,0.7); }
  .px-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,0.55)); }

  /* HERO — height driven by column width, not 92vh */
  .px-hero { position: relative; min-height: clamp(420px, 82cqw, 620px); display: flex; align-items: flex-end; overflow: hidden; background: var(--px-night); }
  .px-hero__photo { position: absolute; inset: 0; background-size: cover; background-position: center; }
  .px-hero__bg { position: absolute; inset: 0; background:
      linear-gradient(90deg, rgba(5,4,7,0.94) 0%, rgba(5,4,7,0.55) 46%, rgba(5,4,7,0.78) 100%),
      radial-gradient(58% 44% at 66% 42%, rgba(181,38,211,0.34), transparent 60%),
      linear-gradient(180deg, rgba(5,4,7,0.2), rgba(5,4,7,0.85)); }
  .px-hero__lamp { position: absolute; right: 7%; top: 44%; transform: translateY(-50%); width: clamp(96px, 26cqw, 220px); display: grid; place-items: center; z-index: 1; }
  .px-hero__halo { position: absolute; inset: -20% -40%; background: radial-gradient(circle, var(--px-glow), transparent 62%); filter: blur(30px); animation: pxPulse 5.5s ease-in-out infinite; }
  .px-hero__img { position: relative; width: 100%; height: auto; z-index: 1;
      -webkit-mask-image: radial-gradient(ellipse 56% 80% at 50% 48%, #000 54%, transparent 82%);
      mask-image: radial-gradient(ellipse 56% 80% at 50% 48%, #000 54%, transparent 82%); }
  @keyframes pxPulse { 0%,100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
  .px-hero__in { position: relative; z-index: 2; width: 100%; max-width: 100%; margin: 0 auto; padding: clamp(24px,5cqw,52px) clamp(20px,3cqw,32px) clamp(34px,6cqw,60px); color: var(--px-snow); }
  .px-hero__stats { display: flex; flex-wrap: wrap; gap: clamp(18px,4cqw,44px); margin-bottom: clamp(28px,6cqw,60px); }
  .px-stat__n { font-size: clamp(1.6rem,5cqw,2.6rem); font-weight: 700; letter-spacing: -0.04em; color: var(--px-uv-lite); line-height: 1; }
  .px-stat__l { font-size: 0.8rem; color: var(--px-snow-mut); margin-top: 6px; max-width: 15ch; }
  .px-hero__name { display: flex; align-items: baseline; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 26px; }
  .px-badge { font-size: 0.6rem; letter-spacing: 0.18em; padding: 5px 11px; color: var(--px-uv-lite); box-shadow: inset 0 0 0 1px rgba(217,134,240,0.5); align-self: center; }
  .px-hero__row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

  /* OBJECT */
  .px-obj { display: grid; gap: clamp(26px,5cqw,56px); align-items: center; grid-template-columns: 1fr; }
  .px-slot--obj { aspect-ratio: 4/5; }
  .px-day .px-slot--obj { background: #ffffff; }
  .px-obj__img { width: 100%; max-width: 360px; height: auto; }

  /* MATERIAL */
  .px-macros { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; margin-top: clamp(26px,4cqw,48px); }
  .px-macros .px-slot { aspect-ratio: 1; }

  /* SPECTRUM */
  .px-spec { position: relative; }
  .px-spec__bar { height: clamp(110px, 20cqw, 220px); background: linear-gradient(90deg, #1b1030 0%, #3d1a7a 18%, #6a1fc0 38%, var(--px-uv) 55%, #ff3df0 74%, #2b6bff 100%); }
  .px-spec__mark { position: absolute; left: 55%; top: 0; bottom: 0; width: 2px; background: #fff; box-shadow: 0 0 24px 6px rgba(255,255,255,0.5); }
  .px-spec__lab { position: absolute; left: 55%; transform: translateX(-50%); top: calc(100% + 14px); font-size: 0.8rem; letter-spacing: 0.1em; }
  .px-spec__scale { display: flex; justify-content: space-between; margin-top: 52px; font-size: 0.72rem; color: var(--px-snow-mut); letter-spacing: 0.14em; }

  /* 2000V */
  .px-ringwrap { display: grid; place-items: center; margin-top: clamp(28px,5cqw,56px); }
  .px-ring { position: relative; width: min(70cqw, 300px); aspect-ratio: 1; }
  .px-ring__spin { position: absolute; inset: 0; border-radius: 50%;
      background: conic-gradient(from 0deg, transparent 0%, rgba(181,38,211,0.16) 40%, var(--px-uv) 72%, #fff 88%, transparent 100%);
      -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
      mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
      animation: pxSpin 5s linear infinite; }
  @keyframes pxSpin { to { transform: rotate(360deg); } }
  .px-ring__core { position: absolute; inset: 0; display: grid; place-content: center; }
  .px-ring__v { font-size: clamp(2rem, 7cqw, 3.2rem); font-weight: 700; letter-spacing: -0.04em; }
  .px-ring__v em { font-style: normal; color: var(--px-uv-lite); }

  /* SILENCE — dB meter */
  .px-db { max-width: 640px; margin: clamp(28px,5cqw,48px) auto 0; display: flex; flex-direction: column; gap: 14px; text-align: left; }
  .px-db__row { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 12px; }
  .px-db__lab { font-size: 0.88rem; color: var(--px-ink-mut); }
  .px-db__track { height: 12px; background: #eceaf0; overflow: hidden; }
  .px-db__fill { display: block; height: 100%; width: 0; background: #cfccd6; transition: width 1.1s cubic-bezier(.16,1,.3,1); }
  .px-db.in .px-db__fill { width: var(--w); }
  .px-db__val { font-weight: 700; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
  .px-db__row--on .px-db__lab { color: var(--px-uv); font-weight: 700; }
  .px-db__row--on .px-db__fill { background: linear-gradient(90deg, #7a2bff, var(--px-uv)); }
  .px-db__row--on .px-db__val { color: var(--px-uv); }

  /* DAY/NIGHT */
  .px-two { display: grid; grid-template-columns: 1fr; }
  .px-two__half { position: relative; padding: clamp(40px,6cqw,80px) clamp(22px,4cqw,48px); min-height: clamp(300px, 46cqw, 460px); display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; color: var(--px-snow); overflow: hidden; }
  .px-two__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,7,4,0.15), rgba(10,7,4,0.82)); }
  .px-two__scrim--uv { background: linear-gradient(180deg, rgba(20,6,30,0.3), rgba(6,4,10,0.86)); }
  .px-two__half > *:not(.px-two__scrim) { position: relative; z-index: 1; }
  .px-orb { width: 54px; height: 54px; border-radius: 50%; }
  .px-orb--warm { background: radial-gradient(circle at 34% 30%, #ffe6a8, #ff9d2e); box-shadow: 0 0 60px 12px rgba(255,157,46,0.5); }
  .px-orb--uv { background: radial-gradient(circle at 34% 30%, var(--px-uv-lite), var(--px-uv)); box-shadow: 0 0 60px 12px var(--px-glow); }

  /* PLACEMENT scenes */
  .px-scenes { display: grid; grid-template-columns: 1fr; gap: 2px; margin-top: clamp(22px,4cqw,40px); }
  .px-scene { position: relative; aspect-ratio: 3/4; overflow: hidden; }

  /* SPECS */
  .px-specs { display: grid; grid-template-columns: 1fr; gap: clamp(22px,4cqw,44px); }
  .px-specs__row { display: flex; justify-content: space-between; gap: 20px; padding: 15px 0; font-size: 0.95rem; }
  .px-specs__row + .px-specs__row { box-shadow: inset 0 1px 0 rgba(18,16,22,0.09); }
  .px-specs__row dt { color: var(--px-ink-mut); }
  .px-specs__row dd { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

  /* ANCHOR */
  .px-anchor { display: grid; grid-template-columns: 1fr; gap: 2px; margin-top: clamp(26px,4cqw,46px); }
  .px-anchor__c { background: var(--px-day); padding: clamp(24px,3.4cqw,36px); display: flex; flex-direction: column; gap: 10px; }
  .px-anchor__c--own { background: var(--px-ink); color: var(--px-snow); }
  .px-anchor__p { font-size: clamp(1.7rem,4cqw,2.4rem); font-weight: 700; letter-spacing: -0.03em; }
  .px-anchor__c--own .px-anchor__p { color: var(--px-uv-lite); }
  .px-anchor__meta { font-size: 0.82rem; color: var(--px-ink-mut); }
  .px-anchor__c--own .px-anchor__meta { color: var(--px-snow-mut); }
  .px-note { font-size: 0.72rem; color: var(--px-ink-mut); margin-top: 18px; }

  /* wider columns only if the container ever grows past the checkout width */
  @container pxcol (min-width: 40em) {
    .px-two   { grid-template-columns: 1fr 1fr; }
    .px-scenes { grid-template-columns: repeat(3, 1fr); }
    .px-obj   { grid-template-columns: 1fr 1fr; }
    .px-anchor { grid-template-columns: repeat(3, 1fr); }
    .px-specs { grid-template-columns: 0.8fr 1.2fr; }
    .px-db__row { grid-template-columns: 130px 1fr auto; gap: 16px; }
  }
  @container pxcol (min-width: 52em) {
    .px-macros { grid-template-columns: repeat(4, 1fr); }
  }

  .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
  .reveal.in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } .px-hero__halo, .px-ring__spin { animation: none; } }
/* END_SNIPPET:pdp-content */

/* START_SNIPPET:skeleton (INDEX:35) */
/*
    Every value here was read out of the live Shopify checkout on 2026-07-21,
    not chosen:
      --x-skeleton-color-global-textSubdued200   #E6E6E6
      --x-skeleton-border-radius-small           8px
      --x-skeleton-border-radius-base            12px
      --x-skeleton-border-radius-large           16px
      .SkeletonImage / .SkeletonButton animation 4000ms ease infinite
      @keyframes SkeletonPulse { 50%{opacity:1} 75%{opacity:.5} 100%{opacity:1} }
  */
  .skel {
    width: var(--skel-w, 100%);
    height: var(--skel-h, 48px);
    background: #e6e6e6;
    animation: SkeletonPulse 4000ms ease infinite;
  }

  .skel--small { border-radius: 8px; }
  .skel--base { border-radius: 12px; }
  .skel--large { border-radius: 16px; }

  @keyframes SkeletonPulse {
    50% { opacity: 1; }
    75% { opacity: 0.5; }
    100% { opacity: 1; }
  }
/* END_SNIPPET:skeleton */