/* ============================================================
   IMPACT-GRUNDLAGE FUER DIE STARTSEITE (JTL, Baustein 3.2, 01.10.2026)

   Im Shopify-Theme lagen die Sektionen der Startseite auf Impacts theme.css (245 KB)
   und nb-tokens.css. Im JTL-Child laedt keines von beiden. Diese Datei traegt genau
   die Regeln, die ein Element der elf Sektionen treffen, automatisch ausgelesen:
   aus der laufenden Shopify-Seite (shopify theme dev, 127.0.0.1:9292/, bei 1440 und
   390 px, alle Stylesheets ausser den fuenf nb-Sektionsdateien und den Stilen in den
   Sektionen selbst), dazu die Regeln, die im JTL-Markup treffen (echte Produktkarten
   statt der Shopify-Platzhalter). 162 Regeln aus theme.css.

   Regeln unveraendert, nur mit :where(.nb-start) begrenzt. [role="main"] (Impacts main)
   steht hier als :where(.nb-start) >, weil die Sektionen dort direkt liegen. :where hat keine
   Spezifitaet, die Rangfolge gegen die nb-Dateien bleibt wie in Shopify
   (theme.css davor, nb-ablauf.css usw. danach).

   Variablen: berechnete Werte an main im Shopify-Original bei 390, 740, 800, 1100,
   1300 und 1440 px. Leer im Original heisst hier initial, damit Fallbacks greifen
   wie dort und die v3-Token des Child nicht durchschlagen.
   Schriften: Impact erbt Inter vom body, die Ablauf-Nummern nutzen 'Poynter Old Style'
   (theme.css Zeile 10324), beide mit den lokalen Dateien.
   ============================================================ */

@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poynter Old Style';
  src: url('fonts/poynter-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poynter Old Style';
  src: url('fonts/poynter-600-italic.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

/* Variablen wie an main im Shopify-Original gemessen */
:where(.nb-start) {
  --background: 246 247 251;
  --background-differs-from-previous: initial;
  --background-primary: 246 247 251;
  --calculated-section-spacing-block-end: initial;
  --calculated-section-spacing-block-start: initial;
  --calculated-section-spacing-inline: initial;
  --collection-list-grid: initial;
  --container-gutter: 3rem;
  --container-inner-width: initial;
  --container-max-width: 1300px;
  --container-outer-width: initial;
  --content-over-media-column-gap: initial;
  --content-over-media-content-max-width: initial;
  --content-over-media-gap: initial;
  --content-over-media-height: initial;
  --content-over-media-overlay: initial;
  --content-over-media-row-gap: initial;
  --context-section-spacing-block-end: initial;
  --context-section-spacing-block-start: initial;
  --context-section-spacing-inline: initial;
  --grid-gutter: 1.5rem;
  --hash-difference: initial;
  --hash-difference-abs: initial;
  --heading-font-family: "Abril Fatface", serif;
  --heading-font-style: normal;
  --heading-font-weight: 400;
  --heading-letter-spacing: -0.015em;
  --heading-text-transform: normal;
  --image-max-width: initial;
  --image-mobile-max-width: initial;
  --nb-action-primary-bg: #010C28;
  --nb-action-primary-fg: #F7F5F0;
  --nb-action-primary-hover: #1F2937;
  --nb-border-medium: rgba(1, 12, 40, 0.30);
  --nb-border-strong: rgba(1, 12, 40, 0.40);
  --nb-border-subtle: rgba(1, 12, 40, 0.10);
  --nb-canvas: #F7F5F0;
  --nb-color-charcoal-800: #1F2937;
  --nb-color-charcoal-900: #111827;
  --nb-color-coral: #FF5E56;
  --nb-color-deep-night: #010C28;
  --nb-color-ink-10: rgba(1, 12, 40, 0.10);
  --nb-color-ink-40: rgba(1, 12, 40, 0.40);
  --nb-color-ink-65: rgba(1, 12, 40, 0.65);
  --nb-color-ink-70: rgba(1, 12, 40, 0.70);
  --nb-color-lime: #EAFF9F;
  --nb-color-mint-bg: #9CF0BE;
  --nb-color-mint-ink: #055522;
  --nb-color-on-dark-2: #B3B7C1;
  --nb-color-signal-blue: #5850FF;
  --nb-color-white: #FFFFFF;
  --nb-coral: #FF5E56;
  --nb-deep-night: #010C28;
  --nb-deep-night-hover: #1F2937;
  --nb-duration-fast: 250ms;
  --nb-font-display: 'Poynter Old Style', Georgia, 'Times New Roman', serif;
  --nb-hover-tint: rgba(1, 12, 40, 0.05);
  --nb-ink-muted: rgba(1, 12, 40, 0.65);
  --nb-ink-on-dark: #F7F5F0;
  --nb-ink-on-dark-muted: #B3B7C1;
  --nb-ink-primary: #010C28;
  --nb-lime: #EAFF9F;
  --nb-radius-card: 24px;
  --nb-radius-input: 12px;
  --nb-radius-md: 16px;
  --nb-radius-pill: 999px;
  --nb-space-lg: 48px;
  --nb-space-md: 24px;
  --nb-space-sektion-band: clamp(24px, 20.33px + 0.94vw, 32px);
  --nb-space-sektion-gross: clamp(80px, 50.64px + 7.53vw, 144px);
  --nb-space-sektion-normal: clamp(56px, 37.65px + 4.71vw, 96px);
  --nb-space-sm: 16px;
  --nb-space-xs: 8px;
  --nb-surface-dark: #010C28;
  --nb-surface-input: #EDEFF3;
  --nb-surface-warm: #F7F5F0;
  --previous-section-background-hash: initial;
  --product-card-info-padding: initial;
  --product-list-carousel-item-width: initial;
  --product-list-column-gap: 1.5rem;
  --product-list-gap: initial;
  --product-list-grid: initial;
  --product-list-row-gap: 3rem;
  --rounded-full: 9999px;
  --rounded-lg: 1.75rem;
  --rounded-sm: 0.4375rem;
  --scrollbar-width: initial;
  --section-background-hash: initial;
  --section-inner-max-spacing-block: 4rem;
  --section-inner-spacing-inline: 4.5rem;
  --section-outer-spacin-block-end: initial;
  --section-outer-spacing-block: 5rem;
  --section-outer-spacing-block-start: initial;
  --section-spacing-block: initial;
  --section-spacing-block-end: initial;
  --section-spacing-block-start: initial;
  --section-spacing-inline: initial;
  --section-stack-spacing-block: 3rem;
  --section-stack-spacing-inline: initial;
  --shadow: 0 5px 15px rgb(16 24 40 / 0.03);
  --shadow-block: 0px 0px 0px rgb(16 24 40 / 0.03);
  --spacing-0-5: 0.125rem;
  --spacing-1: 0.25rem;
  --spacing-1-5: 0.375rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-14: 3.5rem;
  --spacing-2: 0.5rem;
  --spacing-2-5: 0.625rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --stagger-products-reveal-opacity: 0;
  --star-color: 255 183 74;
  --sticky-area-height: calc(1 * 0px + 1 * 125px);
  --text-base: 1.0rem;
  --text-color: 16 24 40;
  --text-font-family: Inter, sans-serif;
  --text-font-style: normal;
  --text-font-weight: 400;
  --text-h0: 4rem;
  --text-h2: 2.5rem;
  --text-h5: 1.25rem;
  --text-letter-spacing: -0.02em;
  --text-primary: 16 24 40;
  --text-sm: 0.875rem;
  --text-with-icons-gap: initial;
  --text-with-icons-justify: initial;
  --text-with-icons-template: initial;
  --text-with-icons-text-align: initial;
  --text-xs: 0.75rem;
  --transform-logical-flip: 1;
  --transition-direction: initial;
}
@media screen and (max-width: 699px) {
  :where(.nb-start) {
    --container-gutter: 1.25rem;
    --grid-gutter: 1.25rem;
    --nb-radius-card: 20px;
    --product-list-column-gap: 1.25rem;
    --product-list-row-gap: 2rem;
    --section-inner-max-spacing-block: 2.25rem;
    --section-inner-spacing-inline: 1.25rem;
    --section-outer-spacing-block: 2.5rem;
    --section-stack-spacing-block: 2rem;
    --sticky-area-height: calc(1 * 0px + 1 * 127px);
    --text-base: 0.875rem;
    --text-h0: 2.5rem;
    --text-h2: 1.5rem;
    --text-h5: 1.125rem;
    --text-sm: 0.75rem;
    --text-xs: 0.6875rem;
  }
}
@media screen and (min-width: 700px) and (max-width: 767px) {
  :where(.nb-start) {
    --container-gutter: 2rem;
    --nb-radius-card: 20px;
    --section-inner-max-spacing-block: 2.5rem;
    --section-inner-spacing-inline: 3rem;
    --section-outer-spacing-block: 3.5rem;
    --sticky-area-height: calc(1 * 0px + 1 * 127px);
    --text-h0: 3.25rem;
    --text-h2: 1.75rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 999px) {
  :where(.nb-start) {
    --container-gutter: 2rem;
    --section-inner-max-spacing-block: 2.5rem;
    --section-inner-spacing-inline: 3rem;
    --section-outer-spacing-block: 3.5rem;
    --sticky-area-height: calc(1 * 0px + 1 * 127px);
    --text-h0: 3.25rem;
    --text-h2: 1.75rem;
  }
}
@media screen and (min-width: 1000px) and (max-width: 1149px) {
  :where(.nb-start) {
    --section-inner-max-spacing-block: 3.5rem;
    --section-inner-spacing-inline: 4rem;
    --section-outer-spacing-block: 4rem;
    --text-h0: 3.25rem;
    --text-h2: 1.75rem;
  }
}
@media screen and (min-width: 1150px) and (max-width: 1399px) {
  :where(.nb-start) {
    --section-inner-max-spacing-block: 3.5rem;
    --section-inner-spacing-inline: 4rem;
    --section-outer-spacing-block: 4rem;
    --text-h0: 3.25rem;
    --text-h2: 1.75rem;
  }
}

/* Erbe vom Impact-body (theme.css Zeile 17-26) und html (Zeile 9-15) */
:where(.nb-start) {
  --background: var(--background-primary);
  --text-color: var(--text-primary);
  background: rgb(var(--background));
  color: rgb(var(--text-color));
  font: var(--text-font-style) var(--text-font-weight) var(--text-base) / 1.6 var(--text-font-family);
  letter-spacing: var(--text-letter-spacing);
  tab-size: 4;
  -webkit-font-smoothing: auto; /* JTL: nb-basis.css glaettet den body, Impact nicht */
  interpolate-size: allow-keywords;
}

/* Impact-Regeln (theme.css), begrenzt */
:where(.nb-start) *, :where(.nb-start) ::before, :where(.nb-start) ::after { box-sizing: border-box; border-style: solid; border-width: 0px; border-color: rgb(var(--text-color) / .12); }
:where(.nb-start) h1, :where(.nb-start) h2, :where(.nb-start) h3 { font-size: inherit; font-weight: inherit; }
:where(.nb-start) a { color: inherit; text-decoration: inherit; }
:where(.nb-start) button, :where(.nb-start) input { font-family: inherit; font-size: 100%; font-weight: inherit; font-style: inherit; line-height: inherit; text-transform: inherit; color: inherit; margin: 0px; padding: 0px; }
:where(.nb-start) button { text-transform: none; }
:where(.nb-start) button, :where(.nb-start) [type="button"], :where(.nb-start) [type="submit"] { appearance: button; text-align: inherit; background-color: rgba(0, 0, 0, 0); background-image: none; }
:where(.nb-start) button, :where(.nb-start) label, :where(.nb-start) summary, :where(.nb-start) [type="submit"] { -webkit-tap-highlight-color: transparent; touch-action: manipulation; cursor: pointer; }
:where(.nb-start) ::-webkit-inner-spin-button { height: auto; }
:where(.nb-start) ::-webkit-outer-spin-button { height: auto; }
:where(.nb-start) ::-webkit-search-decoration { appearance: none; }
:where(.nb-start) ::-webkit-file-upload-button { appearance: button; font: inherit; }
:where(.nb-start) ::-webkit-date-and-time-value { text-align: start; }
:where(.nb-start) summary { user-select: none; list-style-type: none; }
:where(.nb-start) summary::-webkit-details-marker { display: none; }
:where(.nb-start) h1, :where(.nb-start) h2, :where(.nb-start) h3, :where(.nb-start) p { margin: 0px; }
:where(.nb-start) ol, :where(.nb-start) ul { margin: 0px; padding: 0px; list-style: none; }
:where(.nb-start) input::placeholder { opacity: 1; color: rgb(156, 163, 175); }
:where(.nb-start) :disabled { cursor: default; }
:where(.nb-start) img { vertical-align: middle; display: block; }
:where(.nb-start) img { color: rgba(0, 0, 0, 0); max-width: min(var(--image-mobile-max-width, var(--image-max-width, 100%)), 100%); object-fit: inherit; object-position: inherit; height: auto; }
:where(.nb-start) :focus:not(:focus-visible) { outline: none; }
:where(.nb-start) recently-viewed-products { display: block; }
@media screen and (min-width: 700px) {
:where(.nb-start) img { max-width: min(var(--image-max-width, 100%), 100%); }
}
:where(.nb-start) .circle-button { width: var(--spacing-12); height: var(--spacing-12); border-radius: var(--rounded-full); place-items: center; transition: opacity var(--nb-motion-liste-aus) var(--nb-motion-kurve), scale var(--nb-motion-druck) var(--nb-motion-kurve); display: grid; }
:where(.nb-start) .circle-button[disabled] { opacity: 0.5; pointer-events: none; }
/* Druck nach Fassung C (Daniel 09.10.2026) */
:where(.nb-start) .circle-button:active:not([disabled]) { scale: var(--nb-motion-druck-scale); transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); }
:where(.nb-start) .circle-button--fill { background: rgb(var(--background-primary)); color: rgb(var(--text-primary)); }
:where(.nb-start) .circle-button--lg { width: var(--spacing-14); height: var(--spacing-14); }
:where(.nb-start) .animated-arrow { pointer-events: none; place-items: center; display: grid; }
:where(.nb-start) .animated-arrow::before, :where(.nb-start) .animated-arrow::after { content: ""; grid-area: 1 / -1; transition: 0.2s ease-in-out; }
:where(.nb-start) .animated-arrow::before { border-block-start-width: 2px; border-inline-end-width: 2px; width: 0.5rem; height: 0.5rem; transform: rotate(calc(var(--transform-logical-flip) * 45deg)); border-color: currentcolor; position: relative; }
:where(.nb-start) .animated-arrow:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))::before { left: -1px; }
:where(.nb-start) .animated-arrow::after { width: var(--spacing-2-5); height: var(--spacing-0-5); transform-origin: center center; opacity: 0; background: currentcolor; transform: scaleX(0.5); }
@media screen and (pointer: fine) {
@media (hover: hover) and (pointer: fine) { :where(.nb-start) .group:hover .animated-arrow::before { transform: translateX(calc(var(--transform-logical-flip) * var(--spacing-0-5))) rotate(calc(var(--transform-logical-flip) * 45deg)); } }
@media (hover: hover) and (pointer: fine) { :where(.nb-start) .group:hover .animated-arrow::after { opacity: 1; transform: scaleX(1); } }
}
:where(.nb-start) .animated-arrow--reverse { transform: rotate(180deg); }
:where(.nb-start) .circle-chevron { width: var(--spacing-6); height: var(--spacing-6); border-radius: var(--rounded-full); background: rgb(var(--text-color) / .1); flex-shrink: 0; place-items: center; transition: 0.2s ease-in-out; display: grid; }
@media screen and (pointer: fine) {
@media (hover: hover) and (pointer: fine) { :where(.nb-start) .group:hover .circle-chevron.group-hover\:colors:not([disabled]) { background: rgb(var(--text-color)); color: rgb(var(--background)); } }
}
:where(.nb-start) scroll-carousel { position: relative; }
:where(.nb-start) .content-over-media { grid-template: 0 minmax(0, 1fr) 0 / minmax(0, 1fr) minmax(0, min(var(--container-max-width), 100% - var(--content-over-media-gap, var(--content-over-media-column-gap, var(--container-gutter))) * 2)) minmax(0, 1fr); gap: var(--content-over-media-row-gap, var(--content-over-media-gap, var(--container-gutter))) var(--content-over-media-column-gap, var(--content-over-media-gap, var(--container-gutter))); place-items: center; display: grid; position: relative; overflow: hidden; transform: translateZ(0px); }
:where(.nb-start) .content-over-media::before { content: ""; background: rgb(var(--content-over-media-overlay)); border-radius: inherit; z-index: 1; pointer-events: none; transition: background 0.2s ease-in-out; position: absolute; inset: 0px; }
:where(.nb-start) .content-over-media > :is(picture, img, video, iframe, svg, video-media) { height: var(--content-over-media-height, auto); transform-origin: center top; overflow-wrap: anywhere; object-fit: cover; object-position: center center; border-radius: inherit; user-select: none; grid-area: 1 / 1 / span 3 / span 3; place-self: stretch; width: 100%; min-height: 100%; max-height: 100%; position: relative; }
:where(.nb-start) .content-over-media > :not(img, video, iframe, svg, video-media, picture) { max-width: var(--content-over-media-content-max-width, 780px); z-index: 1; grid-area: 2 / 2 / auto / span 1; position: relative; }
:where(.nb-start) .page-dots { justify-content: center; gap: var(--spacing-2-5) var(--spacing-4); flex-wrap: wrap; display: flex; }
:where(.nb-start) .page-dots > * { width: var(--spacing-1-5); height: var(--spacing-1-5); border-radius: var(--rounded-full); opacity: 0.3; background: currentcolor; transition: opacity 0.2s ease-in-out; }
:where(.nb-start) .page-dots > [aria-current="true"] { opacity: 1; }
:where(.nb-start) .form-control { text-align: start; position: relative; }
:where(.nb-start) .v-stack { display: grid; }
:where(.nb-start) .bleed { scroll-padding-inline: var(--container-outer-width); margin-inline-start: calc(-1 * var(--container-outer-width)); margin-inline-end: calc(-1 * var(--container-outer-width)); padding-inline-start: var(--container-outer-width); padding-inline-end: var(--container-outer-width); display: grid; }
:where(.nb-start) .full-bleed { margin-inline-start: calc(-1 * var(--container-outer-width)); margin-inline-end: calc(-1 * var(--container-outer-width)); display: grid; }
@media screen and (min-width: 1150px) {
:where(.nb-start) .lg\:unbleed { margin-inline: 0px; padding-inline: 0px; scroll-padding-inline: 0px; }
}
:where(.nb-start) > .shopify-section { --section-is-first: 0; --hash-difference: calc(var(--section-background-hash)  - var(--previous-section-background-hash, -1)); --hash-difference-abs: max(var(--hash-difference), -1 * var(--hash-difference)); --background-differs-from-previous: max(0, min(var(--hash-difference-abs, 1), 1)); background: rgb(var(--background)); position: relative; }
:where(.nb-start) > .shopify-section:not(.contents) { display: flow-root; }
:where(.nb-start) > .shopify-section:first-child { --section-is-first: 1; }
:where(.nb-start) .section { --context-section-spacing-block-start: var(--section-outer-spacing-block); --context-section-spacing-block-end: var(--section-outer-spacing-block); --context-section-spacing-inline: var(--container-gutter); --calculated-section-spacing-block-start: var(--section-spacing-block-start, var(--section-spacing-block, var(--context-section-spacing-block-start))); --calculated-section-spacing-block-end: var(--section-spacing-block-end, var(--section-spacing-block, var(--context-section-spacing-block-end))); --calculated-section-spacing-inline: var(--section-spacing-inline, var(--context-section-spacing-inline)); --container-inner-width: min((100vw - var(--scrollbar-width, 0px))  - var(--calculated-section-spacing-inline, 0px) * 2, var(--container-max-width)); --container-outer-width: calc(((100vw - var(--scrollbar-width, 0px))  - var(--container-inner-width, 0px)) / 2); --section-stack-spacing-inline: var(--section-inner-spacing-inline, 0px); padding-inline-start: max(var(--calculated-section-spacing-inline), 50% - var(--container-max-width) / 2); padding-inline-end: max(var(--calculated-section-spacing-inline), 50% - var(--container-max-width) / 2); }
:where(.nb-start) .section { padding-block-start: calc(var(--background-differs-from-previous) * var(--calculated-section-spacing-block-start)); padding-block-end: var(--calculated-section-spacing-block-end); }
@media screen and (min-width: 700px) {
:where(.nb-start) .section-boxed { --context-section-spacing-block-start: min(var(--section-inner-max-spacing-block, var(--section-outer-spacing-block))); --context-section-spacing-block-end: min(var(--section-inner-max-spacing-block, var(--section-outer-spacing-block))); --context-section-spacing-inline: var(--section-inner-spacing-inline); --container-inner-width: calc(var(--container-max-width)  - var(--container-outer-width) * 2); --container-outer-width: var(--calculated-section-spacing-inline); border-radius: var(--rounded-lg); box-shadow: var(--shadow-block); margin-block-start: calc(var(--background-differs-from-previous) * var(--section-outer-spacing-block-start, var(--section-outer-spacing-block))); margin-block-end: var(--section-outer-spacin-block-end, var(--section-outer-spacing-block)); margin-inline-start: max(var(--container-gutter), 50% - var(--container-max-width) / 2); margin-inline-end: max(var(--container-gutter), 50% - var(--container-max-width) / 2); padding-block-start: var(--calculated-section-spacing-block-start); padding-inline-start: var(--calculated-section-spacing-inline); padding-inline-end: var(--calculated-section-spacing-inline); }
:where(.nb-start) .shopify-section:first-child { --section-outer-spacing-block-start: 24px; }
}
:where(.nb-start) .section-header { gap: var(--spacing-4); justify-items: start; display: grid; }
@media screen and (min-width: 1150px) {
:where(.nb-start) .section-header { grid-template-columns: 700px; justify-content: space-between; align-items: end; }
:where(.nb-start) .section-header > .text-with-icon { grid-column-start: 2; }
}
:where(.nb-start) .section-stack { gap: var(--section-stack-spacing-block, 0px) var(--section-stack-spacing-inline, 0px); grid-auto-columns: minmax(0px, 1fr); display: grid; }
:where(.nb-start) .product-list { grid: var(--product-list-grid); gap: var(--product-list-gap); scroll-padding-top: calc(var(--sticky-area-height)  + 20px); display: grid; position: relative; }
@media screen and (min-width: 700px) {
@supports (grid-template-rows: subgrid) {
:where(.nb-start) .product-list { grid-template-rows: auto auto; }
:where(.nb-start) .product-list > * { grid-template-rows: subgrid; grid-row: span 2; gap: 0px; }
:where(.nb-start) .product-card__info { align-content: start; }
}
}
:where(.nb-start) .rating { align-items: center; gap: var(--spacing-1-5); display: flex; }
:where(.nb-start) .rating__stars { display: contents; }
:where(.nb-start) .rating__star { color: rgb(var(--star-color)); position: relative; top: -1px; }
@media screen and (min-width: 700px) {
:where(.nb-start) .rating__star { width: 15px; height: 15px; }
}
:where(.nb-start) .rating-with-text { gap: var(--spacing-2); grid-template-columns: minmax(0px, 1fr); grid-auto-flow: column; align-items: baseline; display: grid; }
:where(.nb-start) .product-card { --product-card-badge-spacing: var(--spacing-2); --product-card-info-padding: var(--spacing-4); --product-card-quick-buy-inset: var(--spacing-2); border-radius: var(--rounded-sm); isolation: isolate; grid-template-columns: minmax(0px, 1fr); align-content: start; align-items: start; display: grid; position: relative; }
:where(.nb-start) .product-card__figure { display: block; position: relative; }
:where(.nb-start) .product-card__image { object-fit: contain; object-position: center center; transition: opacity 0.2s ease-in-out; }
:where(.nb-start) .product-card__image:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { border-top-left-radius: var(--rounded-sm); border-top-right-radius: var(--rounded-sm); }
:where(.nb-start) .product-card__title { line-height: 1.5; }
:where(.nb-start) .product-card__info { gap: var(--spacing-1); padding: var(--product-card-info-padding); grid-template-columns: minmax(0px, 1fr); justify-items: start; display: grid; }
@media screen and (min-width: 700px) {
:where(.nb-start) .product-card { --product-card-badge-spacing: var(--spacing-4); --product-card-info-padding: var(--spacing-5); --product-card-quick-buy-inset: var(--spacing-4); }
}
@media screen and (min-width: 1400px) {
:where(.nb-start) .product-card__info { --product-card-info-padding: var(--spacing-6) var(--spacing-8) var(--spacing-8) var(--spacing-8); }
}
:where(.nb-start) .price-list { align-items: baseline; gap: var(--spacing-0-5) var(--spacing-2); flex-wrap: wrap; display: flex; }
:where(.nb-start) .prose > :first-child, :where(.nb-start) .prose > :first-child :first-child { margin-block-start: 0px !important; }
:where(.nb-start) .prose > :last-child, :where(.nb-start) .prose > :last-child :last-child { margin-block-end: 0px !important; }
:where(.nb-start) .reversed-link { background: linear-gradient(to right, currentcolor, currentcolor) 0px min(100%, 1.35em) / 0px 1px no-repeat; transition: background-size 0.3s ease-in-out; }
@supports (height: 1lh) {
:where(.nb-start) .reversed-link { background: linear-gradient(to right, currentcolor, currentcolor) 0px min(100%, 1.2lh) / 0px 1px no-repeat; }
}
@media screen and (pointer: fine) {
@media (hover: hover) and (pointer: fine) { :where(.nb-start) .group:hover .reversed-link { background-size: 100% 1px; } }
}
:where(.nb-start) .link-faded { opacity: 0.7; transition: opacity 0.2s ease-in-out; }
@media screen and (pointer: fine) {
@media (hover: hover) and (pointer: fine) { :where(.nb-start) .link-faded:hover { opacity: 1; } }
}
:where(.nb-start) .text-with-icon { gap: var(--spacing-3); align-items: center; display: flex; }
:where(.nb-start) .floating-controls-container { position: relative; }
:where(.nb-start) .floating-controls-container .circle-button { opacity: 0; visibility: hidden; z-index: 1; transition: opacity 0.1s var(--nb-motion-kurve), transform 0.1s var(--nb-motion-kurve), visibility 0.1s var(--nb-motion-kurve), scale var(--nb-motion-druck) var(--nb-motion-kurve); position: absolute; top: calc(50% - 24px); transform: scale(0.8); }
:where(.nb-start) .floating-controls-container .circle-button:first-of-type:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { left: var(--spacing-5); }
:where(.nb-start) .floating-controls-container .circle-button:last-of-type:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { right: var(--spacing-5); }
@media screen and (pointer: fine) {
@media (hover: hover) and (pointer: fine) { :where(.nb-start) .floating-controls-container:hover .is-scrollable ~ .circle-button:not([disabled]) { opacity: 1; visibility: visible; transform: scale(1); } }
}
:where(.nb-start) .icon { vertical-align: middle; display: block; }
:where(.nb-start) .collection-list { grid: var(--collection-list-grid, none); align-items: start; gap: var(--grid-gutter); display: grid; }
:where(.nb-start) .collection-card { --transition-direction: 1; scroll-snap-align: center; scroll-snap-stop: always; overflow: hidden; transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); }
/* Klickbare Karte gibt breit nach, Fassung C (Daniel 09.10.2026) */
:where(.nb-start) .collection-card:active { scale: var(--nb-motion-druck-scale-breit); }
:where(.nb-start) .collection-card--reverse-transition { --transition-direction: -1; }
:where(.nb-start) .collection-card__content-wrapper svg { opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s, transform 0.2s; display: inline-block; }
:where(.nb-start) .collection-card__content { transition: transform 0.2s; }
@media screen and (min-width: 1000px) {
:where(.nb-start) .collection-card { scroll-snap-align: none; }
}
@media screen and (pointer: fine) {
@media (hover: hover) and (pointer: fine) { :where(.nb-start) .collection-card:hover .collection-card__content { transform: translateY(calc(var(--transition-direction) * -8px)); } }
@media (hover: hover) and (pointer: fine) { :where(.nb-start) .collection-card:hover .collection-card__content-wrapper svg { opacity: 1; visibility: visible; transform: translateY(-8px); } }
}
:where(.nb-start) .revealed-image { z-index: -1; display: inline; position: relative; }
:where(.nb-start) .revealed-image__scroll-tracker { height: 100%; position: absolute; top: 0px; }
:where(.nb-start) .revealed-image__scroller { height: 180lvh; display: block; position: sticky; top: 0px; overflow: hidden; }
:where(.nb-start) .revealed-image__wrapper { height: 100lvh; top: calc(var(--sticky-area-height) / 2); grid-auto-rows: minmax(0px, 1fr); place-items: center; display: grid; position: relative; }
:where(.nb-start) .revealed-image__wrapper > * { grid-area: 1 / -1; }
:where(.nb-start) .revealed-image__wrapper img { object-fit: cover; width: 100%; height: 100%; }
:where(.nb-start) .revealed-image__wrapper > .revealed-image__image-clipper, :where(.nb-start) .revealed-image__wrapper > .revealed-image__content--inside { clip-path: inset(37% 37% 41%); width: 100%; height: 100%; }
:where(.nb-start) .revealed-image__content { width: 100%; height: 100%; padding-inline: max(var(--container-gutter), 50% - var(--container-max-width) / 2); text-align: center; z-index: 1; opacity: 0; place-content: center; display: grid; }
:where(.nb-start) .revealed-image__content-inner { max-width: 1300px; margin-inline: auto; }
:where(.nb-start) .text-with-icons { gap: var(--spacing-8); text-align: var(--text-with-icons-text-align); justify-content: var(--text-with-icons-justify); display: grid; }
:where(.nb-start) .text-with-icons__list { grid: auto / var(--text-with-icons-template); row-gap: var(--spacing-6); align-items: start; min-width: 0px; display: grid; }
:where(.nb-start) .text-with-icons__item { gap: var(--text-with-icons-gap); justify-items: var(--text-with-icons-justify); padding-inline-start: var(--spacing-6); padding-inline-end: var(--spacing-6); display: grid; }
@media screen and (min-width: 1000px) {
:where(.nb-start) :not(.is-scrollable) .text-with-icons__list { gap: var(--spacing-6); }
:where(.nb-start) :not(.is-scrollable) .text-with-icons__item { padding-inline: 0px; }
}
@media screen and (min-width: 1400px) {
:where(.nb-start) :not(.is-scrollable) .text-with-icons__list { gap: var(--spacing-10); }
}
:where(.nb-start) .sr-only { clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; width: 1px; height: 1px; margin: -1px; padding: 0px; position: absolute; overflow: hidden; }
:where(.nb-start) .tap-area { position: relative; }
:where(.nb-start) .tap-area::before { content: ""; inset: calc(-1 * var(--spacing-2-5)); position: absolute; }
@media screen and (pointer: fine) {
:where(.nb-start) .zoom-image--enabled .zoom-image { transform-origin: center center; transition: transform 1.5s cubic-bezier(0.22, 1, 0.36, 1); }
@media (hover: hover) and (pointer: fine) { :where(.nb-start) .zoom-image--enabled .group:hover .zoom-image { transform: scale(1.06); } }
}
@media (prefers-reduced-motion: no-preference) {
:where(.nb-start) [reveal-js], :where(.nb-start) [reveal-on-scroll="true"] { opacity: 0; }
}
@media (scripting: none) {
:where(.nb-start) [reveal-js], :where(.nb-start) [reveal-on-scroll="true"] { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
:where(.nb-start) reveal-items { opacity: var(--stagger-products-reveal-opacity); }
}
@media (scripting: none) {
:where(.nb-start) reveal-items { opacity: 1; }
}
:where(.nb-start) .border { border-width: 1px; }
:where(.nb-start) .rounded-sm { border-radius: var(--rounded-sm); }
:where(.nb-start) .text-custom { color: rgb(var(--text-color)); }
:where(.nb-start) .text-subdued { color: rgb(var(--text-color) / .7); }
:where(.nb-start) .bg-custom { background: rgb(var(--background)); }
:where(.nb-start) .shadow { filter: drop-shadow(var(--shadow)); }
:where(.nb-start) .scroll-area { scrollbar-width: none; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; overflow: auto hidden; }
:where(.nb-start) .scroll-area::-webkit-scrollbar { display: none; }
:where(.nb-start) .snap-center { scroll-snap-align: center; scroll-snap-stop: always; }
:where(.nb-start) :not(.is-scrollable) ~ .peer-not-scrollable\:hidden, :where(.nb-start) .hidden { display: none; }
:where(.nb-start) .contents { display: contents; }
@media screen and (min-width: 700px) {
:where(.nb-start) .sm\:hidden { display: none; }
:where(.nb-start) .sm\:block { display: block; }
}
@media screen and (min-width: 1000px) {
:where(.nb-start) .md\:hidden { display: none; }
:where(.nb-start) .md\:block { display: block; }
}
:where(.nb-start) .text-center { text-align: center; }
:where(.nb-start) .place-self-end-center { place-self: end center; }
:where(.nb-start) .w-full { width: 100%; }
:where(.nb-start) .aspect-short { aspect-ratio: 4 / 3; }
:where(.nb-start) .gap-0\.5 { gap: var(--spacing-0-5); }
:where(.nb-start) .placeholder { background: rgb(var(--text-primary) / .3); fill: rgb(var(--text-primary) / .7); color: rgb(var(--text-primary) / .7); display: block; }
:where(.nb-start) .bold { font-weight: bold; }
:where(.nb-start) .text-xs { font-size: var(--text-xs); line-height: 1.7; }
:where(.nb-start) .text-sm { font-size: var(--text-sm); line-height: 1.6; }
:where(.nb-start) .h0, :where(.nb-start) .h2, :where(.nb-start) .h5, :where(.nb-start) .prose :is(h1, h2, h3, h4, h5, h6) { font-family: var(--heading-font-family); font-weight: var(--heading-font-weight); font-style: var(--heading-font-style); letter-spacing: var(--heading-letter-spacing); text-transform: var(--heading-text-transform); overflow-wrap: anywhere; }
:where(.nb-start) .h0 { font-size: var(--text-h0); line-height: 1; }
:where(.nb-start) .h2 { font-size: var(--text-h2); line-height: 1.1; }
:where(.nb-start) .h5 { font-size: var(--text-h5); line-height: 1.4; }
:where(.nb-start) .product-card { box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 4px; transition: box-shadow 0.2s; border-radius: 0.75rem; }
:where(.nb-start) .product-list { padding-top: 6px; padding-bottom: 6px; }
/* Hover nur mit Maus. Jede :hover-Regel steht in @media (hover: hover), am Handy bliebe sonst das getippte Element im Hover stehen (Daniel 07.10.2026, Regel HOVERMEDIA) */
@media (hover: hover) and (pointer: fine) { :where(.nb-start) .product-card:hover { box-shadow: rgba(0, 0, 0, 0.14) 0px 2px 4px; } }
:where(.nb-start) .product-card__figure { display: flex; align-items: center; justify-content: center; }
:where(.nb-start) .product-card__image { transform: scale(0.78); transform-origin: center bottom; transition: transform 0.2s; margin-top: -8px; }
:where(.nb-start) .product-card .price-list .text-subdued { color: rgb(26, 26, 26); }
:where(.nb-start) .product-card .price-list { font-size: 1.2rem; font-family: Gilroy, GilroyFallback, sans-serif !important; font-weight: 600 !important; }
:where(.nb-start) .product-card__info p.text-sm.text-subdued { font-size: 12px !important; }
:where(.nb-start) :where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .section-header__title, .prose :is(h1, h2, h3, h4, h5, h6), .product-card__title) { font-family: Gilroy, GilroyFallback, sans-serif !important; font-weight: 600 !important; }

/* ============================================================
   JTL: Ergaenzungen, die es im Shopify-Original nicht gab
   ============================================================ */
/* Bild fehlt lokal (lag im Shopify-CDN): der Platz bleibt, neutrale Flaeche */
:where(.nb-start) .nb-start-bild-fehlt { width: 100%; background: rgb(var(--text-color) / .06); }
/* Neue Geraete zuerst sehen: m-feld statt des Shopify-Eingabefelds, nimmt die Breite des alten Felds */
:where(.nb-start) .nb-eintrag__zeile > .nb-fl { flex: 1; min-width: 0; }
/* m-feld behaelt die Token des Formular-Systems (nb-tokens-v3.css), nicht die alten aus Shopify */
.nb-start .nb-fl { --nb-radius-input: 16px; --nb-space-xs: 12px; --nb-radius-pill: 999px; }
/* JTL: .page-width hat im Shopify-Theme keine Regel (gemessen 01.10.2026 an 127.0.0.1:9292,
   nb-ablauf, nb-duo, nb-fragen, nb-schlussruf, nb-eintrag stehen dort bei x = 0). Hier dieselbe
   Breite wie Impacts Container der Baender darueber: 1300 px mittig, sonst der Seitenrand. */
:where(.nb-start) .page-width { width: min(100% - 2 * var(--container-gutter), var(--container-max-width)); margin-inline: auto; }
/* JTL: Das Band "Bild beim Scrollen" (revealed-image) steht bei Impact auf z-index -1, damit die
   folgenden Sektionen darueber scrollen. In Shopify liegt der Seitengrund am body und damit auf
   der Leinwand, main ist durchsichtig, das Band bleibt sichtbar. Hier traegt .nb-start den Grund
   selbst (body ist weiss) und deckte das Band ganz zu (gemessen 01.10.2026, Pixel in der Mitte
   246,247,251 statt Bild). Mit eigenem Stapelkontext liegt das Band ueber dem Grund von .nb-start
   und weiter unter den Sektionen. Impacts Regel bleibt unveraendert. */
:where(.nb-start) { isolation: isolate; }