/** Shopify CDN: Minification failed Line 1452:2 Unexpected "{" Line 1452:3 Expected identifier but found "%" Line 1453:15 Expected identifier but found whitespace Line 1453:63 Unexpected "1000px" Line 1456:3 Expected identifier but found "%" Line 1467:2 Unexpected "{" Line 1467:3 Expected identifier but found "%" Line 1468:12 Unexpected "05.09" Line 1471:3 Expected identifier but found "%" **/ /* SHOPIFY_STYLESHEETS_VERSION: 1.0 */ /* CSS from section stylesheet tags */ /* START_SECTION:brand-statement (INDEX:0) */ .brand-statement__inner { max-width: 56rem; margin: 0 auto; padding: var(--section-pad-block) var(--section-pad-inline); text-align: center; } .brand-statement__text { font-family: var(--font-heading); font-weight: 600; font-size: var(--mq-buehne-5); line-height: 1.4; letter-spacing: -0.01em; margin: 0; } .brand-statement__mark { margin: 0 0.08em; } /* END_SECTION:brand-statement */ /* START_SECTION:cart-drawer (INDEX:1) */ /* ═══════════ Warenkorb-EIGENES ═══════════ Die Overlay-Huelle (.mq-ov, .mq-ov__tint, .mq-ov__card, __head, __title, __x, __body, __foot) steht seit dem 04.08.2026 vollstaendig in assets/base.css im Block "Gemeinsames Modal-System". Hier stand bis dahin eine aeltere, schmalere Teilfassung derselben Klassen. Sie musste weg, weil sie GEWONNEN hat: Das gebuendelte Stylesheet der Sections haengt Shopify ueber content_for_header ein, also NACH base.css. Bei gleicher Spezifitaet gewinnt das spaetere — und der Schieber liegt auf jeder Seite im Render-Tree. Die alte Fassung hat damit die zurueckgeholte Arbeit ueberall ausgehebelt: 420 statt 480 px, feste 16px-Ecken statt --mq-ecke-gross aus dem Theme-Editor, kein transform in der Transition (also keine Einblendbewegung), 16px-Titel statt 20px, und der 54px-Platz fuer das Schliesskreuz fiel weg. Am schlimmsten traf es das mobile Blatt: @media (max-width: 579px) in base.css erhoeht die Spezifitaet nicht, also blieben top/left/transform aus der alten Fassung stehen — nur die is-open-Regel schlug durch, und die Karte rutschte beim Oeffnen unter 580px in den unteren rechten Quadranten. Das war schlechter als vor der Wiederherstellung. Uebrig bleibt hier nur, was wirklich zum Warenkorb gehoert. */ /* Werte am laufenden Checkout am "Pay now"-Knopf ausgelesen: Grundfarbe #005BD1, beim Ueberfahren und Druecken #00459E, Ecken 12px. Die drei Werte stehen auf :root in layout/theme.liquid — sonst gaelte .cd__checkout nur im Schieber. Gleiche Werte, nur eine Ebene hoeher. 04.08.2026: Die zweite Kommentarzeile begann mit Backslash-Stern statt Schraegstrich-Stern. Der Kommentar oeffnete dadurch nie, die drei folgenden Zeilen wurden zu einem ungueltigen Selektor, und .cd__panel bekam sein display:flex nicht. Aufgefallen ist es erst, als base.css die Regel ersatzweise mittrug. */ .cd__panel { display: flex; flex-direction: column; } /* Innenabstand fuer den Rumpf. .cd__inner steckt auch in der rechten Spalte der Cart-Seite — deshalb nur innerhalb des Schiebers (.cd__panel), sonst wuerde die Cart-Seite mitverschoben. Der Rumpf einer Blende (.mq-ov__body) bekommt seinen Abstand aus base.css. */ .cd__panel .cd__inner { min-height: 0; padding:0 20px; } .cd__inner { min-height: 0; } /* Der Schieber ist weiss. Das Grau kommt aus dem Checkout, wo die Uebersicht auf der grauen Spalte liegt — hier gibt es diese Spalte nicht. */ .cd__panel .x-summary > div { background-color: #fff; } /* Gescrollt wird NUR die Artikelliste — das ist der eigene Rollbereich des Checkouts. Damit bleiben Zwischensumme, Versand, Gesamt und die Knoepfe fest unten stehen. Der aeussere Kasten darf deshalb nicht mehr rollen: sein overflow hat auch die Mengen-Blase ueber dem ersten Bild abgeschnitten (die ragt oben heraus; der Checkout faengt das mit padding/margin ab). Der Fuss selbst (.mq-ov__foot) bekommt Abstand und das hidden-Verhalten seit dem 04.08.2026 aus assets/base.css — hier stand dieselbe Regel doppelt. */ /* The cart body is NOT styled here. Its markup is the checkout's own order summary and its stylesheet is assets/checkout-summary.css — the original, pulled out of the checkout's stylesheets. Nothing below touches it; the drawer only says how tall it may get and what sits around it. Its inner padding comes from the checkout's summary panel, so there is none here. */ /* No flex:1 here. It gave the cart body a definite height, and the checkout's rows carry height:100% (._1fragem4q) — so each row stretched to the whole panel and then shrank back to an even share: two 104/156px rows both came out 130px tall. The rows size themselves; the checkout's own scroll area (._1b9t7yp2, max-height 40vh) caps the list. */ .cd__inner { min-height: 0; } /* Warenkorb-Reste, die es vor dem gemeinsamen Aufbau gab, sind ersetzt durch .mq-ov__head / .mq-ov__body / .mq-ov__foot. */ /* In the drawer the cart body is wrapped by Shopify's own section div, so the scrolling has to sit on THAT element — it is the flex child of the panel. shrink-only (0 1 auto), never grow: growing would hand the checkout's rows a definite height and they carry height:100%. */ .cd__panel > .shopify-section { flex: 0 1 auto; overflow: visible; } /* ---- Hoehendeckel der Artikelliste, 08.08.2026 ---- Der Checkout deckelt sie mit max-height: 40vh (Klasse ._1b9t7yp2, Wert ueber --_16s97g73f). Seine Regel dafuer steht aber in einer Abfrage ab 1000px — auf dem Handy galt sie nicht, und die Liste wuchs unbegrenzt. Zusammen mit overflow: hidden auf der Karte hiess das: Bei vielen Artikeln oder aufgeklappten Buendeln wurde die Fusszeile mit dem Kasse-Knopf abgeschnitten. Hier derselbe Deckel fuer schmale Schirme, in dvh statt vh, damit die Adressleiste des Browsers nicht mitzaehlt. Die Liste scrollt dann, die Fusszeile bleibt sichtbar. */ @media screen and (max-width: 999.99px) { .cd__panel .x-summary ._1b9t7yp2 { max-height: 40dvh; overflow-y: auto; overscroll-behavior-y: contain; } } /* primary button, 1:1 with the checkout "Pay now" button */ .cd__checkout { display: flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; font-family: var(--font-heading, sans-serif); font-weight: 700; font-size: 14px; color: #fff; background: var(--cd-accent); padding:14px; min-height: 50px; border-radius: var(--cd-radius); cursor: pointer; border: 0; width: 100%; /* Uebergang 1:1 aus dem Checkout: 0.2s ease-in-out auf denselben sechs Eigenschaften. Ohne ihn springt die Farbe, im Checkout blendet sie. */ transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, opacity 0.2s ease-in-out, transform 0.2s ease-in-out; } .cd__checkout:hover { background: var(--cd-accent-hover); } /* Fokus-Rahmen wie im Checkout: 1px innen, in der dunkleren Blauvariante. */ .cd__checkout:focus-visible { outline: 0; box-shadow: inset 0 0 0 1px var(--cd-accent-hover); } /* everything about this button lives in .btn-grey (assets/base.css) — only its distance to the blue button above is local */ .cd__view { margin-top:var(--raum-1); } /* Ruecksendezeile unter den beiden Knoepfen. Abstand 16px wie im Raster, Schriftgroesse 12px — dieselbe wie "Secure SSL checkout" darueber, damit kein neuer Wert dazukommt. */ .cd__returns { margin:16px 0 0; font-size: 12px; line-height: 1.4; color: var(--x-default-color-text-subdued, #707070); text-align: center; } .cd__returns a { color: var(--cd-accent); text-decoration: underline; white-space: nowrap; } .cd__empty { padding:var(--raum-6) 20px; text-align: center; } .cd__emptytxt { color: var(--mq-text-leise); margin:0 0 20px; } /* Die Reservierung: eine Zeile ueber dem Warenkorb, die zeigt, wie lange die Artikel gehalten werden. Sie steht in snippets/cart-contents.liquid und erscheint dadurch im Schieber UND auf der Warenkorb-Seite. Kein eigener Rahmen, kein Kasten: Sie ist eine Angabe zum Warenkorb, keine Werbeflaeche. Die Masse sind die des Checkouts — 14px Text, 12px/20px Innenabstand wie die Kopfzeile der Zusammenfassung darunter. Die Farbe kommt aus dem Regler farbe_akzent, damit die Zeile zum Kaufknopf passt und nicht als Warnung gelesen wird. Ablaufende Zeit ist keine Fehlermeldung; erst der abgelaufene Warenkorb ist eine, und dafuer setzt assets/mq.js role="alert". */ .cd__hold { display: flex; align-items: center; gap:8px; padding:12px 20px; font-size: 14px; line-height: 1.4; color: var(--cd-accent); border-bottom: 1px solid var(--mq-linie); } .cd__hold[hidden] { display: none; } /* Fehlerzeile des Warenkorbs: Muelleimer und Rabattcode melden sich hier. Masse und Farbe wie die Fehlerzeile des Kaufknopfs (.pb__adderr), damit eine Fehlermeldung im ganzen Shop gleich aussieht. */ .cd__fehler { margin:0; padding:12px 20px; font-size: 14px; line-height: 1.4; color: var(--mq-fehler, #d91c1c); border-bottom: 1px solid var(--mq-linie); } .cd__fehler[hidden] { display: none; } /* Der Punkt links: derselbe, den die Produktseite fuer den Lagerstand nutzt (.pb__dot). Er sagt "laeuft gerade", ohne ein Wort zu brauchen. */ .cd__hold-punkt { flex: 0 0 auto; width: 8px; height: 8px; border-radius: var(--ecke-rund); background: currentColor; } /* Abgelaufen: Die Zeile wird zur Meldung und wechselt auf die Fehlerfarbe des Shops. Getroffen wird sie ueber role="alert", das assets/mq.js genau dann setzt — kein zweites Attribut noetig. */ .cd__hold[role="alert"] { color: var(--mq-fehler, #d91c1c); } .cd__hold[role="alert"] .cd__hold-punkt { display: none; } /* Bewegung nur, wo sie erlaubt ist. Der Punkt pulst leise, damit die Zeile lebt, ohne zu blinken. */ @media (prefers-reduced-motion: no-preference) { .cd__hold-punkt { animation: cd-hold-puls 2s ease-in-out infinite; } } @keyframes cd-hold-puls { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } /* END_SECTION:cart-drawer */ /* START_SECTION:feature-banner (INDEX:3) */ /* Rebuilt from samsung.com/us — their .hd08-hero-kv-home. Source read directly, not inferred: CSS at .../home/ho-g-hero-kv-home/clientlibs/ site.min.*.css, JS at the matching site.min.*.js (its updateShrinkMotion is transferred in assets/scroll-shrink.js). The effect: __contents starts full-width and its max-width shrinks linearly to 1440px as you scroll, staying centred. Only the coloured panel narrows — the text does NOT move with it, because the text is anchored to the CENTRE, not to the edge: .hd08-hero-kv-home--text-align-desktop-middle-right __text-wrap { right: 50%; margin-right: -748px; padding-right: 88px; } right:50% resolves to the container's midpoint, and that midpoint is always the viewport midpoint (left:50% + translateX(-50%) on __contents) no matter how narrow it gets. The -748px offset is fixed. Anchoring to the edge instead (right:60px) would drag the text along — that is the whole trick. */ .feature-banner { position: relative; width: 100%; max-width: 1920px; height: 100vh; /* Pull back up under the overlay's top bar + header so this section starts at the very top of the overlay and keeps its full height. Those bars keep their place in flow (which is what stacks them) but are lifted over this section by z-index — see sections/section2-top-bar.liquid and sections/section2-header.liquid. --overlay-bars-height is measured in layout/theme.liquid. */ margin: calc(-1 * var(--overlay-bars-height, 0px)) auto 0; font-size: 0; } .feature-banner__contents { overflow: hidden; position: absolute; left: 50%; bottom: 0; width: 100%; height: 100%; max-width: 1920px; margin: 0 auto; transform: translateX(-50%); background: #dedede; } /* Their .hd08-hero-kv-home__contents.is-animation, verbatim. Added by assets/scroll-shrink.js only while the shrink is mid-flight, lifting the panel onto its own compositing layer for the duration. Without it the resize repaints on the main thread every frame and the motion judders. */ .feature-banner__contents.is-animation { will-change: transform; } /* Anchored to the centre (right/left: 50% + a fixed margin), never to the edge — see the note above. Their exact offsets: -748px / -720px, with 88px / 60px of padding pulling the text back inward. */ .feature-banner__text-wrap { position: absolute; top: 50%; z-index: 10; width: 620px; box-sizing: content-box; transform: translateY(-50%); font-size: 16px; } .feature-banner--align-left .feature-banner__text-wrap { left: 50%; margin-left: -720px; padding-left: 60px; } .feature-banner--align-right .feature-banner__text-wrap { right: 50%; margin-right: -748px; padding-right: 88px; } .feature-banner--align-center .feature-banner__text-wrap { left: 50%; width: 720px; transform: translate(-50%, -50%); text-align: center; } /* Their fluid band below 1440px — same ratios, vw instead of px. */ @media screen and (min-width: 750px) and (max-width: 1440px) { .feature-banner--align-left .feature-banner__text-wrap { margin-left: -50vw; padding-left: 4.16666667vw; } .feature-banner--align-right .feature-banner__text-wrap { margin-right: -51.94444444vw; padding-right: 6.11111111vw; } .feature-banner--align-center .feature-banner__text-wrap { width: 50vw; } } @media screen and (max-width: 749.99px) { .feature-banner { height: 177.77777778vw; } .feature-banner__text-wrap, .feature-banner--align-left .feature-banner__text-wrap, .feature-banner--align-right .feature-banner__text-wrap, .feature-banner--align-center .feature-banner__text-wrap { top: 50%; left: 50%; right: auto; width: 86.66666667vw; margin: 0; padding: 0; transform: translate(-50%, -50%); text-align: center; } } .feature-banner--text-black { color: var(--color-ink); } .feature-banner--text-white { color: var(--color-background); } .feature-banner__headline { font-family: var(--font-heading); font-weight: 700; font-size: var(--mq-buehne-2); line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 var(--space-2); } .feature-banner__desc { font-family: var(--font-heading); font-weight: 400; font-size: var(--mq-buehne-6); line-height: 1.3; margin: 0; } .feature-banner__cta-wrap { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); } .feature-banner--align-center .feature-banner__cta-wrap { justify-content: center; } .feature-banner__link { font-family: var(--font-body); font-size: 14px; color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; } .feature-banner__button { font-family: var(--font-body); font-size: 14px; color: inherit; text-decoration: none; border: 1px solid currentColor; border-radius: 9999px; padding: 0.5em 1.4em; transition: background-color 0.15s ease, color 0.15s ease; } .feature-banner--text-black .feature-banner__button:hover { background: var(--color-ink); color: var(--color-background); } .feature-banner--text-white .feature-banner__button:hover { background: var(--color-background); color: var(--color-ink); } /* Their text reveal, values from the same stylesheet: opacity .5s linear transform 1.5s cubic-bezier(0, 0.18, 0.07, 1) staggered .067s / .134s / .201s, starting at translateY(20px). This is a one-shot entrance and is unrelated to the shrink, which stays glued to the scroll position. */ .feature-banner__headline, .feature-banner__desc, .feature-banner__cta-wrap { opacity: 0; visibility: hidden; transform: translateY(20px); transition: opacity 0.5s linear, transform 1.5s cubic-bezier(0, 0.18, 0.07, 1); } .feature-banner__text-wrap.is-ani .feature-banner__headline, .feature-banner__text-wrap.is-ani .feature-banner__desc, .feature-banner__text-wrap.is-ani .feature-banner__cta-wrap { opacity: 1; visibility: visible; transform: translateY(0); } .feature-banner__text-wrap.is-ani .feature-banner__headline { transition-delay: 0.067s; } .feature-banner__text-wrap.is-ani .feature-banner__desc { transition-delay: 0.134s; } .feature-banner__text-wrap.is-ani .feature-banner__cta-wrap { transition-delay: 0.201s; } @media (prefers-reduced-motion: reduce) { .feature-banner__headline, .feature-banner__desc, .feature-banner__cta-wrap { opacity: 1; visibility: visible; transform: none; transition: none; } } /* END_SECTION:feature-banner */ /* START_SECTION:features (INDEX:4) */ .features__inner { max-width: var(--container-width); margin: 0 auto; padding: var(--section-pad-block) var(--section-pad-inline); display: grid; grid-template-columns: 1fr; gap: var(--space-5); border-top: 1px solid var(--color-line); } @media screen and (min-width: 750px) { .features__inner { grid-template-columns: repeat(3, 1fr); } } .features__index { display: block; font-family: var(--font-heading); font-weight: var(--mq-fett); font-size: 12px; color: var(--mq-text-leise); letter-spacing: 0.08em; margin: 0 0 var(--space-2); } .features__title { font-size: 18px; margin: 0 0 var(--space-1); } .features__text { font-family: var(--font-body); font-size: 14px; line-height: 1.6; color: var(--mq-text-leise); margin: 0; max-width: 32ch; } /* END_SECTION:features */ /* START_SECTION:footer (INDEX:5) */ .site-footer { border-top: 1px solid var(--color-line); } .site-footer__inner { max-width: var(--container-width); margin: 0 auto; padding: var(--section-pad-block) var(--section-pad-inline); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); } .site-footer__tagline { font-size: 14px; color: var(--color-ink); opacity: 0.6; margin: 0; } /* Umbruch-Eigenschaften der Fusszeilen-Meta. Am 04.08.2026 aus der Sicherung vom 02.08. zurueckgeholt. In .site-footer__meta stehen zwei Auswahlfelder, der Kontakt-Link und die Copyright-Zeile; ohne flex-wrap bleibt das auf schmalen Schirmen eine einzige nicht umbrechende Reihe. */ .site-footer__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; min-width: 0; max-width: 100%; gap: var(--space-3); font-size: 14px; } .site-footer__meta a { text-decoration: none; } /* Mobile Fusszeile: volle Breite, linksbuendig. Am 04.08.2026 aus der Sicherung vom 02.08. zurueckgeholt, damit die umgebrochene Meta-Zeile unter 640px nicht rechtsbuendig zerfranst. */ @media screen and (max-width: 749.99px) { .site-footer__meta { width: 100%; justify-content: flex-start; } } /* END_SECTION:footer */ /* START_SECTION:header (INDEX:6) */ /* The hero's header. Plain and self-contained: no scroll-linked behavior, no effects, no animation, no hiding. It just sits there, full stop. Has nothing to do with sections/section2-header.liquid — that one lives inside the overlay and is a separate section entirely. Position goes on the shopify-section-* WRAPPER, not .site-header itself: Shopify sizes that wrapper exactly to its content, leaving no room to position within it. */ #shopify-section-header { position: fixed; top: var(--topbar-height, 0px); left: 0; right: 0; z-index: 10; } @media screen and (min-width: 750px) { /* Inside .scroll-stage (position:fixed, inset:0 — see base.css), absolute pins to the viewport exactly like fixed did, but keeps this header in the stage's stacking context so the section-2 overlay (z-index 100) can actually cover it. As `fixed` it sat in the root context instead, out of the overlay's reach at any z-index. */ #shopify-section-header { position: absolute; /* Reserve the overlay's scrollbar here. The hero layer has no scrollbar of its own, the overlay below does (.scroll-stage__content is overflow-y:auto), so without this the two layers offer different usable widths and the logo jumps sideways on the hero → section-2 switch. The document-level gutter is off on the homepage (assets/base.css), so this reserves it exactly once. */ right: var(--scrollbar-width, 0px); } } .site-header { background: transparent; } .site-header__inner { /* Same centred content box as the checkout/split, so the logo lands at the same x everywhere (intelligent max-width centring, not a left/right gap). 40px inline padding = the checkout's panel padding, so the logo sits at box-left + 40 = the checkout logo x. Icons ride the right edge of the same box (further right than the split, as intended). */ max-width: calc(var(--overlay-width) - var(--scrollbar-width, 0px)); margin: 0 auto; padding: var(--space-3) 40px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .site-header__logo { display: block; line-height: 0; } /* Same brand asset and same 130px width as the checkout header, so the mark is identical on every surface. */ .site-header__logo img { width: 130px; height: auto; display: block; } /* ---- Kopfleiste auf schmalen Schirmen, 08.08.2026 ---- Gerechnet bei 375px: 40px Rand mal zwei lassen 295px. Darin standen 130px Logo, 24px Abstand zu den Symbolen, vier weitere Abstaende zu je 24px und fuenf Zeichnungen von zusammen rund 96px — Bedarf 346px. Es gibt weder Umbruch noch Menueknopf, also wurden Logo und Symbole gestaucht. Der Rand kommt jetzt aus den Rahmenvariablen (14px statt 40px), das Logo geht auf 100px und die Abstaende auf 12px. Bedarf damit rund 240px bei 347px Platz. */ @media screen and (max-width: 749.99px) { .site-header__inner { padding: var(--mq-rahmen-quer) var(--mq-rahmen-laengs); gap: 12px; } .site-header__logo img { width: 100px; } } /* END_SECTION:header */ /* START_SECTION:hero (INDEX:7) */ .hero { position: relative; z-index: 1; /* 08.08.2026 von 100vh auf 100dvh: Auf Mobilgeraeten rechnet vh gegen den GROSSEN Viewport, die Adressleiste schneidet den unteren Rand also ab. dvh folgt der tatsaechlich sichtbaren Hoehe. */ height: 100dvh; min-height: 480px; overflow: hidden; } /* Below the snap-scroll breakpoint, .scroll-stage isn't fixed (see base.css), so the page is one normal flowing document again and hero needs its own pull-up behind the header/top-bar, same as before. */ @media screen and (max-width: 749.99px) { .hero { /* Nur um den Teil hochziehen, der wirklich ueber der Buehne schwebt. --bars-height ist die Summe BEIDER Leisten (layout/theme.liquid misst alle [data-fixed-bar="true"]). Unter 750px steht die obere Leiste aber im Fluss — sections/top-bar.liquid setzt dort position: relative und schaltet erst ab 750px auf absolute. Nur der Kopf ist hier fixed (sections/header.liquid). Mit der vollen Summe begann die Buehne bei y = -Hoehe(header), oben wurde das Bild angeschnitten, und weil sie 100dvh hoch ist, begann der naechste Abschnitt um denselben Betrag zu frueh. 10.08.2026 korrigiert. Die Messung selbst bleibt unangetastet: --bars-height speist auch --pb-sticky-top in layout/theme.liquid. */ margin-top: calc(-1 * (var(--bars-height, 0px) - var(--topbar-height, 0px))); } } /* 18.09.2026: opacity/visibility/animation-* sind hier weg. Sie gehoerten zur Schleife — ein Rahmen startete unsichtbar und wurde erst von seinen Keyframes eingeblendet. Ohne Schleife haette er das nie getan, und die Buehne waere schwarz geblieben. */ /* Die Buehne: schwarze Flaeche, Text oben, Geraet darunter. Zwei Reihen in einem Raster statt Text ueber Bild — so kann sich das Bild nehmen, was nach dem Text uebrig ist, ohne ihn je zu ueberdecken. */ .hero__frame { position: absolute; inset: 0; background-color: #0B0B0E; display: grid; grid-template-rows: auto minmax(0, 1fr); align-content: start; } .hero__frame-content { position: relative; width: 100%; padding: var(--raum-4); padding-top: calc(var(--bars-height, 0px) + var(--raum-6)); display: flex; flex-direction: column; align-items: center; text-align: center; color: #fff; } /* Das Geraet. contain, nie cover: Ein Hersteller zeigt sein Produkt ganz. min-height 0, damit die Rasterzeile wirklich schrumpfen darf — ohne das waechst sie ueber die Buehne hinaus und der Text wandert nach oben raus. */ .hero__buehne { min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 var(--raum-4) var(--raum-5) var(--raum-4); } .hero__img { max-width: min(86vw, 640px); max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; } .hero__eyebrow { font-family: var(--font-heading); font-weight: var(--mq-fett); font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; /* Auf Schwarz waere #707070 nicht mehr lesbar. Gedaempftes Weiss statt eines zweiten Grautons — es bleibt derselbe Ton wie auf den Buehnen der Laser-Seite. */ color: rgba(255, 255, 255, 0.62); margin: 0 0 var(--space-2); } .hero__mark { margin-right: 0.15em; } .hero__mark .cls-1 { fill: var(--color-background); } .hero__heading { /* font-weight und line-height am 10.08.2026 ergaenzt. Sie kamen bis dahin aus dem Browser-Standard fuer h1. Seit nur noch der erste Rahmen eine h1 traegt und die uebrigen p sind, fehlten sie dort: gemessen 400 statt 700 und Zeilenhoehe 90px statt 72px — duenne Schrift ab dem zweiten Rahmen. Jetzt stehen sie an der Klasse und gelten fuer beide Elementarten. */ font-weight: var(--mq-fett); /* Die Buehnenzeile, E2: 32/40 ab 750 px. Sie steht auf einer Flaeche, nicht im Fliesstext — deshalb gilt der 22-px-Deckel hier nicht. */ font-size: var(--t-titel-1); line-height: var(--t-titel-1-zeile); letter-spacing: -0.01em; margin: 0 0 var(--space-3); max-width: var(--mass-titel); text-wrap: balance; } .hero__subheading { font-family: var(--font-body); font-size: 16px; line-height: 1.6; max-width: var(--mass); color: rgba(255, 255, 255, 0.78); margin: 0 0 var(--space-4); } .hero__cta { display: inline-block; width: fit-content; font-family: var(--font-heading); font-weight: var(--mq-fett); text-decoration: none; color: var(--color-ink); background: var(--color-background); padding: var(--space-2) var(--space-4); border-radius: var(--ecke-1); } .hero__cta:hover { background: var(--mq-akzent); color: var(--color-background); } /* END_SECTION:hero */ /* START_SECTION:main-404 (INDEX:8) */ /* Diese Seite stand als einzige quer. Am 31.07.2026 gemessen: Abstand Logo-Unterkante bis Inhalt 146px statt der 16px, die der Checkout vorgibt. Ursache war nicht ein Innenabstand, sondern place-items:center zusammen mit min-height:60vh — der Inhalt wurde in der Mitte eines uebergrossen Kastens geparkt. Die Regel in assets/base.css, die den oberen Innenabstand abraeumt, konnte dagegen nichts ausrichten. Gleich mit korrigiert, weil es dasselbe Konstrukt ist und beides gegen den Checkout-Massstab lief: · zentrierter Text -> linksbuendig, der Checkout zentriert nirgends · Gewicht 700 -> 600, mehr kennt der Checkout nicht · clamp(3rem…5.5rem) -> 22px, die groesste Groesse der Skala · feste px -> Editor-Variablen (--mq-*) · --color-accent -> das ist das Markenlila; ein Knopf traegt die Akzentfarbe, so wie ueberall sonst im Shop */ .nf { background: var(--mq-hintergrund); color: var(--mq-text); font-family: var(--font-body); } .nf__inner { max-width: var(--mq-spalte); padding-block:0 var(--mq-abstand-gross); } .nf__code { font-size: var(--mq-t-22); line-height: var(--mq-zeile-klein); font-weight: var(--mq-fett); color: var(--mq-text-leise); margin:0; } .nf__title { font-size: var(--mq-t-22); line-height: var(--mq-zeile-klein); font-weight: var(--mq-fett); margin:var(--mq-abstand) 0; } .nf__text { font-size: var(--mq-t-14); line-height: var(--mq-zeile); color: var(--mq-text-leise); margin:0 0 var(--mq-abstand-gross); } /* Derselbe Hauptknopf wie ueberall (.cd__checkout), hier nur nicht ueber die volle Breite — es ist ein Rueckweg, kein Kaufabschluss. */ .nf__cta { display: inline-block; font-size: var(--mq-t-14); font-weight: var(--mq-fett); padding:12px 24px; border-radius: var(--mq-ecke-knopf); background: var(--mq-akzent); color: var(--mq-auf-akzent); text-decoration: none; } .nf__cta:hover { background: var(--mq-akzent-gedrueckt); } /* END_SECTION:main-404 */ /* START_SECTION:main-collection (INDEX:9) */ /* Die Karte selbst steht in assets/base.css. Sie wird von drei Sektionen benutzt — Kategorie, Kategorieuebersicht und Suche —, und Shopify laedt dieses CSS nur fuer Dateien im Render-Baum der jeweiligen Seite. Hier blieben deshalb nur die Regeln der rechten Vertrauensspalte, die es ausschliesslich auf dieser Seite gibt. Huelle, Kopf und Warenkorb kommen wie bisher aus den .pb / .pb__* / .cd__*-Regeln. */ /* Right column · trust section (press + awards + image) */ .clx__trust { display: flex; flex-direction: column; gap:24px; } .clx__trustimg { margin:0; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: #dedede; display: flex; align-items: center; justify-content: center; } .clx__trustimg img { width: 100%; height: 100%; object-fit: cover; display: block; } /* .clx__ph am 08.08.2026 entfernt — Platzhaltertext eines Bildkastens, den es im Markup nicht mehr gibt. */ .clx__block { display: grid; gap:var(--raum-2); } .clx__kicker { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pb-uv); font-weight: 700; margin:0; } .clx__quotes { list-style: none; margin:0; padding:0; display: grid; gap:16px; } .clx__quotes li { padding-bottom:16px; border-bottom: 1px solid var(--pb-line); } .clx__quotes li:last-child { padding-bottom:0; border-bottom: 0; } .clx__quotes p { margin:0 0 var(--raum-0); font-weight: 600; font-size: 16px; line-height: 1.4; letter-spacing: -0.01em; } .clx__quotes cite { font-style: normal; font-size: 12px; color: var(--pb-mut); } .clx__badges { list-style: none; margin:0; padding:0; display: flex; flex-wrap: wrap; gap:8px; } .clx__badges li { font-size: 12px; padding:var(--raum-1) var(--raum-2); border: 1px solid var(--pb-line); border-radius: var(--ecke-rund); background: #fff; color: var(--pb-ink); } /* 10.08.2026 entfernt: @media (max-width: 749.99px) { .clx__grid { grid-template-columns: 1fr } }. Dieselbe Abfrage mit demselben Wert steht bereits in assets/base.css und gilt dort auf jeder Seite. */ /* END_SECTION:main-collection */ /* START_SECTION:main-contact (INDEX:10) */ /* Alle Werte aus den Editor-Variablen (--mq-*), keine festen Zahlen. Groessen und Gewichte nach dem Checkout-Massstab: h1 22, h2 20, Fliesstext 14, Gewicht nur 600, Zeilenhoehe 1,35 bzw. 1,2. */ .kt__intro { margin: 0 0 var(--mq-abstand-gross); } .kt__form { margin-block-end: var(--mq-abstand-gross); } /* Das Textfeld erbt alles vom Eingabefeld des Checkouts; nur die Hoehe und die Ausrichtung des Textes am oberen Rand kommen dazu. */ .kt__area { min-height: 140px; resize: vertical; padding-block: var(--mq-abstand); font-family: inherit; } /* Auswahlfeld: dasselbe wie auf der Sendungsverfolgung. */ /* appearance steht jetzt zentral in assets/base.css: dort bekommt das Feld den Pfeil des Checkouts. Ein ppearance: auto hier wuerde ihn wieder durch den Pfeil des Betriebssystems ersetzen. */ .kt__ok, .kt__fehler { font-size: var(--mq-t-14); line-height: var(--mq-zeile); border-radius: var(--mq-ecke-kasten); padding: var(--mq-abstand); margin: 0; } .kt__ok { color: var(--mq-erfolg); background: var(--mq-flaeche-leise); } .kt__fehler { color: var(--mq-fehler); background: var(--mq-flaeche-leise); } .kt__hinweis { font-size: var(--mq-t-12); line-height: var(--mq-zeile-klein); color: var(--mq-text-leise); margin: var(--mq-abstand) 0 0; } .kt__hinweis a { color: var(--mq-akzent); text-decoration: underline; } .kt__h2 { font-size: var(--mq-t-20); line-height: var(--mq-zeile-klein); font-weight: var(--mq-fett); margin: var(--mq-abstand-gross) 0 var(--mq-abstand); } .kt__liste { list-style: none; margin: 0; padding: 0; font-size: var(--mq-t-14); line-height: var(--mq-zeile); } .kt__liste li + li { margin-block-start: var(--mq-abstand); } .kt__liste strong { font-weight: var(--mq-fett); } .kt__liste a { color: var(--mq-akzent); text-decoration: underline; } .kt__text { font-size: var(--mq-t-14); line-height: var(--mq-zeile); margin: 0; } /* END_SECTION:main-contact */ /* START_SECTION:main-language (INDEX:11) */ /* Die Auswahlfelder selbst (.lf*) sind bereits in assets/base.css definiert — nicht doppelt. Hier steht nur, wie die Seite darum herum sitzt. */ .lang { padding-block: var(--mq-abstand-gross); } .lang__title { font-family: var(--font-heading); font-weight: var(--mq-fett); font-size: var(--mq-t-22); line-height: var(--mq-zeile-klein); letter-spacing: -0.01em; margin: 0 0 var(--mq-abstand-gross); } .lang__label { font-size: var(--mq-t-12); line-height: var(--mq-zeile-klein); color: var(--mq-text-leise); margin: 0 0 var(--mq-abstand); } .lang .lf + .lang__label { margin-top: var(--mq-abstand-gross); } .lang__foot { margin-top: var(--mq-abstand-gross); } /* END_SECTION:main-language */ /* START_SECTION:main-list-collections (INDEX:12) */ .lcx { padding-block: var(--mq-abstand-gross); } .lcx__gruppen { margin-top: var(--mq-abstand-gross); border-top: var(--mq-linie-staerke) solid var(--mq-linie); padding-top: var(--mq-abstand-gross); } .lcx__h2 { font-family: var(--font-heading); font-weight: var(--mq-fett); font-size: var(--mq-t-20); line-height: var(--mq-zeile-klein); margin: 0 0 var(--mq-abstand); } .lcx__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--mq-abstand); } .lcx__liste li { display: flex; justify-content: space-between; gap: var(--mq-abstand); align-items: baseline; border-bottom: var(--mq-linie-staerke) solid var(--mq-linie); padding-bottom: var(--mq-abstand); } .lcx__liste a { color: var(--mq-akzent); font-size: var(--mq-t-14); text-decoration: underline; } .lcx__zahl { color: var(--mq-text-leise); font-size: var(--mq-t-12); } /* END_SECTION:main-list-collections */ /* START_SECTION:main-page (INDEX:13) */ .pg { background: var(--color-background); color: var(--color-ink); font-family: var(--font-body); } /* 16.08.2026: Diese drei Kommentare waren vorher Liquid-Kommentare. Shopify fuehrt in einem Stylesheet-Block KEIN Liquid aus — die Tags landeten woertlich im gebuendelten styles.css, das jeder Kunde laedt. Live nachgesehen: sechs Liquid-Tags mitten im CSS, alle aus dieser Datei. Der Browser faengt sich zwar wieder und die Regeln danach greifen weiter (.pg__inner 760px, .pg__title 22px gemessen), aber gueltig ist es nicht, und Shopifys eigene Themepruefung meldet es als Fehler. Ein CSS-Kommentar tut dasselbe, ohne die Datei zu beschaedigen. KEIN seitlicher Innenabstand: Der Rahmen .gdtca bringt bereits 40px mit — genau die Kante des Checkouts. Hier standen zusaetzlich 24px, dadurch war die Textspalte 451 statt 499 Pixel breit und sass 24px weiter innen als Kopfleiste und Fuss. Am 31.07.2026 auf /pages/track-your-order gemessen: Kopf und Fuss bei 459, Ueberschrift und Formular bei 483. Die Regel gilt ueber das gebuendelte Stylesheet auch fuer Sendungsverfolgung und Rechtsseiten. */ .pg__inner { /* 19.09.2026 von 760 auf 640. Die 760 stammten aus der Zeit von 14px Text. Mit 16px Fliesstext traegt eine 760px-Spalte rund 95 Zeichen je Zeile, 640px rund 80 — naeher an den 45 bis 75, ab denen das Auge beim Ruecksprung die naechste Zeile noch trifft (Bringhurst). Die Kante selbst aendert sich nicht; die Spalte bleibt mittig im 40px-Rahmen von .gdtca. */ max-width: 640px; margin-inline: auto; padding-block: var(--section-pad-block); } /* Alle Groessen in px, nicht in rem: Auf diesen Seiten liegen die Dateien des Checkouts, und die setzen die Grundeinheit auf 10px. Ein rem-Wert waere dort nur noch 62,5 % gross — der Fliesstext kam mit 10px statt 16px heraus. Schriftgroessen auf der Skala des Checkouts: 10 · 12 · 14 · 16 · 18 · 20 · 22. Mehr kennt er nicht. Vorher: Titel bis 48px, Zwischenueberschrift bis 26px. Am 31.07.2026 gemessen: h1 kam mit 48px heraus. 22px ist der groesste Wert, den der Checkout kennt. Abstaende ebenfalls aus der Rasterliste, nicht in em. */ /* 19.09.2026 — DIESE SEITEN LASEN SICH WIE EIN FORMULAR, NICHT WIE TEXT. Gilt fuer Kontakt, Sendungsverfolgung, Garantie und alle Rechtsseiten. Vorher: .rte 14px bei Zeilenhoehe 1.35. Zwei Fehler in einer Zeile. Erstens die Groesse. 14px ist im Checkout die BEDIENgroesse — Feldbeschriftung, Tabellenzelle, Knopftext. Sein Fliesstext steht auf 16. Vierzehn Pixel auf einer 760px breiten Textspalte ergaben rund 108 Zeichen je Zeile; Bringhurst nennt 45 bis 75 als den Bereich, in dem das Auge den Zeilenanfang noch wiederfindet. Jetzt --t-text (16/24) und die Spalte auf 640px, also rund 80 Zeichen. Zweitens die krummen Zeilen. 14 mal 1,35 sind 18,9px; 16 mal 1,35 waeren 21,6; 0.35em ergaben 4,9. Kein Wert davon faellt auf einen ganzen Pixel, also sass kein Absatz auf derselben Linie wie sein Nachbar. Alle Zeilenhoehen kommen jetzt aus den Tokenpaaren und sind ganzzahlig. Drittens die Abstaende. Ueberschrift, Absatz und Aufzaehlung standen alle 14px auseinander — bei gleichem Abstand kann das Auge keine Gruppen bilden, und die Seite wirkt als eine einzige Textmasse. Jetzt mit Sprung: 48 vor h2, 32 vor h3, 24 zwischen Absaetzen, 8 zwischen Listenpunkten. */ .pg__title { font-family: var(--font-heading); font-weight: var(--mq-fett); font-size: var(--t-titel-2); line-height: var(--t-titel-2-zeile); letter-spacing: -0.01em; margin: 0 0 var(--raum-3); } .rte { font-size: var(--t-text); line-height: var(--t-text-zeile); } .rte > * + * { margin-top: var(--raum-3); } .rte h2 { font-family: var(--font-heading); font-weight: var(--mq-fett); font-size: var(--t-titel-2); line-height: var(--t-titel-2-zeile); margin-top: var(--raum-5); } .rte h3 { font-family: var(--font-heading); font-weight: var(--mq-fett); font-size: var(--t-titel-3); line-height: var(--t-titel-3-zeile); margin-top: var(--raum-4); } .rte ul, .rte ol { padding-left: var(--raum-3); } .rte li + li { margin-top: var(--raum-1); } /* 10.08.2026: von --color-accent auf --mq-akzent. --color-accent zeigt in layout/theme.liquid auf --mq-marke, also auf das Markenlila #B526D3 — Verweise im Fliesstext aller Seiten erschienen damit lila statt im Checkout-Blau #005BD1, das jeder andere Verweis des Shops traegt. Die Ecke folgt derselben Begruendung: --mq-ecke-klein statt fester 8px. */ .rte a { color: var(--mq-akzent); } .rte img { height: auto; border-radius: var(--mq-ecke-kasten); } /* END_SECTION:main-page */ /* START_SECTION:main-password (INDEX:14) */ .pw { /* 08.08.2026 auf dvh: vh rechnet mobil gegen den grossen Viewport und laesst den unteren Rand unter der Adressleiste verschwinden. */ min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding:48px 24px; background: var(--color-background); color: var(--color-ink); font-family: var(--font-body); } .pw__card { width: 100%; max-width: 480px; text-align: center; } .pw__logo { line-height: 0; margin:0 0 var(--raum-5); } .pw__logo img { width: 150px; height: auto; display: inline-block; } /* 10.08.2026 auf die Skala gesetzt. Vorher: 26px / 12px / clamp(30,6vw,50) / clamp(15,2.4vw,17) und dreimal Gewicht 800 — lauter Werte, die es sonst nirgends im Theme gab. Die Wortmarke erscheint nur, wenn kein Logo hinterlegt ist. Der Untertitel lag mit 15-17px zwischen zwei Stufen. */ .pw__wordmark { font-family: var(--font-heading); font-weight: var(--mq-fett); font-size: var(--mq-t-22); letter-spacing: -0.02em; line-height: 1; } .pw__eyebrow { font-size: var(--mq-t-12); font-weight: var(--mq-fett); letter-spacing: 0.32em; text-transform: uppercase; color: var(--mq-akzent); margin:0 0 16px; } .pw__title { font-family: var(--font-heading); font-weight: var(--mq-fett); font-size: var(--mq-buehne-5); letter-spacing: -0.035em; line-height: 1.02; text-wrap: balance; margin:0 0 16px; } .pw__sub { margin: 0 auto 32px; max-width: 42ch; font-size: var(--mq-t-16); line-height: 1.55; color: var(--color-ink); opacity: 0.62; } .pw__field { display: flex; gap:8px; } .pw__enter { margin-top:var(--space-3); } .pw__field input { flex: 1; min-width: 0; font: inherit; font-size: var(--mq-t-14); color: var(--color-ink); background: #fff; border: 1px solid var(--color-line); border-radius: var(--mq-ecke-kasten); padding:14px 16px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; } /* Der Hof zog seine Farbe aus einer festen RGB-Zahl und blieb blau, auch wenn im Theme-Editor eine andere Akzentfarbe eingestellt wird. color-mix mischt ihn jetzt aus dem Regler. 10.08.2026. */ .pw__field input:focus { border-color: var(--mq-akzent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mq-akzent) 18%, transparent); } .pw__btn { font: inherit; font-weight: var(--mq-fett); font-size: var(--mq-t-14); cursor: pointer; white-space: nowrap; color: #fff; background: var(--mq-akzent); border: 0; border-radius: var(--mq-ecke-kasten); padding:14px 20px; transition: background-color 0.15s; } .pw__btn:hover { background: var(--mq-akzent-gedrueckt); } .pw__ok { font-weight: var(--mq-fett); color: var(--mq-akzent); margin:0; } .pw .errors { list-style: none; margin:0 0 12px; padding:0; color: var(--mq-fehler); font-size: var(--mq-t-14); } @media screen and (max-width: 579.99px) { .pw__field { flex-direction: column; } .pw__btn { width: 100%; } } /* iOS Safari zoomt beim Antippen in jedes Feld unter 16px hinein und zoomt danach nicht wieder heraus. Der Kunde tippt sein Passwort dann in eine vergroesserte, verschobene Seite — und diese Seite ist die einzige, die ueberhaupt jemand zu sehen bekommt, solange der Shop geschuetzt ist. Die Abweichung von den 14px des Checkouts gilt nur fuer Finger; mit der Maus bleibt sein Wert unveraendert. Dieselbe Loesung steht in assets/base.css fuer die Felder aller uebrigen Seiten. 10.08.2026. */ @media (pointer: coarse) { .pw__field input { font-size: 16px; } } /* END_SECTION:main-password */ /* START_SECTION:main-product (INDEX:15) */ /* ===================================================================== SCHRIFTWERTE — Angleichung an den Checkout, 07.08.2026 --------------------------------------------------------------------- Gemessen am 04.08.2026 auf /products/laser-mosquit: Die Produktseite laedt die 44 Stylesheets des Shopify-Checkouts mit. Deren Wurzel steht auf 10px statt 16px, also kommt jeder rem-Wert mit 62,5 Prozent seiner gemeinten Groesse heraus (0.9rem war als 14,4px gemeint, rendert als 9px). Messwert: 142 Elemente mit 9px, dazu 5px, 6px und 8px im laufenden Text, insgesamt 48 abweichende Kombinationen aus Groesse, Gewicht und Buchstabenabstand. Der Checkout selbst kennt nur diese Skala, am selben Tag ausgelesen: Schriftgroessen 10 · 12 · 14 · 16 · 18 · 20 · 22 px Buchstabenabstand durchgehend normal Schriftfamilie Plus Jakarta Sans Umrechnung in dieser Datei: - font-size steht hier bereits in px; nur die Ueberschrift h1 (.pb__title) lag mit 28px ueber dem Deckel und geht auf 22px. - letter-spacing in em ist entfallen; alle 8 Vorkommen stehen jetzt auf normal, auch das negative Tracking (h2 hatte -0.02em, das sind bei 20px genau -0,4px, die der Checkout nicht hat). - line-height bleibt einheitenlos (1.2 / 1.35 wie im Checkout). - rem in Abstaenden (padding, margin, gap, width) ist unberuehrt. Geaendert wurden ausschliesslich Werte, keine Selektoren, Klassen oder Strukturen. Einzelne Stellen tragen deshalb keinen eigenen Kommentar. ===================================================================== */ /* Alle --pb-Werte stehen seit dem 08.08.2026 im style-Block von layout/theme.liquid. Zwei Gruende, dort und nicht hier: In einem Stylesheet-Block fuehrt Shopify kein Liquid aus, die Farben mussten hier also fest verdrahtet sein — die Regler unter Onlineshop -> Anpassen blieben auf der Produktseite wirkungslos. Und Shopify laedt dieses CSS nur fuer Dateien im Render-Baum der jeweiligen Seite. Kategorie- und Suchseite benutzen dieselben Werte, hatten main-product aber nie im Render-Baum. */ .pb { font-family: var(--font-body); color: var(--pb-ink); background: var(--pb-main-bg); } .pb *, .pb *::before, .pb *::after { box-sizing: border-box; } /* ===================================================================== THE SPLIT — copied 1:1 from the live Shopify checkout shell, read on 2026-07-20 from mosquit.store/checkouts/cn/... via the Chrome extension. Authored checkout rules, reproduced verbatim below: .Sxi8I display: grid; grid-template-areas: "main order-summary"; grid-template-columns: minmax(min-content, calc(50% + offset)) 1fr; ._9F1Rf grid-area: main; display: flex; justify-content: flex-end; height: 100%; ._9F1Rf .gdtca width: 100%; height: 100%; max-width: 580px; padding:40px; border-right: 1px solid var(--x-default-color-border); .i4DWM grid-area: order-summary; display: block; .i4DWM ._4QenE position: sticky; inset: 0 auto; width: 100%; max-width: 480px; padding:40px; Breakpoint is the checkout's own: screen and (min-width: 1000px). Below it the checkout hides the summary entirely; here it stacks instead. ===================================================================== */ /* Raster, Spalten, Farben und Abstaende kommen aus den Checkout-Dateien (Sxi8I / _9F1Rf / gdtca / i4DWM / _4QenE) — genau wie auf der Cart-Seite. Die frueheren Regeln .pb__grid / .pb__gallery / .pb__info / .pb__aside haben dasselbe nachgebaut und sind deshalb entfernt. */ /* Der Abstand nach links und rechts kommt AUSSCHLIESSLICH aus .gdtca (padding:40px, Checkout-Original). Wer hier nochmal padding-inline setzt, verdoppelt ihn — genau das war am 31.07.2026 bei der Galerie der Fall: Kasten bei 40, Bild erst bei 80, waehrend Text und Story bei 49 standen. Deshalb hier NUR noch oben und unten. */ .pb__gallery-in, .pb__info-in, .pb__story { width: 100%; } .pb__gallery-in { padding:var(--pb-pad) 0; } .pb__info-in { padding:0 0 var(--pb-pad); } /* story: kein padding-inline — dasselbe wuerde sich mit .gdtca verdoppeln. Die Breite kommt aus .pb__col weiter unten, wie bei Galerie und Text. */ /* 10.08.2026 entfernt: der 1000px-Block mit .pb__gallery-in { padding-top }. Er war wirkungslos — assets/base.css setzt html body .gdtca.pb__headbox + .gdtca > * { padding-block-start: 0 } mit (0,3,2) gegen die (0,1,0) dieser Regel. Soll die Galerie auf dem Desktop wirklich Abstand nach oben bekommen, gehoert die Ausnahme dorthin. Ebenfalls entfernt: .pb__hdr in beiden Auspraegungen (Grundregel hier und die max-width-Regel im 1000px-Block weiter unten). Die Klasse steht in keinem class-Attribut des Themes — nur .pb__hdr-nav, .pb__hdr-ico, .pb__hdr-cart und .pb__hdr-count kommen vor. */ /* Am 08.08.2026 entfernt: .pb__brand und .pb__brand img. Das Logo dieser Sektion sitzt seit dem Umbau der Kopfzeile in sections/header.liquid und sections/section2-header.liquid, die ihr 130px-Mass je selbst setzen; die Klasse .pb__brand erzeugt hier nichts mehr. */ /* The bag is Shopify's original and sets the size: 11.5 of its 14 units at the former 24px box = 19.71px tall. Every glyph is cropped to its own outline (see the markup), so this one height makes all four exactly as tall as the bag while each keeps its own width. The 1.5px stroke sits centred on the outline and spills 0.75px past the box on every side -- the same on all four, so one flex gap gives one optical gap. 24px is the spacing account-to-bag already had. */ .pb__hdr-nav { display: flex; align-items: center; gap:24px; } .pb__hdr-ico { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 24px; padding:0; border: 0; background: none; cursor: pointer; color: var(--pb-uv, #005bd1); text-decoration: none; } .pb__hdr-ico svg { height: 19.71px; width: auto; overflow: visible; display: block; } .pb__hdr-ico:hover { color: var(--mq-akzent-gedrueckt); } /* Checkout draws the bag in a 24px box, so its outline stops 3.43px short of the header's right edge ((24 - 24 * 10/14) / 2). Our boxes hug the outline, which would push the bag flush to the edge. This margin puts it back on the checkout's pixel without touching the 24px spacing on its left. */ .pb__hdr-cart { margin-right:3.43px; } .pb__hdr-count { position: absolute; top: -6px; right: -8px; min-width: 15px; height: 15px; padding:0 4px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-body); font-size: 10px; font-weight: var(--mq-fett); line-height: 1; color: #fff; background: var(--pb-uv, #005bd1); border-radius: var(--ecke-rund); font-variant-numeric: tabular-nums; } .pb__hdr-count[hidden] { display: none; } @media screen and (min-width: 1000px) { /* Header ONLY sits in the checkout's box, not the full column: 500px content (= 580px wrapper − 80px padding), right-aligned to the seam. Result: logo x=459 and cart x=934/958 match the checkout pixel-for-pixel, while the gallery / info / story / footer below stay 100% width (per earlier request). */ /* .pb__hdr am 10.08.2026 entfernt — siehe Begruendung oben. Die Regel band die linke Kante des Logos an die des Bildes; die Klasse existiert im Markup nicht, die Rechnung lief also ins Leere. */ } /* Am 08.08.2026 entfernt: .pb__footer samt Media-Query, .pb__footer-links, dessen a und a:hover sowie .pb__footer-copy — zusammen 20 Zeilen. Die Fusszeile dieser Sektion baut seit dem 04.08.2026 snippets/split-footer.liquid mit den Klassen des Checkouts; keine dieser fuenf Klassen wird noch erzeugt. Die Masse leben in assets/base.css weiter, dort an der echten Fusszeile gemessen (Kopf 459 bis 958, Text 14px, Linkfarbe #005bd1). */ /* html body davor, weil dasselbe Element auch die Checkout-Klasse ._4QenE traegt. Deren Regel lautet padding:var(--x-shell-order-summary-padding), und diese Variable setzt der Checkout erst ab 1000px — darunter ist die Angabe ungueltig und faellt auf 0 zurueck. Bei gleicher Spezifitaet gewinnt sie, weil die Checkout-Dateien nach dem Theme-CSS laden. Am 08.08.2026 im Browser nachgemessen: ohne diesen Praefix stand die rechte Spalte mobil auf padding 0. */ html body .pb__aside-in { width: 100%; max-width: var(--pb-aside-max); margin-inline: auto; /* quer und laengs getrennt statt einheitlich --pb-pad: Der Checkout benutzt unter 1000px 20px quer und 14px laengs; ab 1000px schalten beide Variablen auf den vollen Reglerwert um und ergeben wieder 40px. */ padding:var(--mq-rahmen-quer) var(--mq-rahmen-laengs); } @media screen and (min-width: 1000px) { /* html body auch hier, seit 08.08.2026. Die Grundregel oben traegt diesen Praefix, um die Checkout-Klasse ._4QenE zu ueberstimmen — ohne ihn hier gewaenne sie mit (0,2,2) gegen die (0,1,0) dieser Abfrage, und margin-inline bliebe auf auto. Genau das war am 08.08.2026 am laufenden Shop zu sehen: Die Kaufspalte stand bei x=1208 statt an der Naht bei x=999, also mittig in ihrer Spalte statt buendig — 209px zu weit rechts. Der Checkout setzt sie linksbuendig an die Naht. */ html body .pb__aside-in { margin-inline: 0; /* 05.09.2026, auf Patryks Ansage: Die Kaufspalte klebt nicht mehr und hat keine Hoehengrenze mehr. Vorher stand hier position: sticky mit min-height und max-height auf Fensterhoehe, overflow: hidden und flex-direction: column; der lange Mittelteil (.pb__aside-scroll) scrollte in sich selbst. Das war die Bauweise der Checkout-Bestellzusammenfassung und loeste das Problem vom 31.07.2026: Ein klebendes Panel, das hoeher ist als das Fenster, verschluckt seinen unteren Teil, und der Kaufknopf war auf einem 1366x768-Notebook nie zu sehen. Ohne das Kleben stellt sich dieses Problem nicht mehr: Die Spalte laeuft mit der Seite, alles darunter erreicht man durch normales Scrollen. Die Reihenfolge steht damit im Fluss — Bestandshinweis, Pick Your Deal, Secure checkout, Kaufknopf, View cart. Was damit ohne Wirkung bleibt: margin-top: auto an .pb__pay hat keinen Flex-Rest mehr zu verteilen, und --pb-sticky-top wird nicht mehr gebraucht. NACHTRAG 17.09.2026: Der Absatz oben stimmte nicht. Entfernt wurde am 05.09.2026 nur die EIGENE Regel des Themes. Das Kleben kam danach weiter aus den Checkout-Stylesheets, die diese Seite selbst laedt (.i4DWM ._4QenE { position: sticky; top: 0 }), und die Kaufspalte traegt beide Klassen. Am 17.09.2026 auf der laufenden Seite gemessen: position = sticky, top = 0px. Damit war das Problem vom 31.07.2026 zurueck, nur ohne seine Loesung: Die Spalte ist 860px hoch: auf einem 1366x768-Notebook bleibt ihr unteres Ende dauerhaft unter der Fensterkante, und der Kaufknopf ist nicht erreichbar — die frueheren Hoehengrenzen und der eigene Scrollbereich, die genau das verhinderten, sind ja entfernt. Zurueckgesetzt wird es in der Regel direkt unter dieser Abfrage — sie braucht mehr Gewicht, als hier zur Verfuegung steht. */ } } /* Die Kaufspalte klebt — 18.09.2026, auf Patryks Entscheidung. WARUM UEBERHAUPT. Gemessen am 17.09.2026: .pb__aside ist 727px breit (46 Prozent der Fensterbreite) und 23 579px hoch. Inhalt traegt sie auf 870px davon. Die restlichen 22 709px — 96 Prozent — sind leer. Der Blick findet eine angefangene zweite Spalte, sucht ihren Inhalt und findet keinen. Das ist die lauteste Frage, die der Shop stellt. WARUM `top` UND NICHT `bottom`. Am 18.09.2026 mit `bottom` gebaut, gemessen und wieder verworfen — die Begruendung gehoert hierher, damit es niemand ein zweites Mal versucht. Die Idee war, den FUSS des Kastens ans untere Fenster zu heften, damit der Kaufknopf immer sichtbar bleibt, auch wenn der Kasten hoeher ist als das Fenster. Sie kann nicht funktionieren: `bottom` verschiebt einen klebenden Kasten nach OBEN, und ein klebender Kasten darf seinen umgebenden Block nie verlassen. Unser Kasten sitzt am oberen Rand von .i4DWM, kann also um genau 0px nach oben — er klebt nie. Am laufenden Shop nachgemessen: nach 6000px Scrollen stand er bei -6000..-5140, also unverschoben. Es bleibt `top`, und damit das Problem vom 31.07.2026: Der Kasten ist 860px hoch. Auf einem 1366x768-Notebook faellt der Kaufknopf unten aus dem Fenster. Die Antwort ist dieselbe wie im Checkout selbst — eine Hoehengrenze und ein eigener Scrollbereich. `overflow-y: auto` zeigt ihn nur, wenn er gebraucht wird: bei 900px Fensterhoehe stehen dem Kasten 868px zur Verfuegung, er braucht 860 und bleibt ohne Leiste. --pb-sticky-top gibt es seit dem 31.07.2026 genau dafuer; es rechnet --bars-height mit, also die Hoehe fester Leisten. Auf der Produktseite ist keine Leiste fest, der Wert ist calc(0px + 16px). SPEZIFITAET. Die Checkout-Regel lautet `.i4DWM ._4QenE { position: sticky; top: 0 }` und wiegt zwei Klassen (0-2-0). `html body .pb__aside-in` daneben wiegt eine Klasse und zwei Typen (0-1-2) und verliert. Der doppelte Klassenname hebt auf 0-2-2 und ist die kleinste Erhoehung, die reicht; getroffen wird genau dasselbe Element. Nicht in der Checkout-Datei aendern: Das ist fremder, versionierter Code. Nicht ueber !important: Das naechste Problem waere dann unloesbar. Erst ab 1000px, weil es darunter keine zweite Spalte gibt, an der etwas kleben koennte — dort steht der Kasten im Fluss wie bisher. */ html body .pb__aside-in.pb__aside-in { position: static; top: auto; bottom: auto; } @media screen and (min-width: 1000px) { html body .pb__aside-in.pb__aside-in { position: sticky; top: var(--pb-sticky-top); bottom: auto; max-height: calc(100dvh - 2 * var(--raum-2)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } } /* Der Scrollbereich traegt seine Regeln aus den Checkout-Stylesheets (_1b9t7yp0, _1fragemuk, _1fragemv4, _1fragemnc, _1b9t7ypa). Hier steht nur, was es im Checkout nicht gibt. Unter 1000 px wird der Kasten nicht begrenzt (_16s97g796: max-height none), also darf der Bereich dort auch nicht scrollen — sonst entstuende auf dem Handy ein Scrollfeld ohne Not. */ /* Der Rahmen traegt flex:1 und min-height:0, damit er den Rest der Spalte ausfuellt und seine max-height sich auf den WIRKLICH freien Platz bezieht. Im Checkout steht das nicht, weil dort unter der Liste nur zwei kurze Zeilen folgen und 40vh fest genug ist. Hier haengen Zahlungssymbole, Kaufknopf und "View cart" darunter — deren Hoehe wechselt mit der Sprache und der Zahl der Zahlungsarten. */ {%- comment -%} Hier stand: .pb__aside-frame { flex: 1; min-height: 0 } ab 1000px. Das gehoerte zur Hoehenbegrenzung der Spalte und hat ohne sie keine Aufgabe mehr. {%- endcomment -%} /* 10.08.2026: Der Rollbereich traegt tabindex="0", damit er sich mit der Tastatur scrollen laesst. outline: none nahm ihm dafuer jeden sichtbaren Hinweis — man landete beim Tabben in einem Kasten, ohne zu sehen wo. Statt den Ring zu loeschen sitzt er jetzt innen, damit er das Spaltenraster nicht aufdrueckt. */ .pb__aside-scroll:focus-visible { outline: 2px solid var(--mq-akzent); outline-offset: -2px; } {%- comment -%} Bis zum 05.09.2026 galt das nur unter 1000px, weil die Spalte darueber absichtlich scrollte. Jetzt gilt es ueberall — es gibt keinen Rollbereich mehr. {%- endcomment -%} /* BEIDE Richtungen zuruecksetzen, nicht nur overflow-y. CSS rechnet overflow-y: visible zu auto um, sobald overflow-x einen anderen Wert als visible hat — die Checkout-Klasse _1fragemv4 setzt genau das (overflow-x: hidden). Mit nur einer der beiden Zeilen bliebe ein Scrollkontext bestehen. Zwei Klassen im Selektor, nicht eine: Die Checkout-Stylesheets werden NACH diesem Abschnitt geladen; bei gleicher Spezifitaet gewaenne _1fragemv4 mit overflow-x: hidden. Ebenso der Innenabstand aus _1b9t7ypa: Sein Gegenstueck _1b9t7yp9 (negativer Aussenabstand) sitzt am Rahmen und gilt auch dort immer. Beide zusammen sind neutral, deshalb bleiben sie stehen. */ /* Die Huelle des Kaufkastens traegt .co-kauf, weil das Skript sie sucht. Aus den Checkout-Dateien bringt diese Klasse 24px Abstand nach oben mit; der gehoerte zum alten Kasten. Die Bestandszeile darueber hat ihren eigenen Abstand von 24 — beide zusammen ergaben 48px Leerraum ueber "Pick Your Deal", am 05.09.2026 gemessen. */ .co-form > .co-kauf { margin-top: 0; } .pb__aside-frame > .pb__aside-scroll { overflow-x: visible; overflow-y: visible; max-height: none; } .pb__aside-in > .pb__aside-frame { overflow-x: visible; overflow-y: visible; max-height: none; display: block; } /* ---- gallery: thumbnails (left, stacked) + square main image (right) ---- every gap = var(--pb-pad) (40px), the same as the section's left/right inset: - between stacked thumbnails - from the thumb column across to the main image all product images are forced square via aspect-ratio: 1. */ .pb__media { display: flex; gap:var(--pb-tgap); align-items: flex-start; position: relative; padding-left: calc(var(--pb-thumbw) + var(--pb-tgap)); } .pb__media:not(:has(.pb__thumbs)) { padding-left:0; } @media screen and (min-width: 1000px) { /* The specified geometry: the big image is flush-left with the LOGO — i.e. it gets exactly the checkout form's 499px and ends on the content edge the header already sits on. Left of it, the same 40px gap the content keeps to the buy column, then the 96px thumbnails. The whole row is right-aligned, and its total width (96 + 40 + 499 = 635px) becomes the width of every section below (info + story). */ .pb__media { width: min(var(--pb-col), 100%); margin-left: auto; padding-left: calc(var(--pb-thumbw) + var(--pb-tgap)); } .pb__thumbs { width: var(--pb-thumbw); } /* The image may SHRINK below 499 when the pane gets narrow (1000–1550px viewports) — same behaviour as the header box above it (max-width 499, right-aligned), so the picture keeps sharing its left edge with the logo at every width. Thumbnails and the 40px gap stay fixed. */ .pb__stage { flex: 0 1 499px; min-width: 0; } /* THE left-column content box. One class, one width — used by the product page (description, story), the cart (items, totals) and the collection (product grid), so all three start and end on the same line. The pane has no right padding of its own, so the 40px to the seam goes on as margin; right edges land on the same content edge as the image above. */ /* KEIN margin-right hier. Der Abstand zur Naht kommt schon aus dem Innenabstand von .gdtca (padding:40px, Checkout-Original). Beides zusammen ergab 80px links vom Schnitt, waehrend rechts davon nur 40px standen — die Seite war unsymmetrisch, und zwar auf Produkt-, Warenkorb- und Kategorieseite gleichzeitig, weil alle drei .pb__col benutzen. Gemessen am 31.07.2026 bei 1350px Fensterbreite: vorher weiss 40 → 644, Naht bei 725 → Luecke 81 Checkout → Luecke 41 Aus demselben Grund faellt das "- var(--pb-pad)" in der Breite weg: die 100 % beziehen sich bereits auf den Kasten INNERHALB des Innenabstands. */ .pb__col, .pb__gallery-in { width: min(var(--pb-col), 100%); margin-left: auto; padding-inline: 0; } } /* 5 QUADRATISCHE Kacheln in der Spaltenbreite --pb-thumbw. 10.08.2026 umgestellt: Bis dahin folgte die Kachelgroesse der BUEHNENHOEHE (height: calc((100% - 4 * var(--pb-tgap)) / 5)) und die Breite kam ueber aspect-ratio hinterher — gedeckelt von max-width: 100%, also von --pb-thumbw. Sobald die abgeleitete Breite groesser war als die Spalte, schlug max-width das aspect-ratio, und die Kachel war kein Quadrat mehr, sondern hoeher als breit. Das Bild darin laeuft auf object-fit: cover und wurde sichtbar beschnitten. Bei 1200px Fenster gemessen: Spalte 72px, Kachelhoehe 88px. Im umgekehrten Fall blieb rechts ein toter Streifen. Kachelhoehe und Buehnenhoehe treffen sich nur bei genau einer Fensterbreite — jetzt fuehrt die Breite, und die Kachel ist bei jeder Breite quadratisch. Die Kachelspalte ist dafuer nicht mehr exakt so hoch wie die Buehne; das ist der kleinere Preis. Der alte Kommentar rechnete mit 4.75px Luecke, tatsaechlich sind es 14.75px (--pb-tgap in layout/theme.liquid). */ /* --pb-tgap und --pb-thumbw stehen jetzt oben auf .pb, weil auch --pb-col und .pb__media sie brauchen. Hier nur noch benutzt. */ .pb__thumbs { display: flex; flex-direction: column; align-items: flex-start; gap:var(--pb-tgap); margin:0; position: absolute; left: 0; top: 0; height: 100%; width: var(--pb-thumbw); } /* Rand IMMER innen: Kontur mit Innen-Versatz liegt UEBER dem Bild, Kachelgroesse aendert sich nie, nichts verschiebt sich */ /* Die Kacheln sind seit dem 17.09.2026 etwas kleiner als ihre Spalte: --pb-mini statt 100 %. Die SPALTE bleibt unveraendert breit, denn aus --pb-thumbw leitet sich --pb-col ab, und daran haengt die gemeinsame Inhaltskante von Produkt-, Warenkorb- und Kategorieseite. Wer die Spalte schmaler macht, verschiebt drei Seiten. Die Kacheln stehen linksbuendig, ihre linke Kante liegt also weiter genau auf dieser Kante; die Luft entsteht rechts, zwischen Kachel und Buehne. */ .pb__thumbs { --pb-mini: 82%; } .pb__more { width: var(--pb-mini); height: auto; aspect-ratio: 1; flex: 0 0 auto; padding:0; border: 0; outline: 1px solid var(--pb-line); outline-offset: -1px; background: var(--pb-surface); cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: var(--mq-fett); font-size: 16px; color: var(--pb-uv-lite); transition: outline-color 0.18s ease; } .pb__more:hover { outline-color: rgba(0, 91, 209, 0.55); } .pb__thumb { width: var(--pb-mini); height: auto; aspect-ratio: 1; flex: 0 0 auto; padding:0; border: 0; outline: 1px solid var(--pb-line); outline-offset: -1px; background: var(--pb-surface); cursor: pointer; overflow: hidden; transition: outline-color 0.18s ease; } .pb__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .pb__thumb:hover { outline-color: rgba(0, 91, 209, 0.55); } .pb__thumb.is-active { outline: 2px solid var(--pb-uv-lite); outline-offset: -2px; box-shadow: 0 0 22px -4px var(--pb-glow); } .pb__stage { position: relative; flex: 1 1 auto; min-width: 0; aspect-ratio: 1; background: var(--pb-surface); overflow: hidden; } .pb__slide { position: absolute; inset: 0; display: none; } /* ---- Bildspalte auf schmalen Schirmen, 08.08.2026 ---- Der Aufbau oben ist fuer eine Miniaturspalte NEBEN der Buehne gerechnet: .pb__media traegt links einen Innenabstand von Kachelbreite plus Abstand, und .pb__thumbs liegt absolut darin. Die Kacheln teilen sich dabei die Hoehe der Buehne durch fuenf. Auf dem Handy fuehrte das zu 28px-Kacheln, die sich mit dem Finger nicht treffen lassen, und kostete zugleich rund ein Fuenftel der Bildbreite fuer eine Spalte, die niemand bedienen kann. Unter 750px liegen die Kacheln deshalb waagerecht unter der Buehne: feste 56px statt einer Hoehenteilung, waagerecht scrollbar, und die Buehne bekommt die volle Breite. */ @media screen and (max-width: 749.99px) { /* column-reverse, weil die Kacheln im Markup vor der Buehne stehen — auf breiten Schirmen sitzen sie ja links davon. Auf dem Handy gehoert das Produktbild nach oben und die Auswahl darunter. */ .pb__media { flex-direction: column-reverse; padding-left:0; gap:var(--raum-1); } /* In der Spalte verteilt flex die HOEHE. Die Buehne traegt oben flex: 1 1 auto — damit waere sie null hoch und ueber aspect-ratio: 1 auch null breit. Sie bekommt hier deshalb ihre volle Breite und laesst die Hoehe aus dem Seitenverhaeltnis folgen. */ .pb__stage { flex: 0 0 auto; width: 100%; } .pb__thumbs { position: static; flex-direction: row; width: 100%; height: auto; gap:8px; overflow-x: auto; overflow-y: hidden; align-items: center; /* Fingerbedienung: das Wischen soll an den Enden nicht die ganze Seite mitziehen, und die Kacheln sollen einrasten. */ overscroll-behavior-x: contain; scroll-snap-type: x proximity; } .pb__thumb, .pb__more { height: 56px; width: 56px; scroll-snap-align: start; } } .pb__slide.is-active { display: block; } /* Overlay-Karussell (alle Bilder): benutzt DIE geteilte Huelle .mq-ov / .mq-ov__tint / .mq-ov__card aus sections/cart-drawer.liquid — identisch zum Warenkorb. Hier nur das Galerie-Eigene: Innen-Layout (Thumbs links + Hauptbild) und die Kartengroesse (breiter, weil Bilder). Rahmen/Blende/Oeffnen = geteilt. */ /* flex-direction ausdruecklich, seit 08.08.2026. Die Karte traegt zugleich .mq-ov__card, und assets/base.css setzt dort column. Ohne eigene Angabe gewann diese — der Miniaturstreifen lag UEBER dem Bild statt daneben, und weil er nicht schrumpft (flex 0 0 auto), blieb dem Bild bei acht Aufnahmen rechnerisch nichts uebrig. Das galt auf jedem Geraet, nicht nur mobil. */ .pb__ov-card { display: flex; flex-direction: row; overflow: hidden; } /* Thumbs LINKS als Spalte: 88er Quadrate, feste Abstaende, Scrollbar sichtbar, Breite fest + reservierte Scrollbar-Breite */ .pb__ov-strip { flex: 0 0 auto; width: calc(128px + var(--scrollbar-width, 0px)); display: flex; flex-direction: column; gap:12px; padding:20px; overflow-y: auto; box-shadow: inset -1px 0 0 var(--mq-linie); } .pb__ov-strip button { width: 88px; height: 88px; flex: 0 0 auto; padding:0; border: 0; outline: 1px solid var(--pb-line); outline-offset: -1px; background: #fff; cursor: pointer; overflow: hidden; } .pb__ov-strip button img { width: 100%; height: 100%; object-fit: cover; display: block; } .pb__ov-strip button.is-active { outline: 2px solid var(--pb-uv-lite); outline-offset: -2px; } /* Hauptbereich rechts: feste Abstaende in alle Richtungen */ .pb__ov-main { flex: 1 1 auto; min-width: 0; position: relative; } .pb__ov-stage { position: absolute; inset: 64px 88px; display: flex; align-items: center; justify-content: center; } .pb__ov-stage img { max-width: 100%; max-height: 100%; display: block; } .pb__ov-x { position: absolute; top: 14px; right: 16px; border: 0; background: none; cursor: pointer; color: var(--pb-ink); padding:var(--raum-1); } .pb__ov-x svg { width: 18px; height: 18px; display: block; } .pb__ov-x:hover { color: var(--pb-uv-lite); } .pb__ov-pf { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; outline: 1px solid var(--pb-line); outline-offset: -1px; background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--pb-ink); } .pb__ov-pf:hover { background: #f5f5f5; } .pb__ov-pf svg { width: 18px; height: 18px; } .pb__ov-pf--l { left: 22px; } .pb__ov-pf--r { right: 22px; } .pb__ov-count { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); margin:0; font-size: 12px; color: var(--pb-mut); font-variant-numeric: tabular-nums; } /* ---- Galerie-Overlay auf schmalen Schirmen, 08.08.2026 ---- Die Masse oben sind fuer eine breite Karte gerechnet: 128px Streifen links, dazu inset 64px 88px auf dem Bild. Bei 375px Bildschirm blieben dem Bild damit rechnerisch 56px Breite, und die beiden 44px-Pfeile bei left/right 22px ueberlappten sich darin — das Bild war vollstaendig verdeckt. Unter 750px liegt der Streifen deshalb waagerecht unter dem Bild, das Bild bekommt den ganzen Rest, und die Pfeile sitzen am unteren Rand ausserhalb der Bildflaeche. */ @media screen and (max-width: 749.99px) { /* Die Karte braucht eine eigene Hoehe, sonst ist sie nur so hoch wie ihr Inhalt — und der Inhalt der Bildflaeche ist absolut positioniert, traegt also nichts bei. Gemessen am 08.08.2026: Ohne diese Zeile war die Karte 78px hoch und die Bildflaeche 357 mal 0. 48px sind derselbe Abzug, den .mq-ov__card in assets/base.css benutzt. */ .pb__ov-card { flex-direction: column-reverse; height: calc(100dvh - 48px); } /* min-height: 0 hebt die Vorgabe auf, dass ein Flex-Kind nicht unter seine Inhaltsgroesse schrumpft. Ohne sie teilt sich die Hoehe nicht auf. */ .pb__ov-main { flex: 1 1 auto; min-height: 0; } .pb__ov-strip { width: 100%; flex-direction: row; gap:8px; padding:var(--raum-1) var(--mq-rahmen-laengs); overflow-x: auto; overflow-y: hidden; box-shadow: inset 0 1px 0 var(--mq-linie); } .pb__ov-strip button { width: 56px; height: 56px; } /* Das Bild fuellt die Karte bis auf einen schmalen Rand. Oben bleibt Platz fuer Zaehler und Schliesskreuz, unten fuer die Pfeilreihe. */ .pb__ov-stage { inset: 48px 8px 60px; } /* Pfeile nebeneinander unter das Bild, statt links und rechts hinein. 56px sind die Anfassgroesse der Miniaturbilder daneben. */ .pb__ov-pf { top: auto; bottom: 6px; transform: none; width: 56px; height: 48px; border-radius: var(--mq-ecke-kasten, 12px); } .pb__ov-pf--l { left: 50%; margin-left:-60px; } .pb__ov-pf--r { right: 50%; margin-right:-60px; } .pb__ov-count { top: 16px; } } .pb__slide img { width: 100%; height: 100%; object-fit: cover; display: block; } .pb__ph { display: grid; place-items: center; color: var(--pb-mut); letter-spacing: normal; text-transform: uppercase; font-size: 12px; } /* ---- left column typography ---- From here on the sizes and gaps are the checkout's own steps, read out of its stylesheet on 2026-07-21. Its root font-size is 10px, so its rem values are written here as the px they actually render at: text 12 / 14 / 16 / 18 / 20 / 22 / 28px line 1.2 (tight) or 1.35 (base) spacing 2 / 4 / 6 / 8 / 10 / 14 / 16 / 20 / 24 / 32 / 40 / 48px Every value moved to its nearest step. Where one sat exactly between two steps it went to the smaller one — applied the same way everywhere, so the result stays predictable. */ .pb__eyebrow { font-family: var(--font-heading); font-size: 12px; letter-spacing: normal; text-transform: uppercase; font-weight: var(--mq-fett); color: var(--pb-uv-lite); margin:0 0 var(--raum-1); } .pb__title { font-family: var(--font-heading); font-size: 22px; line-height:26px; letter-spacing: normal; font-weight: var(--mq-fett); margin:0 0 20px; } .pb__h2 { font-family: var(--font-heading); font-size: 20px; line-height:24px; letter-spacing: normal; font-weight: var(--mq-fett); margin:0 0 20px; } .pb__rte { font-size: 16px; line-height:22px; color: var(--pb-mut); } .pb__rte > * + * { margin-top: 1em; } .pb__rte a { color: var(--pb-uv-lite); } .pb__block { margin-top: clamp(40px, 5vw, 48px); padding-top: clamp(24px, 3vw, 40px); border-top: 1px solid var(--pb-line); } .pb__reviews { display: grid; gap:var(--raum-0); } .pb__review { margin:0; padding:20px; background: var(--pb-surface); } .pb__stars { display: flex; gap:var(--raum-0); margin-bottom:var(--raum-1); } .pb__star { color: var(--pb-line); font-size: 14px; line-height: 1; } .pb__star.is-on { color: var(--pb-uv-lite); } .pb__review blockquote { margin:0 0 var(--raum-1); font-size: 16px; line-height:22px; } .pb__review figcaption { font-size: 12px; color: var(--pb-mut); } .pb__faq details { border-top: 1px solid var(--pb-line); } .pb__faq details:last-child { border-bottom: 1px solid var(--pb-line); } .pb__faq summary { cursor: pointer; padding:16px 0; font-weight: var(--mq-fett); font-size: 16px; list-style: none; display: flex; justify-content: space-between; gap:16px; } .pb__faq summary::-webkit-details-marker { display: none; } .pb__faq summary::after { content: "+"; color: var(--pb-uv-lite); font-weight: 400; } .pb__faq details[open] summary::after { content: "−"; } .pb__faq details > .pb__rte { padding: 0 0 16px; font-size: 14px; } /* ---- right column: buy panel ---- */ .pb__aside-name { font-family: var(--font-heading); font-size: 16px; font-weight: var(--mq-fett); letter-spacing: normal; margin:0 0 14px; } .pb__pricerow { display: flex; align-items: baseline; flex-wrap: wrap; gap:var(--raum-1); margin-bottom:var(--raum-1); } /* 22px statt 28px, 04.08.2026. Der Checkout kennt hoechstens 22px, und seine eigene Preiszeile steht sogar auf 18px (am selben Tag an der Bestelluebersicht gemessen: $399.00, 18px, Gewicht 700). 28px stand hier als einziger Wert ueber dem Deckel — .pb__title kam im selben Durchgang von 28 auf 22, diese Zeile wurde dabei uebersehen. */ .pb__price { font-family: var(--font-heading); font-size: 22px; font-weight: var(--mq-fett); letter-spacing: normal; font-variant-numeric: tabular-nums; line-height:26px; } .pb__was { color: var(--pb-mut); font-size: 16px; } .pb__was[hidden], .pb__off[hidden] { display: none; } .pb__off { font-size: 12px; font-weight: var(--mq-fett); letter-spacing: normal; padding:4px var(--raum-1); color: #fff; background: var(--pb-uv); } .pb__stock { display: flex; align-items: center; gap:8px; font-size: 14px; color: var(--pb-mut); margin:0 0 24px; } /* ---- Das Pixelraster der Kaufspalte — 17.09.2026 ---- Am 17.09.2026 beanstandet: Unter der ausgewaehlten Deal-Karte lag ein zweiter, sehr heller blauer Strich — "als waeren da 2 Rahmen". Gemessen: Die Karte endete bei 273.391 statt auf einem ganzen Pixel. Ihr 1px-Rand deckte damit 61 % der einen Bildschirmzeile und 39 % der naechsten ab, und der Browser zeichnet beide — eine kraeftige Linie und eine blasse darunter. Bei den grauen Karten passiert dasselbe, nur faellt Grau auf Weiss kaum auf; Blau auf Hellblau sofort. Die Ursache liegt nicht an der Karte. Die Zeilenhoehen dieser Spalte sind einheitenlose Verhaeltnisse aus dem Checkout (1.35 und 1.2). Daraus werden 16 x 1.35 = 21.6, 14 x 1.35 = 18.9, 22 x 1.2 = 26.4, 12 x 1.35 = 16.2 — lauter Bruchteile, die sich von der Produktueberschrift abwaerts aufaddieren. Die Spalte begann bei 151.672 statt bei 152. Hier stehen die Verhaeltnisse deshalb als ganze Pixel: dasselbe Verhaeltnis, auf den naechsten Pixel gerundet. Die Abweichung ist 0.1 bis 0.4px je Zeile und liegt damit unter der Toleranz des Standards (hoechstens 1 CSS-Pixel); der doppelte Strich dagegen ist sichtbar. Nach der Aenderung gemessen: Spalte beginnt bei 159.000, die Karten bei 206/288/371, jede Kante auf einem ganzen Pixel. Nur die Kaufspalte. Sie ist der Bereich mit umrandeten Flaechen; im Fliesstext der Seite traegt das Verhaeltnis nichts aus und bleibt. */ .pb__aside-in { line-height: 19px; } /* 14px x 1.35 = 18.9 */ /* Dasselbe fuer die Story-Spalte, 19.09.2026. Die uebernommenen Checkout-Stylesheets setzen 1.35 weit oben (.pb__info traegt schon 18.9px), und alles darunter erbt es. Fuer den Kaufkasten ist das seit dem 17.09. geloest — die Story-Spalte stand noch im Erbe: 175 von 291 Textknoten hatten krumme Zeilen, alle Vielfache von 1.35 (10.5, 13.5, 16.2, 18.9, 21.6, 24.3). Krumme Zeilenhoehen schieben jede Kante zwischen zwei Bildschirmzeilen; der Rand wird auf beide verteilt und wirkt unscharf. Deshalb steigt die Spalte hier aus dem Erbe aus — mit den Paaren aus dem Zielsatz, nicht mit einem einzelnen Wert: Elemente ohne eigene Klasse (Tabellenzellen, Beschreibungslisten, Aufklappzeilen) bekommen das Paar ihrer Groesse. */ .pb__story { line-height: var(--t-ui-zeile); } .pb__story table, .pb__story td, .pb__story th, .pb__story dt, .pb__story dd { font-size: var(--t-ui); line-height: var(--t-ui-zeile); } .pb__story summary, .pb__story b { line-height: var(--t-text-zeile); } .pb__story small { font-size: var(--t-fuss); line-height: var(--t-fuss-zeile); } .pb__story sup { line-height: 1; } .pb__aside-in .pb__aside-name, .pb__aside-in .pb__was { line-height: 22px; } /* 16px x 1.35 = 21.6 */ .pb__aside-in .pb__price { line-height: 26px; } /* 22px x 1.2 = 26.4 */ .pb__aside-in .pb__off, .pb__aside-in .pb__pay-secure, .pb__aside-in .pb__pay-secure * { line-height: 16px; } /* 12px x 1.35 = 16.2 */ /* 10.08.2026: Farben auf die Regler, Schein entfernt. Die Fuellung war bereits auf die gedeckten Checkout-Toene geaendert worden, der Schein stammte noch vom hellen Vorgaengergruen und -rot. Der Checkout kennt ausserhalb seiner Fokusringe keinen einzigen box-shadow. Die sichtbare Farbe bleibt gleich, weil die Regler dieselben Zahlen fuehren. */ .pb__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mq-erfolg); } .pb__dot--out { background: var(--mq-fehler); } /* Ueberschrift ueber einem Auswahlkasten — 1:1 die des Checkouts. Am 31.07.2026 an "Shipping method" gemessen: H2, 16px / 19,2px / 700, Farbe #000, KEINE Grossschreibung, KEIN Buchstabenabstand, und 14px Abstand hinunter zum Kasten. Die grossen Abschnitte dort ("Payment", "Contact", "Delivery") sind 20px — das ist die Ebene darueber, nicht unsere. Vorher stand hier 12px, gesperrt, grau, GROSSGESCHRIEBEN: ein Element, das der Checkout nirgends hat. */ /* KEIN eigenes margin hier — sonst gewinnt diese Regel gegen .pb__label und die 14px des Checkouts zwischen Ueberschrift und Kasten fallen weg. */ /* ================================================================ EIN KASTEN statt drei — 03.08.2026 Vorgabe: "Pick your Deal" ist der Deckel, darunter die Auswahl, dann "Extend Warranty", Boden ist die Menge mit + und minus — alles als eine Einheit im Aufbau des Checkouts. Der Kasten wird hier NICHT gebaut. Er entsteht aus den Original- Klassen des Checkouts an den Zeilen selbst (co-wahlzeile, co-kastenzeile) und den vier Klassen am umschliessenden Kasten. Alle Zeilen sind direkte Geschwister — nur dann greift die Regel des Checkouts, die zwei Nachbarn eine Linie teilen laesst. Der erste Versuch am 03.08.2026 gab jedem Block ein Stueck Rahmen, weil die Auswahl ausserhalb des Warenkorb-Formulars stand. Das war der Fehler: Wrapper dazwischen brechen die Nachbarschaft, und jede Zeile zog ihre eigene Linie — der doppelte Rand, der beanstandet wurde. Das Formular umschliesst jetzt den ganzen Kasten. ================================================================ */ /* ================================================================ Kastenzeile ohne Auswahlknopf — 14.08.2026 Die vier Zeilen des Kaufkastens, die KEINE Auswahl sind: der Deckel "Pick your Deal", weitere Optionsbeschriftungen, der Kopf der Gewaehrleistung und die Mengenzeile am Boden. Bis zum 14.08.2026 trugen sie die vollstaendige Huelle einer Auswahlzeile — acht verschachtelte Ebenen, darunter ein leeres div fuer den Knopf, der hier nie steht, und drei Huellen ohne jede eigene Regel. Sichtbare Folge: cursor: pointer auf einer Ueberschrift. Sie sah anklickbar aus und tat nichts. Diese Regeln bilden nach, was die acht Ebenen erzeugt haben. Alle Werte sind am 14.08.2026 an der laufenden Seite gemessen, nicht geschaetzt: Zeilenhoehe 49px einzeilig, 67px mit Untertitel Innenabstand 14px, links 24px Titel 14px/700, Zeilenhoehe 18.9px, schwarz Untertitel 14px/400 in #686B6E, direkt unter dem Titel rechte Spalte 14px vom Rand, senkrecht mittig Die 24px links sind kein neuer Wert: 14px Innenabstand plus die 10px, die im Raster als Abstand zur Knopfspalte standen. Ohne sie ruecken die Ueberschriften um 10px nach links und fluchten nicht mehr mit dem Auswahlkreis der Zeilen darunter. Rahmen, Rundung und die geteilten Trennlinien stehen NICHT hier. Sie kommen weiterhin aus den Checkout-Klassen am selben Element, weil sie ueber :first-child / :last-child mit den Auswahlzeilen zusammenwirken. ================================================================ */ .co-kz { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap:8px; padding:14px 14px 14px 24px; /* Die Zeile ist eine Ueberschrift, kein Bedienelement. Der Zeiger der Auswahlzeilen wird hier ausdruecklich zurueckgenommen — er kommt aus den geerbten Checkout-Klassen. */ cursor: default; } .co-kz__titel { display: block; font-size: 14px; font-weight: var(--mq-fett); line-height:19px; color: var(--pb-ink); } .co-kz__unter { margin:0; font-size: 14px; font-weight: 400; line-height:19px; color: var(--pb-mut); } .co-kz__rechts { display: flex; align-items: center; justify-content: flex-end; } /* Nicht kaufbare Auswahl: das Skript setzt is-soldout auf das Label der Zeile — heute ist das