/** Shopify CDN: Minification failed

Line 22242:0 Unexpected "}"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:collection-links (INDEX:4) */
collection-links-component {
    --alignment: flex-start;

    display: grid;
    align-items: center;
    grid-gap: var(--gap-3xl);

    &:has([ratio='portrait']) {
      --template-column-ratio: 0.8fr;
    }

    &:has([ratio='square']) {
      --template-column-ratio: 1fr;
    }

    &:has([ratio='landscape']) {
      --template-column-ratio: 1.4fr;
    }

    &[alignment='center'] {
      --alignment: center;

      .text-block {
        text-align: center;
      }
    }

    &[alignment='right'] {
      --alignment: flex-end;

      .text-block {
        text-align: right;
      }
    }

    &[layout='spotlight'] {
      position: relative;
      grid-template-columns: 1fr var(--template-column-ratio);
      grid-template-areas: 'text image';

      @media screen and (min-width: 750px) {
        &[reverse] {
          grid-template-areas: 'image text';
          grid-template-columns: var(--template-column-ratio) 1fr;
        }
      }

      .collection-links__container {
        align-items: var(--alignment);
      }

      @media screen and (max-width: 749px) {
        grid-template-columns: 1fr;
        grid-template-areas: 'text' 'image';
        grid-gap: var(--gap-2xl);

        .collection-links__container {
          gap: clamp(var(--gap-xs), 1vw, var(--gap-xl)) var(--gap-2xl);
          justify-content: var(--alignment);
        }
      }
    }

    &[layout='text'] {
      grid-gap: 0;
      grid-template-areas: 'text';

      .collection-links__container {
        gap: clamp(var(--gap-xs), 1vw, var(--gap-xl)) var(--gap-2xl);
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: var(--alignment);
      }
    }
  }

  .collection-links__container {
    display: flex;
    gap: var(--gap-md);
    flex-direction: column;
  }

  .collection-links__images {
    overflow: hidden;
    grid-area: image;

    @media screen and (max-width: 749px) {
      image-block {
        max-width: 100%;
      }
    }
  }
/* END_SECTION:collection-links */

/* START_SECTION:featured-product (INDEX:10) */
.featured-product-section .section-content-wrapper {
    grid-template-columns: 1fr;
    display: grid;
    overflow: hidden;

    @media screen and (min-width: 750px) {
      grid-template-columns: 1fr 1fr;
    }
  }

  .featured-product-section {
    --viewport-offset: 400px;
    --constrained-min-height: var(--visual-preview--height, 80dvh);
    --constrained-height: max(var(--constrained-min-height), calc(100vh - var(--viewport-offset)));

    @media screen and (min-width: 750px) {
      --viewport-offset: 300px;
    }
  }

  .featured-product-section .product-grid__card {
    --padding-block: 20px;
    --padding-inline: 20px;

    @media screen and (min-width: 750px) {
      --padding-block: 40px;
      --padding-inline: 40px;
    }
  }

  @media screen and (max-width: 749px) {
    .featured-product-section .media-block {
      order: -1;
    }
  }

  @media screen and (min-width: 750px) {
    .featured-product-section .product-card__content {
      --hugged-width: calc(var(--constrained-height) * var(--gallery-aspect-ratio, var(--media-preview-ratio)));
      width: min(100%, var(--hugged-width));
      margin-left: auto;
      margin-right: auto;
    }
  }
/* END_SECTION:featured-product */

/* START_SECTION:finder-bestsellers (INDEX:11) */
@media (max-width: 749px) {
  .finder-bestsellers-section.spacing-style { padding-inline: var(--page-margin, 16px) !important; }
}
.fbs { color: var(--color-foreground); --fbs-line: rgb(var(--color-foreground-rgb) / .12); --fbs-muted: rgb(var(--color-foreground-rgb) / .55); --fbs-soft: rgb(var(--color-foreground-rgb) / .03); --fbs-ink: #1F2230; --fbs-orange: var(--3idee-ink); }
.fbs *, .fbs *::before, .fbs *::after { box-sizing: border-box; }
/* Style an Finder Clean angeglichen (sections/finder-clean.liquid): Apple-Stil-Kopfzeile
   (Eyebrow fett + Überschrift grau, eine Zeile, Theme-H4 statt fixer 30px-Headline),
   Kartenradius/Produkttitel-Typografie auf denselben Stand wie die Finder-Clean-Karten. */
.fbs-head { margin-bottom: 16px; }
.fbs-head-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 0; }
.fbs-head-line strong { font-weight: 700; color: inherit; }
.fbs-head-line-sub { font-weight: 400; color: var(--fbs-muted); }
.fbs-head-text { font-size: var(--font-paragraph--size); color: var(--fbs-muted); margin: 8px 0 0; max-width: 640px; line-height: 1.5; }
.fbs-list { display: grid; gap: 10px; }
.fbs-setup { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; border: 1px solid var(--fbs-line); border-radius: var(--3idee-radius-mittel); background: var(--color-background, #fff); padding: 14px; }
.fbs-pair { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fbs-plus { color: var(--fbs-muted); font-weight: 800; flex: 0 0 auto; }
.fbs-mini { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 0; text-decoration: none; color: inherit; }
.fbs-mini-img { width: 52px; height: 52px; flex: 0 0 auto; border: 1px solid var(--fbs-line); border-radius: var(--3idee-radius-mittel); background: var(--fbs-soft); display: grid; place-items: center; overflow: hidden; }
.fbs-mini-img img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.fbs-mini-txt { min-width: 0; }
.fbs-mini-txt small { display: block; font-size: var(--font-paragraph--size); text-transform: uppercase; letter-spacing: .06em; color: var(--fbs-muted); font-weight: 800; }
.fbs-mini-txt strong { display: block; font-family: var(--font-paragraph--family); font-style: var(--font-paragraph--style); font-weight: var(--font-paragraph--weight); font-size: var(--font-paragraph--size); line-height: var(--font-paragraph--line-height); text-transform: var(--font-paragraph--case); overflow-wrap: anywhere; }
.fbs-mini:hover strong { text-decoration: underline; }
.fbs-setup-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: 0 0 auto; }
/* Badge wie .fn-badge im Finder oben (dunkler Grund, weiße Schrift) statt der vorherigen
   orangen Pille — gleiche Optik wie die Ecke-Badge auf den Halterungs-Karten. */
.fbs-badge { background: var(--fbs-ink); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .02em; padding: 4px 9px; border-radius: var(--3idee-radius-winzig); white-space: nowrap; }
.fbs-price { display: flex; align-items: baseline; gap: 8px; }
.fbs-strike { color: var(--fbs-muted); text-decoration: line-through; font-weight: 700; font-size: 12px; }
.fbs-total { font-size: 15px; font-weight: 800; white-space: nowrap; }
.fbs-discount-note { font-size: 10px; font-weight: 700; color: var(--fbs-orange); white-space: nowrap; }
.fbs-setup-buy { display: flex; align-items: center; gap: 10px; }
/* Mengen-Stepper: bewusst ein einfacher eigener Stepper statt des Theme-eigenen
   <quantity-selector-component> — der ist auf EINE Variante ausgelegt, hier steuert eine
   einzige Menge aber ZWEI Varianten (Adapter + Arm) gleichzeitig, siehe Script unten. */
.fbs-qty { display: inline-flex; align-items: center; border: 1px solid var(--fbs-line); border-radius: var(--3idee-radius-mittel); overflow: hidden; flex: 0 0 auto; }
.fbs-qty-btn { width: 32px; height: 40px; display: grid; place-items: center; background: none; border: 0; font-size: 16px; font-weight: 700; color: var(--fbs-ink); cursor: pointer; font-family: inherit; }
.fbs-qty-btn:hover { background: var(--fbs-soft); }
.fbs-qty-input { width: 34px; height: 40px; border: 0; border-left: 1px solid var(--fbs-line); border-right: 1px solid var(--fbs-line); text-align: center; font-size: 13px; font-family: inherit; color: inherit; background: none; -moz-appearance: textfield; }
.fbs-qty-input::-webkit-inner-spin-button, .fbs-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.fbs-add { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: var(--3idee-radius-mittel); font-weight: 800; font-size: 13px; font-family: inherit; border: 1px solid transparent; cursor: pointer; background: var(--fbs-btn-bg, #1F2230); color: var(--fbs-btn-fg, #fff); position: relative; overflow: hidden; }
.fbs-add:hover { filter: brightness(.96); }
.fbs-add--sold { background: var(--fbs-sold-bg, #8b8f98); cursor: default; }
.fbs-add[disabled] { cursor: default; }
.fbs-arrow, .fbs-dots { display: none; }
@media (max-width: 720px) {
  /* Karussell: 3–4 Setups sind auf Mobile untereinander zu lang/breit — stattdessen wird
     immer nur EIN Setup angezeigt, weitere per Wisch ODER Pfeil (CSS Scroll-Snap + kleines
     JS unten nur für Pfeile/Dots, die eigentliche Wisch-Mechanik ist reines CSS). */
  /* Bewusst aus dem Eltern-Padding ausgebrochen (Breakout-Pattern, wie es das Theme selbst
     für Marquee/Carousel nutzt, siehe --full-page-margin-inline-offset in base.css) — damit
     ist der sichtbare Kartenabstand IMMER exakt --page-margin, unabhängig davon, wieviel
     Padding auf den Eltern-Elementen kumuliert (dort duplizierte sich sonst der Seitenabstand). */
  .fbs-carousel-wrap { position: relative; width: 100vw; margin-inline: calc(50% - 50vw); }
  .fbs-list { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-inline: var(--page-margin, 16px); scroll-padding-inline: var(--page-margin, 16px); padding-bottom: 2px; }
  .fbs-list::-webkit-scrollbar { display: none; }
  .fbs-setup { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; grid-template-columns: 1fr; align-items: stretch; }
  .fbs-pair { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
  .fbs-mini { flex: 1 1 auto; }
  .fbs-plus { align-self: center; }
  .fbs-setup-meta { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
  /* Pfeile: als eindeutiges Signal "hier geht's weiter" halb über den Kartenrand gelegt,
     nicht hover-abhängig (Touch-Geräte haben kein Hover) — deshalb dauerhaft sichtbar. */
  .fbs-arrow { display: grid; place-items: center; position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--fbs-line); background: var(--color-background, #fff); color: var(--fbs-ink); box-shadow: 0 2px 8px rgb(0 0 0 / .12); z-index: 2; cursor: pointer; padding: 0; }
  .fbs-arrow--prev { left: calc(var(--page-margin, 16px) - 6px); }
  .fbs-arrow--next { right: calc(var(--page-margin, 16px) - 6px); }
  .fbs-arrow[disabled] { opacity: .35; cursor: default; }
  .fbs-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
  .fbs-dots button { width: 7px; height: 7px; padding: 0; border-radius: 50%; border: 0; background: var(--fbs-line); cursor: pointer; }
  .fbs-dots button[aria-current="true"] { background: var(--fbs-orange); width: 16px; border-radius: var(--3idee-radius-winzig); }
}
@media (max-width: 480px) {
  .fbs-setup-meta { flex-direction: column; align-items: stretch; }
  .fbs-setup-buy { flex-direction: column; align-items: stretch; }
  .fbs-add { width: 100%; justify-content: center; }
  .fbs-qty { align-self: stretch; justify-content: center; }
}
/* END_SECTION:finder-bestsellers */

/* START_SECTION:finder-clean (INDEX:12) */
/* ═══════════════════════════════════════════════════════════════════════════
   Referenz: XX_Projekte/Finder_Prompt_Design/finder-hybrid-guided-sidebar-preview.html
   Mockup-Klassen → hier verwendet (Mapping als Gedächtnisstütze):
     .section → .fn-sec        .section-eyebrow → .fn-sec-head (Apple-Stil, 1 Zeile)   .section-num → .fn-sec-num
     .f-inp/.f-choice → .fn-inp/.fn-choice (echte Suchfunktion, JS-generiert)
     .req-card → .fn-required-row (JS-generiert)      .halt-card → .fn-preset (JS-generiert)
     .opt-row → .fn-opt-row (JS-generiert)             .buybox → .fn-buybox
     .bb-head/.bb-lines/.bb-total/.bb-cta/.bb-standalone/.bb-trust/.bb-pay/.bb-one
       → .fn-bb-head/.fn-bb-lines/.fn-bb-total/.fn-bb-cta/.fn-bb-standalone/.fn-bb-trust/.fn-bb-pay/.fn-bb-one
   Farben 1:1 aus sections/finder.liquid (--fn-ink/#1F2230, --fn-orange/Brand Ink,
   --fn-ok/var(--3idee-success)), Radien 1:1 aus dem Mockup (6px Karten, 5px Buttons/Inputs).
   ═══════════════════════════════════════════════════════════════════════════ */

.fn { color: var(--color-foreground); --fn-line: rgb(var(--color-foreground-rgb) / .12); --fn-line2: rgb(var(--color-foreground-rgb) / .22); --fn-muted: rgb(var(--color-foreground-rgb) / .55); --fn-muted2: rgb(var(--color-foreground-rgb) / .4); --fn-soft: rgb(var(--color-foreground-rgb) / .03); --fn-ink: #1F2230; --fn-orange: var(--3idee-ink); --fn-ok: var(--3idee-success); --fn-okbg: var(--3idee-success-fill); }
.fn *, .fn *::before, .fn *::after { box-sizing: border-box; }
.fn, .fn-result, .fn-rmain { max-width: 100%; }

/* ── Buttons ── */
.fn-btn-line { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: var(--3idee-radius-mittel); font-weight: 800; font-family: var(--font-paragraph--family); font-style: var(--font-paragraph--style); font-size: 14px; border: 1px solid var(--fn-ink); background: var(--color-background, #fff); color: var(--fn-ink); cursor: pointer; }
.fn-btn-line:hover { background: var(--fn-ink); color: #fff; }
.fn-btn-line[disabled] { opacity: .5; cursor: default; }
.is-added { opacity: .6; cursor: default; }

/* ── Abschnitte 1-4: fließend mit Trennlinie, kein Kartenrahmen (Mockup .section) ── */
.fn-sec { padding: 44px 0; border-bottom: 1px solid var(--fn-line); }
.fn-finder, [data-role="required"], [data-role="one-section"], [data-role="optional"], [data-role="summary"] { scroll-margin-top: 90px; }
.fn-sec--first { padding-top: 4px; }
.fn-sec--last { border-bottom: 0; padding-bottom: 8px; }
/* Apple-Stil (Vorbild: apple.com Produktseiten): Eyebrow + Überschrift laufen in EINER
   Zeile, gleiche Textgröße — Eyebrow fett/dunkel als Präfix, Überschrift dahinter in Grau.
   Ersetzt das vorherige "kleine Eyebrow oben, riesige H2/H3 drunter"-Muster, das den
   Finder unnötig lang/schwer wirken ließ. Größe über section.settings.section_heading_size
   (Theme-Preset h1–h6, siehe fn_heading_class) einstellbar. */
.fn-sec-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin: 0 0 10px; }
.fn-sec-num { width: 30px; height: 30px; border-radius: 50%; background: var(--fn-ink); color: #fff; font-size: 13px; font-weight: 900; display: grid; place-items: center; flex: 0 0 auto; font-family: var(--font-body--family); }
.fn-sec-head strong { font-weight: 700; color: inherit; }
.fn-sec-head-sub { font-weight: 400; color: var(--fn-muted); }
.fn-sec-sub { font-size: 14px; color: var(--fn-muted); margin: 0 0 24px; max-width: 56ch; line-height: 1.5; }

/* ── Schritt 1: Monitor-Suche (Mockup .f-inp/.f-choice) ── */
.fn-slots { display: grid; gap: 10px; }
.fn-slot { position: relative; }
.fn-slot-inpwrap { position: relative; }
.fn-slot-inpwrap > svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--fn-muted); }
.fn-inp { display: flex; align-items: center; width: 100%; height: 48px; border: 1px solid var(--fn-line2); border-radius: var(--3idee-radius-mittel); padding: 0 14px 0 38px; font-size: 16px; font-family: inherit; background: var(--color-background, #fff); color: inherit; }
.fn-inp:focus { outline: none; border-color: var(--fn-ink); }
.fn-dd { position: absolute; z-index: 20; left: 0; right: 0; border: 1px solid var(--fn-line); border-top: 0; border-radius: 0 0 var(--3idee-radius-mittel) var(--3idee-radius-mittel); overflow: hidden; background: var(--color-background, #fff); box-shadow: 0 12px 30px rgb(var(--color-foreground-rgb) / .12); }
.fn-ddi { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 14px; font-size: 14.5px; cursor: pointer; border: 0; border-top: 1px solid var(--fn-line); background: none; font-family: inherit; color: inherit; }
.fn-ddi:first-child { border-top: 0; }
.fn-ddi:hover { background: var(--fn-soft); }
.fn-ddi--empty { color: var(--fn-muted); cursor: default; }
/* Die Stoerungsmeldung steht an derselben Stelle wie die Treffer, ist aber
   keiner: kein Zeigefinger, kein Hover, und der Inhalt bringt seine eigene
   Gestalt mit (.eng-aus). Deshalb hier nur der Rahmen. (24.08.2026) */
.fn-ddi--aus { display: block; cursor: default; padding: 4px 14px 12px; }
.fn-ddi--aus:hover { background: none; }
.fn-ddi-img { width: 38px; height: 38px; object-fit: contain; flex: 0 0 auto; border: 1px solid var(--fn-line); border-radius: var(--3idee-radius-klein); background: var(--fn-soft); padding: 2px; }
.fn-ddi-n { font-weight: 700; }
.fn-ddi-s { color: var(--fn-muted); font-size: .85em; }
.fn-filled { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; border: 1px solid var(--fn-orange); box-shadow: inset 0 0 0 1px var(--fn-orange); border-radius: var(--3idee-radius-mittel); padding: 10px 14px; }
.fn-filled-img { width: 44px; height: 44px; object-fit: contain; border: 1px solid var(--fn-line); border-radius: var(--3idee-radius-mittel); background: var(--fn-soft); padding: 3px; flex: 0 0 auto; }
.fn-filled-txt { min-width: 0; flex: 1 1 120px; }
.fn-filled-n { font-weight: 800; font-size: 15px; overflow-wrap: break-word; }
.fn-filled-s { font-size: .85em; color: var(--fn-muted); }
.fn-slot-tools { display: flex; gap: 4px 10px; margin-left: auto; flex: 0 0 auto; flex-wrap: wrap; }
.fn-slot-tool { border: 0; background: none; padding: 4px 8px; font-size: .8em; color: var(--fn-muted); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; font-family: inherit; }
.fn-slot-tool:hover { color: var(--fn-ink); }
.fn-slot-badge { position: absolute; left: -8px; top: -8px; width: 20px; height: 20px; border-radius: 50%; background: var(--fn-ink); color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center; z-index: 5; }
.fn-slots:not(.is-multi) .fn-slot-badge { display: none; }
.fn-addmon { margin-top: 4px; background: none; border: 1px dashed var(--fn-line2); border-radius: var(--3idee-radius-mittel); padding: 11px 14px; font-size: 13.13.5px; font-weight: 700; color: var(--fn-ink); cursor: pointer; font-family: inherit; width: 100%; }
.fn-addmon span { color: var(--fn-orange); font-weight: 900; }
.fn-addmon:hover { border-color: var(--fn-ink); }
.fn-addmon[disabled] { opacity: .45; cursor: default; }
.fn-mountwrap { margin-top: 24px; }
.fn-mount-label { font-size: 13.5px; font-weight: 700; margin: 0 0 10px; color: var(--fn-muted); }
.fn-choices { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
@media (max-width: 620px) { .fn-choices { grid-template-columns: 1fr; } }
/* Textgröße kommt jetzt vom Theme-Absatz-Preset (var(--font-paragraph--*)) statt einer
   erfundenen Fixgröße — Basis einmal auf .fn-choice gesetzt, strong/small erben davon
   (strong = volle Größe + fett, small = 85% davon), genau wie das Theme es für Fließtext
   selbst vorsieht. */
.fn-choice { text-align: left; border: 1px solid var(--fn-line); border-radius: var(--3idee-radius-mittel); background: var(--color-background, #fff); padding: 13px 14px; cursor: pointer; font-family: var(--font-paragraph--family); font-style: var(--font-paragraph--style); font-size: var(--font-paragraph--size); line-height: var(--font-paragraph--line-height); color: inherit; }
.fn-choice:hover { border-color: var(--fn-line2); }
.fn-choice.is-sel { border-color: var(--fn-orange); box-shadow: inset 0 0 0 1px var(--fn-orange); color: var(--fn-orange); }
.fn-choice strong { display: block; font-weight: 700; color: inherit; }
.fn-choice small { color: var(--fn-muted); font-size: .85em; }
.fn-choice.is-sel small { color: inherit; opacity: .8; }
.fn-subfield { margin-top: 16px; }
.fn-subrow { display: flex; gap: 14px; align-items: flex-start; }
@media (max-width: 520px) { .fn-subrow { flex-direction: column; align-items: stretch; } }
.fn-subcol { flex: 1; }
.fn-subcol--thin { flex: 0 0 130px; }
@media (max-width: 520px) { .fn-subcol--thin { flex: 1; } }
.fn-subfield label { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 6px; color: var(--fn-muted); }
.fn-select, .fn-num { width: 100%; height: 44px; border: 1px solid var(--fn-line2); border-radius: var(--3idee-radius-mittel); padding: 0 12px; font-size: 16px; font-family: inherit; background: var(--color-background, #fff); color: inherit; }
.fn-numwrap { position: relative; }
.fn-num { padding-right: 34px; }
.fn-unit { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--fn-muted); font-size: .9em; pointer-events: none; }
.fn-mini { margin-top: 6px; background: none; border: 0; padding: 0; font-size: .85em; color: var(--fn-muted); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; font-family: inherit; }
.fn-mini.is-on { color: var(--fn-orange); font-weight: 700; }
.fn-finder-actions { margin-top: 24px; }

/* ── Journey-Sprungleiste (schlank, dient nur noch als Sprungnavigation neben den
   Nummern im Fließtext, nicht mehr als Haupt-Orientierung) ── */
.fn-journey { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--fn-line); border-radius: var(--3idee-radius-mittel); background: var(--color-background, #fff); overflow: hidden; margin: 0 0 32px; }
.fn-journey.fn-journey--4 { grid-template-columns: repeat(4, 1fr); }
/* Auf Mobil störte die Leiste den Ablauf (zu viele kleine Tap-Ziele, wenig Mehrwert bei
   einspaltigem Scroll-Flow) — dort komplett ausgeblendet. JS toggelt die Sichtbarkeit
   weiterhin per style.display (siehe updateActiveState()); das läuft hier leer, weil die
   Zeile ohnehin display:none bekommt. */
@media (max-width: 760px) { .fn-journey { display: none; } }
.fn-journey-item { min-height: 64px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; border-left: 1px solid var(--fn-line); cursor: pointer; font-family: var(--font-paragraph--family); font-style: var(--font-paragraph--style); font-size: var(--font-paragraph--size); line-height: var(--font-paragraph--line-height); }
.fn-journey-item:first-child { border-left: 0; }
.fn-journey-item:hover { background: var(--fn-soft); }
.fn-journey-item:focus-visible { outline: 2px solid var(--fn-orange); outline-offset: -2px; }
.fn-journey-number { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%; border: 1px solid var(--fn-line); display: grid; place-items: center; font-size: 11px; font-weight: 900; background: var(--fn-soft); font-family: var(--font-body--family); }
.fn-journey-item.done .fn-journey-number { background: var(--fn-ink); border-color: var(--fn-ink); color: #fff; }
.fn-journey-item.active { background: rgb(var(--color-foreground-rgb, 31 34 48) / .05); }
.fn-journey-item.active .fn-journey-number { background: var(--fn-orange); border-color: var(--fn-orange); color: #fff; }
.fn-journey-item strong { display: block; font-weight: 700; }
.fn-journey-item div span { display: block; font-size: .8em; color: var(--fn-muted); }

.fn-result { margin-top: 44px; }
/* Immer zweispaltig, von Schritt 1 an (Buy Box klebt dadurch von ganz oben mit). Der
   Inhalt der rechten Spalte wechselt statt der Spaltenzahl: vor Auswahl steht dort die
   kompakte Experten-Box (.fn-expert-side), danach die Buy Box (.fn-buybox) — siehe
   body.fn-active-Regeln bei den jeweiligen Komponenten weiter unten. */
.fn-rlayout { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 30px; align-items: start; }
@media (max-width: 980px) { .fn-rlayout { grid-template-columns: 1fr; } }
.fn-rmain { min-width: 0; }
.fn-loading, .fn-empty { padding: 30px; text-align: center; color: var(--fn-muted); font-size: 14px; border: 1px solid var(--fn-line); border-radius: var(--3idee-radius-mittel); }

/* ── Schritt 2: Erforderliche Ergänzung (Mockup .req-card) ── */
/* Kein Farbstreifen/Box mehr — Karten sind nur noch per Linie getrennt (siehe
   renderRequired() in finder-clean.js), Pflicht/Empfohlen steht als kleiner Tag
   direkt über dem Titel, das (i) sitzt in derselben Zeile wie Titel/Preis. */
.fn-required-card { border-bottom: 1px solid var(--fn-line); }
.fn-required-card:last-child { border-bottom: 0; }
/* Gruppenkopf je Monitor (nur bei mehreren VERSCHIEDENEN Monitoren, siehe
   _requiredGrouped) — Bild + Name reichen zur Zuordnung, eine zusätzliche Slot-Nummer
   wäre dieselbe Information ein zweites Mal. */
.fn-req-group { display: flex; align-items: center; gap: 9px; padding: 18px 0 8px; }
.fn-req-group:first-child { padding-top: 4px; }
.fn-req-group > span { font-size: 13px; font-weight: 700; }
.fn-req-group i { flex: 1; height: 1px; background: var(--fn-line); }
.fn-req-group-ic { width: 22px; height: 22px; object-fit: contain; border: 1px solid var(--fn-line); border-radius: var(--3idee-radius-winzig); background: var(--fn-soft); flex: 0 0 auto; }
/* Karte über einem folgenden Gruppenkopf braucht keine eigene Trennlinie mehr. */
.fn-required-card:has(+ .fn-req-group) { border-bottom: 0; }
.fn-required-tag { display: block; font-size: var(--font-paragraph--size); font-weight: 850; color: var(--3idee-error); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; }
.fn-required-tag--rec { color: var(--3idee-muted); }
/* "Offen": kein Mangel und kein Angebot, sondern ein noch nicht geklärter Punkt —
   deshalb neutral statt rot oder orange. */
.fn-required-tag--open { color: var(--fn-muted); }
.fn-required-info { flex: 0 0 auto; position: relative; }
.fn-required-info summary { list-style: none; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--3idee-error-line); background: var(--color-background, #fff); color: var(--fn-ink); font-size: 12px; font-weight: 900; display: flex; align-items: center; justify-content: center; padding: 0; outline: none; cursor: pointer; font-family: var(--font-body--family); }
.fn-required-info summary::-webkit-details-marker { display: none; }
.fn-required-info summary::marker { content: ""; }
.fn-required-info summary:hover { border-color: var(--3idee-error); }
.fn-required-info[open] summary { border-color: var(--3idee-error); background: var(--3idee-error); color: #fff; }
.fn-required-info--rec summary { border-color: rgb(var(--color-foreground-rgb, 31 34 48) / .4); }
.fn-required-info--rec summary:hover { border-color: var(--fn-orange); }
.fn-required-info--rec[open] summary { border-color: var(--fn-orange); background: var(--fn-orange); color: #fff; }
.fn-required-info-box { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; width: min(320px, calc(100vw - 40px)); padding: 14px; background: var(--color-background, #fff); border: 1px solid var(--fn-line); border-radius: var(--3idee-radius-mittel); box-shadow: 0 12px 30px rgb(31 34 48 / .18); font-size: 13px; color: var(--color-foreground); line-height: 1.45; }
.fn-required-info-box p { margin: 0 0 12px; }
.fn-required-info-wa { display: inline-flex; align-items: center; justify-content: center; background: #25D366; color: #fff; padding: 10px 14px; border-radius: var(--3idee-radius-mittel); font-size: 14px; font-weight: 700; text-decoration: none; line-height: 1; white-space: nowrap; }
.fn-required-info-wa:hover { background: #1fb959; }
.fn-required-row { display: flex; align-items: center; gap: 14px; padding: 16px 0; }
@media (max-width: 560px) { .fn-required-row { flex-wrap: wrap; } }
.fn-req-ic { position: relative; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; background: var(--fn-soft); border: 1px solid var(--fn-line); display: grid; place-items: center; }
.fn-req-ic img { width: 100%; height: 100%; object-fit: contain; padding: 5px; border-radius: 50%; }
.fn-req-ic--ph::after { content: "⛃"; color: var(--fn-muted); font-size: 18px; }
.fn-required-copy { flex: 1; min-width: 0; }
.fn-required-copy h3 { font-family: var(--font-paragraph--family); font-style: var(--font-paragraph--style); font-weight: var(--font-paragraph--weight); font-size: var(--font-paragraph--size); line-height: var(--font-paragraph--line-height); text-transform: var(--font-paragraph--case); margin: 0; }
.fn-required-copy h3 a { color: inherit; text-decoration: none; }
.fn-required-copy h3 a:hover { text-decoration: underline; }
.fn-required-unavailable { font-size: 13px; color: var(--fn-muted); margin: 4px 0 0; }
.fn-required-price { text-align: right; white-space: nowrap; }
.fn-required-price b { display: block; font-size: 15px; font-weight: 800; }
.fn-required-price small { display: block; color: var(--fn-ok); font-size: 9px; font-weight: 850; }
.fn-required-price .fn-unitprice { color: var(--fn-muted); font-weight: 600; margin-bottom: 2px; }
.fn-qty { position: absolute; top: -5px; right: -5px; background: var(--fn-ink); color: #fff; font-size: 9px; font-weight: 800; padding: 1px 5px; border-radius: var(--3idee-radius-winzig); }
.fn-required-row .fn-reqselbtn { min-height: 38px; padding: 0 14px; font-size: 12px; white-space: nowrap; }
/* Statt einer Schaltfläche steht auf der Klärungskarte rechts nur der Status — sie hält
   damit die Zeilenstruktur der Produktkarten, ohne eine Handlung zu behaupten. */
.fn-req-status { flex: 0 0 auto; align-self: center; font-size: 12px; font-weight: 700; color: var(--fn-muted); }
@media (max-width: 560px) { .fn-required-row .fn-reqselbtn { flex: 1 1 100%; } }

/* ── Schritt 3: Halterung (Mockup .halt-grid/.halt-card) ── */
.fn-one-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; padding-bottom: 12px; margin-bottom: 18px; border-bottom: 1px solid var(--fn-line2); }
.fn-one-brandwrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fn-one-brand { font-size: var(--font-paragraph--size); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--fn-orange); }
.fn-one-tag { font-size: 11px; font-weight: 600; color: var(--fn-muted); padding: 3px 9px; border: 1px solid var(--fn-line); border-radius: var(--3idee-radius-winzig); }
/* Die ganze Kopfzeile schaltet das Systemvorteile-Panel um (siehe finder-clean.js), nicht
   nur der Knopf rechts — deshalb liegt der Zeiger auf der Zeile. is-clickable setzt das JS,
   damit die Zeile ohne Panel nicht fälschlich klickbar aussieht. */
.fn-one-head.is-clickable { cursor: pointer; }
.fn-systoggle { display: flex; align-items: center; gap: 8px; width: fit-content; margin-left: auto; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.fn-systoggle span:first-child { font-size: var(--font-paragraph--size); font-weight: 800; letter-spacing: .02em; color: var(--fn-orange); }
/* Hover auf der Zeile führt den Knopf mit — sonst wirkt nur ein Teil der Fläche aktiv. */
.fn-systoggle:hover span:first-child,
.fn-one-head.is-clickable:hover .fn-systoggle span:first-child { text-decoration: underline; }
.fn-one-head.is-clickable:hover .fn-systoggle span:last-child { background: var(--fn-orange); color: #fff; }
.fn-systoggle span:last-child { flex: 0 0 20px; width: 20px; height: 20px; border: 1px solid var(--fn-orange); border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--fn-orange); }
.fn-systoggle:hover span:last-child { background: var(--fn-orange); color: #fff; }
.fn-system { border: 1px solid var(--fn-line); border-radius: var(--3idee-radius-mittel); background: var(--color-background, #fff); margin-bottom: 24px; overflow: hidden; }
/* 1:1 aus finder.liquid übernommen (Nummer + echte Headline statt Mini-Eyebrow-Label —
   siehe Screenshot-Vorlage): .fn-system-usp/.fn-usp-n/.fn-proof statt der vorherigen
   .fn-usp-block/.fn-system-proof-div-Variante. */
.fn-system-usps { display: grid; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) { .fn-system-usps { grid-template-columns: 1fr; } }
.fn-system-usp { padding: 16px 18px; }
.fn-system-usp + .fn-system-usp { border-left: 1px solid var(--fn-line); }
@media (max-width: 700px) { .fn-system-usp + .fn-system-usp { border-left: 0; border-top: 1px solid var(--fn-line); } }
.fn-usp-n { color: var(--fn-orange); font-size: 11px; font-weight: 900; margin-bottom: 16px; }
.fn-system-usp h3 { font-family: var(--font-h5--family); font-style: var(--font-h5--style); font-weight: var(--font-h5--weight); font-size: var(--font-h5--size); line-height: var(--font-h5--line-height); margin: 0 0 6px; }
.fn-system-usp p { font-size: var(--font-paragraph--size); color: var(--fn-muted); margin: 0; line-height: 1.5; }
.fn-system-proof { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--fn-line); background: var(--fn-soft); }
@media (max-width: 700px) { .fn-system-proof { grid-template-columns: 1fr 1fr; } }
.fn-proof { padding: 11px 12px; text-align: center; font-size: 9px; color: var(--fn-muted); }
.fn-proof + .fn-proof { border-left: 1px solid var(--fn-line); }
.fn-proof b { display: block; color: var(--fn-ink); font-size: 13px; margin-bottom: 2px; letter-spacing: -.01em; }
.fn-system-ctas { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 16px; border-top: 1px solid var(--fn-line); flex-wrap: wrap; }
.fn-system-ctas .fn-btn-line { min-height: 38px; font-size: 12px; }
@media (max-width: 520px) { .fn-system-ctas { justify-content: stretch; } .fn-system-ctas .fn-btn-line { flex: 1; text-align: center; } }

/* Fremde Mounts: je Montageart eine Untergruppe im Container .fn-mount-groups. Schlichter
   Kopf (kein Orange, keine Marke) — grenzt sich bewusst von der 3IDEE-ONE-Kopfzeile ab. */
.fn-mount-section { margin-top: 34px; }
/* Erste Untergruppe ohne ONE-Sektion darüber (reine Mount-Treffer): kleinerer Abstand zur
   Schritt-3-Überschrift statt der vollen Gruppen-Lücke. */
.fn-mount-groups.is-solo > .fn-mount-section:first-child { margin-top: 22px; }
.fn-mount-head { font-size: var(--font-paragraph--size); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--fn-ink); padding-bottom: 12px; margin-bottom: 18px; border-bottom: 1px solid var(--fn-line2); }

.fn-halt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 1100px) { .fn-halt-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) {
  .fn-halt-grid { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .fn-halt-grid::-webkit-scrollbar { display: none; }
  .fn-preset { flex: 0 0 72%; scroll-snap-align: start; }
}
@media (max-width: 420px) { .fn-preset { flex-basis: 78%; } }
.fn-preset { display: flex; flex-direction: column; border: 1px solid var(--fn-line); border-radius: var(--3idee-radius-mittel); overflow: hidden; background: var(--color-background, #fff); }
.fn-preset.is-sel { border-color: var(--fn-orange); box-shadow: inset 0 0 0 1px var(--fn-orange); }
.fn-preset-media { display: block; aspect-ratio: 4/3; background: var(--fn-soft); position: relative; }
.fn-preset-media img { width: 100%; height: 100%; object-fit: contain; padding: 14px; }
.fn-sold { position: absolute; top: 10px; right: 10px; background: var(--fn-sold-bg, #1F2230); color: var(--fn-sold-fg, #fff); font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: var(--fn-badge-radius, var(--3idee-radius-winzig)); }
/* Badge-Ecke oben links: stapelt mehrere Badges (z.B. Produkt-Badge + Bundle-Badge). */
.fn-badges { position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; max-width: calc(100% - 20px); }
.fn-badge { background: var(--fn-ink); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .02em; padding: 4px 9px; border-radius: var(--fn-badge-radius, var(--3idee-radius-winzig)); }
/* Bundle-Badge: gleiches Rot wie "Erforderlich" (.fn-required-tag, var(--3idee-error)). */
/* Gefuellt in Deep Red und nicht in Fehlerrot (Kanalregel, 24.08.2026): Das
   Etikett spricht ueber Geld, nicht ueber ein Problem. Bis heute trug es die
   Fehlerfarbe — bei dE 20 Unterschied faellt das niemandem auf, was den Fall
   nicht besser macht, sondern nur unsichtbarer. */
.fn-badge--bundle { background: var(--3idee-sale); }
.fn-preset-body { padding: 13px; display: flex; flex-direction: column; flex: 1; gap: 8px; }
.fn-preset-title { font-family: var(--font-paragraph--family); font-style: var(--font-paragraph--style); font-weight: var(--font-paragraph--weight); font-size: var(--font-paragraph--size); line-height: var(--font-paragraph--line-height); text-transform: var(--font-paragraph--case); color: inherit; text-decoration: none; }
.fn-preset-title:hover { text-decoration: underline; }
/* Bewusst KEIN natives <details>/<summary> mehr (war vorher so, wie in finder.liquid) —
   moderne Chromium-Versionen rendern geschlossene <details>-Inhalte intern per
   content-visibility, das lässt sich mit einem simplen display:grid!important auf einem
   Kind-Element NICHT zuverlässig überschreiben (Desktop zeigte die USP-Liste dadurch nie).
   Jetzt ein echter Button + JS-Klasse (siehe .fn-usp-toggle-Click-Handler in renderPresets()),
   .fn-usp selbst ist eine ganz normale, jederzeit überschreibbare CSS-Regel. */
.fn-usp { list-style: none; margin: 8px 0 0; padding: 0; display: none; gap: 3px; }
.fn-usp.is-open { display: grid; }
.fn-usp li { position: relative; padding-left: 15px; font-size: 11px; line-height: 1.35; color: var(--fn-muted); }
.fn-usp li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--fn-orange); font-weight: 800; }
.fn-usp-toggle { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--fn-line2); background: none; padding: 0; color: var(--fn-muted); font-size: 11px; font-weight: 800; cursor: pointer; font-family: inherit; }
.fn-usp-toggle:hover { border-color: var(--fn-ink); color: var(--fn-ink); }
@media (min-width: 761px) {
  .fn-usp-toggle { display: none; }
  .fn-usp { display: grid !important; margin-top: 0; }
}
.fn-preset-price { font-size: 15px; font-weight: 800; margin-top: auto; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
/* Bundle-Vorteil am Preis statt als eigener Hinweis: regulärer Preis durchgestrichen,
   Bundle-Preis in Signalfarbe daneben. "mit Adapter" nennt die Bedingung und verschwindet,
   sobald der Adapter ausgewählt ist (siehe cond in card()). */
.fn-price-was { font-weight: 400; color: var(--fn-muted); text-decoration: line-through; }
.fn-price-now { color: var(--fn-orange); }
.fn-price-cond { font-size: 11.5px; font-weight: 600; color: var(--fn-orange); }
/* Bundle-Hinweis (fit:"bundle"): neutral (kein Orange — das bleibt aktiven Zuständen), rundes
   Produkt-Icon wie beim Zubehör/Adapter (.fn-req-ic). Zeigt den eingebetteten Platten-Artikel. */
.fn-bundle-note { display: flex; gap: 8px; align-items: center; border: 1px solid var(--fn-line2); border-radius: var(--3idee-radius-klein); padding: 8px 10px; background: var(--fn-soft); }
/* "+" als Verbinder zwischen Halterung und Add-on-Kasten — eigene, zentrierte Zeile über der
   Box (nicht im Titel-Row, damit der Titel volle Breite behält). */
.fn-bundle-plusmark { display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 900; line-height: 1; color: var(--fn-ink); margin: 3px 0 -2px; }
.fn-bundle-ic { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; background: var(--color-background, #fff); border: 1px solid var(--fn-line); display: grid; place-items: center; overflow: hidden; color: var(--fn-muted); }
.fn-bundle-ic img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.fn-bundle-ic svg { width: 100%; height: 100%; padding: 8px; }
.fn-bundle-txt { min-width: 0; }
.fn-bundle-txt strong { display: block; font-size: 11.5px; font-weight: 800; color: var(--fn-ink); }
.fn-bundle-txt > span { display: block; font-size: 11px; line-height: 1.35; color: var(--fn-muted); margin-top: 1px; }
.fn-bundle-plus { font-weight: 800; color: var(--fn-ink); white-space: nowrap; }
.fn-bundle-sold { color: #c0392b !important; font-weight: 700; }
.fn-preset-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 4px; }
.fn-preset-actions .fn-btn, .fn-preset-actions .fn-btn-line { min-height: 38px; padding: 0 10px; font-size: 12px; }
.fn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: var(--fn-btn-radius, var(--3idee-radius-mittel)); font-weight: 800; font-family: var(--font-paragraph--family); font-size: 14px; border: 1px solid transparent; background: var(--fn-btn-bg, #1F2230); color: var(--fn-btn-fg, #fff); cursor: pointer; }
.fn-btn:hover { filter: brightness(.96); }
.fn-btn[disabled] { opacity: .5; cursor: default; filter: none; }
.fn-soldbtn { background: #8b8f98 !important; color: #fff !important; cursor: default; }
.fn-more { text-align: center; margin: 16px 0 0; }
.fn-morebtn { min-width: 220px; min-height: 38px; padding: 0 14px; font-size: 12px; }

.fn-halterung-empty { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 20px; border: 1px solid var(--fn-line); border-radius: var(--3idee-radius-mittel); }
.fn-halterung-empty > div:first-child { flex: 1 1 260px; font-size: 14px; line-height: 1.5; }
.fn-halterung-empty p { margin: 0 0 8px; }
.fn-halterung-empty p:last-child { margin-bottom: 0; }

/* ── VESA-Funnel (Schritt 3, vor den Karten) ──
   Eigener Kasten statt bloßer Textblock: der Kunde soll sehen, dass hier etwas von IHM
   gebraucht wird, bevor Ergebnisse kommen. Die Optionen folgen der Button-Sprache des
   Themes statt dem orangen Auswahl-Zustand der Montage-Wahl: nicht gewählt = weiß mit
   dunklem Rand (wie .fn-btn-line), gewählt = gefüllt in --fn-ink (wie .fn-btn).
   auto-fit statt fester Spaltenzahl, weil die drei Fragen 5/3/2 Optionen haben. */
.fn-vesa { border: 1px solid var(--fn-line); border-radius: var(--3idee-radius-mittel); padding: 20px; background: var(--fn-soft); }
/* An der Monitorkarte: der Kasten dockt direkt an .fn-filled an, damit sofort klar ist,
   zu WELCHEM Monitor die Fragen gehören — und ein zweiter, vollständiger Monitor
   unbehelligt daneben stehen kann. Rahmen bleibt dezent, die Zuordnung macht die Position. */
.fn-slot.has-vesa.is-vesa-open .fn-filled { border-radius: var(--3idee-radius-mittel) var(--3idee-radius-mittel) 0 0; }
.fn-slot .fn-vesa { margin-top: -1px; border-radius: 0 0 var(--3idee-radius-mittel) var(--3idee-radius-mittel); }
/* Zugeklappt trägt der Chip in der Monitorzeile die Antworten — der Funnel nimmt dann
   keinen Platz mehr weg. Das war auf dem Handy der ganze Bildschirm. */
.fn-slot.has-vesa:not(.is-vesa-open) .fn-vesa { display: none; }

/* VESA-Status in der Monitorzeile. Zwei Ausprägungen: statisch (Daten aus der DB, nichts
   zu tun) und als Schaltfläche mit Pfeil (Funnel-Antworten, jederzeit korrigierbar). */
/* box-sizing + min-height auf der gemeinsamen Klasse, damit der statische Chip (span) und
   der aufklappbare (button) exakt gleich hoch sind — der Button erbt sonst abweichende
   Zeilenhöhe und Innenabstände vom Theme. */
.fn-vesa-chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 0 0 auto; box-sizing: border-box; min-height: 28px; max-width: 100%; margin: 0; padding: 4px 10px; border: 1px solid var(--fn-line2); border-radius: var(--3idee-radius-klein); background: var(--color-background, #fff); font-family: inherit; font-size: 11.11.5px; font-weight: 700; line-height: 1.4; color: var(--fn-ink); }
.fn-vesa-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fn-vesa-chip.is-static { color: var(--fn-muted); font-weight: 600; }
button.fn-vesa-chip { cursor: pointer; }
button.fn-vesa-chip:hover { border-color: var(--fn-ink); }
/* Offene Angaben: orange als aktiver Hinweis, dass hier noch etwas ansteht. */
.fn-vesa-chip.is-todo { border-color: var(--fn-orange); color: var(--fn-orange); }
/* Kein VESA: dieselbe Signalfarbe wie das Erforderlich-Badge in Schritt 2. */
.fn-vesa-chip.is-none { border-color: color-mix(in srgb, var(--3idee-error) 45%, transparent); color: var(--3idee-error); font-weight: 700; }
/* VESA bekannt: dasselbe Grün wie "Paket vollständig und kompatibel" in der Buy Box. */
.fn-vesa-chip.is-ok { border-color: color-mix(in srgb, var(--3idee-success) 45%, transparent); color: var(--fn-ok); font-weight: 700; }
.fn-vesa-chip-arr { flex: 0 0 auto; transition: transform .15s ease; }
.fn-slot.is-vesa-open .fn-vesa-chip-arr { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .fn-vesa-chip-arr { transition: none; } }
/* Keine Zeilenlängen-Begrenzung: der Satz soll die Kastenbreite nutzen, sonst bricht er
   mitten im Kasten um und lässt rechts eine tote Fläche stehen. */
.fn-vesa-intro { margin: 0 0 18px; font-size: 15px; line-height: 1.55; }
.fn-vesa-q + .fn-vesa-q, [data-role="vesa-holes"] .fn-vesa-q:first-child { margin-top: 18px; }
.fn-vesa-q .fn-mount-label { margin-bottom: 8px; color: inherit; }
/* Frage + (i) in einer Zeile. Aufklapper nach demselben Muster wie .fn-required-info
   (natives details/summary, kein JS), aber neutral statt rot — hier ist nichts kritisch. */
/* Frage und (i) auf dieselbe Zeilenhöhe (20px = Höhe des Kreises), sonst sitzt der Kreis
   sichtbar versetzt zur Schrift. Der Abstand nach unten liegt am Container, nicht mehr am
   Label — sonst zöge er die beiden auseinander. */
.fn-vesa-qhead { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.fn-vesa-qhead .fn-mount-label { margin: 0; line-height: 22px; }
/* Maße 1:1 wie .fn-required-info summary (das (i) an den Produktkarten) — inklusive
   padding:0 und flex-shrink:0, ohne die zieht das Theme-Padding den Kreis oval. */
.fn-vesa-i { flex: 0 0 auto; box-sizing: border-box; width: 22px; height: 22px; padding: 0; margin: 0; border-radius: 50%; border: 1px solid var(--fn-line2); background: var(--color-background, #fff); color: var(--fn-ink); font-size: 12px; font-weight: 900; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; outline: none; font-family: var(--font-body--family); }
.fn-vesa-i:hover { border-color: var(--fn-ink); }
.fn-vesa-i[aria-expanded="true"] { background: var(--fn-ink); border-color: var(--fn-ink); color: #fff; }
/* Normaler Block im Fluss statt Overlay: passt sich jeder Breite an und wird im Dialog
   nicht vom scrollenden Körper abgeschnitten. */
.fn-vesa-info-box { margin: 0 0 12px; padding: 14px; background: var(--color-background, #fff); border: 1px solid var(--fn-line); border-radius: var(--3idee-radius-mittel); font-size: 13px; line-height: 1.45; }
.fn-vesa-info-box[hidden] { display: none; }
.fn-vesa-info-box img { display: block; width: 100%; max-width: 220px; height: auto; margin: 0 auto 12px; border-radius: var(--3idee-radius-mittel); }
.fn-vesa-info-box p { margin: 0; }
/* Die Locale-Texte markieren die Schlüsselbegriffe (Maße, "keine VESA-Aufnahme") mit
   <strong> — beim Überfliegen soll die Zahl ins Auge springen, nicht der Satzbau. */
.fn-vesa-info-box strong { font-weight: 800; }
/* Die drei üblichen Maße als Liste statt im Fließtext — man sucht hier nach einer Zahl,
   nicht nach einem Absatz. */
.fn-vesa-info-list { margin: 10px 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.fn-vesa-info-list li { position: relative; padding-left: 14px; }
.fn-vesa-info-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 5px; height: 5px; border-radius: 50%; background: var(--fn-line2); }
.fn-vesa-info-foot { color: var(--fn-muted); }
/* Einzeilige Optionen (kein Untertitel) — schmalere Spalten als bei der Montage-Wahl. */
.fn-vesa-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 8px; }
/* Zentriert wie die übrigen Schaltflächen. .fn-choice ist linksbündig, weil die
   Montage-Wahl dort Titel UND Untertitel trägt — die Funnel-Optionen haben nur ein Label. */
.fn-vesa-opts .fn-choice { background: var(--color-background, #fff); padding: 11px 14px; border-color: var(--fn-ink); color: var(--fn-ink); text-align: center; }
.fn-vesa-opts .fn-choice:hover { background: var(--fn-ink); border-color: var(--fn-ink); color: #fff; }
.fn-vesa-opts .fn-choice.is-sel { background: var(--fn-ink); border-color: var(--fn-ink); color: #fff; box-shadow: none; }
.fn-vesa-select { margin-top: 8px; max-width: 280px; }
@media (max-width: 620px) { .fn-vesa-opts { grid-template-columns: 1fr; } }

/* Overlay: zeigt beim ersten Auftreten denselben Block als Dialog. Im Modal trägt der
   Kasten den Rahmen nicht selbst (den macht .fn-vesa-modal), sonst Rahmen im Rahmen. */
.fn-vesa-overlay { position: fixed; inset: 0; z-index: 1000; background: rgb(31 34 48 / .55); display: flex; align-items: center; justify-content: center; padding: 20px; }
.fn-vesa-modal { width: min(720px, 100%); max-height: calc(100vh - 40px); display: flex; flex-direction: column; background: var(--color-background, #fff); border-radius: var(--3idee-radius-mittel); box-shadow: 0 24px 60px rgb(31 34 48 / .3); }
.fn-vesa-modal-head { display: flex; align-items: center; gap: 12px; padding: 10px 10px 0 20px; }
/* Monitorname im Dialog: ohne ihn wüsste der Kunde bei zwei Monitoren nicht, welcher gemeint ist. */
.fn-vesa-modal-mon { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--fn-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fn-vesa-close { flex: 0 0 auto; width: 34px; height: 34px; border: 0; border-radius: var(--3idee-radius-klein); background: none; font-size: 24px; line-height: 1; color: var(--fn-muted); cursor: pointer; font-family: inherit; }
.fn-vesa-close:hover { background: var(--fn-soft); color: var(--fn-ink); }
.fn-vesa-modal-body { overflow-y: auto; padding: 0 20px 20px; }
.fn-vesa-modal-body .fn-vesa { border: 0; background: none; padding: 0; margin: 0; }
@media (max-width: 620px) { .fn-vesa-overlay { padding: 0; align-items: flex-end; } .fn-vesa-modal { max-height: 92vh; border-radius: var(--3idee-radius-mittel) var(--3idee-radius-mittel) 0 0; } }

/* ── Schritt 4: Zubehör (Mockup .opt-row) ── */
.fn-opt { border-bottom: 1px solid var(--fn-line); }
.fn-opt:last-child { border-bottom: 0; }
/* .fn-opt .fn-opt-row (statt nur .fn-opt-row) ist Pflicht: base.css hat eine globale Regel
   label:has(input[type='checkbox']) { display:inline-flex; gap:var(--padding-2xs); ... }
   für Theme-eigene Checkbox-Labels (Spezifität 0,1,2) — .fn-opt-row ist ein <label> mit
   Checkbox drin und wird davon getroffen. inline-flex lässt die Zeile auf Inhaltsbreite
   schrumpfen, wodurch flex:1/space-between innen keinen Platz zum Verteilen hat (Preis+
   Häkchen kleben am Titel). Der zusätzliche Klassen-Vorfahre hebt die Spezifität auf
   0,2,0 und gewinnt gegen die Theme-Regel. */
.fn-opt .fn-opt-row { display: flex; align-items: flex-start; gap: 12px; padding: 13px 0; cursor: pointer; }
/* Gleiche runde Icon-Form wie der Pflichtteil-Adapter (.fn-req-ic), nur etwas kleiner. */
/* !important + overflow:hidden als Absicherung gegen Theme-Basisregel img{width:100%;height:auto}
   in base.css — die hat niedrigere Spezifität und sollte eigentlich schon verlieren, aber
   overflow:hidden auf dem Kreis-Container verhindert in jedem Fall ein visuelles Ausbrechen. */
.fn-opt-img { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; background: var(--fn-soft); border: 1px solid var(--fn-line); display: grid; place-items: center; overflow: hidden; }
.fn-opt-img img { width: 100% !important; height: 100% !important; object-fit: contain; padding: 4px; border-radius: 50%; }
/* :not(.fn-opt-img) ist Pflicht: .fn-opt-row hat ZWEI direkte Kind-Divs (Icon-Wrapper +
   Text-Wrapper) — ohne den Ausschluss gewann dieses flex:1 (Klasse+Element = höhere
   Spezifität) gegen .fn-opt-img's flex:0 0 40px und zog das Icon zur breiten Ellipse. */
/* Titel + Preis auf einer Zeile, Preis rechtsbündig (nicht mehr untereinander gestapelt) —
   macht die Zeile auch insgesamt kompakter/enger, wie im Referenz-Preview. */
/* Ganze Zeile (Icon + Titel/Preis + Häkchen) flex-start statt center: sonst hängt das
   40px-Icon bei einzeiligen Titeln sichtbar tiefer als Text/Preis/Häkchen, die auf ihre
   eigene (kürzere) Inhaltshöhe zentriert würden. So starten alle Elemente an derselben
   Oberkante, unabhängig von Titellänge/Zeilenumbruch. */
.fn-opt-row > div:not(.fn-opt-img) { flex: 1; min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fn-opt h4 { flex: 1; min-width: 0; font-family: var(--font-paragraph--family); font-style: var(--font-paragraph--style); font-weight: var(--font-paragraph--weight); font-size: var(--font-paragraph--size); line-height: var(--font-paragraph--line-height); text-transform: var(--font-paragraph--case); margin: 0; }
.fn-opt p { font-size: 13px; color: var(--fn-muted); margin: 2px 0 0; }
.fn-opt b { flex: 0 0 auto; white-space: nowrap; font-size: 13.5px; font-weight: 800; }
.fn-opt-toggle { width: 20px; height: 20px; accent-color: var(--fn-orange); flex: 0 0 auto; margin-top: 2px; }
/* Beschreibung-Trigger sitzt unter dem jeweiligen Titel (nicht rechtsbündig): rechtsbündig
   hing er ohne erkennbaren Bezug frei im Raum, da jedes Zubehör-Item seinen eigenen Trigger
   hat (anders als Systemvorteile, das EIN Toggle für die ganze Gruppe ist). Einzug (52px)
   = Icon-Breite (40px) + Gap (12px), damit er optisch unter dem Titeltext startet. */
.fn-opt-info { margin: 2px 0 6px 52px; }
.fn-opt-info-trigger { list-style: none; display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 0; background: none; border: 0; font-size: 11px; font-weight: 800; color: var(--fn-muted); text-transform: uppercase; letter-spacing: .03em; cursor: pointer; outline: none; }
.fn-opt-info-trigger:hover { color: var(--fn-ink); }
.fn-opt-info-trigger::-webkit-details-marker { display: none; }
.fn-opt-info-trigger::marker { content: ""; }
.fn-opt-info-icon { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--fn-line); display: flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; }
.fn-opt-info-icon::before { content: "+"; }
.fn-opt-info[open] .fn-opt-info-icon::before { content: "\2212"; }
.fn-opt-info-body { padding: 0 0 12px; font-size: 13px; color: var(--color-foreground); line-height: 1.5; }
.fn-opt-info-body p { margin: 0 0 10px; }
.fn-opt-info-body p:last-child { margin-bottom: 0; }
.fn-optional-continue { margin-top: 22px; min-width: 260px; }

/* ── Schritt 5: Buy Box — 1:1 Mockup .buybox/.bb-* ── */
.fn-buybox { display: none; position: sticky; top: 20px; border: 1px solid var(--fn-line); border-radius: var(--3idee-radius-mittel); background: var(--color-background, #fff); box-shadow: 0 6px 20px rgb(var(--color-foreground-rgb) / .08); overflow: hidden; max-height: calc(100vh - 40px); overflow-y: auto; }
body.fn-active .fn-buybox { display: block; }

/* ── Experten-Box (rechte Spalte, NUR vor Auswahl) — kompakte Variante der echten
   finder-expert.liquid ("3IDEE Experten-Check"), gleiche Farben/Optik (dunkle Fläche,
   Orange-Akzent, Haken-Checkliste), nur schmaler für die 320px-Sidebar. Verschwindet
   sobald body.fn-active (dieselbe Bedingung, die die Buy Box einblendet) — macht Platz
   für die Buy Box; die volle Experten-Band-Section unter dem Finder blendet sich zeitgleich
   über ihr eigenes "hide_on_finder"-Setting aus/wieder ein (siehe templates/page.finder-clean.json). */
.fn-expert-side { position: sticky; top: 20px; background: var(--3idee-muted); color: #fff; border-radius: var(--3idee-radius-mittel); padding: 24px; }
body.fn-active .fn-expert-side { display: none; }
.fn-expert-side-eyebrow { display: inline-block; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; font-weight: 800; color: #fff; margin-bottom: 10px; }
.fn-expert-side h3 { font-size: 17px; font-weight: 800; letter-spacing: -.01em; line-height: 1.3; margin: 0 0 10px; }
.fn-expert-side-text { font-size: 13px; color: rgb(255 255 255 / .78); margin: 0 0 18px; line-height: 1.5; }
.fn-expert-side-factors { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fn-expert-side-factors li { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: rgb(255 255 255 / .9); line-height: 1.4; }
.fn-expert-side-factors li svg { color: #fff; flex: 0 0 auto; margin-top: 2px; }
.fn-expert-side .fn-btn-line { margin-top: 18px; width: 100%; background: transparent; border-color: rgb(255 255 255 / .3); color: #fff; }
.fn-expert-side .fn-btn-line:hover { background: rgb(255 255 255 / .1); border-color: #fff; }
@media (max-width: 980px) { .fn-expert-side { position: static; margin-top: 20px; } }
/* Gleiches Apple-Stil-Muster wie Schritt 1–4 (.fn-sec-head, siehe oben) — Eyebrow fett +
   Überschrift grau in einer Zeile, gleiche Textgröße wie 1–4 (section_heading_size, siehe
   fn_bb_heading_class oben im Liquid-Kopfblock der Datei). Einzige Abweichung: bei h1/h2
   wird hier auf h3 gedeckelt, weil die 320px-Sidebar schmaler ist als die Hauptspalte und
   ein so großer Preset dort zuverlässig überläuft (h3 ist die nachweislich sichere
   Obergrenze für diese Breite — dieselbe Stelle lief früher mit --font-h6--size über). */
.fn-bb-head { padding: 16px; border-bottom: 1px solid var(--fn-line); }
.fn-bb-head .fn-sec-head { margin: 0 0 4px; }
.fn-bb-head-num { width: 32px; height: 32px; border-radius: 50%; background: var(--fn-orange); color: #fff; font-size: 13px; font-weight: 900; display: grid; place-items: center; flex: 0 0 auto; font-family: var(--font-body--family); }
.fn-bb-sub { margin: 0; font-size: 12px; color: var(--fn-muted); }
/* Belegzeile, mittig wie auf der Produktseite. */
.fn-bb-proof { margin: 12px 16px 0; text-align: center; font-size: .85rem; line-height: 1.4; color: rgba(31,34,48,.7); }
.fn-bb-lines { padding: 0 16px; }
.fn-sline { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; padding: 9px 0; border-bottom: 1px solid var(--fn-line); }
.fn-sline small { display: block; color: var(--fn-muted); font-size: 9px; }
.fn-sline-empty { padding: 18px 0; color: var(--fn-muted); font-size: var(--font-paragraph--size); text-align: center; }
.fn-sdiscount strong, .fn-sdiscount b { color: var(--fn-orange); }
.fn-bb-total { padding: 12px 16px; background: var(--fn-soft); display: flex; justify-content: space-between; align-items: baseline; }
.fn-bb-total > span { font-size: 12.5px; font-weight: 700; }
.fn-bb-total-amt { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.fn-bb-total-row { display: flex; align-items: baseline; gap: 8px; }
.fn-bb-strike { color: var(--fn-muted); text-decoration: line-through; font-weight: 700; font-size: 12px; }
.fn-bb-total b { font-size: 19px; font-weight: 800; }
.fn-bb-legal { font-size: 10.5px; color: var(--fn-muted); margin: 0; text-align: right; }
.fn-delivery { margin: 14px 16px; border: 1px solid var(--3idee-success-line); background: var(--fn-okbg); padding: 10px 12px; font-size: 12px; color: var(--fn-ok); border-radius: var(--3idee-radius-mittel); }
.fn-delivery strong { display: block; font-weight: 800; color: var(--fn-ok); }
.fn-delivery small { display: block; font-weight: 600; color: var(--fn-ok); opacity: .8; margin-top: 2px; }
.fn-delivery--warn { border-color: var(--3idee-error-line); background: var(--3idee-error-fill); color: var(--3idee-error); }
.fn-delivery--warn strong, .fn-delivery--warn small { color: var(--3idee-error); }
/* Neutral statt Bernstein — Statussystem 19.08. */
.fn-delivery--rec { border-color: var(--fn-line2); background: var(--fn-soft); color: var(--fn-ink); }
.fn-delivery--rec strong, .fn-delivery--rec small { color: var(--fn-ink); }
.fn-atc-form { margin: 12px 16px 0; }
add-to-cart-component { display: block; }
.fn-bb-cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 46px; border-radius: var(--3idee-radius-mittel); background: var(--fn-btn-bg, var(--fn-ink)); color: var(--fn-btn-fg, #fff); font-size: 13.13.5px; font-weight: 800; border: 1px solid transparent; cursor: pointer; position: relative; overflow: hidden; }
.fn-bb-cta:hover { filter: brightness(.96); }
/* Der Warenkorb-Knopf ist dieselbe Komponente wie auf der Produktseite und
   darf sich nicht anders anfuehlen. .fn-bb-cta setzt fuer die eigenen
   Schaltflaechen der Buy Box eigene Werte — fuer DIESEN Knopf werden sie an
   dieselben Theme-Variablen gehaengt, aus denen sich das Theme bedient.
   Keine festen Zahlen: sonst gaebe es wieder zwei Wahrheiten. */
.fn-bb-cta.add-to-cart-button {
  height: var(--height-buy-buttons);
  border-radius: var(--style-border-radius-buttons-primary);
  font-family: var(--button-font-family-primary);
  font-weight: var(--font-paragraph--weight);
  text-transform: var(--button-text-case-primary);
  font-size: inherit;
}
.fn-bb-cta[disabled] { opacity: .5; cursor: default; filter: none; }
/* "Kein VESA-Muster" im Setup: Klärung wird Hauptaktion, der Kauf tritt zur sekundären
   Schaltfläche zurück (bleibt aber klickbar — der Kunde entscheidet). */
/* Gleiche Einrückung wie die Kaufschaltfläche darunter: die sitzt in .fn-atc-form mit
   margin 12px 16px 0. Ohne das lag dieser Link direkt an den Kanten der Buy Box und war
   32px breiter als der Button darunter. */
.fn-bb-cta--wa { text-decoration: none; margin: 12px 16px 0; width: auto; }
.fn-bb-cta--secondary { background: var(--color-background, #fff); color: var(--fn-ink); border-color: var(--fn-ink); }
.fn-bb-cta--secondary:hover { background: var(--fn-ink); color: #fff; filter: none; }
.fn-bb-note { font-size: 9px; color: var(--fn-muted); text-align: center; margin: 8px 16px 0; }
.fn-bb-standalone { display: flex; gap: 8px; margin: 8px 16px 0; }
.fn-bb-standalone-btn { flex: 1; text-align: center; font-size: 10.5px; color: var(--fn-muted); text-decoration: underline; text-underline-offset: 2px; padding: 4px 0; background: none; border: 0; cursor: pointer; font-family: inherit; }
.fn-bb-standalone-btn:hover { color: var(--fn-ink); }
.fn-bb-standalone-btn.is-added { color: var(--fn-ok); text-decoration: none; }
.fn-bb-standalone-btn[disabled] { cursor: default; opacity: .7; }
.fn-bb-postadd { width: calc(100% - 32px); margin: 8px 16px 0; }
.fn-bb-trust { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--fn-line); margin-top: 14px; }
.fn-bb-trust div { text-align: center; padding: 9px 4px; font-size: 8.5px; color: var(--fn-muted); border-left: 1px solid var(--fn-line); }
.fn-bb-trust div:first-child { border-left: 0; }
.fn-bb-pay { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 11px 16px; }
.fn-bb-pay-icon { height: 17px; width: auto; }
.fn-bb-one { margin: 12px 16px 16px; padding: 11px; background: var(--fn-soft); border-left: 3px solid var(--fn-orange); font-size: 10.10.5px; border-radius: 0 var(--3idee-radius-mittel) var(--3idee-radius-mittel) 0; }
.fn-bb-one b { color: var(--fn-orange); display: block; margin-bottom: 4px; }
.fn-bb-one-eyebrow { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--fn-muted); margin-bottom: 3px; }
/* Checkliste 1:1 aus dem Original (finder.liquid .fn-oneselect ul/li) — war hier auf eine
   " · "-getrennte Zeile verflacht, dabei gingen Häkchen UND Zeilenumbruch pro Punkt verloren. */
.fn-bb-one-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.fn-bb-one-list li { position: relative; padding-left: 15px; color: var(--color-foreground); }
.fn-bb-one-list li::before { content: "✓"; position: absolute; left: 0; color: var(--fn-orange); font-weight: 900; }

/* ── Mobile-Härtung ── */
.fn-preset-title, .fn-required-copy h3, .fn-opt h4 { overflow-wrap: break-word; }
@media (max-width: 749px) {
  .fn-section.section--page-width > * { grid-column: 1 / -1; }
  .fn-section.spacing-style { padding-inline: var(--page-margin, 16px) !important; }
}
@media (max-width: 980px) {
  .fn-buybox { position: static; margin-top: 20px; max-height: none; overflow: visible; }
}
@media (max-width: 560px) {
  .fn-sec { padding: 32px 0; }
  .fn-preset-actions { grid-template-columns: 1fr; }
  .fn-choice { padding: 11px; }
  .fn-filled { padding: 10px; }
  .fn-filled-img { width: 40px; height: 40px; }
  .fn-slot-tools { flex: 1 0 100%; margin-left: 0; justify-content: flex-start; }
}

/* Verborgen bis zum Einstieg — siehe Kommentar an der Sektionswurzel.
   Die ganze Sektion, nicht nur ihr Inhalt: sonst blieben Innenabstand und
   Hintergrund als leerer Streifen unter dem Hero stehen. */
.fn-section--verborgen { display: none; }

/* Die Kopfzeile klebt oben. Ohne diesen Ausgleich schiebt sie sich beim
   Hinrollen ueber die Sprungleiste — man landet auf Schritt 1, sieht aber
   dessen erste Zeile nicht. Der Wert kommt aus derselben Variablen, die auch
   der Hero fuer "bildschirmhoch" benutzt. */
.fn-section { scroll-margin-top: var(--header-group-height, 0px); }
/* END_SECTION:finder-clean */

/* START_SECTION:finder-expert (INDEX:13) */
@media (max-width: 749px) {
  .finder-expert.section--page-width > * { grid-column: 1 / -1; }
  .finder-expert.spacing-style { padding-inline: var(--page-margin, 16px) !important; }
}
.finder-expert__band {
  background: var(--fe-ink);
  color: #fff;
  border-radius: var(--3idee-radius-mittel);
  padding: 40px;
}
.finder-expert__eyebrow {
  display: inline-block;
  font-size: 12px; letter-spacing: .09em; text-transform: uppercase; font-weight: 800;
  color: #ffffff; margin-bottom: 12px;
}
.finder-expert__heading { letter-spacing: -.03em; margin: 0 0 12px; }
.finder-expert__text { color: rgb(255 255 255 / 0.78); max-width: 640px; }
.finder-expert__text p { margin: 0; }
.finder-expert__factors {
  list-style: none; padding: 0; margin: 22px 0 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 26px; max-width: 760px;
}
.finder-expert__factors li {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 14px; color: rgb(255 255 255 / 0.9);
}
.finder-expert__factors li svg { color: #ffffff; flex: 0 0 auto; margin-top: 3px; }
.finder-expert__band .button { margin-top: 24px; }

@media screen and (max-width: 749px) {
  .finder-expert__band { padding: 28px; }
  .finder-expert__factors { grid-template-columns: 1fr; }
}
/* END_SECTION:finder-expert */

/* START_SECTION:finder-faq (INDEX:14) */
.finder-faq { color: var(--color-foreground); }
@media (max-width: 749px) {
  .finder-faq.section--page-width > * { grid-column: 1 / -1; }
  .finder-faq.spacing-style { padding-inline: var(--page-margin, 16px) !important; }
}
.finder-faq__head { text-align: center; margin-bottom: 28px; }
.finder-faq__eyebrow {
  display: inline-block; font-size: 12px; letter-spacing: .09em; text-transform: uppercase;
  font-weight: 800; color: var(--fq-orange); margin-bottom: 10px;
}
.finder-faq__heading { letter-spacing: -.03em; margin: 0; }
.finder-faq__list { max-width: 820px; margin: 0 auto; border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.12); }
.finder-faq__item { border-bottom: 1px solid rgb(var(--color-foreground-rgb) / 0.12); }
.finder-faq__q {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 4px; font-size: 16px; font-weight: 700;
}
.finder-faq__q::-webkit-details-marker { display: none; }
.finder-faq__chev { flex: 0 0 auto; color: rgb(var(--color-foreground-rgb) / 0.5); transition: transform .2s ease, color .2s ease; }
.finder-faq__item[open] .finder-faq__chev { transform: rotate(180deg); color: var(--fq-orange); }
.finder-faq__a { padding: 0 4px 20px; color: rgb(var(--color-foreground-rgb) / 0.72); font-size: 14px; }
.finder-faq__a p { margin: 0 0 10px; }
.finder-faq__a :last-child { margin-bottom: 0; }
/* END_SECTION:finder-faq */

/* START_SECTION:finder-hero (INDEX:15) */
/* Breite: die Umschaltung im Editor (Layout → Breite) setzt die Theme-Klassen
   .section--page-width bzw. .section--full-width; das Spaltenraster kommt aus
   base.css. Volle Breite heisst randlos — das eigene Seitenpolster faellt weg,
   sonst bliebe links und rechts ein Streifen stehen. Aus demselben Grund
   verliert die Buehne ihre Ecken. */
.finder-hero.section--full-width.spacing-style { padding-inline: 0 !important; }
.finder-hero.section--full-width .fh2 { border-radius: 0; }

@media (max-width: 749px) {
  .finder-hero.section--page-width > * { grid-column: 1 / -1; }
  .finder-hero.section--page-width.spacing-style { padding-inline: var(--page-margin, 16px) !important; }
}

/* ── Hoehe ──────────────────────────────────────────────────────────────────
   Dieselben Stufen wie in den uebrigen Hero-Bereichen des Themes. Zusaetzlich
   mit einem festen rem-Wert gedeckelt: svh ist ein Anteil der Fensterhoehe und
   aendert sich beim Zoomen NICHT — ohne Deckel bliebe der Hero der einzige
   Bereich, der beim Herauszoomen seine Groesse behaelt. "Bildschirmhoch"
   bleibt ungedeckelt, dort ist bildschirmhoch die Ansage. */
.finder-hero--h-auto       { --fh-min-h: 0px; }
.finder-hero--h-small      { --fh-min-h: min(var(--section-height-small),  36rem); }
.finder-hero--h-medium     { --fh-min-h: min(var(--section-height-medium), 47rem); }
.finder-hero--h-large      { --fh-min-h: min(var(--section-height-large),  58rem); }
.finder-hero--h-full-screen{ --fh-min-h: calc(100svh - var(--header-group-height, 0px)); }

/* Buendig unter der Kopfzeile: ein Hero, der unter der Navigation schwebt,
   liest sich nicht als Hero. Ueberstimmt den Regler "Abstand oben". */
.finder-hero--buendig.spacing-style { padding-block-start: 0 !important; }

/* Abgeschwaechtes Orange fuer Linien — dasselbe Prinzip wie im Header, wo die
   Umrandung von "MODULARES SYSTEM" und der Setup-Schaltflaeche nicht voll
   deckt (dort rgb(var(--color-foreground-rgb, 31 34 48) / .45), auf Bild rgb(255 177 132 / .55)).
   Volle Deckkraft laesst eine Linie wie einen Rahmen wirken; abgeschwaecht
   markiert sie, ohne den Hero in Kaesten zu zerlegen.

   Aus der Akzentfarbe abgeleitet statt fest eingetragen, damit die Einstellung
   im Editor weiter durchschlaegt. Die erste Zeile ist der Rueckfall fuer
   Browser ohne color-mix. */
.finder-hero {
  --fh-linie: rgb(var(--color-foreground-rgb, 31 34 48) / .55);
  --fh-linie: color-mix(in srgb, var(--fh-orange, var(--3idee-ink)) 55%, transparent);
}

/* ── Buehne ─────────────────────────────────────────────────────────────── */
/* Ohne Bildpunkte darf das Foto einfach fuellen. Frueher musste die Bildflaeche
   ihr Seitenverhaeltnis halten, damit die Punkte am Motiv kleben blieben — das
   ist mit ihnen entfallen, und mit ihm die ganze Deckungsrechnung. */
.finder-hero .fh2 {
  position: relative;
  border-radius: var(--3idee-radius-mittel);
  /* NICHT overflow:hidden — sonst wird die Trefferliste an der Unterkante
     abgeschnitten. Gekappt wird eine Ebene tiefer, in .fh2__rahmen. */
  background: #0d0e13;
  min-height: var(--fh-min-h, 0px);
  display: flex;
  align-items: center;
  container-type: inline-size;
}
/* Buehne beschneidet, Motiv behaelt sein Verhaeltnis.

   Die Bildpunkte stehen in Prozent des MOTIVS. Duerfte die Bildflaeche ihr
   Seitenverhaeltnis mit der Fenstergroesse aendern, wanderte der Ausschnitt
   unter ihnen weg und sie zeigten ins Leere. Deshalb zwei Ebenen:

     Buehne (.fh2)      — so breit wie der Abschnitt, Hoehe aus der Einstellung
     Motiv (.fh2__pic)  — behaelt sein Verhaeltnis, liegt mittig darin und ragt
                          heraus; Foto, Zielringe und Punkte sitzen ALLE hier

   Gerechnet ueber die Breite: entweder so breit wie die Buehne, oder so breit,
   dass die Hoehe reicht — max() nimmt den groesseren Wert, die Hoehe folgt
   ueber aspect-ratio. Beschnitten wird mittig. */
.finder-hero .fh2__rahmen {
  position: absolute; inset: 0;
  overflow: hidden;
  border-radius: inherit;
}
.finder-hero .fh2__pic {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: max(100%, calc(var(--fh-min-h, 0px) * var(--fh-ar, 1.7778)));
  height: auto;
  aspect-ratio: var(--fh-ratio, 16/9);
  overflow: hidden;
  container-type: inline-size;
}
/* Hoehe "Automatisch": die Buehne nimmt selbst das Verhaeltnis an, dann gibt
   es nichts zu beschneiden und das Motiv deckt sie exakt. */
.finder-hero--h-auto .fh2 { aspect-ratio: var(--fh-ratio, 16/9); }
.finder-hero--h-auto .fh2__pic {
  inset: 0; top: auto; left: auto; translate: none;
  width: 100%; height: 100%; aspect-ratio: auto;
}
.finder-hero .fh2__bildwahl { display: block; width: 100%; height: 100%; }
.finder-hero .fh2__photo {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--fh-focus-x, 50%) var(--fh-focus, 42%);
}
.finder-hero .fh2__photo--leer { background: linear-gradient(120deg, #262a36, #12141c); }
.finder-hero .fh2__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(
    100deg,
    rgb(10 11 16 / var(--fh-scrim, .9)) 0%,
    rgb(10 11 16 / calc(var(--fh-scrim, .9) * .7)) 34%,
    rgb(10 11 16 / 0) 62%
  );
}

/* Bild breit, Text im Seitenraster.

   Der Hero laeuft ueber die volle Breite, der TEXT darf das nicht: er stuende
   sonst ganz aussen am Bildschirmrand, waehrend jeder Abschnitt darunter an
   der Seitenbreite beginnt. Beim Scrollen springt die Textkante dann hin und
   her. Genau so macht es auch der Hero der Startseite.

   --full-page-grid-central-column-width ist die Mittelspalte des Theme-Rasters
   und wird in base.css auf jeder .section gesetzt. Sie hier zu uebernehmen
   statt eine eigene Breite zu setzen heisst: aendert jemand die Seitenbreite
   in den Theme-Einstellungen, wandert der Hero-Text von selbst mit. */
.finder-hero .fh2__copy {
  /* z-index ueber den Punkten (4) und ihren Popups (5): Headline und
     Eingabefeld duerfen nie von einem Schild verdeckt oder blockiert werden. */
  position: relative; z-index: 6;
  width: 100%;
  padding: 52px 5%;
  color: #fff;
}
/* Lesebreite innerhalb der Spalte — sonst liefe die Headline ueber die ganze
   Mittelspalte und waere auf breiten Schirmen kaum noch zu lesen. Die Eingabe
   darf breiter sein, sie traegt keinen Fliesstext. */
.finder-hero .fh2__text { max-width: 40rem; }
.finder-hero .fh2__eingabe { max-width: 48rem; }

.finder-hero.section--full-width .fh2__copy {
  width: var(--full-page-grid-central-column-width, min(100% - 2rem, 75rem));
  max-width: 100%;
  margin-inline: auto;
  padding-inline: 0;
}
.finder-hero .fh2__eyebrow {
  display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--3idee-muted); margin-bottom: 11px;
}
.finder-hero .fh2__heading { letter-spacing: -.045em; line-height: 1.04; margin: 0; color: #fff; }
.finder-hero .fh2__sub {
  margin-top: 13px; font-size: clamp(15px, 1.3cqw, 18px); line-height: 1.5;
  color: rgb(255 255 255 / .84);
}
.finder-hero .fh2__sub p { margin: 0; }

/* ── Eingabeleiste ──────────────────────────────────────────────────────── */
/* Umrandet statt gefuellt: eine Linie kostet keine Flaeche, das Foto bleibt
   sichtbar. Der orange Rand markiert, was hier zu tun ist. */
/* [hidden] allein reicht nicht: die Grundregel des Browsers dafuer ist sehr
   schwach und wird von jeder eigenen display-Angabe ueberschrieben — die Zeile
   blieb sonst sichtbar, obwohl sie als versteckt markiert war, und Suchfeld
   und Auswahl standen gleichzeitig da. */
.finder-hero .fh2__bar[hidden] { display: none; }
.finder-hero .fh2__bar {
  /* 36px, nicht 26: der Abstand war fuer die Reihenfolge Headline → Untertext
     → Leiste gedacht, wo der Absatz dazwischen selbst Luft mitbringt. Ohne ihn
     sitzt die Leiste direkt unter einer sehr grossen Ueberschrift und braucht
     mehr Raum, sonst klebt sie daran. */
  display: flex; align-items: stretch; margin-top: 36px;
  /* Breiter als die Lesebreite des Textes: mit dem Hinweis darin waere die Box
     bei 40rem zu gedrungen. In die Laenge gezogen wirkt sie wieder schlank —
     und der Hinweis passt in eine Zeile. */
  max-width: 48rem;
  border: 1.1.5px solid var(--fh-linie); border-radius: var(--3idee-radius-mittel);
  background: rgb(13 14 19 / .34); backdrop-filter: blur(7px);
  /* Die ganze Box ist Eingabeflaeche: ein Klick irgendwo darin setzt den
     Cursor ins Feld (siehe finder-hero.js). Deshalb auch der Textcursor —
     alles andere waere ein Versprechen, das die Optik nicht einloest. */
  cursor: text;
}
/* Links Feld und Hinweis untereinander, rechts der Knopf ueber die volle
   Hoehe. Sass der Knopf nur in der Feldzeile, schwebte er in der Box und
   darunter lief sie weiter — er las sich als Teil der Zeile statt als
   abgetrennte Handlung. Ueber beide Zeilen wird er zur eigenen Flaeche. */
.finder-hero .fh2__feldbereich {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; justify-content: center;
}
.finder-hero .fh2__feldzeile { display: flex; align-items: center; }
.finder-hero .fh2__bar:focus-within { box-shadow: 0 0 0 3px rgb(var(--color-foreground-rgb, 31 34 48) / .22); }
.finder-hero .fh2__lupe {
  flex: 0 0 auto; width: 18px; height: 18px; align-self: center;
  margin-left: 17px; margin-right: 11px;
  color: rgb(255 255 255 / .7); pointer-events: none;
}
.finder-hero .fh2__lupe svg { width: 100%; height: 100%; display: block; }
/* Doppelt geschriebener Selektor (.fh2__bar .fh2__feld) ist kein Versehen:
   base.css setzt fuer JEDES Eingabefeld
     input:not([type='checkbox'], [type='radio']) { background-color: … }
   und diese Regel ist spezifischer als eine einzelne Klasse. Ohne den
   zusaetzlichen Vorfahren stand das Feld weiss auf dem Foto — samt weisser
   Schrift und weisser Lupe darauf, also unsichtbar. Zwei Klassen schlagen
   Element + Attribut, damit bleibt es ohne !important. */
.finder-hero .fh2__bar .fh2__feld {
  flex: 1 1 auto; min-width: 0;
  height: 50px; border: 0; border-color: transparent;
  background: none; background-color: transparent; color: #fff;
  padding: 0 12px 0 0; font: inherit; font-size: 16px;
  box-shadow: none;
}
.finder-hero .fh2__bar .fh2__feld::placeholder { color: rgb(255 255 255 / .62); opacity: 1; }
/* Auf schmalen Geraeten passt der Platzhalter nicht in eine Zeile. Mit
   Auslassungspunkten endet er lesbar statt mitten im Wort abgehackt. */
.finder-hero .fh2__bar .fh2__feld { text-overflow: ellipsis; }
.finder-hero .fh2__bar .fh2__feld:focus { outline: none; }
/* Chrome faerbt automatisch ausgefuellte Felder hellgelb und ueberschreibt
   dabei den Hintergrund. Der Schatten-Trick ist der einzige Weg, das zu
   verhindern, ohne die Eingabehilfe abzuschalten. */
.finder-hero .fh2__bar .fh2__feld:-webkit-autofill
.finder-hero .fh2__bar .fh2__feld:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 60px #14161d inset;
}

/* Trefferliste — Fortsetzung der Leiste, nicht Fremdkoerper.

   Zuerst war sie weiss. Das war der naheliegende Griff (Listen sind weiss),
   sah im Hero aber aus wie ein aufgeklebter Zettel: ein heller Block mitten in
   einer dunklen, umrandeten Gestaltung. Jetzt spricht sie dieselbe Sprache wie
   die Leiste — dunkel, durchscheinend, derselbe orange Rand — und liest sich
   als deren Verlaengerung nach unten.

   Der Wert im Foto ist der Grund fuer die Transparenz: das Bild bleibt hinter
   der Liste sichtbar, der Hero verliert seine Flaeche nicht an ein Menue. */
.finder-hero .fh2__bar { position: relative; }
.finder-hero .fh2__dd {
  position: absolute; top: calc(100% + 6px); left: -1.5px; right: -1.5px; z-index: 20;
  border: 1.1.5px solid var(--fh-linie); border-radius: var(--3idee-radius-mittel);
  background: rgb(13 14 19 / .82); backdrop-filter: blur(14px);
  overflow: hidden auto; max-height: 17rem; overscroll-behavior: contain;
  box-shadow: 0 24px 54px rgb(0 0 0 / .45);
  scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / .3) transparent;
}
.finder-hero .fh2__dd[hidden] { display: none; }
.finder-hero .fh2__dd::-webkit-scrollbar { width: 8px; }
.finder-hero .fh2__dd::-webkit-scrollbar-thumb { background: rgb(255 255 255 / .26); border-radius: var(--3idee-radius-mittel); }
.finder-hero .fh2__ddi {
  display: block; width: 100%; border: 0; background: none; cursor: pointer;
  padding: 10px 15px; font: inherit; text-align: left; color: #fff;
}
.finder-hero .fh2__ddi:hover
.finder-hero .fh2__ddi:focus-visible { background: rgb(255 255 255 / .11); outline: none; }
.finder-hero .fh2__ddi + .fh2__ddi { border-top: 1px solid rgb(255 255 255 / .12); }
.finder-hero .fh2__ddi-n { display: block; font-size: 14.5px; font-weight: 700; }
.finder-hero .fh2__ddi-s { display: block; font-size: 12.5px; color: rgb(255 255 255 / .58); margin-top: 1px; }
.finder-hero .fh2__dd-leer { margin: 0; padding: 13px 15px; font-size: 14px; color: rgb(255 255 255 / .66); }

/* Solange die Liste offen ist, muss der Hero ueber dem folgenden Abschnitt
   liegen — sonst schoebe sich dessen Hintergrund darueber. Nur dann, damit die
   Stapelreihenfolge der Seite sonst unangetastet bleibt. */
.finder-hero--liste-offen { z-index: 4; }

/* Der sekundaere Knopf tritt weiterhin zurueck, solange die Liste offen ist —
   er liegt unter der Box und schiene sonst durch. */
.finder-hero .fh2__actions { transition: opacity .15s ease, visibility .15s ease; }
.finder-hero--liste-offen .fh2__actions { opacity: 0; visibility: hidden; }

/* Wie die Setup-Schaltflaeche in der Kopfzeile: weisse Flaeche, orange Kontur,
   oranger Text. Den Rahmen zeichnet das Theme ueber einen Innenschatten, dessen
   Breite aus einer Theme-Einstellung kommt — steht die auf 0, bliebe die Kontur
   unsichtbar. Deshalb wird sie hier ausdruecklich gesetzt, genauso wie es der
   Header macht.

   Der Knopf sitzt mit Abstand IN der Suchbox statt buendig an deren Kanten:
   als eigene weisse Flaeche mit eigener Kontur braucht er Luft, sonst stiessen
   zwei Rahmen unmittelbar aneinander. */
/* Keine eigenen Farben mehr: Das ist die primaere Schaltflaeche des Themes
   und muss ueberall gleich aussehen. Weiss mit oranger Schrift las sich wie
   ein Nebenweg — und Orange soll markieren, nicht tragen. Hier bleibt nur
   Layout: Radius, Abstand, Ausrichtung. */
.finder-hero .fh2__bar .button {
  border-radius: var(--3idee-radius-mittel);
  margin: 5px;
  align-self: stretch;
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;   /* schlaegt den Textcursor der Box */
  white-space: nowrap;
}

/* Sekundaerer Knopf: unveraendert die Theme-Schaltflaeche. Keine eigenen
   Farben — sie kommen aus den Theme-Einstellungen. */
.finder-hero .fh2__actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 13px; }

/* ── Bildpunkte ─────────────────────────────────────────────────────────── */
/* Sie liegen im Motiv und werden mit ihm beschnitten, kleben also am Bild.
   Der Text liegt DARUEBER (z-index), damit Schilder nie ueber Headline oder
   Eingabefeld geraten — setz die Punkte trotzdem rechts der Textspalte. */
.finder-hero .fh2__marks {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 2; overflow: visible;
}
.finder-hero .fh2__ring { fill: none; stroke: var(--fh-orange); stroke-width: 1.5px; }
.finder-hero .fh2__halo { fill: none; stroke: rgb(0 0 0 / .35); stroke-width: 3.5px; }
.finder-hero .fh2__puls { fill: none; stroke: var(--fh-orange); stroke-width: 1px; opacity: .4; }

.finder-hero .fh2__spot {
  position: absolute; transform: translate(-50%, -50%); z-index: 4;
  display: flex; align-items: center; gap: 9px;
}
.finder-hero .fh2__spot--links { flex-direction: row-reverse; }
.finder-hero .fh2__knopf {
  width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%;
  border: 0; background: none; cursor: pointer; padding: 0;
}
.finder-hero .fh2__chip {
  display: inline-flex; flex-direction: column; gap: 1px; white-space: nowrap;
  background: rgb(255 255 255 / .95); border-radius: var(--3idee-radius-klein); padding: 6px 11px;
  box-shadow: 0 8px 22px rgb(0 0 0 / .28);
}
.finder-hero .fh2__tag {
  font-size: 9.5px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: #d63d52;
}
.finder-hero .fh2__tag--loesung { color: var(--fh-ink); }
.finder-hero .fh2__name { font-size: 13px; font-weight: 700; color: var(--fh-ink); }

.finder-hero .fh2__pop {
  position: absolute; top: calc(100% + 12px); left: 50%;
  transform: translate(-50%, 6px);
  width: min(300px, 70cqw);
  background: #fff; border-radius: var(--3idee-radius-mittel); padding: 14px 16px; text-align: left;
  box-shadow: 0 18px 44px rgb(0 0 0 / .34);
  opacity: 0; visibility: hidden; z-index: 5;
  transition: opacity .16s, transform .16s, visibility .16s;
}
.finder-hero .fh2__spot--pop-oben .fh2__pop { top: auto; bottom: calc(100% + 12px); }
.finder-hero .fh2__spot:hover .fh2__pop
.finder-hero .fh2__spot:focus-within .fh2__pop { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.finder-hero .fh2__popbild {
  width: 54px; height: 54px; object-fit: contain; border-radius: 50%;
  background: #fff; border: 1.5px solid var(--fh-linie); padding: 5px;
  float: left; margin: 0 12px 6px 0;
}
.finder-hero .fh2__poptitel { font-size: 14.5px; font-weight: 800; margin: 0 0 5px; color: var(--fh-ink); }
.finder-hero .fh2__poptext { font-size: 13px; line-height: 1.5; color: rgb(31 34 48 / .78); }
.finder-hero .fh2__poptext p { margin: 0; }
.finder-hero .fh2__poplink {
  display: inline-block; clear: both; margin-top: 9px; font-size: 13px; font-weight: 700;
  color: var(--fh-orange); text-decoration: underline; text-underline-offset: 3px;
}

/* Aufbau-Animation. Der Startzustand wird erst von finder-hero.js gesetzt —
   ohne Skript oder bei einem Fehler steht sofort das Endbild da. */
.finder-hero .fh2[data-fh2-anim='bereit'] .fh2__marks g
.finder-hero .fh2[data-fh2-anim='bereit'] .fh2__spot { opacity: 0; }
.finder-hero .fh2[data-fh2-anim='laeuft'] .fh2__marks g
.finder-hero .fh2[data-fh2-anim='laeuft'] .fh2__spot {
  animation: fh2-ploppe .5s ease forwards; animation-delay: var(--fh-d, 0s);
}
.finder-hero .fh2[data-fh2-anim='laeuft'] .fh2__puls {
  animation: fh2-puls 2.6s ease-out infinite; animation-delay: var(--fh-d, 0s);
}
@keyframes fh2-ploppe {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.82); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes fh2-puls {
  0%   { r: 1.9; opacity: .4; }
  70%  { r: 5.4; opacity: 0; }
  100% { opacity: 0; }
}
/* Die Ringe im SVG duerfen nicht verschoben werden — sie stehen ueber cx/cy. */
.finder-hero .fh2[data-fh2-anim='laeuft'] .fh2__marks g { animation-name: fh2-ploppe-svg; }
@keyframes fh2-ploppe-svg { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .finder-hero .fh2[data-fh2-anim] .fh2__marks g,
  .finder-hero .fh2[data-fh2-anim] .fh2__spot { opacity: 1; animation: none !important; }
  .finder-hero .fh2[data-fh2-anim] .fh2__puls { animation: none; }
}

/* ── Handy ──────────────────────────────────────────────────────────────── */
@media (max-width: 749px) {
  /* ── Handy: Bild oben, Eingabe darunter ─────────────────────────────────
     Die Headline bleibt IM Bild, die Eingabe rueckt darunter. Grund: eine
     Suchbox mitten im Foto konkurriert mit dem Motiv, und hochkant wird beides
     eng. Unter dem Bild hat sie Ruhe — bei gleichem Farbschema, weil die
     Buehne selbst dunkel ist und einfach weiterlaeuft.

     Das Bildband ist genau so hoch wie die Einstellung "Hoehe auf dem Handy".
     Der Text liegt als eigene Ebene exakt darueber und schlaegt unten an, wo
     der Verlauf am dunkelsten ist. */
  .finder-hero .fh2 { display: block; min-height: 0; }
  .finder-hero .fh2__rahmen { position: relative; inset: auto; height: var(--fh-band, 19rem); }
  .finder-hero .fh2__copy { position: static; padding: 0; width: auto; max-width: none; }

  .finder-hero .fh2__text {
    position: absolute; top: 0; left: 0; right: 0;
    height: var(--fh-band, 19rem);
    /* Optische Mitte statt an einer Kante angeschlagen.

       Oben geriet die Headline der Kopfzeile ins Gehege, unten der Eingabe —
       sie richtete sich also immer an etwas Fremdem aus. Jetzt richtet sie
       sich an der Bildflaeche selbst aus und hat zu beidem denselben Abstand.

       Nicht exakt mittig, sondern etwas darueber: geometrische Mitte wird als
       "zu tief" gelesen. Ueber einen leichten Ueberhang der unteren
       Innenflaeche gegenueber der oberen — das haelt die Zentrierung
       unabhaengig davon, wie viele Zeilen die Headline am Ende hat. */
    display: flex; flex-direction: column; justify-content: center;
    /* Weniger Luft als zuvor (war 8%/14%): zwischen Kopfzeile und Headline
       stand zu viel Leere. Das Verhaeltnis bleibt — unten mehr als oben,
       damit die optische Mitte stimmt —, nur der Betrag ist kleiner. */
    padding: 5% 5% 8%; max-width: none; text-align: center; z-index: 6;
  }
  .finder-hero .fh2__eingabe {
    /* Naeher ans Bild: der Verlauf laeuft ohnehin in dieselbe Farbe aus, ein
       zusaetzlicher Abstand liest sich als Loch zwischen Bild und Eingabe
       statt als Gliederung. */
    padding: 12px 5% 22px; max-width: none;
  }
  /* Die Theme-Groesse "Ueberschrift 1" hat einen Mindestwert von 48px und liefe
     hier ueber vier Zeilen. Gezielt fuer diesen Bereich begrenzen. */
  .finder-hero .fh2__heading { font-size: clamp(1.75rem, 7.5vw, 2.5rem); line-height: 1.08; }
  /* Untertext faellt weg: er draengt Feld und Knoepfe aus dem Bild, und der
     Hero muss auf dem Handy nur den Anstoss geben. */
  .finder-hero .fh2__sub { display: none; }
  .finder-hero .fh2__bar { flex-wrap: wrap; max-width: none; margin-top: 26px; }
  .finder-hero .fh2__feldbereich { flex: 1 1 100%; }
  .finder-hero .fh2__bar .button { flex: 1 1 100%; border-radius: var(--3idee-radius-mittel); margin: 0 5px 5px; }
  .finder-hero .fh2__actions { justify-content: center; }
  .finder-hero .fh2__actions .button-secondary { width: 100%; }
  /* Hoehe des Bildbands auf dem Handy.

     Frueher liefen hier die Stufen des Themes (klein/mittel/gross). Die sind
     dafuer zu grob: zwischen 240px und 400px liegt nichts, und genau dort
     liegt der brauchbare Bereich. Auf einem iPhone 14 schob das Band bei 400px
     die Eingabe unter die Browserleiste.

     Der Wert steuert NUR das Bild. Beschnitten wird oben und unten um die
     Bildmitte herum (object-fit: cover plus "Bildausschnitt: senkrecht") —
     die Halterung bleibt also mittig, das Band wird nur flacher. */

  /* Ohne Bildpunkte darf das Foto einfach fuellen.

     Der Beschnitt ueber das Motiv existiert nur, damit die Punkte am Bild
     kleben. Auf dem Handy sind sie voreingestellt aus — dort zahlt man den
     Preis ohne den Nutzen: das Motiv waechst hochkant seitlich heraus, und
     vom Foto bleibt ein schmaler Streifen aus der Mitte. Deshalb hier zurueck
     auf einfaches Fuellen: die volle Breite der Szene ist zu sehen,
     beschnitten wird oben und unten, gesteuert ueber "Bildausschnitt".

     Schaltet jemand die Punkte fuer das Handy an, greift diese Regel nicht
     und der Beschnitt kommt zurueck — sonst zeigten die Punkte ins Leere. */
  .finder-hero--punkte-nur-desktop .fh2__pic {
    inset: 0; top: auto; left: auto; translate: none;
    width: 100%; height: 100%; aspect-ratio: auto;
  }

  /* Nur die Punkte, keine Schilder — dafuer ist kein Platz. */
  .finder-hero .fh2__chip { display: none; }
  .finder-hero .fh2__pop { width: min(250px, 62cqw); }
  /* Bildpunkte auf dem Handy aus (umschaltbar im Editor). Hochkant bleibt vom
     Motiv nur das mittlere Drittel: die Punkte ruecken zusammen, geraten in
     die Headline, und ihre Popups sind breiter als die Buehne. */
  .finder-hero--punkte-nur-desktop .fh2__marks,
  .finder-hero--punkte-nur-desktop .fh2__spot { display: none; }

  /* Verlauf von OBEN nach UNTEN, in drei Aufgaben:

       oben   — dunkel, damit die Headline traegt
       Mitte  — hell, damit das Motiv zu sehen ist
       unten  — bis auf die exakte Buehnenfarbe #0d0e13 zulaufend

     Der letzte Teil ist der Punkt: vorher endete der Verlauf bei 35 % und
     stiess dann hart auf die dunkle Flaeche der Eingabe — eine sichtbare
     Kante quer durch den Hero. Jetzt geht das Foto in diese Flaeche ueber,
     Bild und Eingabe lesen sich als ein Block. Der Endwert muss deshalb
     derselbe sein wie der Hintergrund von .fh2; aendert der sich, muss er
     hier mitgeaendert werden. */
  .finder-hero .fh2__scrim {
    background: linear-gradient(
      to bottom,
      rgb(10 11 16 / calc(var(--fh-scrim, .9) * .62)) 0%,
      rgb(10 11 16 / calc(var(--fh-scrim, .9) * .78)) 32%,
      rgb(10 11 16 / calc(var(--fh-scrim, .9) * .45)) 66%,
      rgb(10 11 16 / .45) 88%,
      #0d0e13 100%
    );
  }
}

/* ── Suchzeile im Zustand "Monitor steht fest" ──────────────────────────
   Gleiche Huelle wie das Suchfeld, damit der Wechsel wie derselbe Baustein in
   anderem Zustand wirkt und nicht wie ein fremder Kasten. */
.finder-hero .fh2__wahl {
  display: flex; align-items: center; gap: 12px; max-width: 48rem;
  border: 1.1.5px solid var(--fh-linie); border-radius: var(--3idee-radius-mittel);
  background: rgb(13 14 19 / .34); backdrop-filter: blur(7px);
  padding: 8px 10px 8px 17px; color: #fff;
}
.finder-hero .fh2__wahl[hidden] { display: none; }
.finder-hero .fh2__wahl-icon { flex: 0 0 auto; width: 18px; height: 18px; color: rgb(255 255 255 / .7); }
.finder-hero .fh2__wahl-icon svg { width: 100%; height: 100%; display: block; }
.finder-hero .fh2__wahl-text { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.finder-hero .fh2__wahl-text b { font-size: 16px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.finder-hero .fh2__wahl-mehr { font-size: 13px; color: rgb(255 255 255 / .6); white-space: nowrap; }
.finder-hero .fh2__wahl .button {
  --button-background-color: #fff;
  --button-color: var(--fh-orange);
  --button-border-color: var(--fh-linie);
  --button-border-width: 1px;
  border-radius: var(--3idee-radius-mittel); flex: 0 0 auto; cursor: pointer; white-space: nowrap;
}
.finder-hero .fh2__wahl-neu {
  flex: 0 0 auto; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 13.5px; color: rgb(255 255 255 / .66);
  text-decoration: underline; text-underline-offset: 3px; white-space: nowrap;
}
.finder-hero .fh2__wahl-neu:hover { color: #fff; }
@media screen and (max-width: 749px) {
  .finder-hero .fh2__wahl { flex-wrap: wrap; max-width: none; gap: 8px 10px; padding: 10px 12px; }
  /* Modell bleibt NEBEN dem Symbol: eine eigene Reihe machte aus der Zeile
     einen vierzeiligen Kasten, obwohl Symbol und Name zusammengehoeren.
     Umbrechen duerfen nur Schaltflaeche und "Neu starten" darunter. */
  .finder-hero .fh2__wahl-text { flex: 1 1 auto; min-width: 0; }
  .finder-hero .fh2__wahl .button { flex: 1 1 100%; }
  .finder-hero .fh2__wahl-neu { flex: 1 1 100%; text-align: center; padding-top: 2px; }
}
/* END_SECTION:finder-hero */

/* START_SECTION:finder-solution-examples (INDEX:16) */
@media (max-width: 749px) {
  .finder-solution-examples-section.spacing-style { padding-inline: var(--page-margin, 16px) !important; }
}
.fse { color: var(--color-foreground); --fse-line: rgb(var(--color-foreground-rgb) / .12); --fse-muted: rgb(var(--color-foreground-rgb) / .55); --fse-soft: rgb(var(--color-foreground-rgb) / .03); --fse-ink: #1F2230; --fse-orange: var(--3idee-muted); }
.fse *, .fse *::before, .fse *::after { box-sizing: border-box; }
.fse-head { margin-bottom: 16px; }
.fse-eyebrow { font-size: 12px; letter-spacing: .09em; text-transform: uppercase; font-weight: 800; color: var(--fse-orange); }
.fse-head h2 { font-size: 30px; line-height: 1.1; letter-spacing: -.035em; margin: 5px 0 0; }
.fse-head p { font-size: 13px; color: var(--fse-muted); margin: 6px 0 0; max-width: 740px; }
.fse-grid { display: grid; grid-template-columns: repeat(var(--fse-cols, 3), 1fr); gap: 12px; }
@media (max-width: 900px) { .fse-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .fse-grid { grid-template-columns: 1fr; } }
.fse-card { display: flex; flex-direction: column; border: 1px solid var(--fse-line); border-radius: var(--3idee-radius-mittel); background: var(--color-background, #fff); overflow: hidden; }
.fse-card:hover { box-shadow: 0 6px 24px rgb(var(--color-foreground-rgb) / .07); }
.fse-media { display: block; aspect-ratio: 4/3; background: var(--fse-soft); border-bottom: 1px solid var(--fse-line); }
.fse-media img { width: 100%; height: 100%; object-fit: contain; padding: 14px; }
.fse-ph { width: 100%; height: 100%; }
.fse-body { padding: 15px; display: flex; flex-direction: column; flex: 1; gap: 6px; }
.fse-label { font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: var(--fse-muted); font-weight: 850; }
.fse-body h3 { font-size: 18px; margin: 2px 0; letter-spacing: -.01em; }
.fse-body h3 a { color: inherit; text-decoration: none; }
.fse-body h3 a:hover { text-decoration: underline; }
.fse-body p { font-size: 11px; color: var(--fse-muted); margin: 0; }
.fse-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding-top: 10px; }
.fse-price { font-size: 18px; font-weight: 900; }
.fse-btn { display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border-radius: var(--fse-btn-radius, var(--3idee-radius-klein)); font-weight: 800; font-size: 12px; border: 1px solid var(--fse-ink); color: var(--fse-ink); background: var(--color-background, #fff); text-decoration: none; }
.fse-btn:hover { background: var(--fse-ink); color: #fff; }
/* END_SECTION:finder-solution-examples */

/* START_SECTION:finder-trust (INDEX:17) */
.finder-trust { color: var(--color-foreground); }
@media (max-width: 749px) {
  .finder-trust.section--page-width > * { grid-column: 1 / -1; }
  .finder-trust.spacing-style { padding-inline: var(--page-margin, 16px) !important; }
}
.finder-trust__grid {
  display: grid;
  grid-template-columns: repeat(var(--ft-cols, 4), 1fr);
  border: 1px solid rgb(var(--color-foreground-rgb) / 0.12);
  border-radius: var(--3idee-radius-mittel);
  overflow: hidden;
}
.finder-trust__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 16px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  color: rgb(var(--color-foreground-rgb) / 0.8);
}
.finder-trust__item + .finder-trust__item { border-left: 1px solid rgb(var(--color-foreground-rgb) / 0.12); }
.finder-trust__check { color: var(--ft-orange); flex: 0 0 auto; }

@media screen and (max-width: 749px) {
  .finder-trust__grid { grid-template-columns: 1fr 1fr; }
  .finder-trust__item { border-left: 0 !important; border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.12); }
  .finder-trust__item:nth-child(-n+2) { border-top: 0; }
}
/* END_SECTION:finder-trust */

/* START_SECTION:footer-utilities (INDEX:18) */
.utilities {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap);
    text-wrap: nowrap;
    border-top: var(--border-width) solid var(--divider-color, var(--color-border));
    color: var(--color-foreground-muted);

    @media screen and (min-width: 750px) {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      justify-content: center;
      gap: var(--gap);
      align-items: center;
      text-align: left;
    }
  }

  .utilities a,
  .utilities button {
    color: var(--color-utilities, var(--color-foreground-muted));
  }

  .utilities > * {
    text-align: center;

    @media screen and (min-width: 750px) {
      text-align: left;
      justify-self: start;
    }
  }

  /* Dynamic positioning based on number of blocks */
  @media screen and (min-width: 750px) {
    /* 1 block: Single column, left aligned */
    .utilities--blocks-1 {
      grid-template-columns: 1fr;
      justify-content: start;
    }

    .utilities--blocks-1 > * {
      justify-self: start;
      text-align: left;
    }

    /* 2 blocks: Two equal columns, start and end aligned */
    .utilities--blocks-2 {
      grid-template-columns: 1fr 1fr;
    }

    .utilities--blocks-2 > *:nth-child(2) {
      justify-self: end;
      text-align: right;
    }

    /* 3 blocks: Three columns (1fr auto 1fr), start/center/end aligned */
    .utilities--blocks-3 {
      grid-template-columns: 1fr auto 1fr;
    }

    .utilities--blocks-3 > *:nth-child(2) {
      justify-self: center;
      text-align: center;
    }

    .utilities--blocks-3 > *:nth-child(3) {
      justify-self: end;
      text-align: right;
    }
  }
/* END_SECTION:footer-utilities */

/* START_SECTION:footer (INDEX:19) */
.footer-content {
    contain: content;
    content-visibility: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--footer-gap);
    align-items: start;
  }

  .footer-content .menu__heading__default {
    font-weight: var(--font-heading--weight);
  }

  @media screen and (min-width: 750px) and (max-width: 989px) {
    .footer-content {
      grid-template-columns: repeat(min(var(--grid-columns), 3), 1fr);
      grid-auto-flow: row;
    }

    .footer-content[style*='--grid-columns: 4'] {
      grid-template-columns: repeat(2, 1fr);
    }

    .footer-content--isolated-grid-item-tablet > :last-child {
      grid-column: 1 / -1;
    }
  }

  @media screen and (min-width: 990px) {
    .footer-content {
      grid-template-columns: repeat(var(--grid-columns), 1fr);
    }

    /* Single item centered */
    .footer-content[style*='--grid-columns: 1'] {
      justify-items: center;
    }

    .footer-content--isolated-grid-item-desktop > :last-child {
      grid-column: 1 / -1;
    }
  }
/* END_SECTION:footer */

/* START_SECTION:header-announcements (INDEX:21) */
.announcement-bar {
    border-block-end: var(--border-bottom-width) solid var(--color-border);
  }

  .announcement-bar__slider {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;

    @media screen and (max-width: 749px) {
      grid-column: 1 / -1;
    }
  }

  .announcement-bar__slides {
    display: grid;
    grid: [stack] auto / [stack] auto;
    width: calc(100% - var(--button-size) * 2);
    max-width: 680px;
    margin-inline: auto;
  }

  .announcement-bar__slides > * {
    grid-area: stack;
  }

  .announcement-bar__slide {
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    content-visibility: visible;

    &[aria-hidden='true'] {
      opacity: 0;
      visibility: hidden;
    }
  }

  .announcement-bar__slider slideshow-arrows {
    padding: 0;
    mix-blend-mode: normal;
  }

  .announcement-bar__slider slideshow-arrows .slideshow-control {
    color: var(--color-foreground);
  }

  .announcement-bar__slider .slideshow-control {
    display: flex;
    padding: 0;
    width: var(--button-size);
    height: var(--button-size);
    align-items: center;
    justify-content: center;
    opacity: 1;
    animation: none;

    @media screen and (min-width: 750px) {
      --slideshow-control-offset: calc((var(--button-size) - var(--icon-size-xs)) / 2);

      .section--page-width &.slideshow-control--previous {
        transform: translateX(var(--slideshow-control-offset));
      }
    }
  }

  .announcement-bar__slider .slideshow-control .svg-wrapper {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .announcement-bar__slide {
    place-content: center;
  }

  .announcement-bar__text:first-child {
    margin: 0;
  }

  .announcement-bar__link {
    position: absolute;
    inset: 0;
  }
/* END_SECTION:header-announcements */

/* START_SECTION:header (INDEX:22) */
body {
    --header-height: 60px;
    --header-group-height: var(--header-height);
    --transparent-header-offset-boolean: 0; /* stylelint-disable-line declaration-property-value-disallowed-list */
  }

  .header {
    /* Set header paddings based on height setting */
    --header-padding: var(--padding-sm);
    --font-paragraph--line-height: 1;
    --header-content-transition-timing: 0s;

    display: block;
    contain: layout style;
    background: transparent;

    a,
    .button,
    .button-secondary,
    .header-actions__action {
      /* reset style from base.css */
      transition: color var(--header-content-transition-timing), border-color var(--header-content-transition-timing);
    }
  }

  #header-component :is(.header-menu, .dropdown-localization) {
    display: none;
  }

  @media screen and (min-width: 750px) {
    #header-component[data-menu-style='menu'] :is(.header-menu, .dropdown-localization) {
      display: flex;
    }
  }

  #header-component[data-menu-style='drawer'] .header__column {
    display: contents;
  }

  @media screen and (min-width: 750px) {
    #header-component[data-menu-style='menu'] .header__navigation-bar-row {
      display: none;
    }
  }

  .header[transparent] {
    --language-button-background-color: transparent;
    --language-button-border-color: transparent;
    --header-content-transition-timing: calc(var(--submenu-animation-speed) - var(--animation-speed-fast))
      var(--animation-speed-fast) var(--ease-out-cubic);

    --closed-underlay-height: 0px;

    /* used to display the appropriate logo based on transparency state */
    --header-logo-display: none;
    --header-logo-inverse-display: block;

    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    z-index: var(--layer-overlay);

    /* Zweite Zeile galt bis 12.08.2026 nur fuer Menuepunkte OHNE Dropdown
       (:not([aria-haspopup])). Bei Punkten MIT Dropdown kam die weisse Flaeche
       ausschliesslich ueber --full-open-header-height, also erst, wenn das
       Menue-Skript geladen ist und den Wert setzt. Die dunkle Schrift schaltet
       dagegen schon das CSS beim Beruehren. Nach einem harten Neuladen steht
       genau dazwischen ein Fenster: Zeiger auf dem Menuepunkt, Schrift dunkel,
       Flaeche noch nicht da — dunkel auf durchsichtig, unlesbar. Die Ausnahme
       ist deshalb weg: beruehrt heisst weisse Flaeche, mit oder ohne Dropdown.
       Ist eins offen, liegt die aufgeklappte Flaeche in derselben Farbe darauf,
       sichtbar aendert sich dabei nichts. */
    &[transparent='not-sticky'][data-sticky-state='active'],
    &:has(.menu-list__link:hover) {
      --header-logo-display: unset;
      --header-logo-inverse-display: unset;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --closed-underlay-height: 100%;
    }

    /** For transparent header, apply transparent text color to rows when menu is not hovered */
    &:not([data-sticky-state='active']):not(:has(.menu-list__link:is(:hover, [aria-expanded='true']))) .header__row {
      --color-foreground: var(--color-transparent-text);
      --color-foreground-rgb: var(--color-transparent-text-rgb);
      --color-border: var(--color-transparent-text);
      --color-border-rgb: var(--color-transparent-text-rgb);
      --color-primary-button-background: var(--color-transparent-text);
      --color-primary-button-text: var(--color-transparent-text-contrast);
    }

    /* Swap the cart bubble in transparent state only when using the default
       style. Custom bubble colors apply unchanged across header states. */
    &[data-bubble-style='default']:not([data-sticky-state='active']):not(
        :has(.menu-list__link:is(:hover, [aria-expanded='true']))
      )
      .header__row {
      --cart-bubble-background: var(--color-transparent-text, var(--cart-bubble-background-fallback));
      --cart-bubble-text: var(--color-transparent-text-contrast, var(--cart-bubble-text-fallback));
    }

    /* Multiple selectors for performance: each simple :has() check is faster than one complex selector with multiple conditions */
    &:has(.mega-menu__list:hover),
    &:has(.menu-list__link:is(:hover, [aria-expanded='true'])),
    &:has(.menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'])) {
      --header-logo-display: unset;
      --header-logo-inverse-display: unset;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --header-content-transition-timing: var(--submenu-animation-speed) var(--ease-out-cubic);
    }
  }

  /* When top row has transparent background, make it inherit colors from header component */
  [data-transparent-background='top']:hover .header__row--top,
  [data-transparent-background='top']:focus-within .header__row--top,
  [data-transparent-background='both']:hover .header__row--top,
  [data-transparent-background='both']:focus-within .header__row--top {
    --color-foreground: inherit;
    --color-foreground-rgb: inherit;
    --color-border: inherit;
    --color-border-rgb: inherit;
    --color-primary-button-background: inherit;
    --color-primary-button-text: inherit;
  }

  /* When bottom row has transparent background, make it inherit colors from header component */
  [data-transparent-background='bottom']:hover .header__row--bottom,
  [data-transparent-background='bottom']:focus-within .header__row--bottom,
  [data-transparent-background='both']:hover .header__row--bottom,
  [data-transparent-background='both']:focus-within .header__row--bottom {
    --color-foreground: inherit;
    --color-foreground-rgb: inherit;
    --color-border: inherit;
    --color-border-rgb: inherit;
    --color-primary-button-background: inherit;
    --color-primary-button-text: inherit;
  }

  .header-section {
    position: relative;
    z-index: var(--layer-menu-drawer);
  }

  /* need default values for non-flash transitions on first overflow menu open */
  #header-component {
    --submenu-height: 0px;
    --full-open-header-height: 0px;
  }

  #header-group:has(#header-component[sticky]) {
    display: contents;
  }

  .header-section:has(> #header-component[sticky='always']),
  .header-section:has(> #header-component[sticky='scroll-up'][data-sticky-state='active']) {
    position: sticky;

    /* Use -1 instead of 0 so intersection observer can track sticky state */
    top: -1px;
    z-index: var(--layer-menu-drawer);
  }

  .header[data-sticky-state] {
    transition: opacity var(--animation-speed) var(--animation-easing);
    opacity: 1;
  }

  .header[data-sticky-state='active'] {
    view-transition-name: sticky-header;
  }

  :active-view-transition-type(empty-cart-drawer) {
    .header[data-sticky-state='active'] {
      view-transition-name: none;
    }
  }

  .header[data-sticky-state='idle'] {
    opacity: 0;
  }

  /* ================================
     * Underlays
     * ================================ */
  .header__underlay {
    position: absolute;
    inset: 0;
  }

  .header__underlay-closed {
    height: var(--closed-underlay-height, 100%);
    z-index: var(--layer-lowest);
    background: linear-gradient(
      var(--color-background-top-row) 0 var(--top-row-height),
      var(--color-background-bottom-row) var(--top-row-height) var(--header-height)
    );
    transition: height var(--animation-speed-slow) var(--ease-out-cubic);
  }

  .header__underlay-open {
    height: var(--full-open-header-height);
    background: linear-gradient(
      var(--color-background-top-row) 0 var(--top-row-height),
      var(--color-background-bottom-row) var(--top-row-height) var(--header-height),
      var(--color-submenu) var(--header-height) 100%
    );
    /* header-height is updated via js, the transition works automagically */
    transition: height var(--submenu-animation-speed) var(--ease-out-cubic);
  }

  .header__underlay-open::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: var(--shadow-popover);
    clip-path: inset(var(--header-height) 0 -100px 0); /* stylelint-disable-line */
    transition: height var(--submenu-animation-speed) var(--ease-out-cubic);
  }

  /* When top row has transparent background, swap underlay to merchant's chosen color at full opacity */
  [data-transparent-background='top']:hover,
  [data-transparent-background='top']:focus-within,
  [data-transparent-background='both']:hover,
  [data-transparent-background='both']:focus-within {
    :is(.header__underlay-open, .header__underlay-closed) {
      --color-background-top-row: var(--color-background);
    }
  }

  /* When bottom row has transparent background, swap underlay to merchant's chosen color at full opacity */
  [data-transparent-background='bottom']:hover,
  [data-transparent-background='bottom']:focus-within,
  [data-transparent-background='both']:hover,
  [data-transparent-background='both']:focus-within {
    :is(.header__underlay-open, .header__underlay-closed) {
      --color-background-bottom-row: var(--color-background);
    }
  }

  [data-submenu-overlap-bottom-row] {
    .header__underlay-open {
      background: linear-gradient(
        var(--color-background-top-row) 0 var(--top-row-height),
        var(--color-submenu) var(--top-row-height) 100%
      );
    }

    .header__row--bottom {
      z-index: var(--layer-lowest);
    }
  }

  /* End Underlays ================ */

  /* ================================
     * Schwebende Box im Ausgangszustand - NUR AUF DESKTOP
     *
     * Solange der Header oben ueber dem Inhalt liegt (transparenter Header, noch
     * nicht festgescrollt), bekommt die obere Zeile eine abgerundete Box mit
     * Milchglas-Effekt. Sobald der Header festklebt oder ein Menue geoeffnet wird,
     * blendet die Box aus und die gewohnte Leiste uebernimmt.
     *
     * Rein zusaetzlich: die Box ist eine absolut gesetzte Hintergrundebene und
     * veraendert weder Hoehe noch Position des Headers - es gibt also keinen
     * Sprung beim Umschalten.
     *
     * Auf Handybreite gibt es die Box NICHT - dort steht die Kopfzeile als
     * deckende Leiste ueber dem Hero, siehe den Abschnitt direkt darunter.
     * Deshalb liegt der ganze Block hinter einer Desktop-Bedingung: die Box
     * richtet auch die Menueflaechen aus, und die sollen mobil ueber die volle
     * Breite laufen.
     * ================================ */
  @media screen and (min-width: 750px) {
    .header[transparent='not-sticky'] {
      /* Wie weit die Box ueber den Inhalt hinausragt (Innenabstand der Box) */
      --floating-header-bleed: 24px;
      /* Abstand der Box zur Ober- und Unterkante der Kopfzeile */
      --floating-header-inset-block: 6px;
      --floating-header-radius: 4px;

      /* Breite der Randspalte, in der der Seiteninhalt NICHT liegt. Gleiche Rechnung
         wie --util-page-margin-offset im Basis-Stylesheet, hier aber auf Header-Ebene,
         damit sich auch die Menueflaechen daran ausrichten koennen. */
      --floating-header-gutter: max(
        var(--page-margin),
        calc((100% - min(var(--page-content-width), 100% - var(--page-margin) * 2)) / 2)
      );
      --floating-header-inset-inline: max(8px, calc(var(--floating-header-gutter) - var(--floating-header-bleed)));
    }

    /* Geoeffnetes Menue bleibt in den Grenzen der Box - aber NUR solange der Header
       oben schwebt. Das Theme zieht dafuer zwei Flaechen auf: eine fuer einfache
       Links (volle Kopfzeilenhoehe) und eine fuer aufklappende Menues (waechst nach
       unten). Beide bekommen denselben Seitenabstand und dieselbe Rundung wie die
       Box, damit sich die Box nach unten oeffnet statt auf volle Breite zu springen.

       Sobald der Header festgescrollt ist, gilt das nicht mehr: dann ist er die
       gewohnte Leiste ueber die volle Breite, und die Menues sollen das auch sein. */
    .header[transparent='not-sticky']:not([data-sticky-state='active'])
      :is(.header__underlay-closed, .header__underlay-open) {
      inset-inline: var(--floating-header-inset-inline);
      inset-block-start: var(--floating-header-inset-block);
      border-radius: var(--floating-header-radius);
    }

    .header[transparent='not-sticky']:not([data-sticky-state='active']) .header__underlay-open::after {
      border-radius: inherit;
    }

    .header[transparent='not-sticky'] .header__row--top::before {
      content: '';
      position: absolute;
      z-index: var(--layer-lowest);
      inset-block: var(--floating-header-inset-block);
      /* An der Textspalte ausgerichtet, nicht am Fensterrand - dadurch sitzt die
         Box bei jeder Fensterbreite gleich weit um Logo, Menue und Warenkorb herum. */
      inset-inline: var(--floating-header-inset-inline);
      border: 1px solid rgb(var(--color-transparent-text-rgb, 255 255 255) / 0.22);
      border-radius: var(--floating-header-radius);
      background-color: rgb(var(--color-transparent-text-rgb, 255 255 255) / 0.12);
      -webkit-backdrop-filter: blur(16px) saturate(140%);
      backdrop-filter: blur(16px) saturate(140%);
      box-shadow: 0 8px 32px rgb(0 0 0 / 0.12);
      opacity: 1;
      pointer-events: none;
      transition: opacity var(--animation-speed) var(--animation-easing);
    }

    /* Box ausblenden, sobald der Header festgescrollt ist oder ein Menue offen ist -
       in beiden Faellen zeigt das Theme ohnehin die deckende Leiste. */
    .header[transparent='not-sticky'][data-sticky-state='active'] .header__row--top::before,
    .header[transparent='not-sticky']:has(.menu-list__link:is(:hover, [aria-expanded='true']))
      .header__row--top::before,
    .header[transparent='not-sticky']:has(.mega-menu__list:hover) .header__row--top::before {
      opacity: 0;
    }

    @media (prefers-reduced-motion: reduce) {
      .header[transparent='not-sticky'] .header__row--top::before {
        transition: none;
      }
    }
  }

  /* ================================
     * Mobil: deckende Leiste UEBER dem Hero
     *
     * Auf Handybreite liegt die Kopfzeile nicht im Bild, sondern steht als eigene
     * deckende Leiste darueber - so wie die Ankuendigungsleiste. Das Bild beginnt
     * erst darunter.
     *
     * Grund: Auf Handybreite bleibt vom Motiv so wenig uebrig, dass die Kopfzeile
     * darauf immer mit ihm konkurriert - egal ob als Box, als Verlauf oder blank.
     *
     * Auf Desktop bleibt alles unveraendert: schwebende Box auf dem Bild, und
     * beim Scrollen die deckende Leiste.
     * ================================ */
  @media screen and (max-width: 749px) {
    .header[transparent] {
      /* Zurueck in den Seitenfluss: die Kopfzeile beansprucht ihre eigene Hoehe,
         statt ueber dem Inhalt zu liegen. Das Theme rechnet die Hoehe der
         Kopfzeilen-Gruppe aus dem Fluss zusammen - damit stimmt auch die Hoehe
         des Heros ohne weitere Korrektur. */
      position: relative;

      /* Deckend von Anfang an, nicht erst beim Scrollen. */
      --closed-underlay-height: 100%;
    }

    /* Schrift, Rahmen und Knopffarben zurueck auf die normalen Werte. Die Farbe
       fuer "ueber dem Bild" ist weiss und waere auf der weissen Leiste nicht zu
       sehen. */
    .header[transparent]:not([data-sticky-state='active']):not(
        :has(.menu-list__link:is(:hover, [aria-expanded='true']))
      )
      .header__row {
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --color-primary-button-background: inherit;
      --color-primary-button-text: inherit;
    }

    /* Der erste Abschnitt der Seite wird nicht mehr unter die Kopfzeile gezogen
       (Regel dazu steht im Basis-Stylesheet) ... */
    body:has(.header[transparent]) main.content-for-layout > .shopify-section:first-child {
      margin-top: 0;
    }

    /* ... und muss oben auch keinen Platz mehr fuer sie freihalten. */
    body main > .shopify-section:first-child .section.spacing-style,
    body main > .shopify-section:first-child .section .spacing-style {
      --section-top-offset: 0px;
    }
  }

  .header__row {
    /* The account component uses a different background color, but we need to override it to inherit the color of the header row */
    --color-account-icon: var(--color-foreground);

    position: relative;

    /* Overwrite color from section settings, background is controlled by the underlays */
    /* stylelint-disable-next-line declaration-no-important */
    background-color: transparent !important;

    &:has(.mega-menu__list:hover),
    &:has(.menu-list__link[aria-haspopup]:is(:hover, [aria-expanded='true'])),
    &:has(.menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'])) {
      /* Only elevate the row when the submenu is open to avoid overlapping other elevated content */
      z-index: var(--layer-heightened);
    }
  }

  .header__row--top:not(.divider--page-width),
  .header__row--top.divider--page-width .header__columns,
  .header__row--bottom {
    border-bottom: var(--border-bottom-width) solid var(--border-bottom-color, var(--color-border));
  }

  @media screen and (max-width: 749px) {
    .header__row--top:not(.divider--page-width),
    .header__row--top.divider--page-width .header__columns {
      border-bottom-width: var(--border-bottom-width-mobile);
      border-bottom-color: var(--border-bottom-color-mobile);
    }
  }

  #header-component[data-menu-style='drawer'] .header__row--top:not(.divider--page-width),
  #header-component[data-menu-style='drawer'] .header__row--top.divider--page-width .header__columns {
    border-bottom-width: var(--border-bottom-width-mobile);
    border-bottom-color: var(--border-bottom-color-mobile);
  }

  .header__row.divider--page-width:not(.section--page-width) .header__columns {
    @media screen and (min-width: 750px) {
      padding-inline-start: 0;
      padding-inline-end: 0;
      margin-inline-start: var(--page-margin);
      margin-inline-end: var(--page-margin);
    }
  }

  .header__column {
    display: flex;
    align-items: center;

    /* on mobile, header__column nodes are ignored to create a new grid-template-area based on all visible content */
    @media screen and (max-width: 749px) {
      display: contents;
    }
  }

  .header__column--left,
  .header__column--center {
    gap: var(--gap-xl);
    grid-area: left;
  }

  .header__column--center {
    justify-content: center;
    grid-area: center;

    header-menu:only-child .overflow-menu::part(list) {
      justify-content: center;
    }
  }

  .header__column--right {
    gap: var(--gap-xl);
    justify-content: flex-end;
    grid-area: right;

    .overflow-menu::part(list) {
      justify-content: flex-end;
    }
  }

  .header__columns {
    /* Three column layout */
    --header-left: 1fr;
    --header-center: auto;
    --header-right: 1fr;
    --header-template-columns: var(--header-left) var(--header-center) var(--header-right);

    /* Mobile layout */
    --header-mobile-bookend: 44px;

    display: grid;
    grid-template-areas: 'left center right';
    grid-gap: var(--gap-xl);
    grid-template-columns: var(--header-template-columns);

    /* If menu is in center column */
    &:has(.header__column--center header-menu) {
      --header-center: auto;
      --header-left: minmax(max-content, 1fr);
      --header-right: minmax(max-content, 1fr);
    }

    /* If there is no center column, make the column the menu is in grow eagerly */
    &:where(:not(:has(.header__column--center))) {
      @media screen and (min-width: 750px) {
        --header-template-columns: var(--header-left) var(--header-right);

        grid-template-areas: 'left right';
      }

      /* If the header-menu is in the right column */
      &:has(.header__column--right header-menu) {
        --header-right: auto;
        --header-left: minmax(max-content, 1fr);
      }

      /* If the header-menu is in the left column */
      &:has(.header__column--left header-menu) {
        --header-left: auto;
        --header-right: minmax(max-content, 1fr);
      }
    }

    @media screen and (max-width: 749px) {
      --header-template-columns: var(--header-mobile-bookend) var(--header-mobile-bookend) 1fr
        var(--header-mobile-bookend) var(--header-mobile-bookend);

      grid-template-areas: 'leftA leftB center rightA rightB';
      grid-column: span 3;
      column-gap: 0;
      align-items: center;
      padding-block: 0;
      padding-inline: 0 var(--padding-3xs);

      .header-logo {
        grid-area: center;
      }

      &:not(:has(header-actions)) .search-action {
        grid-area: leftB;
      }

      &:not(:has(shopify-account)) .search-action {
        grid-area: rightA;
      }

      .search-action {
        grid-area: leftB;
      }

      header-actions {
        grid-area: rightB;
      }
    }
  }

  /* not ideal but we need to duplicate these styles for when touch comes into play
    We could avoid the duplication using js to set the data-menu-style attribute on small screens instead of using @media queries */
  #header-component[data-menu-style='drawer'] .header__columns {
    --header-template-columns: var(--header-mobile-bookend) var(--header-mobile-bookend) 1fr
      var(--header-mobile-bookend) var(--header-mobile-bookend);

    grid-template-areas: 'leftA leftB center rightA rightB';
    grid-column: span 3;
    column-gap: 0;
    align-items: center;
    padding-block: 0;
    padding-inline: 0 var(--padding-3xs);

    .header-logo {
      grid-area: center;
    }

    &:not(:has(header-actions)) .search-action {
      grid-area: leftB;
    }

    &:not(:has(shopify-account)) .search-action {
      grid-area: rightA;
    }

    .search-action {
      grid-area: leftB;
    }

    header-actions {
      grid-area: rightB;
    }
  }

  /* Single column layout if there are no columns within */
  .header__columns:not(:has(.header__column)) {
    grid-template-columns: 1fr;
  }

  /* Check for hover support to avoid unnecessary expensive recalculations when tapping on mobile */
  @media (hover: hover) {
    /* Column-specific dimming effect when any interactive element is hovered
        Multiple selectors for performance: each simple :has() check is faster than one complex selector with multiple conditions */
    .header__column:has(header-menu:hover),
    .header__column:has(.header-actions__action:hover),
    .header__column:has(.header__icon--menu:hover) {
      header-menu:not(:hover),
      .header-actions__action:not(:hover),
      .header__icon--menu:not(:hover) {
        opacity: var(--opacity-subdued-text);
        transition: opacity var(--animation-speed) var(--animation-easing);
      }
    }
  }

  /* Ensure smooth transitions for all interactive elements */
  header-menu,
  .header-actions__action,
  .header__icon--menu {
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  /* Header action button styles */
  .header-actions__action {
    --button-color: var(--color-foreground);
    color: var(--button-color);
    cursor: pointer;
    display: flex;
    justify-content: center;

    &:hover {
      --button-color: var(--color-foreground);
    }
  }

  .header-actions__action:not(.account-button) .svg-wrapper {
    height: var(--button-size);
    width: var(--button-size);
  }

  .header-actions__action:not(.account-button) svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .header:has(#Details-menu-drawer-container[open]) {
    contain: style;
  }

  .header.header--compact {
    --header-padding: var(--padding-2xs);
  }

  .header__columns {
    --padding-block-start: var(--header-padding);
    --padding-block-end: var(--header-padding);
  }

  .header:not(.header--compact) .header__row--bottom {
    --header-padding: var(--padding-xs);
  }

  .header--collapse-row-paddings {
    .header__row--top .header__columns {
      --padding-block-end: 0px;
    }

    .header__row--bottom .header__columns {
      --padding-block-start: 0px;
    }
  }

  /* When the header is transparent, add a margin to a potential header-section below it */
  .header-section:has(.header[transparent]) + .shopify-section {
    margin-top: var(--header-height);
  }

  /* Optimize layout performance for hidden menus */
  .header-menu .menu-list__submenu {
    content-visibility: auto;
    contain-intrinsic-size: 0px 500px;
  }

  /* Force visibility when open/animating and in overflow submenu to prevent layout issues */
  .header-menu details[open] .menu-list__submenu,
  .header-menu .menu-list__submenu[data-active],
  .header-menu .menu-list__list-item[slot='overflow'] .menu-list__submenu {
    content-visibility: visible;
  }

  /* Dropdown Localization Styles */
  .dropdown-localization__button {
    display: flex;
    position: relative;
    align-items: center;
    gap: 4px;
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
    font-weight: var(--menu-top-level-font-weight);
    padding-inline: var(--padding-2xs);
    margin-inline: calc(-1 * var(--padding-2xs));
  }

  .dropdown-localization__button .svg-wrapper.icon-caret {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    right: var(--margin-xs);
    top: calc(50% - var(--padding-2xs));
    flex-shrink: 0;
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .dropdown-localization__button .icon-flag {
    width: var(--menu-localization-font-size, var(--icon-size-sm));
    height: var(--menu-localization-font-size, var(--icon-size-sm));
    clip-path: circle(50%); /* stylelint-disable-line */
    background-position: center;
    background-size: cover;
    margin-inline-end: 4px;
    position: relative;
  }

  .dropdown-localization__button .icon-flag::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 var(--size-shadow) var(--color-shadow);
    border-radius: 50%;
  }

  .dropdown-localization__button[aria-expanded='true'] .icon-caret svg {
    transform: rotate(180deg);
  }

  .dropdown-localization__button,
  .dropdown-localization__button:hover {
    box-shadow: none;
    background-color: transparent;
    border-color: transparent;
  }

  dropdown-localization-component .localization-form__list {
    max-height: 20.5rem;
  }

  .localization-wrapper {
    position: fixed;
    z-index: var(--layer-raised);
    border-radius: var(--style-border-radius-popover);
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    translate: 0 20px;
    opacity: 0;
  }

  .localization-wrapper:not([hidden]) {
    translate: 0 0;
    opacity: 1;
  }

  @starting-style {
    .localization-wrapper:not([hidden]) {
      translate: 0 20px;
      opacity: 0;
    }
  }

  dropdown-localization-component {
    position: relative;
    background-color: transparent;
  }

  dropdown-localization-component .country-filter {
    position: relative;
    padding: 8px;
  }

  dropdown-localization-component .country-filter__input {
    border: none;
  }

  dropdown-localization-component .localization-form__list-item {
    margin-inline: 8px;
  }

  dropdown-localization-component .localization-wrapper {
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    background-color: var(--color-background);
    max-height: 27.5rem;
    position: absolute;
    top: calc(100% + 10px);
    z-index: calc(var(--layer-header-menu) + 1);
  }

  dropdown-localization-component .localization-wrapper.right-bound {
    right: 0;
    left: unset;
  }

  dropdown-localization-component .localization-wrapper.left-bound {
    left: -8px;
    right: unset;
  }

  /* Additional specificity due to dropdown-localization-component getting a low score */
  dropdown-localization-component .language-selector.language-selector {
    padding: 10px 8px 10px 16px;
  }

  dropdown-localization-component .localization-form__currency {
    width: max-content;
    opacity: 0;
    visibility: hidden;
    transition: none;
  }

  dropdown-localization-component .localization-form__select:hover {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
  }

  dropdown-localization-component
    :is(
      .localization-form__list-item:hover,
      .localization-form__list-item[aria-selected='true'],
      .localization-form__list-item[aria-current='true']
    )
    .localization-form__currency {
    opacity: 1;
    color: var(--color-foreground-muted);
    transition: opacity var(--animation-speed-slow) var(--animation-easing);
    visibility: visible;
  }

  .dropdown-localization .language-selector:where(:not(.top-shadow)) {
    font-weight: var(--menu-top-level-font-weight);
  }

  .dropdown-localization:not(dropdown-localization-component) .language-selector {
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
  }
/* END_SECTION:header */

/* START_SECTION:hero (INDEX:23) */
.hero-wrapper {
    --hero-height-offset: 0px;
  }

  /* Being extra specific in the selector for performance reasons */
  body:has(#header-group > .header-section > #header-component) .hero-wrapper:first-child {
    --hero-height-offset: var(--header-group-height, 0);
  }

  .hero {
    position: relative;
    min-height: calc(var(--hero-min-height) - var(--hero-height-offset));
  }

  /* ----------------------------------------------------------------
     Mobil: Ueberschrift im Hero begrenzen

     Die Voreinstellung "H1" hat einen Mindestwert von 48px. Der ist nicht
     direkt einstellbar - das Theme leitet ihn automatisch aus der
     naechstkleineren Ueberschriftgroesse ab. Auf schmalen Geraeten waeren
     rechnerisch rund 28px dran, der Mindestwert verhindert das aber, und
     das Groessenfeld am Textblock kann ihn nicht unterschreiten.

     Deshalb hier gezielt fuer den Hero begrenzt. Nur diese eine Zahl
     aendern, wenn die Ueberschrift groesser oder kleiner werden soll -
     die Typografie aller anderen Bereiche bleibt unveraendert.
     ---------------------------------------------------------------- */
  @media screen and (max-width: 749px) {
    .hero .text-block.h1 > *,
    .hero .text-block.h1 :is(h1, h2, h3, h4, h5, h6) {
      font-size: clamp(1.75rem, 8vw, 3rem);
    }
  }

  .hero[data-shopify-visual-preview] {
    --hero-min-height: 600px;

    min-height: 600px;
  }

  .hero__container {
    position: relative;
    overflow: hidden;
    border: var(--hero-border-width) var(--hero-border-style) rgb(var(--color-border-rgb) / var(--hero-border-opacity));
    min-height: inherit;
    align-items: var(--vertical-alignment-mobile);
    justify-content: var(--horizontal-alignment);
    z-index: var(--layer-base);

    @media screen and (min-width: 750px) {
      align-items: var(--vertical-alignment);
    }
  }

  .hero__content-wrapper.page-width {
    grid-column: 2 / 3;
  }

  .hero__content-wrapper {
    position: relative;
    inset: 0;
    z-index: var(--layer-flat);
  }

  .hero__content-wrapper .group-block-content {
    position: relative;
  }

  .hero__media-grid {
    position: absolute;
    inset: 0;
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(var(--hero-media-count, 1), 1fr);
  }

  .hero--auto .hero__media {
    aspect-ratio: var(--hero-media-aspect-ratio);
  }

  .hero--no-blocks-auto-height {
    .hero__media {
      width: 100%;
      aspect-ratio: auto;
    }

    .hero__media-grid {
      /* When there are no blocks and the height is auto, allow the image to appear. */
      position: relative;
    }
  }

  .hero__media-wrapper {
    overflow: hidden;
    position: relative;
  }

  .hero__media {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
    z-index: var(--layer-base);
  }

  /* Mobile/Desktop media visibility */

  .hero__media-wrapper--mobile {
    display: none;
  }

  .hero__media-wrapper--desktop {
    display: block;
  }

  @media screen and (max-width: 749px) {
    .hero__media-wrapper--desktop {
      display: none;
    }

    .hero__media-wrapper--mobile {
      display: block;
    }

    .hero__media-grid {
      grid-template-columns: repeat(var(--hero-media-count-mobile, 1), 1fr);
    }

    /* Mobile stacking */
    .hero--stack-mobile .hero__media-grid {
      grid-template-columns: 1fr;
      grid-template-rows: repeat(var(--hero-media-count-mobile, 1), calc(100% / var(--hero-media-count-mobile, 1)));
    }
  }

  .hero__link {
    position: absolute;
    inset: 0;
    grid-column: 1 / -1;
  }

  .hero__media-grid,
  .hero__content-wrapper {
    pointer-events: none;

    :is(a, button, input, textarea, select, details, summary) {
      pointer-events: auto;
    }
  }

  .hero__content-wrapper--design-mode * {
    pointer-events: auto;
  }

  .hero[data-blur-shadow='true'] {
    --blurred-reflection-filter-saturate: saturate(1.5);
    --blurred-reflection-mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
    --blurred-reflection-box-shadow: rgb(0 0 0 / 5%) 0 0 1rem;
    --blurred-reflection-filter-blur: blur(20px);
    --blurred-reflection-scale: scale(2, 1.25);
    --blurred-reflection-padding-block-end: 60px;
  }

  .hero[data-blur-shadow='true'] .hero__container::before {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: var(--blurred-reflection-box-shadow);
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: -1;
  }

  .hero__blurred-image {
    position: absolute;
    inset: 0;
    z-index: -1;
    mask-image: var(--blurred-reflection-mask-image);
    filter: var(--blurred-reflection-filter-saturate);
    pointer-events: none;
    transform: translateY(50%);
    overflow: hidden;
  }

  .hero__blurred-image--desktop {
    display: none;

    @media screen and (min-width: 750px) {
      display: block;
    }
  }

  .hero__blurred-image--mobile {
    display: block;

    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .hero__blurred-image img,
  .hero__blurred-image svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    filter: var(--blurred-reflection-filter-blur);
    opacity: var(--blur-opacity);
    transform: var(--blurred-reflection-scale);
    padding-block-end: var(--blurred-reflection-padding-block-end);

    &:not(:only-child) {
      width: 50%;

      &:last-child {
        right: 0;
        left: auto;
      }
    }
  }
/* END_SECTION:hero */

/* START_SECTION:layered-slideshow (INDEX:24) */
.layered-slideshow-section {
    position: relative;
  }

  layered-slideshow-component {
    display: block;
    width: 100%;
  }

  .layered-slideshow__container {
    --radius: calc(var(--corner-radius, 1) * 1rem);
    --button-width: 56px;
    --border-color: var(--color-background);
    --inactive-tabs-width: calc((var(--total-tabs) - 1) * var(--button-width));
    --active-panel-width: calc(100cqi - var(--inactive-tabs-width));
    width: 100%;
    position: relative;
    container-type: inline-size;
    border-radius: var(--radius);
    overflow: hidden;
  }

  .layered-slideshow__container:not([size='auto']) {
    height: 100%;
  }

  .layered-slideshow__container[size='auto'] {
    height: auto;
  }

  @media screen and (min-width: 750px) {
    layered-slideshow-component {
      min-height: var(--layered-min-height-desktop, 0px);
    }
  }

  .layered-slideshow__tablist {
    display: grid;
    grid-template-columns: var(--active-tab);
    position: absolute;
    inset: 0;
    height: 100%;
    pointer-events: none;
    z-index: var(--layer-raised);
  }

  .layered-slideshow__tablist button {
    width: var(--button-width);
    height: 100%;
    pointer-events: all;
    opacity: 0;
    cursor: grab;
    border: none;
    background: transparent;
    padding: 0;
    position: relative;
    outline: none;
    transition: opacity 0.2s ease;
  }

  .layered-slideshow__tablist button:active {
    cursor: grabbing;
  }

  .layered-slideshow__tablist button[aria-selected='true'] {
    cursor: default;
  }

  .layered-slideshow__tablist button:focus-visible {
    opacity: 1;
  }

  .layered-slideshow__container[data-dragging] {
    cursor: grabbing;
  }

  .layered-slideshow__container[data-instant-transitions],
  .layered-slideshow__container:is([data-dragging], [data-instant-transitions])
    :is(
      .layered-slideshow__tablist,
      .layered-slideshow__panels,
      .layered-slideshow__panel-content,
      .layered-slideshow__content
    ) {
    transition: none;
  }

  .layered-slideshow__panels {
    display: grid;
    grid-template-columns: var(--active-tab);
    height: 100%;
    overflow: hidden;
  }

  .layered-slideshow__panel {
    position: relative;
    height: 100%;
    min-width: var(--button-width);
    border-radius: var(--radius);
    z-index: calc(var(--total-tabs) - var(--index));
  }

  .layered-slideshow__panel:first-child .layered-slideshow__panel-content {
    width: var(--active-panel-width);
    border-left: var(--border-width) solid var(--border-color);
  }

  .layered-slideshow__panel:not(:first-child) .layered-slideshow__content {
    padding-inline-start: calc((var(--radius) * 2) + var(--padding-inline-start, 0px));
  }

  .layered-slideshow__panel-content {
    border: var(--border-width) solid var(--border-color);
    border-left: none;
    border-radius: var(--radius);
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
    width: calc(var(--active-panel-width) + (var(--radius) * 2));
  }

  .layered-slideshow__panel-content :is(img, video, svg) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Video poster visibility - poster shows initially and hides when panel becomes active */
  .layered-slideshow__video-poster {
    z-index: 1;
  }

  .layered-slideshow__video {
    z-index: 0;
  }

  /* When panel is active, hide poster so video is visible */
  .layered-slideshow__panel:not([inert]) .layered-slideshow__video-poster {
    opacity: 0;
  }

  @media (prefers-reduced-motion: no-preference) {
    .layered-slideshow__video-poster {
      transition: opacity 0.3s ease;
    }
  }

  .layered-slideshow__content {
    height: 100%;
    position: relative;
    z-index: 1;
  }

  .layered-slideshow__content > * {
    margin: auto;
  }

  .layered-slideshow__content.background-transparent {
    background-color: transparent;
  }

  .layered-slideshow__panel--drop-shadow:not(:last-child) .layered-slideshow__panel-content {
    box-shadow: 4px 0 12px 0 rgba(0, 0, 0, 0.1);
  }

  /* Shared transitions (desktop and mobile) */
  @media (prefers-reduced-motion: no-preference) {
    .layered-slideshow__panels,
    .layered-slideshow__tablist {
      transition-property: grid-template-columns, grid-template-rows;
      transition-duration: 0.6s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }

    .layered-slideshow__content {
      opacity: 0;
      transform: translateY(0.5lh);
      transition: opacity 0.48s, transform 0.48s;
    }

    .layered-slideshow__panel:not([inert]) .layered-slideshow__content {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.24s;
    }
  }

  @media screen and (max-width: 749px) {
    .layered-slideshow__container {
      --button-height: 44px;
      --inactive-tabs-height: calc((var(--total-tabs) - 1) * var(--button-height));
    }

    .layered-slideshow__container:not([size='auto']) {
      --layered-total-height: calc(var(--layered-panel-height-mobile, 260px) + var(--inactive-tabs-height));
      --active-panel-height: var(--layered-panel-height-mobile, 260px);
      min-height: var(--layered-total-height);
      height: var(--layered-total-height);
    }

    .layered-slideshow__container[size='auto'] {
      height: auto;
    }

    .layered-slideshow__tablist {
      grid-template-rows: var(--active-tab);
      grid-template-columns: 1fr;
      grid-auto-flow: row;
    }

    .layered-slideshow__tablist button {
      width: 100%;
      height: var(--button-height);
    }

    .layered-slideshow__panels {
      grid-template-rows: var(--active-tab);
      grid-template-columns: 1fr;
      grid-auto-flow: row;
    }

    .layered-slideshow__panel {
      min-height: var(--button-height);
      width: 100%;
      height: 100%;
      position: relative;
      z-index: calc(var(--total-tabs) - var(--index));
    }

    .layered-slideshow__panel:first-child .layered-slideshow__panel-content {
      width: 100%;
      height: var(--active-panel-height);
      border-top: var(--border-width) solid var(--border-color);
      left: 0;
      right: 0;
      border-left: var(--border-width) solid var(--border-color);
    }

    .layered-slideshow__panel-content {
      position: absolute;
      border: var(--border-width) solid var(--border-color);
      border-radius: var(--radius);
      box-sizing: border-box;
      width: 100%;
      /* Clamp overlap to (button-height - border-width) to prevent visual issues with large radius + border */
      height: calc(var(--active-panel-height) + min(var(--radius) * 2, var(--button-height) - var(--border-width)));
      top: unset;
      left: 0;
      right: 0;
      bottom: 0;
      overflow: hidden;
    }

    .layered-slideshow__panel:not(:first-child) .layered-slideshow__panel-content {
      border-top: none;
    }

    .layered-slideshow__panel:not(:first-child) {
      margin-top: calc(var(--border-width) * -1);
    }

    .layered-slideshow__content {
      padding-inline-start: var(--padding-inline-start, 0px);
      padding-inline-end: var(--padding-inline-end, 0px);
    }

    /* Adjust padding for non-first slides to account for radius overlap at the top (not sides on mobile) */
    .layered-slideshow__panel:not(:first-child) .layered-slideshow__content {
      padding-block-start: calc((var(--radius) * 2) + var(--padding-block-start, 0px));
      padding-inline-start: var(--padding-inline-start, 0px);
    }

    .layered-slideshow__panel--drop-shadow:not(:last-child) .layered-slideshow__panel-content {
      box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
    }
  }
/* END_SECTION:layered-slideshow */

/* START_SECTION:logo (INDEX:25) */
.logo-section {
    width: calc(var(--logo-width) + var(--padding-inline-start) + var(--padding-inline-end));
    max-width: 100%;
    max-height: calc(var(--logo-height, 100%) + var(--padding-block-start) + var(--padding-block-end));
    font-size: var(--logo-height);
    display: flex;

    @media screen and (max-width: 749px) {
      max-height: calc(
        var(--logo-height-mobile, var(--logo-height, 100%)) + var(--padding-block-start) + var(--padding-block-end)
      );
      font-size: var(--logo-height-mobile, var(--logo-height));
      width: calc(
        var(--logo-width-mobile, var(--logo-width)) + var(--padding-inline-start) + var(--padding-inline-end)
      );
    }
  }

  .logo-section--center {
    margin-inline: auto;
  }

  .logo-section--flex-end {
    margin-inline-start: auto;
  }

  .logo-section--flex-start {
    margin-inline-end: auto;
  }

  .logo-section__image-wrapper {
    display: flex;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
  }

  .logo-section__image {
    object-fit: contain;
    width: 100%;
  }
/* END_SECTION:logo */

/* START_SECTION:main-blog-post (INDEX:27) */
.blog-post-comments-container {
    width: 100%;
    max-width: var(--normal-content-width);
    margin: 0 auto;
  }

  .blog-post-comments {
    display: flex;
    flex-direction: column;
    gap: var(--gap-3xl);
  }

  .blog-post-comment__author {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
    margin-top: var(--margin-md);
    font-size: var(--font-size--body-sm);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .blog-post-comments-pagination {
    display: flex;
    justify-content: center;
    gap: var(--gap-2xs);
  }

  .blog-post-comments-pagination,
  .blog-post-comments-pagination a {
    color: var(--color-foreground);
  }

  .blog-post-comments-pagination .current {
    color: var(--color-foreground);
  }

  .blog-post-comments-pagination .current,
  .blog-post-comments-pagination a {
    display: block;
    padding: var(--padding-2xs) var(--padding-xs);
  }

  .blog-post-comments-pagination .current,
  .blog-post-comments-pagination a:hover {
    border-bottom: 1px solid var(--color-foreground);
  }
/* END_SECTION:main-blog-post */

/* START_SECTION:main-blog (INDEX:28) */
/**
   * Blog posts page layout
   */
  .blog-posts {
    --page-content-width: var(--narrow-page-width);
    --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
    --columns-gap: 36px;
    --rows-gap: 36px;
  }

  .blog-posts-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    width: 100%;
    column-gap: var(--columns-gap);
    row-gap: var(--rows-gap);
  }

  /**
   * Blog post item grid positioning and scaling.
   * Layout is calculated in Liquid based on total article count.
   * Mobile overrides are applied per-item in inline styles for proper specificity.
   */
  .blog-post-item {
    grid-column: span var(--col-span);
    background-color: var(--color-background);
  }

  /**
   * When there's no image, the blog post item has a border.
   */
  .blog-post-item {
    border: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-20));
    padding: 0 1rem 1rem;
  }

  .blog-post-item:has(.blog-post-card__image-container) {
    border: none;
    padding: 0;
  }
/* END_SECTION:main-blog */

/* START_SECTION:main-cart (INDEX:29) */
.cart-page {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 var(--padding-5xl);
  }

  .cart-page--empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .cart-page--empty .cart-page__title,
  .cart-page--empty .cart-page__more-blocks {
    margin-top: var(--margin-6xl);
  }

  .cart-page__more-blocks {
    width: 100%;
  }

  .cart-page--empty .cart-title {
    text-align: center;
  }

  .cart-page__main {
    grid-column: 1;
  }

  .cart-page__summary {
    padding-top: var(--padding-xl);
  }

  .cart-page__title + .cart-page__items {
    margin-block-start: var(--margin-lg);
  }

  @media screen and (min-width: 750px) {
    .cart-page {
      grid-template-columns: 1fr min(50vw, var(--sidebar-width));
      grid-template-rows: min-content min-content 1fr;
    }

    .cart-page__summary {
      display: grid;
      height: 100%;
      grid-column: 2;
      grid-row: 1 / -1;
      align-self: stretch;
      grid-template-rows: subgrid;
      padding-top: 0;

      /* needed to support blurred effect from hero section */
      position: relative;
    }

    .section--page-width .cart-page:has(.cart-summary--extend) {
      grid-column: 2 / 4;
      grid-template-columns: 1fr minmax(
          var(--sidebar-width),
          calc((100vw - var(--page-width)) / 2 + var(--sidebar-width))
        );
    }
  }

  @media screen and (min-width: 1400px) {
    .cart-page {
      grid-template-columns: 1fr var(--sidebar-width);
    }
  }
/* END_SECTION:main-cart */

/* START_SECTION:marquee (INDEX:33) */
marquee-component {
    display: block;
    width: 100%;
    overflow: hidden;
  }

  .marquee__wrapper {
    display: flex;
    gap: var(--marquee-gap);
    width: fit-content;
    white-space: nowrap;
  }

  .marquee__content {
    min-width: max-content;
    display: flex;
    gap: var(--marquee-gap);
  }

  .marquee__content :is(p, h1, h2, h3, h4, h5, h6) {
    white-space: nowrap;
  }

  .marquee__content .marquee__repeated-items * {
    max-width: none;
  }

  .marquee__repeated-items {
    min-width: max-content;
    display: flex;
    gap: var(--marquee-gap);
    align-items: center;
    justify-content: center;
  }

  .marquee__repeated-items > * {
    align-content: center;
  }

  @media (prefers-reduced-motion: no-preference) {
    marquee-component:not([data-disabled]) .marquee__wrapper {
      animation: marquee-motion var(--marquee-speed) linear infinite var(--marquee-direction);
    }
  }

  @keyframes marquee-motion {
    to {
      transform: translate3d(calc(-50% - (var(--marquee-gap) / 2)), 0, 0);
    }
  }
/* END_SECTION:marquee */

/* START_SECTION:media-with-content (INDEX:34) */
.section--page-width {
    &.media-with-content {
      grid-template-areas: 'margin-left media margin-right' 'margin-left content margin-right';

      @media screen and (min-width: 750px) {
        /* Wide proportion is media 3.5 parts, content 2.5 parts. Which equals 7|5. So divide the central column by 7+5 and multiply accordingly */
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc((var(--full-page-grid-central-column-width) / 12) * 7)
          calc((var(--full-page-grid-central-column-width) / 12) * 5) var(--full-page-grid-margin);

        grid-template-areas: 'margin-left media content margin-right';
      }
    }

    &.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc((var(--full-page-grid-central-column-width) / 12) * 5)
          calc((var(--full-page-grid-central-column-width) / 12) * 7) var(--full-page-grid-margin);

        grid-template-areas: 'margin-left content media margin-right';
      }
    }

    &.media-with-content--medium {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          repeat(2, calc(var(--full-page-grid-central-column-width) / 2)) var(--full-page-grid-margin);
      }
    }

    &.media-with-content--narrow.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc((var(--full-page-grid-central-column-width) / 3) * 2)
          calc(var(--full-page-grid-central-column-width) / 3) var(--full-page-grid-margin);
      }
    }

    &.media-with-content--narrow {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc(var(--full-page-grid-central-column-width) / 3)
          calc((var(--full-page-grid-central-column-width) / 3) * 2) var(--full-page-grid-margin);
      }
    }
  }

  .section--full-width {
    &.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: 2.5fr 3.5fr;

        grid-template-areas: 'content media';
      }
    }

    &.media-with-content--medium {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: 1fr 1fr;
      }
    }

    &.media-with-content--narrow {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: 2fr 4fr;
      }
    }

    &.media-with-content--narrow.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: 4fr 2fr;
      }
    }
  }

  /* Keep the CSS specificity lower assuming that liquid won't assign this class with a full width section */
  .media-with-content.media-with-content--media-extend {
    grid-template-columns: var(--media-with-content-grid-columns);
    grid-template-areas: 'media media media' 'margin-left content margin-right';

    @media screen and (min-width: 750px) {
      grid-template-areas: 'media media content margin-right';
    }
  }

  .media-with-content--media-extend.media-with-content--media-right {
    @media screen and (min-width: 750px) {
      grid-template-areas: 'margin-left content media media';
    }
  }

  .media-with-content--media-right {
    @media screen and (min-width: 750px) {
      grid-template-areas: 'margin-left content media media';
    }
  }

  .media-with-content {
    --media-with-content-grid-columns: var(--full-page-grid-with-margins);

    grid-template-columns: var(--media-with-content-grid-columns);
    grid-template-areas: 'media media media' 'content content content';

    @media screen and (min-width: 750px) {
      --media-with-content-grid-columns: 3.5fr 2.5fr;

      /* Default desktop layout is wide media, on the left, in full page section */
      grid-template-areas: 'media content';
    }

    .media-block {
      grid-area: media;
    }

    .media-with-content__content {
      grid-area: content;
    }

    /* Inner blocks spacing */
    .media-with-content__content > .group-block-content {
      padding-inline: var(--page-margin);
      padding-block: calc(2 * var(--page-margin));

      @media screen and (min-width: 750px) {
        padding-block: var(--page-margin);
      }
    }

    &.section--page-width .media-with-content__content > .group-block-content {
      padding-inline: 0;

      @media screen and (min-width: 750px) {
        padding-inline-start: var(--page-margin);
      }
    }

    &.section--page-width.media-with-content--media-right .media-with-content__content > .group-block-content {
      padding-inline-end: var(--page-margin);
      padding-inline-start: 0;
    }
  }

  .media-with-content[data-shopify-visual-preview] {
    --hero-min-height: 500px;

    min-height: 500px;
  }
/* END_SECTION:media-with-content */

/* START_SECTION:mini-produktseite (INDEX:35) */
/* Das Fenster traegt die Gestaltung der Produktseite in klein. Der dunkle
   Kaufknopf ist hier erlaubt — er ist die einzige Kaufaktion im Fenster und
   konkurriert mit nichts. */
.mpd { position: relative; background: #fff; color: var(--3idee-ink); }
.mpd__leib { display: flex; align-items: stretch; }

.mpd__bilder {
  flex: 1 1 46%; min-width: 0; position: relative;
  background: var(--3idee-surface-soft, #f7f7f5);
}
.mpd__spur {
  display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none;
}
.mpd__spur::-webkit-scrollbar { display: none; }
.mpd__bild {
  flex: 0 0 100%; scroll-snap-align: center;
  display: grid; place-items: center; padding: 26px;
}
.mpd__bild img { max-width: 100%; height: auto; object-fit: contain; }

.mpd__pfeil {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: rgb(255 255 255 / .9); color: var(--3idee-ink);
  font-size: 20px; line-height: 1; cursor: pointer;
}
.mpd__pfeil--vor { left: 10px; }
.mpd__pfeil--zur { right: 10px; }

.mpd__punkte {
  position: absolute; bottom: 14px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 6px;
}
.mpd__punkte button {
  width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%;
  background: var(--3idee-hairline); cursor: pointer;
}
.mpd__punkte button[aria-current="true"] { background: var(--3idee-ink); }

.mpd__inhalt {
  flex: 1 1 54%; min-width: 0;
  padding: 26px; display: flex; flex-direction: column; gap: 12px;
}
.mpd__zu {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 34px; height: 34px;
  border: 1px solid var(--3idee-hairline); border-radius: var(--3idee-radius-klein);
  background: #fff; color: var(--3idee-ink);
  font-size: 17px; line-height: 1; cursor: pointer;
}

/* Im Fenster eine Stufe kleiner als auf der Seite — es ist ein Ausschnitt,
   keine zweite Hauptueberschrift. */
.mpd .pdt__titel { font-size: var(--font-h5--size, 20px); }

.mpd__passung {
  display: flex; align-items: baseline; gap: 7px; margin: 0;
  font-size: 14px; font-weight: 800;
}
.mpd__passung i { font-style: normal; color: var(--3idee-success); }
.mpd__vf { margin-top: 0; }

.mpd__preis {
  font-family: var(--font-heading--family);
  font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05;
}
.mpd__preis small {
  font-family: var(--font-body--family);
  font-size: 12.5px; font-weight: 400; color: var(--3idee-muted);
  margin-inline-start: 9px; letter-spacing: 0;
}

.mpd__feld { display: block; font-size: 13px; color: var(--3idee-muted); }
.mpd__feld span { display: block; margin-bottom: 4px; }
.mpd__feld select {
  width: 100%; height: 44px; padding: 0 12px;
  border: 1px solid var(--3idee-hairline); border-radius: var(--3idee-radius-mittel);
  font: inherit; font-size: 14px; color: var(--3idee-ink); background: #fff;
}

.mpd__form { display: block; margin-top: auto; }
.mpd__form form { display: flex; flex-direction: column; gap: 12px; }
/* Am Kaufbereich wird NICHTS gestaltet. Mengenwaehler und Knopf richten sich
   ueber dieselben Regeln aus wie auf der Produktseite — der Waehler fest, der
   Knopf nimmt den Rest. Hier stand kurz "display: block" und eine Breite von
   100 % am Knopf; das war noetig, solange er allein in der Zeile stand, und
   haette den Waehler daneben verhindert. */
.mpd__plan { margin: 8px 0 0; font-size: 14px; line-height: 1.4; opacity: .75; }

@media screen and (max-width: 720px) {
  .mpd__leib { flex-direction: column; }
  .mpd__bild { padding: 20px; }
  .mpd__inhalt { padding: 20px; }
}
/* END_SECTION:mini-produktseite */

/* START_SECTION:password-footer (INDEX:36) */
.password-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-sm);
    padding-block: var(--padding-xl);
  }

  .password-footer__powered-by {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--padding-xs);
    height: 1em;

    > a {
      display: flex;
    }

    .icon-shopify {
      display: inline;
      height: 1.3em;
      color: var(--color-foreground);
    }
  }

  .password-footer__links {
    display: flex;
    align-items: center;
    gap: var(--gap-2xl);

    @media screen and (max-width: 749px) {
      flex-direction: column;
      gap: var(--gap-sm);
    }
  }

  .password-footer__admin-link {
    margin: 0;
  }

  .password-footer__button {
    height: var(--minimum-touch-target);
    background-color: transparent;
    color: var(--color-foreground);
    cursor: pointer;
    text-decoration: underline;

    &:hover {
      color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
      text-decoration: none;
    }
  }
/* END_SECTION:password-footer */

/* START_SECTION:password (INDEX:37) */
.section-password {
    flex-grow: 1;
    display: flex;
  }

  .password-content {
    text-align: center;
  }
/* END_SECTION:password */

/* START_SECTION:product-hotspots (INDEX:40) */
/* Section layout */
  .section-product-hotspots {
    position: relative;
  }

  .section-product-hotspots__wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    width: 100%;
    height: 100%;
  }

  /* Image container */
  .section-product-hotspots__content {
    position: relative;
    aspect-ratio: var(--ratio, 21 / 9);
    overflow: hidden;
  }

  /* Hide hotspots without products on touch devices (tablets included) */
  @media (hover: none) {
    .hotspot.hotspot--hidden-touch {
      display: none;
    }
  }

  /* Responsive adjustments */
  @media screen and (max-width: 749px) {
    /* Hide dialog on mobile - hotspot opens quick-add modal instead */
    .hotspot .hotspot-dialog {
      display: none;
    }
  }

  /* Hotspot button - positioned element with clickable area */
  .hotspot {
    position: absolute;
    cursor: pointer;
    width: var(--button-size);
    height: var(--button-size);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    outline: none;
    transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
    z-index: var(--layer-flat);
  }

  .hotspot:has(.hotspot-dialog[open]) {
    z-index: var(--layer-raised);
  }

  .hotspot .hotspot-trigger {
    padding: 0;
    border: none;
  }

  .hotspot-dialog__product-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--padding-xs);
    padding-inline-start: 0;
    overflow: hidden;
  }

  /* Visual target circle */
  .hotspot-trigger {
    width: var(--hotspot-size);
    height: var(--hotspot-size);
    background: var(--hotspot-bg, rgb(0 0 0 / 0.5));
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    transition: width 0.1s ease-out, height 0.1s ease-out;
  }

  /* On mobile, ensure trigger is tappable */
  @media screen and (max-width: 749px) {
    .hotspot-trigger {
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
  }

  /* Bullseye using ::after pseudo-element */
  .hotspot-trigger::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--hotspot-size) * 0.4);
    height: calc(var(--hotspot-size) * 0.4);
    background: var(--hotspot-bullseye, #fff);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.1s ease-out, height 0.1s ease-out, background 0.1s ease-out;
  }

  /* Bullseye grows on hover or when dialog is open (desktop only) */
  @media screen and (min-width: 750px) {
    .hotspot:hover .hotspot-trigger::after,
    .hotspot:has(.hotspot-dialog[open]) .hotspot-trigger::after {
      width: calc(var(--hotspot-size) * 0.55);
      height: calc(var(--hotspot-size) * 0.55);
      transition: width 0.2s ease-out, height 0.2s ease-out, background 0.2s ease-out;
      transition-delay: 0.2s;
    }
  }

  .hotspots-container {
    position: absolute;
    inset: 0;
    z-index: var(--layer-flat);
    overflow: clip;
  }

  .hotspots__background-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Dialog positioning */
  .hotspot .hotspot-dialog {
    position: absolute;
    padding: 0;
    border-radius: var(--style-border-radius-popover);
    border: var(--style-border-popover);
    width: max-content;
    min-width: var(--minimum-width-dialog);
    max-width: var(--maximum-width-dialog);
    box-shadow: var(--shadow-popover);

    &[data-placement*='bottom'] {
      --offset-y: 0px;
      --origin-y: calc(var(--hotspot-size) / 2);
      top: calc((var(--button-size) - var(--hotspot-size)) / 2 + var(--dialog-vertical-offset, 0px));
      bottom: unset;
    }
    &[data-placement*='top'] {
      --offset-y: 0px;
      --origin-y: calc(100% - (var(--hotspot-size) * 0.5));
      top: unset;
      bottom: calc((var(--button-size) - var(--hotspot-size)) * 0.5 - var(--dialog-vertical-offset, 0px));
    }
    &[data-placement*='left'] {
      --offset-x: calc((var(--button-size) - var(--hotspot-size)) * 0.5);
      --origin-x: calc(100% - (var(--hotspot-size) * 0.5));
      left: unset;
      right: 100%;
    }
    &[data-placement*='right'] {
      --offset-x: calc((var(--button-size) - var(--hotspot-size)) * -0.5);
      --origin-x: calc(var(--hotspot-size) * 0.5);
      left: 100%;
      right: unset;
    }
    &[data-placement*='center'] {
      left: 50%;
      translate: -50% 0;
      right: unset;
    }
    &[data-placement*='center'][data-placement*='bottom'] {
      --origin-y: calc(var(--hotspot-size) * 0.5);
      --origin-x: 50%;
      --offset-y: calc((var(--button-size) - var(--hotspot-size)) * -0.5);
      /* stylelint-disable-next-line declaration-property-value-disallowed-list */
      --offset-x: 0;
      top: 100%;
      bottom: unset;
      margin: 0;
    }
    &[data-placement*='center'][data-placement*='top'] {
      --origin-y: calc(100% - (var(--hotspot-size) * 0.5));
      --origin-x: 50%;
      --offset-y: calc((var(--button-size) - var(--hotspot-size)) * 0.5);
      /* stylelint-disable-next-line declaration-property-value-disallowed-list */
      --offset-x: 0;
      bottom: 100%;
    }
  }

  .hotspot .hotspot-dialog:is(:focus, :focus-visible),
  .hotspot .hotspot-dialog__link:is(:focus, :focus-visible) {
    outline: none;
  }

  .hotspot-dialog__product {
    display: grid;
    grid-template-columns: auto 1fr;
  }

  .hotspot-dialog__product-image,
  .hotspot-dialog svg.hotspot-dialog__placeholder-product-image {
    width: var(--width-product-image-dialog);
    height: var(--width-product-image-dialog);
    aspect-ratio: 1;
    padding: var(--padding-product-image-popover, var(--padding-xs));
    object-fit: cover;
    border-radius: var(--style-border-radius-popover);
  }

  .hotspot-dialog__link {
    position: absolute;
    inset: 0;
    z-index: var(--layer-flat);
  }

  .hotspot-dialog__product-title {
    margin-block-end: var(--product-title-gap);
    padding-inline-end: var(--padding-sm);
    min-width: 0;
  }

  .hotspot .hotspot-dialog .hotspot-dialog__sold-out-badge {
    display: flex;
    width: fit-content;
    justify-self: flex-end;
    align-self: flex-end;
    justify-content: center;
    align-items: center;
    font-size: var(--font-body--size);
    padding: var(--padding-2xs) var(--padding-sm);
    background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
    border-radius: var(--border-radius-sm);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-sm);
    opacity: var(--opacity-80);
  }

  /* Dialog transitions */
  .hotspot .hotspot-dialog {
    --hotspot-blur: 4px;
    --hotspot-scale: 0.8;
    --hotspot-entry-duration: 0.2s;
    --hotspot-exit-duration: 0.1s;

    /* Firefox doesn't have reverse transitions */
    /* in webkit/chromium we can set a closing attribute as we transition the exit and hook there */
    filter: blur(var(--hotspot-blur));
    opacity: 0;
    transform: scale(var(--hotspot-scale)) translate(0, 0);
    transition-property: display, opacity, filter, transform;
    transition-duration: var(--hotspot-entry-duration);
    transition-timing-function: ease;

    transform: scale(var(--hotspot-scale)) translate(var(--offset-x), var(--offset-y));
    transform-origin: var(--origin-x) var(--origin-y);
    transition-timing-function: cubic-bezier(0.65, -0.49, 0.35, 1.12);

    &[data-closing='true'] {
      transition-duration: var(--hotspot-exit-duration);
      transition-timing-function: ease-out;
      transform: scale(1) translate(0, calc(var(--hotspot-size) * 0.25));
    }

    /* We can only set transition-behavior once we've measured the dialog dimensions */
    &[data-showing='true'] {
      transition-behavior: allow-discrete;
    }
  }

  .hotspot .hotspot-dialog[open][data-showing='true'] {
    opacity: 1;
    transform: scale(1) translate(0, 0);
    filter: blur(0px);
  }

  @starting-style {
    .hotspot .hotspot-dialog[open][data-showing='true'] {
      opacity: 0;
      filter: blur(var(--hotspot-blur));
      transform: scale(var(--hotspot-scale)) translate(var(--offset-x), var(--offset-y));
      transform-origin: var(--origin-x) var(--origin-y);
    }
  }

  /* Safety triangles for dialogs */
  .hotspot .hotspot-dialog::after {
    content: '';
    position: absolute;
    opacity: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: all;
    transition: opacity 0.22s ease-out, translate 0.22s 0.1s ease-out;
    scale: var(--scale-x, 1) var(--scale-y, 1);
    z-index: var(--layer-flat);
  }

  .hotspot-dialog[open]:is([data-placement*='left'], [data-placement*='right'])::after {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    width: calc(var(--button-size) / 2 + var(--hotspot-size) * 0.5);
  }

  .hotspot-dialog[open][data-placement*='right']::after {
    right: 100%;
    left: unset;
  }

  .hotspot-dialog[open][data-placement*='left']::after {
    left: 100%;
    right: unset;
    --scale-x: -1;
  }

  .hotspot-dialog[open][data-placement*='top']::after {
    --scale-y: -1;
  }

  .hotspot-dialog[open][data-placement*='center']::after {
    height: calc(var(--button-size) / 2 + var(--hotspot-size) * 0.5);
    width: 100%;
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: polygon(0 0, 100% 0, 50% calc(100% - var(--hotspot-size) * 0.25));
    --scale-x: 1;
    --scale-y: 1;
  }

  .hotspot-dialog[open][data-placement*='center'][data-placement*='bottom']::after {
    top: unset;
    bottom: 100%;
    --scale-y: -1;
  }

  .hotspot-dialog[open][data-placement*='center'][data-placement*='top']::after {
    top: 100%;
    bottom: unset;
  }

  /* Quick add button */
  .hotspot-dialog[open] {
    .quick-add {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      width: auto;
      height: auto;
      position: relative;
      z-index: var(--layer-flat);
    }

    .quick-add__button {
      position: relative;
      padding-block: 0;
      box-shadow: none;
      align-items: center;
      justify-self: flex-end;
      height: fit-content;
      translate: var(--padding-2xs) 0;
      border: none;
      color: var(--quick-add-foreground, var(--color-foreground));
      background-color: var(--quick-add-background, var(--color-background));
      overflow: visible;
      pointer-events: all;
      opacity: 1;
      animation: elementSlideInTop var(--animation-speed) var(--animation-easing);
      transition-property: translate;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);

      &::before {
        content: '';
        position: absolute;
        inset: -2px;
        border-radius: calc(50px + 2px);
        border: 2px solid transparent;
        pointer-events: none;
        transition-property: border-color;
        transition-duration: 0s;
        transition-timing-function: var(--ease-out-cubic);
      }

      &:is(:hover, :focus, :focus-visible, :active) {
        translate: 0 0;
        transition-delay: var(--animation-speed-slow);

        &::before {
          border-color: rgb(var(--color-foreground-rgb) / var(--opacity-15));
          transition-duration: var(--animation-speed);
          transition-delay: var(--animation-speed-slow);
        }
      }
    }
  }
/* END_SECTION:product-hotspots */

/* START_SECTION:product-information (INDEX:41) */
.sticky-add-to-cart__bar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    opacity: 0;
    transform: translateX(-50%) translateY(calc(100% + 40px));
    z-index: calc(var(--layer-sticky) - 1); /* Below sticky header */
    display: block;
    width: 600px;
    border-radius: calc(
      var(--style-border-radius-buttons-primary) + min(var(--padding-sm), var(--style-border-radius-buttons-primary))
    );
    box-shadow: var(--shadow-popover);
    padding: var(--padding-sm);
    /* Layout styling */
    display: flex;
    align-items: center;
    gap: var(--gap-md);

    @starting-style {
      opacity: 0;
      transform: translateX(-50%) translateY(calc(100% + 40px));
    }

    &::before {
      --border: 2px;
      content: '';
      position: absolute;
      inset: calc(var(--border) * -1);
      background: linear-gradient(var(--color-background) 0 100%), linear-gradient(hsl(0 0% 0% / 0.15) 0 100%);
      background-clip: content-box, border-box;
      border: var(--border) solid #0000;
      border-radius: inherit;
      z-index: -1;
      backdrop-filter: blur(20px) saturate(180%) brightness(1.5);
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .sticky-add-to-cart__bar {
      transition-property: transform, opacity, display;
      transition-duration: 0.3s;
      transition-timing-function: var(--ease-out-quad);
      transition-behavior: allow-discrete;
    }
  }

  .sticky-add-to-cart__bar[data-stuck='true'] {
    transform: translateX(-50%) translateY(0%);
    opacity: 1;
  }

  sticky-add-to-cart:not([data-variant-available='true']) .sticky-add-to-cart__bar {
    opacity: 0;
    transform: translateX(-50%) translateY(calc(100% + 40px));
    display: none;
  }

  .sticky-add-to-cart__info[data-has-image='false'] {
    padding-left: var(--padding-lg);
  }

  .sticky-add-to-cart__image {
    flex-shrink: 0;
    aspect-ratio: 1;
    height: var(--height-buy-buttons);
    overflow: hidden;
    border-radius: var(--style-border-radius-buttons-primary);
    background: var(--color-background-secondary);
  }

  .sticky-add-to-cart__image-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .sticky-add-to-cart__info {
    flex: 1;
    min-width: 0; /* Allow text truncation */
  }

  .sticky-add-to-cart__title {
    font-size: var(--font-paragraph-medium--size);
    font-weight: var(--font-weight-semibold);
    line-height: var(--font-paragraph--line-height);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sticky-add-to-cart__variant {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    font-size: var(--font-paragraph-small--size);
    margin-top: var(--margin-3xs);
  }

  .sticky-add-to-cart__price {
    font-weight: var(--font-weight-semibold);
  }

  .sticky-add-to-cart__button {
    height: var(--height-buy-buttons);
    position: relative;
  }

  /* Mobile adjustments */
  @media screen and (max-width: 749px) {
    .sticky-add-to-cart__bar {
      bottom: 0;
      width: 100%;
      max-width: none;
      border-radius: 0;

      &::before {
        --border: 1px;
      }
    }

    .sticky-add-to-cart__bar .add-to-cart-text__content {
      display: none;
    }

    .sticky-add-to-cart__info[data-has-image='false'] {
      padding-left: 0;
    }

    .sticky-add-to-cart__title {
      font-size: var(--font-paragraph--size);
    }

    .sticky-add-to-cart__button {
      padding: var(--padding-lg);
    }

    .sticky-add-to-cart__price {
      font-size: var(--font-paragraph-small--size);
    }

    .sticky-add-to-cart__button {
      width: var(--height-buy-buttons);
    }

    sticky-add-to-cart:not([data-variant-available='true']) .add-to-cart-text__content {
      display: initial;
    }

    sticky-add-to-cart:not([data-variant-available='true']) .sticky-add-to-cart__button {
      width: auto;
    }
  }

  /* Small mobile - hide text content and compare price */
  @media screen and (max-width: 389px) {
    .sticky-add-to-cart__bar {
      .compare-at-price {
        display: none;
      }
    }

    .sticky-add-to-cart__title {
      display: none;
    }

    /* For product with only default variant show title */
    .sticky-add-to-cart__info[data-singleton='true'] .sticky-add-to-cart__title {
      display: block;
    }

    /* For single variant show title and variant, truncate both. variant should be identifiable with truncation */
    .sticky-add-to-cart__info[data-single-option='true'] .sticky-add-to-cart__title {
      display: block;
    }

    .sticky-add-to-cart__info[data-single-option='true'] .sticky-add-to-cart__variant {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
/* END_SECTION:product-information */

/* START_SECTION:quick-order-list (INDEX:44) */
.quick-order-list {
    --quantity-selector-width: 124px;
    --image-size: 43px;
    --quantity-header-padding: calc(var(--minimum-touch-target) + var(--gap-sm));
    --quick-order-quantity-column-width: calc(
      var(--quantity-selector-width) + 2 * var(--gap-sm) + 2 * var(--minimum-touch-target)
    );
    --transform-offset-negative: calc(-1 * var(--icon-stroke-width));
    --quick-order-first-column-width: 2fr; /* Takes 2 fractions of available space */
    --quick-order-price-column-width: 1fr; /* Takes 1 fraction */
    --quick-order-total-column-width: 1fr; /* Takes 1 fraction */

    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
  }

  .quick-order-list__container {
    width: 100%;
  }

  /* Grid container setup */
  .quick-order-list__grid {
    width: 100%;
    display: block; /* Container is block, children use grid */
    contain: layout; /* Isolate layout calculations for performance */
  }

  .quick-order-list__grid-body {
    contain: layout; /* Isolate layout calculations for performance */
  }

  .quick-order-list__grid-header,
  .quick-order-list__grid-row {
    display: grid;
    grid-template-columns:
      var(--quick-order-first-column-width) /* Variant column - takes 2 parts of available space */
      var(--quick-order-quantity-column-width) /* Fixed pixel width for quantity */
      var(--quick-order-price-column-width) /* Price column - takes 1 part */
      var(--quick-order-total-column-width); /* Total column - takes 1 part */
    gap: var(--gap-md);
    align-items: center;
  }

  .quick-order-list__grid-header {
    border-block-end: var(--style-border-width) solid var(--color-border);
    padding-block-end: var(--padding-xl);
    margin-block-end: var(--padding-sm);
    opacity: var(--opacity-85);
    font-weight: normal;
    font-size: var(--font-size--xs);
    letter-spacing: var(--letter-spacing--body-loose);
  }

  /* Add padding to quantity column header to align with content */
  .quick-order-list__grid-header .quick-order-list__grid-cell--quantity {
    padding-inline-start: var(--quantity-header-padding);
  }

  .quick-order-list__grid-row {
    padding-block-start: var(--padding-sm);
    padding-block-end: var(--padding-sm);
    content-visibility: auto;
    contain-intrinsic-size: auto
      calc(2 * var(--padding-sm) + var(--image-size) + var(--minimum-touch-target) + var(--padding-2xl));
  }

  @media screen and (min-width: 750px) {
    .quick-order-list__grid-row {
      contain-intrinsic-size: auto calc(2 * var(--padding-sm) + var(--image-size));
    }
  }

  .quick-order-list__grid-cell--variant {
    text-align: start;
    justify-self: stretch;
  }

  .quick-order-list__grid-cell--quantity {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    justify-self: stretch;
  }

  .quick-order-list__grid-cell--quantity .variant-item__inner-container {
    width: 100%;
    justify-content: flex-start;
  }

  .quick-order-list__grid-cell--price {
    text-align: end;
    justify-self: stretch;
  }

  .quick-order-list__grid-cell--total {
    text-align: end;
    justify-self: stretch;
  }

  .variant-item__image-container,
  .quick-order-list__table-image {
    width: var(--image-size);
    height: auto;
  }

  .quick-order-list .pagination {
    margin-block-start: 0;
    padding-block-start: var(--padding-xl);
    padding-block-end: 0;
  }

  .variant-item__inner-container {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
  }

  .volume-pricing-info-placeholder {
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
  }

  .variant-item__quantity .quantity-selector {
    display: flex;
    flex: 0 0 var(--quantity-selector-width);
    min-width: var(--quantity-selector-width);
    font-size: var(--font-size--xs);
    height: auto;
  }

  .variant-item__remove {
    background-color: transparent;
    color: var(--color-foreground);
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    justify-content: center;
    box-shadow: none;
    padding: 0;
  }

  .remove-icon-bottom,
  .remove-icon-top {
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .variant-item__remove:not(.variant-item__remove--hidden):hover .remove-icon-top {
    transform: translate(var(--transform-offset-negative), var(--icon-stroke-width)) rotate(-15deg);
  }

  .variant-item__remove:not(.variant-item__remove--hidden):is(:hover, :active) .remove-icon-bottom {
    transform: translateY(var(--icon-stroke-width));
  }

  /* Hide remove button with opacity to prevent layout shift */
  .variant-item__remove--hidden {
    opacity: 0;
    pointer-events: none;
    cursor: default;
  }

  .variant-item__name {
    font-weight: var(--font-weight-medium);
  }

  .variant-item__sku {
    font-size: var(--font-size--3xs);
    opacity: var(--opacity-85);
  }

  .variant-item__details {
    display: inline-flex;
    flex-direction: column;
  }

  .variant-item__totals {
    flex: 0 0 auto;
    padding-block-start: var(--padding-2xs);
  }

  /* Compare at price styles */
  .variant-item__discounted-prices {
    display: flex;
    gap: var(--gap-2xs);
    justify-content: flex-end;
  }

  .variant-item__discounted-prices dd {
    margin: 0;
  }

  /* Mobile layout */
  @media screen and (max-width: 749px) {
    .quick-order-list__grid-header,
    .quick-order-list__grid-row {
      grid-template-columns: 1fr auto; /* Variant column and total column on mobile */
      gap: var(--gap-sm);
      max-width: 100%;
      overflow: hidden;
      align-items: flex-start;
    }

    .quick-order-list__grid-header .quick-order-list__grid-cell--total {
      text-align: end;
    }

    .quick-order-list__grid-row {
      margin-block-end: var(--margin-2xl);
      padding-block-end: var(--padding-2xl);
      border-block-end: var(--style-border-width) solid var(--color-border);
    }

    .quick-order-list__grid-row:last-child {
      margin-block-end: 0;
      border-block-end: none;
    }

    .variant-item__inner {
      flex: 1 1 auto;
      padding-inline-end: var(--padding-lg);
    }

    .variant-item__inner-container {
      display: flex;
      gap: var(--gap-md);
      align-items: flex-start;
    }

    .variant-item__details {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-width: 0; /* Allow text to shrink */
    }

    .variant-item__totals {
      flex: 0 0 auto;
      text-align: end;
      padding-block-start: var(--padding-2xs);
    }

    .variant-item__totals .variant-item__total-price {
      font-size: var(--font-size--sm);
      font-weight: var(--font-weight-medium);
    }

    .variant-item__title-container .variant-item__name {
      display: block;
      font-size: var(--font-size--sm);
      line-height: var(--line-height-tight);
      margin: 0;
    }

    .variant-item__mobile-price-container {
      margin-block-end: var(--margin-xs);
    }

    .variant-item__mobile-price {
      font-size: var(--font-size--sm);
      opacity: var(--opacity-85);
      white-space: nowrap;
    }

    /* Mobile compare at price styles */
    .variant-item__discounted-prices--mobile {
      display: flex;
      flex-direction: row;
      align-items: baseline;
      justify-content: flex-start;
      gap: var(--gap-xs);
      margin-block-start: var(--margin-2xs);
      margin-block-end: 0;
    }

    .variant-item__discounted-prices--mobile dd {
      display: inline;
    }

    .variant-item__mobile-quantity {
      display: flex;
      align-items: center;
      gap: 0;
    }

    /* Mobile-only content styles */
    .variant-item__mobile-info {
      display: flex;
      flex-direction: column;
      width: 100%;
    }

    .variant-item__image-container {
      flex: 0 0 var(--image-size);
      width: var(--image-size);
      height: var(--image-size);
    }

    .quick-order-list__table-image {
      width: 100%;
      height: 100%;
    }

    .variant-item__mobile-quantity .quantity-selector {
      display: flex;
      flex: 0 0 var(--quantity-selector-width);
      min-width: var(--quantity-selector-width);
      font-size: var(--font-size--xs);
      margin: 0;
      padding: 0;
    }

    /* Mobile remove button styling */
    .variant-item__remove--mobile {
      background-color: transparent;
      color: var(--color-foreground);
      width: var(--minimum-touch-target);
      height: var(--minimum-touch-target);
      min-width: var(--minimum-touch-target);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: none;
      padding: 0;
      margin: 0;
      flex-shrink: 0;
      border: none;
      cursor: pointer;
    }

    .variant-item__remove--mobile svg {
      width: var(--icon-size-sm);
      height: var(--icon-size-sm);
    }

    .variant-item__remove--mobile:not(.variant-item__remove--hidden):hover {
      opacity: var(--opacity-70);
    }

    .quick-order-list .pagination {
      padding-block-start: var(--padding-2xl);
    }
  }

  .quick-order-list-disabled {
    pointer-events: none;
  }

  .quick-order-list-total {
    background: var(--color-background);
    border-block-start: var(--style-border-width) solid var(--color-border);
  }

  /* Tablet and Desktop styles - sticky footer */
  @media screen and (min-width: 750px) {
    .quick-order-list-total {
      position: sticky;
      inset-block-end: 0;
      z-index: var(--layer-raised);
    }
  }

  .quick-order-list-total__info,
  .quick-order-list-total__confirmation {
    min-height: 8rem;
    padding-block-start: var(--padding-4xl);
  }

  .quick-order-list-total__info {
    align-items: flex-start;
    gap: var(--gap-md);
  }

  .quick-order-list-total__confirmation {
    display: flex;
    gap: var(--gap-2xl);
    align-items: center;
    justify-content: center;
    padding: var(--padding-2xl) var(--padding-xl);
  }

  .quick-order-list-total__column {
    display: flex;
    flex-direction: column;
  }

  .quick-order-list-total__actions {
    display: flex;
  }

  /* Desktop layout - Use CSS Grid to match main table alignment */
  @media screen and (min-width: 750px) {
    .quick-order-list-total__info {
      display: grid;
      grid-template-columns:
        var(--quick-order-first-column-width) /* Variant column - takes 2 parts of available space */
        var(--quick-order-quantity-column-width) /* Fixed pixel width for quantity */
        var(--quick-order-price-column-width) /* Price column - takes 1 part */
        var(--quick-order-total-column-width); /* Total column - takes 1 part */
    }

    .quick-order-list-total__column {
      grid-column: 1;
      display: flex;
      flex-direction: column;
      gap: var(--gap-md);
    }

    .quick-order-list-total__summary {
      grid-column: 2 / 5;
      display: grid;
      grid-template-columns: var(--quick-order-quantity-column-width, 234px) auto;
    }

    .quick-order-list-total__items {
      grid-column: 1;
      justify-self: center;
      text-align: center;
    }

    .quick-order-list-total__price {
      grid-column: 3;
      justify-self: end;
      text-align: end;
    }
  }

  /* Tablet-specific overrides - 750px to 989px */
  @media screen and (min-width: 750px) and (max-width: 989px) {
    .quick-order-list-total__actions {
      flex-direction: column;
    }

    .quick-order-list-total__messages {
      align-items: stretch;
    }

    .quick-order-list__remove-all-button {
      padding-inline: 0;
    }
  }

  .quick-order-list__button.button--full-width {
    width: 100%;
  }

  .quick-order-list__button.button {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .quick-order-list-total .button--unstyled {
    border: none;
    box-shadow: none;
    background-color: transparent;
    color: var(--color-foreground);
    cursor: pointer;
  }

  .quick-order-list__remove-all-button svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    flex-shrink: 0;
  }

  .quick-order-list-total__items span {
    display: block;
    margin-block-end: var(--margin-xs);
  }

  .quick-order-list-total__items .h5 {
    margin: 0;
    letter-spacing: var(--letter-spacing--body-loose);
    opacity: var(--opacity-85);
  }

  .quick-order-list-total__subtotal-value {
    display: block;
    margin-block-end: var(--margin-xs);
    line-height: var(--font-paragraph--line-height);
  }

  /* Ensure text-component displays properly */
  .quick-order-list-total__subtotal-value text-component {
    display: block;
  }

  .quick-order-list-total__subtotal {
    margin: 0;
    letter-spacing: var(--letter-spacing--body-loose);
    opacity: var(--opacity-85);
  }

  .quick-order-list-total__tax-note {
    opacity: var(--opacity-subdued-text);
  }

  .quick-order-list-total__messages {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
  }

  .quick-order-list-total__success,
  .quick-order-list-total__error {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .quick-order-list-total__success .icon-success,
  .quick-order-list-total__error .quick-order-list-total__icon--error {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    color: inherit;
  }

  .quick-order-list-total__success .icon-success svg,
  .quick-order-list-total__error .quick-order-list-total__icon--error svg {
    width: 100%;
    height: 100%;
  }

  .quick-order-list-total__error:empty,
  .quick-order-list-total__success:empty {
    display: none;
  }

  .quick-order-list-total__info.confirmation-visible {
    display: none;
  }

  .quick-order-list-total__confirmation-text {
    white-space: nowrap;
  }

  .quick-order-list-total__confirmation-buttons {
    display: flex;
    gap: var(--gap-md);
    align-items: center;
  }

  .quick-order-list-total__confirmation button {
    margin: 0;
    white-space: nowrap;
  }

  .quick-order-list__remove-all-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-sm);
  }

  /* Mobile styles */
  @media screen and (max-width: 749px) {
    .quick-order-list-total__info {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .quick-order-list-total__column {
      order: 3; /* Move column to the end on mobile */
      width: 100%;
      flex: 1 1 auto;
    }

    .quick-order-list-total__actions {
      flex-direction: column;
      width: 100%;
    }

    .quick-order-list-total__messages {
      width: 100%;
      align-items: center;
      margin-block-start: var(--margin-xs);
    }

    .quick-order-list-total__summary {
      order: 1; /* First on mobile */
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      gap: var(--gap-md);
    }

    .quick-order-list-total__items {
      text-align: center;
      width: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--gap-xs);
    }

    .quick-order-list-total__items span {
      display: inline;
      margin-block-end: 0;
    }

    .quick-order-list-total__items .h5 {
      display: inline;
    }

    .quick-order-list-total__price {
      text-align: center;
      width: 100%;
    }

    .quick-order-list-total__product-total {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--gap-xs);
    }

    .quick-order-list-total__product-total .quick-order-list-total__subtotal-value {
      display: inline-block;
      margin-block-end: 0;
    }

    .quick-order-list-total__product-total .quick-order-list-total__subtotal {
      display: inline;
    }

    .quick-order-list__button,
    .quick-order-list__remove-all-button {
      width: 100%;
      justify-content: center;
    }

    .quick-order-list-total__confirmation {
      flex-direction: column;
    }

    .quick-order-list-total__tax-note {
      margin-block-start: var(--margin-xs);
    }
  }
/* END_SECTION:quick-order-list */

/* START_SECTION:slideshow (INDEX:49) */
.slideshow-section {
    slideshow-arrows .slideshow-control:first-of-type {
      margin-inline-start: var(--padding-xs);
    }

    slideshow-arrows .slideshow-control:last-of-type {
      margin-inline-end: var(--padding-xs);
    }

    .slideshow--with-hints--mobile-with-hints {
      gap: var(--slideshow-gap, 0);
      grid-column: 1 / -1;
    }

    /* Hide navigation arrows at boundaries for with-hints mode */
    .slideshow--with-hints--mobile-with-hints slideshow-arrows .slideshow-control {
      transition: opacity 0.3s ease;
    }

    /* Override animation for boundary arrows in with-hints mode on hover */
    slideshow-component.slideshow--with-hints--mobile-with-hints:has(
        slideshow-slide:first-child:not([aria-hidden='true'])
      )
      > slideshow-container
      > slideshow-arrows
      .slideshow-control--previous,
    slideshow-component.slideshow--with-hints--mobile-with-hints:has(
        slideshow-slide:last-child:not([aria-hidden='true'])
      )
      > slideshow-container
      > slideshow-arrows
      .slideshow-control--next {
      animation: none;
      opacity: 0;
      pointer-events: none;
    }

    @media screen and (max-width: 749px) {
      .slideshow--with-hints--mobile-with-hints slideshow-slides {
        padding-inline: var(--page-margin);
      }

      .slideshow--with-hints--mobile-with-hints slideshow-slide {
        width: 96%;
      }

      .slideshow--with-hints--mobile-with-hints slideshow-slides {
        gap: min(var(--slideshow-gap, 0), 10px);
      }
    }

    @media screen and (min-width: 750px) {
      .slideshow--with-hints {
        gap: var(--slideshow-gap, 0);
        grid-column: 1 / -1;
      }

      .slideshow--with-hints slideshow-slides {
        padding-inline: var(--page-margin);
        gap: var(--slideshow-gap, 0);
      }

      .slideshow--with-hints slideshow-slide {
        width: calc((100vw - var(--page-margin) * 2));
        overflow: hidden;
      }

      .slideshow--with-hints slideshow-arrows .slideshow-control {
        transition: opacity 0.3s ease;
      }

      slideshow-component.slideshow--with-hints:has(slideshow-slide:first-child:not([aria-hidden='true']))
        > slideshow-container
        > slideshow-arrows
        .slideshow-control--previous,
      slideshow-component.slideshow--with-hints:has(slideshow-slide:last-child:not([aria-hidden='true']))
        > slideshow-container
        > slideshow-arrows
        .slideshow-control--next {
        animation: none;
        opacity: 0;
        pointer-events: none;
      }
    }
  }
/* END_SECTION:slideshow */

/* CSS from block stylesheet tags */
/* START_BLOCK:_announcement (INDEX:51) */
.text-block:not(.text-block--full-width).rte,
  .text-block:not(.text-block--full-width).paragraph {
    /* Safari doesn't support pretty, so fallback to balance */
    text-wrap: balance;
    text-wrap: pretty;
  }

  .text-block:not(.text-block--full-width).h1,
  .text-block:not(.text-block--full-width).h2,
  .text-block:not(.text-block--full-width).h3,
  .text-block:not(.text-block--full-width).h4,
  .text-block:not(.text-block--full-width).h5,
  .text-block:not(.text-block--full-width).h6 {
    text-wrap: balance;
  }

  /* Hide underline unless text is using paragraph styles. */
  .text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) a {
    text-decoration-color: transparent;
  }

  .text-block h1,
  .text-block.h1 > * {
    margin-block: var(--font-h1--spacing);
  }

  .text-block h2,
  .text-block.h2 > * {
    margin-block: var(--font-h2--spacing);
  }

  .text-block h3,
  .text-block.h3 > * {
    margin-block: var(--font-h3--spacing);
  }

  .text-block h4,
  .text-block.h4 > * {
    margin-block: var(--font-h4--spacing);
  }

  .text-block h5,
  .text-block.h5 > * {
    margin-block: var(--font-h5--spacing);
  }

  .text-block h6,
  .text-block.h6 > * {
    margin-block: var(--font-h6--spacing);
  }

  .text-block > *:first-child {
    margin-block-start: 0;
  }

  .text-block > *:last-child {
    margin-block-end: 0;
  }

  .text-block--align-center,
  .text-block--align-center > * {
    margin-inline: auto;
  }

  .text-block--align-right,
  .text-block--align-right > * {
    margin-inline-start: auto;
  }
/* END_BLOCK:_announcement */

/* START_BLOCK:_blog-post-card (INDEX:52) */
.blog-post-card {
    display: flex;
    flex-direction: column;
    text-align: var(--text-align);
    column-gap: var(--columns-gap);
  }

  .blog-post-item--horizontal:has(.blog-post-card__image-container) .blog-post-card {
    & > *:first-child {
      flex-basis: 70%;
    }

    & > *:last-child {
      flex-basis: 30%;
    }
  }

  .blog-post-card__content {
    padding-block-start: 0.4rem;
    display: flex;
    flex-direction: column;
  }

  .blog-post-item--horizontal .blog-post-card__title-link .spacing-style,
  .blog-post-item--horizontal .blog-post-details,
  .blog-post-item--horizontal .blog-post-card__content-text {
    padding-inline-start: 0;
  }

  .blog-post-item .blog-post-card__image-container,
  .blog-post-item .blog-post-card__content {
    width: 100%;
  }

  /**
   * Horizontal layout (image left, content right)
   * Applied to hero posts based on total article count
   * Only applies the split layout when an image is actually present
   */
  .blog-post-item--horizontal .blog-post-card {
    flex-direction: row;

    @media screen and (max-width: 749px) {
      flex-direction: column;
    }
  }

  .blog-post-card__content a {
    display: block;
    text-wrap: pretty;
    text-decoration: none;
    padding-block-start: 0.75rem;
    color: var(--color-foreground);
  }

  .blog-post-card__content a:hover {
    color: var(--color-foreground-subdued);
  }

  a.blog-post-card__title-link {
    color: var(--color-foreground);

    &:hover {
      color: var(--color-foreground-subdued);
    }
  }
/* END_BLOCK:_blog-post-card */

/* START_BLOCK:_blog-post-content (INDEX:53) */
.blog-post-content {
    max-width: var(--normal-content-width);
    margin: 0 auto;
    color: var(--color, inherit);
  }

  .blog-post-content a {
    color: currentcolor;
  }
/* END_BLOCK:_blog-post-content */

/* START_BLOCK:_blog-post-description (INDEX:54) */
.blog-post-card__content-text a {
    color: currentcolor;
  }

  .blog-post-card__content-text a:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }
/* END_BLOCK:_blog-post-description */

/* START_BLOCK:_blog-post-featured-image (INDEX:55) */
.blog-post-featured-image {
    --width: 100%;
    --custom-width: 100%;

    position: relative;
    display: block;
    width: var(--width);
    margin-inline: auto;
  }

  .blog-post-featured-image.size-style {
    --width: var(--size-style-width, 100%);
  }

  .blog-post-featured-image--height-fit {
    height: fit-content;
  }

  .blog-post-featured-image--height-fill {
    height: 100%;
  }

  .blog-post-featured-image__image {
    aspect-ratio: var(--ratio);
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  @media screen and (max-width: 749px) {
    .blog-post-featured-image {
      --width: var(--width-mobile, var(--width));
      --custom-width: var(--custom-width-mobile, var(--custom-width));
    }

    .blog-post-featured-image.size-style {
      --width: var(--size-style-width-mobile, var(--size-style-width, 100%));
    }
  }
/* END_BLOCK:_blog-post-featured-image */

/* START_BLOCK:_blog-post-image (INDEX:56) */
.blog-post-card__image {
    width: 100%;
    object-fit: cover;
    object-position: center center;
    height: calc(var(--blog-post-card-img-height) * var(--blog-post-card-scale));
  }

  .blog-post-card__image--small {
    --blog-post-card-img-height: 280px;
  }

  .blog-post-card__image--medium {
    --blog-post-card-img-height: 340px;
  }

  .blog-post-card__image--large {
    --blog-post-card-img-height: 400px;
  }
/* END_BLOCK:_blog-post-image */

/* START_BLOCK:_blog-post-info-text (INDEX:57) */
.blog-post-details {
    display: flex;
    gap: var(--gap-sm);
    font-size: var(--font-paragraph-size);
    color: var(--color-details, var(--color-foreground-muted));
    white-space: nowrap;
    flex-wrap: wrap;
  }

  .blog-post-details > span {
    text-overflow: clip;
    overflow: hidden;
  }
/* END_BLOCK:_blog-post-info-text */

/* START_BLOCK:_card (INDEX:59) */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius, 0);
    border-width: var(--border-width, 0);
    border-style: var(--border-style, none);
    border-color: var(--border-color);
    container-type: inline-size;
  }

  .card__content {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: var(--layer-flat);
    display: flex;
    flex-direction: column;
    aspect-ratio: var(--card-ratio, 1);
  }

  .card__content.background-transparent {
    background-color: transparent;
  }

  /* When card has both image and content, use min-height from container query */
  .card__content--has-min-height {
    min-height: calc(100cqw / var(--card-ratio-numeric));
  }

  .card__inner {
    flex: 1;
  }

  .card__media-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
  }

  .card__media-wrapper video {
    z-index: var(--layer-raised);
  }

  .card__link {
    position: absolute;
    inset: 0;
    z-index: var(--layer-raised);
  }

  .card__link ~ :is(.card__content, .card__media-wrapper) {
    pointer-events: none;

    :is(a, button, input, textarea, select) {
      pointer-events: auto;
    }
  }

  /* Needs the .card__link ~ to be specific enough to take effect. */
  .card__link ~ .card__content--design-mode {
    pointer-events: auto;
  }
/* END_BLOCK:_card */

/* START_BLOCK:_carousel-content (INDEX:60) */
.carousel-content slideshow-slides {
    --slideshow-gap: var(--carousel-gap);
  }

  .carousel-content slideshow-slides > .card {
    flex: 0 0 auto;
    width: calc(
      (100% - (var(--carousel-gap, 8px) * (var(--carousel-mobile-columns, 2) - 1)) - var(--peek-next-slide-size, 0px)) /
        var(--carousel-mobile-columns, 2)
    );
  }

  @media screen and (min-width: 750px) {
    .carousel-content slideshow-slides > .card {
      width: calc(
        (100% - (var(--carousel-gap, 8px) * (var(--carousel-columns, 4) - 1)) - var(--peek-next-slide-size, 0px)) /
          var(--carousel-columns, 4)
      );
    }
  }

  .carousel-content .slideshow-control[disabled] {
    display: none;
  }

  .carousel-content slideshow-arrows {
    padding-inline: var(--util-page-margin-offset);
  }

  .carousel-content .slideshow-control--next {
    margin-inline-start: auto;
  }
/* END_BLOCK:_carousel-content */

/* START_BLOCK:_cart-products (INDEX:61) */
.cart-page__title + .cart-page__items {
    margin-block-start: var(--margin-lg);
  }
/* END_BLOCK:_cart-products */

/* START_BLOCK:_cart-summary (INDEX:62) */
.cart-summary__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-2xl);
    container-type: inline-size;
    padding: 0;
    position: sticky;
    top: 0;
    align-self: start;

    @media screen and (min-width: 750px) {
      padding: var(--padding-5xl);
      grid-row: 1 / -1;
    }
  }

  body:has(#header-group header-component[sticky]) .cart-summary__inner {
    top: var(--header-height, 0);
  }

  .cart-summary {
    @media screen and (max-width: 749px) {
      border: none;
    }

    @media screen and (min-width: 750px) {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: 1 / -1;
    }
  }

  .cart-summary--extend {
    height: 100%;

    @media screen and (min-width: 750px) {
      border-right: none;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  /* If extend is on, only include top and bottom borders when the border radius is 0. */
  .cart-summary--extend:not(.has-border-radius) {
    @media screen and (min-width: 750px) {
      border-top: none;
      border-bottom: none;
    }
  }

  .cart-summary--extend .cart-summary__inner {
    @media screen and (min-width: 750px) {
      height: 100%;
      grid-row: 2 / -1;
      padding: var(--padding-md) var(--page-margin) var(--padding-4xl);
      width: var(--sidebar-width);
    }
  }

  /* If extend is off, apply the border radius to the inner summary container */
  .cart-summary__inner.has-border-radius {
    border-radius: var(--border-radius);
  }

  /* On mobile, drop the summary's custom palette and inherit from the cart
     section so the summary visually merges with the rest of the cart page. */
  @media screen and (max-width: 749px) {
    :is(.section-background, .cart-summary, .cart-summary__inner).inherit-parent-scheme--mobile {
      --color: inherit;
      --color-rgb: inherit;
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-foreground-subdued: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --color-shadow: inherit;
      --color-shadow-rgb: inherit;
      --color-primary-button-text: inherit;
      --color-primary-button-background: inherit;
      --color-primary-button-border: inherit;
      --color-primary-button-hover-text: inherit;
      --color-primary-button-hover-background: inherit;
      --color-primary-button-hover-border: inherit;
      --color-secondary-button-text: inherit;
      --color-secondary-button-background: inherit;
      --color-secondary-button-border: inherit;
      --color-secondary-button-hover-text: inherit;
      --color-secondary-button-hover-background: inherit;
      --color-secondary-button-hover-border: inherit;
      --color-input-text: inherit;
      --color-input-text-rgb: inherit;
      --color-input-background: inherit;
      --opacity-10-25: inherit;
    }
  }
/* END_BLOCK:_cart-summary */

/* START_BLOCK:_cart-title (INDEX:63) */
.cart-title h1 {
    margin-block-end: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-sm);
  }

  .cart-title .cart-bubble {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: auto;
    padding: var(--cart-padding);
  }

  .cart-title .cart-bubble[data-maintain-ratio] {
    width: min(1lh, 26px);
    height: min(1lh, 26px);
  }

  .cart-title .cart-bubble .cart-bubble__background {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  }

  .cart-title .cart-bubble__text {
    color: var(--color-foreground);
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    font-size: clamp(var(--font-size--3xs), 0.75em, var(--font-size--xs));
  }
/* END_BLOCK:_cart-title */

/* START_BLOCK:_collection-image (INDEX:66) */
.collection-image {
    width: var(--image-width);
  }

  .collection-image .collection-image__featured-image {
    aspect-ratio: var(--ratio);
    object-fit: cover;
  }
/* END_BLOCK:_collection-image */

/* START_BLOCK:_collection-link (INDEX:68) */
.collection-links__link {
    --min-font-size: var(--font-size--4xl);
    --max-font-size: var(--font-size--6xl);

    display: flex;
    color: inherit;
    text-decoration: none;
    text-wrap: pretty;
    font-size: clamp(var(--min-font-size), 4.5vw, var(--max-font-size));

    /* When hovering over container, dim non-current links (text layout only) */
    @media (hover: hover) {
      collection-links-component:not([layout='spotlight']) .collection-links__container:hover & {
        opacity: var(--opacity-subdued-text);
      }

      collection-links-component:not([layout='spotlight']) .collection-links__container:hover &[aria-current='true'] {
        opacity: 1;
      }
    }

    [layout='spotlight'] & {
      /* Spotlight layout: dimmed by default */
      opacity: var(--disabled-opacity);

      &[aria-current='true'] {
        opacity: 1;
      }
    }

    .text-block {
      display: inline-block;
    }

    @media screen and (max-width: 749px) {
      --min-font-size: var(--font-size--3xl);
      --max-font-size: var(--font-size--5xl);

      [layout='spotlight'] & {
        white-space: normal;
        scroll-snap-align: start;
        text-wrap: pretty;

        span {
          text-wrap: pretty;
        }
      }
    }
  }

  .collection-links__count {
    font-size: 0.5em;
    opacity: var(--disabled-opacity);
    font-weight: var(--font-paragraph--weight);
  }

  .collection-links__image {
    align-items: center;
    justify-content: center;

    &:not([hidden]) {
      display: flex;
    }

    &[reveal] {
      --offset: 15px;

      position: fixed;
      top: 0;
      left: 0;
      z-index: var(--layer-temporary);
      display: block;
      translate: calc(var(--x) + var(--offset)) calc(var(--y) + var(--offset));
      pointer-events: none;
      width: auto;

      image-block {
        --image-height-basis: 5rem;

        height: var(--image-height);
      }
    }
  }
/* END_BLOCK:_collection-link */

/* START_BLOCK:_featured-blog-posts-card (INDEX:72) */
.featured-blog-posts-card {
    width: 100%;
    position: relative;
    height: 100%;
    text-align: var(--text-align);
  }

  .featured-blog-posts-card__inner {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: var(--layer-flat);
    pointer-events: none;
    gap: var(--gap);
  }

  .featured-blog-posts-card__link {
    position: absolute;
    inset: 0;

    /* allows focus outline to have radius in supported browsers */
    border-radius: var(--border-radius);
  }

  .resource-list--grid .resource-list__item {
    min-width: 0;
  }

  /* Editorial layout */
  .resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio {
    .featured-blog-posts-card__image,
    .blog-placeholder-svg {
      aspect-ratio: 99;
      height: 100%;
    }

    .featured-blog-posts-card__inner {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .featured-blog-posts-card__content {
      --flex-wrap: nowrap;

      flex-shrink: 0;
      height: auto;
    }
  }

  @media screen and (max-width: 749px) {
    .resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio {
      .featured-blog-posts-card__image,
      .blog-placeholder-svg {
        aspect-ratio: unset;
      }
    }
  }

  .featured-blog-posts-card__inner a,
  .featured-blog-posts-card__inner button {
    pointer-events: auto;
  }

  /* allow all blocks to be selectable in editor preview */
  .shopify-design-mode .featured-blog-posts-card__content * {
    pointer-events: auto;
  }

  .featured-blog-posts-card__content {
    --flex-wrap: wrap;

    display: flex;
    position: relative;
    height: 100%;
    width: 100%;
    gap: var(--gap);
  }

  .featured-blog-posts-card__content h4 {
    margin: 0;
  }
/* END_BLOCK:_featured-blog-posts-card */

/* START_BLOCK:_featured-blog-posts-image (INDEX:73) */
.featured-blog-posts-card__image {
    width: 100%;
  }

  .featured-blog-posts-card__image .blog-placeholder-svg {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
/* END_BLOCK:_featured-blog-posts-image */

/* START_BLOCK:_featured-product-gallery (INDEX:75) */
.featured-product-section .card-gallery .quick-add__button {
    position: absolute;
    right: var(--quick-add-offset, var(--padding-sm));
    bottom: var(--quick-add-offset, var(--padding-sm));
  }
/* END_BLOCK:_featured-product-gallery */

/* START_BLOCK:_featured-product (INDEX:78) */
.featured-product-content-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--gap-sm);
  }
/* END_BLOCK:_featured-product */

/* START_BLOCK:_footer-social-icons (INDEX:79) */
.social-icons__wrapper {
    display: flex;
    gap: var(--gap-sm);
    flex-wrap: wrap;
    justify-content: center;

    @media screen and (min-width: 750px) {
      flex-wrap: nowrap;
      justify-content: flex-start;
    }
  }
/* END_BLOCK:_footer-social-icons */

/* START_BLOCK:_header-logo (INDEX:80) */
.header-logo {
    display: flex;
    height: 100%;
    font-size: var(--font-size--md);
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    font-style: var(--font-style);
    color: var(--color-foreground);
    justify-content: center;
    align-items: center;
    text-decoration: none;

    &[data-hidden-on-home-page] {
      display: none;

      #header-component:is(
          [sticky='always']:not([data-scroll-direction='none']),
          [sticky='scroll-up'][data-scroll-direction='up']
        )
        & {
        display: flex;
      }
    }

    @media screen and (max-width: 749px) {
      padding: 0;
    }

    @media screen and (min-width: 750px) {
      flex-shrink: 0;
    }

    &:hover {
      text-decoration: none;
    }
  }

  .header-logo__image {
    object-fit: contain;
    height: var(--header-logo-image-height-mobile);
    width: var(--header-logo-image-width-mobile);

    @media screen and (min-width: 750px) {
      height: var(--header-logo-image-height);
      width: var(--header-logo-image-width);
    }
  }

  .header-logo:has(.header-logo__image-container--inverse) .header-logo__image-container--original {
    display: var(--header-logo-display, block);
  }

  .header-logo__image-container--inverse {
    display: var(--header-logo-inverse-display, none);
  }

  /* ----------------------------------------------------------------
     Logo ueber Bild/Video rein weiss darstellen

     Greift nur, wenn in den Theme-Einstellungen KEIN eigenes helles Logo
     hinterlegt ist. Statt die Farben umzukehren (das ergibt aus dem dunklen
     Blauton ein schmutziges Beige mit grauen Kanten) wird das Logo erst
     komplett geschwaerzt und dann umgekehrt: alles Sichtbare wird rein weiss,
     die weichen Bildkanten bleiben weich, weil die Transparenz unangetastet
     bleibt.

     Sobald der Header festgescrollt ist oder ein Menue offen ist, zeigt das
     Theme die deckende Leiste - dann wird das Logo wieder normal dargestellt.
     ---------------------------------------------------------------- */
  .header-logo[data-logo-auto-invert] .header-logo__image {
    transition: filter var(--animation-speed) var(--animation-easing);
  }

  .header[transparent]:not([data-sticky-state='active']):not(
      :has(.menu-list__link:is(:hover, [aria-expanded='true']))
    ):not(:has(.mega-menu__list:hover))
    .header-logo[data-logo-auto-invert]
    .header-logo__image {
    filter: brightness(0) invert(1);

    /* Mobil liegt die Kopfzeile nicht im Bild, sondern steht als deckende weisse
       Leiste darueber - dort bleibt das Logo in seiner normalen Farbe. */
    @media screen and (max-width: 749px) {
      filter: none;
    }
  }
/* END_BLOCK:_header-logo */

/* START_BLOCK:_header-menu (INDEX:81) */
.header__drawer {
    --header-drawer-min-height: 60px;
    display: flex;
    min-height: var(--header-drawer-min-height);
    align-items: center;
  }

  #header-component[data-menu-style='drawer'] .header__drawer {
    display: flex;
    min-height: var(--header-drawer-min-height);
  }

  @media screen and (min-width: 750px) {
    #header-component[data-menu-style='menu'] .header__drawer {
      display: none;
      min-height: 0;
    }
  }

  .header--compact .header__drawer {
    min-height: var(--minimum-touch-target);
  }

  .menu-list--mobile {
    &.menu-list {
      display: grid;
    }

    & .menu-list__list {
      width: max-content;
      margin-inline: auto;
      gap: var(--menu-horizontal-gap);
    }

    & li {
      width: max-content;
      padding-block: var(--padding-sm);
    }

    & li:first-of-type {
      padding-inline-start: var(--menu-horizontal-gap);
    }

    & li:last-of-type {
      padding-inline-end: var(--menu-horizontal-gap);
    }

    & a {
      color: var(--color-foreground);
    }
  }

  .menu-list__scroll-container {
    position: relative;
    overflow-x: auto;
    mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
    padding-block: var(--padding-2xs);
  }

  .menu-list {
    --menu-horizontal-gap: var(--gap-xl);
    --menu-vertical-gap: var(--gap-xl);

    display: flex;
    height: 100%;
  }

  .menu-list__list {
    display: flex;
    justify-content: var(--grid-area-alignment);
  }

  .menu-list__list-item {
    flex-shrink: 0;
    white-space: nowrap;
    display: flex;
    align-items: center;
    height: 100%;
  }

  .menu-list__list-item[aria-hidden='true'] {
    visibility: hidden;
  }

  .menu-list__link {
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: var(--menu-top-level-font-weight);
    font-size: var(--menu-top-level-font-size);
    line-height: var(--menu-top-level-font-line-height);
    text-transform: var(--menu-top-level-font-case);
    color: var(--menu-top-level-font-color);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    height: 100%;
    margin-block: 0;

    &::after {
      content: '';
      position: absolute;
      display: none;
      top: var(--header-padding);
      height: var(--box-height);
      left: 0;
      right: 0;
    }

    &[data-safety-box='true']::after {
      display: block;
    }

    &:hover,
    &:focus {
      color: var(--menu-top-level-font-color);
    }

    @media screen and (min-width: 750px) {
      font-size: var(--menu-top-level-font-size-desktop);
    }
  }

  .menu-list__link-title {
    padding-inline: calc(var(--gap-xl) / 2);
  }

  /* Menuepunkt mit Etikett bleibt einzeilig */
  .menu-list__link-title:has(.menu-badge) {
    display: flex;
    align-items: center;
    white-space: nowrap;
  }
  [slot='overflow'] .menu-list__link-title {
    padding-inline: 0;
  }

  .menu-list__list-item:not([slot='overflow']) {
    flex-direction: column;
  }
  .menu-list__list-item:not([slot='overflow'])::after {
    content: '';
    width: 100%;
    height: var(--header-padding);
    margin-bottom: calc(-1 * var(--header-padding));
  }

  [slot='overflow'] > .menu-list__link::after {
    content: none;
  }

  /*
    High specificity selectors to subdue non-hovered links without javascript.
    If the need for js-generated `hovered` and `focused` classes arises for another reason we can simplify these.
  */
  .menu-list:where(:has(.menu-list__list-item:hover)),
  .menu-list:where(:has(.menu-list__list-item:focus-within)),
  .menu-list:where(:has(.menu-list__list-item:not([aria-hidden='true']) .menu-list__link--active)) {
    .menu-list__link {
      color: rgb(var(--menu-top-level-font-color-rgb) / var(--opacity-subdued-text));
    }
  }

  /* stylelint-disable-next-line selector-max-specificity */
  .menu-list:not(:has(.menu-list__list-item:hover)) .menu-list__link--active,
  .menu-list .menu-list__list-item:where(:hover, :focus-within) .menu-list__link,
  .menu-list .menu-list__list-item[slot='overflow'] .menu-list__link[aria-expanded='true'] {
    color: var(--menu-top-level-font-color);
  }

  .overflow-menu::part(list) {
    /* Make sure focus outline is not cut off by overflow hidden */
    --focus-outline-size: calc(var(--focus-outline-offset) + var(--focus-outline-width));

    gap: 0;
    margin-inline: calc(-1 * var(--menu-horizontal-gap) / 2);
  }

  .overflow-menu {
    /* stylelint-disable-next-line declaration-no-important */
    background-color: transparent !important;
    padding: var(--focus-outline-size);
    margin: calc(-1 * var(--focus-outline-size));
  }

  /** mega menu **/
  .menu-list__submenu,
  .overflow-menu::part(overflow) {
    --submenu-padding-block-start: var(--padding-3xl);
    --submenu-padding-block-end: var(--padding-3xl);

    background-color: transparent;
  }

  .header__row[style*='--border-bottom-width: 0px'] {
    .menu-list__submenu.background-matches-parent,
    .overflow-menu.background-matches-parent::part(overflow) {
      --submenu-padding-block-start: 0px;
    }
  }

  .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__submenu,
  .overflow-menu::part(overflow) {
    --submenu-content-opacity: 0;
    --submenu-content-animation: opacity calc(var(--submenu-animation-speed) * 0.75) var(--animation-easing);

    visibility: hidden;
    position: absolute;
    width: 100%;
    left: 0;
    top: calc(100% - 1px + var(--border-bottom-width) - (var(--full-open-header-height) - var(--submenu-height)));
    z-index: var(--layer-header-menu);
    padding-inline: var(--padding-inline);
    /* Clip path starts at header height so it doesn't mess with the pointer events in the header */
    clip-path: rect(var(--header-height) 100% var(--full-open-header-height) 0); /* stylelint-disable-line */
    transition: clip-path var(--submenu-animation-speed) var(--ease-out-cubic); /* stylelint-disable-line */
  }

  [data-submenu-overlap-bottom-row] {
    .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__submenu,
    .overflow-menu::part(overflow) {
      clip-path: rect(var(--top-row-height) 100% var(--full-open-header-height) 0); /* stylelint-disable-line */
    }
  }

  /* Show the submenus on hover */
  .menu-list__list-item:has([aria-expanded='true']) > .menu-list__submenu,
  /* Show the overflow menu when a menu item is hovered */
  .overflow-menu:has([slot="overflow"] [aria-expanded='true'])::part(overflow-list),
  /* Keep the submenus open when they are hovered */
  .menu-list__submenu:is(:hover),
  .overflow-menu::part(overflow):hover {
    --submenu-content-opacity: 1;

    visibility: visible;
  }

  .overflow-menu::part(overflow) {
    --menu-top-level-font-size: var(--font-size--xlarge);

    display: grid;
    grid-template-columns: var(--full-page-grid-with-margins);
  }

  .overflow-menu::part(overflow-list) {
    position: relative;
    display: grid;
    grid-template-columns: minmax(auto, 200px) 1fr;
    grid-template-areas: 'left right';
    grid-template-rows: max-content;
    grid-gap: 0;
    grid-column: 2;
  }

  .menu-list__list-item:is([slot='overflow']) {
    --menu-top-level-font-color: var(--color-foreground);
    --menu-top-level-font-color-rgb: var(--color-foreground-rgb);

    display: contents;
    white-space: normal;

    .menu-list__link {
      grid-area: left;
      grid-row: auto;
      height: min-content;
      font-size: var(--font-size--xl);
      transition: var(--submenu-content-animation);
    }

    .menu-list__submenu {
      visibility: hidden;
      grid-row: 1;
      grid-area: right;
      grid-row-end: span calc(var(--overflow-count) + 1);
      padding-inline-start: var(--menu-horizontal-gap);
    }

    .menu-list__submenu-inner {
      transform: none;
      grid-column: unset;
      padding-block: 0;
    }

    .menu-list__link[aria-expanded='true'] + .menu-list__submenu {
      visibility: visible;
    }
  }

  .header-menu {
    height: 100%;
  }

  .menu-list__submenu-inner {
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .menu-list__submenu-inner,
  .overflow-menu::part(overflow-list) {
    padding-block-start: var(--submenu-padding-block-start);
    padding-block-end: var(--submenu-padding-block-end);
    padding-inline: var(--section-padding-inline);
    opacity: var(--submenu-content-opacity);
    transition: var(--submenu-content-animation);
    transform: translateY(calc(var(--full-open-header-height) - var(--submenu-height)));

    /* Make overflow menu scrollable when content exceeds viewport */
    max-height: calc(80vh - var(--header-height));
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color-foreground-rgb) / var(--opacity-40)) transparent;
  }

  .mega-menu__link {
    font-family: var(--menu-child-font-family);
    font-style: var(--menu-child-font-style);
    font-weight: var(--menu-child-font-weight);
    font-size: var(--menu-child-font-size);
    line-height: var(--menu-child-font-line-height);
    text-transform: var(--menu-child-font-case);
    color: var(--menu-child-font-color);
    white-space: normal;
    text-decoration: none;
    display: inline-flex;
    padding: var(--padding-2xs) 0;

    &:hover {
      color: var(--menu-child-active-font-color);
    }
  }

  .mega-menu__link--parent {
    font-family: var(--menu-parent-font-family);
    font-style: var(--menu-parent-font-style);
    font-weight: var(--menu-parent-font-weight);
    font-size: var(--menu-parent-font-size);
    line-height: var(--menu-parent-font-line-height);
    text-transform: var(--menu-parent-font-case);
    color: var(--menu-parent-font-color);

    &:hover {
      color: var(--menu-parent-active-font-color);
    }
  }

  /* Reine Spaltenueberschriften: kein Link, also auch keine Link-Rueckmeldung */
  .mega-menu__link--heading {
    cursor: default;

    &:hover {
      color: var(--menu-parent-font-color);
    }
  }

  @media screen and (max-width: 989px) {
    .mega-menu__content-list-item--hidden-tablet {
      display: none;
    }
  }

  .mega-menu__link:has(.mega-menu__link-image) {
    display: flex;
    flex-direction: column;
    padding-inline: 0;
    padding-block: var(--padding-sm) 0;
  }

  .mega-menu__link-image {
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--padding-sm);
    object-fit: cover;
    border-radius: var(--menu-image-border-radius);
  }

  /* Fix alignment for collection image mode links without images */

  /* Target only top-level links (direct children of column > div) in collection image mode */
  .mega-menu__grid:has(.mega-menu__link-image)
    .mega-menu__column
    > div
    > .mega-menu__link:not(:has(.mega-menu__link-image)) {
    display: flex;
    flex-direction: column;
    padding-inline: 0;
    padding-block: var(--padding-sm) 0;
  }

  .mega-menu__grid:has(.mega-menu__link-image)
    .mega-menu__column
    > div
    > .mega-menu__link:not(:has(.mega-menu__link-image))::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--padding-sm);
    background-color: var(--color-foreground-muted);
    opacity: 0.1;
    border-radius: var(--menu-image-border-radius);
  }

  .mega-menu__grid {
    display: grid;
    grid-template-columns: repeat(var(--menu-columns-tablet), minmax(0, 1fr));
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);
    width: 100%;

    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(var(--menu-columns-desktop), minmax(0, 1fr));
    }
  }

  .mega-menu__column {
    grid-column: span 1;
  }

  .mega-menu__column--span-2 {
    grid-column: span 2;
  }

  .mega-menu__column--span-3 {
    grid-column: span 3;
  }

  .mega-menu__column--span-4 {
    grid-column: span 4;
  }

  .mega-menu__column--wide-collection-image {
    grid-column: span 1;

    @media screen and (min-width: 990px) {
      grid-column: span 2;
    }
  }

  .mega-menu__submenu .mega-menu__column--wide-collection-image {
    grid-column: span 1;
  }

  .mega-menu__content-list {
    display: grid;
    justify-content: end;
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);
  }

  .mega-menu__content-list--products {
    grid-template-columns: repeat(var(--menu-content-columns-tablet), minmax(0, 1fr));

    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(var(--menu-content-columns-desktop), minmax(0, 1fr));
    }
  }

  .mega-menu__content-list--collections {
    grid-template-columns: repeat(var(--menu-content-columns-tablet), minmax(0, 300px));

    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(var(--menu-content-columns-desktop), minmax(0, 300px));
    }
  }

  .mega-menu__list {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span var(--menu-columns-tablet);
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);

    @media screen and (min-width: 990px) {
      grid-column: span var(--menu-columns-desktop);
    }
  }

  .mega-menu__content {
    grid-column: span var(--menu-content-columns-tablet) / -1;

    @media screen and (min-width: 990px) {
      grid-column: span var(--menu-content-columns-desktop) / -1;
    }
  }

  .menu-list__list-item[slot='overflow'] .section {
    grid-template-columns: 1fr;
  }

  .menu-list__list-item[slot='overflow'] .section .mega-menu__grid {
    grid-column: 1;
  }

  .mega-menu__content-list li {
    white-space: normal;
  }

  /* mega more menu */
  .mega-menu__more-list {
    --menu-child-font-size: var(--font-size--xl);

    width: 200px;
  }

  .mega-menu__submenu {
    /* preserves the inherited grid layout when this submenu wrapper is used */
    display: contents;
  }

  /* Hide product cards in collapsed submenus from the IntersectionObserver that fires product view events */
  .menu-list__list-item:not(:has([aria-expanded='true'])) > .menu-list__submenu product-component {
    display: none;
  }
/* END_BLOCK:_header-menu */

/* START_BLOCK:_image (INDEX:84) */
.image-block__placeholder {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
  }

  image-block {
    --image-height-basis: 10rem;
    --image-height-small: calc(var(--image-height-basis) * 2);
    --image-height-medium: calc(var(--image-height-basis) * 3);
    --image-height-large: calc(var(--image-height-basis) * 4);

    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: var(--ratio);
    width: 100%;
    max-width: calc(var(--image-height) * var(--ratio));
    height: var(--image-height);
    overflow: hidden;

    @media screen and (min-width: 750px) {
      --image-height-small: calc(var(--image-height-basis) * 2.5);
      --image-height-medium: calc(var(--image-height-basis) * 3.5);
      --image-height-large: calc(var(--image-height-basis) * 4.5);
    }

    @media screen and (max-width: 749px) {
      height: auto;
    }

    &[height='small'] {
      --image-height: var(--image-height-small);
    }

    &[height='medium'] {
      --image-height: var(--image-height-medium);
    }

    &[height='large'] {
      --image-height: var(--image-height-large);
    }

    &[ratio='portrait'] {
      --ratio: 4 / 5;
    }

    &[ratio='square'] {
      --ratio: 1 / 1;

      @media screen and (min-width: 750px) {
        max-width: var(--image-height);
      }
    }

    &[ratio='landscape'] {
      --ratio: 16 / 9;
    }

    img {
      object-fit: cover;
      width: 100%;
      height: auto;
      aspect-ratio: var(--ratio);
      border-radius: var(--border-radius);
    }
  }
/* END_BLOCK:_image */

/* START_BLOCK:_marquee (INDEX:88) */
marquee-component {
    display: block;
    width: 100%;
    overflow: hidden;
    background-color: var(--color-background);
  }

  .marquee__wrapper {
    display: flex;
    gap: var(--marquee-gap);
    width: fit-content;
    white-space: nowrap;
  }

  .marquee__content {
    min-width: max-content;
    display: flex;
    gap: var(--marquee-gap);
  }

  .marquee__content :is(p, h1, h2, h3, h4, h5, h6) {
    white-space: nowrap;
  }

  .marquee__content .marquee__repeated-items * {
    max-width: none;
  }

  .marquee__repeated-items {
    min-width: max-content;
    display: flex;
    gap: var(--marquee-gap);
    align-items: center;
    justify-content: center;
  }

  .marquee__repeated-items > * {
    align-content: center;
  }

  .hero__content-wrapper.layout-panel-flex--column marquee-component {
    --margin-inline: var(--full-page-margin-inline-offset);

    width: -webkit-fill-available;
    min-height: max-content;
  }

  @media (prefers-reduced-motion: no-preference) {
    marquee-component:not([data-disabled]) .marquee__wrapper {
      animation: marquee-motion var(--marquee-speed) linear infinite var(--marquee-direction);
    }
  }

  @keyframes marquee-motion {
    to {
      transform: translate3d(calc(-50% - (var(--marquee-gap) / 2)), 0, 0);
    }
  }
/* END_BLOCK:_marquee */

/* START_BLOCK:_product-buybox (INDEX:90) */
.product-buybox {
    display: flex;
    align-self: start;
    justify-content: center;
    /* Der Kaufkasten ist so hoch wie sein Inhalt. Ohne das streckt ihn die
       Standardausrichtung eines Flex-Kindes auf die Hoehe der Zeile — und die
       gibt die Bilderspalte vor. Sichtbar wurde das als Rand, der unter den
       Zahlungssymbolen weiterlaeuft, und zwar solange, bis das Kleben beim
       Scrollen die Hoehe neu berechnete.
       Vorher stand dafuer ein height: min-content am Kind. Das ist die
       Ursache statt der Wirkung: Nicht die Hoehe war falsch, die Streckung
       war es. */
    align-items: flex-start;
  }

  /* Karte wie die Finder-Kaufbox — auf ALLEN Breiten gleich. Rahmen, Radius
     und Polsterung kommen aus den Einstellungen des Bausteins, damit es eine
     Stelle gibt und nicht zwei: Dort stand ein 4px-Rahmen, den diese Regel
     auf dem Desktop ueberschrieb und auf dem Handy nicht — deshalb sahen die
     beiden verschieden aus. */
  /* Kein height: min-content mehr. Die Flaeche traegt Rand und Rundung; ist
     sie kuerzer als ihr Inhalt, laeuft der Inhalt unten aus dem Rahmen —
     beim Kleben faellt das als Versatz zwischen Linie und Fuellung auf.
     align-self: start oben genuegt, damit die Spalte nicht mitwaechst. */

  /* Mitlaufende Kaufspalte, wenn die Kopfzeile klebt */
  body:has(#header-group #header-component[data-sticky-state='active']) .product-buybox.sticky-content--desktop {
    --sticky-header-offset: var(--header-height);
  }







  /* Der Knopf darf schmaler werden, seine Beschriftung aber nicht umbrechen —
     sonst steht "In den Warenkorb" zweizeilig im Knopf. */

  /* Flaeche, Rand, Rundung und Polsterung stehen als Einstellungen am
     Block und damit an EINER Stelle. Hier steht dazu nichts mehr: Bis zum
     19.08.2026 lagen dieselben Werte doppelt vor — einmal in der Vorlage,
     einmal hier mit #ffffff, Radius 4 und einem Schatten. Sichtbar wurde
     immer der letzte, und welcher das war, hing von der Bildschirmbreite ab.

     Die Kaufbox ist eine Commerce-Zone, keine Karte: weisser Grund,
     Haarlinie, kein Schatten. */

  /* Reine Kaufbox: Preis, Verfuegbarkeit, Knopf, Beleg. Alles Abwaegende —
     Passung, Vorteile, Technik — steht davor in der Mittelspalte.

     Einzige Abweichung vom Theme ist die ANORDNUNG: untereinander statt
     nebeneinander, weil die Zeile in dieser Spaltenbreite ohnehin umbricht.
     Die Reihenfolge kommt aus dem Theme selbst — es gibt die Anzahl vor dem
     Kaufknopf aus. Keine eigenen order-Regeln: Greift eine davon und die
     andere nicht, dreht sich die Reihenfolge um, genau das war passiert.

     Am AUSSEHEN der Bausteine wird hier nichts geaendert. Knopf und
     Zahlungssymbole muessen ueberall im Shop gleich sein, sonst gibt es
     keine Stelle mehr, an der man sie fuer alle aendern kann. */
  /* Menge UEBER dem Warenkorbknopf, beide ueber die volle Breite.
     Die Reihenfolge kommt aus dem Theme — es gibt die Menge zuerst aus.

     WICHTIG: flex-basis wirkt auf die Hauptachse. Das Theme setzt jedem Kind
     der Knopfzeile `flex: 1 1 var(--buy-button-preferred-width)`, also 185px
     Basis. In der Zeile sind das 185px BREITE, und ein leerer Behaelter
     schrumpft davon auf null. In der Spalte waeren es 185px HOEHE — der leere
     Express-Checkout-Container stand dadurch als anderthalb Knopfhoehen
     Weissraum unter dem Kaufknopf.

     Deshalb hier zurueck auf Inhaltshoehe. Die Breite kommt weiterhin vom
     Standard (align-items: stretch), das Aussehen der Bausteine bleibt
     unberuehrt. */
  .product-buybox .product-form-buttons {
    flex-direction: column;
  }

  /* Klassenname doppelt: Die Theme-Regel
     `.product-form-buttons > *:not(.quantity-selector-wrapper, …)` hat
     dieselbe Spezifitaet wie eine einfache Fassung dieser Regel und steht
     spaeter im Stylesheet — sie wuerde gewinnen. Das Verdoppeln hebt die
     Spezifitaet um eine Klasse, ohne !important und ohne fremde Klassen
     mitzubenutzen. */
  .product-buybox.product-buybox .product-form-buttons > * {
    flex: 0 0 auto;
  }

  /* Die Mengenwahl haelt ihre Breite ueber eine feste Flex-Basis von 124px
     (--quantity-selector-width). Fuer ein Flex-Element schlaegt die Basis
     jede Breitenangabe — `width: 100%` lief deshalb ins Leere.

     Statt dagegen zu arbeiten, wird die Stellschraube des Themes selbst
     gedreht. Nur die Breite; Hoehe, Rahmen und Aussehen bleiben unberuehrt. */
  .product-buybox.product-buybox .product-form-buttons .quantity-selector-wrapper {
    width: 100%;
  }

  .product-buybox.product-buybox .product-form-buttons .quantity-selector {
    --quantity-selector-width: 100%;
    flex-grow: 1;
  }


  /* Der reduzierte Preis traegt KEINE Signalfarbe mehr (Kanalregel,
     24.08.2026): Farbiger Text ist im Shop Status — passt, passt nicht, auf
     Lager. Ein Preis in Rot mitten im Fliesstext liest sich aus dem
     Gedaechtnis wie eine Absage, weil Fehlerrot und Deep Red nur dE 20
     auseinanderliegen.

     Die Aussage traegt jetzt die Typografie: Der Altpreis steht gedimmt und
     durchgestrichen daneben, so wie das Theme ihn ohnehin zeichnet. Das ist
     die Form, in der ein Preisvorteil ueberall verstanden wird — und sie
     kommt ohne eine Farbe aus, die schon vergeben ist. */

  /* Der Preis ist die staerkste monetaere Information der Zone und muss das
     auch aussehen. Der Theme-Preis erbt sonst die Absatzgroesse — 14 Pixel
     neben einem 52 Pixel hohen Kaufknopf. Kodex, Sale: Rangfolge Kaufaktion,
     Preis, Vorteil, Streichpreis. */
  /* Preisgroesse und der aufgehobene Beschnitt stehen NICHT hier, sondern
     in snippets/product-information-content.liquid. Grund: Shopify laedt das
     Stylesheet eines Bausteins nur, wenn der Baustein auf der Seite steht —
     und im Zweispalter gibt es diesen hier gar nicht. Die Regeln griffen
     deshalb genau dort nicht, wo sie gebraucht wurden. */

  /* Reine Kaufbox: Preis, Verfuegbarkeit, Knopf, Beleg. Alles Abwaegende —
     Passung, Vorteile, Technik — steht davor in der Mittelspalte.

     Einzige Abweichung vom Theme ist die ANORDNUNG: untereinander statt
     nebeneinander, weil die Zeile in dieser Spaltenbreite ohnehin umbricht.
     Die Reihenfolge kommt aus dem Theme selbst — es gibt die Anzahl vor dem
     Kaufknopf aus. Keine eigenen order-Regeln: Greift eine davon und die
     andere nicht, dreht sich die Reihenfolge um, genau das war passiert.

     Am AUSSEHEN der Bausteine wird hier nichts geaendert. Knopf und
     Zahlungssymbole muessen ueberall im Shop gleich sein, sonst gibt es
     keine Stelle mehr, an der man sie fuer alle aendern kann. */
  /* Menge UEBER dem Warenkorbknopf, beide ueber die volle Breite.
     Die Reihenfolge kommt aus dem Theme — es gibt die Menge zuerst aus.

     WICHTIG: flex-basis wirkt auf die Hauptachse. Das Theme setzt jedem Kind
     der Knopfzeile `flex: 1 1 var(--buy-button-preferred-width)`, also 185px
     Basis. In der Zeile sind das 185px BREITE, und ein leerer Behaelter
     schrumpft davon auf null. In der Spalte waeren es 185px HOEHE — der leere
     Express-Checkout-Container stand dadurch als anderthalb Knopfhoehen
     Weissraum unter dem Kaufknopf.

     Deshalb hier zurueck auf Inhaltshoehe. Die Breite kommt weiterhin vom
     Standard (align-items: stretch), das Aussehen der Bausteine bleibt
     unberuehrt. */
  .product-buybox .product-form-buttons {
    flex-direction: column;
  }

  /* Klassenname doppelt: Die Theme-Regel
     `.product-form-buttons > *:not(.quantity-selector-wrapper, …)` hat
     dieselbe Spezifitaet wie eine einfache Fassung dieser Regel und steht
     spaeter im Stylesheet — sie wuerde gewinnen. Das Verdoppeln hebt die
     Spezifitaet um eine Klasse, ohne !important und ohne fremde Klassen
     mitzubenutzen. */
  .product-buybox.product-buybox .product-form-buttons > * {
    flex: 0 0 auto;
  }

  /* Die Mengenwahl haelt ihre Breite ueber eine feste Flex-Basis von 124px
     (--quantity-selector-width). Fuer ein Flex-Element schlaegt die Basis
     jede Breitenangabe — `width: 100%` lief deshalb ins Leere.

     Statt dagegen zu arbeiten, wird die Stellschraube des Themes selbst
     gedreht. Nur die Breite; Hoehe, Rahmen und Aussehen bleiben unberuehrt. */
  .product-buybox.product-buybox .product-form-buttons .quantity-selector-wrapper {
    width: 100%;
  }

  .product-buybox.product-buybox .product-form-buttons .quantity-selector {
    --quantity-selector-width: 100%;
    flex-grow: 1;
  }


  /* Der reduzierte Preis traegt KEINE Signalfarbe mehr (Kanalregel,
     24.08.2026): Farbiger Text ist im Shop Status — passt, passt nicht, auf
     Lager. Ein Preis in Rot mitten im Fliesstext liest sich aus dem
     Gedaechtnis wie eine Absage, weil Fehlerrot und Deep Red nur dE 20
     auseinanderliegen.

     Die Aussage traegt jetzt die Typografie: Der Altpreis steht gedimmt und
     durchgestrichen daneben, so wie das Theme ihn ohnehin zeichnet. Das ist
     die Form, in der ein Preisvorteil ueberall verstanden wird — und sie
     kommt ohne eine Farbe aus, die schon vergeben ist. */

  /* Der Preis ist die staerkste monetaere Information der Zone und muss das
     auch aussehen. Der Theme-Preis erbt sonst die Absatzgroesse — 14 Pixel
     neben einem 52 Pixel hohen Kaufknopf. Kodex, Sale: Rangfolge Kaufaktion,
     Preis, Vorteil, Streichpreis. */
  /* Zwei Regeln, die in BEIDEN Anordnungen greifen muessen — im
     Dreispalter sitzt der Preis in der Kaufspalte, im Zweispalter in der
     Detailspalte. Vorher hingen sie an :has() und an .product-buybox und
     trafen deshalb je nach Vorlage nur die Haelfte.

     1. Der Preis erbt sonst die Absatzgroesse: 14 Punkt neben einem 52
        Punkt hohen Knopf.
     2. Gruppen mit Rahmenstil bekommen vom Theme "overflow: hidden", auch
        ohne gesetzten Rahmen. Steht der Inhalt ohne Innenabstand an der
        Kante, schneidet das die Ueberhaenge ab — aus "17 €" wurde "I7 €"
        und vom ersten Zahlungssymbol blieb die Haelfte. */
  .product-buybox > .group-block,
  .product-details > .group-block {
    overflow: visible;
  }

  .product-buybox .price,
  .product-details .price {
    font-family: var(--font-heading--family);
    font-size: 31px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.05;
  }

  .product-buybox .compare-at-price,
  .product-details .compare-at-price {
    font-size: 14px;
    font-weight: 400;
  }

  /* Reine Kaufbox: Preis, Verfuegbarkeit, Knopf, Beleg. Alles Abwaegende —
     Passung, Vorteile, Technik — steht davor in der Mittelspalte.

     Einzige Abweichung vom Theme ist die ANORDNUNG: untereinander statt
     nebeneinander, weil die Zeile in dieser Spaltenbreite ohnehin umbricht.
     Die Reihenfolge kommt aus dem Theme selbst — es gibt die Anzahl vor dem
     Kaufknopf aus. Keine eigenen order-Regeln: Greift eine davon und die
     andere nicht, dreht sich die Reihenfolge um, genau das war passiert.

     Am AUSSEHEN der Bausteine wird hier nichts geaendert. Knopf und
     Zahlungssymbole muessen ueberall im Shop gleich sein, sonst gibt es
     keine Stelle mehr, an der man sie fuer alle aendern kann. */
  /* Menge UEBER dem Warenkorbknopf, beide ueber die volle Breite.
     Die Reihenfolge kommt aus dem Theme — es gibt die Menge zuerst aus.

     WICHTIG: flex-basis wirkt auf die Hauptachse. Das Theme setzt jedem Kind
     der Knopfzeile `flex: 1 1 var(--buy-button-preferred-width)`, also 185px
     Basis. In der Zeile sind das 185px BREITE, und ein leerer Behaelter
     schrumpft davon auf null. In der Spalte waeren es 185px HOEHE — der leere
     Express-Checkout-Container stand dadurch als anderthalb Knopfhoehen
     Weissraum unter dem Kaufknopf.

     Deshalb hier zurueck auf Inhaltshoehe. Die Breite kommt weiterhin vom
     Standard (align-items: stretch), das Aussehen der Bausteine bleibt
     unberuehrt. */
  .product-buybox .product-form-buttons {
    flex-direction: column;
  }

  /* Klassenname doppelt: Die Theme-Regel
     `.product-form-buttons > *:not(.quantity-selector-wrapper, …)` hat
     dieselbe Spezifitaet wie eine einfache Fassung dieser Regel und steht
     spaeter im Stylesheet — sie wuerde gewinnen. Das Verdoppeln hebt die
     Spezifitaet um eine Klasse, ohne !important und ohne fremde Klassen
     mitzubenutzen. */
  .product-buybox.product-buybox .product-form-buttons > * {
    flex: 0 0 auto;
  }

  /* Die Mengenwahl haelt ihre Breite ueber eine feste Flex-Basis von 124px
     (--quantity-selector-width). Fuer ein Flex-Element schlaegt die Basis
     jede Breitenangabe — `width: 100%` lief deshalb ins Leere.

     Statt dagegen zu arbeiten, wird die Stellschraube des Themes selbst
     gedreht. Nur die Breite; Hoehe, Rahmen und Aussehen bleiben unberuehrt. */
  .product-buybox.product-buybox .product-form-buttons .quantity-selector-wrapper {
    width: 100%;
  }

  .product-buybox.product-buybox .product-form-buttons .quantity-selector {
    --quantity-selector-width: 100%;
    flex-grow: 1;
  }


  /* Der reduzierte Preis traegt KEINE Signalfarbe mehr (Kanalregel,
     24.08.2026): Farbiger Text ist im Shop Status — passt, passt nicht, auf
     Lager. Ein Preis in Rot mitten im Fliesstext liest sich aus dem
     Gedaechtnis wie eine Absage, weil Fehlerrot und Deep Red nur dE 20
     auseinanderliegen.

     Die Aussage traegt jetzt die Typografie: Der Altpreis steht gedimmt und
     durchgestrichen daneben, so wie das Theme ihn ohnehin zeichnet. Das ist
     die Form, in der ein Preisvorteil ueberall verstanden wird — und sie
     kommt ohne eine Farbe aus, die schon vergeben ist. */

  /* Der Preis ist die staerkste monetaere Information der Zone und muss das
     auch aussehen. Der Theme-Preis erbt sonst die Absatzgroesse — 14 Pixel
     neben einem 52 Pixel hohen Kaufknopf. Kodex, Sale: Rangfolge Kaufaktion,
     Preis, Vorteil, Streichpreis. */
  /* Eine Gruppe mit Rahmenstil bekommt vom Theme "overflow: hidden" — auch
     dann, wenn gar kein Rahmen gesetzt ist. Steht der Inhalt ohne
     Innenabstand an der linken Kante, schneidet das die Ueberhaenge grosser
     Ziffern ab: Aus "17 €" wurde "I7 €". */
  .group-block:has(> .group-block-content > .buy-buttons-block) {
    overflow: visible;
  }

  /* Gilt in beiden Anordnungen: In der Kaufspalte des Dreispalters und in
     der Kaufzone des Zweispalters. Ohne das erbt der Preis die Absatzgroesse
     — 14 Punkt neben einem 52 Punkt hohen Knopf. */
  .product-buybox .price,
  .group-block:has(> .group-block-content > .buy-buttons-block) .price {
    font-family: var(--font-heading--family);
    font-size: 31px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.05;
  }
  .product-buybox .compare-at-price,
  .group-block:has(> .group-block-content > .buy-buttons-block) .compare-at-price {
    font-size: 14px;
    font-weight: 400;
  }
/* END_BLOCK:_product-buybox */

/* START_BLOCK:_product-details (INDEX:94) */
/* Clear padding on mobile, if not full-width */
  @media screen and (max-width: 749px) {
    .product-information.section--page-width .product-details > .group-block {
      padding-inline: 0;
    }
  }

  .view-product-title {
    display: none;
  }

  /* Container styles */
  .product-details {
    display: flex;
    align-self: start;
    justify-content: center;
  }

  @media screen and (min-width: 750px) {
    .product-details > .group-block {
      height: min-content;
    }

    .full-height--desktop {
      height: 100%;
      max-height: calc(100vh - var(--header-group-height, 0));
      min-height: fit-content;
    }

    .full-height--desktop .group-block {
      align-self: var(--details-position, 'flex-start');
    }
  }
/* END_BLOCK:_product-details */

/* START_BLOCK:_product-head (INDEX:95) */
.product-head {
    display: flex;
    align-self: start;
    justify-content: center;
  }

  /* Auf dem Handy die seitliche Polsterung abziehen, wie in der Detailspalte */
  @media screen and (max-width: 749px) {
    .product-information.section--page-width .product-head > .group-block {
      padding-inline: 0;
    }
  }

  @media screen and (min-width: 750px) {
    .product-head > .group-block {
      height: min-content;
    }
  }

  /* Im Dreispalter laeuft der Kopf ueber ALLE Spalten und steht in der
     ersten Zeile: Ueberzeile, Titel und Bewertung gelten fuer die Bilder
     links, die Produktinfos in der Mitte und die Kaufspalte rechts
     gleichermassen. In einer einzelnen Spalte lesen sie sich wie eine
     Aussage nur ueber diese Spalte — genau das wirkte schief.

     Nur ab Tablet: Auf dem Handy stapelt die Seite, und dort bleibt es bei
     Bilder -> Titel -> Kaufbox. */
  @media screen and (min-width: 750px) {
    .product-information--three-columns .product-head {
      grid-column: 1 / -1;
      order: -1;
    }
  }
/* END_BLOCK:_product-head */

/* START_BLOCK:_search-input (INDEX:100) */
.search-page-input {
    width: 100%;
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    padding-block: var(--padding-lg);
    padding-inline: calc(var(--icon-size-lg) + var(--margin-xl) * 1.5);
    text-overflow: ellipsis;
    overflow: hidden;
    border-radius: var(--style-border-radius-inputs);
    border: var(--style-border-width-inputs) solid var(--color-input-border);

    @media screen and (max-width: 749px) {
      padding-inline: calc(var(--margin-xs) + var(--icon-size-lg) + var(--padding-md));
    }
  }

  .search-page-input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-subdued-text));
  }

  .search-page-input__parent {
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment);
  }

  .search-results__no-results {
    opacity: var(--opacity-subdued-text);
  }

  search-page-input-component {
    position: relative;
    width: 100%;
    display: flex;
    top: 0;
    max-width: var(--size-style-width);
    align-items: center;
    background-color: var(--color-background);
    margin: var(--margin-2xl) 0 var(--margin-md);

    @media screen and (max-width: 749px) {
      max-width: 100%;
    }
  }

  search-page-input-component .search__icon,
  search-page-input-component .search__icon:hover,
  search-page-input-component .search__reset-button,
  search-page-input-component .search__reset-button:hover {
    background: transparent;
    position: absolute;
    top: auto;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  search-page-input-component .search__icon svg,
  search-page-input-component .search__reset-button svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  search-page-input-component .search__icon svg {
    color: var(--color-input-text);
  }

  search-page-input-component .search__icon {
    left: var(--margin-lg);

    @media screen and (max-width: 749px) {
      left: var(--margin-md);
    }
  }

  search-page-input-component .search__reset-button {
    border-radius: 100%;
    color: var(--color-input-text);
    right: var(--margin-lg);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--animation-speed) var(--animation-easing),
      visibility var(--animation-speed) var(--animation-easing);

    @media screen and (max-width: 749px) {
      right: var(--margin-md);
    }
  }

  search-page-input-component:has(.search-page-input:not(:placeholder-shown)) .search__reset-button {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  search-page-input-component .search__reset-button-icon {
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  search-page-input-component .search__reset-button:active .search__reset-button-icon {
    transform: scale(0.9);
  }

  search-page-input-component .search__reset-button-icon svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  search-page-input-component .search__reset-button--hidden {
    cursor: default;
    opacity: 0;
    transition: opacity var(--animation-speed) var(--animation-easing);
    pointer-events: none;
    visibility: hidden;
  }

  search-page-input-component .search__reset-button-text {
    display: none;
  }
/* END_BLOCK:_search-input */

/* START_BLOCK:_slide (INDEX:101) */
.slide__content {
    height: 100%;
    position: relative;
    z-index: var(--layer-flat);

    @supports (animation-timeline: auto) {
      opacity: 0;
      animation: slide-reveal both linear;
      animation-timeline: var(--slideshow-timeline);
    }

    @media (prefers-reduced-motion) {
      opacity: 1;
      animation: none;
    }
  }

  .slide__content > * {
    margin: auto;
  }

  .slide__content.background-transparent {
    background-color: transparent;
  }

  slideshow-slide > .slide__image-container {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
  }

  .slide__image-container > .slide__image,
  .slide__image-container > .slide__video,
  .slide__image-container > .slide__video-poster {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .slide__image-container > .slide__video-poster {
    position: absolute;
  }

  /*
   * Force Safari to recalculate the timeline state on timeline refresh (after loop)
   */
  slideshow-component[refreshing-timeline] .slide__content {
    animation: none;
  }

  slideshow-slide .slide__image-container--rounded {
    border-radius: var(--corner-radius, 0);
  }
/* END_BLOCK:_slide */

/* START_BLOCK:_social-link (INDEX:102) */
.social-icons__icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: flex;
    flex-shrink: 0;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: none;
  }

  .social-icons__icon-wrapper:has(.social-icons__icon path) {
    width: var(--icon-size-lg);

    .social-icons__icon {
      display: block;
    }

    .social-icons__icon-label {
      display: none;
    }
  }

  /* Disabled state for editor */
  .shopify-design-mode .social-icons__icon-wrapper--disabled {
    opacity: var(--disabled-opacity, 0.5);
    cursor: not-allowed;
  }

  .shopify-design-mode .social-icons__icon-wrapper--disabled a {
    pointer-events: none;
  }
/* END_BLOCK:_social-link */

/* START_BLOCK:comparison-slider (INDEX:110) */
comparison-slider-component {
    display: block;
  }

  .comparison-slider {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--ratio);
  }

  .comparison-slider:not(:has(img)) {
    min-width: 25dvh;
  }

  .comparison-slider__container {
    position: relative;
    width: 100%;
    height: 100%;
  }

  /* Container and Layout */
  .comparison-slider__media-wrapper {
    --compare: 50;

    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template: 1fr / 1fr;
    overflow: hidden;
  }

  /* Layer Containers */
  .comparison-slider__layer {
    grid-area: 1 / 1;
    position: relative;
    width: 100%;
    height: 100%;
    transition: clip-path var(--transition-duration, 0s) ease-in-out;
  }

  .comparison-slider__layer--after {
    z-index: var(--layer-base);
  }

  /* Before Layer Clipping (inverse of after layer) */
  [data-orientation='horizontal'] .comparison-slider__layer--before {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 calc((100 - var(--compare)) * 1%) 0 0);
  }

  [data-orientation='vertical'] .comparison-slider__layer--before {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 0 calc(var(--compare) * 1%) 0);
  }

  /* After Layer Clipping */
  [data-orientation='horizontal'] .comparison-slider__layer--after {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 0 0 calc(var(--compare) * 1%));
  }

  [data-orientation='vertical'] .comparison-slider__layer--after {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(calc((100 - var(--compare)) * 1%) 0 0 0);
  }

  /* Images and Placeholders */
  .before-image,
  .after-image,
  .comparison-slider__placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: var(--ratio);
  }

  .comparison-slider__placeholder {
    position: absolute;
    inset: 0;
  }

  .comparison-slider__placeholder svg {
    width: 100%;
    height: 100%;
    background-color: var(--color-background);
    fill: var(--color-foreground);
  }

  /* Range Input (Hidden but Functional) */
  .cs-slider {
    position: absolute;
    inset: 0;
    z-index: var(--layer-heightened);
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: inherit;
    appearance: none;
  }

  [data-orientation='horizontal'] .cs-slider {
    cursor: ew-resize;
  }

  [data-orientation='vertical'] .cs-slider {
    cursor: ns-resize;
    writing-mode: vertical-lr;
    direction: rtl;
  }

  /* Range Input Thumb */
  .cs-slider::-webkit-slider-thumb,
  .cs-slider::-moz-range-thumb {
    width: var(--button-size);
    height: var(--button-size);
    border: 0;
    background: transparent;
    cursor: inherit;
    appearance: none;
  }

  /* Range Input Track */
  .cs-slider::-webkit-slider-track,
  .cs-slider::-moz-range-track {
    background: transparent;
    border: 0;
    appearance: none;
  }

  /* Visual Slider Elements */
  .comparison-slider__media-wrapper::before,
  .comparison-slider__media-wrapper::after {
    content: '';
    position: absolute;
    pointer-events: none;
    transition: left var(--transition-duration, 0s) ease-in-out, top var(--transition-duration, 0s) ease-in-out;
    z-index: var(--layer-raised);
  }

  /* Slider Track Line */
  .comparison-slider__media-wrapper::after {
    background: var(--color-background);
    box-shadow: 0 0 12px 0 rgb(0 0 0 / 0.1);
  }

  .comparison-slider__media-wrapper::before {
    background: var(--color-background);
  }

  .comparison-slider__media-wrapper[data-orientation='horizontal']::after {
    inset: 0 auto;
    left: calc(var(--compare) * 1%);
    width: 4px;
    transform: translateX(-50%);
  }

  .comparison-slider__media-wrapper[data-orientation='vertical']::after {
    inset: auto 0;
    top: calc((100 - var(--compare)) * 1%);
    height: 4px;
    transform: translateY(-50%);
  }

  /* Slider Handle */
  .cs-slider__handle {
    position: absolute;
    z-index: var(--layer-heightened);
    pointer-events: none;
    width: var(--button-size);
    height: var(--button-size);
    color: var(--handle-color, var(--color-foreground));
    background: var(--color-background);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 12px 0 rgb(0 0 0 / 0.1);
    transition: left var(--transition-duration, 0s) ease-in-out, top var(--transition-duration, 0s) ease-in-out,
      gap 0.2s ease-in-out;
    gap: var(--gap-sm);
    padding: var(--padding-xs);
  }

  .comparison-slider__media-wrapper:hover .cs-slider__handle {
    gap: var(--gap-2xs);
  }

  .cs-slider__chevron {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  [data-orientation='horizontal'] .cs-slider__handle {
    top: 50%;
    left: calc(var(--compare) * 1%);
    transform: translate(-50%, -50%);
    flex-direction: row;
  }

  [data-orientation='vertical'] .cs-slider__handle {
    left: 50%;
    top: calc((100 - var(--compare)) * 1%);
    transform: translate(-50%, -50%) rotate(90deg);
  }

  /* Text Labels */
  .comparison-slider__text {
    position: absolute;
    padding: var(--padding-xs);
    pointer-events: none;
  }

  .comparison-slider__text--with-bg {
    background: var(--text-background-color);
    border-radius: var(--text-corner-radius);
  }

  /* Horizontal: before/after control inline (left/right), position controls block (top/bottom) */
  [data-orientation='horizontal'] .comparison-slider__text--before {
    inset-inline-start: var(--padding-sm);
  }

  [data-orientation='horizontal'] .comparison-slider__text--after {
    inset-inline-end: var(--padding-sm);
  }

  [data-orientation='horizontal'][data-text-position='start'] .comparison-slider__text {
    inset-block-start: var(--padding-sm);
  }

  [data-orientation='horizontal'][data-text-position='end'] .comparison-slider__text {
    inset-block-end: var(--padding-sm);
  }

  /* Vertical: before/after control block (top/bottom), position controls inline (left/right) */
  [data-orientation='vertical'] .comparison-slider__text--before {
    inset-block-start: var(--padding-sm);
  }

  [data-orientation='vertical'] .comparison-slider__text--after {
    inset-block-end: var(--padding-sm);
  }

  [data-orientation='vertical'][data-text-position='start'] .comparison-slider__text {
    inset-inline-start: var(--padding-sm);
  }

  [data-orientation='vertical'][data-text-position='end'] .comparison-slider__text {
    inset-inline-end: var(--padding-sm);
  }
/* END_BLOCK:comparison-slider */

/* START_BLOCK:contact-form-submit-button (INDEX:111) */
.submit-button {
    min-width: max-content;
  }
/* END_BLOCK:contact-form-submit-button */

/* START_BLOCK:contact-form (INDEX:112) */
.contact-form__form {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
  }

  .contact-form__form-row {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);

    @media screen and (min-width: 750px) {
      flex-direction: row;
      align-items: center;
    }
  }

  .contact-form__input {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    padding: var(--padding-lg) var(--padding-xl);
    border-radius: var(--style-border-radius-inputs);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    -webkit-font-smoothing: antialiased;
  }

  .contact-form__input--textarea {
    resize: vertical;
    min-height: var(--input-textarea-min-height);
  }

  .contact-form__error,
  .contact-form__success {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }
/* END_BLOCK:contact-form */

/* START_BLOCK:custom-liquid (INDEX:113) */
/* ----------------------------------------------------------------
     Bewertungs-Siegel brauchen die volle Breite ihrer Umgebung

     In einer senkrecht angeordneten Gruppe richtet das Theme die Elemente
     waagerecht aus (links/mittig/rechts). In allen drei Faellen schrumpfen
     die Elemente auf die Breite ihres Inhalts - eine Option "volle Breite"
     gibt es dort nicht.

     Das Judge.me-Siegel richtet seine Darstellung aber nach der Breite
     seines Containers: ist der schmal, schaltet es auf die gestapelte
     Fassung um (Name, Sterne, Anzahl untereinander). Da der Container hier
     erst durch das Siegel selbst entsteht, faellt es immer in die
     schmalste Stufe.

     Deshalb bekommt nur ein Block, der ein solches Siegel enthaelt, die
     volle Breite. Alle anderen Custom-Liquid-Bloecke im Theme bleiben
     unveraendert.
     ---------------------------------------------------------------- */
  .custom-liquid-block:has(.jdgm-trust-badge-widget) {
    width: 100%;
  }
/* END_BLOCK:custom-liquid */

/* START_BLOCK:disclosures (INDEX:114) */
.disclosures__container {
      width: 100%;
    }

    .disclosures__container:has(> [shopify-block-empty]) {
      display: none;
    }

    .disclosures {
      --disclosures-symbol-width: calc(var(--disclosures-icon-size) * var(--disclosures-symbol-aspect-ratio, 1));

      display: block;
      color: var(--color, inherit);
      width: 100%;
      container-type: inline-size;
    }

    .disclosures.accordion--dividers accordion-custom:first-child .details {
      border-block-start: var(--style-border-width) solid var(--color-border);
    }

    .disclosures.accordion--dividers accordion-custom:last-child .details {
      border-block-end: var(--style-border-width) solid var(--color-border);
    }

    .disclosures__heading {
      margin-block-end: var(--margin-lg);
    }

    .disclosures .details__header {
      padding-block: var(--padding-xl);
      display: flex;
      align-items: flex-start;
      gap: var(--gap-xs);
    }

    .disclosures .details__header > .svg-wrapper {
      margin-block-start: calc((var(--disclosures-icon-size) - var(--icon-size-xs)) / 2);
    }

    .disclosures details[open] .details__header {
      padding-block-end: var(--padding-xs);
    }

    .disclosures__summary-content {
      flex: 1 1 0%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      row-gap: var(--gap-xs);
      min-width: 0;
    }

    .disclosures__summary-item {
      display: flex;
      flex-direction: column;
      row-gap: var(--gap-xs);
      min-width: 0;
      overflow-wrap: break-word;
    }

    .disclosures__summary-item--measure {
      position: fixed;
      inset-block-start: 0;
      inset-inline-start: 0;
      display: block;
      width: max-content;
      max-width: none;
      visibility: hidden;
      white-space: nowrap;
      pointer-events: none;
      contain: layout style;
    }

    .disclosures__summary-item-row {
      display: flex;
      align-items: center;
      gap: var(--padding-2xs);
      min-width: 0;
      vertical-align: middle;
    }

    .disclosures__summary-item-title {
      font-weight: var(--font-weight-normal, normal);
      overflow-wrap: break-word;
    }

    .disclosures__summary-item--measure .disclosures__summary-item-title {
      white-space: nowrap;
      overflow-wrap: normal;
    }

    .disclosures .details__icon {
      display: inline-block;
      flex-shrink: 0;
      width: auto;
      max-inline-size: 100%;
      height: var(--disclosures-icon-size);
      margin: 0;
      object-fit: contain;
      vertical-align: middle;
    }

    .disclosures__summary-item-row:has(> .details__icon) {
      display: grid;
      grid-template-columns: var(--disclosures-symbol-width) minmax(0, 1fr);
      align-items: center;
      column-gap: var(--padding-2xs);
      min-inline-size: 0;
    }

    .disclosures__summary-item-row:has(> .details__icon) > .details__icon {
      grid-column: 1;
      justify-self: center;
    }

    .disclosures__summary-item-row:has(> .details__icon) > .disclosures__summary-item-title {
      grid-column: 2;
    }

    .disclosures details[open] > summary .disclosures__summary-item-title {
      font-weight: var(--font-weight-bold, bold);
    }

    .disclosures__summary-item-extra {
      display: block;
    }

    .disclosures__separator {
      display: none;
      flex-shrink: 0;
      padding-inline: var(--padding-xs);
      line-height: 1;
    }

    @container (min-width: 701px) {
      .disclosures:where([data-summary-layout='inline']) .details__header {
        align-items: center;
      }

      .disclosures:where([data-summary-layout='inline']) .details__header > .svg-wrapper {
        margin-block-start: 0;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__summary-item {
        display: block;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__summary-item-row {
        display: inline-flex;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__summary-item-row:has(> .details__icon) {
        display: inline-grid;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__summary-item-extra {
        display: inline-flex;
        align-items: center;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__separator {
        display: inline-block;
      }
    }

    .disclosures__summary-item--measure .disclosures__summary-item-row {
      display: inline-flex;
      white-space: nowrap;
    }

    .disclosures__summary-item--measure .disclosures__summary-item-row:has(> .details__icon) {
      display: inline-grid;
    }

    .disclosures__summary-item--measure .disclosures__summary-item-extra {
      display: inline-flex;
      align-items: center;
      white-space: nowrap;
    }

    .disclosures__summary-item--measure .disclosures__separator {
      display: inline-block;
    }

    .disclosures details[open] .disclosures__summary-item-extra {
      display: none;
    }

    .disclosures__item {
      display: flex;
    }

    .disclosures__item + .disclosures__item {
      margin-block-start: var(--spacing-lg);
    }

    .disclosures__item-left {
      flex: 0 1 auto;
      min-width: 0;
      cursor: default;
    }

    .disclosures__item-right {
      flex: 1;
      cursor: pointer;
    }

    .disclosures__item-header {
      display: flex;
      align-items: center;
      gap: var(--padding-2xs);
      margin-block-end: var(--spacing-xs);
      padding-block-end: var(--padding-xs);
    }

    .disclosures__item-title {
      margin: 0;
    }

    .disclosures__item-header:has(> .details__icon) {
      display: grid;
      grid-template-columns: var(--disclosures-symbol-width) minmax(0, 1fr);
      align-items: center;
      column-gap: var(--padding-2xs);
      min-inline-size: 0;
    }

    .disclosures__item-header:has(> .details__icon) > .details__icon {
      grid-column: 1;
      justify-self: center;
    }

    .disclosures__item-header:has(> .details__icon) > .disclosures__item-title {
      grid-column: 2;
    }

    .disclosures details[open] .disclosures__item-title {
      font-weight: var(--font-weight-bold, bold);
    }

    .disclosures__item-content {
      max-width: var(--normal-content-width);
      padding-block-end: var(--padding-2xl);
    }

    .disclosures details[open] .details-content {
      padding-block-end: 0;
    }
/* END_BLOCK:disclosures */

/* START_BLOCK:email-signup (INDEX:115) */
.email-signup-block {
    --arrow-button-size: 58px;
    --arrow-button-size-integrated: 42px;
    --arrow-button-size-small: 20px;
    --arrow-icon-size: 32px;
    --arrow-icon-size-small: 24px;

    min-width: fit-content;

    @media screen and (max-width: 749px) {
      width: 100%;
      min-width: unset;
    }
  }

  .email-signup__heading {
    color: var(--color, inherit);
    padding-block: var(--padding-sm);
  }

  .email-signup__form {
    display: flex;
    flex-direction: column;
  }

  .email-signup__input-group {
    display: flex;
    align-items: stretch;
    background-color: transparent;
  }

  .email-signup__input-group:not(.email-signup__input-group--integrated):not(.email-signup__input-group--underline) {
    gap: var(--gap-xs);
    align-items: center;
  }

  .email-signup__input-group:not(.email-signup__input-group--arrow):not(.email-signup__input-group--underline):not(
      .email-signup__input-group--integrated
    ) {
    @media screen and (max-width: 749px) {
      flex-direction: column;
    }
  }

  .email-signup__input-group--integrated {
    border-width: var(--border-width);
    border-radius: var(--border-radius);
    border-style: solid;
    border-color: var(--color-input-border);
    background-color: var(--color-input-background);
  }

  .email-signup__input-group--integrated.email-signup__input-group--no-border {
    border: none;
  }

  .email-signup__input {
    flex: 1;
    min-width: 0;
    border-width: var(--border-width);
    border-radius: var(--border-radius);
    border-style: solid;
    border-color: var(--color-input-border);
    background-color: var(--color-input-background);
    transition: background-color var(--animation-speed) var(--animation-easing),
      color var(--animation-speed) var(--animation-easing);

    @media screen and (max-width: 749px) {
      width: 100%;
    }
  }

  .email-signup__input.paragraph {
    color: var(--color-input-text);
    outline-color: var(--color-input-background);
  }

  .email-signup__button {
    white-space: nowrap;
    padding: 0;

    @media screen and (max-width: 749px) {
      width: 100%;
    }
  }

  .email-signup__input,
  .email-signup__button--text {
    padding: var(--padding-lg) var(--padding-3xl);
  }

  .email-signup__input-group--underline {
    --box-shadow-color: var(--color-input-border);
    --box-shadow-multiplier: 1;
    --box-shadow-focused-multiplier: 1.75;

    box-shadow: 0 calc(var(--border-width) * var(--box-shadow-multiplier)) 0 var(--box-shadow-color);
    transition: box-shadow var(--animation-values);
    margin-block-end: calc(var(--border-width) * var(--box-shadow-focused-multiplier));

    &:focus-within {
      --box-shadow-multiplier: var(--box-shadow-focused-multiplier);
      --box-shadow-color: var(--color-input-text);
    }
  }

  .email-signup__input-group .email-signup__input--underline {
    color: var(--color-input-text);
    background-color: transparent;
    padding: 12px 0;
    border: none;
    border-radius: 0;

    &:focus-visible {
      outline: none;
    }
  }

  .email-signup__input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-70));
  }

  .email-signup__input-group .email-signup__input--none {
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    border: none;
  }

  .email-signup__input-group--integrated .email-signup__input {
    background-color: transparent;
    border: none;
    border-radius: 0;
  }

  .email-signup__button-icon {
    color: currentcolor;
    padding: 5px;

    @media screen and (max-width: 749px) {
      padding: 0;
      align-self: center;
      justify-self: center;
      width: var(--icon-size-lg);
      height: var(--icon-size-lg);
    }
  }

  .email-signup__button--arrow {
    width: var(--arrow-button-size-small);
    height: var(--arrow-button-size-small);
    padding: 0;

    &:not(.email-signup__button--integrated) {
      width: var(--arrow-button-size);
      height: var(--arrow-button-size);
      display: flex;
      align-items: center;
      justify-content: center;

      > .email-signup__button-icon {
        width: var(--arrow-icon-size);
        height: var(--arrow-icon-size);
        padding: 0;
      }
    }
  }

  .email-signup__button--integrated {
    --button-offset: var(--margin-xs);
    align-self: stretch;
    margin: var(--button-offset);
    flex-shrink: 0;

    @media screen and (max-width: 749px) {
      width: fit-content;
    }

    &.email-signup__button--text {
      padding: 0 var(--padding-3xl);
    }

    &.email-signup__button--text.button-unstyled {
      padding: 0 var(--padding-xl);
    }

    &.button-unstyled {
      border-radius: var(--border-radius);
    }

    > .email-signup__button-icon {
      padding: 0;
    }

    &.email-signup__button--arrow {
      width: var(--arrow-button-size-integrated);
      height: var(--arrow-button-size-integrated);
      align-self: center;
      display: flex;
      align-items: center;
      justify-content: center;

      > .email-signup__button-icon {
        width: var(--arrow-icon-size-small);
        height: var(--arrow-icon-size-small);
      }
    }
  }

  .email-signup__input--underline + .email-signup__button--integrated {
    margin: 0;
    align-self: center;

    &.email-signup__button--text {
      padding-block: 9px;
    }

    &.email-signup__button--text.button-unstyled {
      padding-inline: 0;
      min-width: 44px;
      min-height: 44px;
    }

    &.button-unstyled {
      border-radius: 0;
    }

    &.email-signup__button--arrow {
      width: var(--arrow-button-size-integrated);
      height: var(--arrow-button-size-integrated);
      display: flex;
      align-items: center;
      justify-content: center;

      > .email-signup__button-icon {
        width: var(--arrow-icon-size-small);
        height: var(--arrow-icon-size-small);
      }
    }
  }

  .email-signup__button:not(.button-unstyled) {
    background-color: var(--button-background-color);
    color: var(--button-color);
    text-transform: var(--button-text-case-primary);
  }

  .email-signup__button.button-secondary {
    text-transform: var(--button-text-case-secondary);
  }

  .email-signup__button.button-unstyled {
    background-color: transparent;
    color: var(--color-input-text);
  }

  .email-signup__button.button-unstyled:hover {
    --hover-color-rgb: var(--color-input-text-rgb);

    color: rgb(var(--hover-color-rgb) / var(--opacity-70));
    cursor: pointer;
  }

  .email-signup__message {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .email-signup__message-text {
    margin: 0;
  }
/* END_BLOCK:email-signup */

/* START_BLOCK:featured-collection (INDEX:116) */
.featured-collection-block {
    width: 100%;
  }
/* END_BLOCK:featured-collection */

/* START_BLOCK:filters (INDEX:117) */
.facets-block-wrapper {
    @media screen and (min-width: 750px) {
      margin: var(--facets-margin);
      grid-column: var(--grid-column--desktop);
    }
  }

  .facets-block-wrapper--vertical {
    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
    }
  }

  .facets-toggle {
    --icon-offset: -3px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--minimum-touch-target);
    margin: var(--facets-margin);
    padding-block: var(--facets-inner-padding-block);
    padding-inline: var(--facets-inner-padding-inline);

    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets-toggle__wrapper {
    margin-left: var(--icon-offset);
  }

  .facets-toggle__button {
    box-shadow: none;

    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .filter-count-bubble {
    position: relative;
    width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    line-height: normal;
    place-content: center;
    color: var(--color-foreground);
    border: var(--icon-stroke-width) solid var(--color-background);
  }

  .facets-mobile__title-wrapper .h3 {
    margin-block-end: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .facets-mobile__title-wrapper .filter-count-bubble {
    width: 22px;
    height: 22px;
  }

  .facets-mobile__title-wrapper .filter-count-bubble__text {
    font-size: var(--font-size--xs);
  }

  .filter-count-bubble__background {
    position: absolute;
    inset: 0;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    border-radius: var(--style-border-radius-50);
  }

  .filter-count-bubble__text {
    font-size: 11px;
    font-weight: var(--font-paragraph--weight);
    aspect-ratio: 1 / 1;
  }

  .facets-toggle--no-filters {
    @media screen and (max-width: 749px) {
      /* stylelint-disable-next-line declaration-no-important */
      justify-content: unset !important;

      & > .facets-mobile-wrapper {
        width: 100%;
      }
    }
  }

  .facets-block-wrapper--vertical + .facets-toggle {
    @media screen and (max-width: 749px) {
      margin: 0;
    }
  }

  .facets-mobile-wrapper {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    justify-content: flex-end;
  }

  .facets-mobile-wrapper--multiple-controls {
    justify-content: space-between;
  }

  .facets {
    --facets-form-horizontal-gap: 20px;
    --facets-horizontal-max-input-wrapper-height: 230px;
    --facets-upper-z-index: var(--layer-raised);
    --facets-open-z-index: var(--layer-heightened);
    --facets-sticky-z-index: var(--layer-sticky);
    --facets-panel-min-width: 120px;
    --facets-panel-height: 300px;
    --facets-grid-panel-width: 300px;
    --facets-clear-padding: var(--padding-md);
    --facets-clear-shadow: 0 -4px 14px 0 rgb(var(--color-foreground-rgb) / var(--facets-low-opacity));
    --facets-input-label-color: rgb(var(--color-input-text-rgb) / var(--opacity-60));
    --facets-clear-all-min-width: 120px;
    --facets-see-results-min-width: 55%;
    --facets-mobile-gap: 22px;
    --facets-low-opacity: 10%;
    --facets-hover-opacity: 75%;

    @media screen and (min-width: 750px) {
      padding-inline: var(--padding-inline-start) var(--padding-inline-end);
    }
  }

  .facets--horizontal {
    display: none;

    @media screen and (min-width: 750px) {
      padding-block: var(--padding-block-start) var(--padding-block-end);
      display: flex;
      align-items: center;
      position: relative;
      z-index: var(--facets-upper-z-index);
      border: none;
      height: auto;
      top: initial;
      bottom: initial;
      max-height: none;
      width: auto;
      overflow: visible;
    }
  }

  .facets--vertical {
    display: none;

    @media screen and (min-width: 750px) {
      padding-block: 0 var(--padding-block-end);
      display: block;
      position: static;
      top: auto;
      bottom: auto;
      height: auto;
      max-height: none;
      width: auto;
      overflow: visible;
    }
  }

  .facets-drawer__form-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .facets-drawer__form-wrapper .facets__form {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .facets-drawer__filters {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
  }

  .facets-drawer__filters .facets__filters-wrapper,
  .facets-drawer__filters .filter-remove-buttons,
  .facets-drawer__filters .sorting-filter-component {
    overflow: visible;
  }

  .facets.facets-controls-wrapper {
    @media screen and (min-width: 750px) {
      grid-column: column-1 / column-12;
      color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
      gap: 0 var(--facets-form-horizontal-gap);
      padding-bottom: var(--padding-xs);
    }
  }

  .facets__inputs {
    display: flex;
    flex-direction: column;
    gap: var(--padding-lg);
    width: 100%;
  }

  :is(.facets--drawer, .facets--vertical) .facets__inputs:not(:has(.show-more)) {
    padding-block-end: var(--padding-sm);
  }

  /* Facets - Form */
  .facets__form-wrapper {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground-subdued);
    width: 100%;
  }

  .facets--horizontal .facets__form-wrapper {
    @media screen and (min-width: 750px) {
      flex-direction: row;
      height: auto;
    }
  }

  .facets__form {
    display: flex;
    flex-flow: column;
    width: 100%;
    height: 100%;
  }

  .facets--horizontal .facets__form {
    @media screen and (min-width: 750px) {
      flex-flow: row nowrap;
      height: auto;
    }
  }

  .facets:not(.facets--drawer) .facets__filters-wrapper {
    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-md);
    }
  }

  .facets--horizontal .facets__filters-wrapper {
    @media screen and (min-width: 750px) {
      max-width: 60%;
      display: flex;
      flex-wrap: wrap;
      column-gap: var(--gap-xl);
      margin-inline-end: 0;
    }
  }

  /* Facets - Summary */
  .facets__summary {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;
    --icon-opacity: 0.5;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }

    font-size: var(--font-h5--size);
    display: flex;
    justify-content: space-between;

    &:hover {
      --icon-opacity: 1;
    }
  }

  .facets__filters-wrapper:hover .facets__summary,
  .facets__filters-wrapper:has(.facets__panel[open]) .facets__summary {
    opacity: var(--facets-hover-opacity);
  }

  .facets__filters-wrapper .facets__summary:hover,
  .facets__filters-wrapper .facets__panel[open] .facets__summary {
    opacity: 1;
  }

  .facets--horizontal .facets__summary {
    @media screen and (min-width: 750px) {
      font-size: var(--font-paragraph--size);
      justify-content: flex-start;
      height: var(--minimum-touch-target);
    }
  }

  .facets__summary .icon-caret {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    color: rgb(var(--color-foreground-rgb) / var(--icon-opacity));
    margin-block: var(--margin-2xs);
    transition: color var(--animation-speed) var(--animation-easing);
  }

  .facets--drawer .facets__summary .icon-caret {
    margin-inline-start: var(--margin-2xs);
  }

  /* Facets - Bubble */
  .facets__bubble {
    display: inline-flex;
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    aspect-ratio: 1 / 1;
  }

  /* Facets - Inputs */
  .facets__inputs-wrapper {
    margin-block: var(--padding-xs) var(--padding-xs);
  }

  .facets__inputs .show-more {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    margin-block-end: var(--padding-xl);
  }

  .facets:not(.facets--drawer) .facets__inputs-wrapper {
    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  .facets--horizontal .facets__inputs .show-more {
    @media screen and (min-width: 750px) {
      display: contents;
    }
  }

  .facets--horizontal .facets__inputs-wrapper {
    @media screen and (min-width: 750px) {
      max-height: var(--facets-horizontal-max-input-wrapper-height);
      scrollbar-width: none;
      -ms-overflow-style: none;
      overflow-x: auto;
      padding: var(--padding-md);
      margin-block: 0;
    }
  }

  .facets--vertical .facets__inputs:has(.show-more) .facets__inputs-wrapper {
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-sm);
    margin-block: calc(var(--padding-sm) * -1);
    margin-inline: calc(var(--padding-sm) * -1);
  }

  @media screen and (max-width: 749px) {
    .facets__inputs:has(.show-more) .facets__inputs-wrapper {
      padding-block: var(--padding-sm);
      padding-inline: var(--padding-sm);
      margin-block: calc(var(--padding-sm) * -1);
      margin-inline: calc(var(--padding-sm) * -1);
    }
  }

  .facets__inputs-wrapper:not(:has(.facets__inputs-list)),
  .facets__inputs-wrapper .facets__inputs-list {
    display: flex;
    gap: var(--facets-mobile-gap);
    flex-direction: column;

    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  @media screen and (min-width: 750px) {
    .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches {
      gap: var(--gap-sm);
    }

    .facets--horizontal
      .facets__inputs-wrapper
      .facets__inputs-list--swatches:not(.facets__inputs-list--swatches-grid) {
      display: grid;
      grid-template-columns: repeat(var(--swatch-columns, 4), 1fr);
    }
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches {
    --facets-mobile-gap: var(--gap-sm);
  }

  .facets__inputs-wrapper .facets__inputs-list--grid {
    --min-column-width: 20%;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--min-column-width), 1fr));
    gap: var(--gap-sm);

    @media screen and (min-width: 750px) {
      --min-column-width: 50px;
    }
  }

  .facets-block-wrapper:not(.facets-block-wrapper--vertical) .facets__inputs-list--grid {
    @media screen and (min-width: 750px) {
      width: var(--facets-grid-panel-width);
    }
  }

  .facets__inputs-wrapper--row:not(:has(.facets__inputs-list)),
  .facets__inputs-wrapper--row .facets__inputs-list {
    flex-wrap: wrap;
    flex-direction: row;
  }

  .facets__inputs .show-more__button {
    --show-more-icon-size: 22px;
    --show-more-gap: 8px;

    gap: var(--show-more-gap);

    @media screen and (min-width: 750px) {
      --show-more-icon-size: 16px;
      --show-more-gap: 6px;
    }
  }

  .facets__inputs .show-more__button .icon-plus {
    width: var(--show-more-icon-size);
    height: var(--show-more-icon-size);

    svg {
      width: var(--icon-size-xs);
      height: var(--icon-size-xs);
    }
  }

  /* Facets - Panel */
  .facets__panel {
    padding: 0 var(--theme-drawer-padding);
  }

  .facets:not(.facets--drawer) .facets__panel,
  .facets-controls-wrapper .facets__panel {
    @media screen and (min-width: 750px) {
      padding: 0;
    }
  }

  .facets--horizontal .facets__panel {
    @media screen and (min-width: 750px) {
      position: relative;
    }
  }

  .facets-mobile-wrapper .facets__panel-content {
    border-radius: var(--style-border-radius-popover);
  }

  .facets-mobile-wrapper {
    --facets-upper-z-index: var(--layer-raised);
    --facets-panel-min-width: 120px;
    --facets-panel-height: 300px;
  }

  .facets--horizontal .facets__panel-content {
    @media screen and (min-width: 750px) {
      border-radius: var(--style-border-radius-popover);
      position: absolute;
      top: 100%;
      width: max-content;
      min-width: var(--facets-panel-min-width);
      max-width: var(--facets-panel-width);
      max-height: var(--facets-panel-height);
      z-index: var(--facets-upper-z-index);
      box-shadow: var(--shadow-popover);
      border: var(--style-border-popover);
      background-color: var(--color-background);
      overflow-y: hidden;
      gap: 0;
    }
  }

  :is(.facets--drawer, .facets--vertical) :is(.facets__item, .sorting-filter)::before {
    content: '';
    display: block;
    height: 0;
    width: calc(100% - var(--theme-drawer-padding) * 2);
    border-top: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    margin: 0 auto;
  }

  @media screen and (min-width: 750px) {
    .facets:not(.facets--drawer) :is(.facets__item, .sorting-filter)::before {
      width: 100%;
    }

    .facets--horizontal .facets__item:not(:first-of-type)::before,
    .facets--horizontal .sorting-filter::before {
      content: none;
    }
  }

  @media screen and (min-width: 750px) {
    .facets--vertical .facets__item:not(:first-of-type)::before,
    .facets--vertical .sorting-filter::before {
      content: '';
    }
  }

  /* Facets - Text */
  .facets__label,
  .facets__clear-all-link,
  .clear-filter {
    text-decoration-color: transparent;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
    transition: text-decoration-color var(--animation-speed) var(--animation-easing);
  }

  .facets__clear-all-link {
    display: none;
    cursor: pointer;
    padding: var(--padding-xs);
    color: var(--button-color);
    transition: text-decoration-color var(--animation-speed) var(--animation-easing),
      color var(--animation-speed) var(--animation-easing);
  }

  .facets__clear-all-link:hover {
    --button-color: rgb(var(--color-foreground-rgb) / var(--opacity-80));

    text-decoration: underline;
    text-decoration-color: var(--button-color);
  }

  .facets__clear-all-link--horizontal {
    height: var(--minimum-touch-target);
    padding-inline: var(--facets-form-horizontal-gap);
    min-width: var(--facets-clear-all-min-width);
  }

  .facets__clear-all-link--active {
    display: block;
  }

  .facets__label,
  .products-count-wrapper {
    text-transform: var(--facet-label-transform);
  }

  .clear-filter {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
  }

  .clear-filter:hover {
    text-decoration: underline;
  }

  /* Clear button */
  .facets__clear {
    display: none;
  }

  .facets--horizontal .facets__clear {
    @media screen and (min-width: 750px) {
      width: 100%;
      justify-content: flex-end;
      padding: 0 var(--facets-clear-padding) var(--facets-clear-padding) 0;
      cursor: pointer;
    }
  }

  .facets__clear--active {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  /* Facets - Label */
  .facets__label {
    color: var(--color-foreground);
    cursor: pointer;
    white-space: nowrap;

    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-2xs);
    }
  }

  /* Products count */
  .products-count-wrapper {
    display: none;
  }

  .facets--horizontal .products-count-wrapper {
    @media screen and (min-width: 750px) {
      display: flex;
      margin-left: auto;
      flex-shrink: 0;
      align-items: center;
      height: var(--minimum-touch-target);
    }
  }

  /* Mobile specific components */
  .facets__title-wrapper {
    background-color: var(--color-background);
    color: var(--color-foreground);
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--padding-xs);
    padding-inline-start: var(--theme-drawer-padding);
    padding-inline-end: var(--padding-2xs);
    z-index: var(--facets-sticky-z-index);
  }

  :is(.facets--horizontal, .facets--vertical) .facets__title-wrapper {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets--drawer .theme-drawer__title {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }
  }

  /* Status */
  .facets__status:not(:empty) {
    width: max-content;
    display: flex;
    margin-inline-start: auto;
    font-weight: 500;
    color: var(--color-foreground);
  }

  .facets__panel[open] .facets__status {
    display: none;
  }

  .facets--filters-title {
    margin-block-end: 0;
    color: var(--color-foreground);
    height: fit-content;

    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets--horizontal .facets__panel .facets__status:has(:not(:empty)) {
    @media screen and (min-width: 750px) {
      display: flex;
      margin-inline-start: var(--margin-xs);
      margin-inline-end: var(--margin-xs);
    }
  }

  /* Horizontal filter style */
  .facets--horizontal .facets__form {
    @media screen and (min-width: 750px) {
      gap: 0 var(--facets-form-horizontal-gap);
    }
  }

  /* Facets - Actions */
  .facets__drawer-actions {
    --to-top-gradient-background: linear-gradient(
      to top,
      rgb(var(--color-background-rgb) / var(--opacity-90)),
      rgb(var(--color-background-rgb) / var(--opacity-80)),
      rgb(var(--color-background-rgb) / var(--opacity-40)),
      transparent
    );

    position: sticky;
    bottom: 0;
    z-index: var(--facets-sticky-z-index);
    order: 1;
    display: flex;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: stretch;
    gap: var(--gap-sm);
    padding-block-start: var(--padding-xs);
    padding-block-end: var(--padding-md);
    padding-inline: var(--padding-lg);
    margin-top: auto;
    background-image: var(--to-top-gradient-background);
    background-color: var(--color-background);
  }

  /* Clear all button */
  .facets__clear-all {
    display: none;
    cursor: pointer;
    min-width: var(--facets-clear-all-min-width);
    flex-grow: 1;
    padding-block: var(--padding-lg);
    color: var(--button-color, inherit);
  }

  .facets__clear-all--active {
    display: block;
    opacity: 1;
    transform: translateY(0);
    transition: transform var(--animation-values), opacity var(--animation-values);
  }

  @starting-style {
    .facets__clear-all--active {
      opacity: 0;
      transform: translateY(100%);
    }
  }

  .facets__see-results {
    min-width: var(--facets-see-results-min-width);
    flex-grow: 1;
    padding-block: var(--padding-lg);

    @media screen and (min-width: 990px) {
      display: none;
    }
  }

  .facets-horizontal-remove {
    display: flex;
    align-items: center;
  }

  .facets-horizontal-remove--active::before {
    content: '';
    border-inline-start: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    height: var(--font-paragraph--size);
    position: absolute;
  }
/* END_BLOCK:filters */

/* START_BLOCK:finder-check (INDEX:118) */
/* ── Verifikationskennzeichnung ──────────────────────────────────────
   Signatur, keine Karte: kein Rahmen, keine Flaeche. Orange traegt allein
   das Label, das Info-Zeichen bleibt Muted. */
/* Mehr Abstand als zwischen den Zeilen (11 px): VERIFIED kennzeichnet die
   Pruefung, es ist kein weiteres Ergebnis. */
.fck__vf { margin-top: var(--margin-2xl, 24px); }
.fck__vf {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 10px;
  color: var(--3idee-verified);
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.fck__vf[hidden] { display: none; }
.fck__vf-punkt { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.fck__vf-i {
  width: 16px; height: 16px; padding: 0;
  border: 1px solid var(--3idee-muted); border-radius: 50%;
  background: none; color: var(--3idee-muted);
  font-size: 10px; font-weight: 700; letter-spacing: 0; text-transform: none;
  display: grid; place-items: center; cursor: pointer;
}

/* ── Erklaerfenster ──────────────────────────────────────────────────── */
/* Rahmen, Rundung, Abstaende, Schliesskreuz, der abgedunkelte Grund und das
   Blatt von unten auf dem Handy stehen seit dem 21.08.2026 EINMAL in
   snippets/fenster.liquid. Hier bleibt nur, was diesem Fenster gehoert:
   die Bedeutung, die drei Schritte und die Belege. */
/* Die Aussage des Fensters: groesser als der Fliesstext der Schritte, aber
   ohne deren Schriftstaerke — es ist keine weitere Ueberschrift. */
.fvf__bedeutung {
  margin: 0 0 26px;
  max-width: 52ch;
  font-size: 17px; line-height: 1.5;
  color: var(--3idee-ink);
}

/* Das Label IM Satz — dieselben Werte wie am Ergebnis, nur eingebettet:
   inline statt inline-flex, damit es auf der Grundlinie des Satzes sitzt und
   nicht auf der eigenen. Der Punkt traegt seinen Abstand dann selbst, weil
   "gap" ohne Flex nicht wirkt.

   NICHT MEHR AUF DAS FENSTER BESCHRAENKT (24.08.2026): Ein inline-flex-Kasten
   nimmt seine Grundlinie vom ERSTEN Kind — und das ist hier der Punkt, nicht
   der Text. Ueberall, wo das Zeichen neben laufendem Text steht, sitzt es
   dadurch rund einen Millimeter zu tief. Das trat als Zweites im Kopf von
   "Setup komplettieren" auf; deshalb steht die Loesung jetzt allgemein da und
   wird nicht ein zweites Mal abgeschrieben. */
.fck__vf--satz {
  display: inline;
  margin: 0;
  white-space: nowrap;
}
.fck__vf--satz .fck__vf-punkt {
  display: inline-block;
  margin-inline-end: 6px;
  position: relative; top: -1px;
}
.fvf__schritt {
  display: grid; grid-template-columns: 52px 1fr; gap: 16px;
  padding: 22px 0; border-bottom: 1px solid var(--3idee-hairline);
}
.fvf__schritt:first-of-type { border-top: 1px solid var(--3idee-hairline); }
/* Die letzte Stufe schliesst ohne eigene Linie ab: Direkt darunter beginnen
   die Belege mit ihrer eigenen — bis zum 24.08.2026 stand dazwischen der
   Kasten "Mehrere Monitore?" und hat beide getrennt. Ohne ihn lagen sie
   aufeinander und sahen aus wie ein Doppelstrich. */
.fvf__schritt:last-of-type { border-bottom: 0; }
.fvf__num { font-weight: 800; font-size: 18px; color: var(--3idee-muted); }
.fvf__schritt h3 { margin: 0; font-size: 19px; color: var(--3idee-ink); }
.fvf__schritt p { margin: 5px 0 0; color: var(--3idee-muted); font-size: 14px; max-width: 62ch; }
.fvf__beleg {
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--3idee-hairline);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.fvf__beleg b { display: block; font-size: 21px; color: var(--3idee-ink); }
.fvf__beleg span { display: block; margin-top: 3px; color: var(--3idee-muted); font-size: 12px; line-height: 1.4; }

/* ── Kauf-Waechter ───────────────────────────────────────────────────
   Grosse Funktionsflaeche, also die grosse Rundung. Kein Rot als Flaeche:
   Die Farbe steckt im Zeichen, der Text bleibt dunkel. */
.kbw {
  border: 1px solid var(--3idee-hairline);
  border-radius: var(--3idee-radius-gross);
  padding: 26px 26px 22px; max-width: 440px; width: calc(100% - 32px);
  color: var(--3idee-body); position: relative;
}
/* Derselbe Grund wie alle Ueberlagerungen — eine Einstellung, ein Gewicht. */
.kbw::backdrop { background: rgb(var(--backdrop-color-rgb, 31 34 48) / var(--backdrop-opacity, 0.42)); }

/* AUF DEM HANDY EINE BLATT VON UNTEN.

   Ausgeloest wird der Waechter am Kaufknopf, und der steht auf dem Handy unten
   am Daumen. Ein Fenster, das dann oben in der Mitte erscheint, kommt aus der
   falschen Richtung: Der Blick ist unten, die Antwort oben, und bei laengerem
   Inhalt beginnt es sogar ausserhalb des Bildes.

   Also von unten, ueber die volle Breite, oben abgerundet — dort, wo eben noch
   der Knopf war. Hoehe begrenzt, damit es bei einer Karte im Inhalt scrollt
   statt zu wachsen. */
@media (max-width: 620px) {
  .kbw {
    margin: 0 auto 0 0;
    position: fixed;
    /* Nicht ganz an den Rand: Ein schmaler Streifen ringsum macht aus einer
       Flaeche ein Fenster — man sieht, dass etwas DARUEBER liegt und die Seite
       darunter weitergeht. */
    inset: auto 10px 10px 10px;
    width: auto;
    max-width: none;
    max-height: 88svh;
    overflow-y: auto;
    border: 1px solid var(--3idee-hairline);
    border-start-start-radius: var(--3idee-radius-gross);
    border-start-end-radius: var(--3idee-radius-gross);
    border-end-start-radius: var(--3idee-radius-gross);
    border-end-end-radius: var(--3idee-radius-gross);
    padding-bottom: max(22px, env(safe-area-inset-bottom));
  }
}
.kbw__zu {
  position: absolute; top: 14px; right: 14px; width: 32px; height: 32px;
  border: 1px solid var(--3idee-hairline);
  border-radius: var(--3idee-radius-klein);
  background: var(--color-background); color: var(--3idee-ink);
  font-size: 16px; cursor: pointer;
}
.kbw__urteil {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 17px; color: var(--3idee-ink);
}
.kbw__z { font-weight: 800; font-size: 18px; }
.kbw__urteil--warn .kbw__z { color: var(--3idee-error); }
.kbw__urteil--offen .kbw__z { color: var(--3idee-muted); }
.kbw__modell { display: block; margin-top: 5px; color: var(--3idee-muted); font-size: 13.5px; }
.kbw__feld { display: flex; gap: 8px; margin-top: 18px; }
.kbw__feld input {
  flex: 1; min-width: 0; height: 46px; padding: 0 14px;
  border: 1px solid var(--3idee-hairline);
  border-radius: var(--3idee-radius-mittel);
  font: inherit; color: var(--3idee-body);
}
.kbw__feld button {
  height: 46px; padding: 0 18px; border: 0;
  border-radius: var(--3idee-radius-mittel);
  background: var(--3idee-ink); color: #fff; font: inherit; font-weight: 700; cursor: pointer;
}
.kbw__kartenkopf {
  display: block; margin: 22px 0 9px;
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--3idee-muted);
}
.kbw__aktionen {
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--3idee-hairline);
  display: flex; flex-direction: column; gap: 9px; align-items: stretch;
}
.kbw__knopf {
  height: 48px; border-radius: var(--3idee-radius-mittel);
  background: var(--3idee-ink); color: #fff; text-decoration: none;
  font-weight: 700; display: grid; place-items: center;
}
/* DAS ATTRIBUT "hidden" BRAUCHT HIER HILFE.

   "hidden" wirkt ueber eine Vorgabe des Browsers (display: none) mit der
   schwaechsten Staerke, die es gibt. Jede eigene display-Regel schlaegt sie —
   und alle vier Elemente hier haben eine, weil sie Flex, Raster oder Block
   sind. Ergebnis: Was das Skript ausblendet, bleibt stehen. Am deutlichsten
   beim Weg-Knopf: ein leerer Kasten in Ink, das dunkelblau ist, zwischen
   "Pruefen" und "Ohne Pruefung in den Warenkorb". (21.08.2026)

   Dieselbe Falle kommentiert das Theme in base.css an .button[hidden]. */
.kbw__modell[hidden],
.kbw__feld[hidden],
.kbw__karten[hidden],
.kbw__knopf[hidden] { display: none; }

.kbw__trotzdem {
  background: none; border: 0; padding: 2px 0 0;
  color: var(--3idee-muted); font: inherit; font-size: 13.5px;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
@media (max-width: 620px) {
  .fvf__beleg { grid-template-columns: 1fr; }
}

/* Nach 3idee-designkodex.md: nur Palette, 4 Punkte Radius ohne Ausnahme,
   Orange markiert und traegt nie. Kreisrund ist allein der Haken. */
/* DIE BREITE DIESES BAUSTEINS DARF NIE VOM INHALT KOMMEN.

   contain: inline-size sagt dem Browser: Die waagerechte Groesse dieses
   Kastens steht fest, bevor sein Inhalt betrachtet wird. Ohne das wandert die
   Inhaltsbreite — vier Karten a 172px, eine Zeile mit langem Modellnamen —
   ueber die Vorfahren bis in die Spaltenbreite der Produktseite: Die Kaufspalte
   wurde breiter, sobald ein Ergebnis erschien.

   min-width: 0 allein genuegt dafuer nicht. Es muesste an JEDEM Vorfahren
   stehen, und die gehoeren dem Theme — eine Kette, die beim naechsten
   Theme-Update reisst. contain haelt an einer Stelle. (21.08.2026) */
.fck {
  min-width: 0;
  contain: inline-size;
  --fck-ink: var(--3idee-ink);
  --fck-orange: var(--3idee-ink);
  --fck-linie: var(--3idee-hairline);
  --fck-grau: var(--3idee-muted);
  --fck-flaeche: #f7f7f7;
  /* KEIN Kasten. Die Passung ist die erste Aussage der mittleren Spalte,
     kein Bauteil darin — ein Rahmen darum machte aus einer Frage ein
     Formular. Kodex Abschnitt 3: gegliedert wird ueber Abstand und
     Typografie, eine Flaeche kommt erst, wenn das nicht reicht. */
  color: var(--fck-ink);
}
/* Der Weg zur Aenderung steht HINTER der Frage, auf derselben Zeile — er
   gehoert zur Frage, nicht zum Ergebnis, und kostet so keine eigene Zeile.

   Dass er zwischenzeitlich trotzdem an der rechten Kante klebte, lag NICHT an
   der Laenge der Frage, wie hier erst vermutet: .fck__wahl-neu bringt aus dem
   Auswahlkasten ein margin-inline-start: auto mit und schiebt sich damit ans
   Ende jeder Flex-Zeile. Der Selektor unten setzt es zurueck — mit zwei
   Klassen, sonst gewinnt die spaetere Regel.

   Nur Frage und Knopf bilden diese Zeile. Die Modellzahl gehoert unter die
   Frage und bleibt deshalb draussen. */
.fck__kopf { padding: 0 0 12px; }
/* Der Nachsatz steht an der rechten Kante — derselben, an der die Antworten
   und der Kaufknopf der Karte stehen. Eine Kante, eine Bedeutung: Was rechts
   steht, ist das Ergebnis der Frage oder der Weg, sie neu zu stellen.
   (21.08.2026, Entwurf B) */
.fck__kopf-zeile {
  display: flex; align-items: baseline; flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px var(--margin-xl, 20px);
}
.fck__kopf-zeile > b { flex: 0 1 auto; }
/* margin-inline-start: auto stammt aus dem Auswahlkasten, wo der Knopf am
   rechten Ende der Flex-Zeile sitzt. Hier gilt es nicht — sonst rutscht der
   Nachsatz wieder an die Kante, an der das Ergebnis steht.

   ZWEI Klassen im Selektor, das ist der Punkt: .fck__wahl-neu steht weiter
   unten in dieser Datei und ist gleich stark. Bei gleicher Staerke gewinnt die
   spaetere Regel — ein einfaches .fck__kopf-neu wurde deshalb ueberschrieben,
   ohne dass man es der Datei ansieht. */
.fck__kopf .fck__kopf-neu {
  flex: 0 0 auto; margin-inline-start: 0; margin-top: 0;
  padding-inline: 0;
}
.fck__kopf-neu[hidden] { display: none; }

.fck__kopf > b { display: block; font-size: 17px; font-weight: 700; }
.fck__kopf small { font-size: 13.5px; color: var(--fck-grau); }
.fck__leib { padding: 0; }
/* Im Zweispalter trennt eine Haarlinie die Passung vom Preis darunter — eine
   Flaeche waere hier eine Karte in einer Karte. Diese Linie ist ein eigener
   Baustein (die Trennlinie des Themes) und steht deshalb nicht mehr hier:
   Nur so laesst sich ihr Abstand nach oben und nach unten getrennt einstellen.

   Einen Aussenabstand hat der Baustein im Zweispalter damit nicht mehr. Der
   Platz kommt aus dem Innenabstand hier und dem der Trennlinie — aus zwei
   Reglern also, nicht aus einer festen Zahl im Code.

   Im Dreispalter gibt es keine Trennlinie: Dort ist die Passung eine
   abgeschlossene Einheit, und der Abstand zum Akkordeon darunter muss
   deutlich groesser sein als der innerhalb der Einheit — sonst liest sich das
   erste Akkordeon als deren Fortsetzung. Kodex Abschnitt 3: Abstand ist
   Gliederung. Zwei Klassen im Selektor, damit die Regel die Nullstellung von
   .spacing-style schlaegt: die setzt alle Aussenabstaende auf 0. */
.product-information--three-columns .fck {
  margin-block-end: var(--margin-5xl, 72px);
}

/* Umrechnung: zwei Zustaende, dazwischen ein Pfeil. */

.fck__fuss {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-top: 11px; font-size: 13px; color: var(--fck-grau);
}
.fck__fuss b { display: inline; font-size: 13px; font-weight: 700; color: var(--fck-ink); }
.fck__fuss a {
  color: var(--fck-ink); font-size: 13px; font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
}

.fck__modelle { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.fck__modelle span {
  border: 1px solid var(--fck-linie); border-radius: var(--3idee-radius-klein);
  padding: 5px 9px; font-size: 12.5px; color: var(--fck-grau);
}
.fck__modelle span b { display: inline; color: var(--fck-ink); font-weight: 700; font-size: 12.5px; }
.fck__modelle span[hidden] { display: none; }
.fck__auf {
  background: none; border: 0; padding: 0; margin-top: 9px; font: inherit; font-size: 12.5px;
  color: var(--fck-grau); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

.fck__leib { padding: 0; }
.fck__feld { display: flex; align-items: stretch; border: 1px solid var(--fck-ink); border-radius: var(--3idee-radius-mittel); }
.fck__feld svg { width: 16px; height: 16px; margin: 0 8px 0 12px; align-self: center; color: var(--fck-grau); flex: 0 0 auto; }
/* Doppelte Klasse gegen die Grundregel des Themes fuer Eingabefelder. */
.fck .fck__feld input {
  flex: 1 1 auto; min-width: 0; height: 44px; border: 0; background: none; background-color: transparent;
  font: inherit; font-size: 14px; color: var(--fck-ink); box-shadow: none; text-overflow: ellipsis;
}
.fck .fck__feld input:focus { outline: none; }
/* Der Platzhalter ist laenger als der eingetippte Text je wird — er nennt ein
   Beispiel. Etwas kleiner, damit er in die Spaltenbreite passt. */
.fck .fck__feld input::placeholder { font-size: 13px; }
.fck__feld button {
  margin: 4px; border: 0;
  /* Dieselbe FARBE wie der primaere Knopf des Themes — zwei Knoepfe, die
     nebeneinander verschieden aussehen, sind ein Fehler, kein Detail.

     Die Rundung folgt ihm seit 20.08.2026 NICHT mehr. Sie folgt der Groesse:
     Dieser Knopf ist 36 Punkte hoch, der Kaufknopf 52. Dieselbe Zahl haette
     ihn deutlich runder wirken lassen als den grossen — das Auge liest das
     Verhaeltnis, nicht die Pixel. Kodex Kapitel 5. */
  border-radius: var(--3idee-radius-klein);
  background: var(--color-primary-button, var(--3idee-ink));
  color: var(--color-primary-button-text, #fff);
  padding: 0 15px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap;
}

.fck__treffer { margin-top: 10px; border: 1px solid var(--fck-linie); border-radius: var(--3idee-radius-mittel); overflow: hidden; }
.fck__treffer[hidden] { display: none; }
.fck__treffer > b {
  display: block; padding: 8px 12px; background: var(--fck-flaeche); font-size: 11.5px;
  font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--fck-grau);
}
.fck__treffer button {
  display: block; width: 100%; text-align: left; border: 0; background: none;
  padding: 10px 12px; font: inherit; font-size: 14px; cursor: pointer; color: var(--fck-ink);
}
.fck__treffer button + button { border-top: 1px solid var(--fck-linie); }
.fck__treffer button:hover { background: var(--fck-flaeche); }
.fck__treffer small { color: var(--fck-grau); font-size: 12.5px; }

/* Gemerkter Monitor. Gleiche Anmutung wie in der Suchzeile, nur schmaler —
   hier steht er in der Kaufbox und nicht im Hero. */
/* Das Urteil neben dem Modell: Zeichen und zwei Worte, in der Signalfarbe.
   Keine Flaeche, kein Punkt — der Punkt gehoert der Lagerzeile. */
/* ── Die Zeilen ────────────────────────────────────────────────────────
   Zwei Spalten fuer die ganze Liste, nicht je Zeile: Nur so stehen die
   Ergebnisse in einer Flucht, egal wie lang die Modellnamen sind. Genau das
   macht die Liste senkrecht lesbar — links die Geraete, rechts die Antworten.

   Kein Kasten, kein Badge, keine Flaeche. Die Antwort wird sichtbar ueber
   Schriftgewicht, Zeichen und Abstand, sonst nichts. Kodex Abschnitt 3. */
/* EINE FLUCHT, GEHALTEN VON EINER HAARLINIE.

   Antwort, "Auswahl ändern" und der Kaufknopf der Karte stehen an derselben
   rechten Kante. Das ist ruhig zu lesen, trennt aber Gerät und Antwort weit
   voneinander — also führt eine Haarlinie vom einen zum anderen. Sie ersetzt
   die Nähe, die die Flucht kostet.

   Kein Raster mehr, sondern eine Flex-Zeile je Gerät: Die Linie muss den Rest
   der Breite fressen, und genau das kann eine Rasterzelle nicht. Mittig
   ausgerichtet, nicht auf der Grundlinie — die Grundlinie einer Flex-Zelle
   stammt von ihrem ERSTEN Kind, hier also vom Monitorsymbol statt vom Text,
   und dadurch sass die Antwort daneben zu hoch. */
.fck__zeilen { display: block; }
.fck__zeilen > * + * { margin-top: 11px; }

.fck__z-zeile {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Die Linie beginnt erst nach dem Namen und endet vor der Antwort — sie
   verbindet, sie unterstreicht nicht. Mindestbreite, damit sie bei einem
   langen Modellnamen nicht auf null schrumpft und die Verbindung reisst. */
.fck__z-linie {
  flex: 1 1 auto;
  min-width: 14px;
  height: 1px;
  background: var(--fck-linie);
}

/* Sobald ein Ergebnis dasteht, ist der Auswahlkasten ueberfluessig: Jede Zeile
   nennt ihr Geraet selbst, mit demselben Symbol. Bei mehreren Monitoren koennte
   der Kasten ohnehin nur eines herausgreifen ("HP 524sf + 2 weitere"). */
.fck--ergebnis .fck__wahl { display: none; }

/* Die Karte gehoert zur Zeile darueber. Zugeordnet wird sie ueber den Einzug,
   nicht ueber einen Satz, der das Modell noch einmal nennt — und seit dem
   21.08.2026 auch nicht mehr ueber eine senkrechte Haarlinie: Die Zeile hat
   jetzt eine waagerechte, und zwei Linien um dieselbe Sache sind eine zu viel.

   26 Pixel, damit die Karte unter dem NAMEN beginnt, nicht unter dem Symbol
   (17 px Symbol + 8 px Abstand + 1). */
.fck__z-anhang { margin-left: 26px; }

/* Symbol und Name sind EIN Gegenstand — deshalb in einer Zelle, nicht in
   zwei Spalten. Das Symbol steht auf der Grundlinie des Namens. */
.fck__z-modell {
  min-width: 0; overflow-wrap: anywhere;
  display: inline-flex; align-items: baseline; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--fck-ink);
}
.fck__z-modell > svg {
  width: 17px; height: 17px; flex: 0 0 auto;
  align-self: center; color: var(--fck-ink);
}
/* Das Statuswort traegt mehr Gewicht als der Modellname: Es ist die Antwort,
   der Name ist der Gegenstand der Frage. */
.fck__z-status {
  display: inline-flex; align-items: baseline; gap: 6px;
  white-space: nowrap;
  font-size: 14px; font-weight: 800; color: var(--fck-ink);
}
/* Farbe traegt allein das Zeichen. Ein ganz rotes "Nicht kompatibel" waere
   eine Fehlermeldung — es ist aber eine Produkteigenschaft. */
.fck__z-status i { font-style: normal; font-size: 13px; font-weight: 800; }
.fck__z-status--ok i { color: var(--3idee-success); }
.fck__z-status--warn i { color: var(--3idee-error); }
.fck__z-status--rec i { color: var(--fck-grau); }
/* Neutral: weder Zusage noch Absage. Grau ist hier keine Abschwaechung,
   sondern die richtige Farbe — die Frage trifft auf diesen Monitor nicht zu. */
.fck__z-status--neutral i { color: var(--fck-grau); }
/* Der Anhang folgt dicht auf seine Zeile — dichter als die naechste Zeile
   folgt. Der Abstand sagt, was zusammengehoert. */
.fck__zeilen > .fck__z-anhang { margin-top: 6px; }
.fck__z-kurz { display: block; font-size: 13px; color: var(--fck-grau); }
.fck__z-anhang .fck__karten { margin-top: 9px; }
.fck__z-anhang .fck__weiter { margin-top: 9px; }

/* Sobald ein Monitor gewaehlt ist, verschwindet die Modellzahl mitsamt
   "Modelle ansehen": Wer sein Modell genannt hat, dem hilft die Referenz
   nicht mehr weiter — an ihre Stelle rueckt seine eigene Auswahl. */
.fck:has([data-fh2-wahl]:not([hidden])) .fck__fuss { display: none; }

/* Eine Zeile, kein Kasten: Der gewaehlte Monitor ist eine Angabe, kein
   Status. Der Knopf "Ansehen" ist entfallen — er fuehrte auf die Seite, auf
   der man ohnehin schon steht. */
.fck__wahl {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
}
.fck__wahl[hidden] { display: none; }
.fck__wahl > svg { width: 19px; height: 19px; flex: 0 0 auto; color: var(--fck-orange); }
.fck__wahl-txt { flex: 0 1 auto; min-width: 0; }
.fck__wahl-txt b { display: block; font-size: 13.5px; line-height: 1.25; }
.fck__wahl-mehr { display: block; font-size: 11.5px; color: var(--fck-grau); }
.fck__wahl-mehr[hidden] { display: none; }
.fck__wahl-ansehen {
  flex: 0 0 auto; border: 1px solid var(--fck-linie); border-radius: var(--3idee-radius-klein); background: #fff;
  color: var(--fck-ink); padding: 7px 13px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.fck__wahl-neu {
  flex: 0 0 auto; margin-inline-start: auto; background: none; border: 0; padding: 7px 2px; font: inherit; font-size: 12.5px;
  color: var(--fck-grau); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

/* Hinweis beim universellen Produkt — ruhig, keine Signalfarbe: Es ist eine
   Einordnung, kein Status. */
.fck__universell {
  margin: 0 0 12px; padding: 11px 13px; border-radius: var(--3idee-radius-mittel);
  background: var(--fck-flaeche); color: var(--fck-grau); font-size: 13px; line-height: 1.45;
}

/* Kein getoenter Kasten mehr, sondern eine Zeile mit Punkt — dieselbe Form
   wie die Lagerzeile in der Kaufspalte. Grund: Im Kasten sassen Kasten,
   Knopf und Produktkaertchen ineinander, und drei Hintergruende uebereinander
   ergaben mehr Gestaltung als Aussage. Die Farbe steckt jetzt allein im Text
   und im Punkt. Das Rot als Flaeche traegt weiterhin das Pop-up nach dem
   Klick. Farben nach 3idee-designkodex.md. */
.fck__erg { padding: 0; background: none; border: 0; }
.fck__erg[hidden] { display: none; }
.fck__erg--ok   .fck__erg-kopf { color: var(--3idee-success); }
.fck__erg--warn .fck__erg-kopf { color: var(--3idee-error); }
.fck__erg--rec  .fck__erg-kopf { color: var(--fck-grau); }
.fck__erg-kopf { display: flex; align-items: flex-start; gap: 10px; }
.fck__erg-kopf > b { flex: 1 1 auto; min-width: 0; }
.fck__erg b { display: block; font-size: 14.5px; line-height: 1.3; }
.fck__erg small { display: block; font-size: 12.5px; margin-top: 3px; color: var(--fck-grau); }
.fck__erg small[hidden] { display: none; }

/* Das (i) — gleiche Machart wie im Finder: rundes Zeichen, Kasten darunter.
   Es traegt die Begruendung, nicht die Aussage. */
.fck__warum { flex: 0 0 auto; position: relative; }
.fck__warum[hidden] { display: none; }
/* Kreis, kein Oval: Das Theme gibt <summary> ein Innenmass mit, das die 22 px
   auseinanderzieht. Deshalb padding 0, feste Breite UND flex-basis, und
   box-sizing, damit der Rand nicht zusaetzlich aufbaut. */
.fck__warum summary {
  list-style: none; box-sizing: border-box;
  flex: 0 0 22px; width: 22px; height: 22px; min-width: 22px; padding: 0;
  border-radius: 50%; border: 1px solid currentColor; background: #fff;
  font: inherit; font-size: 12px; font-weight: 900; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: .6; outline: none;
}
.fck__warum summary::-webkit-details-marker { display: none; }
.fck__warum summary::marker { content: ""; }
.fck__warum summary:hover { opacity: 1; }
/* Offen: gefuellt in der Signalfarbe, Zeichen weiss. Vorher stand hier
   currentColor fuer beides — das Zeichen verschwand im eigenen Hintergrund. */
.fck__warum[open] summary { opacity: 1; background: currentColor; }
.fck__warum[open] summary { color: #fff; }
.fck__erg--ok   .fck__warum[open] summary { background: var(--3idee-success); }
.fck__erg--rec  .fck__warum[open] summary { background: var(--fck-grau); }
.fck__erg--warn .fck__warum[open] summary { background: var(--3idee-error); }

/* Der Kasten steht auf Weiss und erbt NICHTS aus der getoenten Meldung —
   weder die Signalfarbe des Textes noch die Blockdarstellung der Ueberschrift.
   Der Rich-Text der Engine bringt eigene <b> und <div> mit; ohne diese Regeln
   standen sie in Rot und als eigene Zeilen da. */
.fck__warum-box {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 20;
  width: min(320px, calc(100vw - 48px)); padding: 13px 14px;
  background: #fff; border: 1px solid var(--fck-linie); border-radius: var(--3idee-radius-mittel);
  box-shadow: 0 12px 30px rgb(31 34 48 / .18);
  font-size: 13px; line-height: 1.45; font-weight: 400;
  color: var(--fck-ink); text-align: left;
}
.fck__warum-box * { color: inherit; background: none; }
.fck__warum-box b, .fck__warum-box strong { display: inline; font-size: inherit; font-weight: 700; }
.fck__warum-box p, .fck__warum-box div { margin: 0 0 8px; font-size: inherit; }
.fck__warum-box > :last-child { margin-bottom: 0; }
.fck__warum-box br + br { display: none; }
/* HIER STANDEN DREI REGELN, DIE JEDES <b> UND <small> IM ERGEBNIS NACH DER
   STUFE DES KASTENS EINGEFAERBT HABEN. Sie stammen aus der Zeit, als der ganze
   Kasten eine Farbe trug.

   Das Statussystem vom 19.08. hat das abgeschafft: Farbe traegt allein das
   Zeichen, nie der Text. Solange nur EIN Monitor geprueft wurde, fiel es nicht
   auf. Bei mehreren ist die Stufe des Kastens die schlechteste der Liste — und
   dann faerbte sich die Erklaerung eines voellig anderen Monitors rot ein.
   Genau so entstand "Hat bereits eine VESA-Aufnahme" in Rot. (21.08.2026) */

/* Vorschlaege der Engine. Weiss, damit sie sich aus der getoenten Flaeche
   heben — die Karte ist das Angebot, nicht Teil der Meldung. */
/* Einordnung einmal ueber der Liste: Die Zeile selbst traegt den
   Produktnamen, nicht die Erklaerung. Beides in einer Zeile waere zu viel,
   und an jedem Vorschlag stuende dasselbe. */
.fck__karten-kopf {
  display: block; margin-top: 12px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--fck-grau);
}

/* Vorschlag als Zeile mit Produktbild — wie eine Produktzeile im Finder,
   nicht wie ein Textlink aus einem alten Katalog. Kreis, Name, Pfeil; die
   ganze Zeile ist klickbar und hebt sich beim Darueberfahren leicht ab. */
/* Die Alternative ist eine kleine Produktseite: Bild, Titel, Preis, Aktion.
   Der Rahmen haelt zusammen, was zusammengehoert, und trennt es von der
   Kaufzone der Seite, die ein anderes Produkt meint. Keine dunkle Flaeche —
   die gehoert dem Kaufknopf der Seite, sonst stuenden zwei Kaufaktionen
   gleichwertig nebeneinander und eine davon waere die falsche. */
/* KEIN Rahmen. In der Pruefung stehen ohnehin Linien — die Gruppierung neben
   dem Monitor, die Trennung zum Preis darunter. Ein weiterer Kasten machte
   daraus ein Gitter. Zusammengehalten wird die Karte durch Naehe und die
   Ueberschrift darueber. Kodex Abschnitt 3: gegliedert wird ueber Abstand,
   eine Flaeche kommt erst, wenn das nicht reicht. */
/* Bild — Titel und Preis — Knopf, alles auf einer Hoehe. Der Knopf steht
   neben dem Artikel, nicht unter ihm: So bleibt die Karte eine Zeile, und das
   Bild bestimmt ihre Hoehe. */
.fck__mini {
  display: flex; align-items: center; gap: 13px; margin-top: 6px;
}
.fck__mini-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fck__mini-titel { font-size: 13.5px; font-weight: 700; line-height: 1.3; }

/* Bild und Titel oeffnen das Fenster. Beides traegt keinen eigenen Anstrich —
   sie sehen aus wie Bild und Titel, verhalten sich aber wie ein Weg dorthin.
   Das Bild ist fuer die Tastatur uebersprungen (tabindex -1), damit derselbe
   Weg nicht zweimal angesteuert wird; der Titel traegt ihn. */
.fck__mini-bild {
  padding: 0; border: 0; background: none; cursor: pointer;
  display: inline-flex; flex: 0 0 auto;
}
.fck__mini-titel-knopf {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
}
.fck__mini-titel-knopf:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Der Titel kommt als fertiges Stueck aus dem Abschnitt — derselbe wie auf der
   Produktseite, mit Modellzeile. Hier eine Nummer kleiner, und OHNE die
   Trennlinie, die er auf der Produktseite traegt: Dort trennt sie ihn von der
   Passung, in der Karte traefe sie den Preis. */
.fck__mini .pdt { border: 0; margin: 0; padding: 0; }
.fck__mini .pdt__titel { font-size: 14px; line-height: 1.25; }
.fck__mini .pdt__sub { font-size: 12.5px; margin-top: 2px; }
.fck__mini-titel a { color: inherit; text-decoration: none; }
.fck__mini-titel a:hover { text-decoration: underline; text-underline-offset: 3px; }

.fck__mini-preis { font-size: 15px; font-weight: 800; }
.fck__mini-preis:empty { display: none; }
/* "/ Stueck" steht nur da, wenn mehr als eins gebraucht wird — in derselben
   Zeile wie der Preis und leiser als er: Der Zusatz ordnet den Preis ein, er
   ist keine zweite Zahl. */
.fck__mini-preis small {
  display: inline;
  margin-inline-start: 5px;
  font-size: 12px; font-weight: 400; color: var(--fck-grau);
}
/* QUICK ADD DES THEMES — MIT SEINER POSITIONIERUNG, NICHT GEGEN SIE.

   Erster Versuch war, dem Knopf die absolute Position zu nehmen und ihn in die
   Zeile zu stellen. Das ging schief: quick-add-component, product-form-component
   und add-to-cart-component sind eigene HTML-Elemente OHNE display-Angabe, also
   Inline-Kaesten. Im Produktraster faellt das nie auf, weil der Knopf dort
   absolut positioniert ist und dadurch ohnehin zum Block wird. Nimmt man ihm
   die Position, bleibt eine Kette aus Inline-Kaesten — und die fiel in einer
   Zeile mit Inhaltsbreite in sich zusammen. Der Knopf stand im Dokument, war
   aber null Pixel breit. (21.08.2026)

   Jetzt andersherum: Die Aktionsspalte IST der Rahmen, in dem der Knopf haengt.
   Alles bleibt, wie das Theme es baut — nur der Bezugsrahmen ist nicht mehr die
   Bildkachel, sondern ein 36-Pixel-Feld am Zeilenende.

   Zwei Ausnahmen: Er ist immer sichtbar (im Raster erscheint er beim
   Ueberfahren der Kachel — eine Ergebniszeile ist aber nichts zum Erkunden),
   und er sitzt buendig im Feld statt mit dem Abstand, den er zum Bildrand
   haelt. Beim Ueberfahren klappt die Beschriftung nach links in den freien
   Raum der Zeile auf, genau wie im Raster ueber das Bild. */
.fck__mini-aktion { flex: 0 0 auto; }

/* Das Mass gilt nur dort, wo Quick Add wirklich drinsteckt — "Auswaehlen" und
   "Nicht verfuegbar" brauchen ihre Textbreite. Die Klasse setzt
   finder-check.js beim Einsetzen, statt hier auf :has() zu bauen. */
.fck__mini-aktion--quick {
  position: relative;
  width: var(--button-size-md, 36px);
  height: var(--button-size-md, 36px);
}
/* Der Knopf haengt absolut am rechten Rand seines Rahmens — und breiter als
   dieser Rahmen kann er nicht werden. Bliebe der Rahmen das 36-Pixel-Feld,
   bliebe der Kreis beim Ueberfahren ein Kreis und "Hinzufuegen" braeche darin
   um. Im Raster ist der Rahmen die ganze Bildkachel, deshalb faellt es dort
   nicht auf.

   Also reicht der Rahmen nach LINKS ueber das Feld hinaus, in den freien Raum
   der Zeile. Sichtbar ist davon nichts: Die Flaeche laesst Klicks durch
   (pointer-events des Themes), und der Knopf selbst ist so breit wie sein
   Inhalt — im Ruhezustand rund, beim Ueberfahren ein Oval mit Text. */
.fck__mini-aktion--quick .quick-add {
  left: auto;
  width: 240px;
}
.fck__mini-aktion--quick .quick-add__button {
  right: 0;
  bottom: 0;
  opacity: 1;
}
/* Sichtbar gemacht wird genau der Knopf, den das Theme fuer diesen Fall
   vorsieht — das Pluszeichen oder "Auswaehlen". Bewusst NICHT ueber
   .quick-add__button pauschal: Die Regeln, die den jeweils anderen ausblenden,
   haben dieselbe Staerke, und dann entschiede die Ladereihenfolge der
   Stilblaetter, welcher gewinnt. Es waeren zeitweise beide zu sehen. */
.fck__mini-aktion--quick [data-quick-add-button='add'] .quick-add__button--add,
.fck__mini-aktion--quick [data-quick-add-button='choose'] .quick-add__button--choose {
  display: flex;
}

/* Solange nichts geladen ist, nimmt das Feld auch keinen Platz — sonst
   rutschte die Zeile beim Nachladen. */
.fck__mini-aktion:empty { display: none; }

/* Kein Kauf, sondern ein Weg ins Fenster — oder gar nichts. Deshalb bewusst
   NICHT der Kaufknopf des Themes: Was nicht in den Warenkorb legt, soll auch
   nicht so aussehen. */
.fck__mini-ersatz {
  width: 100%; height: 38px; padding: 0 14px;
  border: 1px solid var(--fck-ink); border-radius: var(--3idee-radius-klein);
  background: none; color: var(--fck-ink);
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.fck__mini-ersatz:hover { background: var(--fck-flaeche); }
.fck__mini-ersatz[disabled] { opacity: .45; cursor: default; }

.fck__mini-dlg {
  width: min(860px, calc(100vw - 32px)); max-height: 86vh;
  padding: 0; border: 0; border-radius: var(--3idee-radius-gross);
  overflow: hidden; background: #fff;
}
.fck__mini-dlg::backdrop { background: rgb(var(--backdrop-color-rgb, 31 34 48) / var(--backdrop-opacity, 0.42)); }
.fck__mini-laedt { margin: 0; padding: 48px; text-align: center; color: var(--fck-grau); }

/* Der alte Vorschlag als reiner Weg — steht noch fuer den Fall, dass ein
   Produkt nicht mit dem Shop verknuepft ist. */
.fck__vorschlag {
  display: inline-flex; margin-top: 6px;
  text-decoration: none; color: var(--fck-ink);
}
.fck__mini .fck__vorschlag-ic { flex: 0 0 72px; }
.fck__vorschlag-ic {
  flex: 0 0 72px; width: 72px; height: 72px;
  border-radius: var(--3idee-radius-klein);
  background: var(--fck-flaeche);
  display: grid; place-items: center; overflow: hidden;
}
/* Die helle Flaeche bleibt: Ein freigestellter schwarzer Adapter auf weissem
   Grund hat keine Kante und schwebt im Nichts. Sie macht ihn erst zum Objekt. */
.fck__vorschlag-ic img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
/* Beim Darueberfahren dieselbe Farbe wie der Kaufknopf — aber als Kontur, nicht
   als Fuellung. Der Kunde soll erkennen: hier geht es weiter, auf derselben
   Ebene wie "hier kaufe ich". Als Flaeche ginge es nicht: Unsere Produktbilder
   sind freigestellte schwarze Adapter, auf dunklem Grund verschwaenden sie
   genau im Moment des Hinschauens. Und der Kodex behaelt dunkle Flaechen dem
   Kaufknopf vor, damit nichts mit ihm konkurriert.

   Die Farbe kommt aus der Knopf-Einstellung selbst, nicht als eigener Wert —
   aendert sich der Kaufknopf, aendert sich das hier mit. */
.fck__vorschlag:hover .fck__vorschlag-ic,
.fck__vorschlag:focus-visible .fck__vorschlag-ic {
  box-shadow: inset 0 0 0 2px var(--color-primary-button-background, var(--3idee-ink));
}

/* Ausnahme: nicht im Shop verknuepft — dieser Weg fuehrt in den Finder und
   braucht Worte. */
.fck__vorschlag--text {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 10px;
  border: 1px solid var(--fck-linie); border-radius: var(--3idee-radius-mittel);
  background: #fff;
}
.fck__vorschlag--text .fck__vorschlag-ic {
  flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--fck-linie);
}
.fck__vorschlag--text .fck__vorschlag-ic img { padding: 3px; }
.fck__vorschlag-txt { flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 600; }
.fck__vorschlag-txt small { font-weight: 400; color: var(--fck-grau); }

/* Rundes Produktbild wie im Finder (.fn-req-ic) — dieselbe Groesse, dieselbe
   weiche Flaeche. Auch ohne Bild bleibt der Kreis stehen, sonst springt die
   Karte je nach Datenlage. */
/* Austauschbare Loesungen: Spacer ODER Bolt-Set, nie beide — dieselbe Regel
   wie im Finder. Das Wort steht zwischen den Karten, nicht in der Meldung. */
.fck__oder {
  display: flex; align-items: center; gap: 10px; color: var(--fck-grau);
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.fck__oder::before, .fck__oder::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--fck-linie); }

.fck__weiter {
  display: inline-block; margin-top: 11px; border-radius: var(--3idee-radius-klein); padding: 9px 13px;
  background: var(--fck-ink); color: #fff; font-size: 13.5px; font-weight: 700; text-decoration: none;
}
.fck__weiter[hidden] { display: none; }
/* Die Einleitung zum Weg. Sie steht UEBER dem Knopf, nicht als Fussnote
   daneben — sonst waere sie wieder das, was am 20.08. zu Recht entfernt
   wurde. Ruhig gesetzt: Die Aussage der Zeile ist die Absage darueber, der
   Satz hier erklaert nur, was der Knopf darunter soll. */
.fck__weiter-grund {
  margin: 9px 0 0; font-size: 13px; line-height: 1.45; color: var(--fck-grau);
  max-width: 46ch;
}
.fck__weiter-grund + .fck__weiter { margin-top: 7px; }
/* Der zweite Weg: erreichbar, aber nicht werbend. Zwei gleich starke Knoepfe
   nebeneinander wuerden den Kunden waehlen lassen, statt ihn zu fuehren —
   und genau dann landet er wieder im Chat statt im Finder. */
.fck__zweitweg {
  display: block; margin-top: 9px; font-size: 12.5px; color: var(--fck-grau);
  text-decoration: underline; text-underline-offset: 3px;
}
.fck__neu {
  display: block; background: none; border: 0; padding: 0; margin-top: 10px; font: inherit;
  font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
  color: var(--fck-grau);
}
/* END_BLOCK:finder-check */

/* START_BLOCK:finder-suche (INDEX:119) */
.fsz {
  position: relative;
  --fh-linie: rgb(var(--color-foreground-rgb, 31 34 48) / .55);
  --fh-linie: color-mix(in srgb, var(--fh-orange, var(--3idee-ink)) 55%, transparent);

  /* Aus der Textspalte des Heros ausbrechen.

     Der Hero begrenzt seine Bloecke auf eine Lesebreite — sinnvoll fuer
     Ueberschrift und Text, zu eng fuer eine Suchzeile: dort wurde der
     Platzhalter mitten im Beispiel abgeschnitten. Die Zeile bekommt deshalb
     ihre eigene Breite und darf breiter sein als ihr Elternteil.

     Zentriert ueber 50% plus Ruecksetzen: margin-inline:auto zentriert nur
     Elemente, die SCHMALER sind als ihr Elternteil — ein breiteres liefe
     einseitig nach rechts aus. Die Deckelung auf die Fensterbreite verhindert
     waagerechtes Scrollen. */
  width: auto;
}

/* Nur ab 750px ausbrechen. Auf dem Handy ist die Textspalte des Heros ohnehin
   fast bildschirmbreit — dort gewinnt der Ausbruch nichts, verschiebt die
   Zeile aber nach links aus dem Bild: die Zentrierung rechnet gegen die
   ELTERNBREITE, und die liegt auf schmalen Geraeten anders als der
   Fenstermittelpunkt. */
@media screen and (min-width: 750px) {
  .fsz {
    /* Nur die Breite setzen, NICHT zusaetzlich zentrieren.

       Der Hero zentriert seine Inhalte bereits selbst — ein Element, das
       breiter ist als seine Spalte, ragt dabei gleichmaessig nach beiden
       Seiten heraus, genau wie gewuenscht. Der frueher hier stehende Versatz
       (margin-left:50% plus Ruecksetzen) rechnete ein zweites Mal und schob
       die Zeile dadurch etwa 50px nach links: sichtbar daran, dass Headline
       und Bewertungs-Abzeichen mittig standen, die Suchzeile aber nicht.

       margin-inline:auto ist nur die Absicherung fuer den Fall, dass die
       Zeile einmal in einem nicht zentrierenden Bereich landet. */
    width: min(var(--fsz-breite, 52rem), calc(100vw - 2 * var(--page-margin, 20px)));
    max-width: none;
    margin-inline: auto;
  }
}
/* Solange die Trefferliste offen ist, muss die Zeile ueber dem folgenden
   Abschnitt liegen — sonst schoebe sich dessen Hintergrund darueber. Die
   Klasse setzt finder-hero.js; sie heisst dort einheitlich so. */
.fsz.finder-hero--liste-offen { z-index: 5; }

/* [hidden] allein reicht nicht: die Grundregel des Browsers dafuer ist sehr
   schwach und wird von jeder eigenen display-Angabe ueberschrieben — die Zeile
   blieb sonst sichtbar, obwohl sie als versteckt markiert war, und Suchfeld
   und Auswahl standen gleichzeitig da. */
.fsz .fh2__bar[hidden] { display: none; }
.fsz .fh2__bar {
  position: relative;
  display: flex; align-items: stretch;
  /* Milchglas statt dunkler Flaeche: der Startseiten-Hero ist hell und mittig,
     dort verschwindet eine dunkle Leiste halb im Bild. Auf hellem Grund steht
     die Schrift unabhaengig davon, wie hell das Video gerade ist. */
  /* Neutraler Rand. Orange umrandet nichts mehr — es steht nur noch an
     Haken, Punkten und Icons. Hier traegt es die LUPE, weil das die
     Monitor-Aktion ist. */
  border: 1px solid rgb(255 255 255 / .85); border-radius: var(--3idee-radius-mittel);
  background: rgb(255 255 255 / .72); backdrop-filter: blur(12px);
  box-shadow: 0 14px 40px rgb(0 0 0 / .18);
  cursor: text;
}
.fsz .fh2__bar:focus-within { box-shadow: 0 14px 40px rgb(0 0 0 / .18), 0 0 0 3px rgb(31 34 48 / .18); }
.fsz .fh2__feldbereich {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; justify-content: center;
}
.fsz .fh2__feldzeile { display: flex; align-items: center; }
.fsz .fh2__lupe {
  flex: 0 0 auto; width: 18px; height: 18px; align-self: center;
  margin-left: 17px; margin-right: 11px;
  color: #6c7280; pointer-events: none;
}
.fsz .fh2__lupe svg { width: 100%; height: 100%; display: block; }

/* Doppelter Selektor gegen die Grundregel des Themes fuer Eingabefelder
   (input:not([type=checkbox],[type=radio]) setzt eine Hintergrundfarbe) —
   ohne ihn stuende das Feld weiss auf dem Bild. */
.fsz .fh2__bar .fh2__feld {
  /* Ohne Wachstumsregel bleibt ein input auf seiner Standardbreite von rund
     20 Zeichen stehen — auch in einer breiten Leiste. Der Platzhalter mit
     Beispiel ist laenger und wurde deshalb abgeschnitten, obwohl rechts
     daneben Platz frei war. */
  flex: 1 1 auto; min-width: 0;
  height: 50px; border: 0; border-color: transparent;
  background: none; background-color: transparent; color: var(--fh-ink);
  padding: 0 12px 0 0; font: inherit; font-size: 16px;
  box-shadow: none; text-overflow: ellipsis;
}
.fsz .fh2__bar .fh2__feld::placeholder { color: #6c7280; opacity: 1; }
.fsz .fh2__bar .fh2__feld:focus { outline: none; }
.fsz .fh2__bar .fh2__feld:-webkit-autofill,
.fsz .fh2__bar .fh2__feld:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--fh-ink);
  -webkit-box-shadow: 0 0 0 60px #fff inset;
}

/* Primaere Theme-Schaltflaeche — bewusst OHNE eigene Farben. Flaeche, Schrift
   und Rahmen kommen aus den Theme-Einstellungen; aendert ihr sie dort, wandert
   dieser Knopf mit und bleibt zum Rest des Shops passend. Hier steht nur die
   Geometrie, damit er als eigene Flaeche IN der Leiste sitzt. */
.fsz .fh2__bar .button {
  border-radius: var(--3idee-radius-mittel); margin: 5px; align-self: stretch; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; white-space: nowrap;
}

/* Mittig, weil der Startseiten-Hero mittig ist. Auf der Finder-Seite bleibt
   alles linksbuendig — dort steht die Zeile neben einer linksbuendigen
   Headline. Deshalb hier und nicht in der gemeinsamen Gestaltung. */
.fsz .fh2__actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 13px; justify-content: center; }
.fsz .fh2__actions { transition: opacity .15s ease, visibility .15s ease; }
.fsz.finder-hero--liste-offen .fh2__actions { opacity: 0; visibility: hidden; }

/* Trefferliste — Fortsetzung der Leiste, nicht Fremdkoerper. */
.fsz .fh2__dd {
  position: absolute; top: calc(100% + 6px); left: -1.5px; right: -1.5px; z-index: 20;
  border: 1px solid rgb(0 0 0 / .10); border-radius: var(--3idee-radius-mittel);
  background: rgb(255 255 255 / .96); backdrop-filter: blur(14px);
  overflow: hidden auto; max-height: 17rem; overscroll-behavior: contain;
  box-shadow: 0 24px 54px rgb(0 0 0 / .28);
  scrollbar-width: thin; scrollbar-color: rgb(0 0 0 / .25) transparent;
}
.fsz .fh2__dd[hidden] { display: none; }
.fsz .fh2__dd::-webkit-scrollbar { width: 8px; }
.fsz .fh2__dd::-webkit-scrollbar-thumb { background: rgb(0 0 0 / .22); border-radius: var(--3idee-radius-mittel); }
.fsz .fh2__ddi {
  display: block; width: 100%; border: 0; background: none; cursor: pointer;
  padding: 10px 15px; font: inherit; text-align: left; color: var(--fh-ink);
}
.fsz .fh2__ddi:hover, .fsz .fh2__ddi:focus-visible { background: #f6f7f9; outline: none; }
.fsz .fh2__ddi + .fh2__ddi { border-top: 1px solid #f1f2f4; }
.fsz .fh2__ddi-n { display: block; font-size: 14.5px; font-weight: 700; }
.fsz .fh2__ddi-s { display: block; font-size: 12.5px; color: rgb(31 34 48 / .6); margin-top: 1px; }
.fsz .fh2__dd-leer { margin: 0; padding: 13px 15px; font-size: 14px; color: rgb(31 34 48 / .6); }

@media screen and (max-width: 749px) {
  /* Wie auf der Finder-Seite: der Block liegt nicht IM Bild, sondern schliesst
     sich unten an und verbindet sich ueber einen Verlauf damit.

     Der Ausbruch laeuft ueber negative Seitenabstaende (50% des Elternteils
     minus 50% des Fensters). Das ist unabhaengig davon, ob und wie der Hero
     seine Inhalte zentriert — im Gegensatz zum frueheren Versatz, der genau
     daran gescheitert ist und die Zeile nach links geschoben hat.

     Der Verlauf beginnt durchsichtig, damit das Video oben noch durchkommt,
     und laeuft unten in dieselbe Farbe wie der Finder-Hero. Dadurch wirken
     Bild und Eingabe als ein Block statt als zwei uebereinandergelegte.

     Damit es aufgeht, muss dieser Block der LETZTE im Hero sein — steht noch
     etwas darunter (etwa das Bewertungs-Abzeichen), sitzt das wieder auf dem
     Video statt auf der dunklen Flaeche. */
  .fsz {
    margin-inline: calc(50% - 50vw);
    /* Der Abstand nach oben zieht den Hero in die Laenge: er hat eine
       MINDESThoehe, waechst also mit dem Inhalt. Damit laesst sich hier
       dieselbe Feinjustierung machen wie beim Bildband der Finder-Seite —
       dort weniger, hier mehr. Ueber der Zeile bleibt so mehr Video stehen,
       und Headline, Eingabe und Knoepfe stehen nicht mehr aufeinander. */
    padding: var(--fsz-luft, 72px) var(--page-margin, 20px) 28px;
    background: linear-gradient(
      to bottom,
      rgb(13 14 19 / 0) 0%,
      rgb(13 14 19 / .55) 34%,
      rgb(13 14 19 / .88) 68%,
      #0d0e13 100%
    );
  }

  .fsz .fh2__bar { flex-wrap: wrap; max-width: none; }
  .fsz .fh2__feldbereich { flex: 1 1 100%; }
  .fsz .fh2__bar .button { flex: 1 1 100%; border-radius: var(--3idee-radius-mittel); margin: 0 5px 5px; }
  .fsz .fh2__actions { justify-content: center; }
  .fsz .fh2__actions .button-secondary { width: 100%; }
}
/* ── Suchzeile im Zustand "Monitor steht fest" ──────────────────────────
   Gleiche Huelle wie das Suchfeld, damit der Wechsel wie derselbe Baustein in
   anderem Zustand wirkt und nicht wie ein fremder Kasten. */
.fsz .fh2__wahl {
  display: flex; align-items: center; gap: 12px;
  /* Neutraler Rand. Orange umrandet nichts mehr — es steht nur noch an
     Haken, Punkten und Icons. Hier traegt es die LUPE, weil das die
     Monitor-Aktion ist. */
  border: 1px solid rgb(255 255 255 / .85); border-radius: var(--3idee-radius-mittel);
  background: rgb(255 255 255 / .72); backdrop-filter: blur(12px);
  box-shadow: 0 14px 40px rgb(0 0 0 / .18);
  padding: 8px 10px 8px 17px; color: var(--fh-ink);
}
.fsz .fh2__wahl[hidden] { display: none; }
.fsz .fh2__wahl-icon { flex: 0 0 auto; width: 18px; height: 18px; color: #6c7280; }
.fsz .fh2__wahl-icon svg { width: 100%; height: 100%; display: block; }
.fsz .fh2__wahl-text { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.fsz .fh2__wahl-text b { font-size: 16px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fsz .fh2__wahl-mehr { font-size: 13px; color: rgb(31 34 48 / .6); white-space: nowrap; }
.fsz .fh2__wahl .button { border-radius: var(--3idee-radius-mittel); flex: 0 0 auto; cursor: pointer; white-space: nowrap; }
.fsz .fh2__wahl-neu {
  flex: 0 0 auto; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 13.5px; color: rgb(31 34 48 / .66);
  text-decoration: underline; text-underline-offset: 3px; white-space: nowrap;
}
.fsz .fh2__wahl-neu:hover { color: var(--fh-ink); }
@media screen and (max-width: 749px) {
  .fsz .fh2__wahl { flex-wrap: wrap; max-width: none; gap: 8px 10px; padding: 10px 12px; }
  /* Modell bleibt NEBEN dem Symbol: eine eigene Reihe machte aus der Zeile
     einen vierzeiligen Kasten, obwohl Symbol und Name zusammengehoeren.
     Umbrechen duerfen nur Schaltflaeche und "Neu starten" darunter. */
  .fsz .fh2__wahl-text { flex: 1 1 auto; min-width: 0; }
  .fsz .fh2__wahl .button { flex: 1 1 100%; }
  .fsz .fh2__wahl-neu { flex: 1 1 100%; text-align: center; padding-top: 2px; }
}
/* END_BLOCK:finder-suche */

/* START_BLOCK:footer-copyright (INDEX:121) */
.footer-utilities__group-copyright {
    color: var(--color-utilities, var(--color-foreground-muted));
  }
/* END_BLOCK:footer-copyright */

/* START_BLOCK:footer-policy-list (INDEX:122) */
.policy-list-trigger {
    anchor-name: --terms-policies-trigger;
    cursor: pointer;
    font-size: var(--font-size, 0.75rem);
    text-transform: var(--text-transform, none);
  }

  .policy_list {
    li {
      border-radius: calc(var(--style-border-radius-popover) - 8px);

      a {
        color: var(--color-foreground);
        display: inline-block;
        padding: 8px;
        text-align: start;
        width: 100%;
        outline-color: #0000;
        font-size: var(--font-size, 0.75rem);
        text-transform: var(--text-transform, none);
      }

      &:is(:hover, :focus-within) {
        background: rgb(var(--color-foreground-rgb) / 0.15);
      }
    }
  }

  .terms-policies-popover {
    position-anchor: --terms-policies-trigger;
    inset: unset;
    bottom: calc(anchor(top) + 1rem);
    left: anchor(left);
    border-radius: var(--style-border-radius-popover);
    background: linear-gradient(var(--color-background) 0 100%),
      linear-gradient(rgb(var(--color-background-rgb) / 0.15) 0 100%);
    background-clip: padding-box, border-box;
    border: 1px solid #0000;
    box-shadow: var(--shadow-popover);
    padding: 8px;
    margin: 0;
    opacity: 0;
    scale: 0.94;
    translate: 0 6px;
    transform-origin: 3.9em 100%;
  }

  .terms-policies-popover.\:popover-open,
  .terms-policies-popover:popover-open {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }

  @media screen and (max-width: 749px) {
    .terms-policies-popover {
      left: anchor(center);
      transform: translate(-50%, 0);
      transform-origin: 0% 100%;
    }
  }

  @supports not (position-anchor: --account-button-trigger) {
    .terms-policies-popover {
      bottom: unset;
      top: calc(var(--anchor-top) * 1px);
      left: calc(var(--anchor-left) * 1px);
      transform: translate(0, calc(-100% - 1.25rem));
    }

    @media screen and (max-width: 749px) {
      .terms-policies-popover {
        left: calc((var(--anchor-left) + (var(--anchor-width) / 2)) * 1px);
        transform: translate(-50%, calc(-100% - 1.25rem));
      }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .terms-policies-popover {
      transition-property: display, overlay, opacity, scale, translate;
      transition-behavior: allow-discrete;
      transition-duration: 0.3s;
      transition-timing-function: var(--ease-out-quad);
    }

    @starting-style {
      .terms-policies-popover.\:popover-open,
      .terms-policies-popover:popover-open {
        opacity: 0.7;
        translate: 0 6px;
        scale: 0.94;
      }
    }
  }
/* END_BLOCK:footer-policy-list */

/* START_BLOCK:icon (INDEX:124) */
.icon-block {
    display: flex;
    flex-shrink: 0;
  }

  .icon-block__media {
    height: auto;
  }
/* END_BLOCK:icon */

/* START_BLOCK:image (INDEX:125) */
.image-block__placeholder {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
  }

  .placeholder-image {
    position: relative;
    aspect-ratio: var(--ratio);
    overflow: hidden;
  }

  .image-block {
    display: flex;

    /* When the image is nested in a group, section, etc, respect the parent's horizontal alignment */
    justify-content: var(--horizontal-alignment, 'inline-start');
  }

  .image-block--height-fill .image-block__image {
    height: 100%;
  }

  .image-block__image {
    object-fit: cover;
    aspect-ratio: var(--ratio);
  }
/* END_BLOCK:image */

/* START_BLOCK:kaufsignale (INDEX:127) */
/* Nach 3idee-designkodex.md: Orange markiert, traegt nie — hier allein der
   Haken. Kein Rahmen, keine Flaeche: die Zeilen gehoeren zum Kaufknopf. */
.ksg {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 7px;
  font-size: 13.5px; color: var(--3idee-muted); width: 100%;
}
.ksg li { display: flex; align-items: flex-start; gap: 9px; line-height: 1.4; }
.ksg li span {
  color: var(--3idee-ink); font-size: 12px; font-weight: 800; line-height: 1.5; flex: 0 0 auto;
}
/* END_BLOCK:kaufsignale */

/* START_BLOCK:localization-fuss (INDEX:129) */
.lokal {
    display: flex;
    align-items: center;
    gap: var(--gap-xs, 8px);

    /* Der Ausloeser und das Sprachmenue tragen 6px Innenabstand, damit die
       Hover-Flaeche groesser ist als die Schrift. Steht der Baustein wie im
       Fussbereich UNTER anderem Text, schiebt dieser Innenabstand die Fahne
       sichtbar nach rechts — sie stuende dann nicht auf der Fluchtlinie von
       Copyright und Menuespalten darueber.
       Der negative Aussenabstand zieht ihn auf beiden Seiten wieder heraus.
       Auf BEIDEN Seiten, damit es auch stimmt, wenn der Baustein rechts
       ausgerichtet in einer Gruppe steht. */
    margin-inline: -6px;
  }

  .lokal__ausloeser {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-2xs, 6px);
    padding: 4px 6px;
    border: 0;
    border-radius: var(--style-border-radius-buttons-primary, 6px);
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: background-color var(--animation-speed, 0.2s) var(--animation-easing, ease);
  }

  .lokal__ausloeser:hover {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8, 0.08));
  }

  .lokal__fahne {
    display: inline-block;
    width: 18px;
    height: 13px;
    background-size: cover;
    background-position: center;
    border-radius: 2px;
    flex-shrink: 0;
  }

  .lokal__fahne--gross {
    width: 44px;
    height: 32px;
    border-radius: 6px;
  }

  .lokal__waehrung,
  .lokal__land-waehrung {
    color: var(--color-foreground-subdued);
  }

  .lokal__sprache {
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    padding: 4px 6px;
    cursor: pointer;
    appearance: none;
    field-sizing: content;
  }

  .lokal__sprache--fest {
    cursor: default;
  }

  .lokal__sprachform {
    display: inline-flex;
  }

  .lokal__dialog {
    border: 0;
    padding: var(--padding-xl, 32px);
    border-radius: var(--style-border-radius-popover, 12px);
    background-color: var(--color-background);
    color: var(--color-foreground);
    max-width: min(880px, 92vw);
    width: max-content;
  }

  .lokal__dialog::backdrop {
    background: rgb(0 0 0 / 0.45);
  }

  .lokal__titel {
    margin: 0 0 4px;
    text-align: center;
  }

  .lokal__unterzeile {
    margin: 0 0 var(--margin-lg, 24px);
    text-align: center;
    color: var(--color-foreground-subdued);
  }

  .lokal__schliessen {
    position: absolute;
    top: 12px;
    right: 12px;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 6px;
    line-height: 0;
  }

  .lokal__schliessen svg {
    width: 18px;
    height: 18px;
  }

  .lokal__gitter {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    gap: var(--gap-md, 16px);
    margin-block-start: var(--margin-md, 16px);
  }

  .lokal__land-knopf {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 8px;
    border: 0;
    border-radius: var(--style-border-radius-buttons-primary, 8px);
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: background-color var(--animation-speed, 0.2s) var(--animation-easing, ease);
  }

  .lokal__land-knopf:hover {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8, 0.08));
  }

  .lokal__land-knopf[aria-current='true'] {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10, 0.1));
  }

  .lokal__land-name {
    text-align: center;
    line-height: 1.25;
  }

  @media screen and (max-width: 749px) {
    .lokal__gitter {
      grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
    }

    .lokal__dialog {
      padding: var(--padding-lg, 24px);
    }
  }
/* END_BLOCK:localization-fuss */

/* START_BLOCK:logo (INDEX:130) */
.logo-block {
    width: calc(var(--logo-width) + var(--padding-inline-start) + var(--padding-inline-end));
    max-width: 100%;
    max-height: calc(var(--logo-height, 100%) + var(--padding-block-start) + var(--padding-block-end));
    font-size: var(--logo-height);
    display: flex;

    @media screen and (max-width: 749px) {
      max-height: calc(
        var(--logo-height-mobile, var(--logo-height, 100%)) + var(--padding-block-start) + var(--padding-block-end)
      );
      font-size: var(--logo-height-mobile, var(--logo-height));
      width: calc(
        var(--logo-width-mobile, var(--logo-width)) + var(--padding-inline-start) + var(--padding-inline-end)
      );
    }
  }

  .logo-block__image-wrapper {
    display: flex;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
  }

  .logo-block__image {
    object-fit: contain;
    width: 100%;
  }
/* END_BLOCK:logo */

/* START_BLOCK:menu (INDEX:131) */
.menu {
    width: 100%;
  }

  .menu:not(:has(.menu__heading--empty)) .details-content {
    margin-block-start: var(--spacing--size);
  }

  .menu__item + .menu__item {
    margin-block-start: var(--spacing--size);
  }

  .menu .menu__heading--empty {
    display: none;
  }

  .menu__heading__default {
    display: contents;
  }

  .menu__heading__accordion {
    display: none;
  }

  @media screen and (max-width: 749px) {
    /* Always show the fallback heading on mobile when accordion is enabled */
    .menu--accordion .menu__heading--empty {
      display: flex;
    }

    .menu--accordion .menu__heading__accordion {
      display: contents;
    }

    .menu--accordion .menu__heading__default {
      display: none;
    }

    .menu--accordion .details-content {
      margin-block-start: var(--spacing--size);
    }

    .menu--accordion .menu__details {
      padding-inline: 0;
    }

    .menu--dividers .menu__details {
      border-block-end: var(--style-border-width) solid var(--color-border);
    }

    .menu--dividers .details-content {
      padding-block-end: var(--padding-sm);
    }
  }
/* END_BLOCK:menu */

/* START_BLOCK:modelle-liste (INDEX:132) */
.mdl__vf {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 9px;
  color: var(--3idee-verified);
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.mdl__vf-punkt { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.mdl__n { color: var(--3idee-muted); font-weight: 400; }

/* Nach 3idee-designkodex.md: nur Palette, 4 Punkte Radius, kein Orange —
   dieser Abschnitt zaehlt auf, er markiert nichts. */
.mdl {
  --mdl-ink: #1f2230;
  --mdl-linie: var(--3idee-hairline);
  --mdl-grau: var(--3idee-muted);
  --mdl-flaeche: #f7f7f7;
  color: var(--mdl-ink);
  width: 100%;
}
/* Der Kopf ist eine abgeschlossene Einheit. Der Abstand zur Liste muss
   deutlich groesser sein als der zwischen zwei Modellzeilen — sonst liest
   sich der erste Eintrag als Teil der Ueberschrift.
   Kodex Abschnitt 3: Abstand ist Gliederung, als Faustzahl das Doppelte.
   Die Zahl kommt aus der Abstandsskala des Themes, damit die Regler im
   Editor sie mitziehen. */
.mdl__kopf { margin-block-end: var(--margin-2xl, 36px); }
.mdl__kopf h2 { font-size: 27px; letter-spacing: -.03em; font-weight: 800; margin: 0; }
.mdl__kopf p { margin: 6px 0 0; font-size: 15px; color: var(--mdl-grau); }

/* Steht eine Serienueberschrift dazwischen, traegt sie den Abschluss selbst —
   sonst stuenden zwei Abstaende uebereinander. */
.mdl__kopf:has(+ .mdl__gruppe) { margin-block-end: var(--margin-lg, 26px); }

.mdl__zahl {
  display: flex; align-items: baseline; gap: 10px;
  margin: 22px 0 18px; padding-bottom: 18px; border-bottom: 1px solid var(--mdl-linie);
}
.mdl__zahl b { font-size: 42px; line-height: 1; letter-spacing: -.04em; font-weight: 800; }
.mdl__zahl span { font-size: 14px; color: var(--mdl-grau); }

.mdl__gruppe {
  font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--mdl-grau); margin: 22px 0 10px;
}
.mdl__gruppe:first-of-type { margin-top: 0; }

/* Auf dem Desktop steht die Liste ueber die volle Seitenbreite. Schmale
   Spalten fuellen sie, statt die Modelle untereinander zu stapeln — bei
   achtzehn Eintraegen waere das eine Bildschirmlaenge fuer eine Aufzaehlung. */
.mdl__gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
@media (min-width: 1200px) {
  .mdl__gitter { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}
.mdl__karte {
  border: 1px solid var(--mdl-linie); border-radius: var(--3idee-radius-mittel); background: #fff;
  padding: 11px 13px;
}
.mdl__karte b { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.2; }
.mdl__karte small { display: block; font-size: 12.5px; color: var(--mdl-grau); margin-top: 2px; }

@media (max-width: 749px) {
  .mdl__kopf h2 { font-size: 22px; }
  .mdl__zahl b { font-size: 34px; }
  .mdl__gitter { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
}
/* END_BLOCK:modelle-liste */

/* START_BLOCK:page-content (INDEX:133) */
.page-content {
    color: var(--color, inherit);
  }

  .page-content a {
    color: currentcolor;
  }
/* END_BLOCK:page-content */

/* START_BLOCK:page (INDEX:134) */
.page-block {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: auto;
    align-items: flex-start;
  }

  .page-title {
    margin-bottom: var(--margin-xl);
  }
/* END_BLOCK:page */

/* START_BLOCK:payment-icons (INDEX:135) */
.payment-icons {
    width: 100%;
  }

  .payment-icons__list {
    display: flex;
    align-items: center;
    justify-content: var(--alignment);
    flex-wrap: wrap;
    gap: var(--icon-gap);
    margin: 0;
    padding: 0;
  }

  .payment-icons__item {
    display: flex;
    align-items: center;
  }
/* END_BLOCK:payment-icons */

/* START_BLOCK:popup-link (INDEX:137) */
.popup-link__button svg {
    display: inline-block;
    position: relative;
    top: var(--margin-2xs);
  }

  .popup-link__content {
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover);
    background-color: var(--color-background);
    padding: var(--padding-4xl) var(--padding-xl) var(--padding-xl);
    max-width: var(--normal-content-width);
    max-height: var(--modal-max-height);

    @media screen and (min-width: 750px) {
      padding: var(--padding-5xl);
    }
  }

  .popup-link__content[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .popup-link__content.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .popup-link__content--drawer {
    position: fixed;
    border-radius: 0;
    width: var(--sidebar-width);
    max-width: 95vw;
    height: 100%;
    margin: 0 0 0 auto;
  }

  /* Needed to ensure the drawer is full height */
  .popup-link__content--drawer:modal {
    max-height: 100dvh;
  }

  .popup-link__close {
    top: var(--margin-2xs);
    right: var(--margin-2xs);
    opacity: 0.8;
    animation: none;
  }
/* END_BLOCK:popup-link */

/* START_BLOCK:product-custom-property (INDEX:140) */
product-custom-property-component {
    display: block;
    width: 100%;
  }

  product-custom-property-component .__heading {
    margin-inline: 0;
    margin-block: 0 var(--padding-sm);
  }

  product-custom-property-component .__heading:has(+ .__description) {
    margin-block-end: var(--padding-2xs);
  }

  product-custom-property-component .__description {
    font-size: min(0.85em, var(--font-paragraph--size));
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
    margin-inline: 0;
    margin-block: 0 var(--padding-md);
  }

  product-custom-property-component .__field {
    position: relative;
  }

  product-custom-property-component .__input-wrapper {
    position: relative;
  }

  product-custom-property-component input,
  product-custom-property-component textarea {
    width: 100%;
    /* stylelint-disable-next-line declaration-no-important */
    color: var(--color-input-text) !important;
  }

  /* Add padding for inputs with counter inside */
  product-custom-property-component .__input-wrapper input {
    padding-bottom: calc(var(--padding-sm) * 3);
  }

  product-custom-property-component .__input-wrapper textarea {
    padding-bottom: calc(var(--padding-sm) * 3);
    scroll-padding-bottom: calc(var(--padding-sm) * 3);
  }

  product-custom-property-component textarea {
    min-height: 80px;
  }

  @supports (resize: vertical) {
    @media (hover: hover) and (pointer: fine) {
      product-custom-property-component textarea {
        resize: vertical; /* stylelint-disable-line */
      }
    }
  }

  product-custom-property-component .__character-label {
    position: absolute;
    left: var(--input-padding-x);
    bottom: var(--padding-sm);
    pointer-events: none;
  }

  product-custom-property-component .__character-count {
    font-style: italic;
    /* stylelint-disable-next-line declaration-no-important */
    color: var(--color-input-text) !important;
  }

  /* We should consolidate input styles that share the same behavior */
  .custom-property__input {
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);

    /* this is needed to override the styles from field__input */
    box-shadow: none;

    &:is(:hover, :focus) {
      /* this is needed to override the styles from field__input */
      box-shadow: none;
    }

    &:focus {
      /* this is needed to override the styles from field__input */
      outline: var(--focus-outline-width) solid var(--color-input-background);
    }
  }
/* END_BLOCK:product-custom-property */

/* START_BLOCK:product-inventory (INDEX:142) */
.product-inventory__status {
    display: flex;
    align-items: center;
    font-size: var(--font-paragraph--size);
    line-height: var(--font-paragraph--line-height);
    gap: var(--padding-xs);
  }

  .product-inventory__icon,
  .product-inventory__icon svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .product-inventory__icon-low {
    color: var(--color-lowstock);
  }

  .product-inventory__icon-in_stock {
    color: var(--color-instock);
  }

  .product-inventory__icon-out_of_stock {
    color: var(--color-outofstock);
  }

  .product-inventory__icon circle:first-of-type {
    opacity: 0.3;
  }
/* END_BLOCK:product-inventory */

/* START_BLOCK:product-recommendations (INDEX:143) */
.block-resource-list {
    display: flex;
    flex-direction: column;
    row-gap: var(--gap);
    min-width: 0;
    min-height: 0;
    container-type: inline-size;
    container-name: resource-list;
    border-radius: var(--border-radius, 0);
  }

  .product-recommendations-wrapper {
    width: 100%;
  }

  .product-recommendations-wrapper:has(product-recommendations[data-shopify-editor-preview]) {
    width: 100vw;
  }
/* END_BLOCK:product-recommendations */

/* START_BLOCK:review (INDEX:146) */
.rating-wrapper {
    --star-fill-color: var(--color-foreground);
    --star-fill-color-rgb: var(--color-foreground-rgb);
    --color: var(--color-foreground);
    --color-rgb: var(--color-foreground-rgb);
    gap: var(--gap-xs);
    min-width: fit-content;
  }

  .rating-wrapper,
  .rating {
    display: flex;
    align-items: center;
  }

  .rating-wrapper.justify-right {
    flex-direction: row-reverse;
  }

  .rating {
    gap: var(--gap-3xs);
  }

  .rating-wrapper .rating-count,
  .rating-wrapper .rating-count-separator {
    color: var(--star-fill-color);
    margin: 0;
    white-space: nowrap;
  }

  .rating-count-separator {
    opacity: var(--opacity-20);
    padding-left: calc(var(--padding-xs) / 2);
    padding-right: var(--padding-xs);
  }

  .stars {
    height: var(--star-size);
    fill: var(--empty-star-fill-color);
  }

  .filled-star {
    fill: var(--star-fill-color);
  }
/* END_BLOCK:review */

/* START_BLOCK:setup-komplettieren (INDEX:147) */
/* ── Kopf ──────────────────────────────────────────────────────────── */
/* min-width: 0 an jedem Kasten, der eine Reihe traegt.

   Ohne das ist die Mindestbreite eines Flex- oder Grid-Elements die Breite
   seines INHALTS — vier Karten a 172px machen daraus 700px, und die Kaufspalte
   der Produktseite wurde breiter, sobald ein Ergebnis erschien. Man sieht es
   erst, wenn die Spalten nicht mehr gleich breit sind. (21.08.2026) */
/* DIE BREITE DIESES BAUSTEINS DARF NIE VOM INHALT KOMMEN.

   contain: inline-size sagt dem Browser: Die waagerechte Groesse dieses
   Kastens steht fest, bevor sein Inhalt betrachtet wird. Ohne das wandert die
   Inhaltsbreite — vier Karten a 172px, eine Zeile mit langem Modellnamen —
   ueber die Vorfahren bis in die Spaltenbreite der Produktseite: Die Kaufspalte
   wurde breiter, sobald ein Ergebnis erschien.

   min-width: 0 allein genuegt dafuer nicht. Es muesste an JEDEM Vorfahren
   stehen, und die gehoeren dem Theme — eine Kette, die beim naechsten
   Theme-Update reisst. contain haelt an einer Stelle. (21.08.2026) */
.sku { min-width: 0; contain: inline-size; }
.sku[hidden] { display: none; }
.sku__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }

/* Die Stoerungsmeldung tritt an die Stelle der Kacheln. Der Text bringt seine
   Gestalt mit (.eng-aus); hier steht nur der Ausweich-Link daneben. */
/* ── Zahl und Kennzeichnung ───────────────────────────────────────────
   Eine Zeile, zwei Angaben: wie viele es sind und woher sie stammen.

   KEIN TRENNPUNKT. Kurz stand hier ein grauer Punkt zwischen beiden. Neben
   dem VERIFIED-Zeichen, das selbst mit einem Punkt beginnt, standen dann zwei
   Punkte nebeneinander — einer davon ohne Bedeutung. Der Abstand trennt
   genug. (24.08.2026)

   Grundlinie statt Mitte: Die Kennzeichnung soll auf derselben Linie sitzen
   wie "23 Halterungen" und die Ueberschrift. Zentriert man sie stattdessen,
   sitzt die kleinere Versalschrift sichtbar zu tief. */
.sku__stand { display: flex; align-items: baseline; gap: 9px; white-space: nowrap; }
.sku__marke[hidden] { display: none; }
.sku__ungeprueft {
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--3idee-muted);
}

/* Das VERIFIED-Zeichen der Pruefzone, unveraendert uebernommen — in seiner
   Inline-Fassung (fck__vf--satz), damit es auf der Grundlinie sitzt, und hier
   nur eine Spur kleiner. Das (i) muss inline bleiben: als Rasterkasten waere
   es ein Block mitten in einer Textzeile und risse sie auseinander. */
.sku__stand .fck__vf { font-size: 10.5px; }
.sku__stand .fck__vf-punkt { width: 6px; height: 6px; }
.sku__stand .fck__vf-i { display: inline-grid; vertical-align: middle; margin-inline-start: 5px; }

.sku__stoerung[hidden] { display: none; }
.sku__stoerung .eng-aus { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; }
.sku__stoerung .eng-aus__txt { flex: 1 1 260px; }
.sku__ausweich {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 16px;
  border: 1px solid var(--3idee-ink); border-radius: var(--3idee-radius-mittel);
  font-size: 14px; font-weight: 700; text-decoration: none; color: var(--3idee-ink);
}
.sku__ausweich:hover { background: var(--3idee-surface-soft, #f7f7f5); color: var(--3idee-ink); }
.sku__titel-abschnitt { margin: 0; font-size: 15px; font-weight: 800; color: var(--3idee-ink); }
.sku__zahl { font-size: 12.5px; color: var(--3idee-muted); }

/* ── Umschalter ────────────────────────────────────────────────────── */
.sku__schalter {
  display: inline-flex; gap: 4px; margin-top: 12px; padding: 3px;
  border: 1px solid var(--3idee-hairline); border-radius: 999px;
}
.sku__schalter[hidden] { display: none; }
.sku__schalter button {
  border: 0; background: none; padding: 6px 14px; border-radius: 999px;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--3idee-muted); cursor: pointer;
}
.sku__schalter button[aria-selected='true'] { background: var(--3idee-ink); color: #fff; }

/* ── Kartenreihe ───────────────────────────────────────────────────── */
/* ── Systemvorteile ────────────────────────────────────────────────── */
/* MIT BESCHRIFTUNG, DIREKT UNTER DEM REITER, DEN SIE ERKLAERT.

   Kurz stand hier nur ein (i) am rechten Ende der Schalterzeile — losgeloest
   von ONE und ohne Wort. Ein nacktes (i) ohne Bezug erklaert nichts: Der Leser
   sieht ein Zeichen und weiss nicht, wozu. Das Wort traegt die Bedeutung, das
   Zeichen den Weg. Erscheint nur bei ONE, also unmittelbar unter dem Reiter,
   um den es geht.

   Gestalt wie jedes (i) im Shop: Muted, nie orange. Orange gehoert VERIFIED. */
.sku__info {
  /* flex + fit-content, NICHT inline-flex: Der Umschalter darueber ist selbst
     inline, und zwei Inline-Kaesten stellen sich nebeneinander. Als
     Block-Element beginnt die Zeile neu und bleibt trotzdem nur so breit wie
     ihr Inhalt. */
  display: flex; width: fit-content; align-items: center; gap: 7px;
  margin-top: 10px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--3idee-muted);
}
.sku__info[hidden] { display: none; }
.sku__info span { text-decoration: underline; text-underline-offset: 3px; }
.sku__info i {
  font-style: normal; width: 17px; height: 17px;
  border: 1px solid currentcolor; border-radius: 50%;
  display: grid; place-items: center; font-size: 10px; font-weight: 700; line-height: 1;
}

/* Rahmen, Rundung, Schliesskreuz und das Blatt von unten auf dem Handy kommen
   aus dem gemeinsamen Erklaerfenster (snippets/fenster.liquid). Hier steht nur
   noch, was diesem Fenster gehoert. (21.08.2026) */
.sku__dlg-marke {
  display: block; margin-bottom: 20px;
  font-size: 12px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--3idee-ink);
}
.sku__usp {
  display: grid; grid-template-columns: 52px 1fr; gap: 16px;
  padding: 20px 0; border-bottom: 1px solid var(--3idee-hairline);
}
.sku__usp:first-of-type { border-top: 1px solid var(--3idee-hairline); }
.sku__usp-nr { font-weight: 800; font-size: 18px; color: var(--3idee-muted); }
.sku__usp h3 { margin: 0; font-size: 19px; color: var(--3idee-ink); }
.sku__usp p { margin: 5px 0 0; color: var(--3idee-muted); font-size: 14px; max-width: 62ch; }

/* ── Spur mit Pfeilen ──────────────────────────────────────────────── */
.sku__spur { position: relative; min-width: 0; }
.sku__spur[hidden] { display: none; }

.sku__reihe {
  display: flex; gap: 10px; margin-top: 12px; min-width: 0;
  overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x proximity;
  scrollbar-width: none; padding-bottom: 4px;
}
.sku__reihe::-webkit-scrollbar { display: none; }
.sku__reihe:empty { display: none; }

/* Wie im Bildstreifen des Mini-Fensters: rund, halbdurchsichtig weiss, mittig
   an der Kante. Ausgeblendet, sobald es in diese Richtung nichts mehr gibt —
   ein Pfeil, der nichts tut, ist schlimmer als keiner. */
.sku__pfeil {
  position: absolute; top: calc(50% + 6px); transform: translateY(-50%);
  width: 32px; height: 32px; border: 1px solid var(--3idee-hairline);
  border-radius: 50%; background: rgb(255 255 255 / .92);
  color: var(--3idee-ink); font-size: 18px; line-height: 1; cursor: pointer;
  display: grid; place-items: center; z-index: 1;
}
.sku__pfeil[hidden] { display: none; }
.sku__pfeil--zur { left: -6px; }
.sku__pfeil--vor { right: -6px; }

.sku__karte {
  flex: 0 0 172px; min-width: 0; position: relative; scroll-snap-align: start;
  border: 1px solid var(--3idee-hairline);
  border-radius: var(--3idee-radius-mittel);
  padding: 10px;
}
/* Das Bild ist ein Knopf: Eine Produktkachel anzuklicken heisst, das Produkt
   anzusehen — hier oeffnet das dasselbe Mini-Fenster wie "Mehr erfahren", und
   nicht eine fremde Produktseite. Fuer die Tastatur uebersprungen, damit
   derselbe Weg nicht zweimal angesteuert wird; der Titel traegt ihn. */
.sku__bild {
  width: 100%; padding: 0; border: 0; cursor: pointer;
  height: 84px; border-radius: var(--3idee-radius-klein);
  background: var(--3idee-surface-soft, #f7f7f5);
  display: grid; place-items: center; overflow: hidden;
}
.sku__bild img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Der Titel kommt als fertiges Stueck aus der Pruefung — dort steckt er in
   einem Knopf, der das Mini-Fenster oeffnet. Hier erbt er nur die Groesse. */
.sku__name {
  display: block; margin-top: 9px;
  font-size: 13px; font-weight: 700; line-height: 1.25; color: var(--3idee-ink);
}
.sku__name button { font: inherit; color: inherit; }
/* Preis und Bundle-Etikett teilen sich EINE Zeile. Der Preis war ein Block
   und schob das Etikett darunter — eine Zeile mehr auf jeder Kachel, in einer
   Reihe, die ohnehin um Hoehe ringt.

   Getragen wird das vom Wrapper und nicht vom Preis selbst: Dessen Inhalt
   wird von der Pruefung nachgeladen und dabei ersetzt. Passt das Etikett
   nicht daneben, rutscht es eine Zeile tiefer, statt die Kachel zu sprengen. */
.sku__preiszeile {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px;
  margin-top: 5px;
}
.sku__preis { display: inline; font-size: 14px; font-weight: 800; }
.sku__preis:empty { display: none; }

.sku__mehr {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 8px;
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--3idee-muted);
  text-decoration: underline; text-underline-offset: 3px;
}
.sku__mehr i {
  font-style: normal; width: 15px; height: 15px;
  border: 1px solid var(--3idee-muted); border-radius: 50%;
  display: grid; place-items: center; font-size: 9px; font-weight: 700;
}

/* ── Quick Add ─────────────────────────────────────────────────────── */
/* Derselbe Griff wie in der Pruefung (blocks/finder-check.liquid,
   .fck__mini-aktion--quick): Das Feld ist der Rahmen, in dem der Knopf des
   Themes haengt — er behaelt seine absolute Position, nur der Bezugsrahmen ist
   nicht mehr die Bildkachel. Nach links reicht der Rahmen ueber das Feld
   hinaus, damit die Beschriftung beim Ueberfahren aufklappen kann.

   ZU TUN: Die Zeilen stehen jetzt zweimal im Theme. Sobald eine dritte Stelle
   dazukommt, gehoeren sie in eine gemeinsame Klasse. */
.sku__aktion {
  position: absolute; top: 12px; right: 12px;
  width: var(--button-size-md, 36px); height: var(--button-size-md, 36px);
}
.sku__aktion .quick-add { left: auto; width: 240px; }
.sku__aktion .quick-add__button { right: 0; bottom: 0; opacity: 1; }
.sku__aktion [data-quick-add-button='add'] .quick-add__button--add,
.sku__aktion [data-quick-add-button='choose'] .quick-add__button--choose { display: flex; }
/* ── Das Bundle-Etikett ───────────────────────────────────────────────
   Gefüllte Fläche, weiße Schrift, Deep Red — nach der Kanalregel des Kodex:
   Was gefüllt ist, spricht über Geld; farbiger Text bliebe dem Status
   vorbehalten. Klein und in der Ecke der Kachel, nicht über dem Bild: Es ist
   ein Zusatz zum Preis, keine Auszeichnung des Produkts. */
/* Sitzt IM Preis, nicht darunter — deshalb kein eigener Abstand nach oben. */
.sku__bundle {
  display: inline-block;
  padding: 2px 7px;
  border-radius: var(--3idee-radius-winzig);
  background: var(--3idee-sale); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .01em;
  white-space: nowrap;
}
/* END_BLOCK:setup-komplettieren */

/* START_BLOCK:setup-rechnung (INDEX:148) */
/* Nach 3idee-designkodex.md: nur Palette, 4 Punkte Radius ohne Ausnahme,
   Orange nur als Markierung (hier der Haken am Ende der Rechnung). */
.srg {
  --srg-ink: #1f2230;
  --srg-orange: var(--3idee-ink);
  --srg-linie: var(--3idee-hairline);
  --srg-grau: var(--3idee-muted);
  --srg-flaeche: #f7f7f7;
  color: var(--srg-ink);
}
.srg__titel { font-size: 24px; letter-spacing: -.03em; margin: 0 0 6px; font-weight: 800; }
.srg__unter { margin: 0 0 20px; font-size: 14.5px; color: var(--srg-grau); }

.srg__rechnung {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--srg-flaeche); border: 1px solid var(--srg-linie); border-radius: var(--3idee-radius-mittel);
  padding: 16px 18px; margin-bottom: 20px;
}
.srg__glied { display: flex; align-items: center; gap: 11px; font-size: 14px; }
.srg__glied img,
.srg__ph {
  width: 44px; height: 44px; border: 1px solid var(--srg-linie); border-radius: var(--3idee-radius-mittel);
  background: #fff; object-fit: contain; flex: 0 0 auto; display: block;
}
.srg__haken {
  width: 26px; height: 26px; border-radius: 50%; background: var(--srg-orange); color: #fff;
  display: grid; place-items: center; font-size: 13px; font-weight: 800; flex: 0 0 auto;
}
.srg__op { color: var(--srg-grau); font-size: 17px; font-weight: 700; }
.srg__summe { margin-left: auto; text-align: right; }
.srg__summe b { display: block; font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.srg__summe span { display: block; font-size: 12.5px; color: var(--srg-grau); margin-top: 1px; }

.srg__tag {
  position: absolute; top: 9px; left: 9px; z-index: 1;
  background: var(--srg-ink); color: #fff; border-radius: var(--3idee-radius-winzig);
  padding: 4px 8px; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}

.srg__karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.srg__karte {
  position: relative;
  border: 1px solid var(--srg-linie); border-radius: var(--3idee-radius-mittel); overflow: hidden;
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
}
.srg__karte:hover { background: var(--srg-flaeche); }
.srg__bild { aspect-ratio: 4/3; background: var(--srg-flaeche); display: block; }
.srg__bild img { width: 100%; height: 100%; object-fit: contain; display: block; }
.srg__txt { padding: 12px 13px 14px; display: block; }
.srg__txt b { display: block; font-size: 14.5px; line-height: 1.25; }
.srg__txt small { display: block; color: var(--srg-grau); font-size: 12.5px; margin-top: 3px; }
.srg__preis { display: block; margin-top: 9px; font-weight: 700; font-size: 14.5px; }

.srg__alle {
  display: inline-block; margin-top: 16px; font-size: 13.5px; color: var(--srg-grau);
  text-decoration: underline; text-underline-offset: 3px;
}
/* END_BLOCK:setup-rechnung */

/* START_BLOCK:social-links (INDEX:150) */
.social-icons__wrapper {
    display: flex;
    gap: var(--gap-sm);
    flex-wrap: wrap;
    justify-content: center;

    @media screen and (min-width: 750px) {
      flex-wrap: nowrap;
      justify-content: flex-start;
    }
  }

  .social-icons__icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: flex;
    flex-shrink: 0;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: none;
  }

  .social-icons__icon-wrapper:has(.social-icons__icon path) {
    width: var(--icon-size-lg);

    .social-icons__icon {
      display: block;
    }

    .social-icons__icon-label {
      display: none;
    }
  }

  /* Disabled state for editor */
  .shopify-design-mode .social-icons__icon-wrapper--disabled {
    opacity: var(--disabled-opacity, 0.5);
    cursor: not-allowed;
  }

  .shopify-design-mode .social-icons__icon-wrapper--disabled a {
    pointer-events: none;
  }
/* END_BLOCK:social-links */

/* START_BLOCK:spacer (INDEX:151) */
/* Fill opposite direction */
  .layout-panel-flex--column > .spacer-block {
    width: 100%;
  }

  .layout-panel-flex--row > .spacer-block {
    height: 100%;
  }

  /* Flex - Percent */
  :is(.layout-panel-flex--row, .layout-panel-flex--column) > .spacer-block--size-percent {
    flex: var(--spacer-size);
  }

  /* Flex - Pixel */
  .layout-panel-flex--row > .spacer-block--size-pixel {
    width: var(--spacer-size);
  }

  .layout-panel-flex--column > .spacer-block--size-pixel {
    height: var(--spacer-size);
  }

  /* Mobile */
  @media screen and (max-width: 749px) {
    /* Percent */
    .layout-panel-flex--row:not(.mobile-column) > .spacer-block--size-mobile-percent {
      flex: var(--spacer-size-mobile);
      height: 100%;
    }

    .layout-panel-flex--column > .spacer-block--size-mobile-percent,
    .mobile-column > .spacer-block--size-percent:not(.spacer-block--size-mobile-pixel) {
      width: 100%;
      flex: var(--spacer-size-mobile);
    }

    /* Pixel */
    .layout-panel-flex--row:not(.mobile-column) > .spacer-block--size-mobile-pixel {
      width: var(--spacer-size-mobile);
      height: 100%;
    }

    .layout-panel-flex--column > .spacer-block--size-mobile-pixel,
    .mobile-column > .spacer-block--size-mobile-pixel {
      width: 100%;
      flex: 0;
      height: var(--spacer-size-mobile);
    }
  }
/* END_BLOCK:spacer */

/* START_BLOCK:swatches (INDEX:152) */
product-swatches {
    width: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
    gap: 0;
    flex-shrink: 0;
  }
/* END_BLOCK:swatches */

/* START_BLOCK:technik-daten (INDEX:153) */
/* Nach 3idee-designkodex.md: nur Palette, 4 Punkte Radius, kein Orange. */
.tkd {
  --tkd-ink: #1f2230;
  --tkd-linie: var(--3idee-hairline);
  --tkd-grau: var(--3idee-muted);
  --tkd-flaeche: #f7f7f7;
  color: var(--tkd-ink);
  width: 100%;
}
.tkd__kopf h2 { font-size: 27px; letter-spacing: -.03em; font-weight: 800; margin: 0; }
.tkd__kopf p { margin: 6px 0 0; font-size: 15px; color: var(--tkd-grau); }

/* Ohne Kopf steht die Tabelle oben — dann faellt ihr Abstand nach oben weg,
   sonst klafft im Akkordeon eine Luecke unter der aufgeklappten Zeile. */
.tkd__liste:first-child { margin-top: 0; }

.tkd__liste {
  margin: 20px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0 34px;
}
.tkd__liste > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 18px;
  padding: 13px 0; border-bottom: 1px solid var(--tkd-linie);
}
.tkd__liste dt { font-size: 14px; color: var(--tkd-grau); margin: 0; }
.tkd__liste dd { font-size: 14.5px; font-weight: 700; margin: 0; text-align: right; }
/* Keine eigene Schriftgroesse: Der Verweis steht in der Wertespalte der
   Tabelle und uebernimmt deren Grad, sonst steht er einen halben Punkt
   kleiner als die Werte darueber. Unterstrichen bleibt er — daran erkennt
   man, dass hier etwas passiert und nicht nur etwas steht. */
.tkd__mehr {
  background: none; border: 0; padding: 0; font: inherit; font-weight: 700;
  color: var(--tkd-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

.tkd__dlg {
  border: 0; border-radius: var(--3idee-radius-mittel); padding: 0; max-width: 34rem; width: calc(100% - 32px);
  color: var(--tkd-ink); background: #fff;
}
.tkd__dlg::backdrop { background: rgb(31 34 48 / .45); }
.tkd__dlg-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--tkd-linie);
}
.tkd__dlg-kopf b { font-size: 15px; }
.tkd__dlg-kopf button {
  border: 0; background: none; font-size: 22px; line-height: 1; cursor: pointer;
  color: var(--tkd-grau); padding: 0 2px;
}
.tkd__dlg-leib { padding: 18px; font-size: 14px; line-height: 1.55; }
.tkd__dlg-leib b { display: block; margin-bottom: 6px; }
.tkd__adr { white-space: pre-line; }
.tkd__zeile { margin-top: 8px; }
.tkd__dlg-leib a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 749px) {
  .tkd__kopf h2 { font-size: 22px; }
  .tkd__liste { grid-template-columns: 1fr; }
}
/* END_BLOCK:technik-daten */

/* START_BLOCK:video (INDEX:156) */
.placeholder-video {
    aspect-ratio: 5 / 3;
  }
/* END_BLOCK:video */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:accordion-custom-component (INDEX:157) */
accordion-custom {
    details {
      &::details-content,
      .details-content {
        block-size: 0;
        overflow-y: clip;
        opacity: 0;
        interpolate-size: allow-keywords;
        transition: content-visibility var(--animation-speed-slow) allow-discrete,
          padding-block var(--animation-speed-slow) var(--animation-easing),
          opacity var(--animation-speed-slow) var(--animation-easing),
          block-size var(--animation-speed-slow) var(--animation-easing);
      }

      /* Disable transitions when the content toggle is not caused by the direct user interaction, e.g. opening the filters on mobile. */
      &:not(:focus-within)::details-content,
      &:not(:focus-within) .details-content {
        transition: none;
      }

      &:not([open]) {
        &::details-content,
        .details-content {
          padding-block: 0;
        }
      }

      &[open] {
        &::details-content,
        .details-content {
          opacity: 1;
          block-size: auto;

          @starting-style {
            block-size: 0;
            opacity: 0;
            overflow-y: clip;
          }

          &:focus-within {
            overflow-y: visible;
          }
        }
      }
    }
  }

  accordion-custom[data-disable-on-mobile='true'] summary {
    @media screen and (max-width: 749px) {
      cursor: auto;
    }
  }

  accordion-custom[data-disable-on-desktop='true'] summary {
    @media screen and (min-width: 750px) {
      cursor: auto;
    }
  }
/* END_SNIPPET:accordion-custom-component */

/* START_SNIPPET:accordion-styles (INDEX:158) */
.accordion {
    flex: 1;
    width: 100%;
  }

  .accordion--dividers accordion-custom:not(:first-child) .details {
    border-block-start: var(--style-border-width) solid var(--color-border);
  }

  /* When accordion borders are not set, show fallback borders */
  .accordion--dividers {
    /* stylelint-disable-next-line declaration-property-value-disallowed-list */
    --show-fallback-borders: 0;
  }

  .accordion--dividers:not([class*='color-'])[style*='--border-width: 0'],
  .accordion--dividers:not([class*='color-'])[style*='--border-style: none'] {
    --show-fallback-borders: 1;
  }

  .accordion--dividers accordion-custom:first-child .details {
    border-block-start: calc(var(--style-border-width) * var(--show-fallback-borders)) solid var(--color-border);
  }

  .accordion--dividers accordion-custom:last-child .details {
    border-block-end: calc(var(--style-border-width) * var(--show-fallback-borders)) solid var(--color-border);
  }

  .accordion--dividers .details-content {
    padding-block-end: var(--padding-sm);
  }

  .accordion--caret .icon-plus,
  .accordion--plus .icon-caret {
    display: none;
  }

  /* because we can't pass apply a specific class on a block based on its parent block setting */
  .accordion .details__header {
    font-family: var(--summary-font-family);
    font-style: var(--summary-font-style);
    font-weight: var(--summary-font-weight);
    font-size: var(--summary-font-size);
    line-height: var(--summary-font-line-height);
    text-transform: var(--summary-font-case);
    min-height: var(--minimum-touch-target);
  }

  .details__icon {
    height: auto;
    margin-inline-end: var(--margin-xs);
  }
/* END_SNIPPET:accordion-styles */

/* START_SNIPPET:background-media (INDEX:160) */
@media (prefers-reduced-motion: reduce) {
    video-background-component video {
      display: none;
    }
  }
/* END_SNIPPET:background-media */

/* START_SNIPPET:bento-grid (INDEX:161) */
.bento-box {
    display: grid;
    column-gap: var(--bento-gap);
    row-gap: calc(var(--bento-gap) * 1.5);
    width: 100%;
  }

  .bento-box:has(.collection-card--image-bg) {
    row-gap: var(--bento-gap);
  }

  .bento-box ~ .bento-box {
    padding-block-start: var(--bento-gap);
  }

  @media screen and (max-width: 900px) {
    .bento-box {
      grid-template-columns: repeat(2, 1fr);
    }

    .bento-box__item {
      /* Prevent grid items from overflowing their cells when children have aspect-ratio */
      min-width: 0;
      overflow: hidden;
    }

    .bento-box__item:nth-child(3n + 1) {
      grid-column: span 1;
    }

    .bento-box__item:nth-child(3n + 2) {
      grid-column: span 1;
    }

    .bento-box__item:nth-child(3n + 3) {
      grid-column: span 2;
    }

    /* Ensure last items create a full row */
    .bento-box__item:last-child:nth-child(3n + 5) {
      grid-column: span 1;
    }

    .bento-box__item:last-child:nth-child(3n + 4) {
      grid-column: span 2;
    }
  }

  @media screen and (min-width: 901px) {
    .bento-box {
      grid-template-columns: repeat(12, 1fr);
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H I I I I I I'
        'J J J J K K K K L L L L';
    }

    .bento-box__item:nth-child(1) {
      grid-area: A;
    }

    .bento-box__item:nth-child(2) {
      grid-area: B;
    }

    .bento-box__item:nth-child(3) {
      grid-area: C;
    }

    .bento-box__item:nth-child(4) {
      grid-area: D;
    }

    .bento-box__item:nth-child(5) {
      grid-area: E;
    }

    .bento-box__item:nth-child(6) {
      grid-area: F;
    }

    .bento-box__item:nth-child(7) {
      grid-area: G;
    }

    .bento-box__item:nth-child(8) {
      grid-area: H;
    }

    .bento-box__item:nth-child(9) {
      grid-area: I;
    }

    .bento-box__item:nth-child(10) {
      grid-area: J;
    }

    .bento-box__item:nth-child(11) {
      grid-area: K;
    }

    .bento-box__item:nth-child(12) {
      grid-area: L;
    }

    /* === Overrides for specific item counts === */

    /* Exactly 1 item */
    .bento-box--items-1 {
      grid-template-areas: 'A A A A A A A A A A A A';
    }

    /* Exactly 2 items */
    .bento-box--items-2 {
      grid-template-areas: 'A A A A A A B B B B B B';
    }

    /* Exactly 4 items */
    .bento-box--items-4 {
      grid-template-areas:
        'A A A A B B B B B B B B'
        'C C C C C C C C D D D D';
    }

    /* Exactly 5 items */
    .bento-box--items-5 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E E E E';
    }

    /* Exactly 7 items */
    .bento-box--items-7 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D D D D E E E'
        'F F F F F F G G G G G G';
    }

    /* Exactly 8 items */
    .bento-box--items-8 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H H H H H H H';
    }

    /* Exactly 10 items */
    .bento-box--items-10 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G G G G G G G H H H'
        'I I I J J J J J J J J J';
    }

    /* Exactly 11 items */
    .bento-box--items-11 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H I I I I I I'
        'J J J J K K K K K K K K';
    }
  }
/* END_SNIPPET:bento-grid */

/* START_SNIPPET:blog-comment-form (INDEX:162) */
.blog-post-comments__form-container {
    --comment-form-gap: var(--gap-md);

    width: 100%;
    max-width: var(--normal-content-width);
    margin: var(--margin-4xl) auto 0;
  }

  .blog-post-comments__form {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--comment-form-gap);

    @media screen and (min-width: 750px) {
      grid-template-columns: 1fr 1fr;
    }
  }

  .blog-post-comments__form-input {
    padding: var(--padding-lg) var(--padding-xl);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
  }

  .blog-post-comments__form-input--textarea {
    resize: vertical;
    min-height: var(--input-textarea-min-height);
  }

  .blog-post-comments__form-message {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .blog-post-comments__form-body {
    grid-column: 1 / -1;
  }

  .blog-post-comments__form-input:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .blog-post-comments__form-moderated {
    font-size: var(--font-size--xs);
  }

  .blog-post-comments__form-submit {
    margin-block-start: var(--comment-form-gap);
  }
/* END_SNIPPET:blog-comment-form */

/* START_SNIPPET:buy-buttons-styles (INDEX:168) */
.buy-buttons-block {
    --buy-button-preferred-width: 185px;

    width: 100%;
  }

  .product-form-buttons {
    display: flex;
    flex-wrap: wrap;
  }

  .product-form-buttons:not(:has(.quantity-rules)) {
    gap: calc(var(--gap-sm) / 2);

    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  .product-form-buttons
    > *:not(.quantity-selector-wrapper, .quantity-rules, .quantity-label, .volume-pricing, .product-form-text__error) {
    flex: 1 1 var(--buy-button-preferred-width, 0);
    min-width: fit-content;
  }

  .product-form-buttons--stacked
    > *:not(.quantity-selector-wrapper, .quantity-rules, .quantity-label, .volume-pricing, .product-form-text__error) {
    flex-basis: 51%;
  }

  .product-form-buttons button {
    width: 100%;
    padding-block: var(--padding-lg);
  }

  .quantity-selector {
    flex-grow: 0;
    flex-shrink: 0;
    height: var(--height-buy-buttons);
  }

  .quantity-label {
    flex: 1 0 100%;
    width: 100%;
    font-size: var(--font-size--sm);
    margin-block-end: var(--gap-xs);
  }

  .quantity-label__cart-count {
    color: var(--color-foreground-secondary);
  }

  .quantity-rules {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    row-gap: calc(var(--gap-xs) / 2);
    flex: 1 0 100%;
    width: 100%;
    font-size: var(--font-size--xs);
    color: var(--color-foreground-secondary);
    margin-block-start: var(--gap-xs);
    margin-block-end: var(--gap);
  }

  .product-form-buttons:has(~ .volume-pricing .volume-pricing__title) .quantity-rules {
    margin-block-end: var(--gap-md);
  }

  .quantity-rules__item {
    position: relative;
    display: inline-block;
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .quantity-rules__item:not(:last-child) {
    padding-right: var(--padding-xl);
    margin-right: var(--margin-2xs);
  }

  .quantity-rules__item:not(:last-child)::after {
    content: '•';
    position: absolute;
    inset-inline-end: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.5em;
    line-height: 0;
  }

  .add-to-cart-button {
    height: var(--height-buy-buttons);
    text-transform: var(--button-text-case-primary);
  }

  .add-to-cart-button.button-secondary {
    text-transform: var(--button-text-case-secondary);
  }

  .product-form-text__error {
    display: flex;
    flex: 1 0 100%;
    align-items: flex-start;
    gap: var(--gap-xs);
    margin-block-end: var(--gap-xs);
  }

  .product__pickup-availabilities {
    width: 100%;
    color: var(--color, var(--color-foreground));
  }

  .pickup-availability__column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .pickup-availability__row {
    display: flex;
    gap: var(--padding-xs);
  }

  .pickup-availability__dialog-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  .pickup-availability__header-container {
    padding-block-end: var(--padding-2xl);
  }

  .pickup-location__wrapper {
    display: flex;
    flex-direction: column;
    padding-block: var(--padding-2xl);
    padding-inline: var(--theme-drawer-padding);
    border-top: 1px solid var(--color-border);
    gap: var(--padding-xs);
  }

  .pickup-location__address-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--padding-md);
  }

  .pickup-location__text-sm {
    font-size: var(--font-size--sm);
    margin: 0;
  }

  .pickup-location__text-xs {
    font-size: var(--font-size--xs);
    margin: 0;
  }

  .pickup-location__button {
    width: fit-content;
    color: var(--color, var(--color-foreground));
    font-size: var(--font-size--xs);
    font-family: var(--font-body--family);
    padding: 0;
    cursor: pointer;
    margin-block: var(--margin-xs);
  }

  .pickup-location__button:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .pickup-location__h4 {
    margin: 0;
  }

  .pickup-location__text-bold {
    font-size: var(--font-size--md);
    font-weight: 600;
    margin: 0;
  }

  .pickup-location__availability-wrapper {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    font-family: var(--font-paragraph--family);
  }

  .pickup-location__address {
    font-style: normal;
  }

  .volume-pricing {
    display: block;
    width: 100%;
    margin-bottom: var(--gap);
  }

  .volume-pricing:not(:has(.volume-pricing__title)) {
    margin-top: 0;
    margin-bottom: 0;
  }

  .volume-pricing__title {
    display: block;
    margin-block-end: var(--gap-sm);
    font-size: var(--font-size--sm);
    font-weight: var(--font-body--weight);
    color: var(--color-foreground);
  }

  .volume-pricing__table {
    width: 100%;
  }

  .volume-pricing__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-md);
    font-size: var(--font-size--sm);
  }

  .volume-pricing__row--even {
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .volume-pricing__row--odd {
    background: var(--color-background);
  }

  .volume-pricing__collapsible-wrapper {
    block-size: 0;
    overflow-y: clip;
    opacity: 0;
    interpolate-size: allow-keywords;
    transition: opacity var(--animation-speed-slow) var(--animation-easing),
      block-size var(--animation-speed-slow) var(--animation-easing);
  }

  .volume-pricing__toggle {
    width: 100%;
    padding-bottom: 0;
    padding-inline: 0;
    text-align: left;
    color: var(--color-foreground-secondary);
    font-size: var(--font-size--xs);
    cursor: default;
    margin-block-start: 0;
    pointer-events: none;
  }

  button.volume-pricing__toggle {
    /* Need the extra specificity to override .product-form-buttons button */
    padding-block: var(--padding-sm);
  }

  .volume-pricing__toggle-text {
    cursor: pointer;
    display: inline-block;
    pointer-events: auto;
  }

  .volume-pricing__show-less {
    display: none;
  }

  .volume-pricing--expanded .volume-pricing__collapsible-wrapper {
    opacity: 1;
    block-size: auto;

    @starting-style {
      block-size: 0;
      opacity: 0;
      overflow-y: clip;
    }
  }

  .volume-pricing--expanded .volume-pricing__show-more {
    display: none;
  }

  .volume-pricing--expanded .volume-pricing__show-less {
    display: inline;
  }

  /* Accelerated checkout styles — co-located here so they compile on pages
       where the quick-add modal can display buy buttons (e.g. collection pages). */
  .accelerated-checkout-block[data-shopify-visual-preview] {
    width: 300px;
  }

  more-payment-options-link {
    font-size: smaller;
  }

  more-payment-options-link a:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .shopify-payment-button__more-options[aria-hidden='true'] {
    display: none;
  }
/* END_SNIPPET:buy-buttons-styles */

/* START_SNIPPET:card-gallery (INDEX:169) */
.card-gallery {
    overflow: hidden;
    container-type: inline-size; /* Make card-gallery a container */
    container-name: card-gallery-container; /* Optional: name the container */
  }

  .card-gallery__placeholder svg {
    height: 100%;
    width: 100%;
  }

  .card-gallery svg {
    aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
  }

  .product-card-gallery__title-placeholder {
    padding: var(--padding-md);
    font-size: var(--font-size--2xl);
    line-height: var(--line-height--display-loose);
    word-break: break-word;
    color: var(--color-foreground);
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--gallery-aspect-ratio);
    border-radius: var(--product-corner-radius);
    display: block;
  }

  .product-card-gallery__title-placeholder .title-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    overflow: hidden;
  }

  .card-gallery[data-image-ratio='landscape'] .product-card-gallery__title-placeholder .title-text {
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  @media screen and (min-width: 750px) {
    .product-grid[data-product-card-size='extra-large'] .product-card-gallery__title-placeholder {
      padding: var(--padding-3xl);
      font-size: var(--font-size--3xl);
    }

    .product-grid[data-product-card-size='large'] .product-card-gallery__title-placeholder {
      padding: var(--padding-2xl);
      font-size: var(--font-size--2xl);
    }

    .product-grid[data-product-card-size='medium'] .product-card-gallery__title-placeholder {
      padding: var(--padding-xl);
      font-size: var(--font-size--xl);
    }

    .product-grid[data-product-card-size='small'] .product-card-gallery__title-placeholder {
      padding: var(--padding-sm);
      font-size: var(--font-size--lg);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-3xl) + 50px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-2xl) + 50px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-xl) + 50px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-sm) + 50px);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-3xl) + 40px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-2xl) + 40px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-xl) + 40px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-sm) + 40px);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-3xl) + 40px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-2xl) + 40px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-xl) + 40px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-sm) + 40px);
    }
  }

  @media screen and (max-width: 749px) {
    .product-card-gallery__title-placeholder {
      font-size: var(--font-size--xl);
      padding: var(--padding-md);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-sm) + 50px);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-sm) + 40px);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-sm) + 40px);
    }
  }

  [product-grid-view='zoom-out'] .card-gallery .product-card-gallery__title-placeholder {
    /* stylelint-disable-next-line declaration-no-important */
    padding: var(--padding-xs) !important;
    font-size: var(--font-size--xs);
  }

  [product-grid-view='zoom-out'] .card-gallery .slideshow-control {
    min-width: auto;
  }

  ul[product-grid-view='zoom-out'] .product-grid__card .card-gallery {
    display: block;
  }

  [product-grid-view='zoom-out']
    .card-gallery
    > :is(quick-add-component, .product-badges, slideshow-component > slideshow-controls) {
    display: none;
  }

  ul[product-grid-view='zoom-out'] .card-gallery > img {
    display: block;
  }

  .card-gallery slideshow-arrows .slideshow-control {
    /* Align icons with quick-add button */
    padding-inline: var(--padding-xl);

    @container (max-width: 249px) {
      padding-inline: 0 var(--padding-sm);
    }
  }

  /*
   * Card galleries preview the next or previous images on 'pointerenter', so we
   * try to kick load them beforehand (they are lazy loaded otherwise).
   */
  .card-gallery
    :is(
      slideshow-slide:has(+ slideshow-slide[aria-hidden='false']),
      slideshow-slide[aria-hidden='false'] + slideshow-slide
    ) {
    content-visibility: auto;

    slideshow-component[actioned] & {
      content-visibility: visible;
    }
  }
/* END_SNIPPET:card-gallery */

/* START_SNIPPET:cart-bubble (INDEX:170) */
.cart-bubble {
    --cart-padding: 0.2em;

    position: relative;
    width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    border-width: 0;
    display: flex;
    line-height: normal;
    align-items: center;
    justify-content: center;
    color: var(--cart-bubble-text, var(--cart-bubble-text-fallback));
    padding-inline: var(--cart-padding);
  }

  .cart-bubble[data-maintain-ratio] {
    aspect-ratio: 1;
  }

  .cart-bubble[data-maintain-ratio] .cart-bubble__background {
    border-radius: var(--style-border-radius-50);
  }

  .cart-bubble__background {
    position: absolute;
    inset: 0;
    background-color: var(--cart-bubble-background, var(--cart-bubble-background-fallback));
    border-radius: var(--style-border-radius-lg);
  }

  .cart-bubble__text {
    font-size: var(--font-size--3xs);
    z-index: var(--layer-flat);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
/* END_SNIPPET:cart-bubble */

/* START_SNIPPET:cart-disclosure-tooltip (INDEX:171) */
.cart-disclosure-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    flex-shrink: 0;
  }

  .cart-disclosure-tooltip__button {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    color: var(--color-foreground-secondary);
    line-height: 1;
    transition: color var(--animation-speed) var(--animation-easing);
    cursor: pointer;
  }

  .cart-items__title-row .cart-disclosure-tooltip {
    position: static;
    align-self: flex-start;
    width: 1em;
    height: 1em;
    margin-block-start: calc((1lh - 1em) / 2 + 0.3rem);
    line-height: calc(var(--font-size--md) * var(--font-paragraph--line-height));
  }

  .cart-page .cart-items__title-row .cart-disclosure-tooltip {
    margin-block-start: calc((1lh - 1em) / 2);
  }

  .cart-items__title-row .cart-disclosure-tooltip__button {
    position: relative;
    justify-content: center;
    width: 1em;
    height: 1em;
  }

  .cart-items__title-row .cart-disclosure-tooltip__button::before {
    content: '';
    position: absolute;
    inset-block: calc((1em - var(--minimum-touch-target)) / 2);
    inset-inline-start: 0;
    inset-inline-end: calc(1em - var(--minimum-touch-target));
  }

  .cart-disclosure-tooltip__button:hover {
    color: var(--color-foreground);
  }

  .cart-disclosure-tooltip__button .svg-wrapper,
  .cart-disclosure-tooltip__button .svg-wrapper > svg {
    width: 1em;
    height: 1em;
  }

  .cart-disclosure-tooltip__popover {
    --cart-disclosure-tooltip-popover-max-width: 280px;
    --cart-disclosure-tooltip-popover-spacing: 8px;
    --cart-disclosure-tooltip-popover-offset-block: -4px;
    --cart-disclosure-tooltip-popover-viewport-margin: 16px;
    --cart-disclosure-tooltip-symbol-inset-inline: var(--padding-md);
    --cart-disclosure-tooltip-popover-native-fallback-top: calc(
      anchor(bottom) + var(--cart-disclosure-tooltip-popover-spacing) +
        var(--cart-disclosure-tooltip-popover-offset-block)
    );
    --cart-disclosure-tooltip-popover-fixed-fallback-top: calc(
      (var(--anchor-top) + var(--anchor-height)) * 1px + var(--cart-disclosure-tooltip-popover-spacing) +
        var(--cart-disclosure-tooltip-popover-offset-block)
    );

    inset: unset;
    top: var(--cart-disclosure-tooltip-popover-top, var(--cart-disclosure-tooltip-popover-native-fallback-top));
    left: max(
      var(--cart-disclosure-tooltip-popover-viewport-margin),
      min(
        calc(anchor(left) - var(--cart-disclosure-tooltip-symbol-inset-inline)),
        calc(
          100vw - var(--cart-disclosure-tooltip-popover-max-width) -
            var(--cart-disclosure-tooltip-popover-viewport-margin)
        )
      )
    );
    min-inline-size: 240px;
    max-inline-size: var(--cart-disclosure-tooltip-popover-max-width);
    padding: 0;
    margin: 0;
    color: var(--color-foreground);
    background: var(--color-background);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover, 0);
    box-shadow: var(--shadow-popover);
    opacity: 0;
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    translate: 0 20px;
    overflow: hidden;
  }

  @supports not (position-anchor: --cart-disclosure-trigger) {
    .cart-disclosure-tooltip__popover {
      position: fixed;
      top: var(--cart-disclosure-tooltip-popover-fixed-fallback-top);
      left: max(
        var(--cart-disclosure-tooltip-popover-viewport-margin),
        min(
          calc((var(--anchor-left) * 1px) - var(--cart-disclosure-tooltip-symbol-inset-inline)),
          calc(
            100vw - var(--cart-disclosure-tooltip-popover-max-width) -
              var(--cart-disclosure-tooltip-popover-viewport-margin)
          )
        )
      );
    }
  }

  .cart-disclosure-tooltip__popover:popover-open {
    opacity: 1;
    translate: 0 0;
  }

  .cart-disclosure-tooltip__list {
    display: flex;
    flex-direction: column;
  }

  .cart-disclosure-tooltip__row {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-sm);
    padding-block: var(--padding-xs);
    padding-inline: var(--cart-disclosure-tooltip-symbol-inset-inline, var(--padding-md)) var(--padding-md);
    font-size: var(--font-size--sm);
    color: var(--color-foreground);
    background: var(--color-background);
    overflow-wrap: break-word;
  }

  .cart-disclosure-tooltip__row:has(> .cart-disclosure-tooltip__symbol) {
    --cart-disclosure-tooltip-symbol-height: 1em;
    --cart-disclosure-tooltip-symbol-slot-width: calc(
      var(--cart-disclosure-tooltip-symbol-height) * var(--cart-disclosure-symbol-aspect-ratio, 1)
    );

    display: grid;
    grid-template-columns: var(--cart-disclosure-tooltip-symbol-slot-width) minmax(0, 1fr);
    min-inline-size: 0;
  }

  .cart-disclosure-tooltip__symbol {
    justify-self: center;
    width: auto;
    max-inline-size: 100%;
    height: var(--cart-disclosure-tooltip-symbol-height, 1em);
    margin: 0;
    object-fit: contain;
    translate: 0 1px;
  }

  .cart-disclosure-tooltip__title {
    min-width: 0;
    margin: 0;
    line-height: var(--line-height--body-tight);
  }

  .cart-disclosure-tooltip__dialog {
    display: contents;
  }

  .cart-disclosure-modal {
    --cart-disclosure-modal-width: 28rem;
    --cart-disclosure-modal-max-height: 72dvh;
    --cart-disclosure-modal-border-radius: min(var(--style-border-radius-popover), 8px);

    position: fixed;
    top: 50%;
    left: 50%;
    width: min(var(--cart-disclosure-modal-width), calc(100vw - (var(--padding-2xl) * 2)));
    max-height: min(var(--cart-disclosure-modal-max-height), calc(100dvh - (var(--padding-2xl) * 2)));
    padding: 0;
    margin: 0;
    color: var(--color-foreground);
    background: var(--color-background);
    border: var(--style-border-popover);
    border-radius: var(--cart-disclosure-modal-border-radius);
    box-shadow: var(--shadow-popover);
    overflow: hidden;
    isolation: isolate;
    translate: -50% -50%;
  }

  .cart-disclosure-modal.dialog-modal[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .cart-disclosure-modal.dialog-modal.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing);
  }

  .cart-disclosure-modal::backdrop {
    backdrop-filter: brightness(0.65) blur(2px);
    background: rgb(var(--color-foreground-rgb) / var(--opacity-60));
  }

  .cart-disclosure-modal__content {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    max-height: inherit;
    padding: var(--padding-2xl);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .cart-disclosure-modal .cart-disclosure-modal__heading {
    margin: 0;
    padding-inline-end: var(--minimum-touch-target);
    font-size: var(--font-size--2xl);
    font-weight: 700;
    line-height: 1.15;
    overflow-wrap: break-word;
  }

  .cart-disclosure-modal__list {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
  }

  .cart-disclosure-modal__item {
    --cart-disclosure-modal-symbol-height: 1.5em;
    --cart-disclosure-modal-symbol-slot-width: calc(
      var(--cart-disclosure-modal-symbol-height) * var(--cart-disclosure-symbol-aspect-ratio, 1)
    );
    --cart-disclosure-modal-heading-offset: calc((var(--cart-disclosure-modal-symbol-height) - 1em) / 2);

    display: grid;
    grid-template-columns: var(--cart-disclosure-modal-symbol-slot-width) minmax(0, 1fr);
    align-items: flex-start;
    column-gap: var(--gap-xs);
    row-gap: var(--gap-xs);
    min-width: 0;
    font-size: var(--font-size--md);
    overflow-wrap: break-word;
  }

  .cart-disclosure-modal__item:not(:has(> .cart-disclosure-modal__symbol)) {
    grid-template-columns: minmax(0, 1fr);
  }

  .cart-disclosure-modal__symbol {
    justify-self: center;
    width: auto;
    max-inline-size: 100%;
    height: var(--cart-disclosure-modal-symbol-height);
    margin: 0;
    object-fit: contain;
  }

  .cart-disclosure-modal__item-content {
    display: contents;
  }

  .cart-disclosure-modal__item-heading {
    margin: 0;
    font-size: inherit;
    font-weight: 700;
    line-height: 1;
    overflow-wrap: break-word;
  }

  .cart-disclosure-modal__item:has(> .cart-disclosure-modal__symbol) .cart-disclosure-modal__item-heading {
    grid-column: 2;
    padding-block-start: var(--cart-disclosure-modal-heading-offset);
  }

  .cart-disclosure-modal__body {
    grid-column: 1 / -1;
    margin: 0;
    font-size: var(--font-size--sm);
    line-height: 1.35;
    overflow-wrap: break-word;
  }

  .cart-disclosure-modal__body > * {
    margin-block: 0;
  }

  .cart-disclosure-modal__close {
    position: absolute;
    inset-block-start: var(--padding-sm);
    inset-inline-end: var(--padding-sm);
    z-index: var(--layer-raised);
    overflow: visible;
  }

  @media screen and (min-width: 750px) {
    .cart-disclosure-modal__content {
      padding-block: var(--padding-2xl);
      padding-inline: var(--padding-2xl);
    }
  }

  @media screen and (max-width: 749px) {
    .cart-disclosure-modal {
      position: fixed;
      top: auto;
      left: 0;
      inset-block-start: auto;
      inset-block-end: 0;
      inset-inline: 0;
      width: 100%;
      height: fit-content;
      max-width: 100%;
      max-height: 100dvh;
      margin: auto 0 0;
      border-start-start-radius: var(--cart-disclosure-modal-border-radius);
      border-start-end-radius: var(--cart-disclosure-modal-border-radius);
      border-end-start-radius: 0;
      border-end-end-radius: 0;
      overflow: clip;
      translate: 0 0;
    }

    .cart-disclosure-modal__content {
      max-height: min(var(--modal-max-height), 100dvh);
    }
  }
/* END_SNIPPET:cart-disclosure-tooltip */

/* START_SNIPPET:cart-drawer (INDEX:172) */
/* ── DER WARENKORB ALS FREISTEHENDES FENSTER ────────────────────────
     Bis zum 21.08.2026 klebte die Schublade an drei Bildschirmkanten. Das ist
     die Vorgabe des Themes und fuer eckige Oberflaechen richtig — zu unseren
     leicht gerundeten Formen passt es nicht: Eine Rundung an zwei Ecken, die
     an drei Kanten klebt, sieht aus wie ein Fehler und nicht wie eine Form.

     Also abgeloest: ringsum Abstand, alle vier Ecken gerundet, eine feine
     Kontur und ein Schatten. Dieselbe Sprache wie das VERIFIED-Fenster und die
     Pop-ups — der Kunde sieht, dass etwas DARUEBER liegt und die Seite
     darunter weitergeht.

     NUR der Warenkorb, nicht jede Schublade: Das Menue auf dem Handy soll
     weiter die volle Hoehe nehmen, dort ist es Navigation und kein Fenster.

     Die Schiebe-Bewegung bleibt unberuehrt. Sie setzt nur den Startwert
     (right: -Breite); wo sie endet, ist der Wert dieser Regel — deshalb genuegt
     es, die geoeffnete Lage zu aendern. */
  #cart-drawer .theme-drawer__dialog {
    top: 12px;
    height: calc(100dvh - 24px);
    max-width: calc(100% - 24px);
    border: 1px solid var(--3idee-hairline);
    border-radius: var(--3idee-radius-gross);
    box-shadow: 0 24px 60px rgb(31 34 48 / 0.18);
    overflow: hidden;
  }

  #cart-drawer .theme-drawer__dialog[open] {
    right: 12px;
  }

  cart-drawer-component {
    --cart-drawer-padding: var(--theme-drawer-padding);
    --font-paragraph--line-height: 1;
    display: contents;
  }

  .cart-drawer__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }

  .cart-drawer__inner > .cart-items-component {
    flex: 1;
    min-height: 0;
    height: auto;
  }

  .cart-drawer__content {
    height: calc(100% - var(--header-height));
    display: flex;
    flex-direction: column;
    padding: 0;
    background-color: var(--color-background);
    flex-grow: 1;
    overflow-y: auto;
  }

  .cart-drawer__items {
    display: flex;
    flex-direction: column;
    padding-inline: var(--cart-drawer-padding);
    overflow-y: auto;
  }

  .cart-drawer__items .cart-items__table-row {
    padding-bottom: var(--gap-xl);
    border-bottom: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    margin-bottom: var(--gap-xl);
  }

  .cart-drawer__items .cart-items__table-row:has(+ .cart-items__nested-line) {
    border-bottom: none;
    margin-bottom: 0;
  }

  .cart-drawer__items .cart-items__table-row:last-child {
    border-bottom: none;
    padding-block-end: 0;
    margin-block-end: 0;
  }

  .cart-drawer__close-button--empty {
    margin-inline-start: auto;
  }

  .cart-drawer__summary {
    --cart-drawer-summary-padding: var(--padding-lg);

    position: sticky;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-xl);
    padding: var(--cart-drawer-summary-padding);
    margin-top: auto;
    background-color: var(--color-background);
    /* stylelint-disable-next-line color-named */
    mask-image: linear-gradient(to bottom, transparent, black var(--cart-drawer-summary-padding));

    @media screen and (min-width: 750px) {
      --cart-drawer-summary-padding: var(--padding-2xl);
    }
  }

  .theme-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__summary {
    position: static;
    mask-image: none;
  }

  .theme-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__items {
    overflow: unset;
  }

  .cart-actions summary {
    padding-inline: 0;
    padding-block: var(--padding-sm);
    line-height: 1.2;
    min-height: var(--minimum-touch-target);
  }

  .cart-drawer__summary .cart__summary-totals:not(:has(.cart__subtotal-container:empty)) {
    border-block-start: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    padding-block-start: var(--padding-2xl);
  }

  .cart-drawer__summary .cart-note {
    @media screen and (min-width: 750px) {
      margin-block-start: var(--margin-3xs);
    }
  }

  .cart-drawer--empty .cart-drawer__content {
    text-align: center;
    align-items: center;
    justify-content: center;
    min-height: auto;
  }

  .cart-drawer--empty .cart-drawer__items {
    padding-inline: 0;
  }

  cart-drawer-component:not(:has(.cart-form)) .cart-drawer__content {
    text-align: center;
    align-items: center;
    justify-content: center;
  }

  cart-drawer-component:not(:has(.cart-form)) .cart-drawer__items {
    padding-inline: 0;
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .theme-drawer__close-button {
        view-transition-name: cart-drawer-close-button;
      }
    }
  }

  :active-view-transition {
    .cart-drawer__header,
    .cart-drawer__content {
      background: transparent;
    }
  }
/* END_SNIPPET:cart-drawer */

/* START_SNIPPET:cart-items-component (INDEX:173) */
.cart-items-component {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer),
    html:active-view-transition-type(fill-cart-drawer) {
      .cart-items-component {
        view-transition-name: cart-drawer-content;
      }
    }

    html:active-view-transition-type(empty-cart-page) {
      .cart-items-component {
        view-transition-name: cart-page-content;
      }
    }
  }

  ::view-transition-old(cart-page-content) {
    animation: cart-page-content-old var(--animation-speed-fast) var(--animation-easing) forwards;
  }

  @keyframes cart-page-content-old {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
      filter: blur(4px);
    }
  }

  ::view-transition-old(cart-drawer-content) {
    transform-origin: 50% 33%;
    animation: cart-contents-old var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  ::view-transition-new(cart-drawer-content) {
    transform-origin: top center;
    animation: cart-contents-new var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  @keyframes cart-contents-old {
    to {
      scale: 0.92;
      opacity: 0;
    }
  }

  @keyframes cart-contents-new {
    from {
      scale: 1.05;
      translate: 0 128px;
      filter: blur(1px);
      opacity: 0;
    }
  }
/* END_SNIPPET:cart-items-component */

/* START_SNIPPET:cart-products (INDEX:174) */
.cart-items {
    --cart-item-media-width-min: 2.5rem;
    --cart-item-media-width-max: 7.5rem;

    container-name: cart-items;
    container-type: inline-size;
    width: 100%;
  }

  .cart-items-disabled {
    pointer-events: none;
  }

  .cart-items__wrapper {
    display: flex;
    flex-direction: column;
  }

  .cart-page--empty .cart-items__wrapper {
    align-items: center;
    margin-block-start: 0;
    text-align: center;
  }

  .cart-items__wrapper--drawer-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .cart-items__table {
    width: 100%;
    border-spacing: 0;
  }

  .cart-items__table * {
    margin: 0;
  }

  .cart-items__table-row {
    --cart-item-price-width: 6rem;

    display: grid;
    grid-template-columns: clamp(2.5rem, 15cqi, 7.5rem) minmax(0, 1fr) minmax(var(--cart-item-price-width), auto);
    grid-template-areas:
      'media details price'
      'media quantity price'
      'media error error';
    column-gap: var(--gap-md);
    align-items: start;
    padding-bottom: var(--cart-items-gap);
    margin-bottom: var(--margin-lg);
  }

  .cart-items__details {
    grid-area: details;
    min-width: 0;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
  }

  .cart-items__product-info {
    min-width: 0;
  }

  /* Cart drawer: separate grid areas for variants and unit price */
  .cart-items__table-row--full-width-variants {
    grid-template-columns: clamp(2.5rem, 15cqi, 7.5rem) minmax(0, 1fr) auto;
    grid-template-rows: repeat(4, min-content) 1fr;
    grid-template-areas:
      'media details price'
      'media variants variants'
      'media unit_price unit_price'
      'media quantity quantity'
      'media error error';

    .cart-items__details {
      display: contents;
    }

    .cart-items__product-info {
      grid-area: details;
    }

    .cart-items__variants-wrapper {
      grid-area: variants;

      &:empty {
        display: none;
      }

      p {
        margin: 0;
      }
    }

    .cart-items__unit-price-wrapper {
      grid-area: unit_price;
      font-size: var(--font-size--sm);
    }

    .cart-items__price {
      min-width: auto;
      width: max-content;
    }
  }

  .cart-items__table-row.cart-items__nested-line td:first-child {
    width: 60%;
    justify-self: right;
  }

  html:active-view-transition-type(page-navigation) .cart-items__table-row {
    /* stylelint-disable-next-line declaration-no-important */
    view-transition-name: none !important;
  }

  .cart-items__table-row.removing {
    overflow: hidden;
    animation: removeRow calc(var(--animation-speed) * 2) var(--animation-easing) forwards;
    animation-delay: var(--animation-speed);
  }

  @keyframes removeRow {
    0% {
      height: var(--row-height);
    }

    100% {
      opacity: 0;
      height: 0;
      padding-bottom: 0;
      margin-bottom: 0;
      border-color: transparent;
    }
  }

  .cart-items__table-row.adding {
    interpolate-size: allow-keywords;
    overflow: hidden;
    animation: addRow calc(var(--animation-speed) * 2) var(--animation-easing) forwards;
  }

  @keyframes addRow {
    0% {
      opacity: 0;
      height: 0;
      padding-bottom: 0;
      margin-bottom: 0;
      border-color: transparent;
    }

    100% {
      opacity: 1;
      height: auto;
    }
  }

  .cart-items__table-row:last-child {
    padding-bottom: 0;
  }

  .cart-items--dividers .cart-items__table-row {
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    margin-bottom: var(--cart-items-gap);
  }

  .cart-items--dividers .cart-items__table-row:has(+ .cart-items__nested-line) {
    border-bottom: none;
    margin-bottom: 0;
  }

  .cart-items--dividers .cart-items__table-row:last-of-type {
    border-block-end: none;
    padding-block-end: 0;
    margin-bottom: 0;
  }

  .cart-items__details > * + *,
  .cart-items__bundle li {
    margin-block-start: var(--margin-3xs);
  }

  .cart-items__details * {
    font-size: var(--font-size--sm);
  }

  .cart-items__details a {
    text-decoration: none;
  }

  .cart-items__title-row {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    max-width: 100%;
    min-width: 0;
  }

  .cart-items__title {
    font-size: var(--font-size--md);
    color: var(--color-foreground);
    text-transform: var(--product-title-case);
    display: block;
    margin-block-start: 0;
    min-width: 0;
    overflow-wrap: break-word;
  }

  .cart-items__variants {
    display: block;
  }

  .cart-items__variant {
    display: inline;
  }

  .cart-items__variant dt,
  .cart-items__variant dd {
    display: inline;
    margin: 0;
  }

  .cart-items__quantity {
    grid-area: quantity;
    margin-block-start: var(--margin-xs);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-xs);
    width: fit-content;
  }

  .cart-items__quantity-controls {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-xs);
    width: fit-content;
  }

  .cart-items__quantity-controls > .volume-pricing-info {
    margin-inline-start: calc(-1 * var(--minimum-touch-target) - var(--gap-xs));
  }

  .cart-items__quantity .quantity-selector {
    display: inline-flex;
    font-size: var(--font-size--sm);
    height: auto;
  }

  .cart-items__remove {
    background-color: transparent;
    color: var(--color-foreground);
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    justify-content: center;
    box-shadow: none;
    padding: 0;
  }

  .cart-items__media {
    grid-area: media;
    padding: 0;
  }

  .cart-items__price {
    grid-area: price;
    min-height: unset;
    min-width: var(--cart-item-price-width);
    text-align: end;
    display: block;
    font-size: var(--font-size--sm);
    line-height: var(--line-height);
  }

  /* Rangfolge des Kodex bei einem reduzierten Preis: der reduzierte Preis ist
     die staerkste Geldinformation, der Streichpreis ist KLAR SEKUNDAER —
     gedimmt, durchgestrichen UND kleiner. Die Klasse compare-at-price liefert
     nur Dimmung und Durchstreichung; ohne diese Regel lief der Streichpreis in
     der vollen Preisgroesse direkt daneben und beide wogen gleich schwer.
     Keine Signalfarbe — die Kanalregel laesst Deep Red nur als gefuellte
     Flaeche zu, nicht als Schriftfarbe. (25.08.2026) */
  .cart-items__streich {
    font-size: var(--font-size--xs);
  }

  /* Streichpreis und Etikett gehoeren zusammen und brechen zusammen um: In der
     schmalen Preisspalte der Schublade wuerde das Etikett sonst allein in die
     naechste Zeile rutschen und saehe aus wie eine eigene Aussage. */
  .cart-items__vorteil {
    display: inline-flex;
    align-items: center;
    gap: var(--padding-2xs);
    margin-inline-start: var(--padding-2xs);
  }

  .cart-items__price-unit {
    font-size: var(--font-size--xs);
    padding-block-start: var(--padding-2xs);
  }

  .cart-items__media-container {
    display: flex;
    aspect-ratio: var(--ratio);
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .cart-items__media-image {
    aspect-ratio: inherit;
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: auto;
  }

  .cart-items__empty-button {
    margin-top: var(--margin-md);
    margin-inline: auto;
    padding-inline: var(--padding-4xl);
    padding-block: var(--padding-lg);
  }

  /* Error message */
  .cart-items__error {
    display: flex;
    align-items: flex-start;
    width: 100%;
    grid-area: error;
    margin-block-start: var(--margin-xs);
    opacity: 1;
    overflow: hidden;
    transform: translateY(0);
    transition: opacity var(--drawer-animation-speed) var(--animation-easing),
      transform var(--drawer-animation-speed) var(--animation-easing);

    @starting-style {
      opacity: 0;
      transform: translateY(-0.5rem);
    }
  }

  .cart-item__error {
    display: flex;
    align-items: flex-start;
    width: 100%;
    font-size: var(--font-size--sm);
    padding-block: var(--padding-2xs);
  }

  .cart-item__error .svg-wrapper {
    flex-shrink: 0;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    margin-inline: var(--margin-3xs) var(--margin-xs);
    margin-block-start: var(--margin-3xs);
  }

  @container cart-items (min-width: 720px) {
    /* Cart page: original layout */
    .cart-items__table-row {
      --cart-item-price-width: 6rem;

      grid-template-columns: 7.5rem 1fr 1fr minmax(var(--cart-item-price-width), auto);
      grid-template-rows: min-content 1fr;
      grid-template-areas:
        'media details quantity price'
        'media details error error';
    }

    .cart-items__quantity,
    .cart-items__price {
      grid-area: initial;
    }

    .cart-items__quantity {
      margin-top: 0;
    }

    .cart-items__price {
      min-height: var(--minimum-touch-target);
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }

    /* Cart drawer: separate areas for variants and unit price */
    .cart-items__table-row--full-width-variants {
      grid-template-rows: min-content min-content min-content 1fr;
      grid-template-areas:
        'media details quantity price'
        'media variants variants variants'
        'media unit_price unit_price unit_price'
        'media error error error';

      .cart-items__quantity,
      .cart-items__price {
        grid-area: initial;
      }
    }
  }

  .cart__subtotal-container,
  .cart__total-container {
    display: flex;
    flex-direction: column;
  }

  .cart__total-container {
    row-gap: var(--gap-2xs);

    &.cart__total-container--has-installments {
      row-gap: var(--gap-xs);
    }
  }

  .cart__subtotal-container:empty {
    display: none;
  }

  .cart__summary-totals {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    width: 100%;
    border-block-start: none;

    &:has(> :first-child:not(.cart__subtotal-container, .cart__total-container)) {
      padding-block-start: 0;
      border-block-start: none;
    }

    @media screen and (min-width: 750px) {
      padding-block-start: 0;
    }
  }

  .cart__subtotal-container,
  .cart__subtotal-container * {
    font-size: var(--font-size--sm);
  }

  .cart__total {
    font-weight: var(--font-weight-bold);
  }

  .cart__total-label {
    font-size: var(--font-size--sm);
  }

  .cart__total-value {
    font-size: var(--font-size--xl);

    @media screen and (max-width: 749px) {
      font-size: var(--font-size--lg);
    }
  }

  .cart-primary-typography {
    font-family: var(--cart-primary-font-family);
    font-style: var(--cart-primary-font-style);
    font-weight: var(--cart-primary-font-weight);
  }

  .cart-secondary-typography {
    font-family: var(--cart-secondary-font-family);
    font-style: var(--cart-secondary-font-style);
    font-weight: var(--cart-secondary-font-weight);
  }

  .cart__ctas {
    width: 100%;
    display: grid;
    gap: var(--checkout-button-gap);
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }

  .cart__additional-checkout-buttons {
    width: 100%;
  }

  shopify-accelerated-checkout-cart {
    --shopify-accelerated-checkout-inline-alignment: center;
    --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-primary);
    --shopify-accelerated-checkout-row-gap: var(--checkout-button-gap, 10px);
  }

  /* Remove animation */
  .remove-icon-bottom,
  .remove-icon-top {
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .cart-items__remove:hover .remove-icon-top {
    transform: translate(calc(-1 * var(--icon-stroke-width)), var(--icon-stroke-width)) rotate(-15deg);
  }

  .cart-items__remove:is(:hover, :active) .remove-icon-bottom {
    transform: translateY(var(--icon-stroke-width));
  }

  .cart-items__table-row.removing .remove-icon-bottom {
    transform: translateY(0);
  }

  .cart-items__table-row.removing .remove-icon-top {
    animation: removeButtonClickedIconTop var(--animation-speed) var(--animation-easing) forwards;
  }

  @keyframes removeButtonClickedIconTop {
    50% {
      transform: translate(0, calc(-1 * var(--icon-stroke-width)));
    }

    100% {
      transform: translate(0, 0);
    }
  }

  .cart-items__properties {
    display: block;
    margin-block-start: var(--margin-2xs);
  }

  .cart-items__property {
    display: block;
  }

  .cart-items__properties dt,
  .cart-items__properties dd {
    display: inline;
    margin: 0;
    overflow-wrap: break-word;
  }

  @media screen and (min-width: 750px) {
    .cart-items .quantity-selector {
      --quantity-selector-width: 105px;
      height: var(--button-size-md);
      width: var(--quantity-selector-width);
    }

    .cart-items .quantity-selector button {
      width: var(--button-size-md);
      height: var(--button-size-md);
    }

    .cart-items .quantity-selector input {
      max-width: calc(var(--quantity-selector-width) - var(--button-size-md) * 2);
    }
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .cart-items__empty-button,
      .cart__checkout-button {
        view-transition-name: cart-drawer-primary-action;

        & > .button-text {
          view-transition-name: cart-drawer-primary-action-text;
        }
      }
    }
  }

  ::view-transition-old(cart-drawer-primary-action-text),
  ::view-transition-new(cart-drawer-primary-action-text) {
    height: 100%;
    object-fit: none;
    overflow: clip;
    overflow-clip-margin: 1em;
  }

  ::view-transition-old(cart-drawer-primary-action-text) {
    animation: cart-drawer-primary-action-text var(--animation-speed) var(--animation-easing) reverse forwards;
  }
  ::view-transition-new(cart-drawer-primary-action-text) {
    animation: cart-drawer-primary-action-text var(--animation-speed) var(--animation-easing) forwards;
  }

  ::view-transition-old(cart-drawer-primary-action),
  ::view-transition-new(cart-drawer-primary-action) {
    height: 100%;
  }

  ::view-transition-group(cart-drawer-primary-action-text),
  ::view-transition-group(cart-drawer-primary-action) {
    animation-duration: var(--spring-d300-b0-duration);
    animation-timing-function: var(--spring-d300-b0-easing);
  }

  @keyframes cart-drawer-primary-action-text {
    from {
      filter: blur(3px);
      opacity: 0;
    }
    to {
      filter: none;
      opacity: 1;
    }
  }
/* ── Die Mengenwahl in der Schublade ──────────────────────────────────

   Sie kam mit den Maßen der Produktseite: 124 Pixel breit, Knöpfe von 44 —
   dem Mindestmaß für eine Berührfläche. Auf der Produktseite ist das richtig,
   dort ist die Mengenwahl eine der drei Handlungen der Seite. In der
   Schublade steht sie unter einem Artikel, dessen Titel zwei Zeilen hat, und
   war zusammen mit dem Papierkorb fast so hoch wie der Titel selbst — ein
   Bedienelement, das mehr Platz nimmt als die Ware, die es zählt.

   Hier deshalb 30 Pixel: klein genug, dass die Zeile ruhig wird, groß genug,
   dass man es am Handy noch trifft. Nur in der Schublade — die Warenkorbseite
   und die Produktseite behalten ihre Maße. (24.08.2026) */
.cart-drawer__items .quantity-selector {
  --quantity-selector-width: 96px;
  flex: 0 0 auto;
  min-width: 96px;
  align-self: center;
}
.cart-drawer__items .quantity-selector :is(.quantity-minus, .quantity-plus) {
  width: 30px; height: 30px;
}
/* Die Zahl bekommt eine feste Breite und darf NICHT schrumpfen: Am Handy ist
   die Zelle schmaler, und mit min-width 0 quetschte Flex das Eingabefeld auf
   null — die Menge war schlicht nicht mehr zu sehen. (24.08.2026) */
.cart-drawer__items .quantity-selector input {
  height: 30px;
  font-size: 13px;
  width: 34px;
  min-width: 34px;
  flex: 0 0 34px;
  padding-inline: 0;
  text-align: center;
}

/* Der Altpreis steht unter dem gueltigen Preis, nicht daneben: In der schmalen
   Preisspalte der Schublade waeren zwei Betraege nebeneinander eine Zeile, die
   umbricht. */
.cart-items__streich { display: block; margin-top: 1px; font-size: 12px; }
/* END_SNIPPET:cart-products */

/* START_SNIPPET:cart-summary (INDEX:175) */
.cart-totals:not(:has(.cart-actions)) {
    margin-block-start: var(--margin-3xs);
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    padding-block-start: var(--margin-xl);
  }

  .cart-totals__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-totals__tax-note {
    color: var(--color-foreground-subdued);
  }

  .cart-totals__tax-note a {
    color: var(--color-foreground-subdued);
    text-decoration-line: underline;
    text-decoration-color: currentColor;

    &:hover {
      text-decoration-color: transparent;
    }
  }

  .cart-totals__tax-note small {
    font-size: var(--font-size--2xs);
  }

  .cart-discounts {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .cart-discounts__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-discounts__label {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
  }

  .cart-discounts__label svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    display: inline-block;
  }

  .cart-totals__original-container,
  .cart-totals__container {
    display: flex;
    flex-direction: column;
  }

  .cart-totals__container {
    row-gap: var(--gap-2xs);

    &.cart-totals__container--has-installments {
      row-gap: var(--gap-xs);
    }
  }

  .cart-totals__original-container:empty {
    display: none;
  }

  .cart-totals {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    width: 100%;
    border-block-start: none;

    &:has(> :first-child:not(.cart-totals__original-container, .cart-totals__container)) {
      padding-block-start: 0;
      border-block-start: none;
    }

    @media screen and (min-width: 750px) {
      padding-block-start: 0;
    }
  }

  .cart-totals__original-container,
  .cart-totals__original-container * {
    font-size: var(--cart-font-size--sm);
  }

  .cart-totals__total {
    align-items: baseline;
    font-weight: var(--font-weight-bold);
  }

  .cart-totals__total-label {
    font-size: var(--cart-font-size--sm);
  }

  .cart-totals__total-value {
    font-size: var(--cart-font-size--xl);

    @media screen and (max-width: 749px) {
      font-size: var(--font-size--lg);
    }
  }

  .cart-totals__installments {
    color: var(--color-foreground);
    font-size: var(--font-size--2xs);
  }

  .cart-note {
    width: 100%;
  }

  @starting-style {
    .cart-note[open-by-default-on-desktop][open-by-default-on-mobile] .details-content {
      block-size: auto;
      opacity: 1;
      overflow-y: visible;
    }
  }

  .cart-note__inner {
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  .cart-note__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-note__summary:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .cart-note__label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
    font-size: var(--font-size--2xs);
    font-weight: 500;
  }

  .cart-note__instructions {
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    border-width: var(--style-border-width-inputs);
    border-color: var(--color-input-border);
    transition: box-shadow var(--animation-speed) ease;
    box-shadow: var(--input-box-shadow);
    min-height: 5.5rem;
    min-width: 100%;
    max-width: 100%;
    font-size: var(--font-size--sm);
    padding: max(4px, calc(var(--style-border-radius-inputs) * (1 - cos(45deg))));
  }

  .cart-totals__icon {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    margin: 0;
  }

  .cart__ctas {
    width: 100%;
    display: grid;
    gap: var(--checkout-button-gap);
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }

  .cart__ctas .cart__checkout-button {
    width: 100%;
    height: clamp(25px, var(--height-buy-buttons), 55px);
    padding-inline: var(--padding-4xl);
  }

  .cart-drawer__summary .cart-totals:not(:has(.cart-totals__original-container:empty)) {
    border-block-start: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    padding-block-start: var(--padding-2xl);
  }

  .cart-drawer__summary .cart-note {
    @media screen and (min-width: 750px) {
      margin-block-start: var(--margin-3xs);
    }
  }

  .cart-discount__input {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    border-width: var(--style-border-width-inputs);
    border-color: var(--color-input-border);
    border-style: solid;
    border-radius: var(--style-border-radius-inputs);
    padding: var(--padding-sm) var(--padding-md);
    height: 100%;
    flex-grow: 1;
    min-width: 0;
    font-size: var(--font-size--sm);
  }

  .cart-discount__input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-subdued-text));
  }

  .cart-discount__pill-code {
    overflow: hidden;
    max-width: 100px;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
  }

  .cart-discount {
    width: 100%;
  }

  .cart-discount__codes {
    display: none;
    gap: var(--padding-xs);
    flex-wrap: wrap;
    list-style: none;
    padding-inline: 0;
    margin: 0;
  }

  .cart-discount__codes:has(.cart-discount__pill) {
    display: flex;
  }

  .cart-discount__button {
    height: 100%;
  }

  .cart-discount__content {
    height: calc(var(--button-size) + var(--padding-2xs) + var(--padding-sm));
  }

  .cart-discount__pill {
    display: flex;
    color: var(--color-foreground);
    gap: var(--padding-xs);
    align-items: center;
    padding: var(--padding-xs) var(--padding-sm);
    border-radius: var(--style-border-radius-pills);
    background-color: var(--color-input-background);
    text-transform: uppercase;
  }

  .cart-discount__form {
    display: flex;
    gap: var(--padding-md);
    align-items: center;
    height: 100%;
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  :is(.cart-discount__pill-remove, .cart-discount__pill-remove:hover) {
    --close-icon-opacity: 0.4;

    color: var(--color-foreground);
    background-color: transparent;
    pointer-events: all;
    cursor: pointer;
    height: 100%;
  }

  .cart-discount__error {
    display: flex;
    align-items: center;
    width: 100%;
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  .cart-discount__error .svg-wrapper {
    flex-shrink: 0;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    margin-inline: var(--margin-3xs) var(--margin-xs);
  }

  .cart-discount__error-text {
    margin-block-start: var(--margin-3xs);
  }

  .cart-discount__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-discount__summary:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .cart-discount__label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
    font-size: var(--font-size--2xs);
    font-weight: 500;
  }

  @media screen and (min-width: 750px) {
    .cart-summary--extend {
      height: 100%;
    }
  }

/* ═══════════════════════════════════════════════════════════════════════
   AB HIER: DIE EIGENEN REGELN.

   Sie stehen am ENDE und nicht am Anfang, und das ist keine Kosmetik: Bei
   gleicher Spezifitaet gewinnt in CSS die spaetere Regel. Oben notiert wurden
   sie vom Theme ueberschrieben — "Gesamt" blieb sichtbar, obwohl es verborgen
   sein sollte, und die grossen Abstaende zwischen den Posten kamen zurueck.
   (24.08.2026)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Bestellübersicht ─────────────────────────────────────────────────
   Eine Rechnung, keine Aufzählung: die Posten leise, der Endbetrag als
   einziges Fettes. Ohne eigene Überschrift — an dieser Stelle der Schublade
   kann nichts anderes stehen als die Rechnung, und ein Wort, das nur benennt,
   was ohnehin zu sehen ist, kostet nur Höhe. (24.08.2026)

   DIESELBE SCHRIFT FÜR ALLE POSTEN. Zwischensumme und Rabatt kommen aus dem
   Theme, die Versandzeile von uns — mit verschiedenen Klassen und dadurch
   sichtbar verschiedenen Graden. Hier werden sie angeglichen, statt eine
   zweite Zeilenart daneben zu stellen. */
.cart-totals__original-label,
.cart-discounts__label,
.cart-uebersicht__wort {
  font-size: 13.5px; font-weight: 400; color: var(--3idee-muted);
}
.cart-totals__original-value,
.cart-discounts__value,
.cart-uebersicht__wert {
  font-size: 13.5px; font-weight: 400; color: var(--3idee-ink);
}
.cart-uebersicht__zeile {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
}

/* ── EIN ABSTAND FÜR ALLE POSTEN ──────────────────────────────────────

   Die Posten kamen aus drei Behältern des Themes, jeder mit eigenem Abstand:
   die Zwischensumme aus dem Rabattblock, die Versandzeile von uns, der
   Endbetrag aus dem Summenblock — dazwischen jeweils --gap-xl. Das riss die
   Rechnung in drei Gruppen, die nichts miteinander zu tun zu haben schienen.

   Eine Rechnung ist eine Liste: gleiche Zeilen, gleicher Abstand. Getrennt
   wird nur einmal, und zwar vor dem Knopf — dort hört das Aufzählen auf und
   die Entscheidung fängt an. (24.08.2026) */
.cart-totals { gap: 0; }
.cart-totals__original-container { gap: 0; }
.cart-totals__container { row-gap: 0; }
.cart-totals__item,
.cart-uebersicht__zeile { padding: 3px 0; }

/* Notiz und Gutscheinfeld sind keine Posten — sie behalten ihren Abstand.
   Mit einer Stufe mehr Spezifitaet, weil die Theme-Regel dafuer weiter unten
   noch einmal kommt. */
.cart-totals .cart-actions { margin-block: 12px; }
.cart-uebersicht__wort { color: var(--3idee-muted); }
.cart-uebersicht__wert { color: var(--3idee-ink); white-space: nowrap; }
/* Kostenloser Versand ist eine gute Nachricht und darf so aussehen — in
   derselben Farbe, die im Shop überall "erledigt, passt, auf Lager" bedeutet
   (--3idee-success). Sie stand hier zuerst als eigener Hex-Wert und wäre damit
   bei der nächsten Palettenänderung als einzige stehen geblieben. */
.cart-uebersicht__wert--frei { color: var(--3idee-success); font-weight: 700; }
.cart-uebersicht__wert--leise { color: var(--3idee-muted); font-size: 12.5px; }

/* Die Zahlungssymbole sitzen dicht unter dem Knopf und bleiben klein: Sie
   sind eine Auskunft, keine Auszeichnung.

   EINE REIHE, kein Umbruch. Acht Symbole in zwei Reihen sehen aus wie ein
   Siegelblock; nebeneinander liest man sie in einem Blick. Damit sie in die
   schmale Schublade passen, sind sie auf 15 Pixel Hoehe gesetzt und duerfen
   im Notfall schrumpfen (min-width: 0), statt umzubrechen. (24.08.2026) */
.cart-uebersicht__zahlarten { margin-top: 10px; }
/* NICHT SCHRUMPFEN LASSEN, NICHT AUF DER GRUNDLINIE SITZEN.

   Die Symbole wirkten unten angeschnitten — beim Apple-Pay-Zeichen fehlte die
   schwarze Randlinie. Zwei Ursachen, beide behoben: Ein SVG im Textfluss sitzt
   auf der Grundlinie und laesst darunter Platz fuer Unterlaengen, was bei einer
   festen Hoehe die unterste Pixelreihe abschneidet (deshalb display:block).
   Und in einer Reihe ohne Umbruch schrumpft Flex die Elemente, sobald es eng
   wird — dann wird das Bild gestaucht statt kleiner (deshalb flex 0 0 auto).
   (24.08.2026) */
.cart-uebersicht__zahlarten .payment-icons__list {
  flex-wrap: nowrap;
  gap: 5px;
  overflow: visible;
}
.cart-uebersicht__zahlarten .payment-icons__item { flex: 0 0 auto; }
.cart-uebersicht__zahlarten .payment-icons__item svg,
.cart-uebersicht__zahlarten .payment-icons__item img {
  display: block;
  height: 14px; width: auto;
}

/* Der Knopf wird abgesetzt, nicht weggeschoben — durch Abstand allein. Eine
   Haarlinie stand kurz hier und war eine zu viel: Der Knopf ist dunkel und
   nimmt die ganze Breite, er braucht keinen Strich, um sich vom Text darueber
   zu unterscheiden. Die Schublade legt zwischen Summe und Knopf sonst noch
   einmal --gap-xl darauf — zusammen war das eine Handbreit Leere. */
.cart-drawer__summary { gap: 0; }
.cart__ctas { margin-block-start: 14px; }

/* Der Endbetrag steht wieder in der Liste — als einzige Zeile in Fett, mit
   etwas Luft darueber, damit er die Posten abschliesst und nicht zwischen
   ihnen steht. Der Zusatz zur Beschriftung bleibt klein und leise: Er ist eine
   Bedingung, keine zweite Zahl. */
/* OHNE STRICH: Die Fettung trennt schon, ein Strich waere der zweite Trenner
   fuer dieselbe Sache — in einer Uebersicht aus vier Zeilen einer zu viel. */
.cart-totals__total {
  margin-top: 8px;
  align-items: baseline;
}
.cart-uebersicht__gesamt-zusatz {
  display: block;
  font-size: 11px; font-weight: 400; line-height: 1.3;
  color: var(--3idee-muted);
  max-width: 24ch;
}


  .cart-actions {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-block: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    padding-block: 0;
    margin-block-start: var(--margin-3xs);
  }

  .cart-actions__divider {
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  }
/* END_SNIPPET:cart-summary */

/* START_SNIPPET:chat-drawer (INDEX:176) */
/* Pin the chat's mobile/desktop boundary so the theme and the chat agree
     on where standalone mode kicks in. Must stay in sync with the @media
     query below — @shopify/storefront-components reads this value once at
     init and uses it to decide when to force standalone mode. */
  shopify-chat {
    --shopify-chat-breakpoint: 768px;
  }

  shopify-chat[mode='managed'] {
    position: static;
    height: 100%;
  }

  .theme-drawer__dialog:has(shopify-chat[mode='standalone'][open]) {
    z-index: calc(var(--layer-menu-drawer) + 1);
  }

  /* Keep the panel rendered while closed so <shopify-chat>'s position-fixed
     "Ask anything" launcher stays visible. */
  .theme-drawer__dialog.chat-drawer:has(shopify-chat:defined) {
    display: flex;
  }
/* END_SNIPPET:chat-drawer */

/* START_SNIPPET:collection-card (INDEX:178) */
.collection-card {
    --fixed-card-height: var(--height-small);

    width: 100%;
    position: relative;
    height: 100%;
    flex: 1 1 var(--card-width-small);
  }

  .collection-card > svg {
    height: 100%;
    width: 100%;
    aspect-ratio: var(--ratio);
  }

  .collection-card--image-bg .collection-card__inner {
    height: 100%;
  }

  .collection-card__link {
    position: absolute;
    inset: 0;

    /* allows focus outline to have radius in supported browsers */
    border-radius: var(--border-radius);
  }

  .collection-card__inner {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: var(--layer-flat);
    pointer-events: none;
    gap: var(--gap);

    a,
    button {
      pointer-events: auto;
    }
  }

  /* allow all blocks to be selectable in editor preview */
  .shopify-design-mode .collection-card__content * {
    pointer-events: auto;
  }

  .collection-card__content {
    --flex-wrap: wrap;

    display: flex;
    position: relative;
    height: 100%;
    width: 100%;
    max-width: 100%;
    gap: var(--gap);
  }

  /* Nested image block rules */

  .collection-card.collection-card--image-bg {
    aspect-ratio: var(--ratio);
  }

  .collection-card.collection-card--image-bg .collection-card__content {
    padding: var(--padding-lg);
  }

  .collection-card--image-height-fixed {
    height: 100%;
  }

  /* Bento layout rules */
  .collection-card--image-height-fixed .collection-card__image {
    height: var(--fixed-card-height);
    width: 100%;
  }

  .collection-card--image-height-fixed.collection-card--image-bg {
    height: var(--fixed-card-height);
    aspect-ratio: unset;
  }

  .collection-card__image .resource-image__image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    max-width: 100%;
  }

  .collection-card--image-bg .collection-card__image {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .collection-card__image svg {
    height: 100%;
    width: 100%;
  }

  /* Editorial layout */
  .resource-list:not(.hidden--desktop) .collection-card--flexible-aspect-ratio {
    .collection-card__image {
      aspect-ratio: 99;
      height: 100%;
    }

    .collection-card__inner {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .collection-card__content {
      flex-shrink: 0;
    }

    &:not(.collection-card--image-bg) .collection-card__content {
      height: auto;
    }

    &.collection-card.collection-card--image-bg,
    &.collection-card .placeholder-svg {
      aspect-ratio: 99;
    }
  }
/* END_SNIPPET:collection-card */

/* START_SNIPPET:divider (INDEX:181) */
.divider {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: var(--divider-justify-content);
  }

  .divider__line {
    border-bottom: var(--divider-border-thickness) solid var(--color-border);
    border-right: var(--divider-border-thickness) solid var(--color-border);
    border-radius: calc(var(--style-border-radius-sm) * var(--divider-border-rounded));
    flex-basis: var(--divider-flex-basis);
    min-height: var(--divider-flex-basis);
  }
/* END_SNIPPET:divider */

/* START_SNIPPET:drawer-verstaerkung (INDEX:182) */
/* ── Tischverstärkung ─────────────────────────────────────────────────
   Dieselbe Zeile wie beim Zubehör (.dzb) — es ist dieselbe Sache: ein
   Vorschlag mit Bild, Preis und einem Knopf. Verschiedene Optiken für
   verschiedene Anlässe wären zwei Bausteine für eine Aufgabe.

   Dazu kommt nur das Aufklappbare. Es sitzt UNTER der Zeile und nicht daneben:
   Was darin steht, sind vier Fälle mit Materialnamen — das braucht die volle
   Breite, kein Fenster. Ein Fenster über einer offenen Schublade wäre
   ausserdem eine Ebene zu viel. */
/* Der eigene Kasten der Verstärkung ist entfallen: Seit dem 24.08.2026 trägt
   JEDER Vorschlag seine Karte (.dzb__karte), und zwei Rahmen ineinander wären
   einer zu viel. Was die Verstärkung vom Zubehör unterscheidet, sagt jetzt
   ihre Überschrift — nicht ein zweiter Rahmen. */

/* Das (i) am Titel: dasselbe Zeichen wie in der Prüfzone, nur eine Spur
   kleiner — hier steht es neben Fließtext und nicht neben einer Marke.

   Es liegt in einer eigenen Reihe mit dem Titel: Der Titel darf schrumpfen und
   kürzen (min-width: 0 erlaubt das erst), das Zeichen nicht. */
.dzb__namezeile { display: flex; align-items: flex-start; gap: 6px; }
.dzb__namezeile .dzb__name { flex: 1 1 auto; min-width: 0; }
.dzb__i {
  flex: 0 0 auto;
  width: 14px; height: 14px;
  font-size: 9px;
  position: relative; top: 1px;
}
.dzb__mehr-inhalt {
  padding: 2px 0 4px;
  font-size: 12px; line-height: 1.45; color: var(--3idee-muted);
}
.dzb__mehr-inhalt[hidden] { display: none; }
.dzb__mehr-inhalt p { margin: 0 0 7px; }
.dzb__mehr-inhalt p:last-child { margin-bottom: 0; }
.dzb__mehr-inhalt ul { margin: 0 0 7px; padding-inline-start: 17px; }
.dzb__mehr-inhalt li { margin-bottom: 3px; }
/* EIN SCHRIFTSCHNITT FUER DEN GANZEN ABSATZ.

   Die Produktbeschreibung bringt ihre eigene Auszeichnung mit, und die ist
   gewachsen: einzelne Woerter fett, teils als <b>, teils als <strong>, mitten
   im Satz. Auf der Produktseite faellt das kaum auf, in einer Spalte von 400
   Pixeln zerfaellt der Text damit optisch in Fetzen.

   Hier zaehlt der Inhalt, nicht die Betonung — also eine Staerke fuer alles.
   Die Beschreibung bleibt unangetastet; sie sieht auf ihrer eigenen Seite
   weiterhin aus wie gepflegt. (24.08.2026) */
.dzb__mehr-inhalt b,
.dzb__mehr-inhalt strong,
.dzb__mehr-inhalt em,
.dzb__mehr-inhalt span {
  font-weight: inherit; font-style: inherit; color: inherit;
  font-size: inherit; letter-spacing: inherit;
}
/* END_SNIPPET:drawer-verstaerkung */

/* START_SNIPPET:drawer-zubehoer (INDEX:183) */
/* ── Vorschläge in der Schublade ──────────────────────────────────────
   Die Zeile ist absichtlich die ruhigere Schwester der Warenkorbzeile:
   dieselbe Ordnung (Bild, Text, Handlung), kleinere Maße, keine Fläche.

   KLEINER ALS DIE WARENKORBZEILEN, NICHT GLEICH GROSS (24.08.2026). Zuerst
   trug sie deren Maße — 44er Bild, 13,5 Punkt, halbfett. Auf einem großen
   Bildschirm fällt das nicht auf, auf einem Notebook und am Handy schon: Der
   Vorschlagsteil nahm die halbe Schublade, und die gekauften Artikel, um die
   es eigentlich geht, standen auf zweieinhalb Zeilen. Ein Vorschlag darf nicht
   so laut sein wie eine Entscheidung.

   Der seitliche Abstand kommt aus der Schublade selbst
   (--cart-drawer-padding) und ist nicht nachgemessen. */
/* ── JEDER VORSCHLAG IST EINE KARTE (24.08.2026) ──────────────────────

   Vorher: Haarlinien zwischen den Blöcken, die Verstärkung in einem Kasten,
   das Zubehör als nackte Zeilen. Der Bereich las sich als Fortsetzung der
   Artikelliste — man sah nicht, wo das Gekaufte aufhört und der Vorschlag
   anfängt.

   Eine Karte trennt besser als jede Linie, und sie trennt jeden Vorschlag
   auch voneinander: Was in einem eigenen Rahmen steht, ist erkennbar ein
   Angebot und kein Posten. Die Linien sind deshalb ersatzlos weg — zwei
   Trenner für dieselbe Sache wären einer zu viel. */
/* ── Die Ueberschrift des ganzen Bereichs ─────────────────────────────
   Sie steht in beiden Lagen: in der Seitenspalte oben, in der schmalen
   Ansicht ueber den Karten. Fett und in Textgroesse — die beiden
   Zwischentitel darunter sind dagegen klein und in Versalien. So ist die
   Rangfolge auf einen Blick da: EIN Bereich, ZWEI Sorten Vorschlag. */
.dzb-gruppe__titel {
  margin: 0 0 8px;
  padding-inline: var(--cart-drawer-padding);
  font-size: 14px; font-weight: 700; color: var(--3idee-ink);
}

/* Der Uebergang von den Artikeln zu den Vorschlaegen. Etwas Luft und eine
   Haarlinie ueber der Ueberschrift — nicht zwischen den Karten, wo sie mit
   deren Raendern konkurrieren wuerde. */
.dzb-inline { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--3idee-hairline); }

/* KEIN ZWEITER INNENABSTAND (24.08.2026).

   Seit die Vorschlaege in der rollenden Artikelflaeche liegen, bringt deren
   Behaelter den seitlichen Abstand schon mit. Die Bloecke legten ihren eigenen
   obendrauf — dadurch standen Ueberschrift und Karten weiter rechts als
   "Passung pruefen" und das Suchfeld darueber. In der Seitenspalte bleibt der
   Abstand noetig, dort gibt es keinen Behaelter, der ihn stellt. */
.dzb-inline .dzb,
.dzb-inline .dzb-gruppe__titel { padding-inline: 0; }

/* Steht nichts zum Vorschlagen bereit, verschwindet auch die Ueberschrift —
   sonst kuendigt sie einen leeren Bereich an. */
.dzb-inline:not(:has(.dzb)) { display: none; }

.dzb {
  padding: 8px var(--cart-drawer-padding) 0;
}

.dzb__karte {
  border: 1px solid var(--3idee-hairline);
  border-radius: var(--3idee-radius-gross);
  background: var(--color-background);
  padding: 8px 11px;
  margin-bottom: 8px;
}
.dzb__titel {
  margin: 0 0 4px;
  font-size: 10px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--3idee-muted);
}
.dzb__zeile {
  display: flex; align-items: center; gap: 10px;
}
.dzb__bild {
  flex: 0 0 auto; width: 34px; height: 34px;
  border-radius: var(--3idee-radius-klein);
  background: var(--3idee-surface-soft, #f7f7f5);
  overflow: hidden; display: grid; place-items: center;
}
.dzb__bild img { width: 100%; height: 100%; object-fit: contain; }
.dzb__txt { flex: 1 1 auto; min-width: 0; }
.dzb__name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12.5px; line-height: 1.3; font-weight: 400;
  color: var(--3idee-ink);
}
.dzb__preis {
  display: block; margin-top: 1px;
  font-size: 12px; font-weight: 600; color: var(--3idee-ink);
}
.dzb__legen {
  flex: 0 0 auto;
  min-height: 28px; padding: 0 11px;
  border: 1px solid var(--3idee-ink); border-radius: var(--3idee-radius-mittel);
  background: none; font: inherit; font-size: 12px; font-weight: 600;
  color: var(--3idee-ink); cursor: pointer;
  display: inline-flex; align-items: center; white-space: nowrap;
}
.dzb__legen:hover { background: var(--3idee-surface-soft, #f7f7f5); }
.dzb__legen[disabled] { opacity: .5; cursor: default; }

/* ── Die Seitenspalte ─────────────────────────────────────────────────

   AB 1200 PIXEL WIRD DIE SCHUBLADE BREITER UND BEKOMMT EINE ZWEITE SPALTE.

   Der Grund ist nicht Platzmangel, sondern Trennung: Der Warenkorb hat in
   diesem Shop eine beratende Aufgabe — Passung prüfen, Modell nennen, Antwort
   lesen. Vorschläge, die sich in dieselbe Spalte drängen, machen aus der
   Beratung eine Werbefläche. Nebeneinander behält jeder Teil seine Aufgabe:
   links, was man noch gebrauchen kann, rechts, was man gewählt und geprüft hat.

   Darunter (Handy, Notebook) bleibt es bei der einen Spalte: Dort ist eine
   zweite nicht zu haben, und der Vorschlag rückt wieder unter die Artikel.

   Die Breite kommt über --theme-drawer-width, die Variable des Themes für
   genau diesen Zweck. Damit stimmt auch die Schiebe-Bewegung beim Öffnen: Sie
   rechnet mit derselben Zahl. */
.dzb-spalte { display: none; }

.dzb-inline { display: block; }

@media screen and (min-width: 1200px) {
  /* Nur wenn es auch etwas zu zeigen gibt — sonst bleibt die Schublade schmal.
     :has() fragt genau das ab, ohne dass Liquid eine Klasse durchreichen muss. */
  /* SCHMAL GENUG, DASS DER WARENKORB DIE HAUPTSACHE BLEIBT.

     Zuerst waren es 17rem, und die Schublade wurde 672 Pixel breit — zwei
     fast gleich starke Flächen nebeneinander, und damit die Frage, welche
     davon die Seite ist. Sie ist es nicht: Der Warenkorb trägt die
     Entscheidung und die Beratung, die Spalte trägt Vorschläge. 13rem gegen
     25rem sind ungefähr eins zu zwei — genug, um die Ware zu zeigen, zu wenig,
     um mit ihr zu konkurrieren. (24.08.2026) */
  #cart-drawer:has(.dzb-spalte .dzb) .theme-drawer__dialog {
    --theme-drawer-width: calc(var(--sidebar-width) + 13rem);
  }

  #cart-drawer:has(.dzb-spalte .dzb) .cart-drawer__inner {
    display: grid;
    grid-template-columns: 13rem 1fr;
    grid-template-rows: auto 1fr;
  }

  /* Im Raster ist die Kopfzeile bereits eine eigene Reihe. Die Hoehenrechnung
     des Inhalts zieht sie aber noch einmal ab (sie stammt aus der einspaltigen
     Lage, wo Kopf und Inhalt uebereinander in derselben Spalte liegen) — das
     ergaebe unten eine Luecke von genau einer Kopfzeilenhoehe. */
  #cart-drawer:has(.dzb-spalte .dzb) .cart-drawer__content { height: 100%; }
  #cart-drawer:has(.dzb-spalte .dzb) .cart-drawer__inner > .cart-items-component { min-height: 0; height: 100%; }

  /* Die Spalte reicht über die ganze Höhe, neben Kopf UND Inhalt — wie im
     Vorbild. Deshalb zwei Zeilen im Raster und hier beide belegt. */
  .dzb-spalte {
    /* Die Spalte rechnet mit ihrem eigenen, kleineren Innenabstand: Der der
       Schublade ist für eine 400 Pixel breite Spalte gemacht und fräße hier ein
       Viertel der Breite. */
    --cart-drawer-padding: 12px;

    display: block;
    grid-row: 1 / -1;
    align-self: stretch;
    height: 100%;
    overflow-y: auto;
    padding: var(--cart-drawer-padding) 0;
    border-inline-end: 1px solid var(--3idee-hairline);
    background: var(--3idee-surface-soft, #f7f7f5);
  }

  .dzb-spalte .dzb-gruppe__titel { margin-bottom: 4px; font-size: 13px; }

  /* In der schmalen Spalte wandert der Knopf unter den Text: Bild, Name, Preis
     und ein Knopf nebeneinander wären auf 270 Pixeln alle vier zu schmal. */
  .dzb-spalte .dzb { padding-top: 8px; }
  .dzb-spalte .dzb__zeile { flex-wrap: wrap; }
  .dzb-spalte .dzb__legen { flex: 1 0 100%; justify-content: center; margin-top: 7px; }
  .dzb-spalte .dzb__name { -webkit-line-clamp: 3; font-size: 12px; }
  .dzb-spalte .dzb__bild { width: 30px; height: 30px; }
  .dzb-spalte .dzb__zeile { gap: 8px; }
  .dzb-spalte .dzb__karte { padding: 8px 9px; }

  .dzb-inline { display: none; }
}
/* END_SNIPPET:drawer-zubehoer */

/* START_SNIPPET:editorial-blog-grid (INDEX:184) */
.editorial-blog__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    .shopify-block {
      height: 100%;
    }
  }

  .editorial-blog__spacer {
    aspect-ratio: 1;
  }

  @media screen and (max-width: 749px) {
    .editorial-blog__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-blog__spacer {
      display: none;
    }

    /* Mobile layout - also horizontally mirrored from collection grid */
    .editorial-blog__item-0 {
      width: 66%;
      align-self: flex-end; /* Originally flex-start, now flex-end */
    }

    .editorial-blog__item-1 {
      width: 83%;
      align-self: flex-start; /* Originally flex-end, now flex-start */
    }

    .editorial-blog__item-2 {
      width: 83%;
      align-self: flex-end; /* Originally flex-start, now flex-end */
    }

    .editorial-blog__item-3 {
      width: 100%;
      align-self: center; /* Stays centered */
    }
  }
/* END_SNIPPET:editorial-blog-grid */

/* START_SNIPPET:editorial-collection-grid (INDEX:185) */
.editorial-collection__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    .resource-list__item,
    .collection-card {
      height: 100%;
    }
  }

  .editorial-collection__spacer {
    aspect-ratio: 1;
  }

  @media screen and (max-width: 749px) {
    .editorial-collection__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-collection__spacer {
      display: none;
    }

    .editorial-collection__item-0 {
      width: 66%;
      align-self: flex-start;
      aspect-ratio: 4 / 5;
    }

    .editorial-collection__item-1 {
      width: 83%;
      align-self: flex-end;
      aspect-ratio: 5 / 5;
    }

    .editorial-collection__item-2 {
      width: 83%;
      align-self: flex-start;
      aspect-ratio: 8 / 6;
    }

    .editorial-collection__item-3 {
      width: 100%;
      align-self: center;
      aspect-ratio: 8 / 6;
    }
  }
/* END_SNIPPET:editorial-collection-grid */

/* START_SNIPPET:editorial-product-grid (INDEX:186) */
.editorial-product__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    /* Make the aspect ratio super high on width, then increase the height of
     * slideshow containers until they fill all the available space */
    .card-gallery {
      /* stylelint-disable-next-line declaration-no-important */
      --gallery-aspect-ratio: 99 !important;
    }

    .card-gallery,
    slideshow-component,
    slideshow-container,
    slideshow-slides,
    .product-media__image {
      height: 100%;
    }
  }

  .editorial-product__spacer {
    aspect-ratio: 1;
  }

  @media screen and (max-width: 749px) {
    .editorial-product__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-product__spacer {
      display: none;
    }

    .editorial-product__item-0 {
      width: 83%;
      align-self: flex-start;
      aspect-ratio: 7 / 6;
    }

    .editorial-product__item-1 {
      width: 83%;
      align-self: flex-end;
      aspect-ratio: 4 / 5;
    }

    .editorial-product__item-2 {
      width: 66%;
      align-self: flex-start;
      aspect-ratio: 5 / 5;
    }

    .editorial-product__item-3 {
      width: 100%;
      aspect-ratio: 8 / 6;
    }
  }
/* END_SNIPPET:editorial-product-grid */

/* START_SNIPPET:engine-status (INDEX:187) */
/* ── Die Störungsmeldung ──────────────────────────────────────────────
   Eine Gestalt für alle Stellen: Suchfeld, Halterungsauswahl, Prüfzone,
   Setup-Fenster. Der WhatsApp-Knopf ist Zeichen für Zeichen der aus dem
   Finder (.fn-required-info-wa) — Unterschiede zwischen zwei Knöpfen mit
   derselben Aufgabe sind ein Fehler, kein Stil. */
.eng-aus {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 12px 0;
}
.eng-aus__txt {
  margin: 0;
  font-size: 13.5px; line-height: 1.5;
  color: var(--3idee-muted);
  max-width: 46ch;
}
.eng-aus__wa {
  display: inline-flex; align-items: center; justify-content: center;
  background: #25D366; color: #fff;
  padding: 10px 14px;
  border-radius: var(--3idee-radius-mittel);
  font-size: 14px; font-weight: 700; line-height: 1;
  text-decoration: none; white-space: nowrap;
}
.eng-aus__wa:hover { background: #1fb959; color: #fff; }
/* END_SNIPPET:engine-status */

/* START_SNIPPET:experten-check (INDEX:188) */
/* Weisse Karte auf abgedunkeltem Grund. Farben aus den Theme-Einstellungen
   (Kontrast- und Akzentfarbe der Palette), damit sie zum Rest des Shops
   passen — der Dialog steht auf zwei Seiten mit unterschiedlichen Heroes. */
.fh2-x {
  --ec-ink: var(--fh-ink, #1F2230);
  --ec-orange: var(--fh-orange, var(--3idee-ink));
  border: 0; padding: 0; background: none; margin: auto;
  width: min(960px, calc(100vw - 48px));
}
.fh2-x::backdrop { background: rgb(10 11 15 / .58); }
.fh2-x__band {
  position: relative; background: #fff; color: var(--ec-ink);
  border-radius: var(--3idee-radius-mittel); padding: 44px 44px 38px;
  max-height: calc(100vh - 48px); overflow: auto;
  box-shadow: 0 28px 90px rgb(0 0 0 / .28);
}
.fh2-x__close {
  position: absolute; top: 14px; right: 16px; width: 36px; height: 36px;
  border: 1px solid #d7d7da; border-radius: var(--3idee-radius-klein);
  background: #fff; color: #2f3139; font-size: 22px; line-height: 1; cursor: pointer;
}
.fh2-x__close:hover { background: rgb(0 0 0 / .05); }

/* Kennzeichnung mit Punkt: der Punkt traegt einen weichen Hof, damit das
   Orange als Signal wirkt und nicht als Aufzaehlungszeichen. */
/* Kleinueberschrift in Anthrazit, nicht in Orange: Der Kodex erlaubt eine
   orange Kleinueberschrift ausdruecklich nur AUF DUNKLEM GRUND. Das Popup ist
   weiss — hier truege Orange den Text, statt zu markieren. Der Punkt davor
   bleibt orange, das ist der erlaubte Fall. */
.fh2-x__kicker {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--ec-ink); font-size: 13px; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase; margin-bottom: 13px;
}
.fh2-x__kicker::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ec-orange); box-shadow: 0 0 0 5px rgb(var(--color-foreground-rgb, 31 34 48) / .10);
}
.fh2-x__heading {
  margin: 0; max-width: 760px; font-size: 38px; line-height: 1.04;
  letter-spacing: -.035em; font-weight: 760; color: var(--ec-ink);
}
.fh2-x__intro { max-width: 760px; margin: 13px 0 0; font-size: 15.5px; line-height: 1.55; }
.fh2-x__intro { color: color-mix(in srgb, var(--ec-ink) 68%, #fff); }
.fh2-x__intro p { margin: 0; }

.fh2-x__rule { height: 1px; background: #e8e8eb; margin: 27px 0 22px; }
.fh2-x__label {
  font-size: 12px; color: #8a8c94; letter-spacing: .1em; font-weight: 800;
  text-transform: uppercase; margin-bottom: 15px;
}
.fh2-x__steps { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; }
.fh2-x__step { display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: start; }
/* Nummernkreise in Graublau statt Anthrazitblau: Das Anthrazit gehoert den
   Kaufknoepfen. Hier zaehlen die Kreise nur Schritte durch — sie fordern zu
   nichts auf und brauchen dessen Gewicht nicht. Gleiche Farbe wie der
   Experten Check auf der Produktseite und im Finder. */
.fh2-x__num {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--3idee-muted); color: #fff;
  display: grid; place-items: center; font-size: 12px; font-weight: 800;
}
.fh2-x__step h3 { margin: 1px 0 5px; font-size: 15px; line-height: 1.25; color: var(--ec-ink); }
.fh2-x__step p { margin: 0; color: #686b76; font-size: 13px; line-height: 1.42; }

.fh2-x__note {
  margin-top: 26px; display: grid; grid-template-columns: 36px 1fr;
  gap: 12px; align-items: center;
  padding: 13px 15px; background: #f7f7f8; border: 1px solid #ececef; border-radius: var(--3idee-radius-mittel);
}
.fh2-x__note-icon {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--3idee-muted); color: #fff;
  display: grid; place-items: center; font-size: 18px; font-weight: 700;
}
.fh2-x__note strong { display: block; font-size: 13.5px; margin-bottom: 2px; color: var(--ec-ink); }
.fh2-x__note-text { font-size: 13px; line-height: 1.4; color: #686b76; }
.fh2-x__note-text p { margin: 0; }
/* Hervorhebungen in der Akzentfarbe — so laesst sich "4 Monitore" im Editor
   ueber Fettung betonen, ohne dass hier eine Zahl fest steht. */
.fh2-x__note-text b, .fh2-x__note-text strong { color: var(--ec-ink); font-weight: 700; }

.fh2-x__result {
  margin-top: 26px; background: var(--3idee-muted); color: #fff; border-radius: var(--3idee-radius-mittel);
  padding: 20px 22px; display: grid; grid-template-columns: 1.2fr 1fr;
  gap: 26px; align-items: center;
}
.fh2-x__result-copy small {
  display: block; color: #ffffff; text-transform: uppercase; letter-spacing: .08em;
  font-size: 11px; font-weight: 800; margin-bottom: 6px;
}
.fh2-x__result-copy strong { display: block; font-size: 16px; line-height: 1.35; }
.fh2-x__checks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; font-size: 12.5px; color: #ededf1; }
.fh2-x__check { display: flex; gap: 7px; align-items: baseline; }
.fh2-x__check b { color: #ffffff; font-size: 15px; }

.fh2-x__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 26px; }
.fh2-x__stat {
  background: #f7f7f8; border: 1px solid #eeeeef; border-radius: var(--3idee-radius-mittel);
  padding: 18px 19px 16px; min-height: 94px;
}
.fh2-x__stat strong {
  display: block; color: var(--ec-ink); font-size: 27px; line-height: 1;
  letter-spacing: -.02em; margin-bottom: 8px;
}
.fh2-x__stat span { display: block; color: #535660; font-size: 13px; line-height: 1.35; }

@media screen and (max-width: 760px) {
  .fh2-x { width: calc(100vw - 28px); }
  .fh2-x__band { padding: 38px 22px 24px; max-height: calc(100vh - 28px); }
  .fh2-x__heading { font-size: 30px; }
  .fh2-x__stats,
  .fh2-x__steps,
  .fh2-x__result { grid-template-columns: 1fr; }
  .fh2-x__stat { min-height: 0; }
  .fh2-x__result { gap: 16px; }
  .fh2-x__checks { grid-template-columns: 1fr; }
}
/* END_SNIPPET:experten-check */

/* START_SNIPPET:fenster (INDEX:189) */
/* ── Die Gestalt ──────────────────────────────────────────────────────
   Feiner Rahmen statt Schatten, große Rundung, großzügiger Innenabstand.
   Der Grund dahinter wird vom Theme abgedunkelt (--backdrop-opacity). */
.fnst {
  --fnst-breite: 820px;

  position: relative;
  width: calc(100% - 32px);
  max-width: var(--fnst-breite);
  padding: 30px 34px 26px;
  border: 1px solid var(--3idee-hairline);
  border-radius: var(--3idee-radius-gross);
  color: var(--3idee-body);
}

.fnst::backdrop { background: rgb(var(--backdrop-color-rgb, 31 34 48) / var(--backdrop-opacity, 0.42)); }

/* Das Schließkreuz sitzt in der Ecke. Der erste Absatz eines Fensters muss ihm
   ausweichen — dafür gibt es die Klasse unten, weil nur der Inhalt weiß,
   welcher sein erster Absatz ist. */
.fnst__zu {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px;
  border: 1px solid var(--3idee-hairline);
  border-radius: var(--3idee-radius-klein);
  background: var(--color-background); color: var(--3idee-ink);
  font-size: 17px; line-height: 1; cursor: pointer;
}
.fnst__frei { padding-inline-end: 44px; }

/* ── Auf dem Handy ein Blatt von unten ───────────────────────────────
   Ausgelöst wird ein Fenster dort, wo der Daumen ist — unten. Ein Fenster,
   das dann oben in der Mitte erscheint, kommt aus der falschen Richtung, und
   bei langem Inhalt beginnt es außerhalb des Bildes.

   Nicht ganz an den Rand: Ein schmaler Streifen ringsum macht aus einer Fläche
   ein Fenster — man sieht, dass etwas DARÜBER liegt. */
@media (max-width: 620px) {
  .fnst {
    margin: 0 auto 0 0;
    position: fixed;
    inset: auto 10px 10px 10px;
    width: auto;
    max-width: none;
    max-height: 88svh;
    overflow-y: auto;
    padding: 24px 20px;
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }
}
/* END_SNIPPET:fenster */

/* START_SNIPPET:filter-remove-buttons (INDEX:190) */
/* Facets - Remove buttons */
  .facets-remove {
    --variant-picker-swatch-width: 20px;
    --variant-picker-swatch-height: 20px;

    display: none;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    padding: 0 var(--drawer-padding);
    margin: 0;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 16px;
      --variant-picker-swatch-height: 16px;

      gap: var(--gap-2xs);
    }
  }

  .facets-remove:has(facet-remove-component) {
    display: flex;
    margin-block-start: var(--margin-2xs);
    margin-block-end: var(--margin-md);
  }

  .facets:not(.facets--drawer) .facets-remove--mobile-and-vertical {
    @media screen and (min-width: 750px) {
      padding: 0;
    }
  }

  .facets--horizontal .facets-remove--mobile-and-vertical {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets-remove__pill {
    .svg-wrapper,
    .swatch {
      flex-shrink: 0;
    }
  }

  .facets--horizontal .facets-remove {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }
/* END_SNIPPET:filter-remove-buttons */

/* START_SNIPPET:gift-card-recipient-form-styles (INDEX:195) */
.recipient-form {
    --options-border-radius: var(--variant-picker-button-radius);
    --options-border-width: var(--variant-picker-button-border-width);

    display: flex;
    flex-direction: column;
    color: var(--color, var(--color-foreground));
    padding-bottom: var(--padding-2xl);
  }

  .recipient-form__send-to {
    padding: 0;
    margin-block-end: var(--margin-xs);
  }

  .gift-card-form-option {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-sm);
    padding: 0;
    border: none;
  }

  .gift-card-form-option__button-label {
    display: flex;
    align-items: center;
    position: relative;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-lg);
    border: var(--style-border-width) solid var(--color-variant-border);
    border-radius: var(--options-border-radius);
    border-width: var(--options-border-width);
    overflow: clip;
    justify-content: center;
    min-width: auto;
    background-color: var(--color-variant-background);
    color: var(--color-variant-text);
    transition: background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);

    &:hover {
      background-color: var(--color-variant-hover-background);
      border-color: var(--color-variant-hover-border);
      color: var(--color-variant-hover-text);
    }
  }

  .gift-card-form-option__button-label:has(:focus-visible) {
    --variant-picker-stroke-color: var(--color-foreground);

    border-color: var(--color-foreground);
    outline: var(--focus-outline-width) solid var(--color-foreground);
    outline-offset: var(--focus-outline-offset);
  }

  .gift-card-form-option__button-label:has(:checked) {
    color: var(--color-selected-variant-text);
    background-color: var(--color-selected-variant-background);
    border-color: var(--color-selected-variant-border);
    transition: background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);

    &:hover {
      background-color: var(--color-selected-variant-hover-background);
      border-color: var(--color-selected-variant-hover-border);
      color: var(--color-selected-variant-hover-text);
    }
  }

  .gift-card-form-option__button-label input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
  }

  .recipient-fields {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    transition: opacity 0.3s var(--animation-easing);
    padding-block-start: var(--padding-xl);
  }

  .recipient-fields[hidden] {
    display: none;
  }

  .field--send-on {
    display: flex;
    flex-direction: column;
  }

  .recipient-form__message {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--gap-sm);
    margin-top: var(--margin-sm);
  }

  .recipient-form-field-label {
    position: absolute;
    left: var(--padding-sm);
    bottom: var(--padding-sm);
    font-style: italic;
    color: var(--color-input-text);
  }

  .recipient-fields__textarea {
    min-height: 5.5rem;
    overflow-y: auto;

    /* Space for the character count */
    padding-bottom: calc(var(--padding-sm) * 3);
    scroll-padding-bottom: calc(var(--padding-sm) * 3);
  }

  .recipient-fields__input {
    flex-grow: 1;
    padding: var(--input-padding);
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    text-align: left;
    font-size: var(--font-paragraph--size);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);

    &:autofill {
      background-color: var(--color-input-background);
      color: var(--color-input-text);
    }

    &:is(:focus) {
      outline-color: var(--color-input-background);
    }
  }

  /* Date picker calendar icon
   * Safari doesn't show the icon and Firefox correctly applies the color from the input field.
   * Webkit browsers need the mask-image trick to use the correct icon color.
   */
  .field--send-on .recipient-fields__input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24' %3E%3Cg%3E%3Cpath d='M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-image: none;
    background-color: currentColor;
    mask-type: match-source;
  }

  /* For Webkit browsers - text cursor for input area */
  .field--send-on .recipient-fields__input::-webkit-datetime-edit {
    cursor: text;
  }

  .field--send-on .recipient-fields__input::-webkit-datetime-edit-year-field,
  .field--send-on .recipient-fields__input::-webkit-datetime-edit-month-field,
  .field--send-on .recipient-fields__input::-webkit-datetime-edit-day-field {
    /* Override the disabled color */
    color: var(--color-input-text);
  }

  /* Fallback for other browsers */
  .field--send-on .recipient-fields__input {
    cursor: text;
  }

  /* For Firefox - entire field is clickable, so show pointer */
  @supports (-moz-appearance: none) {
    .field--send-on .recipient-fields__input {
      cursor: pointer;
    }
  }
/* END_SNIPPET:gift-card-recipient-form-styles */

/* START_SNIPPET:grid-density-controls (INDEX:197) */
.column-options-wrapper {
    --icon-offset: -3px;

    display: flex;
    gap: var(--gap-sm);
    min-width: fit-content;
    justify-content: flex-end;
    height: var(--minimum-touch-target);
    align-items: center;
    margin-right: var(--icon-offset);
  }

  .column-options-wrapper:only-child {
    margin-left: auto;
  }

  .facets__form-wrapper > .column-options-wrapper:first-child {
    margin-left: auto;
  }

  .facets .column-options-wrapper {
    display: none;

    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .column-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    margin: 0;
    padding: 0;
    border: none;

    @media screen and (min-width: 750px) {
      gap: var(--gap-2xs);
    }
  }

  .column-options__option {
    display: none;
    position: relative;
  }

  .column-options__option:has(.column-picker-mobile--single),
  .column-options__option:has(.column-picker-mobile--double) {
    @media screen and (max-width: 749px) {
      display: flex;
    }
  }

  .column-options__option:has(.column-picker--default),
  .column-options__option:has(.column-picker--zoom-out) {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  /* Override base rule for grid density controls - only when visible */
  .column-options-wrapper .column-options__option:has(input[type='radio']):has(.column-picker-mobile--single),
  .column-options-wrapper .column-options__option:has(input[type='radio']):has(.column-picker-mobile--double) {
    @media screen and (max-width: 749px) {
      display: flex;
    }
  }

  .column-options-wrapper .column-options__option:has(input[type='radio']):has(.column-picker--default),
  .column-options-wrapper .column-options__option:has(input[type='radio']):has(.column-picker--zoom-out) {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .column-options__legend {
    padding: 0;
    margin: 0;
  }

  .column-options__option-input {
    /* this is a repeating pattern a bit with the variant picker buttons */

    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;
  }

  .column-picker {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-50));
    padding: var(--padding-2xs);
    border-radius: var(--style-border-radius-xs);
    transition: background-color var(--animation-speed) ease, color var(--animation-speed) ease;
  }

  .column-options__option:hover .column-picker {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .column-options__option-input:checked ~ .column-picker {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }
/* END_SNIPPET:grid-density-controls */

/* START_SNIPPET:group (INDEX:198) */
.group-block__link {
    position: absolute;
    inset: 0;
  }

  .group-block__link ~ :is(.group-block-content, .group-block__media-wrapper) {
    pointer-events: none;

    :is(a, button, input, textarea, select) {
      pointer-events: auto;
    }
  }

  /* Needs the .group-block__link ~ to be specific enough to take effect. */
  .group-block__link ~ .group-block-content--design-mode {
    pointer-events: auto;
  }
/* END_SNIPPET:group */

/* START_SNIPPET:header-actions (INDEX:199) */
.header {
    --account-offset-top: calc(
      var(--header-group-height) + (var(--header-height) * var(--transparent-header-offset-boolean))
    );

    &[data-sticky-state='active'] {
      --account-offset-top: calc(var(--header-height) - 1px);
    }
  }

  .account-button {
    /* Remove the background color from the color scheme, we want to inherit the color of the header */
    background: transparent;
  }

  .account-button__icon,
  .account-button__text {
    color: var(--color-account-icon);
    transition: color var(--header-content-transition-timing);
    -webkit-font-smoothing: antialiased;
  }

  shopify-account {
    --shopify-account-font-heading: var(--font-heading--family);
    --shopify-account-font-heading-weight: var(--font-heading--weight);
    --shopify-account-font-body: var(--font-body--family);
    --shopify-account-font-body-weight: var(--font-body--weight);
    --shopify-account-radius-base: var(--style-border-radius-popover);
    --shopify-account-radius-button: var(--style-border-radius-buttons-primary);
    --shopify-account-radius-button-small: var(--style-border-radius-buttons-primary);
    --shopify-account-radius-input: var(--style-border-radius-buttons-primary);
    --shopify-account-color-background: var(--color-background);
    --shopify-account-color-text: var(--color-foreground);
    --shopify-account-color-accent: var(--color-primary-button-background);
    --shopify-account-color-accent-text: var(--color-primary-button-text);
    --shopify-account-dialog-position-top: var(--account-offset-top);

    &:not(:defined) {
      min-width: 44px;
      height: 44px;
      display: flex;
      justify-content: center;
      align-items: center;
      /* Match the line height of the other buttons */
      line-height: normal;
    }
  }

  .account-button__fallback {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--shopify-account-color-accent, #0a142f);
  }

  .account-button--text shopify-account {
    color: inherit;
  }

  .cart-actions summary {
    padding-inline: 0;
    padding-block: var(--padding-sm);
    line-height: 1.2;
    min-height: var(--minimum-touch-target);
  }

  header-actions {
    display: flex;

    @media screen and (max-width: 749px) {
      justify-self: flex-end;
    }
  }

  @media screen and (min-width: 750px) {
    .header-actions--text {
      gap: var(--gap-xl);
    }

    .header-actions__text-style {
      font-size: var(--header-actions-font-size);
      font-family: var(--header-actions-font-family);
      font-weight: var(--header-actions-font-weight);
      text-transform: var(--header-actions-text-case);
    }
  }

  #header-component[data-menu-style='drawer'] header-actions {
    justify-self: flex-end;
  }

  .header__column--right header-actions {
    margin-inline-start: calc(var(--gap-md) * -1);
  }

  .header-actions__cart-icon {
    --cart-bubble-size: 20px;
    --cart-bubble-top: 4.5px;
    --cart-bubble-right: 2.5px;

    position: relative;
  }

  .header-actions__cart-icon .cart-bubble {
    position: absolute;
    width: var(--cart-bubble-size, 20px);
    top: var(--cart-bubble-top);
    right: var(--cart-bubble-right);
  }

  @media screen and (min-width: 750px) {
    .header-actions__cart-icon--text.header-actions__cart-icon .cart-bubble {
      position: relative;
      top: 0;
    }
  }

  .header-actions__cart-icon .cart-bubble__text {
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
  }

  .header-actions__cart-icon.header-actions__cart-icon--has-cart svg {
    /* Create donut mask where the cart bubble sits */
    mask: radial-gradient(
      calc(var(--cart-bubble-size) + 2px) at calc(100% - var(--cart-bubble-right)) var(--cart-bubble-top),
      transparent 45.45%,
      #fff 45.45%,
      #fff 100%
    );
  }

  .cart-bubble.cart-bubble--animating .cart-bubble__background {
    animation: grow var(--animation-speed) var(--animation-easing);
  }

  .cart-bubble--animating .cart-bubble__text {
    --start-y: -1em;
    --start-opacity: 1;
    /* Set initial transform state before animation starts */
    transform: translate(0, var(--start-y, -1em));
    opacity: var(--start-opacity, 1);
    animation: move-and-fade var(--animation-speed) var(--animation-easing);
  }

  cart-icon:has(.cart-bubble__text-count:empty) {
    --cart-bubble-size: 10px;
    --cart-bubble-top: 9px;
    --cart-bubble-right: 9px;

    .svg-wrapper {
      --cart-bubble-top: 4px;
      --cart-bubble-right: 4px;
    }
  }

  @media screen and (min-width: 750px) {
    cart-icon.header-actions__cart-icon--text:has(.cart-bubble__text-count:empty) {
      --cart-bubble-right: 2.5px;
    }
  }

  .header-actions__text {
    display: flex;
    align-items: center;
  }

  @media screen and (min-width: 750px) {
    .header-actions__cart-icon--text {
      display: flex;
      align-items: center;
      gap: var(--gap-xs);
    }

    .header__column--right .header-actions--text {
      margin-inline-start: 0;
    }
  }
/* END_SNIPPET:header-actions */

/* START_SNIPPET:header-drawer (INDEX:200) */
.header__icon--menu {
    position: initial;
  }

  .menu-drawer-container .header__icon--summary {
    color: var(--color-foreground);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--padding-lg);
  }

  .header__icon--summary .header-drawer-icon {
    margin: auto;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__featured-content {
    z-index: var(--layer-base);
    container-type: inline-size;
  }

  .menu-drawer__featured-content--childlist {
    z-index: var(--layer-flat);
  }

  .menu-drawer__featured-content-list {
    display: flex;
    gap: 1em;
    overflow-x: auto;
    padding-block-end: var(--padding-lg);
  }

  .menu-drawer__featured-content-list-item {
    flex: 0 0 auto;
  }

  .menu-drawer__featured-content-list-item--product {
    width: 35cqi;
  }

  .menu-drawer__featured-content-list-item--collection img.resource-card__image {
    width: 80cqi;
  }

  .menu-drawer__featured-content-list-item:first-child {
    margin-inline-start: var(--margin-xl);
  }

  .menu-drawer__featured-content-list-item:last-child {
    margin-inline-end: var(--margin-xl);
  }

  .menu-drawer__navigation {
    padding: 0;

    @media screen and (min-width: 750px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  details:not(.menu-open) .header__icon--menu .header-drawer-icon--close {
    display: none;
  }

  details.menu-open .header__icon--menu .header-drawer-icon--close {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  details.menu-open .header__icon--menu .header-drawer-icon--open {
    display: none;

    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  /* ----------------------------------------------------------------
     Farben des durchsichtigen Headers hier nicht erben

     Das mobile Menue liegt technisch im Header. Liegt der Header durchsichtig
     ueber einem Bild oder Video, faerbt er Rahmen und Schaltflaechen hell ein -
     richtig ueber dem Video, aber im aufgeklappten Menue waere das weiss auf
     weissem Grund: unsichtbare Trennlinien und unsichtbare Schaltflaechen.

     Die eigene Farbklasse des Menues deckt nur Vorder- und Hintergrund ab,
     deshalb werden Rahmen und Schaltflaechen hier zusaetzlich auf die
     Grundwerte zurueckgesetzt (siehe snippets/color-palette.liquid).
     ---------------------------------------------------------------- */
  .header[transparent] .menu-drawer {
    --color-border: var(--color-border-base);
    --color-border-rgb: var(--color-border-rgb-base);
    --color-primary-button-background: var(--color-primary-button-background-base);
    --color-primary-button-text: var(--color-primary-button-text-base);
    --color-primary-button-border: var(--color-primary-button-border-base);
  }

  .menu-drawer {
    position: fixed;
    transform: translateX(-100%);
    visibility: hidden;
    height: var(--drawer-height);
    width: var(--drawer-width);
    max-width: var(--drawer-max-width);
    z-index: var(--layer-menu-drawer);
    left: 0;
    top: 0;
    padding: 0;
    background-color: var(--color-background);
    overflow: auto;
    display: flex;
    border-right: var(--style-border-drawer);
    flex-direction: column;

    @media screen and (min-width: 750px) {
      width: 25rem;
    }
  }

  /* When opening a submenu we don't want the first-level menu to be scrollable, so we reset the overflow  */
  .menu-drawer.menu-drawer--has-submenu-opened {
    overflow: initial;
  }

  .menu-drawer__backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    backdrop-filter: brightness(0.75);
    z-index: var(--layer-overlay);
    opacity: 0;
    transition: opacity var(--drawer-animation-speed) ease;

    .menu-open & {
      opacity: 1;
    }
  }

  .menu-drawer,
  details[open] > .menu-drawer__submenu {
    transition: transform var(--drawer-animation-speed) ease, visibility var(--drawer-animation-speed) ease,
      opacity var(--drawer-animation-speed) ease;
  }

  .menu-open > .menu-drawer,
  .menu-open > .menu-drawer__submenu:not(.menu-drawer__menu--childlist) {
    transform: translateX(0);
    visibility: visible;
    opacity: 1;
    display: flex;
    flex-direction: column;
  }

  .menu-drawer__inner-container {
    position: relative;
    height: 100%;
  }

  .menu-drawer__navigation-container {
    display: grid;
    grid-template-rows: 1fr auto;
    align-content: space-between;
    overflow-y: auto;
    height: 100%;
  }

  .menu-drawer__inner-submenu {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;

    @media screen and (min-width: 750px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  .menu-drawer__nav-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .menu-drawer__menu {
    --menu-drawer-inline-padding: calc(var(--padding-sm) + 7px);

    list-style: none;
    padding-inline: var(--drawer-padding);
    margin-inline: 0;
    margin-block-start: 0;
  }

  .menu-drawer__menu--grid {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    gap: var(--padding-sm);
    padding-inline-end: var(--menu-drawer-inline-padding);
    padding-block-start: var(--padding-xs);
  }

  .menu-drawer__menu--childlist:not(.menu-drawer__menu--grid) {
    flex-grow: 1;
  }

  .menu-drawer__menu.has-submenu,
  .menu-drawer__menu--childlist:not(:has(.menu-drawer__animated-element)) {
    margin-block-end: var(--margin-xs);

    @media screen and (min-width: 750px) {
      margin-block-end: 2.5rem;
    }
  }

  .menu-drawer__list-item--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__list-item--deep:not(.menu-drawer__list-item--divider) .menu-drawer__menu {
    margin-block-start: -0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu {
    margin-block-start: -0.4rem;
  }

  .menu-drawer__menu-container--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__menu > .menu-drawer__list-item {
    display: flex;
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__list-item--deep .menu-drawer__list-item,
  .menu-drawer__list-item--flat .menu-drawer__list-item {
    min-height: auto;
  }

  .menu-drawer__menu .menu-drawer__list-item--flat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-block-end: var(--margin-md);
  }

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat {
    margin-block-end: var(--margin-sm);

    @media screen and (min-width: 750px) {
      margin-block-end: var(--margin-lg);
    }
  }

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat.menu-drawer__list-item--divider {
    margin-block-end: 0;
  }

  .menu-drawer__list-item--flat .menu-drawer__menu--childlist {
    width: 100%;
    padding-inline: 0;
  }

  .menu-drawer-container[open] .menu-drawer__animated-element {
    animation: menu-drawer-nav-open var(--drawer-animation-speed) ease-in-out;
    animation-delay: calc(var(--drawer-animation-speed) + (var(--menu-drawer-animation-index) - 1) * 0.1s);
    animation-fill-mode: backwards;
  }

  .menu-drawer__menu accordion-custom .details-content--no-animation {
    animation: none;
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    transition: none;
  }

  .menu-drawer__menu details,
  .menu-drawer__menu-item,
  .menu-drawer__menu accordion-custom {
    width: 100%;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item:not(.menu-drawer__menu-item--child) {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__menu-item--mainlist {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: var(--menu-top-level-font-weight);
    font-size: var(--menu-top-level-font-size);
    line-height: var(--menu-top-level-font-line-height);
    text-transform: var(--menu-top-level-font-case);
    color: var(--menu-top-level-font-color);
    justify-content: space-between;

    &:hover {
      color: var(--menu-top-level-font-color);
    }
  }

  .menu-drawer__menu-item--parent {
    font-family: var(--menu-parent-font-family);
    font-style: var(--menu-parent-font-style);
    font-weight: var(--menu-parent-font-weight);
    font-size: var(--menu-parent-font-size);
    line-height: var(--menu-parent-font-line-height);
    text-transform: var(--menu-parent-font-case);
    color: var(--menu-parent-font-color);

    &:hover {
      color: var(--menu-parent-font-color);
    }
  }

  /* Reine Ueberschriften ueber ihrer Unterliste: kein Link, also auch kein Klickzeiger */
  .menu-drawer__menu-item--heading {
    cursor: default;
  }

  /* ----------------------------------------------------------------
     Gewichtung der beiden Ebenen umdrehen

     Die Ueberschrift der 2. Ebene ("Nach Anzahl") stand groesser und dunkler da
     als die Eintraege darunter - dabei fuehrt sie nirgendwo hin. Geklickt werden
     die Eintraege, und die gingen daneben unter.

     Deshalb getauscht: die Ueberschrift bekommt die kleinere, gedeckte Stufe,
     die klickbaren Eintraege die groessere im vollen Kontrast.

     Dazu ist das Ganze um eine Stufe angehoben, weil das mobile Menue insgesamt
     zu klein wirkte: Ueberschrift auf der mittleren, Eintraege auf der grossen
     Stufe. Alle Werte kommen aus der Menue-Typografie des Themes; wer es kleiner
     will, geht hier je eine Stufe zurueck (sm / md statt md / lg).

     Gilt nur fuer das mobile Menue. Das Mega-Menue am Rechner bleibt so, wie es
     in den Menue-Einstellungen steht.
     ---------------------------------------------------------------- */
  .menu-drawer__menu-item--heading {
    --menu-parent-font-size: var(--menu-font-md--size);
    --menu-parent-font-line-height: var(--menu-font-md--line-height);
    --menu-parent-font-color: var(--color-foreground-subdued);
  }

  .menu-drawer__menu-item--child {
    --menu-child-font-size: var(--menu-font-lg--size);
    --menu-child-font-line-height: var(--menu-font-lg--line-height);
    --menu-child-font-color: var(--color-foreground);
  }

  .menu-drawer__menu-item--child {
    font-family: var(--menu-child-font-family);
    font-style: var(--menu-child-font-style);
    font-weight: var(--menu-child-font-weight);
    font-size: var(--menu-child-font-size);
    line-height: var(--menu-child-font-line-height);
    text-transform: var(--menu-child-font-case);
    color: var(--menu-child-font-color);

    &:hover {
      color: var(--menu-child-font-color);
    }
  }

  .menu-drawer__menu--childlist summary.menu-drawer__menu-item {
    display: flex;
    width: 100%;
    padding-inline-end: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu,
  .menu-drawer__menu--grandchildlist {
    padding-inline: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__list-item--deep.menu-drawer__list-item--divider .menu-drawer__menu {
    padding-block-end: 0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu--grandchildlist {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__menu-item {
    display: flex;
    padding: var(--padding-2xs) 0;
    position: relative;
    text-decoration: none;
    justify-content: space-between;
    align-items: center;
  }

  .menu-drawer__menu-item:has(> .menu-drawer__link-image) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

  .menu-drawer__link-image {
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  /* Fix alignment for collection image mode links without images in drawer */

  /* Target menu items in grids that have images */
  .menu-drawer__menu--grid:has(.menu-drawer__link-image) .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image)) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

  .menu-drawer__menu--grid:has(.menu-drawer__link-image)
    .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image))::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--color-foreground-muted);
    opacity: 0.1;
    border-radius: var(--menu-image-border-radius);
  }

  .menu-drawer__close-button {
    position: relative;
    right: auto;
    top: auto;
    width: fit-content;
    height: fit-content;
    color: inherit;
    padding: var(--padding-lg);
  }

  .menu-drawer__back-button {
    display: flex;
    width: 100%;
    padding: var(--padding-md) var(--padding-xl);
    border: none;
    align-items: center;
    color: var(--color-foreground);
    background-color: transparent;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    overflow-x: hidden;
    line-height: 1.2;
    box-shadow: none;
  }

  .menu-drawer__close-button.menu-drawer__close-button,
  .menu-drawer__back-button.menu-drawer__back-button {
    outline-color: var(--color-foreground-subdued);
  }

  .menu-drawer__menu-item-text {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /** Styles when the country selector is hidden */
  .menu-drawer .language-selector:not(.menu-drawer__submenu *) {
    width: fit-content;
    padding-inline-start: 0;

    .localization-form__select {
      text-align: left;
    }
  }

  .menu-drawer__menu-item > .svg-wrapper {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding-block: var(--padding-lg);
    padding-inline-start: var(--padding-xl);
    flex-shrink: 0;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item > .svg-wrapper {
    padding-block: var(--padding-md);
  }

  .menu-drawer svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__submenu {
    position: absolute;
    width: 100%;
    top: 0;
    height: 100dvh;
    left: 0;
    background-color: var(--color-background);
    z-index: var(--layer-flat);
    transform: translateX(-5%);
    visibility: hidden;
    overflow-y: auto;
    opacity: 0;
  }

  .menu-drawer__back-button > .svg-wrapper {
    margin-right: var(--padding-md);
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__utility-links {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin-block: auto var(--padding-sm);
    margin-inline-start: var(--padding-xl);
  }

  .menu-drawer__account {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    text-decoration: none;
    height: 44px;
    font-size: 1.4rem;
    color: rgb(var(--color-foreground));
  }

  .menu-drawer__account svg {
    height: var(--icon-size-sm);
    width: var(--icon-size-sm);
  }

  .menu-drawer__account shop-user-avatar {
    --shop-avatar-size: 2.4rem;

    margin-right: 0.55rem;
    margin-left: -0.45rem;
  }

  .menu-drawer__link-image,
  .menu-drawer__featured-product-image,
  .menu-drawer__featured-collection-image,
  .menu-drawer__featured-collection-link::before {
    border-radius: var(--menu-image-border-radius);
  }

  @keyframes menu-drawer-nav-open {
    0% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-0.5rem);
    }

    100% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes menu-drawer-subnav-open {
    0% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }

    100% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-1rem);
    }
  }

  /* Drawer Localization Styles */
  .drawer-localization__button .icon-flag {
    width: var(--menu-localization-font-size, var(--icon-size-sm));
    height: var(--menu-localization-font-size, var(--icon-size-sm));
    clip-path: circle(50%); /* stylelint-disable-line */
    background-position: center;
    background-size: cover;
    margin-inline-end: 4px;
    position: relative;
  }

  .drawer-localization__button .icon-flag::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 var(--size-shadow) var(--color-shadow);
    border-radius: 50%;
  }

  .drawer-localization .country-filter {
    padding-block: 8px;
  }

  .drawer-localization .drawer-localization__button {
    display: flex;
    padding: 0;
    position: relative;
    text-decoration: none;
    height: 44px;

    &:hover {
      color: var(--color-foreground);
    }
  }

  .drawer-localization .drawer-localization__button .icon-caret {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding: var(--padding-xl) var(--padding-xl) var(--padding-xl) var(--padding-xs);
  }

  .menu-drawer__localization:not(drawer-localization-component) .language-selector {
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
  }

  .menu-drawer__localization .language-selector.h5 {
    padding-inline-start: 0;
  }

  .drawer-localization {
    display: contents;
    color: var(--color-foreground);
  }

  .drawer-localization localization-form-component {
    position: relative;
    height: 100%;
  }

  .drawer-localization .mobile-localization,
  .drawer-localization .drawer-localization__button--label {
    display: flex;
    gap: var(--gap-xs);
    margin-block: 0;
    align-items: center;
  }

  .drawer-localization__button--label.h6 {
    font-family: var(--menu-localization-font);
  }

  .drawer-localization img {
    width: var(--icon-size-sm);
  }

  .drawer-localization .localization-button__icon,
  .drawer-localization .localization-button__icon svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .drawer-localization summary.is-disabled {
    pointer-events: none;
  }

  .drawer-localization .localization-wrapper {
    width: 100%;
  }

  .drawer-localization .localization-form {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .drawer-localization .localization-form > * {
    padding-inline: var(--padding-xl);
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret {
    transform: translateY(-50%) rotate(0deg);
    right: 20px;
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret svg {
    transform: none;
  }
/* END_SNIPPET:header-drawer */

/* START_SNIPPET:header-menu-badge (INDEX:201) */
/* ----------------------------------------------------------------
     Orange-Akzent der Kopfzeile - EINE Quelle fuer alle Stellen

     Genutzt vom Etikett "Modulares System" und vom Setup-Knopf
     (snippets/header-setup-cta.liquid). Hier aendern aendert beide, damit
     sie nicht auseinanderlaufen.

     "on-media" gilt, solange der Header durchsichtig ueber Bild oder Video
     liegt: dort ist das gedeckte Orange auf hellem Grund nicht mehr lesbar.
     ---------------------------------------------------------------- */
  :root {
    /* Auf hellem Grund: Schrift und Kontur in Orange, keine Flaeche */
    --accent-orange: var(--3idee-ink);
    --accent-orange-line: rgb(var(--color-foreground-rgb, 31 34 48) / 0.45);
    --accent-orange-line-strong: rgb(var(--color-foreground-rgb, 31 34 48) / 0.55);
    --accent-orange-wash: rgb(var(--color-foreground-rgb, 31 34 48) / 0.08);

    /* Ueber Bild/Video: aufgehellt, sonst saeuft der Ton im Dunkeln ab */
    --accent-orange-on-media: #ffffff;
    --accent-orange-line-on-media: rgb(255 255 255 / 0.55);
    --accent-line-on-media: rgb(255 255 255 / 0.65);
    --accent-wash-on-media: rgb(255 255 255 / 0.14);
  }

  .menu-badge {
    display: inline-flex;
    align-items: center;
    margin-inline-start: var(--margin-2xs);
    padding: 2px 6px;
    border: 1px solid var(--accent-orange-line);
    border-radius: var(--3idee-radius-winzig);
    background-color: transparent;
    color: var(--accent-orange);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.4;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color var(--animation-speed) var(--animation-easing),
      color var(--animation-speed) var(--animation-easing);
  }

  /* Ueber Bild/Video ist das gedeckte Orange auf hellem Grund nicht mehr lesbar.
     Solange der Header dort oben schwebt, wird das Etikett deshalb kraeftiger.
     Sobald er festgescrollt ist oder ein Menue offen ist, gilt wieder die
     gedeckte Fassung - dann liegt es auf hellem Untergrund.

     Das mobile Menue ist ausgenommen: es liegt zwar technisch im Header, ist
     aber eine deckende helle Flaeche. Dort gilt die gedeckte Fassung. */
  .header[transparent]:not([data-sticky-state='active']):not(
      :has(.menu-list__link:is(:hover, [aria-expanded='true']))
    ):not(:has(.mega-menu__list:hover))
    .menu-badge:not(.menu-drawer *) {
    border-color: var(--accent-orange-line-on-media);
    color: var(--accent-orange-on-media);
  }
/* END_SNIPPET:header-menu-badge */

/* START_SNIPPET:header-setup-cta (INDEX:203) */
.header-setup-cta {
    /* Kontur statt Flaeche - Farben aus derselben Quelle wie das Etikett
       "Modulares System" (snippets/header-menu-badge.liquid).

       Die Rahmenbreite wird ausdruecklich gesetzt: das Theme zeichnet den Rahmen
       ueber einen Innenschatten, dessen Breite aus einer Theme-Einstellung kommt.
       Steht die auf 0, bliebe die Kontur unsichtbar. */
    --color-primary-button-background: transparent;
    --color-primary-button-text: var(--accent-orange);
    --color-primary-button-border: var(--accent-orange-line-strong);
    --button-border-width: 1px;
    --color-primary-button-hover-background: var(--accent-orange-wash);
    --color-primary-button-hover-text: var(--accent-orange);
    --color-primary-button-hover-border: var(--accent-orange);

    display: none;
    align-items: center;
    gap: var(--gap-xs);
    white-space: nowrap;

    /* Am Handy ist in der Kopfzeile kein Platz - dort steht der Knopf im
       aufgeklappten Menue (siehe --drawer weiter unten). */
    @media screen and (min-width: 750px) {
      display: inline-flex;
    }
  }

  /* ----------------------------------------------------------------
     Schriftfarbe gegen die Aktionsleiste behaupten

     Die Aktionsleiste faerbt alle ihre Elemente auf die Vordergrundfarbe um,
     damit Lupe, Konto und Warenkorb einheitlich aussehen. Der Setup-Knopf traegt
     ihre Klasse mit (wegen der Abstaende) und wuerde dadurch schwarz statt orange.

     Der zusammengesetzte Selektor gewinnt unabhaengig davon, in welcher
     Reihenfolge die Regeln im gebuendelten Stylesheet landen.
     ---------------------------------------------------------------- */
  .header-setup-cta.header-actions__action {
    --button-color: var(--accent-orange);
  }

  /* Im mobilen Menue: immer sichtbar, ueber die volle Breite der Menueeintraege.
     "flex" statt "inline-flex" - sonst schrumpft der Knopf auf seine Textbreite
     und steht als kleines Rechteck in einer grossen leeren Flaeche. */
  .header-setup-cta--drawer {
    display: flex;
    justify-content: center;
    margin-block: var(--margin-md) var(--margin-lg);
    margin-inline: var(--drawer-padding);
    height: 44px;
  }

  /* Ueber Bild/Video: weisse SCHRIFT, aber orange Kontur.

     Frueher war auch die Kontur weiss — mit der Begruendung, Orange sei auf
     der Milchglas-Box zu schwach. Inzwischen umrandet dieselbe orange Linie
     die Suchleiste der Startseite, das Feld im Finder und die
     Kompatibilitaetsbox der Produktseite. Ueberall dort heisst sie: Hier
     sagst du uns deinen Monitor. Genau das tut dieser Knopf auch, also
     traegt er dieselbe Linie. Die Schrift bleibt weiss, sonst verliert sie
     ueber hellen Stellen des Videos den Halt. */
  .header[transparent]:not([data-sticky-state='active']):not(
      :has(.menu-list__link:is(:hover, [aria-expanded='true']))
    ):not(:has(.mega-menu__list:hover))
    .header-setup-cta:not(.menu-drawer *) {
    --color-primary-button-text: #fff;
    --button-color: #fff;
    --color-primary-button-border: var(--accent-line-on-media);
    --color-primary-button-hover-background: var(--accent-wash-on-media);
    --color-primary-button-hover-text: #fff;
    --color-primary-button-hover-border: rgb(255 255 255 / 0.85);
  }

  /* DIESELBE REGEL FUER DIE AUSWAHL-ANZEIGE.

     Den Knopf "Passendes Setup finden" hat der transparente Header laengst
     beruecksichtigt — die Anzeige, die an seine Stelle tritt, sobald ein
     Monitor gewaehlt ist, nicht. Sie behielt ihre Farbe und stand als
     dunkler Fleck ueber dem Bild der Startseite. Beides ist derselbe Platz in
     der Kopfzeile, also gehoert beiden dieselbe Ausnahme.

     Der Selektor ist Zeichen fuer Zeichen der von oben: Waere er auch nur
     leicht anders, wechselten Knopf und Anzeige bei Sticky-Zustand oder
     geoeffnetem Menue zu verschiedenen Zeitpunkten die Farbe. (21.08.2026) */
  .header[transparent]:not([data-sticky-state='active']):not(
      :has(.menu-list__link:is(:hover, [aria-expanded='true']))
    ):not(:has(.mega-menu__list:hover))
    .header-setup-wahl:not(.menu-drawer *) {
    border-color: var(--accent-line-on-media);

    .header-setup-wahl__ziel,
    .header-setup-wahl__pfeil {
      color: #fff;
    }
    .header-setup-wahl__pfeil {
      border-left-color: rgb(255 255 255 / 0.35);
    }
    .header-setup-wahl__ziel:hover,
    .header-setup-wahl__pfeil:hover {
      background: var(--accent-wash-on-media);
    }
  }

  /* [hidden] allein reicht nicht: die Grundregel des Browsers dafuer ist sehr
     schwach und wird von jeder eigenen display-Angabe ueberschrieben — und
     dieser Knopf hat gleich drei (Grundzustand, ab 750px, im Menue). Ohne
     diese Zeile blieb im mobilen Menue "Passendes Setup finden" stehen,
     obwohl daneben schon die Auswahl angezeigt wurde. */
  .header-setup-cta[hidden],
  .header-setup-wahl[hidden] { display: none; }

  .header-setup-cta__icon {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
  }

  /* ── Zweiter Zustand: aktuelle Auswahl ──────────────────────────────
     Gleiche Kontur wie der Knopf daneben, damit der Wechsel nicht wie ein
     anderes Element wirkt, sondern wie derselbe in anderem Zustand. */
  .header-setup-wahl {
    display: none;
    align-items: stretch;
    border: 1px solid var(--accent-orange-line-strong);
    border-radius: var(--style-border-radius-buttons-primary, var(--3idee-radius-mittel));
    white-space: nowrap;
    overflow: hidden;
  }
  .header-setup-wahl:not([hidden]) {
    @media screen and (min-width: 750px) { display: inline-flex; }
  }
  .header-setup-wahl__ziel {
    display: inline-flex; align-items: center; gap: var(--gap-xs, 8px);
    padding: 0 12px; min-height: 40px;
    color: var(--accent-orange); text-decoration: none; font-weight: 600;
  }
  .header-setup-wahl__ziel:hover { background: var(--accent-orange-wash); }
  .header-setup-wahl__name { max-width: 15ch; overflow: hidden; text-overflow: ellipsis; }
  .header-setup-wahl__mehr {
    font-size: .82em; opacity: .75;
  }
  .header-setup-wahl__pfeil {
    display: grid; place-items: center; width: 34px;
    border: 0; border-left: 1px solid var(--accent-orange-line);
    background: none; color: var(--accent-orange); cursor: pointer;
  }
  .header-setup-wahl__pfeil svg { width: 16px; height: 16px; }
  .header-setup-wahl__pfeil:hover { background: var(--accent-orange-wash); }
  .header-setup-wahl__pfeil[aria-expanded='true'] svg { transform: rotate(180deg); }

  .header-setup-wahl { position: relative; overflow: visible; }
  /* Fest positioniert: das Menue haengt sich aus der Kopfzeile aus, damit es
     dort nicht abgeschnitten oder ueberdeckt wird. Die Koordinaten setzt
     header-setup-cta.js beim Oeffnen anhand der Schaltflaeche. */
  .header-setup-wahl__menue {
    position: fixed; z-index: 1000;
    min-width: 260px; display: grid;
    background: var(--color-background, #fff);
    border: 1px solid var(--color-border, var(--3idee-hairline));
    border-radius: var(--style-border-radius-buttons-primary, var(--3idee-radius-mittel));
    box-shadow: 0 18px 44px rgb(0 0 0 / .18);
    overflow: hidden;
  }
  .header-setup-wahl__menue[hidden] { display: none; }
  .header-setup-wahl__menue > * {
    padding: 11px 14px; font: inherit; font-size: 14px; text-align: left;
    background: none; border: 0; cursor: pointer; text-decoration: none;
    color: var(--color-foreground, #1F2230);
  }
  .header-setup-wahl__menue > * + * { border-top: 1px solid var(--color-border, #eee); }
  .header-setup-wahl__menue > *:hover { background: rgb(0 0 0 / .04); }
  .header-setup-wahl__menue [data-setup-neu] { color: #d63d52; }

  /* Kopf des Panels: keine Handlung, nur Einordnung — deshalb ohne Zeiger und
     ohne Hover-Flaeche, sonst sieht er nach anklickbar aus. */
  .header-setup-wahl__kopf {
    padding: 12px 14px 10px; background: #fafbfc;
    border-bottom: 1px solid var(--color-border, #f0f1f3); cursor: default;
  }
  .header-setup-wahl__kopf:hover { background: #fafbfc; }
  .header-setup-wahl__kopf small {
    display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: var(--accent-orange); margin-bottom: 3px;
  }
  .header-setup-wahl__kopf b {
    font-size: 14.5px; display: block; overflow: hidden; text-overflow: ellipsis;
  }

  /* Im mobilen Menue: volle Breite, wie der Knopf dort auch. */
  .header-setup-wahl--drawer {
    margin-block: var(--margin-md) var(--margin-lg);
    margin-inline: var(--drawer-padding);
  }
  .header-setup-wahl--drawer:not([hidden]) { display: flex; }
  .header-setup-wahl--drawer .header-setup-wahl__ziel { flex: 1 1 auto; min-height: 44px; }
/* END_SNIPPET:header-setup-cta */

/* START_SNIPPET:jumbo-text (INDEX:208) */
.jumbo-text__container {
    width: 100%;
  }

  footer .jumbo-text__container {
    pointer-events: none;
  }

  jumbo-text {
    display: block;
    font-family: var(--font-family, inherit);
    font-style: var(--font-style, normal);
    color: var(--color, inherit);
    font-weight: var(--font-weight, inherit);
    letter-spacing: var(--letter-spacing, -0.02em);
    line-height: var(--line-height, 1);
    opacity: 0;
    visibility: hidden;
    text-align: var(--text-align);
    text-box: var(--text-trim, trim-end cap text);
    text-transform: var(--text-transform, none);
    transition: opacity 0.3s ease;
    width: 100%;
    margin-left: var(--margin-left-nudge, 0);
    margin-right: var(--margin-right-nudge, 0);
    overflow: visible;
  }

  jumbo-text.ready {
    opacity: 1;
    visibility: visible;
  }

  jumbo-text[data-cap-text='true'] {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    text-box-edge: cap text;
  }

  .jumbo-text-line {
    display: inline-flex;
    white-space: pre;
  }

  @media (prefers-reduced-motion: no-preference) {
    /* Blur effect */
    .ready[data-text-effect='blur'] {
      filter: blur(20px);
      opacity: 0.5;
      scale: 1.05;
      transition: filter 1.6s var(--animation-timing-fade-in), opacity 1.3s var(--animation-timing-fade-in),
        scale 1.6s var(--animation-timing-fade-in);
    }

    .jumbo-text-visible[data-text-effect='blur'] {
      filter: blur(0);
      opacity: 1;
      scale: 1;
    }

    /* Reveal effect */
    .ready[data-text-effect='reveal'] {
      overflow: hidden;
    }

    .ready[data-text-effect='reveal'] .jumbo-text-line {
      transform: translateY(100%);
    }

    .jumbo-text-visible[data-text-effect='reveal'] .jumbo-text-line {
      transition: transform 0.5s var(--animation-timing-fade-in) calc(var(--line-index) * 0.05s);
      transform: translateY(0);
    }

    .jumbo-text-visible[data-text-effect='reveal'] {
      overflow: visible;
      transition: overflow 0s linear 0.75s;
    }
  }
/* END_SNIPPET:jumbo-text */

/* START_SNIPPET:lagerzeile-kern (INDEX:209) */
/* Zeile mit Punkt, keine Flaeche und kein Rahmen — die Form unterscheidet die
   Tatsache von der Entscheidung. Farben nach 3idee-designkodex.md. */
.lgz {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  width: 100%;
}

.lgz__punkt {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  position: relative;
  top: -1px;
  background: currentcolor;
}

.lgz__text { font-weight: 600; }

/* Der Text bleibt dunkel, die Farbe steckt allein im Punkt — Statussystem
   19.08.: Gruen und Rot sind Micro-Signale, keine Textfarben. */
.lgz { color: var(--3idee-ink, #1f2230); }
.lgz--lager .lgz__punkt,
.lgz--mto .lgz__punkt,
.lgz--vor .lgz__punkt { background: var(--3idee-success); }
.lgz--aus .lgz__punkt { background: var(--3idee-error); }
/* END_SNIPPET:lagerzeile-kern */

/* START_SNIPPET:list-filter (INDEX:212) */
.facets input:checked + label {
    font-weight: 500;
  }

  .facets .checkbox .icon-checkmark {
    transition: border-color 0.2s ease, background-color 0.2s ease;
  }

  .facets .checkbox:not(.checkbox--disabled):hover .icon-checkmark {
    border-color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  /* Hover state for checked checkboxes - targeting via adjacent sibling */
  .facets .checkbox:not(.checkbox--disabled):hover .checkbox__input:checked + .checkbox__label .icon-checkmark {
    background-color: var(--color-foreground-subdued);
  }

  .facets .checkbox:not(.checkbox--disabled) .checkbox__label-text {
    color: var(--color-foreground-subdued);
  }
  .facets .checkbox:not(.checkbox--disabled):hover .checkbox__label-text {
    color: var(--color-foreground-rgb);
  }

  .facets .checkbox .checkbox__label-text {
    transition: color 0.2s ease, font-weight 0.2s ease;
  }

  /* Pill style */
  .facets__pill-label {
    --pill-label-padding-inline: var(--padding-xs);
    --pill-label-border-radius: var(--style-border-radius-md);
    --pill-label-border-width: var(--variant-picker-button-border-width);
    --pill-label-height: var(--button-size-md);
    --pill-label-focus-outline-color: var(--color-foreground);
    --pill-label-color: var(--color-foreground);
    --pill-label-color-rgb: var(--color-foreground-rgb);
    --pill-label-background-color: var(--color-background);
    --pill-label-background-color-rgb: var(--color-background-rgb);
    --pill-label-border-opacity: var(--facets-low-opacity);

    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 var(--pill-label-border-width) rgb(var(--pill-label-color-rgb) / var(--opacity-10-25));
    border-radius: var(--pill-label-border-radius);
    height: var(--pill-label-height);
    width: 100%;
    padding-inline: var(--pill-label-padding-inline);
    color: rgb(var(--pill-label-color-rgb));
    background-color: rgb(var(--pill-label-background-color-rgb));
    cursor: pointer;
    transition: color var(--animation-speed) var(--animation-easing),
      background-color var(--animation-speed) var(--animation-easing);
    outline-color: var(--pill-label-focus-outline-color);

    &:hover {
      --pill-label-border-opacity: 100%;
    }
  }

  .facets__pill-input:not(:checked) + .facets__pill-label:hover {
    --pill-label-color-rgb: var(--color-foreground-rgb);
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .facets__pill-input {
    &:checked + .facets__pill-label {
      --pill-label-color-rgb: var(--color-background-rgb);
      --pill-label-background-color-rgb: var(--color-foreground-rgb);
      --pill-label-border-opacity: 0;

      font-weight: 500;
    }

    &:disabled + .facets__pill-label {
      opacity: var(--disabled-opacity);
      cursor: not-allowed;

      &:hover {
        --pill-label-border-opacity: var(--facets-low-opacity);
      }
    }
  }

  .facets__status-wrapper {
    display: flex;
    align-items: center;
  }

  .facets--drawer .facets__status-wrapper {
    @media screen and (max-width: 749px) {
      gap: var(--gap-3xs);
    }
  }

  .facets--vertical .facets__status-wrapper {
    gap: var(--gap-xs);
  }

  .facets--horizontal .facets__status-wrapper {
    gap: 0;
  }

  .facets__pill-input:disabled + .facets__pill-label svg {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: var(--style-border-radius-md);
  }

  .facets__pill-label svg line {
    stroke-width: 1.5px;
    stroke: rgb(var(--color-foreground-rgb) / var(--facets-low-opacity));
  }

  .facets__pill-wrapper {
    position: relative;
  }

  .facets__pill-input {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    opacity: 0;
    cursor: pointer;
  }

  /* Swatches */
  .facets__status--swatches {
    display: none;
  }

  .facets__swatch-wrapper {
    display: flex;
  }

  .variant-option__swatch-wrapper {
    position: relative;
    overflow: visible;
    border-radius: var(--options-border-radius);
  }

  .variant-option--swatches-disabled {
    pointer-events: none;
    cursor: not-allowed;
  }

  .variant-option--swatches-disabled .variant-option__swatch-wrapper {
    overflow: hidden;
  }

  .facets--horizontal .facets__status--swatches {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .facets--horizontal .sorting-filter .facets__status {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets__status--swatches .swatch {
    width: calc(var(--variant-picker-swatch-width) / 1.5);
    height: calc(var(--variant-picker-swatch-height) / 1.5);
  }

  .facets__status--swatches .swatch + .swatch {
    margin-left: calc(var(--variant-picker-swatch-width) / -3);
    outline: 1px solid rgb(var(--color-background-rgb));
  }

  .facets__inputs-wrapper .facets__inputs-list--images {
    display: grid;
    grid-template-columns: repeat(var(--image-columns), 125px);
    gap: var(--gap-sm);
  }

  .facets--drawer .facets__inputs-wrapper .facets__inputs-list--images {
    grid-template-columns: repeat(3, 1fr);

    @media screen and (min-width: 750px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .facets--vertical .facets__inputs-wrapper .facets__inputs-list--images {
    grid-template-columns: repeat(2, 1fr);
  }

  .facets--drawer .facets__inputs-list--images {
    padding-top: var(--padding-xs);
  }

  .facets__image-wrapper {
    aspect-ratio: 1/1;
    width: 100%;
    padding: var(--padding-xs);
    position: relative;
    overflow: hidden;
  }

  .facets__image-wrapper img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    border-radius: calc(var(--border-radius) / 2);
  }

  .facets__image-label {
    width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-block-end: var(--padding-xs);
    cursor: pointer;
  }

  .facets__inputs-list-item--disabled .facets__image-label {
    cursor: not-allowed;
  }

  .facets__inputs-list-item:not(.facets__inputs-list-item--disabled) .facets__image-label:hover {
    font-weight: 500;
  }

  /* Filter-specific variant-option styles */
  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch {
    --focus-outline: var(--focus-outline-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-35-55));

    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label:has(:focus-visible) .swatch {
    --focus-outline: var(--focus-outline-width) solid currentcolor;

    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label:has(:focus-visible) {
    outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover {
    outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) {
    --focus-outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) .swatch {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches .variant-option__button-label {
    --color-variant-text: var(--color-foreground);
  }

  .facets__inputs-list--swatches {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }
  }

  .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
    gap: var(--gap-sm);
  }

  .facets--vertical .facets__inputs-list--swatches .facets__inputs-list-item {
    display: flex;
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
    --columns: 2;

    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option--swatches {
    cursor: pointer;
    overflow: visible;
  }

  .facets__inputs-list-item--disabled .variant-option--swatches {
    cursor: not-allowed;
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid label {
    cursor: pointer;
    word-break: break-word;
    white-space: normal;
  }

  .facets__inputs-list--swatches-grid .facets__inputs-list-item--disabled label {
    cursor: not-allowed;
  }

  .facets__inputs-list-item--disabled .variant-option__button-label {
    cursor: not-allowed;
  }

  .facets__inputs-wrapper
    .facets__inputs-list--swatches-grid
    .variant-option__button-label--has-swatch:has(input[type='checkbox']) {
    align-items: center;
    overflow: visible;
    justify-content: flex-start;
    display: flex;
    width: 100%;
    flex-basis: unset;
    gap: var(--gap-sm);
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option__button-label:has(:checked) {
    color: rgb(var(--color-foreground-rgb));
    background-color: rgb(var(--color-background-rgb));
    font-weight: 500;
    transition: font-weight 0.2s ease;
  }

  .facets .variant-option--swatches {
    --options-border-radius: var(--variant-picker-swatch-radius);

    width: auto;
  }

  .facets__inputs-list-item:not(.facets__inputs-list-item--disabled) .variant-option__button-label:hover {
    font-weight: 500;
  }

  /* Variant option images (filters) */
  .variant-option--images {
    --image-facet-border-width: var(--variant-picker-button-border-width);
    --image-facet-border-opacity: var(--facets-low-opacity);
    --image-facet-border-radius: var(--style-border-radius-xs);

    position: relative;
    border-radius: var(--image-facet-border-radius);
    box-shadow: inset 0 0 0 var(--image-facet-border-width)
      rgb(var(--color-foreground-rgb) / var(--image-facet-border-opacity));

    &:hover {
      --image-facet-border-opacity: 100%;
    }

    &:has(input:checked) {
      font-weight: 500;
      transition: font-weight 0.2s ease;
    }

    &:has(input:checked):hover {
      --image-facet-border-width: calc(var(--variant-picker-button-border-width) + 0.5px);
    }

    &:has(input:focus-visible) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: var(--focus-outline-offset);
    }
  }

  .variant-option--images input {
    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;
  }

  .facets__inputs-list-item--disabled .variant-option--images {
    --image-facet-border-opacity: 0;

    opacity: var(--disabled-opacity);
    cursor: not-allowed;

    &:hover {
      --image-facet-border-opacity: 0;
    }

    img {
      opacity: var(--disabled-opacity);
    }

    input,
    label,
    .facets__image-label {
      cursor: not-allowed;
    }

    .facets__image-wrapper {
      border: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-30));
      border-radius: var(--image-facet-border-radius);
    }
  }

  /* Position disabled-svg */
  .variant-option--images svg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    stroke-width: var(--border-width);
    stroke: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  /* Position label text and handle overflow */
  .facets__inputs-list-item,
  .variant-option--images {
    min-width: 0;
  }

  /* Safari < 16.4 outline border-radius workaround - filter-specific */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch {
      outline: none;
      position: relative;
      overflow: visible;
    }

    .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch::after {
      content: '';
      position: absolute;
      inset: calc(-1 * var(--focus-outline-offset));
      border: var(--focus-outline);
      border-radius: var(--focus-outline-radius, 50%);
      background-color: transparent;
      display: inherit;
    }
  }
/* END_SNIPPET:list-filter */

/* START_SNIPPET:localization-form (INDEX:213) */
/* Localization */
  localization-form-component {
    display: flex;
    width: var(--width, auto);

    @media screen and (min-width: 750px) {
      position: relative;
    }
  }

  localization-form-component[data-show-filter='false'] .country-selector-form__wrapper {
    padding-block-start: var(--padding-xs);
  }

  .localization-form {
    width: 100%;
  }

  localization-form-component .button:is(:not(.country-filter__reset-button)) {
    --button-color: var(--color-foreground);
    --button-background-color: var(--language-button-background-color, var(--color-background));
    --button-border-color: var(--language-button-border-color, var(--color-border));

    text-decoration-color: transparent;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
    transition: text-decoration-color var(--animation-speed) var(--animation-easing);
  }

  localization-form-component .button:is(:not(.country-filter__reset-button)):hover,
  .localization-form__list-item:hover,
  .localization-form__list-item:focus {
    --button-color: var(--color-foreground-subdued);

    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
  }

  .localization-form__list-item[aria-current='true'] {
    --button-color: var(--color-primary-active);

    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10));
  }

  .localization-form__list-item-disabled {
    pointer-events: none;
  }

  .localization-form__list-item:focus-visible {
    outline: none;
  }

  localization-form-component .localization-selector {
    display: flex;
    align-items: center;
    gap: var(--margin-2xs);
  }

  localization-form-component .country-filter__search-icon {
    left: 8px;
    right: auto;
    color: var(--color-foreground-muted);
    pointer-events: none;
  }

  .country-filter__search-icon .svg-wrapper svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .disclosure {
    width: 100%;
  }

  .localization-form__list {
    position: relative;
    width: 100%;
    padding-block: 0 var(--padding-xs);
    font-size: var(--font-size-lg);
    scroll-padding: var(--padding-xs) 0;
    overflow-y: auto;
    white-space: nowrap;

    /* Hide scrollbar which would cause extra right padding in Safari */
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .localization-form__list-item:not([hidden]) {
    margin-block-end: var(--margin-3xs);
    display: flex;
    gap: var(--margin-sm);
    padding: 8px;
    border-radius: 8px;
    line-height: var(--font-line-height-md);
    align-items: center;
    text-align: start;
    cursor: pointer;
    transition: background-color var(--animation-speed) var(--animation-easing);

    .country {
      flex: 1;
      color: var(--color-foreground);
    }

    &:hover {
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }

    &[aria-current='true'] {
      .country {
        font-weight: 500;
      }
    }
  }

  .localization-form__list-item#no-results-message {
    grid-template-columns: 1fr;
    text-align: center;
    color: var(--color-foreground-subdued);
  }

  .is-searching .localization-form__list-item .country {
    color: var(--color-foreground-subdued);
  }

  .localization-form__list-item .country mark {
    font-weight: 500;
    background: none;
    color: var(--color-foreground);
  }

  .country-filter {
    position: relative;
    padding: var(--padding-xs);
    border-bottom: var(--style-border-width) solid transparent;
    transition: border-color var(--animation-values);
  }

  .country-filter.is-scrolled {
    border-color: var(--color-border);
  }

  .country-selector-form__wrapper {
    overflow-y: auto;
    max-height: 100%;
    flex-grow: 1;
  }

  .language-selector {
    display: flex;
    gap: var(--gap-xs);
    padding: var(--padding-md) var(--padding-lg);
    position: relative;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .language-selector__label {
    flex-shrink: 0;
    color: var(--color-foreground-subdued);
  }

  .localization-form__select {
    border: none;
    color: var(--color-foreground);
    appearance: none;
    background-color: var(--color-background);
    padding-block: var(--padding-3xs);
    padding-inline: var(--padding-xs) calc(var(--icon-size-xs) + var(--padding-xs));
    text-align: right;
    cursor: pointer;
    max-width: 40vw;
    text-overflow: ellipsis;
    field-sizing: content;

    &:focus-visible {
      outline: var(--focus-outline-width) solid currentcolor;
    }

    &:focus {
      outline: none;
    }
  }

  #header-component[transparent] localization-form-component .localization-form .localization-form__select {
    background-color: transparent;
  }

  .localization-form__select option {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
  }

  .language-selector .svg-wrapper.icon-caret {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
  }

  .language-selector--collapse-space {
    padding-inline-end: var(--padding-2xs);
  }

  .language-selector--collapse-space .localization-form__select {
    padding-inline-end: var(--icon-size-xs);
  }

  .language-selector--collapse-space .svg-wrapper.icon-caret {
    right: 0;
  }

  .localization-form .icon-checkmark {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .localization-form .svg-wrapper.icon-checkmark {
    visibility: hidden;
  }

  .localization-form__list-item[aria-current='true'] .svg-wrapper.icon-checkmark {
    visibility: visible;
  }

  .country-filter__input {
    width: 100%;
    height: 44px;
    font-size: var(--font-size-lg);
    padding: var(--padding-md) var(--padding-lg) var(--padding-md) calc(var(--margin-md) + var(--padding-xl));
    border: 1px solid var(--color-foreground);
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    outline-offset: -1px;

    @media screen and (min-width: 750px) {
      height: 36px;
    }
  }

  .country-filter__input::placeholder {
    color: inherit;
  }

  .country-filter .field {
    position: relative;
  }

  .country-filter .field__label {
    font-size: var(--font-size-lg);
    left: var(--margin-2xl);
    top: var(--margin-xl);
    pointer-events: none;
    position: absolute;
  }

  .country-filter__input:focus ~ .field__label,
  .country-filter__input:not(:placeholder-shown) ~ .field__label,
  .country-filter__input:-webkit-autofill ~ .field__label {
    font-size: var(--font-size-xs);
    top: var(--margin-xs);
  }

  .country-filter .field__button:not([hidden]) {
    display: flex;
    height: fit-content;
    position: absolute;
    padding: 0;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
    background-color: transparent;
    color: var(--color-input-text);
    border: 0;
  }

  input[type='search']::-webkit-search-cancel-button {
    appearance: none;
  }

  .country-selector__close-button {
    display: none;
  }
/* END_SNIPPET:localization-form */

/* START_SNIPPET:media (INDEX:214) */
.media-block {
    overflow: hidden;
    position: relative;

    @media screen and (min-width: 750px) {
      min-height: var(--media-height);
    }
  }

  .media-block__media {
    height: var(--media-height-mobile, auto);
    object-fit: var(--image-position, 'cover');
    object-position: center center;
    width: 100%;

    @media screen and (min-width: 750px) {
      height: 100%;
      position: absolute;
    }
  }

  deferred-media[class].media-block__media
    :is(.deferred-media__poster-button img, .deferred-media__poster-button ~ video) {
    object-fit: var(--video-position, 'cover');
  }

  /* This is to support corner radius on video and align the video to the center of the block */
  .media-block__placeholder {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
  }

  .media-block__media--video {
    display: flex;
    align-items: center;
    justify-content: center;

    @media screen and (max-width: 749px) {
      --media-height-mobile: auto;
    }
  }
/* END_SNIPPET:media */

/* START_SNIPPET:mega-menu-promo (INDEX:216) */
.mega-menu-promo {
    --mega-menu-promo-accent: var(--3idee-ink);
    --mega-menu-promo-radius: 4px;

    grid-column: span var(--mega-menu-promo-span, 2);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-2xs);
    padding: var(--padding-xl);
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.1);
    border-radius: var(--mega-menu-promo-radius);
    background-color: rgb(var(--color-foreground-rgb) / 0.03);
    color: var(--color-foreground);
    text-decoration: none;
    white-space: normal;
    transition: border-color var(--animation-speed) var(--animation-easing),
      background-color var(--animation-speed) var(--animation-easing);
  }

  .mega-menu-promo:hover {
    border-color: rgb(var(--color-foreground-rgb) / 0.22);
    background-color: rgb(var(--color-foreground-rgb) / 0.05);
  }

  .mega-menu-promo__title {
    font-family: var(--menu-parent-font-family);
    font-style: var(--menu-parent-font-style);
    font-weight: var(--menu-parent-font-weight);
    font-size: var(--menu-parent-font-size);
    line-height: var(--menu-parent-font-line-height);
    color: var(--mega-menu-promo-accent);
  }

  .mega-menu-promo__text {
    max-width: 34ch;
    font-size: var(--menu-child-font-size);
    line-height: 1.45;
    color: var(--color-foreground-subdued);
  }

  .mega-menu-promo__cta {
    --button-padding-block: var(--padding-xs);
    --button-padding-inline: var(--padding-lg);

    display: inline-flex;
    align-items: center;
    margin-top: var(--margin-md);
    font-size: var(--menu-child-font-size);
  }

  /* Im "Mehr"-Ueberlaufmenue steht weniger Platz zur Verfuegung */
  .menu-list__list-item[slot='overflow'] .mega-menu-promo {
    grid-column: 1 / -1;
  }

  @media screen and (max-width: 989px) {
    .mega-menu-promo {
      padding: var(--padding-lg);
    }
  }

  /* ----------------------------------------------------------------
     Mobiles Menue

     Die Linkliste im aufgeklappten Bereich ist im Theme auf "waechst und
     fuellt den Rest" gestellt (flex-grow), damit empfohlene Produkte unten
     stehen bleiben. Das wuerde unsere Box an den unteren Rand heften, mit
     einem Loch zwischen letztem Menuepunkt und Box. Ist eine Box vorhanden,
     wird das Wachstum abgeschaltet, damit sie direkt unter den Menuepunkten
     folgt.
     ---------------------------------------------------------------- */
  .menu-drawer__inner-submenu:has(.mega-menu-promo--drawer)
    .menu-drawer__menu--childlist:not(.menu-drawer__menu--grid) {
    flex-grow: 0;
  }

  .mega-menu-promo--drawer {
    grid-column: auto;
    flex-shrink: 0;
    /* Buendig mit der Textkante der Menuepunkte statt randlos ueber die volle Breite */
    margin-block: var(--margin-md) var(--margin-lg);
    margin-inline: var(--drawer-padding);
    padding: var(--padding-lg);
  }

  .mega-menu-promo--drawer .mega-menu-promo__text {
    max-width: none;
  }
/* END_SNIPPET:mega-menu-promo */

/* START_SNIPPET:overlay (INDEX:220) */
.overlay {
    position: absolute;
    inset: 0;
    z-index: var(--overlay-layer);
    pointer-events: none;
    border-radius: var(--overlay-border-radius, 0);
  }

  .overlay--solid {
    background: var(--overlay-color);
  }

  .overlay--gradient {
    background: linear-gradient(var(--overlay-direction), var(--overlay-color), var(--overlay-color--end));
  }
/* END_SNIPPET:overlay */

/* START_SNIPPET:pagination-controls (INDEX:221) */
.pagination {
    --pagination-size: 36px;
    --pagination-inset: 2px;
    --pagination-radius: 6;

    display: flex;
    justify-content: center;
    padding: var(--padding-xl) var(--padding-sm);
    margin-top: var(--padding-xl);
    position: relative;
    isolation: isolate;
  }

  .pagination__list {
    display: flex;
    gap: 0;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
  }

  .pagination__item {
    width: var(--pagination-size);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
  }

  .pagination__link {
    display: grid;
    place-items: center;
    color: var(--color-foreground);
    text-decoration: none;
    width: 100%;
    height: 100%;
    user-select: none;
    position: relative;
    outline-color: var(--color-foreground);
    -webkit-tap-highlight-color: transparent;
    font-size: var(--font-size--md);
    font-weight: var(--font-weight-normal);
    border-radius: calc(var(--pagination-radius) * 1px);
    transition: color var(--hover-transition-duration) var(--hover-transition-timing),
      opacity var(--hover-transition-duration) var(--hover-transition-timing);
  }

  .pagination__link:focus-visible {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
  }

  .pagination__link--current {
    color: var(--color-background);
    font-weight: var(--font-weight-medium);
    cursor: default;
  }

  .pagination__link--gap {
    cursor: default;
    pointer-events: none;
  }

  .pagination__link--arrow {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pagination__link--disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
  }

  .pagination__link svg {
    width: 0.5rem;
    height: 0.75rem;
    flex-shrink: 0;
  }

  .pagination__item--mobile-only {
    display: none;
  }

  /* Fallback for browsers without anchor positioning support */
  @supports not (anchor-name: --pagination-active) {
    .pagination__link:not(.pagination__link--gap)::before {
      content: '';
      position: absolute;
      inset: var(--pagination-inset);
      border-radius: calc(var(--pagination-radius) * 1px);
      background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
      z-index: -1;
      opacity: 0;
      transition: background var(--hover-transition-duration) var(--hover-transition-timing),
        opacity var(--hover-transition-duration) var(--hover-transition-timing);
    }

    .pagination__link[aria-current='page']::before {
      background: var(--color-foreground);
      opacity: 1;
    }

    .pagination__link:hover:not([aria-current='page'], .pagination__link--gap, .pagination__link--disabled)::before {
      opacity: 1;
    }
  }

  /* Modern approach with anchor positioning */
  @supports (anchor-name: --pagination-active) {
    .pagination__list::before {
      content: '';
      z-index: -1;
      position: absolute;
      width: calc(var(--pagination-size) - (2 * var(--pagination-inset)));
      aspect-ratio: 1;
      pointer-events: none;
      opacity: 0;
      border-radius: calc(var(--pagination-radius) * 1px);
      background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
      transition: left var(--hover-transition-duration) var(--hover-transition-timing),
        top var(--hover-transition-duration) var(--hover-transition-timing);
    }

    /* Hide hover indicator on touch devices */
    @media (hover: none) and (pointer: coarse) {
      .pagination__list::before {
        content: unset;
      }
    }

    .pagination__list:has(
        .pagination__link:is(:hover, :focus-visible):not(.pagination__link--gap, .pagination__link--disabled)
      )::before {
      opacity: 1;
    }

    /* Style current page directly */
    .pagination__link[aria-current='page']::before {
      content: '';
      position: absolute;
      inset: var(--pagination-inset);
      border-radius: calc(var(--pagination-radius) * 1px);
      background: var(--color-foreground);
      z-index: -1;
    }

    .pagination__list
      .pagination__item:has(
        .pagination__link:is(:hover, :focus-visible):not(.pagination__link--gap, .pagination__link--disabled)
      ) {
      anchor-name: --pagination-hover;
    }

    /* Position hover indicator using anchor */
    .pagination__list::before {
      position-anchor: --pagination-hover;
      left: calc(anchor(left) + var(--pagination-inset));
      top: calc(anchor(top) + var(--pagination-inset));
    }

    .pagination__item:has(+ .pagination__item--gap) .pagination__link::after,
    .pagination__item--gap + .pagination__item .pagination__link::after {
      position: absolute;
      content: '';
      pointer-events: auto;
    }

    .pagination__item:has(+ .pagination__item--gap) .pagination__link::after {
      inset: 0 -50% 0 100%;
    }

    .pagination__item--gap + .pagination__item .pagination__link::after {
      inset: 0 100% 0 -50%;
    }
  }

  @media screen and (max-width: 749px) {
    .pagination {
      --pagination-size: 44px;
      --pagination-inset: 5px;

      padding: var(--padding-lg) var(--padding-sm);
    }

    .pagination__link {
      font-size: var(--font-size--sm);
    }

    .pagination__item--mobile-hide {
      display: none;
    }

    .pagination__item--mobile-only {
      display: grid;
    }

    .pagination__item:has(.pagination__link--gap) {
      width: calc(var(--pagination-size) * 0.5);
    }
  }
/* END_SNIPPET:pagination-controls */

/* START_SNIPPET:password-layout-styles (INDEX:222) */
.password-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .password-dialog {
    max-width: 100vw;
    max-height: 100svh;
    width: 100vw;
    height: 100svh;
    border: none;
    transition: opacity var(--animation-values), display var(--animation-speed) allow-discrete,
      overlay var(--animation-speed) allow-discrete;

    &::backdrop {
      display: none;
    }
  }

  .password-dialog[open] {
    opacity: 1;
    top: 0;
    left: 0;
  }

  @starting-style {
    .password-dialog[open] {
      opacity: 0;
    }
  }

  .password-dialog:not([open]) {
    opacity: 0;
  }

  @starting-style {
    .password-dialog:not([open]) {
      opacity: 1;
    }
  }

  .password-dialog__close-button {
    cursor: pointer;
  }

  .password-dialog__header {
    position: absolute;
    top: 0;
    right: 0;
    padding: var(--padding-lg);
    z-index: var(--layer-raised);
  }

  .password-dialog__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--padding-lg);
    height: 100%;
    transition: transform var(--animation-values);
  }

  .password-dialog__content .email-signup__message {
    padding-block-start: var(--padding-xl);
  }

  .password-dialog[open] .password-dialog__content {
    transform: translateY(0);
  }

  @starting-style {
    .password-dialog[open] .password-dialog__content {
      transform: translateY(1em);
    }
  }

  .password-dialog:not([open]) .password-dialog__content {
    transform: translateY(1em);
  }

  @starting-style {
    .password-dialog:not([open]) .password-dialog__content {
      transform: translateY(0);
    }
  }

  .storefront-password-form {
    max-width: 400px;
    width: 100%;
  }

  .email-signup__input-group,
  .password-dialog__submit-button {
    width: 100%;

    @media screen and (min-width: 750px) {
      width: auto;
    }
  }
/* END_SNIPPET:password-layout-styles */

/* START_SNIPPET:pdp-titel-kern (INDEX:224) */
/* Die Schriftgroessen kommen aus den Theme-Einstellungen. Hier steht nur das
   Verhaeltnis: Der Titel benennt, die Subline unterscheidet — also ist sie
   kleiner und ruhiger, aber nicht versteckt. */
.pdt__titel {
  margin: 0;
  font-family: var(--font-heading--family);
  font-size: var(--font-h3--size);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--3idee-ink);
}
/* Die Trennlinie unter dem Titel steht NICHT mehr hier. Sie ist ein eigener
   Baustein (die Trennlinie des Themes), damit ihr Abstand nach oben und nach
   unten getrennt einstellbar ist — innerhalb eines Bausteins ginge das nicht,
   und genau daran lag es, dass die Linie hier weiter vom Text entfernt stand
   als die unter der Passung. */
.pdt__sub {
  margin: var(--margin-2xs, 8px) 0 0;
  /* Nicht die Absatzgroesse: Die liegt bei 14 Punkt und damit unter fast
     allem, was im Dreispalter darunter steht — die Zeile, die das Produkt
     unterscheidet, war die leiseste der Seite. H5 ist der Grad zwischen
     Ueberschrift und Fliesstext und genau der richtige Rang. */
  font-size: var(--font-h5--size, 18px);
  line-height: 1.35;
  color: var(--3idee-muted);
}
/* END_SNIPPET:pdp-titel-kern */

/* START_SNIPPET:predictive-search-styles (INDEX:228) */
/* Shared predictive search styles (used by both predictive-search and predictive-search-empty sections) */
  .predictive-search-dropdown {
    display: flex;
    flex-direction: column;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--layer-base);
  }

  .predictive-search-results__inner {
    flex-grow: 1;
    overflow-y: auto;
    padding-block: var(--padding-lg);
    container-type: inline-size;
    color: var(--color-foreground);
  }

  .predictive-search-results__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size--body-md);
    font-weight: 500;
    margin-block: var(--margin-sm) var(--margin-xs);
    width: 100%;
    text-transform: var(--title-case);

    &:first-of-type {
      margin-block-start: 0;
    }

    @media screen and (max-width: 749px) {
      margin-block: var(--margin-lg) var(--margin-sm);
    }
  }

  .predictive-search-results__no-results {
    animation-delay: 100ms;
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
  }

  .predictive-search-results__no-results:last-child {
    margin-block: var(--margin-lg);
    text-align: center;
  }

  /* Predictive search section styles */
  input[type='search']::-webkit-search-decoration {
    -webkit-appearance: none; /* stylelint-disable-line */
  }

  .search-action .predictive-search {
    z-index: calc(var(--layer-header-menu) + 2);
  }

  .search-action .search-modal .predictive-search {
    z-index: var(--layer-window-overlay);
  }

  .header__column--right .predictive-search-form__content-wrapper {
    right: 0;
    left: unset;
  }

  .search-modal .predictive-search-form__content-wrapper {
    width: 100%;

    @media screen and (min-width: 750px) {
      height: fit-content;
    }
  }
  .dialog-modal .predictive-search-form__header-inner {
    @media screen and (min-width: 750px) {
      border: 0;
    }
  }

  .search-modal__content .predictive-search-form__content {
    max-height: var(--modal-max-height);
  }

  .predictive-search:has(.predictive-search-dropdown) .search-input {
    outline-color: transparent;
  }

  .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header-inner:focus-within {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;

    @media screen and (max-width: 749px) {
      border-bottom-color: transparent;
    }
  }

  .predictive-search:has(.predictive-search-dropdown[aria-expanded='true'])
    .predictive-search-form__header-inner:focus-within {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    border-radius: var(--search-border-radius);

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs);
    }
  }

  .dialog-modal .predictive-search-form__header {
    border: 0;
    border-radius: 0;
    background-color: var(--color-background);
    border-bottom: var(--style-border-width) solid var(--color-border);

    @media screen and (min-width: 750px) {
      padding: var(--padding-2xs) var(--padding-2xs) 0;
      border-bottom: var(--search-border-width) solid var(--color-border);
    }

    @media screen and (max-width: 749px) {
      transition: box-shadow 0.2s ease;
      box-shadow: none;
    }
  }

  .search-action .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header:focus-within {
    border-radius: var(--search-border-radius) var(--search-border-radius) 0 0;
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    background-color: var(--color-background);

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs) var(--style-border-radius-inputs) 0 0;
    }
  }

  @media screen and (max-width: 749px) {
    .dialog-modal .predictive-search__close-modal-button {
      padding-inline-start: var(--margin-xs);
      margin-inline-start: 0;
    }
  }

  .dialog-modal[open] {
    @media screen and (max-width: 749px) {
      border-radius: 0;
    }
  }

  .dialog-modal .predictive-search-form__header:has(.predictive-search-form__header-inner:focus-within) {
    @media screen and (min-width: 750px) {
      border-bottom-color: transparent;
    }
  }

  @media screen and (max-width: 749px) {
    .dialog-modal {
      .predictive-search__reset-button-icon {
        display: none;
      }

      .predictive-search__reset-button-text {
        display: block;
      }

      .predictive-search-form__content {
        /* The parent has overflow auto, we want to prevent a double scrollbar during animation */
        max-height: 100%;
      }

      .predictive-search-form__content-wrapper {
        box-shadow: none;
      }

      .predictive-search-form__header {
        box-shadow: none;
      }

      .predictive-search-form__footer {
        padding-block: var(--padding-2xl);
      }
    }
  }

  .predictive-search-results__pill {
    font-weight: 500;
    white-space: nowrap;
    color: var(--color-foreground);
    transition: background-color var(--animation-speed-medium) var(--animation-timing-hover),
      box-shadow var(--animation-speed-medium) var(--animation-timing-bounce),
      transform var(--animation-speed-medium) var(--animation-timing-bounce);
    margin: 2px;

    &:hover {
      transform: scale(1.03);
      box-shadow: 0 2px 5px rgb(0 0 0 / var(--opacity-8));
    }
  }

  .predictive-search-results__pill mark {
    background-color: transparent;
    font-weight: 200;
    color: var(--color-foreground-subdued);
  }

  .predictive-search-results__pill:focus,
  .predictive-search-results__pill:hover,
  .predictive-search-results__card--query:is([aria-selected='true'], :focus-within) .predictive-search-results__pill {
    --pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));

    background-color: var(--pill-background-color);
    outline: var(--border-width-sm) solid var(--color-border);
    border: var(--border-width-sm);
    text-decoration: none;
  }

  .predictive-search-results__wrapper.predictive-search-results__wrapper-queries {
    margin-bottom: var(--margin-lg);
    padding-inline: var(--padding-xl);
    gap: var(--gap-2xs);
  }

  .predictive-search-results__card {
    --title-font-size: var(--font-size--md);
    --title-margin-block: var(--margin-xs);

    flex: 0 0 auto;
    scroll-snap-align: start;
    scroll-margin-block: calc(var(--title-font-size) + var(--title-margin-block) + var(--padding-sm))
      calc(var(--padding-xl) + var(--button-padding-block) * 2);
    transition: transform var(--animation-speed-medium) var(--animation-timing-default),
      background-color var(--animation-speed-medium) var(--animation-timing-hover),
      border-color var(--animation-speed-medium) var(--animation-timing-hover);

    &:nth-last-child(3) {
      scroll-snap-align: end;
    }

    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
    }
  }

  .recently-viewed-wrapper .predictive-search-results__card {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .recently-viewed-wrapper.removing .predictive-search-results__card {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
  }

  .predictive-search-results__card--product,
  .recently-viewed-wrapper .predictive-search-results__card--product {
    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
    }

    &:hover {
      background-color: var(--card-bg-hover);
      border-radius: var(--product-corner-radius);
      padding: calc(var(--padding-2xs) + 2px);
      margin: calc((var(--padding-2xs) + 2px) * -1);
    }

    &:is([aria-selected='true'].keyboard-focus, &:focus-visible, &:has(.resource-card:focus-visible)) {
      background-color: var(--card-bg-hover);
      padding: calc(var(--padding-2xs) + 1px);
      margin: calc((var(--padding-2xs) + 1px) * -1);
      outline: var(--border-width-sm) solid var(--color-border);
      border-radius: calc(var(--product-corner-radius) + 1px);
      border-color: var(--card-border-focus);
    }
  }

  .predictive-search-results__card:not(.predictive-search-results__card--product) {
    padding: var(--padding-sm);
    border: var(--border-width-sm) solid var(--color-border);
    border-radius: var(--card-corner-radius);
    width: 60cqi;
    content-visibility: visible;

    @media screen and (min-width: 750px) {
      width: 27.5cqi;
    }

    &:hover {
      border-color: var(--card-border-hover);
      background-color: var(--card-bg-hover);
    }

    &[aria-selected='true'].keyboard-focus {
      border-color: var(--card-border-hover);
      background-color: var(--card-bg-hover);
    }

    &:active {
      transform: scale(0.97);
      transition: transform var(--animation-speed-medium) var(--animation-timing-active);
    }
  }

  @keyframes search-element-scale-in {
    0% {
      transform: scale(0.95);
      opacity: 0;
    }

    40% {
      opacity: 1;
    }

    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  @keyframes search-element-scale-out {
    0% {
      transform: scale(1);
      opacity: 1;
    }

    100% {
      transform: scale(0.95);
      opacity: 0;
    }
  }

  @keyframes search-element-slide-in-top {
    from {
      margin-top: calc(var(--modal-top-margin) + var(--padding-sm));
      opacity: 0;
    }

    to {
      margin-top: var(--modal-top-margin);
      opacity: 1;
    }
  }

  @keyframes search-element-slide-out-top {
    from {
      margin-top: var(--modal-top-margin);
      opacity: 1;
    }

    to {
      margin-top: calc(var(--modal-top-margin) + var(--padding-sm));
      opacity: 0;
    }
  }

  @keyframes content-slide {
    from {
      transform: translateY(var(--slide-from, 0));
      opacity: var(--slide-opacity-from, 1);
    }

    to {
      transform: translateY(var(--slide-to, 0));
      opacity: var(--slide-opacity-to, 1);
    }
  }

  .predictive-search-results__list {
    --slide-width: 27.5%;
    --slideshow-gap: var(--gap-md);

    /* Make space for the outline to be visible */
    padding-block-start: var(--border-width-sm);
  }

  .predictive-search-results__list slideshow-arrows {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .predictive-search-results__no-results,
  .predictive-search-results__wrapper,
  .predictive-search-results__wrapper-products .predictive-search-results__card {
    animation: search-element-slide-up var(--animation-speed-medium) var(--animation-timing-bounce) backwards;
  }

  slideshow-slide .resource-card {
    /* stylelint-disable-next-line declaration-no-important */
    animation-delay: 0ms !important;
  }

  .predictive-search-results__list,
  .predictive-search-results__wrapper {
    animation-duration: var(--animation-speed-medium);
  }

  .predictive-search-results__wrapper-queries {
    animation-delay: 50ms;
  }

  .predictive-search-results__list:nth-of-type(2) {
    animation-delay: 150ms;
  }

  .predictive-search-results__list:nth-of-type(3) {
    animation-delay: 200ms;
  }

  .predictive-search-results__list:nth-of-type(4) {
    animation-delay: 250ms;
  }

  .predictive-search-results__list:last-child {
    margin-block-end: 0;
  }

  [data-resource-type] {
    /* stylelint-disable-next-line declaration-no-important */
    animation-delay: 0ms !important;
  }

  .predictive-search-results__no-results.removing,
  .predictive-search-results__wrapper.removing {
    animation: search-element-slide-down var(--animation-speed-medium) var(--animation-timing-fade-out) forwards;
  }

  .predictive-search-results__card.removing {
    animation: fadeOut var(--animation-speed-medium) var(--animation-timing-fade-out) forwards;
  }

  .predictive-search-results__wrapper {
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
  }

  @keyframes search-element-slide-up {
    from {
      opacity: 0;
      transform: translateY(8px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes search-element-slide-down {
    from {
      opacity: 1;
      transform: translateY(0);
    }

    to {
      opacity: 0;
      transform: translateY(8px);
    }
  }

  .predictive-search-results__card--query {
    transition: transform var(--animation-speed-medium) var(--animation-timing-bounce);
    transform-origin: center;

    &:active {
      transform: scale(0.97);
    }
  }

  /* Products list styles */
  .predictive-search-results__products {
    padding-inline: var(--padding-xl);
  }

  .recently-viewed-wrapper {
    display: grid;
    grid-template-rows: auto auto;
    max-height: 1000px;
    opacity: 1;
    overflow: visible;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top center;
    transform: translateY(0);
  }

  .recently-viewed-wrapper.removing {
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
  }

  .predictive-search-results__clear.button-unstyled {
    color: var(--color-foreground);
    opacity: 0.68;
    transition: opacity var(--animation-speed-medium) var(--animation-easing);
    padding: 0;
    margin-left: var(--margin-sm);

    &:hover {
      opacity: 1;
    }
  }

  .recently-viewed-wrapper.removing .predictive-search-results__card {
    transition: none;
    transform: none;
    opacity: 1;
  }

  .recently-viewed-wrapper > * {
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(1) {
    animation-delay: 30ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(2) {
    animation-delay: 60ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(3) {
    animation-delay: 90ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(4) {
    animation-delay: 120ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(n + 5) {
    animation-delay: 150ms;
  }

  .predictive-search-results__wrapper-products {
    animation-delay: 50ms;
  }

  /* Resource carousel styles */
  .predictive-search-results__wrapper {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    padding-block-end: var(--padding-sm);
    padding-inline: 0;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--padding-xl);
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .predictive-search-results__wrapper slideshow-slides {
    --gutter-slide-width: var(--padding-xl);

    /* Add padding to prevent hover animations from being clipped in slideshow
       15px accommodates:
       - Scale effect (9px on each side from 1.03 scale)
       - Lift effect (4px upward movement)
       - Shadow (15px spread with -5px offset)
       Using 16px for better alignment with our spacing scale */
    padding-block: var(--padding-xl);
    margin-block: calc(-1 * var(--padding-xl));
    gap: var(--gap-md);
  }

  .predictive-search-results__resource-header {
    display: flex;
    padding-inline: var(--padding-xl);
    justify-content: space-between;
    align-items: center;
    height: 32px;
  }

  .predictive-search-results__resource-header .svg-wrapper {
    width: var(--icon-size-xs);
  }

  .predictive-search-results__wrapper-products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding-block-end: var(--padding-sm);
    gap: var(--gap-md);
    transition: height var(--animation-speed-medium) var(--animation-easing);

    @container (min-width: 550px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .predictive-search-results__wrapper-products:last-child {
    padding-block-end: var(--padding-lg);

    @media screen and (min-width: 750px) {
      padding-block-end: var(--padding-sm);
    }
  }

  .predictive-search-results__resource-header .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header:has(slideshow-controls) .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header slideshow-controls {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }
/* END_SNIPPET:predictive-search-styles */

/* START_SNIPPET:price-filter (INDEX:230) */
/* Price filter */
  .price-facet {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
  }
  .price-facet--horizontal {
    min-width: 360px;
  }

  .price-facet__inputs-wrapper {
    display: flex;
    flex-direction: row;
    padding: var(--style-border-width-inputs);
    gap: calc(var(--gap-sm) + (var(--style-border-width-inputs) * 2));
  }

  @container (max-width: 199px) {
    .price-facet__inputs-wrapper {
      flex-wrap: wrap;
    }
  }

  .price-facet__input {
    width: 100%;
    text-align: right;
    padding-left: calc(2.5 * var(--input-padding-x));
  }

  .price-facet__input::placeholder {
    color: var(--facets-input-label-color);
  }

  .price-facet__separator {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-paragraph--size);
  }

  .price-facet__highest-price {
    color: var(--color-foreground-muted);
    padding: var(--padding-xs) 0 var(--padding-sm);
  }

  .price-facet__highest-price--horizontal {
    padding: 0 var(--padding-md) var(--padding-xs);
  }

  .price-facet__label {
    top: 0;
    left: 0;
    color: var(--facets-input-label-color);
    padding: var(--input-padding-y) var(--input-padding-x);
    transform: none;
  }
/* END_SNIPPET:price-filter */

/* START_SNIPPET:product-badges-styles (INDEX:232) */
.product-badges {
    --badge-inset: max(var(--padding-xs), calc((var(--border-radius) + var(--padding-xs)) * (1 - cos(45deg))));

    position: absolute;
    z-index: var(--layer-flat);
  }

  .product-badges--bottom-left {
    bottom: calc(var(--badge-inset) + var(--padding-block-start));
    left: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges--top-left {
    top: calc(var(--badge-inset) + var(--padding-block-start));
    left: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges--top-right {
    top: calc(var(--badge-inset) + var(--padding-block-start));
    right: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges__badge {
    --badge-font-size: var(--font-size--xs);

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-foreground);
    background: var(--color-background);
    font-size: var(--badge-font-size);
    font-family: var(--badge-font-family);
    font-weight: var(--badge-font-weight);
    text-transform: var(--badge-text-transform);
    border-radius: var(--badge-border-radius);
  }

  .product-badges__badge--rectangle {
    padding-block: var(--badge-rectangle-padding-block);
    padding-inline: var(--badge-rectangle-padding-inline);
  }
/* END_SNIPPET:product-badges-styles */

/* START_SNIPPET:product-card (INDEX:233) */
.product-card__placeholder-image svg {
    height: 100%;
  }

  .product-card__content slideshow-component {
    --cursor: pointer;
  }

  @media screen and (max-width: 749px) {
    .product-card slideshow-arrows .slideshow-control {
      display: none;
    }
  }
/* END_SNIPPET:product-card */

/* START_SNIPPET:product-grid (INDEX:234) */
.product-grid {
    --product-grid-gap: var(--product-grid-gap-mobile);
    --mobile-columns: 2; /* Default value */

    isolation: isolate;

    @media screen and (min-width: 750px) {
      --product-grid-gap: var(--product-grid-gap-desktop);
    }
  }

  .product-grid slideshow-arrows .slideshow-control {
    display: none;

    @media screen and (min-width: 750px) {
      display: grid;
    }
  }

  /* This triggers iOS < 16.4 */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    /* Force aspect ratio to auto for iOS < 16.4 since it's not compatible with the infinite pagination */
    .product-grid .product-media,
    .product-grid .product-media-container {
      aspect-ratio: auto;
    }
  }

  .main-collection-grid {
    grid-column: var(--grid-column--mobile);
    padding: var(--grid--margin--mobile);

    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
      padding: var(--padding-block-start) var(--padding-inline-end) var(--padding-block-end) var(--padding-inline-start);
    }
  }

  .main-collection-grid__empty {
    padding-block: var(--padding-6xl);
    padding-inline: var(--page-margin);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--padding-sm);
  }

  .main-collection-grid__empty-title {
    margin: 0;
  }
/* END_SNIPPET:product-grid */

/* START_SNIPPET:product-information-content (INDEX:235) */
.product-information {
    gap: var(--gap) 0;
  }

  /* Base grid layout */
  .product-information__grid {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
  }

  /* Default column positions */
  .product-details {
    order: 1;
  }

  .product-information__media {
    order: 0;
    width: 0;
    min-width: 100%;
  }

  .product-information__media .product-media-gallery__placeholder-image {
    width: 100%;
    height: 100%;
  }

  /* Mobile styles */
  @media screen and (max-width: 749px) {
    .product-information__media {
      grid-column: 1 / -1;
    }

    .product-details {
      grid-column: 2 / 3;
    }
  }

  /* Desktop styles */
  @media screen and (min-width: 750px) {
    .product-information__grid {
      grid-column: 2;
    }

    /* Position when there is no media */
    .product-information__grid.product-information--media-none {
      .product-details {
        width: var(--narrow-content-width);
        margin: 0 auto;
      }
    }

    /* Position when there is media */
    .product-information__grid:not(.product-information--media-none) {
      /* Media on the left side */
      &.product-information--media-left {
        grid-template-columns: 1fr min(50vw, var(--sidebar-width));

        .product-information__media {
          padding-right: calc(var(--gap, 0) / 2);
        }

        .product-details {
          padding-left: calc(var(--gap, 0) / 2);
        }

        &:has(.media-gallery--extend) {
          grid-column: 1 / 3;
        }
      }

      /* Media on the right side */
      &.product-information--media-right {
        grid-template-columns: min(50vw, var(--sidebar-width)) 1fr;

        .product-information__media {
          padding-left: calc(var(--gap, 0) / 2);
          order: 1;
        }

        .product-details {
          padding-right: calc(var(--gap, 0) / 2);
          order: 0;
        }

        &:has(.media-gallery--extend) {
          grid-column: 2 / -1;
        }
      }

      /* Equal width columns */
      &.product-information__grid--half,
      &.product-information__grid--half:has(.media-gallery--extend) {
        grid-column: 1 / -1;
        grid-template-columns:
          var(--full-page-grid-margin) calc(var(--full-page-grid-central-column-width) / 2) calc(
            var(--full-page-grid-central-column-width) / 2
          )
          var(--full-page-grid-margin);

        &.product-information--media-left {
          .product-information__media {
            grid-column: 2 / 3;

            &:has(.media-gallery--extend) {
              grid-column: 1 / 3;
            }
          }

          .product-details {
            grid-column: 3 / 4;
          }
        }

        &.product-information--media-right {
          .product-information__media {
            grid-column: 3 / 4;

            &:has(.media-gallery--extend) {
              grid-column: 3 / -1;
            }
          }

          .product-details {
            grid-column: 2 / 3;
          }
        }
      }
    }

    /* Handle full width section */
    .section--full-width {
      .product-information__grid:not(.product-information--media-none) {
        &.product-information--media-left,
        &.product-information--media-right {
          grid-column: 1 / -1;
        }

        &.product-information--media-left .product-details {
          padding-inline-end: var(--padding-lg);
        }

        &.product-information--media-right .product-details {
          padding-inline-start: var(--padding-lg);
        }

        &.product-information__grid--half.product-information--media-left {
          .product-information__media {
            grid-column: 1 / 3;
          }

          .product-details {
            grid-column: 3 / -1;
          }
        }

        &.product-information__grid--half.product-information--media-right {
          .product-information__media {
            grid-column: 3 / -1;
          }

          .product-details {
            grid-column: 1 / 3;
          }
        }
      }
    }
  }

  /* KEINE Regel zur senkrechten Ausrichtung im Zweispalter — Absicht.
     Bild- und Textspalte stehen mittig zueinander, wie das Theme es vorgibt.
     Klappt jemand eine Frage auf, rutscht das Bild um die Haelfte des
     Zuwachses nach: Am 20.08.2026 kurz auf "oben" gestellt und wieder
     zurueckgenommen — es ist gewolltes Theme-Verhalten und bei anderen
     Shops mit demselben Aufbau genauso zu sehen.
     Der Dreispalter richtet dagegen oben aus; dort stehen drei Spalten
     nebeneinander, und eine mitwandernde Mitte waere dort etwas anderes. */

  /* Wider sidebar for large screens */
  @media screen and (min-width: 1200px) {
    .product-information__grid:not(
        .product-information__grid--half,
        .product-information--media-none
      ).product-information--media-left {
      grid-template-columns: 2fr 1fr;
    }

    .product-information__grid:not(
        .product-information__grid--half,
        .product-information--media-none
      ).product-information--media-right {
      grid-template-columns: 1fr 2fr;
    }
  }

  .product-information__grid--limit-details .product-details > .group-block {
    --details-max-width: var(--sidebar-width);
    max-width: var(--details-max-width);
  }

  @media screen and (min-width: 1600px) {
    .product-information__grid--limit-details .product-details > .group-block {
      --details-max-width: 32rem;
    }
  }

  /* If the header is sticky, make product details content stick underneath the header */
  body:has(#header-group #header-component[data-sticky-state='active']) .product-details.sticky-content--desktop {
    --sticky-header-offset: var(--header-height);
  }

  /* ======================================================================
     Dreispalter — Bilder, Produktinfos, Kaufspalte
     Greift nur, wenn die Kopf- und die Kaufspalte Inhalt haben.
     ====================================================================== */

  /* Handy: eine Spalte, Reihenfolge nach dem Lesefluss —
     Bilder, Bewertung und Titel, dann die Pruefung mit Experten Check und
     Vorteilen, dann kaufen, zuletzt die Vertiefung.

     Die Vertiefung steckt im Markup in der Detailspalte, muss aber HINTER
     die Kaufbox. Deshalb loest die Detailspalte sich hier auf
     (display: contents) und gibt ihre Kinder direkt ans Raster weiter — nur
     so lassen sie sich einzeln einsortieren. */
  @media screen and (max-width: 749px) {
    /* Die Vertiefung steckt im Markup in der Detailspalte, muss aber HINTER
       die Kaufbox — und Umsortieren geht nur zwischen Geschwistern.

       Zwischen der Spalte und den Bausteinen liegen DREI Huellen:
         .product-details > .group-block > .group-block-content > [Bausteine]
       Alle drei muessen sich aufloesen, sonst bleibt eine Huelle das einzige
       Kind und die ganze Mittelspalte wandert als Block ans Ende. */
    .product-information--three-columns .product-details,
    .product-information--three-columns .product-details > .group-block,
    .product-information--three-columns .product-details .group-block-content {
      display: contents;
    }

    /* Leere Bildhuelle der Gruppe: ohne Regel stuende sie mit Ordnung 0 ganz oben. */
    .product-information--three-columns .product-details .group-block__media-wrapper {
      display: none;
    }

    .product-information--three-columns .product-head,
    .product-information--three-columns .product-buybox,
    .product-information--three-columns .product-details .group-block-content > * {
      grid-column: 2 / 3;
    }

    .product-information--three-columns .product-information__media { order: 0; }
    .product-information--three-columns .product-head { order: 1; }

    /* Pruefung, Experten Check, Vorteile — in ihrer Reihenfolge im Markup */
    .product-information--three-columns .product-details .group-block-content > * { order: 2; }

    /* Das Akkordeon ist der letzte Baustein und rutscht hinter die Kaufbox */
    .product-information--three-columns .product-details .group-block-content > *:last-child { order: 4; }

    .product-information--three-columns .product-buybox { order: 3; }
  }

  @media screen and (min-width: 750px) {
    .product-information__grid.product-information--three-columns:not(.product-information--media-none) {
      align-items: start;
      column-gap: var(--gap, 0);
      row-gap: 0;

      .product-information__media {
        grid-area: media;
        padding-inline: 0;
      }

      .product-head {
        grid-area: head;
      }

      .product-details {
        grid-area: details;
        padding-inline: 0;
      }

      .product-buybox {
        grid-area: buybox;
      }
    }
  }

  /* Zwischenbreiten: zwei Spalten.
     Rechts steht der Titel, darunter die Kaufspalte, darunter die Produktinfos —
     gleiche Rangfolge wie auf dem Handy. */
  @media screen and (min-width: 750px) and (max-width: 1199px) {
    .product-information__grid.product-information--three-columns:not(.product-information--media-none) {
      row-gap: var(--gap, 0);

      &.product-information--media-left {
        grid-template-columns: 1fr min(50vw, var(--sidebar-width));
        grid-template-areas:
          'media head'
          'media buybox'
          'media details';
      }

      &.product-information--media-right {
        grid-template-columns: min(50vw, var(--sidebar-width)) 1fr;
        grid-template-areas:
          'head media'
          'buybox media'
          'details media';
      }
    }
  }

  /* Ab hier drei Spalten nebeneinander.
     Der Kopf steht ueber allem in voller Breite: Serie, Titel und Bewertungen
     gehoeren zum Produkt, nicht zur Kaufspalte. Stand er dort, wurde die
     Kaufbox zur Titelzeile mit Preis — und der Titel las sich wie ein Teil des
     Kaufvorgangs statt wie der Name der Sache.

     Bilderspalte und Kaufspalte laufen darunter ueber beide Inhaltszeilen. */
  @media screen and (min-width: 1200px) {
    .product-information__grid.product-information--three-columns:not(.product-information--media-none) {
      grid-template-rows: auto auto;
      row-gap: 0;

      /* Der Abschluss nach unten kommt aus den Abstaenden des Kopfblocks
         selbst, damit es eine Stelle gibt und nicht zwei. */
      .product-head {
        margin-block-end: 0;
      }

      /* Die Bilderspalte bleibt die breiteste, aber nicht mehr
         ueberproportional. Die Kaufspalte bekommt eine Mindestbreite, damit
         sie nicht wie eine angehaengte Kasse wirkt. */
      &.product-information--media-left {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.90fr) minmax(350px, 0.80fr);
        grid-template-areas:
          'head  head    head'
          'media details buybox';
      }

      &.product-information--media-right {
        grid-template-columns: minmax(350px, 0.80fr) minmax(0, 0.90fr) minmax(0, 1.08fr);
        grid-template-areas:
          'head   head    head'
          'buybox details media';
      }
    }
  }

  /* ── Preis und Beschnitt ──────────────────────────────────────────────
     Beides muss in JEDER Anordnung greifen: Im Dreispalter sitzt der Preis
     in der Kaufspalte, im Zweispalter in der Detailspalte. Deshalb hier und
     nicht im Baustein der Kaufspalte — dessen Stylesheet laedt Shopify nur,
     wenn der Baustein auch gerendert wird.

     1. Der Preis erbt sonst die Absatzgroesse: 14 Punkt neben einem 52 Punkt
        hohen Kaufknopf.
     2. Gruppen mit Rahmenstil bekommen vom Theme "overflow: hidden", auch
        ohne gesetzten Rahmen. Steht der Inhalt ohne Innenabstand an der
        Kante, schneidet das die Ueberhaenge ab. */
  .product-buybox > .group-block,
  .product-details > .group-block {
    overflow: visible;
  }

  .product-buybox .price,
  .product-details .price {
    display: block;
    font-family: var(--font-heading--family);
    font-size: 31px;
    font-weight: 800;
    /* Keine negative Laufweite mehr: Bei 31 Punkt zieht sie die erste Ziffer
       ueber die Kante ihres Kastens hinaus — genau der Ueberhang, der vorher
       beschnitten wurde und jetzt nach links aus der Flucht laeuft. */
    line-height: 1.05;
  }

  .product-buybox .compare-at-price,
  .product-details .compare-at-price {
    font-size: 14px;
    font-weight: 400;
  }

  /* ── Steuerhinweis neben den Preis ────────────────────────────────────
     "inkl. MwSt." stand als eigene Zeile unter dem Preis. Neben einem
     zweistelligen Betrag bleibt dort eine halbe Spalte leer, waehrend die
     Zeile darunter den Preis vom naechsten Element wegdrueckt — viel
     Weissraum an der falschen Stelle. Nebeneinander fuellt der Hinweis die
     Luecke und die Kaufzone wird um eine Zeile kuerzer.

     Zwei Dinge muessen dafuer weichen, beide aus dem Textbaustein des Themes,
     auf dem der Preis aufsetzt:
       1. Er ist bereits ein Stapel (flex-direction: column). Nur "display:
          flex" zu setzen aendert daran nichts — die Richtung muss ausdruecklich
          auf eine Zeile gedreht werden. Genau daran hing es beim ersten Versuch.
       2. Jedes Kind bekommt dort die volle Breite. Preis und Hinweis brauchen
          stattdessen ihre Eigenbreite, sonst umbricht die Zeile sofort wieder.

     Auf der Grundlinie ausgerichtet, damit die kleine Zeile mit dem Preis
     aufsitzt und nicht in seiner Mitte schwebt. Wird die Spalte zu schmal,
     rutscht der Hinweis von selbst wieder unter den Preis.

     Alles andere im Preisbaustein — Ratenzahlung, Staffelpreise — behaelt die
     volle Breite und damit die eigene Zeile: Das gehoert nicht neben die Zahl. */
  .product-buybox product-price.text-block,
  .product-details product-price.text-block {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 10px;
  }

  .product-buybox product-price.text-block > [ref='priceContainer'],
  .product-buybox product-price.text-block > .tax-note,
  .product-details product-price.text-block > [ref='priceContainer'],
  .product-details product-price.text-block > .tax-note {
    width: auto;
  }

  /* ── Trennlinien ──────────────────────────────────────────────────────
     Die Linien zwischen Titel, Passung und Kauf sind der Trennlinien-
     Baustein des Themes — so haengt ihr Abstand nach oben und nach unten an
     zwei Reglern statt an einer festen Zahl in irgendeinem Baustein.

     Das Theme faerbt sie sonst mit seinem eigenen Randton. Hier bekommt es
     stattdessen die Haarlinie der Palette gereicht — kein Farbwert an dieser
     Stelle, nur der Verweis, sonst gaebe es zwei Grautoene fuer dieselbe
     Sache. */
  .product-details .divider,
  .product-buybox .divider {
    --color-border: var(--3idee-hairline);
  }
/* END_SNIPPET:product-information-content */

/* START_SNIPPET:product-media-gallery-content-styles (INDEX:236) */
media-gallery:where(.media-gallery--grid) .media-gallery__grid {
    display: none;
  }

  media-gallery.media-gallery--grid .media-gallery__grid .product-media-container {
    /* Needed for safari to stretch to full grid height */
    height: 100%;
  }

  @media screen and (min-width: 750px) {
    .media-gallery--two-column .media-gallery__grid {
      grid-template-columns: repeat(2, 1fr);
    }

    /* Display grid view as a carousel on mobile, grid on desktop */
    media-gallery:is(.media-gallery--grid) slideshow-component {
      display: none;
    }

    media-gallery:where(.media-gallery--grid) .media-gallery__grid {
      display: grid;
    }
  }

  zoom-dialog dialog {
    width: 100vw;
    height: 100vh;
    border: none;
    margin: 0;
    padding: 0;
    max-width: 100%;
    max-height: 100%;
    background: #fff;
    opacity: 0;
    transition: opacity var(--animation-speed) var(--animation-easing);
    scrollbar-width: none;

    &[open] {
      opacity: 1;
    }

    @media (prefers-reduced-motion: no-preference) {
      scroll-behavior: smooth;
    }

    &::backdrop {
      background: transparent;
    }
  }

  .product-media-container__zoom-button {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: var(--layer-flat);
    cursor: zoom-in;
    background-color: transparent;

    &:hover {
      background-color: transparent;
    }
  }

  slideshow-slide.product-media-container--tallest {
    content-visibility: visible;
  }

  .product-media__drag-zoom-wrapper {
    aspect-ratio: inherit;
    min-height: inherit;
    min-width: inherit;
    display: inherit;
    flex: inherit;
  }

  .media-gallery__mobile-controls {
    grid-area: auto;
  }

  .product-media-container--zoomable.product-media-container--image {
    cursor: zoom-in;
  }
/* END_SNIPPET:product-media-gallery-content-styles */

/* START_SNIPPET:product-media-gallery-content (INDEX:237) */
.dialog-thumbnails-list-container {
    position: fixed;
    width: 100%;
    bottom: 0;
    display: flex;
    z-index: var(--layer-raised);
  }

  .dialog-thumbnails-list {
    --active-thumbnail-border-color: rgb(var(--color-border-rgb) / var(--media-border-opacity));

    position: relative;
    display: inline-flex;
    flex-direction: row;
    gap: 8px;
    bottom: 0;
    overflow-x: auto;
    opacity: 0;
    padding: var(--padding-lg);
    margin-inline: auto;
    scrollbar-width: none;
    animation: thumbnailsSlideInBottom calc(var(--animation-speed) * 0.75) var(--animation-easing) forwards;
    animation-delay: calc(var(--animation-speed) * 1.5);
  }

  .dialog--closed .dialog-thumbnails-list {
    animation: thumbnailsSlideOutBottom var(--animation-speed) var(--animation-easing) forwards;
  }

  @media screen and (min-width: 750px) {
    .dialog-thumbnails-list {
      position: fixed;
      flex-direction: column;
      inset: 50% var(--margin-lg) auto auto;
      right: 0;
      max-height: calc(100vh - 200px);
      overflow-y: auto;
      animation: thumbnailsSlideInTop var(--spring-d220-b0-duration) var(--spring-d220-b0-easing) forwards;
      animation-delay: calc(var(--spring-d220-b0-duration) * 0.5);
    }

    .dialog--closed .dialog-thumbnails-list {
      animation: thumbnailsSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
    }
  }

  .dialog-thumbnails-list__thumbnail {
    width: var(--thumbnail-width);
    height: auto;
    transition: transform var(--animation-speed) var(--animation-easing);
    flex-shrink: 0;
    border-radius: var(--media-radius);

    img {
      height: 100%;
      object-fit: cover;
      border-radius: var(--media-radius);
      aspect-ratio: var(--aspect-ratio);
    }

    &:is([aria-selected='true']) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: calc(var(--focus-outline-offset) / 2);
      border: var(--style-border-width) solid var(--active-thumbnail-border-color);
    }
  }

  @supports (anchor-name: --test) {
    .dialog-thumbnails-list:has(.dialog-thumbnails-list__thumbnail:is([aria-selected='true']))::after {
      --inset-offset: calc(var(--focus-outline-offset) / 2);

      content: '';
      position: absolute;
      inset: anchor(top) anchor(right) anchor(bottom) anchor(left);
      position-anchor: --selected-thumbnail;
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: calc(var(--focus-outline-offset) / 2);
      border: var(--style-border-width) solid var(--active-thumbnail-border-color);
      border-radius: var(--media-radius);
      z-index: var(--layer-raised);
    }

    @media (prefers-reduced-motion: no-preference) {
      .dialog-thumbnails-list:has(.dialog-thumbnails-list__thumbnail:is([aria-selected='true']))::after {
        transition-property: inset;
        transition-duration: var(--spring-d180-b0-duration);
        transition-timing-function: var(--spring-d180-b0-easing);
      }
    }

    .dialog-thumbnails-list__thumbnail:is([aria-selected='true']) {
      outline: none;
      border: none;
      anchor-name: --selected-thumbnail;
    }
  }

  .dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
    /* Move the controls above the thumbnails. Need to calculate the height of the thumbnails list */
    bottom: calc(var(--thumbnail-width) / var(--media-preview-ratio) + var(--padding-lg) * 2);
    right: var(--padding-lg);
  }

  @media screen and (min-width: 750px) {
    .dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
      /* Move the controls up to match the padding on the thumbnails */
      bottom: var(--padding-lg);

      /* Move the controls to the left of the thumbnails list on the right */
      right: calc(var(--thumbnail-width) + var(--padding-lg) * 2);
    }
  }

  @media screen and (max-width: 749px) {
    /* Media gallery has a peeking slide on the right side always, and on the left side when the current slide is the last one */
    .media-gallery--hint
      :is(
        slideshow-slide:has(+ slideshow-slide[aria-hidden='false']:last-of-type),
        slideshow-slide[aria-hidden='false'] + slideshow-slide
      ) {
      content-visibility: auto;

      slideshow-component[actioned] & {
        content-visibility: visible;
      }
    }
  }

  .dialog-zoomed-gallery__dialog {
    background-color: var(--color-background);
    view-transition-name: zoom-dialog-ui;
  }

  .dialog-zoomed-gallery {
    cursor: zoom-out;
  }

  .dialog--preloading {
    opacity: 0;
  }

  @media screen and (max-width: 749px) {
    .dialog-zoomed-gallery {
      /* Prevent scroll wheel or swipe scrolling */
      overscroll-behavior: none;
      scrollbar-width: none;
      display: flex;
      scroll-snap-type: x mandatory;
      overflow-x: hidden;
      scroll-behavior: smooth;
      height: 100%;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    .dialog-zoomed-gallery .product-media-container {
      flex: 0 0 100%;
      scroll-snap-align: start;
      position: relative;
    }

    .dialog-zoomed-gallery .product-media-container--image .product-media {
      aspect-ratio: auto;
      height: 100%;
      width: 100%;
      overflow: hidden;
    }

    .dialog-zoomed-gallery .product-media-container--video,
    .dialog-zoomed-gallery .product-media-container--external_video {
      align-content: center;
    }

    .dialog-zoomed-gallery
      :is(.product-media-container--video, .product-media-container--external_video, .product-media-container--model)
      .product-media {
      aspect-ratio: auto;
      align-items: center;
      height: 100%;

      .product-media__image {
        height: 100%;
      }
    }

    .product-media__drag-zoom-wrapper {
      display: flex;
      aspect-ratio: auto;
      height: 100%;
      width: 100%;
      overflow: scroll;
      scrollbar-width: none;
      justify-content: center;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    .product-media__drag-zoom-wrapper .product-media__image {
      --product-media-fit: contain;

      object-fit: var(--product-media-fit);
      overflow: hidden;
      transform: scale(var(--drag-zoom-scale))
        translate(var(--drag-zoom-translate-x, 0), var(--drag-zoom-translate-y, 0));
    }

    .media-gallery--hint {
      --slideshow-gap: var(--gap-2xs);

      :not(.dialog-zoomed-gallery) > .product-media-container:not(:only-child) {
        width: 90%;

        .product-media img {
          object-fit: cover;
        }
      }
    }
  }

  .dialog-zoomed-gallery__close-button {
    color: #fff;
    mix-blend-mode: difference;
    z-index: var(--layer-raised);
  }

  /* Mobile thumbnails styling */
  @media screen and (max-width: 749px) {
    .media-gallery__mobile-controls[thumbnails] {
      --thumbnail-width: 44px;
    }

    .media-gallery__mobile-controls[thumbnails] .slideshow-controls__thumbnail {
      width: var(--thumbnail-width);
      height: auto;
    }
  }

  .dialog-zoomed-gallery .product-media-container--zoomable.product-media-container--image {
    cursor: zoom-out;
  }

  .dialog-zoomed-gallery .product-media-container--video deferred-media,
  .dialog-zoomed-gallery .product-media-container--external_video deferred-media {
    height: auto;
    aspect-ratio: var(--ratio);
  }

  .dialog-zoomed-gallery .product-media-container--model .product-media__image {
    /* Make the height match the height of the model-viewer */
    height: 100vh;
  }

  :root:active-view-transition .dialog-zoomed-gallery__dialog {
    background-color: transparent;
  }

  ::view-transition-group(zoom-dialog-ui) {
    z-index: calc(var(--layer-overlay) + 1);
  }

  ::view-transition-old(gallery-item-open),
  ::view-transition-new(gallery-item-open) {
    animation-timing-function: step-start;
  }

  ::view-transition-old(gallery-item-close),
  ::view-transition-new(gallery-item-close) {
    animation-timing-function: step-end;
  }

  @media screen and (min-width: 750px) {
    :root:active-view-transition .product-media__image {
      background-color: transparent;
    }
  }

  ::view-transition-group(gallery-item-open),
  ::view-transition-group(gallery-item-close) {
    z-index: var(--layer-overlay);
    border-radius: var(--gallery-media-border-radius);
    overflow: clip;
  }

  ::view-transition-group(gallery-item-open) {
    animation-timing-function: var(--spring-d300-b0-easing);
    animation-duration: var(--spring-d300-b0-duration);
  }

  ::view-transition-group(gallery-item-close) {
    animation-timing-function: var(--spring-d220-b0-easing);
    animation-duration: var(--spring-d220-b0-duration);
  }

  @media screen and (max-width: 749px) {
    ::view-transition-group(gallery-item-open),
    ::view-transition-group(gallery-item-close) {
      animation-timing-function: step-start;
      animation-duration: 0.1s;
    }

    ::view-transition-new(gallery-item-open) {
      animation: fade-in var(--spring-d180-b0-duration) var(--spring-d180-b0-easing) forwards;
      animation-timing-function: var(--spring-d180-b0-easing);
      animation-duration: var(--spring-d180-b0-duration);
    }

    ::view-transition-old(gallery-item-close) {
      animation: fade-out 0.08s linear forwards;
    }
  }

  @keyframes fade-in {
    from {
      scale: 0.98;
      opacity: 0.8;
    }
  }

  @keyframes fade-out {
    to {
      opacity: 0;
    }
  }

  /*
   * Product media gallery slideshow context styles
   */
  .product-media-gallery__slideshow--single-media slideshow-container {
    @media screen and (max-width: 749px) {
      grid-area: unset;
    }
  }

  /* Display grid view as a carousel on mobile, grid on desktop */
  media-gallery:is(.media-gallery--grid) slideshow-component {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  @media screen and (max-width: 749px) {
    /* Media gallery has a peeking slide on the right side always, and on the left side when the current slide is the last one */
    .media-gallery--hint
      :is(
        slideshow-slide:has(+ slideshow-slide[aria-hidden='false']:last-of-type),
        slideshow-slide[aria-hidden='false'] + slideshow-slide
      ) {
      content-visibility: auto;

      slideshow-component[actioned] & {
        content-visibility: visible;
      }
    }
  }

  @media screen and (min-width: 750px) {
    .media-gallery--carousel slideshow-component:has(slideshow-controls[thumbnails]) {
      &:has(slideshow-controls[pagination-position='right']) {
        display: grid;
        grid-template:
          'container controls' auto
          'arrows controls' min-content
          / 1fr auto;
      }

      &:has(slideshow-controls[pagination-position='left']) {
        display: grid;
        grid-template:
          'controls container' auto
          'controls arrows' min-content
          / auto 1fr;
      }

      slideshow-controls[pagination-position='left'] {
        order: -1;
      }
    }
  }

  .media-gallery--carousel slideshow-arrows .slideshow-control {
    padding-inline: 0 var(--padding-md);
    opacity: 1;
  }

  @media screen and (max-width: 749px) {
    slideshow-component:has(:not(.mobile\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter))
      .shopify-model-viewer-ui__controls-area {
      /* Position the controls just above the counter */
      bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
    }
  }

  @media screen and (min-width: 750px) {
    slideshow-component:has(:not(.desktop\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter))
      .shopify-model-viewer-ui__controls-area {
      /* Position the controls just above the counter */
      bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
    }
  }

  slideshow-slide.product-media-container--tallest {
    content-visibility: visible;
  }
/* END_SNIPPET:product-media-gallery-content */

/* START_SNIPPET:product-media (INDEX:238) */
.product-media {
    aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
    min-height: 0;
    min-width: 0;
  }

  .product-media__image {
    object-position: var(--focal-point, center center);
  }

  /*** Media border-radius feature ****/
  @media screen and (min-width: 750px) {
    .media-gallery--carousel slideshow-container,
    .media-gallery--grid .product-media > * {
      border-radius: var(--media-radius, 0);
      overflow: hidden;
    }

    /* When the CAROUSEL is on the LEFT side */
    .product-information:not(.product-information--media-right)
      .media-gallery--carousel.media-gallery--extend
      slideshow-container {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    /* When the CAROUSEL is on the RIGHT side */
    .product-information.product-information--media-right
      .media-gallery--carousel.media-gallery--extend
      slideshow-container {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    /* When the GRID is on the LEFT side */
    .product-information:not(.product-information--media-right) {
      /* One column */
      .media-gallery--grid.media-gallery--extend:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column:not(.media-gallery--large-first-image)
        .product-media-container:nth-of-type(odd)
        .product-media
        > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(even))
        .product-media
        > * {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }

    /* When the GRID is on the RIGHT side */
    .product-information.product-information--media-right {
      /* One column */
      .media-gallery--grid.media-gallery--extend:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column:not(.media-gallery--large-first-image)
        .product-media-container:nth-of-type(even)
        .product-media
        > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(odd))
        .product-media
        > * {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
  }
/* END_SNIPPET:product-media */

/* START_SNIPPET:quantity-selector (INDEX:240) */
.quantity-selector-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(var(--gap-sm) / 2);

    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  .price-per-item {
    display: block;
    color: var(--color-foreground);
    font-size: var(--font-size--sm);
    font-weight: normal;
  }
/* END_SNIPPET:quantity-selector */

/* START_SNIPPET:quick-add-modal-styles (INDEX:241) */
#quick-add-dialog {
    display: contents;
  }

  /* Inputs inside the quick-add modal use the global Input Fields settings,
     not any per-block overrides set on the product page. */
  .quick-add-modal .quantity-selector-wrapper {
    --color-input-background: inherit;
    --color-input-text: inherit;
    --color-input-text-rgb: inherit;
    --color-input-border: inherit;
    --style-border-width-inputs: inherit;
    --style-border-radius-inputs: inherit;
    --style-border-radius-buttons-primary: var(--style-border-radius-inputs);
    --style-border-radius-buttons-secondary: var(--style-border-radius-inputs);
  }

  .quick-add-modal .product-details .quantity-selector {
    border-radius: var(--style-border-radius-inputs);
  }

  @media screen and (min-width: 750px) {
    .quick-add-modal {
      width: var(--quick-add-modal-width);
      height: var(--quick-add-modal-height);
      max-width: none;
    }
  }

  .quick-add-modal {
    padding: 0;
    border: var(--style-border-popover);
    overflow: hidden;
    box-shadow: 0 5px 30px rgb(0 0 0 / var(--opacity-15));

    @media screen and (max-width: 749px) {
      position: fixed;
      margin: auto 0 0 0;
      min-height: unset;
      max-width: 100%;
      border-radius: 0;
      overflow: clip;
      height: fit-content;
    }
  }

  .quick-add-modal[open] {
    @media screen and (max-width: 750px) {
      border-top-left-radius: var(--style-border-radius-popover);
      border-top-right-radius: var(--style-border-radius-popover);
    }
  }

  .quick-add-modal[open] {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .quick-add-modal .view-more-details__wrapper {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .quick-add-modal[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal__close {
    position: absolute;
    top: var(--margin-2xs);
    right: var(--margin-2xs);
    transition: transform 0.15s var(--animation-timing-bounce);
    z-index: var(--layer-raised);
    overflow: visible;
    transform-origin: center;
  }

  .quick-add-modal__close:active {
    transform: scale(0.99) translateY(1px);
  }

  .quick-add-modal__close {
    &:focus-visible {
      outline: none;
    }

    &:focus-visible::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: calc(var(--style-border-radius-popover) - var(--margin-2xs));
      outline: var(--focus-outline-width) solid currentColor;
    }
  }

  .quick-add-modal__content {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 100% 1fr;
    position: relative;
    overflow-y: auto;
    max-height: 100vh;
    flex-grow: 1;

    @media screen and (max-width: 749px) {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: auto;
      padding-inline: var(--padding-xl);
      padding-block: var(--padding-xl);
      gap: var(--gap-lg);
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      height: auto; /* Prevent a bug in Safari where height:fit-content is not respected */
      max-height: 100vh;
    }
  }

  .quick-add-modal__content .media-gallery--grid .media-gallery__grid {
    grid-template-columns: 1fr;
  }

  .quick-add-modal__content .media-gallery--grid.media-gallery--two-column .product-media-container:first-child {
    grid-column: auto;
  }

  .quick-add-modal__content {
    /* One column */
    .media-gallery--grid:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--two-column:not(.media-gallery--large-first-image)
      .product-media-container:nth-of-type(odd)
      .product-media > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(even))
        .product-media > *,
        /* Carousel */
      .media-gallery--carousel slideshow-container {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  .quick-add-modal__content .view-more-details__wrapper {
    display: flex;
    justify-content: flex-start;
    width: 100%;
  }

  .view-more-details__wrapper .view-more-details {
    display: flex;
    align-items: center;
    width: fit-content;
  }

  .quick-add-modal__content .product-header {
    @media screen and (max-width: 749px) {
      display: flex;
      flex-direction: column;
      grid-column: 2 / -1;
      grid-row: 1;
      padding-right: var(--padding-2xl);
    }
  }

  .quick-add-modal__content .product-header a:not(product-price *) {
    @media screen and (max-width: 749px) {
      font-size: var(--font-size--md);
      font-weight: 500;
      color: inherit;
      width: fit-content;
    }
  }

  .quick-add-modal__content variant-picker,
  .quick-add-modal__content product-form-component {
    @media screen and (max-width: 749px) {
      grid-column: 1 / -1;
    }
  }

  .quick-add-modal__content .product-media-container__zoom-button {
    cursor: default;
  }

  .quick-add-modal__content .product-details {
    grid-column: 4 / -1;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    position: relative;

    dialog[open] & {
      animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
      animation-delay: 0.1s;
    }

    @media screen and (max-width: 749px) {
      grid-column: 2 / span 2;
      grid-row: span 1;
      max-height: 100%;
      height: 100%;
    }
  }

  @property --quick-add-modal-mask-start {
    syntax: '<length>';
    initial-value: 0px;
    inherits: false;
  }

  @property --quick-add-modal-mask-end {
    syntax: '<length>';
    initial-value: 0px;
    inherits: true;
  }

  @keyframes detect-scroll {
    from,
    to {
      --can-scroll: ;
    }
  }

  @supports (animation-timeline: scroll(self)) {
    dialog[open] .quick-add-modal__content .product-details {
      mask-image: linear-gradient(to bottom, transparent 0%, #000 var(--quick-add-modal-mask-start), #000 100%);
      animation: 0.3s var(--animation-timing-fade-in) 0.1s both fadeSlideIn, scrollStart 1s linear both,
        scrollEnd 1s linear both, detect-scroll 1ms linear none;
      animation-timeline: auto, scroll(self), scroll(self), scroll(self);
      animation-range: normal, 0px 48px, calc(100% - 48px) 100%, 0% 100%;
    }
  }

  @keyframes scrollStart {
    from {
      --quick-add-modal-mask-start: 0px;
    }
    to {
      --quick-add-modal-mask-start: 48px;
    }
  }

  @keyframes scrollEnd {
    from {
      --quick-add-modal-mask-end: 0px;
    }
    to {
      --quick-add-modal-mask-end: 48px;
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    flex-grow: 1;
    width: auto;
  }

  .quick-add-modal__content > * {
    min-height: 0;
  }

  .quick-add-modal__content .product-details :is(.view-product-title, .buy-buttons-block) {
    flex: 0 0 auto;
  }
  .quick-add-modal__content .product-details :is(.buy-buttons-block) {
    margin-top: auto;
    position: sticky;
    bottom: 0;
    padding-bottom: var(--padding-3xl);
    background-color: var(--color-background);
    z-index: var(--layer-raised);

    &::before {
      --quick-add-modal-mask-end-progressive-enhanced: 0px;

      position: absolute;
      content: '';
      display: block;
      inset: auto 0 100% 0;
      pointer-events: none;
      height: min(var(--gap-2xl), var(--gap));
      background-color: inherit;
      mask-image: linear-gradient(
        to top,
        #000 0%,
        #000 calc(var(--gap-2xs)),
        transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
        transparent
      );
    }
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) {
    position: static;
    padding-bottom: 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) > product-form-component {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) form {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form)::before {
    display: none;
  }

  .quick-add-modal__content .product-details .buy-buttons-block__bar {
    display: block;
    position: sticky;
    bottom: 0;
    margin-top: auto;
    padding-block: var(--gap-md) var(--padding-3xl);
    background-color: var(--color-background);
    z-index: var(--layer-raised);

    &::before {
      --quick-add-modal-mask-end-progressive-enhanced: 0px;

      position: absolute;
      content: '';
      display: block;
      inset: auto 0 100% 0;
      pointer-events: none;
      height: min(var(--gap-2xl), var(--gap));
      background-color: inherit;
      mask-image: linear-gradient(
        to top,
        #000 0%,
        #000 calc(var(--gap-2xs)),
        transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
        transparent
      );
    }
  }

  @supports (animation-timeline: scroll(self)) {
    .quick-add-modal__content .product-details :is(.buy-buttons-block)::before,
    .quick-add-modal__content .product-details .buy-buttons-block__bar::before {
      --mask-if-scroll: var(--can-scroll) var(--quick-add-modal-mask-end);
      --mask-if-no-scroll: 48px;
      --quick-add-modal-mask-end-progressive-enhanced: var(--mask-if-scroll, var(--mask-if-no-scroll));
      height: calc(var(--gap-2xs) + 48px);
    }
  }

  .quick-add-modal__content .product-details .variant-picker {
    flex: 0 0 auto;

    padding-block: min(var(--gap-2xl), var(--gap));
    margin-block-end: calc(var(--focus-outline-offset) + var(--focus-outline-width));
  }

  .quick-add-modal__content .variant-option--swatches {
    padding-inline-start: var(--padding-2xs);
  }

  .quick-add-modal__content .variant-option--swatches legend {
    margin-inline-start: calc(-1 * var(--padding-2xs));
  }

  .quick-add-modal__content:not(:has(.product-information__media)) .product-details {
    grid-column: 1 / -1;
  }

  .quick-add-modal__content .view-product-title {
    display: flex;
    padding-block: 0;
    margin-block-end: 12px;

    /* Prevent overlap between title and close button */
    padding-inline-end: calc(var(--padding-2xl) + calc(var(--minimum-touch-target) / 2));
  }

  .quick-add-modal__content .view-product-title a {
    color: inherit;
    text-decoration: none;
    text-align: left;
    font-size: var(--font-size--2xl);
    font-weight: 600;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s var(--animation-easing);
  }

  .quick-add-modal__content .product-details product-price {
    --text-align: left;
  }

  .quick-add-modal__content .product-details product-price.text-block--align-center {
    margin-inline: 0;
  }

  .quick-add-modal__content .product-details product-price.text-center {
    --text-align: left;
  }

  .quick-add-modal__content .product-details product-price > * {
    text-align: left;
  }

  .quick-add-modal__content
    .product-details
    *:not(
      .group-block,
      .group-block-content,
      .buy-buttons-block,
      .buy-buttons-block *,
      .view-product-title,
      .view-product-title *,
      variant-picker,
      variant-picker *,
      product-price,
      product-price *,
      product-inventory,
      product-inventory *,
      .view-more-details__wrapper,
      .view-more-details__wrapper *
    ) {
    @media screen and (min-width: 750px) {
      /* stylelint-disable-next-line declaration-no-important */
      display: none !important;
    }
  }

  .quick-add-modal__content
    .group-block:not(
      :has(
          .buy-buttons-block,
          .buy-buttons-block *,
          .view-product-title,
          .view-product-title *,
          variant-picker,
          variant-picker *,
          product-price,
          product-price *,
          product-inventory,
          product-inventory *,
          .view-more-details__wrapper,
          .view-more-details__wrapper *
        ),
      .buy-buttons-block
    ) {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .quick-add-modal__content .group-block-content {
      gap: 0;
    }

    .quick-add-modal__content .media-gallery__grid {
      gap: min(var(--gap-2xs), var(--image-gap));
      border-radius: var(--style-border-radius-popover, 0);
    }

    .quick-add-modal__content .media-gallery--grid .product-media img {
      border-radius: 0;
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    padding-block: var(--padding-3xl) 0;
  }

  .quick-add-modal__content :where(.product-details > .group-block > .group-block-content > *) {
    padding-inline: var(--padding-3xl);
  }

  .quick-add-modal__content slideshow-slide:not([aria-hidden='false']) {
    content-visibility: auto;
  }

  .quick-add-modal__content .product-information__media {
    width: 100%;
    grid-column: 1 / span 1;
    grid-row: 1;
    position: relative;
    top: 0;
    animation: fadeIn 0.4s var(--animation-timing-fade-in) both;

    @media screen and (min-width: 750px) {
      position: sticky;
      grid-column: 1 / 4;
      width: var(--quick-add-modal-gallery-width);
      overflow-y: auto;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .quick-add-modal__content .product-information__media media-gallery {
    pointer-events: none;

    @media screen and (min-width: 750px) {
      position: absolute;
      inset: 0;
    }
  }

  .quick-add-modal media-gallery {
    padding: 0;
  }

  .quick-add-modal__content .product-information__media slideshow-arrows {
    display: none;
  }

  .quick-add-modal__content .product-information__media slideshow-container {
    display: block;
  }

  .quick-add-modal__content .product-information__media slideshow-slides {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    overflow: visible;
    scroll-snap-type: none;
  }

  .quick-add-modal__content .product-information__media slideshow-slide {
    width: 100%;
    flex: none;
    scroll-snap-align: unset;
    position: relative;
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s var(--animation-easing);
  }

  .quick-add-modal__content .product-information__media slideshow-slide[aria-hidden='true'] {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(1) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(2) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.05s;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(3) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.1s;
  }

  .quick-add-modal__content .product-information__media :is(slideshow-controls, slideshow-controls[thumbnails]) {
    display: none;
  }

  .quick-add-modal__content .sticky-content,
  .quick-add-modal__content .sticky-content--desktop {
    top: 0;
  }

  .quick-add-modal__content .text-block.rte:not(product-price),
  .quick-add-modal__content .view-more-details__wrapper {
    display: none;
  }

  @keyframes fadeSlideIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_SNIPPET:quick-add-modal-styles */

/* START_SNIPPET:quick-add-styles (INDEX:243) */
/* Quick Add */
  .quick-add {
    --quick-add-offset: var(--padding-sm);
    --quick-add-right: calc(var(--quick-add-offset) + var(--padding-inline-end));
    --quick-add-bottom: calc(var(--quick-add-offset) + var(--padding-block-end));

    position: absolute;
    inset: 0;
    z-index: var(--layer-raised);
    pointer-events: none;

    @media screen and (min-width: 750px) {
      --quick-add-offset: var(--padding-md);
    }
  }

  .quick-add .variant-option__button-label input[data-option-available='false'] {
    cursor: not-allowed;
  }

  product-card:is(:hover, :focus-within) .quick-add__button {
    opacity: 1;
  }

  .quick-add__button {
    display: var(--quick-add-mobile-display, none);
    align-items: center;
    background: linear-gradient(var(--color-background) 0 100%) padding-box;
    padding: 0;
    border-radius: 50px;
    border: 2px solid hsl(0 0% 0% / 0.15);
    height: var(--button-size-md);
    cursor: pointer;
    opacity: var(--quick-add-mobile-opacity, 0);
    overflow: hidden;
    color: var(--quick-add-foreground, var(--color-foreground));
    background-color: var(--quick-add-background, var(--color-background));
    pointer-events: all;
    position: absolute;
    right: max(var(--quick-add-right), calc((var(--border-radius) + var(--quick-add-right)) * (1 - cos(45deg))));
    bottom: max(var(--quick-add-bottom), calc((var(--border-radius) + var(--quick-add-bottom)) * (1 - cos(45deg))));
    backdrop-filter: blur(20px) saturate(180%);

    &:hover {
      scale: 1.03;

      /* Hover stabilizer: extends hit area to maintain hover state */
      &::before {
        content: '';
        position: absolute;
        inset: -10px;
        z-index: -1;
      }
    }

    &:active {
      scale: 0.99;
    }

    .quick-add[stay-visible] & {
      display: grid;
    }

    @media screen and (min-width: 750px) {
      display: var(--quick-add-display, flex);
      opacity: 0;
    }
  }

  .quick-add__button.add-to-cart-button {
    height: var(--button-size-md);
  }

  .quick-add__button .add-to-cart-text {
    background: var(--quick-add-background, var(--color-background));
    overflow: hidden;
    border-radius: 50px;
    height: 100%;
    gap: 0;
  }

  .quick-add__button .svg-wrapper .checkmark-burst {
    width: 22px;
    height: 22px;
  }

  .quick-add__button .add-to-cart-icon {
    /* account for border width */
    height: 100%;
    width: calc(var(--button-size-md) - 4px);
  }

  .quick-add__button .add-to-cart-text__content {
    display: grid;
    grid-template-columns: 0fr;

    & > span {
      min-width: 0;

      span {
        padding-right: var(--padding-sm);
        opacity: 0;
        display: inline-block;
        filter: blur(2px);
        translate: 0.5ch 0;
      }
    }
  }

  .quick-add__button[data-added='true'] .add-to-cart-text {
    animation-name: atc-fade-out;
  }

  .quick-add__button[data-added='true'] .add-to-cart-text--added {
    translate: 0 0;
    animation-name: atc-fade-in;
  }

  .quick-add__product-form-component {
    height: 100%;
  }

  .quick-add__product-form-component .shopify-product-form {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    container-type: inline-size;
    height: 100%;
  }

  .quick-add-modal .product-media {
    width: 100%;
    height: 100%;
  }

  .quick-add-modal deferred-media {
    display: none;
  }

  .quick-add-modal .media-gallery--carousel slideshow-component {
    --cursor: default;
  }

  .quick-add__button:is(:hover, :focus-visible) {
    .add-to-cart-text__content {
      grid-template-columns: 1fr;

      span span {
        opacity: 1;
        translate: 0 0;
        filter: blur(0);
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .quick-add__button .add-to-cart-text__content {
      grid-template-columns: 1fr;

      span span {
        opacity: 1;
        translate: 0 0;
        filter: blur(0);
      }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .quick-add__button {
      transition-property: scale, translate, opacity;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);
    }

    .quick-add__button:is(:hover, :focus-visible) {
      .add-to-cart-text__content,
      .add-to-cart-text__content span span {
        transition-delay: var(--animation-speed);
      }
    }

    .quick-add__button .add-to-cart-text__content {
      transition-property: grid-template-columns;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);

      span span {
        transition-property: opacity, filter, translate;
        transition-duration: var(--animation-speed-slow);
        transition-timing-function: var(--ease-out-quad);
      }
    }
  }
/* END_SNIPPET:quick-add-styles */

/* START_SNIPPET:resource-card (INDEX:246) */
.resource-card__wrapper {
    display: block;
    height: 100%;
  }

  .resource-card {
    --resource-card-secondary-image-opacity: 0;
    --resource-card-primary-image-opacity: calc(1 - var(--resource-card-secondary-image-opacity));

    display: flex;
    flex-direction: column;
    row-gap: var(--padding-xs);
    position: relative;
    text-decoration: none;
    height: 100%;
    opacity: 0;
    animation: fadeIn var(--animation-speed-medium) var(--animation-timing-fade-in) forwards;
  }

  .resource-card__link {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .resource-card__content {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground);
    gap: var(--padding-3xs);

    .price {
      font-weight: 500;
    }

    .volume-pricing-note {
      display: block;
      margin-top: var(--padding-3xs);
      font-family: var(--font-body--family);
      font-weight: normal;
      font-size: min(0.85em, var(--font-paragraph--size));
      line-height: normal;
      letter-spacing: normal;
      text-transform: none;
      color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
    }
  }

  .resource-card[data-resource-type='article'] .resource-card__content,
  .resource-card[data-resource-type='page'] .resource-card__content {
    gap: var(--padding-xs);
  }

  .resource-card__image {
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    object-fit: cover;
    border-radius: var(--resource-card-corner-radius);
    opacity: var(--resource-card-primary-image-opacity);
  }

  .resource-card__image--secondary {
    position: absolute;
    top: 0;
    opacity: var(--resource-card-secondary-image-opacity);
    border-radius: var(--resource-card-corner-radius);
  }

  .resource-card__media:empty {
    display: none;
  }

  .resource-card__image-placeholder {
    padding: var(--padding-sm);
    font-size: var(--font-size--lg);
    line-height: var(--line-height--display-loose);
    word-break: break-word;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    border-radius: var(--resource-card-corner-radius);
    color: var(--color-foreground);
  }

  .resource-card__title {
    margin-block: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .resource-card__title.paragraph {
    line-height: 1.3;
  }

  .resource-card--overlay {
    height: 100%;

    &::before {
      content: '';
      position: absolute;
      inset: 50% 0 0;
      background: var(--gradient-image-overlay);
      border-radius: var(--resource-card-corner-radius);
      pointer-events: none;
      z-index: var(--layer-flat);
    }
  }

  .resource-card--overlay .resource-card__image {
    height: 100%;
  }

  .resource-card--overlay .resource-card__content {
    position: absolute;
    inset: auto 0 0;
    padding: var(--padding-lg) var(--padding-lg) var(--padding-sm);
    z-index: var(--layer-raised);
  }

  .resource-card--overlay .resource-card__title {
    color: var(--color-white);
  }

  /* Collection images */
  .resource-card__image-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-2xs);
  }

  .resource-card__collection-image {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: calc(var(--card-corner-radius) - (var(--padding-xs) / 2));
  }

  .resource-card__subtext {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
    margin-block-start: 0;
  }

  .resource-card__subtext.paragraph {
    font-size: var(--font-size--body-sm);
    line-height: var(--line-height--body-tight);
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .resource-card:has(.resource-card__image--secondary) {
    &:hover,
    &:focus {
      --resource-card-secondary-image-opacity: 1;
    }
  }
/* END_SNIPPET:resource-card */

/* START_SNIPPET:resource-image (INDEX:247) */
.resource-image {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    z-index: var(--layer-base);
    overflow: hidden;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: var(--ratio);
  }

  .resource-image__image {
    object-fit: cover;
    aspect-ratio: var(--ratio);
    width: 100%;
    height: 100%;
  }

  .resource-image--placeholder {
    width: 100%;
    height: 100%;
  }
/* END_SNIPPET:resource-image */

/* START_SNIPPET:resource-list-carousel (INDEX:248) */
.resource-list__carousel {
    --slide-width: 60vw;
    width: 100%;
    position: relative;
    container-type: inline-size;
    container-name: resource-list-carousel;

    .slideshow-control[disabled] {
      display: none;
    }

    .slideshow-control--next {
      margin-inline-start: auto;
    }
  }

  @container resource-list-carousel (max-width: 749px) {
    .resource-list__carousel .resource-list__slide {
      --slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max));
    }
  }

  @container resource-list-carousel (min-width: 750px) {
    .resource-list__carousel .resource-list__slide {
      --section-slide-width: calc(
        (100% - (var(--resource-list-column-gap) * (var(--column-count) - 1)) - var(--peek-next-slide-size)) /
          var(--column-count)
      );
      --fallback-slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max));
      --slide-width: var(--section-slide-width, var(--fallback-slide-width));
    }
  }

  .resource-list__carousel slideshow-slides {
    gap: var(--resource-list-column-gap);

    /* Add padding to prevent hover animations from being clipped in slideshow
     15px accommodates:
     - Scale effect (9px on each side from 1.03 scale)
     - Lift effect (4px upward movement)
     - Shadow (15px spread with -5px offset)
     Using 16px for better alignment with our spacing scale */
    margin-block: -16px;
    padding-block: 16px;
  }

  .resource-list__carousel slideshow-arrows {
    padding-inline: var(--util-page-margin-offset);
  }

  .resource-list__carousel .resource-list__slide {
    width: var(--slide-width);
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-width: 0;
  }

  /*
   * Resource list carousels have peeking slides on both sides.
   * We try to kick load them beforehand (they are lazy loaded otherwise).
   */
  .resource-list__carousel
    :is(
      slideshow-slide:has(+ slideshow-slide[aria-hidden='false']),
      slideshow-slide[aria-hidden='false'] + slideshow-slide
    ) {
    content-visibility: auto;

    slideshow-component[actioned] & {
      content-visibility: visible;
    }
  }
/* END_SNIPPET:resource-list-carousel */

/* START_SNIPPET:resource-list-styles (INDEX:249) */
.resource-list {
    --resource-list-mobile-gap-max: 9999px;
    --resource-list-column-gap: min(var(--resource-list-column-gap-desktop), var(--resource-list-mobile-gap-max));
    --resource-list-row-gap: min(var(--resource-list-row-gap-desktop), var(--resource-list-mobile-gap-max));

    width: 100%;

    @media screen and (max-width: 749px) {
      --resource-list-mobile-gap-max: 12px;
    }

    @container resource-list (max-width: 749px) {
      --resource-list-mobile-gap-max: 12px;
    }
  }

  .resource-list--grid {
    display: grid;
    gap: var(--resource-list-row-gap) var(--resource-list-column-gap);
    grid-template-columns: var(--resource-list-columns-mobile);

    @media screen and (min-width: 750px) {
      grid-template-columns: var(--resource-list-columns);
    }

    @container resource-list (max-width: 449px) {
      grid-template-columns: var(--resource-list-columns-mobile);
    }

    @container resource-list(min-width: 450px) and (max-width: 749px) {
      --resource-list-columns-per-row: 3;

      grid-template-columns: repeat(var(--resource-list-columns-per-row), 1fr);

      /* Avoid orphan in last row when there are 4, 7, or 10 items */
      &:has(.resource-list__item:first-child:nth-last-child(3n + 1)),
      /* Clean two full rows when there are 8 items */
      &:has(.resource-list__item:first-child:nth-last-child(8n)) {
        --resource-list-columns-per-row: 4;
      }
    }

    @container resource-list (min-width: 750px) {
      grid-template-columns: repeat(var(--resource-list-columns-per-row), 1fr);

      &:has(.resource-list__item:first-child:nth-last-child(n + 9)) {
        --resource-list-columns-per-row: 5;
      }

      &:has(.resource-list__item:first-child:nth-last-child(n + 7):nth-last-child(-n + 8)) {
        --resource-list-columns-per-row: 4;
      }

      &:has(.resource-list__item:first-child:nth-last-child(6)) {
        --resource-list-columns-per-row: 3;
      }

      &:has(.resource-list__item:first-child:nth-last-child(5)) {
        --resource-list-columns-per-row: 5;
      }

      &:has(.resource-list__item:first-child:nth-last-child(-n + 4)) {
        --resource-list-columns-per-row: 4;
      }
    }

    @container resource-list (min-width: 1200px) {
      &:has(.resource-list__item:first-child:nth-last-child(6)) {
        --resource-list-columns-per-row: 6;
      }
    }
  }

  .resource-list__item {
    height: 100%;
    color: var(--color-foreground);
    text-decoration: none;
  }
/* END_SNIPPET:resource-list-styles */

/* START_SNIPPET:search-modal (INDEX:252) */
/* Search modal style */
  .search-modal {
    --search-border-radius: var(--style-border-radius-popover);
    --search-border-width: var(--style-border-width);
  }

  .search-modal__content {
    /* Approx set the top so when the content is at max height, the modal is centered */
    --modal-top-margin: calc(50dvh - var(--modal-max-height) / 2 - 2rem);
    --modal-width: 66dvw;

    padding: 0;
    border: var(--style-border-popover);

    @media screen and (min-width: 750px) {
      width: var(--modal-width);
      margin-block-start: var(--modal-top-margin);
      overflow: hidden;
    }
  }

  /* Hide the default dialog backdrop on small screens */
  @media screen and (max-width: 749px) {
    .search-modal__content::backdrop {
      display: none;
    }
  }

  .dialog-modal[open].search-modal__content {
    transform-origin: bottom center;
    animation: search-element-slide-in-bottom 300ms var(--ease-out-quad) forwards;
    border-radius: var(--search-border-radius);
    box-shadow: var(--shadow-popover);

    @media screen and (max-width: 749px) {
      border-radius: 0;
    }
  }

  .dialog-modal.search-modal__content.dialog-closing {
    animation: search-element-slide-out-bottom 200ms var(--ease-out-quad) forwards;
  }

  .search-modal__content[open] {
    display: flex;
  }

  .search-modal__content :is(.predictive-search-dropdown, .predictive-search-form__content-wrapper) {
    position: relative;
  }

  .dialog-modal
    .predictive-search-form__header:has(
      .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
    )::before {
    content: '';
    position: absolute;
    right: calc(var(--padding-sm) + var(--minimum-touch-target));
    top: 0;
    bottom: 0;
    width: var(--border-width-sm);
    background-color: var(--color-border);
  }

  .dialog-modal
    .predictive-search-form__header:has(.predictive-search__reset-button:not(.predictive-search__reset-button[hidden]))
    > .predictive-search__close-modal-button {
    &::before {
      content: none;
    }
  }

  @media screen and (min-width: 750px) {
    .dialog-modal
      .predictive-search-form__header:has(
        .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
      )::before {
      right: calc(var(--padding-2xl) * 2);
    }
  }

  predictive-search-component {
    --resource-card-corner-radius: var(--product-corner-radius);

    display: flex;
    width: 100%;
    position: relative;
    margin-inline: auto;
    align-items: center;
    background-color: var(--color-background);
    z-index: var(--layer-heightened);
  }

  .predictive-search-form__footer {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    @media screen and (min-width: 750px) {
      --to-top-gradient-background: linear-gradient(
        to top,
        rgb(var(--color-background-rgb) / var(--opacity-90)),
        rgb(var(--color-background-rgb) / var(--opacity-80)),
        rgb(var(--color-background-rgb) / var(--opacity-40)),
        transparent
      );

      padding-block: var(--padding-xs) var(--padding-lg);
      background-image: var(--to-top-gradient-background);
    }
  }

  predictive-search-component:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    .predictive-search-form__footer {
    display: block;
  }

  .predictive-search-form {
    position: relative;
    width: 100%;
    align-self: flex-start;
  }

  .predictive-search-form__content {
    max-height: 50dvh;
    overflow-y: auto;
    background-color: var(--color-background);

    /* Firefox */
    scrollbar-width: none;

    /* Webkit browsers */
    &::-webkit-scrollbar {
      display: none;
    }
  }

  .predictive-search-form__content-wrapper {
    position: absolute;
    top: 100%;
    width: 100%;
    left: 0;
    z-index: var(--layer-raised);
    display: flex;
    flex-direction: column;
    border-radius: 0 0 var(--search-border-radius) var(--search-border-radius);
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    transform: translateZ(0);
    overflow: hidden;

    @media screen and (max-width: 749px) {
      border-radius: 0;
    }

    @media screen and (min-width: 750px) {
      max-height: var(--modal-max-height);
    }
  }

  /* Add new rule to apply bottom padding only when search button exists */
  .predictive-search-form__content-wrapper:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    > .predictive-search-form__content {
    padding-block-end: var(--padding-6xl);
  }

  .predictive-search-form__header-inner {
    background: var(--color-background);
    border: var(--search-border-width) solid var(--color-border);
    color: var(--color-foreground);
    border-radius: var(--style-border-radius-popover);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs);
      border: none;
    }
  }

  .predictive-search-form__header-inner:focus-within {
    outline-offset: var(--focus-outline-offset);

    @media screen and (min-width: 750px) {
      outline: var(--focus-outline-width) solid var(--color-foreground);
    }
  }

  .predictive-search-form__header {
    display: flex;
    position: sticky;
    top: 0;
    z-index: var(--layer-heightened);
    width: 100%;
    align-items: center;
    background-color: var(--color-input-background);
    border: var(--search-border-width) solid var(--color-border);
    border-radius: var(--style-border-radius-inputs);

    @media screen and (max-width: 749px) {
      padding: var(--padding-2xs) var(--padding-sm);
    }
  }

  .predictive-search-form__header:focus-within,
  .predictive-search-form__header-inner:focus-within,
  .predictive-search-form__header-inner:has(.search-input:is(:focus, :focus-visible)) {
    outline: none;
    box-shadow: none;
    /* stylelint-disable-next-line declaration-no-important */
    border-color: var(--color-border) !important;
  }

  input.search-input {
    border-radius: var(--style-border-radius-inputs);
    padding-block: var(--padding-sm);
    font-size: var(--font-size--md);
    width: 100%;
    color: var(--color-foreground);
    padding-inline: calc(var(--margin-lg) + var(--icon-size-lg)) 0;
    background: transparent;
    text-overflow: ellipsis;
    overflow: hidden;
    outline: none;
    border: 0;
  }

  input.search-input::placeholder {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-muted-text));
  }

  input.search-input,
  input.search-input:is(:focus, :focus-visible, :focus-within),
  .predictive-search-form__header *:is(:focus, :focus-visible) {
    outline: none;
    box-shadow: none;
  }

  input.search-input:hover {
    background-color: transparent;
  }

  .predictive-search__icon {
    position: absolute;
    left: var(--margin-xl);
    top: auto;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-60));

    @media screen and (min-width: 750px) {
      left: var(--margin-md);
    }
  }

  .predictive-search__icon > svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .predictive-search__reset-button {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    padding: 0;
    margin-inline-end: var(--margin-md);
    background: transparent;
    color: var(--color-foreground);
    opacity: 0.68;
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-out),
      visibility var(--animation-speed-medium) var(--animation-timing-fade-out);

    &:hover {
      color: var(--color-foreground);
    }

    &:active {
      transform: scale(0.9);
      transition: transform 100ms var(--animation-timing-active);
    }

    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-2xs);
    }
  }

  .predictive-search__reset-button[hidden] {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  .predictive-search__reset-button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    transition: background-color var(--animation-speed-medium) ease-in-out,
      transform var(--animation-speed-medium) var(--animation-timing-bounce);
    border-radius: 50%;

    &:hover {
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }
  }

  .predictive-search__reset-button:active .predictive-search__reset-button-icon {
    transform: scale(0.85);
    transition-timing-function: var(--animation-timing-active);
    transition-duration: 100ms;
  }

  .predictive-search__reset-button svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .predictive-search__reset-button-text {
    display: none;
  }

  .predictive-search__search-button {
    margin: auto;
    z-index: var(--layer-raised);
    transition: transform var(--animation-speed-medium) var(--animation-timing-bounce),
      box-shadow var(--animation-speed-medium) var(--animation-timing-hover);
    transform-origin: center;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgb(0 0 0 / var(--opacity-5));
    }

    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
      box-shadow: none;
    }
  }

  .predictive-search__close-modal-button {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;

    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    margin-inline-start: var(--margin-sm);
    padding: 0;
    box-shadow: none;

    &:active {
      transform: scale(0.8);
      transition: transform 100ms var(--animation-timing-active);
    }

    .svg-wrapper,
    svg {
      width: var(--icon-size-xs);
      height: var(--icon-size-xs);
    }
  }

  .predictive-search__close-modal-button:hover {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;
  }
/* END_SNIPPET:search-modal */

/* START_SNIPPET:search (INDEX:253) */
.search-action {
    --search-border-radius: var(--style-border-radius-inputs);
    --search-border-width: var(--style-border-width-inputs);

    display: flex;
  }

  @media screen and (max-width: 749px) {
    .search-action--hidden-on-drawer {
      display: none;
    }
  }

  @media screen and (min-width: 750px) {
    [data-menu-style='drawer'] .search-action--hidden-on-drawer {
      display: none;
    }

    [data-menu-style='menu'] .search-action--hidden-on-menu {
      display: none;
    }
  }

  [data-menu-style='menu'] .header__column--left .search-action {
    @media screen and (min-width: 750px) {
      margin-inline: calc(var(--padding-lg) * -1);
    }
  }

  .header__column--right .search-action {
    @media screen and (min-width: 750px) {
      margin-inline: calc(var(--gap-md) * -1) calc(var(--gap-xs) * -1);
    }
  }

  @media screen and (min-width: 750px) {
    .header__column--right .search-action--text {
      margin-inline: 0;
    }

    [data-menu-style='menu'] .header__column--left .search-action--text {
      margin-inline: 0;
    }
  }
/* END_SNIPPET:search */

/* START_SNIPPET:section (INDEX:254) */
.section-wrapper {
    --section-height-offset: 0px;
  }

  .section[data-shopify-visual-preview] {
    min-height: var(--section-preview-height);
    padding-top: 0;
  }

  .section[data-shopify-visual-preview] .custom-section-background {
    display: none;
  }

  body:has(#header-group > .header-section > #header-component[transparent]):not(
      :has(#header-group > .header-section + .shopify-section)
    )
    #MainContent
    > .section-wrapper:first-child {
    --section-height-offset: var(--header-group-height, 0);
  }

  .custom-section-background {
    grid-column: 1 / -1;
  }

  .custom-section-content {
    z-index: var(--layer-flat);
  }
/* END_SNIPPET:section */

/* START_SNIPPET:setup-fenster (INDEX:255) */
.stf__marke {
  display: block; margin-bottom: 18px;
  font-size: 12px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--3idee-ink);
}

/* ── Eine Zeile je Gerät ──────────────────────────────────────────────
   Bild, Name, darunter Größe und Gewicht — dieselbe Ordnung wie in Schritt 1
   des Finders, weil der Kunde sie dort schon gesehen hat. Gegliedert über
   Haarlinien statt über Flächen. */
.stf__zeile {
  display: flex; align-items: center; gap: 13px;
  padding: 12px 0; border-bottom: 1px solid var(--3idee-hairline);
}
.stf__zeile:first-child { border-top: 1px solid var(--3idee-hairline); }

.stf__bild {
  flex: 0 0 auto; width: 46px; height: 46px;
  border-radius: var(--3idee-radius-klein);
  background: var(--3idee-surface-soft, #f7f7f5);
  display: grid; place-items: center; overflow: hidden;
  color: var(--3idee-muted);
}
.stf__bild img { max-width: 100%; max-height: 100%; object-fit: contain; }
.stf__bild > svg { width: 20px; height: 20px; }

.stf__txt { flex: 1 1 auto; min-width: 0; }
.stf__name {
  display: block; font-size: 14px; font-weight: 700; color: var(--3idee-ink);
  overflow-wrap: anywhere;
}
.stf__daten { display: block; margin-top: 2px; font-size: 12.5px; color: var(--3idee-muted); }
.stf__daten:empty { display: none; }

/* Zwei Zeichen, die weltweit dasselbe heißen: Kopie und Mülltonne. Ein Wort
   daneben wäre in vier Sprachen vier Wörter. */
.stf__tat {
  flex: 0 0 auto; width: 34px; height: 34px; padding: 0;
  border: 0; background: none; cursor: pointer;
  color: var(--3idee-muted);
  display: grid; place-items: center;
}
.stf__tat:hover { color: var(--3idee-ink); }
.stf__tat[disabled] { opacity: .3; cursor: default; }
.stf__tat svg { width: 17px; height: 17px; }

.stf__leer { padding: 14px 0; font-size: 14px; color: var(--3idee-muted); }

/* ── Hinzufügen ───────────────────────────────────────────────────────
   Der Knopf steht immer da, das Feld erst nach dem Klick. So ist die Liste
   ruhig, solange nichts hinzukommen soll — wie in Schritt 1 des Finders. */
.stf__mehr {
  display: block; width: 100%; margin-top: 12px;
  padding: 12px; cursor: pointer;
  border: 1px dashed var(--3idee-hairline);
  border-radius: var(--3idee-radius-mittel);
  background: none; font: inherit; font-size: 13.5px; font-weight: 700;
  color: var(--3idee-ink);
}
.stf__mehr:hover { border-color: var(--3idee-muted); }
.stf__mehr[hidden] { display: none; }

/* ── Der Hinweis unter dem Knopf ──────────────────────────────────────
   Ein eigener Kasten mit Flaeche und Rundung — dieselbe Gestalt, die der
   Kasten "Mehrere Monitore?" im VERIFIED-Fenster hatte, bevor sein Inhalt am
   24.08.2026 hierher gewandert ist. Er ist mitgewandert: Die Aussage steht
   jetzt an der richtigen Stelle UND sieht aus wie vorher.

   Als blosse graue Zeile ging sie zwischen Knopf und Liste unter, obwohl sie
   die einzige Stelle ist, die die Grenze von vier Geraeten nennt. */
.stf__hinweis {
  margin: 14px 0 0; padding: 16px 18px;
  background: var(--3idee-surface);
  border-radius: var(--3idee-radius-gross);
  font-size: 13px; line-height: 1.5; color: var(--3idee-muted);
}
.stf__hinweis:empty { display: none; }
.stf__hinweis b {
  display: block; margin-bottom: 3px;
  font-size: 14px; font-weight: 700; color: var(--3idee-ink);
}
/* Die Stoerungsmeldung bringt ihren eigenen Abstand mit — im Kasten waere er
   doppelt. */
.stf__hinweis .eng-aus { padding: 0; }

.stf__form { display: block; margin-top: 12px; }
.stf__form[hidden] { display: none; }
.stf__reihe { position: relative; display: block; }
.stf__reihe > svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--3idee-muted); pointer-events: none;
}
.stf__reihe input {
  width: 100%; height: 44px; padding: 0 12px 0 34px;
  border: 1px solid var(--3idee-ink); border-radius: var(--3idee-radius-mittel);
  font: inherit; font-size: 14px; color: var(--3idee-ink);
  background: var(--color-background);
}

.stf__treffer { margin-top: 8px; display: flex; flex-direction: column; }
.stf__treffer[hidden] { display: none; }
.stf__treffer button {
  display: flex; align-items: center; gap: 11px;
  text-align: left; padding: 8px 0; border: 0; background: none;
  border-bottom: 1px solid var(--3idee-hairline);
  font: inherit; font-size: 14px; color: var(--3idee-ink); cursor: pointer;
}
.stf__treffer button:hover { color: var(--3idee-ink); }
.stf__treffer small { color: var(--3idee-muted); font-size: 12.5px; }
.stf__treffer .stf__bild { width: 34px; height: 34px; }
.stf__leer-treffer { padding: 10px 0; font-size: 13.5px; color: var(--3idee-muted); }

/* ── Abschluss ────────────────────────────────────────────────────── */
.stf__fuss { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--3idee-hairline); }
.stf__ok {
  height: 46px; padding: 0 20px; border: 0;
  border-radius: var(--3idee-radius-mittel);
  background: var(--3idee-ink); color: #fff;
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
/* END_SNIPPET:setup-fenster */

/* START_SNIPPET:skip-to-content-link (INDEX:258) */
.skip-to-content-link {
    position: absolute;
    left: -99999px;
  }

  .skip-to-content-link:focus {
    z-index: var(--layer-temporary);
    overflow: auto;
    width: auto;
    height: auto;
    padding: var(--padding-lg) var(--padding-4xl);
    left: var(--margin-lg);
    top: var(--margin-lg);
    background-color: var(--color-background);
    box-shadow: 0 0 0 var(--focus-outline-offset) var(--color-background);
  }
/* END_SNIPPET:skip-to-content-link */

/* START_SNIPPET:slideshow-arrow (INDEX:260) */
.slideshow-control--large {
    .icon-caret {
      --icon-stroke-width: 1px;
    }

    .icon-caret {
      --icon-stroke-width: 1px;
    }

    .svg-wrapper,
    svg {
      width: var(--slideshow-controls-icon);
      height: var(--slideshow-controls-icon);
    }
  }

  /* Slideshow control shape styles */
  .slideshow-control.slideshow-control--shape-square,
  .slideshow-control.slideshow-control--shape-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    background-color: var(--color-primary-button-background);
    color: var(--color-primary-button-text);
  }

  .slideshow-control.slideshow-control--shape-circle {
    border-radius: 50%;
  }

  .slideshow-control.slideshow-control--shape-square {
    border-radius: 0;
  }

  .slideshow-control .icon-caret {
    rotate: -90deg;
  }
/* END_SNIPPET:slideshow-arrow */

/* START_SNIPPET:slideshow-arrows (INDEX:261) */
slideshow-arrows {
    --cursor-previous: w-resize;
    --cursor-next: e-resize;

    position: absolute;
    inset: 0;
    display: flex;
    z-index: var(--layer-heightened);
    pointer-events: none;
    mix-blend-mode: difference;
    align-items: flex-end;

    &[position='left'] {
      justify-content: flex-start;
      padding-inline: var(--padding-xs);
    }

    &[position='right'] {
      justify-content: flex-end;
      padding-inline: var(--padding-xs);
    }

    &[position='center'] {
      justify-content: space-between;
      align-items: center;
    }
  }

  slideshow-arrows:has(.slideshow-control--shape-square),
  slideshow-arrows:has(.slideshow-control--shape-circle) {
    mix-blend-mode: normal;
  }

  slideshow-component[disabled='true'] slideshow-arrows {
    display: none;
  }

  slideshow-arrows .slideshow-control {
    pointer-events: auto;
    opacity: 0;
    min-height: var(--minimum-touch-target);
    min-width: var(--minimum-touch-target);
    padding: 0 var(--padding-xs);
    color: var(--color-white);
  }

  slideshow-arrows .slideshow-control.slideshow-control--style-none {
    display: none;
  }
/* END_SNIPPET:slideshow-arrows */

/* START_SNIPPET:slideshow-controls (INDEX:262) */
slideshow-controls {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    scrollbar-width: none;
    min-height: var(--minimum-touch-target);
    grid-area: controls;

    &[controls-on-media] {
      position: absolute;
      bottom: 0;
    }
  }

  slideshow-controls::-webkit-scrollbar {
    display: none;
  }

  slideshow-controls button {
    --color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
    --color-active: var(--color-foreground);
    --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));

    display: inline-block;
    height: var(--minimum-touch-target);
    width: var(--minimum-touch-target);
    cursor: pointer;
  }

  slideshow-controls .icon {
    width: var(--icon-size-sm);
    height: var(--icon-size-xs);
  }

  slideshow-controls[pagination-position='center'] {
    align-items: center;
    justify-content: center;
  }

  slideshow-controls[pagination-position='center'][thumbnails] {
    width: 100%;
  }

  slideshow-controls[pagination-position='center']:not([controls-on-media], [thumbnails], [icons-on-media]) {
    justify-content: space-between;
  }

  @media screen and (min-width: 750px) {
    slideshow-controls[thumbnails]:is([pagination-position='right'], [pagination-position='left']) {
      display: flex;
      flex-direction: column;
      height: 0;
      min-height: 100%;

      .slideshow-controls__thumbnails-container {
        overflow: hidden auto;
      }

      &:not([controls-on-media]) {
        .slideshow-controls__thumbnails-container {
          position: sticky;
          top: var(--sticky-header-offset, 0);
        }

        .slideshow-controls__thumbnails {
          padding-block-start: var(--focus-outline-offset);
        }
      }
    }

    slideshow-controls:is([pagination-position='right'], [pagination-position='left']) .slideshow-controls__thumbnails {
      flex-direction: column;
    }

    slideshow-controls:not([controls-on-media]) {
      &:is([pagination-position='left'], [pagination-position='right']) .slideshow-controls__thumbnails {
        padding-block: var(--padding-2xs);
      }

      &[pagination-position='right'] .slideshow-controls__thumbnails {
        padding-inline-end: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset));
      }

      &[pagination-position='left'] .slideshow-controls__thumbnails {
        padding-inline-start: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset));
      }
    }
  }

  slideshow-controls:not([controls-on-media])[icons-on-media] {
    &[pagination-position='right'] {
      justify-content: flex-end;
    }

    &[pagination-position='left'] {
      justify-content: flex-start;
    }
  }

  slideshow-controls[controls-on-media] {
    z-index: var(--layer-raised);

    &:has(.slideshow-controls__dots, .slideshow-controls__counter) {
      --color-foreground: #fff;
      --color-foreground-rgb: var(--color-white-rgb);
    }

    &[pagination-position='right'] {
      right: 0;
    }

    &[pagination-position='left'] {
      left: 0;
    }

    &[pagination-position='center'] {
      width: 100%;
    }

    &:not([thumbnails])[pagination-position='left'] {
      width: fit-content;
      align-self: flex-start;
    }

    &:not([thumbnails])[pagination-position='right'] {
      width: fit-content;
      align-self: flex-end;
    }
  }

  .slideshow-controls__arrows {
    display: flex;
    justify-content: space-between;
    height: var(--minimum-touch-target);
    grid-area: arrows;

    button {
      padding: 0 var(--padding-xs);
    }
  }

  .slideshow-controls__dots,
  .slideshow-controls__counter {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    list-style: none;

    button {
      --color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
      --color-active: var(--color-foreground);
      --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    }
  }

  slideshow-controls:has(.slideshow-controls__dots),
  slideshow-component[autoplay] slideshow-controls {
    mix-blend-mode: difference;
  }

  .slideshow-controls__dots {
    gap: 0.6rem;
    padding: var(--padding-sm) var(--padding-lg);
    border-radius: 3rem;
    overflow: hidden;

    button {
      --size: 0.56rem;

      display: flex;
      align-items: center;
      justify-content: center;
      width: calc(var(--size) * 2);
      height: calc(var(--size) * 2);
      margin: calc(var(--size) / -2);
      font-size: 0;
      border-radius: calc(var(--size));

      &::after {
        content: '';
        display: block;
        background-color: var(--color);
        height: var(--size);
        width: var(--size);
        border-radius: calc(var(--size) / 2);
        box-shadow: inset 0 0 0 1.5px hsl(0 0% 0% / 0.15);

        @supports not (view-timeline-axis: inline) {
          &[aria-selected='true'] {
            --color: var(--color-active);
          }
        }

        &:hover {
          --color: var(--color-hover);
        }
      }

      &[aria-selected='true'] {
        --color: var(--color-active);

        &::after {
          box-shadow: inset 0 0 0 1.5px hsl(0 0% 0% / 0.4);
        }
      }
    }
  }

  .slideshow-controls__dots,
  .slideshow-controls__counter {
    &:only-child {
      margin-inline: auto;
    }
  }

  .slideshow-controls__counter {
    color: var(--color-foreground);
    background-color: rgb(0 0 0 / 40%);
    width: auto;
    border-radius: 2rem;
    padding: 0.3rem var(--padding-sm);
    margin-inline: var(--margin-sm);
    backdrop-filter: blur(10px);
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size--xs);

    .slash {
      color: rgb(var(--color-foreground-rgb) / var(--opacity-40));
      padding-inline: var(--padding-2xs);
      margin-block-start: -0.1rem;
    }
  }

  .slideshow-control[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Slideshow Thumbnails */
  .slideshow-controls__thumbnails-container {
    display: flex;
    width: 100%;
    max-height: 100%;
    overflow-x: scroll;
    scrollbar-width: none;
  }

  .slideshow-controls__thumbnails {
    display: inline-flex;
    padding-inline: var(--slideshow-thumbnails-padding-inline, var(--padding-sm));
    padding-block: var(--slideshow-thumbnails-padding-block, var(--padding-sm));
    gap: var(--gap-xs);
    margin-inline: auto;
    height: fit-content;

    .slideshow-control {
      border-radius: var(--thumbnail-radius, var(--media-radius));
      width: clamp(44px, 7vw, var(--thumbnail-width));
      height: auto;
      aspect-ratio: var(--aspect-ratio);

      img {
        height: 100%;
        object-fit: cover;
        border-radius: var(--thumbnail-radius, var(--media-radius));
      }

      &:is([aria-selected='true']) {
        outline: var(--focus-outline-width) solid currentcolor;
        outline-offset: calc(var(--focus-outline-offset) / 2);
        border: var(--style-border-width) solid rgb(var(--color-border-rgb) / var(--media-border-opacity));
      }
    }
  }

  .slideshow-controls__thumbnail {
    position: relative;
  }

  .slideshow-controls__thumbnail-badge {
    position: absolute;
    top: var(--padding-2xs);
    right: var(--padding-2xs);
    width: clamp(16px, 10%, 20px);
    height: clamp(16px, 10%, 20px);
    background-color: var(--color-background);
    border-radius: var(--style-border-radius-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1px rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .slideshow-controls__thumbnail-badge svg {
    width: 60%;
    height: 60%;
    fill: var(--color-foreground);
    opacity: 0.6;
  }

  /* Slideshow Play/Pause */
  .slideshow-control:is(.icon-pause, .icon-play) {
    color: var(--color-active);

    &:hover {
      color: var(--color-hover);
    }

    svg {
      display: none;
    }
  }

  slideshow-component:is([autoplay]) {
    &:is([paused]) {
      .icon-play > svg {
        display: block;
      }
    }

    &:not([paused]) {
      .icon-pause > svg {
        display: block;
      }
    }
  }
/* END_SNIPPET:slideshow-controls */

/* START_SNIPPET:slideshow-styles (INDEX:264) */
/*
   * Slideshow Component
   */
  slideshow-component {
    --cursor: grab;
    --slide-offset: 6px;

    position: relative;
    display: flex;
    flex-direction: column;
    timeline-scope: var(--slideshow-timeline);
  }

  .slideshow--single-media {
    --cursor: default;
  }

  a slideshow-component {
    --cursor: pointer;
  }

  slideshow-component [data-placeholder='true'] * {
    cursor: grab;
  }

  /*
   * Slideshow Slides
   */
  slideshow-slides {
    width: 100%;
    position: relative;
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-color: transparent transparent;
    scrollbar-width: none;
    gap: var(--slideshow-gap, 0);
    cursor: var(--cursor);
    min-height: var(--slide-min-height);
    align-items: var(--slideshow-align-items, normal);

    @media (prefers-reduced-motion) {
      scroll-behavior: auto;
    }

    &::-webkit-scrollbar {
      width: 0;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background: transparent;
      border: none;
    }

    @media screen and (min-width: 750px) {
      min-height: var(--slide-min-height-desktop);
    }
  }

  .slideshow--stretch-content slideshow-slides > * {
    height: auto;
  }

  slideshow-component[disabled='true'] slideshow-slides {
    overflow: hidden;
  }

  /**
   * By default, slideshows have overflow: hidden (no compositor layer).
   * When the slideshow enters the viewport, JavaScript adds [in-viewport] which enables scrolling.
   */
  slideshow-component:not([in-viewport]) slideshow-slides {
    overflow: hidden;
  }

  slideshow-component[mobile-disabled] slideshow-slides {
    @media screen and (max-width: 749px) {
      overflow: hidden;
    }
  }

  slideshow-slides[gutters*='start'] {
    padding-inline-start: var(--gutter-slide-width, 0);
    scroll-padding-inline-start: var(--gutter-slide-width, 0);
  }

  slideshow-slides[gutters*='end'] {
    padding-inline-end: var(--gutter-slide-width, 0);
  }

  slideshow-component[dragging] {
    --cursor: grabbing;

    * {
      pointer-events: none;
    }
  }

  slideshow-component[dragging] slideshow-arrows {
    display: none;
  }

  slideshow-container {
    width: 100%;
    display: block;
    position: relative;
    grid-area: container;
    container-type: inline-size;
    background-color: var(--color-background);
  }

  /*
   * Be specific about HTML children structure to avoid targeting nested slideshows.
   * Ensure that the content is 'visible' while scrolling instead of 'auto' to avoid issues in Safari.
   */
  slideshow-component:is([dragging], [transitioning], :hover)
    > slideshow-container
    > slideshow-slides
    > slideshow-slide {
    content-visibility: visible;
  }

  @keyframes slide-reveal {
    0% {
      translate: calc(var(--slideshow-slide-offset, 6) * 1rem) 0;
      opacity: 0;
    }

    50% {
      opacity: 1;
    }

    100% {
      translate: calc(var(--slideshow-slide-offset, 6) * -1rem) 0;
      opacity: 0;
    }
  }

  /*
   * Slideshow Slide
   */
  slideshow-slide {
    position: relative;
    scroll-snap-align: center;
    width: var(--slide-width, 100%);
    max-height: 100%;
    flex-shrink: 0;
    view-timeline-name: var(--slideshow-timeline);
    view-timeline-axis: inline;
    content-visibility: auto;
    contain-intrinsic-size: auto none;
    border-radius: var(--corner-radius, 0);
    overflow: hidden;

    slideshow-component[actioned] &,
    &[aria-hidden='false'] {
      content-visibility: visible;
    }

    slideshow-component slideshow-slide:not([aria-hidden='false']) {
      content-visibility: hidden;
    }

    &[hidden]:not([reveal]) {
      display: none;
    }

    /* Make inactive slides appear clickable */
    &[aria-hidden='true'] {
      cursor: pointer;
    }
  }

  slideshow-slide .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
    bottom: var(--padding-sm);
    right: var(--padding-sm);
  }

  slideshow-component.slideshow--content-below-media slideshow-slide {
    display: grid;
  }

  .slideshow--content-below-media slideshow-slide :is(.slide__image-container, .slide__content) {
    position: static;
  }

  .slideshow--content-below-media slideshow-slide {
    grid-template-rows: var(--grid-template-rows);

    @media screen and (min-width: 750px) {
      grid-template-rows: var(--grid-template-rows-desktop);
    }
  }
/* END_SNIPPET:slideshow-styles */

/* START_SNIPPET:sorting (INDEX:266) */
.sorting-filter__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--drawer-padding) 0;
    padding-block: var(--padding-sm);
    margin-inline-end: var(--margin-md);
    position: relative;
  }

  .sorting-filter__container .facets__label {
    font-size: var(--font-h4--size);
  }

  .sorting-filter__select-wrapper {
    display: flex;
    position: relative;
    border-radius: var(--variant-picker-button-radius);
    align-items: center;
    overflow: clip;
    padding: var(--padding-2xs) var(--padding-xs);
  }

  .sorting-filter__select-wrapper:has(:focus-visible) {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .sorting-filter__select-wrapper:has(:focus-visible) .sorting-filter__select {
    outline: none;
  }

  .sorting-filter__container .sorting-filter__select {
    appearance: none;
    border: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    padding-inline-end: var(--icon-size-2xs);
    text-align: right;

    /* Needed for Safari */
    text-align-last: right;
  }

  .sorting-filter__select .icon {
    position: absolute;
    right: var(--padding-md);
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-size-2xs);
    height: var(--icon-size-2xs);
    pointer-events: none;
  }

  .sorting-filter {
    @media screen and (min-width: 750px) {
      z-index: var(--facets-upper-z-index);
    }
  }

  .sorting-filter__options {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    position: absolute;
    top: 100%;
    right: 0;
    color: var(--color-foreground);
    z-index: var(--facets-upper-z-index);
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    background-color: var(--color-background);
    border-radius: var(--style-border-radius-popover);
    width: max-content;
    min-width: var(--facets-panel-min-width);
    min-height: 0;

    transition: grid-template-rows var(--animation-speed-slow) var(--animation-easing),
      opacity var(--animation-speed-slow) var(--animation-easing);
  }

  details[open] .sorting-filter__options {
    opacity: 1;
    grid-template-rows: 1fr;
  }

  .sorting-filter__options-inner {
    display: flex;
    flex-direction: column;
    grid-row: 1 / span 2;
    gap: var(--gap-sm);
    padding: calc(var(--drawer-padding) / 2);
    color: var(--color-foreground);
    overflow: clip;
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }

    @media screen and (min-width: 750px) {
      gap: 0;
    }
  }

  .sorting-filter__option {
    cursor: pointer;
    display: grid;
    grid-template-columns: var(--icon-size-sm) 1fr;
    gap: var(--margin-2xs);
    align-items: center;
    min-width: 180px;
    max-width: 16em;
    padding: var(--padding-2xs) calc(var(--drawer-padding) / 2) var(--padding-2xs) var(--padding-2xs);

    &:hover {
      border-radius: calc(var(--style-border-radius-popover) / 2);
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }

    &:focus {
      border-radius: calc(var(--style-border-radius-popover) / 2);
    }
  }

  .sorting-filter__input {
    display: none;

    &:checked + .sorting-filter__checkmark + .sorting-filter__label {
      font-weight: 500;
    }
  }

  .sorting-filter__checkmark {
    visibility: hidden;
  }

  *:checked ~ .sorting-filter__checkmark {
    visibility: visible;
  }

  .sorting-filter__label {
    cursor: pointer;
    pointer-events: none;
  }

  .facets-toggle--no-filters .sorting-filter__select-wrapper {
    @media screen and (max-width: 749px) {
      padding-inline-start: 0;
    }
  }

  .facets-mobile-wrapper .sorting-filter .facets__panel {
    padding-inline: 0;
    position: relative;
  }

  .facets-mobile-wrapper .sorting-filter .facets__status {
    display: none;
  }

  .facets-mobile-wrapper:has(> :nth-child(2)) .sorting-filter .sorting-filter__options {
    left: 0;
    right: unset;
  }

  .facets-mobile-wrapper .sorting-filter .facets__label {
    margin-inline-end: var(--margin-2xs);
    font-size: var(--font-paragraph--size);
    color: var(--color-foreground-muted);
  }

  .facets-toggle .sorting-filter__container {
    @media screen and (max-width: 749px) {
      padding: 0;
    }
  }

  .facets-toggle .sorting-filter__container .facets__label {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets-toggle .sorting-filter::before {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets--drawer .sorting-filter {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }
/* END_SNIPPET:sorting */

/* START_SNIPPET:text-component-shimmer-styles (INDEX:274) */
text-component {
    --shimmer-text-color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    --shimmer-color-light: rgb(var(--color-foreground-rgb) / var(--opacity-10));
    --shimmer-speed: 1.25s;

    display: inline-block;
    position: relative;
    transition: color var(--animation-speed-slow) ease;
    line-height: 1;

    &::after {
      /* Empty alt text: the pseudo-element is a visual shimmer overlay, not announceable content.
        Without this, VoiceOver reads attr(value) in addition to the inner text node, doubling the announcement. */
      content: attr(value) / '';
      position: absolute;
      inset: 0;
      color: transparent;
      opacity: 0;
      transition: opacity var(--animation-speed-slow) var(--animation-easing);
      pointer-events: none;
      background-image: linear-gradient(
        -85deg,
        var(--shimmer-text-color) 10%,
        var(--shimmer-color-light) 50%,
        var(--shimmer-text-color) 90%
      );
      background-clip: text;
      background-size: 200% 100%;
      background-position: 100% 0;
      place-content: center;
    }

    &[shimmer] {
      color: transparent;

      &::after {
        opacity: 1;
        animation: text-shimmer var(--shimmer-speed) infinite linear;
      }
    }
  }

  @keyframes text-shimmer {
    0% {
      background-position: 100% 0;
    }

    100% {
      background-position: -100% 0;
    }
  }
/* END_SNIPPET:text-component-shimmer-styles */

/* START_SNIPPET:text (INDEX:275) */
:root {
    --text-align-default: left;
  }

  [style*='--horizontal-alignment: center'] .text-block {
    --text-align-default: center;
  }

  [style*='--horizontal-alignment: flex-end'] .text-block {
    --text-align-default: right;
  }

  [style*='--horizontal-alignment: flex-start'] > .text-block {
    --text-align-default: left;
  }

  [style*='--horizontal-alignment: center'] > .text-block {
    --text-align-default: center;
  }

  [style*='--horizontal-alignment: flex-end'] > .text-block {
    --text-align-default: right;
  }

  .text-block {
    width: var(--width);
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment);
    color: var(--color, var(--color-foreground));
  }

  .text-block > * {
    width: var(--width);
    max-inline-size: min(100%, var(--max-width, 100%));
    text-align: var(--text-align, var(--text-align-default));
    text-wrap: var(--text-wrap);
  }

  .text-block:not(.text-block--full-width).rte,
  .text-block:not(.text-block--full-width).paragraph {
    /* Safari doesn't support pretty, so fallback to balance */
    text-wrap: balance;
    text-wrap: pretty;
  }

  .text-block:not(.text-block--full-width):is(.h1, .h2, .h3, .h4, .h5, .h6) {
    text-wrap: balance;
  }

  /* Hide underline unless text is using paragraph styles. */
  .text-block.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) a {
    text-decoration-line: none;
    color: currentColor;

    &:hover {
      text-decoration-line: none;
      color: currentColor;
    }
  }

  .text-block h1,
  .text-block.h1 > * {
    margin-block: var(--font-h1--spacing);
  }

  .text-block h2,
  .text-block.h2 > * {
    margin-block: var(--font-h2--spacing);
  }

  .text-block h3,
  .text-block.h3 > * {
    margin-block: var(--font-h3--spacing);
  }

  .text-block h4,
  .text-block.h4 > * {
    margin-block: var(--font-h4--spacing);
  }

  .text-block h5,
  .text-block.h5 > * {
    margin-block: var(--font-h5--spacing);
  }

  .text-block h6,
  .text-block.h6 > * {
    margin-block: var(--font-h6--spacing);
  }

  .text-block p,
  .text-block.p > * {
    margin-block: var(--font-paragraph--spacing);
  }

  .text-block > *:first-child {
    margin-block-start: 0;
  }

  .text-block > *:last-child {
    margin-block-end: 0;
  }

  .text-block--align-center,
  .text-block--align-center > * {
    margin-inline: auto;
  }

  .text-block--align-right,
  .text-block--align-right > * {
    margin-inline-start: auto;
  }

  .text-block--background {
    background-color: var(--text-background-color);
    border-radius: var(--text-corner-radius);

    /* To avoid text being cropped when using a border radius we add a minimum padding. */
    padding-block-start: max(var(--text-padding), var(--padding-block-start, 0));
    padding-block-end: max(var(--text-padding), var(--padding-block-end, 0));
    padding-inline-start: max(var(--text-padding), var(--padding-inline-start, 0));
    padding-inline-end: max(var(--text-padding), var(--padding-inline-end, 0));
  }

  .custom-color,
  .custom-color > :is(h1, h2, h3, h4, h5, h6, p, *) {
    color: var(--color);
  }
/* END_SNIPPET:text */

/* START_SNIPPET:theme-drawer-styles (INDEX:277) */
theme-drawer {
    display: contents;
  }

  .theme-drawer__dialog {
    --theme-drawer-padding: var(--padding-xl);

    z-index: calc(var(--layer-sticky) + var(--drawer-stack-order, 0));
    position: fixed;
    inset: unset;
    top: 0;
    right: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
    flex-direction: column;
    width: var(--theme-drawer-width, var(--sidebar-width));
    max-width: 100%;
    max-height: none;
    height: 100dvh;
    padding: 0;
    border: none;
    border-left: var(--style-border-drawer);
    background-color: var(--color-background);
    color: var(--color-foreground);
  }

  .theme-drawer__dialog[open] {
    display: flex;
    right: 0;
  }

  .theme-drawer__dialog--opening {
    animation: drawer-slide-in var(--animation-speed) var(--animation-timing-fade-in);
  }

  .theme-drawer__dialog--opening-inline-start {
    animation: drawer-slide-in-inline-start var(--animation-speed) var(--animation-timing-fade-in);
  }

  .theme-drawer__dialog--closing {
    animation: drawer-slide-out var(--animation-speed) var(--animation-timing-fade-out) forwards;
  }

  .theme-drawer__dialog-instant {
    animation: none;
  }

  @keyframes drawer-slide-in {
    from {
      right: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
    }
  }

  @keyframes drawer-slide-in-inline-start {
    from {
      right: calc(var(--theme-drawer-width, var(--sidebar-width)) / 2);
    }
  }

  @keyframes drawer-slide-out {
    to {
      right: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
    }
  }

  .theme-drawer__dialog::backdrop {
    background: rgb(var(--backdrop-color-rgb) / var(--backdrop-opacity));
  }

  /* Exclude open drawers from the page navigation cross-fade so they
     stay frozen (visually unchanged) while the rest of the page transitions. */
  html:active-view-transition-type(page-navigation) .theme-drawer__dialog[open] {
    view-transition-name: theme-drawer;
  }

  ::view-transition-old(theme-drawer),
  ::view-transition-new(theme-drawer) {
    animation: none;
  }

  .theme-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--theme-drawer-padding);
    flex-shrink: 0;
    color: var(--color-foreground);
  }

  .theme-drawer__title {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    margin: 0;
  }

  .theme-drawer__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: var(--style-border-radius-lg);
    background-color: rgb(var(--color-foreground-rgb) / 0.1);
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    color: var(--color-foreground);
    font-size: clamp(var(--font-size--3xs), 0.75em, var(--font-size--xs));
    padding-inline: 0.5em;
    line-height: 1;
  }

  .theme-drawer__badge[data-maintain-ratio] {
    aspect-ratio: 1 / 1;
    padding-inline: 0.2em;
  }

  .theme-drawer__close-button {
    --private-button-size: 34px;
    --private-focus-ring-size: 2px;
    --private-motion-speed: 150ms;
    --private-motion-ease: cubic-bezier(0.25, 0, 0.1, 1);
    --private-border-width: 1px;
    --private-button-border-color: rgb(0, 0, 0, 0.06);
    --private-button-shadow: 0 2px 6px 0 var(--private-button-border-color);

    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline-start: auto;
    width: var(--private-button-size);
    height: var(--private-button-size);
    border-radius: var(--private-button-size);
    background-color: var(--color-background);
    outline: var(--private-focus-ring-size) solid transparent;
    outline-offset: var(--private-focus-ring-size);
    transition-property: color, outline-color, background-color;
    transition-duration: var(--private-motion-speed);
    transition-timing-function: var(--private-motion-ease);

    /* Legacy non-contrast-aware color scheme */
    --button-icon-opacity: 0.8;
    color: var(--color-foreground);
    border: var(--private-border-width) solid var(--private-button-border-color);
    box-shadow: var(--private-button-shadow);

    &:hover:not(:active) {
      /* Legacy non-contrast-aware color scheme */
      --button-icon-opacity: 1;
    }

    &:focus-visible {
      outline-color: var(--color-foreground);
    }
  }

  @supports (color: oklch(from red l c h)) {
    .theme-drawer__close-button {
      --contrast-color: oklch(from var(--color-background) clamp(0, (0.6 / l - 1) * infinity, 1) 0 0);
      --button-icon-opacity: 1;
      --private-button-border-color: color-mix(in srgb, var(--contrast-color) 6%, transparent);
      --private-button-shadow: 0 2px 6px 0 var(--private-button-border-color);

      color: color-mix(in srgb, var(--contrast-color) 50%, transparent);

      &:hover:not(:active) {
        color: color-mix(in srgb, var(--contrast-color) 70%, transparent);
      }
    }

    .theme-drawer__close-button:hover:not(:active) {
      background-color: color-mix(in srgb, var(--contrast-color) 6%, var(--color-background));
    }
  }
/* END_SNIPPET:theme-drawer-styles */

/* START_SNIPPET:variant-picker-styles (INDEX:290) */
/* Variant picker container styles - unique to main variant picker */
  .variant-picker {
    width: 100%;
  }

  .variant-picker__form {
    width: 100%;
  }

  .variant-picker[data-shopify-visual-preview] {
    min-width: 300px;
    padding-inline-start: max(4px, var(--padding-inline-start));
  }

  /* Dropdown variant option styles */
  .variant-option__select-wrapper {
    display: flex;
    position: relative;
    border: var(--style-border-width-inputs) solid var(--color-variant-border);
    border-radius: var(--style-border-radius-inputs);
    align-items: center;
    margin-top: var(--margin-2xs);
    overflow: clip;
    color: var(--color-variant-text);
  }

  .variant-option__select-wrapper:has(.swatch) {
    --variant-picker-swatch-width: 20px;
    --variant-picker-swatch-height: 20px;
  }

  .variant-option__select-wrapper:hover {
    border-color: var(--color-variant-hover-border);
    color: var(--color-variant-hover-text);
  }

  .variant-option__select-wrapper:hover .variant-option__select {
    background-color: var(--color-variant-hover-background);
  }

  .variant-option__select:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .variant-option__select {
    padding-block: var(--padding-md);
    padding-inline: var(--padding-lg) calc(var(--padding-lg) + var(--icon-size-2xs));
    appearance: none;
    background-color: var(--color-variant-background);
    color: inherit;
    border: 0;
    width: 100%;
    margin: 0;
    cursor: pointer;
  }

  .variant-option__select-wrapper .icon {
    position: absolute;
    right: var(--padding-md);
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-size-2xs);
    height: var(--icon-size-2xs);
    pointer-events: none;
  }

  .variant-option__select--has-swatch {
    padding-inline-start: calc((2 * var(--padding-sm)) + var(--variant-picker-swatch-width));
  }

  .variant-option__select-wrapper .swatch {
    position: absolute;
    top: 50%;
    left: var(--padding-md);
    transform: translateY(-50%);
  }

  /* Variant picker alignment modifiers */
  .variant-picker--center,
  .variant-picker--center .variant-option {
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .variant-picker--right,
  .variant-picker--right .variant-option {
    text-align: right;
    justify-content: right;
  }
/* END_SNIPPET:variant-picker-styles */

/* START_SNIPPET:variant-swatches (INDEX:291) */
swatches-variant-picker-component {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: var(--product-swatches-alignment-mobile);

    @media screen and (min-width: 750px) {
      justify-content: var(--product-swatches-alignment);
    }

    --overflow-list-padding-block: calc(
        var(--product-swatches-padding-block-start) + var(--focus-outline-offset) + var(--focus-outline-width)
      )
      calc(var(--product-swatches-padding-block-end) + var(--focus-outline-offset) + var(--focus-outline-width));
    --overflow-list-padding-inline: calc(
        var(--product-swatches-padding-inline-start) + var(--focus-outline-offset) + (1.5 * var(--focus-outline-width))
      )
      calc(var(--product-swatches-padding-inline-end) + var(--focus-outline-offset) + var(--focus-outline-width));

    overflow-list::part(list) {
      gap: var(--gap-sm);
    }
  }

  swatches-variant-picker-component overflow-list[disabled='true'] {
    --overflow-list-padding-block: 0px;
    margin-block-start: calc(
      var(--product-swatches-padding-block-start) + var(--focus-outline-offset) + var(--focus-outline-width)
    );
    margin-block-end: calc(
      var(--product-swatches-padding-block-end) + var(--focus-outline-offset) + var(--focus-outline-width)
    );
  }

  .hidden-swatches__count {
    display: flex;
    align-self: center;
    align-items: center;
    justify-content: center;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
    background-color: transparent;
    padding: 0;
    border: 0;
    border-radius: 0;

    &::before {
      /* This doesn't work in Safari without the counter-reset. https://stackoverflow.com/a/40179718 */
      counter-reset: overflow-count var(--overflow-count);
      content: '+' counter(overflow-count);
      line-height: 1;
      cursor: pointer;
    }
  }

  .hidden-swatches__count:hover {
    color: var(--color-foreground-rgb);
  }
/* END_SNIPPET:variant-swatches */

/* START_SNIPPET:video (INDEX:292) */
.video-interaction-hint {
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: var(--layer-flat);
  }

  .video-interaction-hint:hover {
    opacity: 1;
  }
/* END_SNIPPET:video */

/* START_SNIPPET:volume-pricing-info (INDEX:293) */
.volume-pricing-info {
    display: inline-flex;
  }

  .volume-pricing-info__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    color: var(--color-foreground-secondary);
    cursor: pointer;
    transition: color var(--animation-speed) var(--animation-easing);
    flex-shrink: 0;
  }

  .volume-pricing-info__button:hover {
    color: var(--color-foreground);
  }

  .volume-pricing-info__button .svg-wrapper {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .volume-pricing-info__button--with-label {
    width: auto;
    gap: var(--gap-sm);
  }

  .volume-pricing-info__popover {
    --volume-pricing-popover-max-width: 320px;
    --volume-pricing-popover-spacing: 8px;
    --volume-pricing-popover-viewport-margin: 16px;

    min-inline-size: 280px;
    max-inline-size: var(--volume-pricing-popover-max-width);
    background: var(--color-background);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover, 0);
    box-shadow: var(--shadow-popover);
    overflow: hidden;
    padding: 0;
    margin: 0;
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    translate: 0 20px;
    opacity: 0;
  }

  /* Native anchor positioning for supported browsers */
  .volume-pricing-info__popover {
    inset: unset;
    top: calc(anchor(bottom) + var(--volume-pricing-popover-spacing));
    left: anchor(left);
  }

  @supports (position-try-fallbacks: --top-left) {
    .volume-pricing-info__popover {
      position-try-fallbacks: --top-left;
    }

    @position-try --top-left {
      top: calc(anchor(top) - var(--volume-pricing-popover-spacing));
      bottom: auto;
      transform: translateY(-100%);
    }
  }

  /* Fallback positioning using custom properties */
  @supports not (position-anchor: --volume-pricing-trigger) {
    .volume-pricing-info__popover {
      position: fixed;
      top: calc(var(--anchor-bottom) * 1px + var(--volume-pricing-popover-spacing));
      left: max(
        var(--volume-pricing-popover-viewport-margin),
        min(
          var(--anchor-left) * 1px,
          100vw - var(--volume-pricing-popover-max-width) - var(--volume-pricing-popover-viewport-margin)
        )
      );
    }
  }

  .volume-pricing-info__popover:popover-open {
    translate: 0 0;
    opacity: 1;
  }

  @starting-style {
    .volume-pricing-info__popover:popover-open {
      translate: 0 20px;
      opacity: 0;
    }
  }

  .volume-pricing-info__rules {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    padding: var(--padding-md);
    font-size: var(--font-size--xs);
  }

  .volume-pricing-info__rules,
  .volume-pricing-info__rules > span {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .volume-pricing-info__table {
    display: flex;
    flex-direction: column;
  }

  .volume-pricing-info__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--padding-sm) var(--padding-md);
    font-size: var(--font-size--sm);
    background: var(--color-background);
    border-inline-start: 3px solid transparent;
    transition: border-color var(--animation-speed) var(--animation-easing);
  }

  .volume-pricing-info__row:nth-child(odd) {
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .volume-pricing-info__row--active {
    border-inline-start-color: var(--color-foreground);
    font-weight: var(--font-weight-medium);
  }

  .volume-pricing-info__quantity {
    color: var(--color-foreground);
  }

  .volume-pricing-info__price {
    display: flex;
    align-items: center;
    color: var(--color-foreground);
  }

  .volume-pricing-info__checkmark {
    display: none;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    color: var(--color-foreground);
  }

  .volume-pricing-info__row--active .volume-pricing-info__checkmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
/* END_SNIPPET:volume-pricing-info */

/* START_SNIPPET:warenkorb-pruefung (INDEX:294) */
/* ── Kopfteil ─────────────────────────────────────────────────────────
   Kein Kasten, keine Fläche: gegliedert wird über zwei Haarlinien und
   Abstand, wie überall im Kodex. Die Schublade ist eng — hier steht nur,
   was gebraucht wird. */
/* Der Halter traegt die Vorlage und, wenn es etwas zu sagen gibt, die
   Luecken-Meldung fuer den ganzen Korb. Ohne sie ist er unsichtbar. */
.wkp-halter { display: none; }
.wkp-halter--sichtbar { display: block; }

/* OHNE TRENNLINIE (geaendert am 24.08.2026).

   Sie sollte den Block von der letzten Position absetzen. Gebraucht wird sie
   dafuer nicht: Die letzte Zeile der Liste traegt im Theme ohnehin keine
   eigene Linie mehr. Sie trennte deshalb nichts, sondern schnitt die Frage
   von dem Artikel ab, zu dem sie gehoert — bei einem einzelnen Adapter im
   Korb sah es aus, als sei "Passung pruefen" ein neuer Abschnitt statt seine
   Fortsetzung.

   Getrennt wird jetzt durch Abstand. Dass die Frage dem ganzen Korb gilt und
   nicht nur der letzten Position, sagt sie ueber ihre eigene Ueberschrift —
   das war schon am 21.08. der Grund, sie ans Ende und nicht unter Artikel 1
   zu haengen. */
.wkp-halter--sichtbar {
  padding-top: 14px;
  padding-bottom: 16px;
}

/* Was noch fehlt — einmal fuer den ganzen Korb. */
.wkp-luecke { padding-bottom: 4px; }

}

/* Das Feld steht unter seiner Position, eingerueckt wie eine Fortsetzung
   davon. Keine Flaeche, kein Rahmen: eine Haarlinie darueber genuegt, um zu
   sagen, dass hier etwas Neues beginnt, das noch zur Position gehoert. */
/* Kein eigener Abstand nach oben mehr: Den bringt inzwischen die Zeile mit,
   in der das Feld steht. */
.wkp { padding-bottom: 2px; }

.wkp__label {
  display: block;
  font-size: 13.5px; font-weight: 700; color: var(--3idee-ink);
}
/* 2px Innenabstand, 2px negativer Aussenabstand: sichtbar aendert sich nichts,
   aber der Fokusrahmen des Feldes hat Platz. Ohne das lief er in der
   Schublade gegen den Rand des Bildlaufbereichs und wurde beschnitten. */
.wkp__reihe {
  position: relative; display: flex; gap: 8px; margin-top: 9px;
  padding-inline: 2px; margin-inline: -2px;
}
/* Die Lupe sitzt IM Feld, wie auf der Produktseite. */
.wkp__reihe > svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--3idee-muted); pointer-events: none;
}
.wkp__reihe input {
  flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 12px 0 34px;
  border: 1px solid var(--3idee-hairline);
  border-radius: var(--3idee-radius-mittel);
  font: inherit; font-size: 13.5px; color: var(--3idee-ink);
  background: var(--color-background);
}
.wkp__reihe button {
  flex: 0 0 auto; height: 40px; padding: 0 16px; border: 0;
  border-radius: var(--3idee-radius-mittel);
  background: var(--3idee-ink); color: #fff;
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}

/* Trefferliste wie im Finder: Vorschläge, keine Auswahlliste mit Rahmen. */
.wkp__treffer { margin-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.wkp__treffer[hidden] { display: none; }
.wkp__treffer b {
  font-size: 11px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--3idee-muted); margin-bottom: 4px;
}
.wkp__treffer button {
  text-align: left; padding: 7px 0; border: 0; background: none;
  font: inherit; font-size: 13.5px; color: var(--3idee-ink); cursor: pointer;
  border-bottom: 1px solid var(--3idee-hairline);
}
.wkp__treffer button small { color: var(--3idee-muted); }

/* "Nicht noetig" ist ersatzlos weggefallen: Wer nicht pruefen will, prueft
   einfach nicht — das Feld haelt niemanden auf. Ein Knopf zum Wegklicken
   suggeriert eine Huerde, die es gar nicht gibt. (21.08.2026)
*/

/* ── Titel wie auf der Produktseite ──────────────────────────────
   Der Baustein bringt seine eigene Groesse und eine Trennlinie mit — beides
   gehoert der Produktseite, nicht dieser Zeile. Hier erbt die Ueberschrift die
   Schriftgroesse des Warenkorbtitels, damit sich am Theme nichts verschiebt. */
.cart-items__title .pdt { border: 0; margin: 0; padding: 0; }
.cart-items__title .pdt__titel { font-size: inherit; line-height: 1.3; }
.cart-items__title .pdt__sub { font-size: 12.5px; margin-top: 3px; }

/* ── Ergebniszeile an der Position ────────────────────────────────────
   Dasselbe Schema wie auf der Produktseite: Symbol, Modell, Haarlinie,
   Antwort. Eine Nummer kleiner, weil die Warenkorbzeile enger ist.

   KEIN VERIFIED darunter. Es stand dort doppelt: Das Zeichen bürgt für die
   Verlässlichkeit der Aussage, und die Aussage steht schon da. */
.wkpz { display: flex; align-items: center; gap: 9px; margin-top: 6px; }
.wkpz + .wkpz { margin-top: 4px; }
.wkpz__mon {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--3idee-ink);
  min-width: 0; overflow-wrap: anywhere;
}
.wkpz__mon > svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--3idee-ink); }
.wkpz__linie { flex: 1 1 auto; min-width: 12px; height: 1px; background: var(--3idee-hairline); }
.wkpz__status {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-size: 12.5px; font-weight: 800; color: var(--3idee-ink);
}
/* Farbe trägt allein das Zeichen — Statussystem 19.08. */
.wkpz__status i { font-style: normal; font-size: 12px; font-weight: 800; }
.wkpz__status--ok i { color: var(--3idee-success); }
.wkpz__status--warn i { color: var(--3idee-error); }
/* Neutral: weder Zusage noch Absage — der Monitor braucht keinen Adapter. */
.wkpz__status--neutral i { color: var(--3idee-muted); }

.wkp-zeile[hidden] { display: none; }

/* UNTER DIE MENGENKNOEPFE, NICHT DANEBEN.

   In der Schublade steht die Passungszeile in der Mengenzelle — der einzigen,
   die ein eigenes Rasterfeld ueber die volle Breite hat (siehe Begruendung in
   cart-products.liquid). Die Zelle ist aber eine Flex-Zeile mit Inhaltsbreite:
   Ohne Umbruch setzt sie jedes weitere Kind rechts neben die Knoepfe und
   waechst mit. Genau so sah es aus — die Modellnamen klebten neben dem
   Papierkorb und brachen um.

   Also Umbruch erlauben und der Zeile die volle Breite geben. An den Knoepfen
   aendert das nichts: Sie stehen ueber justify-content weiter links. */
.cart-items__table-row--full-width-variants .cart-items__quantity {
  flex-wrap: wrap;
  width: 100%;
}
.cart-items__quantity .wkp-zeile {
  flex: 1 0 100%;
  margin-top: 12px;
}
/* END_SNIPPET:warenkorb-pruefung */