/* NextBuy-Fuss fuer den JTL-Shop, Block 3.1 (24.09.2026). * * 1:1 aus dem Shopify-Theme (Impact), Anweisung Daniel am 24.09.2026. Der * Fuss hat im Theme keine eigene CSS-Datei, er haengt am grossen Impact-CSS. * Diese Datei ist ein Auszug: am 24.09.2026 aus shopify theme dev alle * Regeln gezogen, die auf ein Element im Fuss oder im Newsletter-Band * greifen (126 Regeln, 75 Variablen). Jede Regel ist auf .nb-fuss-bereich * begrenzt, damit Impact-Regeln wie body oder a den Rest der Seite nicht * treffen. Nicht von Hand pflegen. Im Branding-Durchgang wird der Fuss neu * gebaut (web-architektur.md N5). */ /* Schrift Inter, im Theme vom Shopify-CDN, hier lokal (OFL-Lizenz) */ @font-face { font-family: Inter; font-weight: 400; font-style: normal; font-display: fallback; src: url("fonts/inter-400.woff2") format("woff2"); } @font-face { font-family: Inter; font-weight: 700; font-style: normal; font-display: fallback; src: url("fonts/inter-700.woff2") format("woff2"); } /* Variablen und geerbte Typografie. Im Theme am body gesetzt und je Breite umgeschaltet (Impact-Stufen 700, 1000, 1150, 1400, 1600). Am Fuss gemessen bei 390, 800, 1100, 1250, 1500 und 1700 px, mobil zuerst. */ .nb-fuss-bereich { --accent: 26 26 26; --background: 246 247 251; --background-primary: 246 247 251; --border-color: 16 24 40 / 0.12; --button-background-primary: 26 26 26; --button-background-secondary: 240 196 23; --button-text-primary: 255 255 255; --button-text-secondary: 26 26 26; --checkmark-svg-url: url(/cdn/shop/t/18/assets/checkmark.svg?v=45016952970290064281789978476); --container-gutter: 1.25rem; --container-max-width: 1300px; --container-narrow-max-width: 1050px; --cursor-close-svg-url: url(/cdn/shop/t/18/assets/cursor-close.svg?v=173028475193096508921789909581); --cursor-zoom-in-svg-url: url(/cdn/shop/t/18/assets/cursor-zoom-in.svg?v=48413429182818659061789909585); --cursor-zoom-out-svg-url: url(/cdn/shop/t/18/assets/cursor-zoom-out.svg?v=52269851889587445261789909585); --dialog-background: 255 255 255; --error-background: 254 231 231; --error-text: 248 58 58; --footer-background: 255 255 255; --footer-text: 26 26 26; --grid-gutter: 1.25rem; --header-background: 255 255 255; --header-height: 127px; --header-text: 26 26 26; --heading-font-family: "Abril Fatface", serif; --heading-font-style: normal; --heading-font-weight: 400; --heading-letter-spacing: -0.015em; --heading-text-transform: normal; --input-gap: 0.5rem; --input-height: 2.625rem; --input-padding-inline: 1rem; --on-sale-badge-background: 248 58 58; --on-sale-badge-text: 255 255 255; --on-sale-text: 248 58 58; --primary-badge-background: 128 60 238; --primary-badge-text: 255 255 255; --product-card-background: 255 255 255; --product-card-text: 26 26 26; --product-list-column-gap: 1.25rem; --product-list-row-gap: 2rem; --rounded: 0.875rem; --rounded-button: 0.5rem; --rounded-full: 9999px; --rounded-input: 0.5rem; --rounded-lg: 1.75rem; --rounded-sm: 0.4375rem; --rounded-xs: 0.25rem; --scrollbar-width: 15px; --section-inner-max-spacing-block: 2.25rem; --section-inner-spacing-inline: 1.25rem; --section-outer-spacing-block: 2.5rem; --section-stack-spacing-block: 2rem; --shadow: 0 5px 15px rgb(16 24 40 / 0.03); --shadow-block: 0px 0px 0px rgb(16 24 40 / 0.03); --shadow-md: 0 5px 30px rgb(16 24 40 / 0.03); --shadow-sm: 0 2px 8px rgb(16 24 40 / 0.03); --sold-out-badge-background: 0 0 0; --sold-out-badge-text: 255 255 255; --spacing-0-5: 0.125rem; --spacing-1: 0.25rem; --spacing-1-5: 0.375rem; --spacing-10: 2.5rem; --spacing-11: 2.75rem; --spacing-12: 3rem; --spacing-14: 3.5rem; --spacing-16: 4rem; --spacing-18: 4.5rem; --spacing-2: 0.5rem; --spacing-2-5: 0.625rem; --spacing-20: 5rem; --spacing-24: 6rem; --spacing-28: 7rem; --spacing-3: 0.75rem; --spacing-3-5: 0.875rem; --spacing-32: 8rem; --spacing-36: 9rem; --spacing-4: 1rem; --spacing-4-5: 1.125rem; --spacing-40: 10rem; --spacing-44: 11rem; --spacing-48: 12rem; --spacing-5: 1.25rem; --spacing-5-5: 1.375rem; --spacing-52: 13rem; --spacing-56: 14rem; --spacing-6: 1.5rem; --spacing-6-5: 1.625rem; --spacing-60: 15rem; --spacing-64: 16rem; --spacing-7: 1.75rem; --spacing-7-5: 1.875rem; --spacing-72: 18rem; --spacing-8: 2rem; --spacing-8-5: 2.125rem; --spacing-80: 20rem; --spacing-9: 2.25rem; --spacing-9-5: 2.375rem; --spacing-96: 24rem; --stagger-products-reveal-opacity: 0; --star-color: 255 183 74; --sticky-announcement-bar-enabled: 1; --sticky-area-height: calc(1 * 0px + 1 * 127px); --sticky-header-enabled: 1; --success-background: 224 244 232; --success-text: 0 163 65; --text-base: 0.875rem; --text-color: 16 24 40; --text-font-family: Inter, sans-serif; --text-font-style: normal; --text-font-weight: 400; --text-h0: 2.5rem; --text-h1: 1.75rem; --text-h2: 1.5rem; --text-h3: 1.375rem; --text-h4: 1.125rem; --text-h5: 1.125rem; --text-h6: 1rem; --text-letter-spacing: -0.02em; --text-lg: 1.125rem; --text-primary: 16 24 40; --text-sm: 0.75rem; --text-xs: 0.6875rem; --transform-logical-flip: 1; --transform-origin-end: right; --transform-origin-start: left; --warning-background: 255 246 233; --warning-text: 255 183 74; font-family: Inter, sans-serif; font-size: 14px; font-weight: 400; line-height: 22.4px; letter-spacing: -0.28px; color: rgb(16, 24, 40); font-style: normal; text-transform: none; -webkit-font-smoothing: auto; } @media screen and (min-width: 700px) { .nb-fuss-bereich { --container-gutter: 2rem; --grid-gutter: 1.5rem; --input-gap: 1rem; --input-height: 3.125rem; --input-padding-inline: 1.25rem; --product-list-column-gap: 1.5rem; --product-list-row-gap: 3rem; --section-inner-max-spacing-block: 2.5rem; --section-inner-spacing-inline: 3rem; --section-outer-spacing-block: 3.5rem; --section-stack-spacing-block: 3rem; --text-base: 1.0rem; --text-h0: 3.25rem; --text-h1: 2.25rem; --text-h2: 1.75rem; --text-h3: 1.625rem; --text-h4: 1.25rem; --text-h5: 1.25rem; --text-h6: 1.125rem; --text-lg: 1.25rem; --text-sm: 0.875rem; --text-xs: 0.75rem; font-size: 16px; line-height: 25.6px; letter-spacing: -0.32px; } } @media screen and (min-width: 1000px) { .nb-fuss-bereich { --container-gutter: 3rem; --header-height: 125px; --section-inner-max-spacing-block: 3.5rem; --section-inner-spacing-inline: 4rem; --section-outer-spacing-block: 4rem; --sticky-area-height: calc(1 * 0px + 1 * 125px); } } @media screen and (min-width: 1400px) { .nb-fuss-bereich { --section-inner-max-spacing-block: 4rem; --section-inner-spacing-inline: 4.5rem; --section-outer-spacing-block: 5rem; --text-h0: 4rem; --text-h1: 3rem; --text-h2: 2.5rem; --text-h3: 1.75rem; --text-h4: 1.5rem; --text-h6: 1.25rem; } } @media screen and (min-width: 1600px) { .nb-fuss-bereich { --section-inner-max-spacing-block: 4.5rem; --section-inner-spacing-inline: 5rem; } } /* Die Inline-Styles der beiden Shopify-Sections stehen unveraendert in snippets/nb-fuss.tpl */ @media screen and (pointer: fine) { .nb-fuss-bereich .button:not([disabled]):hover, .nb-fuss-bereich .btn:not([disabled]):hover, .nb-fuss-bereich .shopify-payment-button__button--unbranded:not([disabled]):hover { --button-background-opacity: 0.85; } } .nb-fuss-bereich *, .nb-fuss-bereich ::before, .nb-fuss-bereich ::after { box-sizing: border-box; border-style: solid; border-width: 0px; border-color: rgb(var(--text-color) / .12); } .nb-fuss-bereich h1, .nb-fuss-bereich h2, .nb-fuss-bereich h3, .nb-fuss-bereich h4, .nb-fuss-bereich h5, .nb-fuss-bereich h6 { font-size: inherit; font-weight: inherit; } .nb-fuss-bereich a { color: inherit; text-decoration: inherit; } .nb-fuss-bereich b, .nb-fuss-bereich strong { font-weight: bolder; } .nb-fuss-bereich button, .nb-fuss-bereich input, .nb-fuss-bereich optgroup, .nb-fuss-bereich select, .nb-fuss-bereich textarea { font-family: inherit; font-size: 100%; font-weight: inherit; font-style: inherit; line-height: inherit; text-transform: inherit; color: inherit; margin: 0px; padding: 0px; } .nb-fuss-bereich button, .nb-fuss-bereich select { text-transform: none; } .nb-fuss-bereich button, .nb-fuss-bereich [type="button"], .nb-fuss-bereich [type="reset"], .nb-fuss-bereich [type="submit"] { appearance: button; text-align: inherit; background-color: rgba(0, 0, 0, 0); background-image: none; } .nb-fuss-bereich button, .nb-fuss-bereich label, .nb-fuss-bereich summary, .nb-fuss-bereich [role="button"], .nb-fuss-bereich [type="checkbox"], .nb-fuss-bereich [type="radio"], .nb-fuss-bereich [type="submit"] { -webkit-tap-highlight-color: transparent; touch-action: manipulation; cursor: pointer; } .nb-fuss-bereich blockquote, .nb-fuss-bereich dl, .nb-fuss-bereich dd, .nb-fuss-bereich h1, .nb-fuss-bereich h2, .nb-fuss-bereich h3, .nb-fuss-bereich h4, .nb-fuss-bereich h5, .nb-fuss-bereich h6, .nb-fuss-bereich hr, .nb-fuss-bereich figure, .nb-fuss-bereich p, .nb-fuss-bereich pre { margin: 0px; } .nb-fuss-bereich ol, .nb-fuss-bereich ul, .nb-fuss-bereich menu { margin: 0px; padding: 0px; list-style: none; } .nb-fuss-bereich input::placeholder, .nb-fuss-bereich textarea::placeholder { opacity: 1; color: rgb(156, 163, 175); } .nb-fuss-bereich :focus:not(:focus-visible) { outline: none; } .nb-fuss-bereich .button, .nb-fuss-bereich .btn { --button-background: var(--button-background-primary) / var(--button-background-opacity, 1); --button-text-color: var(--button-text-primary); --button-outline-color: var(--button-background-primary); appearance: none; border-radius: var(--rounded-button); background-color: rgb(var(--button-background)); color: rgb(var(--button-text-color)); text-align: center; font-size: var(--text-sm); letter-spacing: var(--text-letter-spacing); padding-block-start: var(--spacing-2-5); padding-block-end: var(--spacing-2-5); padding-inline-start: var(--spacing-5); padding-inline-end: var(--spacing-5); font-weight: bold; line-height: 1.6; transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; display: inline-block; position: relative; } .nb-fuss-bereich .button--xl { font-size: var(--text-base); padding-block-start: var(--spacing-4); padding-block-end: var(--spacing-4); padding-inline-start: var(--spacing-8); padding-inline-end: var(--spacing-8); } .nb-fuss-bereich .button__loader, .nb-fuss-bereich .button__feedback { gap: var(--spacing-1-5); opacity: 0; pointer-events: none; justify-content: center; align-items: center; display: flex; position: absolute; inset: 0px; } .nb-fuss-bereich .button__loader > * { width: var(--spacing-1-5); height: var(--spacing-1-5); border-radius: var(--rounded-full); background: currentcolor; } @media screen and (min-width: 700px) { .nb-fuss-bereich .button, .nb-fuss-bereich .btn { padding-block-start: var(--spacing-3); padding-block-end: var(--spacing-3); padding-inline-start: var(--spacing-6); padding-inline-end: var(--spacing-6); } } @media screen and (min-width: 700px) { .nb-fuss-bereich .button--xl { padding-block: 1.075rem; padding-inline-start: var(--spacing-10); padding-inline-end: var(--spacing-10); } } .nb-fuss-bereich .content-over-media > :is(picture, .nb-fuss-bereich img, .nb-fuss-bereich video, .nb-fuss-bereich iframe, .nb-fuss-bereich svg, .nb-fuss-bereich 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; } .nb-fuss-bereich .content-over-media > :is(picture, .nb-fuss-bereich img, .nb-fuss-bereich video, .nb-fuss-bereich iframe, .nb-fuss-bereich svg, .nb-fuss-bereich video-media) > * { border-radius: inherit; } .nb-fuss-bereich .content-over-media > :not(img, .nb-fuss-bereich video, .nb-fuss-bereich iframe, .nb-fuss-bereich svg, .nb-fuss-bereich video-media, .nb-fuss-bereich picture) { max-width: var(--content-over-media-content-max-width, 780px); z-index: 1; grid-area: 2 / 2 / auto / span 1; position: relative; } .nb-fuss-bereich [allow-transparent-header] :is(.content-over-media > :not(img, .nb-fuss-bereich video, .nb-fuss-bereich iframe, .nb-fuss-bereich svg, .nb-fuss-bereich video-media, .nb-fuss-bereich picture)) { padding-block-start: calc(var(--header-height) * var(--section-is-first)); } @media screen and (min-width: 1400px) { .nb-fuss-bereich .content-over-media--fill > :is(img, .nb-fuss-bereich video, .nb-fuss-bereich iframe, .nb-fuss-bereich svg, .nb-fuss-bereich video-media, .nb-fuss-bereich picture) { max-height: 1200px; } } .nb-fuss-bereich .form { align-content: start; gap: var(--spacing-4); display: grid; } .nb-fuss-bereich .fieldset-with-submit { align-items: start; gap: var(--spacing-4); display: grid; } @media screen and (min-width: 700px) { .nb-fuss-bereich .form:not(.form--tight) { gap: var(--spacing-6); } } @media screen and (min-width: 700px) { .nb-fuss-bereich .fieldset-with-submit { grid-template-columns: minmax(0px, 1fr) max-content; } } .nb-fuss-bereich .input, .nb-fuss-bereich .textarea, .nb-fuss-bereich .select { appearance: none; width: 100%; height: var(--input-height); border-radius: var(--rounded-input); background: rgb(var(--input-background, transparent)); color: rgb(var(--input-text-color, var(--text-color))); text-align: start; border-width: 1px; padding-inline-start: var(--input-padding-inline); padding-inline-end: var(--input-padding-inline); } .nb-fuss-bereich :is(.input:focus, .nb-fuss-bereich .textarea:focus, .nb-fuss-bereich .select:focus-visible) { border-color: currentcolor; outline: none; box-shadow: 0px 0px 0px 1px inset; } .nb-fuss-bereich .input.is-floating, .nb-fuss-bereich .select.is-floating { height: calc(var(--input-height) + .625rem); padding-block-start: var(--spacing-4); } .nb-fuss-bereich .form-control { text-align: start; position: relative; } .nb-fuss-bereich .floating-label { height: calc(var(--input-height) + .625rem); top: 0px; opacity: 0.5; pointer-events: none; transform-origin: var(--transform-origin-start); grid-auto-flow: column; align-items: center; column-gap: 0.5rem; margin-inline-start: var(--spacing-4); transition: transform 0.2s ease-in-out; display: grid; position: absolute; } .nb-fuss-bereich .floating-label:not(:lang(ae), .nb-fuss-bereich :lang(ar), .nb-fuss-bereich :lang(arc), .nb-fuss-bereich :lang(bcc), .nb-fuss-bereich :lang(bqi), .nb-fuss-bereich :lang(ckb), .nb-fuss-bereich :lang(dv), .nb-fuss-bereich :lang(fa), .nb-fuss-bereich :lang(glk), .nb-fuss-bereich :lang(he), .nb-fuss-bereich :lang(ku), .nb-fuss-bereich :lang(mzn), .nb-fuss-bereich :lang(nqo), .nb-fuss-bereich :lang(pnb), .nb-fuss-bereich :lang(ps), .nb-fuss-bereich :lang(sd), .nb-fuss-bereich :lang(ug), .nb-fuss-bereich :lang(ur), .nb-fuss-bereich :lang(yi)) { left: 1px; } .nb-fuss-bereich :is(:is(.input, .nb-fuss-bereich .textarea):focus ~ .floating-label, .nb-fuss-bereich :is(.input, .nb-fuss-bereich .textarea):not(:placeholder-shown) ~ .floating-label, .nb-fuss-bereich :is(.input, .nb-fuss-bereich .textarea, .nb-fuss-bereich .select):autofill ~ .floating-label, .nb-fuss-bereich .select:valid ~ .floating-label) { transform: scale(.65) translateY(calc(-1 * var(--spacing-4))); } .nb-fuss-bereich :is(.input, .nb-fuss-bereich .textarea, .nb-fuss-bereich .select):autofill ~ .floating-label { color: rgb(0, 0, 0); } @media screen and (min-width: 700px) { .nb-fuss-bereich .floating-label { margin-inline-start: var(--spacing-5); } } .nb-fuss-bereich .v-stack { display: grid; } .nb-fuss-bereich .h-stack { align-items: center; display: flex; } .nb-fuss-bereich .container { --container-inner-width: min((100vw - var(--scrollbar-width, 0px)) - var(--container-gutter) * 2, var(--container-max-width)); --container-outer-width: calc(((100vw - var(--scrollbar-width, 0px)) - var(--container-inner-width)) / 2); 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); } .nb-fuss-bereich [role="main"] .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; } .nb-fuss-bereich [role="main"] .shopify-section:not(.contents) { display: flow-root; } .nb-fuss-bereich .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); } .nb-fuss-bereich .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); } .nb-fuss-bereich .prose > :first-child, .nb-fuss-bereich .prose > :first-child :first-child { margin-block-start: 0px !important; } .nb-fuss-bereich .prose > :last-child, .nb-fuss-bereich .prose > :last-child :last-child { margin-block-end: 0px !important; } .nb-fuss-bereich .prose * + :is(p, .nb-fuss-bereich div, .nb-fuss-bereich ul, .nb-fuss-bereich ol) { margin-block-start: var(--spacing-3); } .nb-fuss-bereich .prose * + :is(.h0, .nb-fuss-bereich .h1, .nb-fuss-bereich .h2, .nb-fuss-bereich h1, .nb-fuss-bereich h2) { margin-block-start: var(--spacing-4); } .nb-fuss-bereich .prose :is(.h0, .nb-fuss-bereich .h1, .nb-fuss-bereich .h2, .nb-fuss-bereich .h3, .nb-fuss-bereich .h4, .nb-fuss-bereich h1, .nb-fuss-bereich h2, .nb-fuss-bereich h3, .nb-fuss-bereich h4) + * { margin-block-start: var(--spacing-5); } @media screen and (min-width: 700px) { .nb-fuss-bereich .prose * + :is(p, .nb-fuss-bereich div, .nb-fuss-bereich ul, .nb-fuss-bereich ol) { margin-block-start: var(--spacing-4); } } @media screen and (min-width: 700px) { .nb-fuss-bereich .prose * + :is(.h0, .nb-fuss-bereich .h1, .nb-fuss-bereich .h2, .nb-fuss-bereich h1, .nb-fuss-bereich h2) { margin-block-start: var(--spacing-6); } } @media screen and (min-width: 700px) { .nb-fuss-bereich .prose :is(.h0, .nb-fuss-bereich .h1, .nb-fuss-bereich .h2, .nb-fuss-bereich .h3, .nb-fuss-bereich h1, .nb-fuss-bereich h2, .nb-fuss-bereich h3) + * { margin-block-start: var(--spacing-6); } } @media screen and (min-width: 1150px) { .nb-fuss-bereich .prose * + p { margin-block-start: var(--spacing-6); } } @media screen and (min-width: 1150px) { .nb-fuss-bereich .prose * + :is(.h2, .nb-fuss-bereich .h3, .nb-fuss-bereich .h4, .nb-fuss-bereich h2, .nb-fuss-bereich h3, .nb-fuss-bereich h4) { margin-block-start: var(--spacing-6); } } @media screen and (min-width: 1150px) { .nb-fuss-bereich .prose :is(.h0, .nb-fuss-bereich .h1, .nb-fuss-bereich .h2, .nb-fuss-bereich h1, .nb-fuss-bereich h2) + * { margin-block-start: var(--spacing-8); } } .nb-fuss-bereich .link-faded { opacity: 0.7; transition: opacity 0.2s ease-in-out; } @media screen and (pointer: fine) { .nb-fuss-bereich .link-faded:hover { opacity: 1; } } .nb-fuss-bereich .text-with-icon { gap: var(--spacing-3); align-items: center; display: flex; } .nb-fuss-bereich .text-with-icon > svg { flex-shrink: 0; } .nb-fuss-bereich .social-media { gap: var(--spacing-3) var(--spacing-6); flex-wrap: wrap; display: flex; } .nb-fuss-bereich .icon { vertical-align: middle; display: block; } .nb-fuss-bereich .footer { --background: var(--footer-background); --text-color: var(--footer-text); --footer-padding-block: var(--spacing-12); --footer-part-gap: var(--spacing-10); --footer-block-list-gap: var(--spacing-10); --footer-block-gap: var(--spacing-4); --footer-aside-gap: var(--spacing-10); background: rgb(var(--background)); color: rgb(var(--text-color)); padding-block-start: var(--footer-padding-block); padding-block-end: var(--footer-padding-block); } .nb-fuss-bereich .footer__wrapper { gap: var(--footer-part-gap); display: grid; } .nb-fuss-bereich .footer__block-list { gap: var(--footer-block-list-gap); align-items: start; justify-content: var(--footer-block-list-justify-content, start); grid: auto-flow dense / repeat(2, minmax(0px, 1fr)); display: grid; } .nb-fuss-bereich .footer__block { gap: var(--footer-block-gap); display: grid; } .nb-fuss-bereich .footer__block--text, .nb-fuss-bereich .footer__block--newsletter, .nb-fuss-bereich .footer__block--app { grid-column: span 2; } .nb-fuss-bereich .footer__block--menu { max-width: 250px; } .nb-fuss-bereich .footer__aside { gap: var(--footer-aside-gap); display: grid; } .nb-fuss-bereich .footer__aside-top, .nb-fuss-bereich .footer__aside-bottom { justify-content: space-between; align-items: center; gap: var(--spacing-8); display: grid; } .nb-fuss-bereich .footer__policy-links { flex-wrap: wrap; align-items: center; display: flex; } .nb-fuss-bereich .footer__policy-links li + li::before { content: "•"; margin-inline: 0.5rem; font-size: 0.75rem; } @media screen and (min-width: 700px) { .nb-fuss-bereich .footer { --footer-padding-block: var(--spacing-16); --footer-part-gap: var(--spacing-16); --footer-block-list-gap: var(--spacing-10) var(--spacing-24); --footer-block-gap: var(--spacing-6); --footer-aside-gap: var(--spacing-12); } } @media screen and (min-width: 700px) { .nb-fuss-bereich .footer__block-list { flex-wrap: wrap; display: flex; } } @media screen and (min-width: 700px) { .nb-fuss-bereich .footer__block--text { flex-basis: 25%; } } @media screen and (min-width: 700px) { .nb-fuss-bereich .footer__block--menu { flex-shrink: 0; } } @media screen and (min-width: 700px) { .nb-fuss-bereich .footer__aside-top, .nb-fuss-bereich .footer__aside-bottom { display: flex; } } @media screen and (min-width: 700px) { .nb-fuss-bereich .footer__copyright { order: -1; } } @media screen and (min-width: 1000px) { .nb-fuss-bereich .footer { --footer-block-list-gap: var(--spacing-10) var(--spacing-12); } } @media screen and (min-width: 1000px) { .nb-fuss-bereich .footer__block-list { flex-wrap: nowrap; } } @media screen and (min-width: 1150px) { .nb-fuss-bereich .footer { --footer-block-list-gap: var(--spacing-10) var(--spacing-24); } } .nb-fuss-bereich .newsletter-content { gap: var(--spacing-6); max-width: 780px; margin-inline: auto; display: grid; } .nb-fuss-bereich .newsletter-content > .form { width: 100%; } @media screen and (min-width: 700px) { .nb-fuss-bereich .newsletter-content { gap: var(--spacing-8); } } @media screen and (min-width: 1000px) { .nb-fuss-bereich .newsletter-content > .form { max-width: 490px; } } .nb-fuss-bereich .tap-area { position: relative; } .nb-fuss-bereich .tap-area::before { content: ""; inset: calc(-1 * var(--spacing-2-5)); position: absolute; } .nb-fuss-bereich .text-subdued { color: rgb(var(--text-color) / .7); } .nb-fuss-bereich .bg-custom { background: rgb(var(--background)); } .nb-fuss-bereich .inline-block { display: inline-block; } .nb-fuss-bereich .contents { display: contents; } .nb-fuss-bereich .wrap { flex-wrap: wrap; } .nb-fuss-bereich .text-center { text-align: center; } .nb-fuss-bereich .justify-center { justify-content: safe center; } .nb-fuss-bereich .justify-items-center { justify-items: safe center; } .nb-fuss-bereich .gap-1 { gap: var(--spacing-1); } .nb-fuss-bereich .gap-2 { gap: var(--spacing-2); } .nb-fuss-bereich .gap-3 { gap: var(--spacing-3); } .nb-fuss-bereich .bold { font-weight: bold; } .nb-fuss-bereich .text-sm { font-size: var(--text-sm); line-height: 1.6; } .nb-fuss-bereich .heading, .nb-fuss-bereich .h0, .nb-fuss-bereich .h1, .nb-fuss-bereich .h2, .nb-fuss-bereich .h3, .nb-fuss-bereich .h4, .nb-fuss-bereich .h5, .nb-fuss-bereich .h6, .nb-fuss-bereich .prose :is(h1, .nb-fuss-bereich h2, .nb-fuss-bereich h3, .nb-fuss-bereich h4, .nb-fuss-bereich h5, .nb-fuss-bereich 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; } .nb-fuss-bereich .h1, .nb-fuss-bereich .prose h1:not(.h0, .nb-fuss-bereich .h1, .nb-fuss-bereich .h2, .nb-fuss-bereich .h3, .nb-fuss-bereich .h4, .nb-fuss-bereich .h5, .nb-fuss-bereich .h6) { font-size: var(--text-h1); line-height: 1.1; } .nb-fuss-bereich .h2, .nb-fuss-bereich .prose h2:not(.h0, .nb-fuss-bereich .h1, .nb-fuss-bereich .h2, .nb-fuss-bereich .h3, .nb-fuss-bereich .h4, .nb-fuss-bereich .h5, .nb-fuss-bereich .h6) { font-size: var(--text-h2); line-height: 1.1; } .nb-fuss-bereich .h3, .nb-fuss-bereich .prose h3:not(.h0, .nb-fuss-bereich .h1, .nb-fuss-bereich .h2, .nb-fuss-bereich .h3, .nb-fuss-bereich .h4, .nb-fuss-bereich .h5, .nb-fuss-bereich .h6) { font-size: var(--text-h3); line-height: 1.2; } .nb-fuss-bereich .h4, .nb-fuss-bereich .prose h4:not(.h0, .nb-fuss-bereich .h1, .nb-fuss-bereich .h2, .nb-fuss-bereich .h3, .nb-fuss-bereich .h4, .nb-fuss-bereich .h5, .nb-fuss-bereich .h6) { font-size: var(--text-h4); line-height: 1.3; } .nb-fuss-bereich .h5, .nb-fuss-bereich .prose h5:not(.h0, .nb-fuss-bereich .h1, .nb-fuss-bereich .h2, .nb-fuss-bereich .h3, .nb-fuss-bereich .h4, .nb-fuss-bereich .h5, .nb-fuss-bereich .h6) { font-size: var(--text-h5); line-height: 1.4; } .nb-fuss-bereich .h6, .nb-fuss-bereich .prose h6:not(.h0, .nb-fuss-bereich .h1, .nb-fuss-bereich .h2, .nb-fuss-bereich .h3, .nb-fuss-bereich .h4, .nb-fuss-bereich .h5, .nb-fuss-bereich .h6) { font-size: var(--text-h6); line-height: 1.4; } .nb-fuss-bereich .break-all { overflow-wrap: anywhere; } .nb-fuss-bereich :where(h1, .nb-fuss-bereich h2, .nb-fuss-bereich h3, .nb-fuss-bereich h4, .nb-fuss-bereich h5, .nb-fuss-bereich h6, .nb-fuss-bereich .h1, .nb-fuss-bereich .h2, .nb-fuss-bereich .h3, .nb-fuss-bereich .h4, .nb-fuss-bereich .h5, .nb-fuss-bereich .h6, .nb-fuss-bereich .section-header__title, .nb-fuss-bereich .prose :is(h1, .nb-fuss-bereich h2, .nb-fuss-bereich h3, .nb-fuss-bereich h4, .nb-fuss-bereich h5, .nb-fuss-bereich h6), .nb-fuss-bereich .product-card__title) { font-family: Gilroy, sans-serif !important; font-weight: 600 !important; } .nb-fuss-bereich #shopify-section-sections--30449420206464__newsletter_cwTfEK { --section-background-hash: 054922020920008346060000003430673; } .nb-fuss-bereich #shopify-section-sections--30449420206464__newsletter_cwTfEK + * { --previous-section-background-hash: 054922020920008346060000003430673; } @media screen and (min-width: 1000px) { .nb-fuss-bereich #shopify-section-sections--30449420206464__footer { --footer-block-list-justify-content: space-between; } } /* Impact rechnet den oberen Abstand des Newsletter-Bands aus dem Vergleich mit der vorherigen Section. In Shopify ergibt das 1, also 80 px Abstand. Im JTL-Shop gibt es keine vorherige Section, ohne diese Zeile waren es 0 px (gemessen 24.09.2026). */ .nb-fuss-bereich .shopify-section--newsletter { --previous-section-background-hash: -1; --background-differs-from-previous: 1; } /* Newsletter-Knopf im Signal-System statt Impact-Schwarz #1A1A1A: ein CTA-System (farbsystem.md Z. 62, 429, 445). design-auditor 25.09.2026. */ .nb-fuss-bereich .newsletter-content .button { --button-background: var(--nb-action-primary-rgb, 88 80 255) / 1; background: var(--nb-action-primary); color: var(--nb-action-primary-label); border-color: var(--nb-action-primary); border-radius: var(--nb-radius-pill); } .nb-fuss-bereich .newsletter-content .button:hover { background: var(--nb-action-primary-hover); border-color: var(--nb-action-primary-hover); } .nb-fuss-bereich .newsletter-content .input { border-radius: var(--nb-radius-pill); } /* Newsletter-Feld nach dem Formular-System (komponenten-formular.md §2, Daniel 27.09.2026). Die Impact-Grundregel .nb-fuss-bereich input setzt Polster, Schrift und Farbe zurueck, deshalb hier mit zwei Klassen die Werte aus nb-feld.css */ .nb-fuss-bereich .nb-fl .nb-fl__eingabe { padding: 24px var(--nb-space-s) 6px; border-color: transparent; font-size: 16px; line-height: 24px; color: var(--nb-text-heading); } /* Knopf 60 px, Feld 56 px: beide auf eine Mittellinie */ .nb-fuss-bereich .newsletter-content .fieldset-with-submit { align-items: center; } .nb-fuss-bereich .nb-fl .nb-fl__label { font-size: 16px; line-height: 24px; }