/** Shopify CDN: Minification failed Line 173:2 Unexpected "{" Line 173:3 Expected identifier but found "%" Line 174:43 Expected identifier but found whitespace Line 179:3 Expected identifier but found "%" **/ /* START_SECTION:auchdas (INDEX:2) */ .auchdas__titel { margin: 0 0 var(--s6); } .auchdas__reihe { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); grid-template-columns: 1fr; } @media (min-width: 700px) { .auchdas__reihe { grid-template-columns: repeat(var(--spalten, 2), 1fr); } } .apkarte__link { display: block; color: inherit; text-decoration: none; } .apkarte__bildfeld { background: var(--grund-2); border-radius: var(--ecke-flaeche); overflow: hidden; aspect-ratio: 3 / 4; margin-bottom: var(--s3); } .auf-dunkel .apkarte__bildfeld { background: var(--grund-dunkel-2); } .apkarte__bild { width: 100%; height: 100%; object-fit: cover; display: block; } .apkarte__name { margin: 0 0 2px; } .apkarte__satz { margin: 0 0 var(--s2); color: var(--text-2); } .apkarte__preis { margin: 0 0 var(--s1); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2); } .apkarte__stueck { color: var(--text-2); } .apkarte__mehr { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--blau-link); } /* END_SECTION:auchdas */ /* START_SECTION:footer (INDEX:9) */ .fuss { margin-top: var(--s8); padding-block: var(--s6); background: var(--grund-2); border-top: 1px solid var(--linie); } .fuss__inhalt { display: grid; gap: var(--s6); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .fuss__marke-block { color: var(--text); } .fuss__logo svg { display: block; height: 22px; width: auto; color: currentColor; margin-bottom: var(--s3); } /* Der Claim ist die Signatur der Marke, nicht eine Zeile Kleingedrucktes. Deshalb in der Markenschrift und in Versalien — so, wie er auf dem Bund steht. */ .fuss__claim { margin: 0; font-family: var(--schrift-marke); font-weight: 800; font-stretch: 118%; text-transform: uppercase; letter-spacing: .04em; font-size: .8125rem; color: var(--text-2); } .fuss__kontakt { margin: var(--s4) 0 0; color: var(--text-2); } .fuss__kontakt a { color: var(--text-2); text-decoration: underline; } .fuss__kontakt a:hover { color: var(--text); } .fuss__titel { margin: 0 0 var(--s2); font-weight: 600; color: var(--text); } .fuss__liste { list-style: none; margin: 0; padding: 0; } .fuss__link { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--text-2); text-decoration: none; font-size: .875rem; } .fuss__link:hover { color: var(--text); text-decoration: underline; } .fuss__fehlt { color: #B3261E; font-weight: 600; font-size: .875rem; text-decoration: underline wavy; } .fuss__unten { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--linie); } /* Der Umschalter im Fuss bekommt einen sichtbaren Rand: ohne Flaeche sieht ein Auswahlfeld auf hellgrauem Grund aus wie Text, und genau dieses Bedienelement soll man finden, nicht suchen. 44 px hoch, wie jede andere Trefferflaeche. */ .sprachwahl--fuss { margin: 0 0 var(--s4); } .sprachwahl--fuss .sprachwahl__feld { min-height: var(--tap); padding: 0 var(--s3); border: 1px solid var(--linie-stark); border-radius: var(--ecke-knopf); background: var(--grund); color: var(--text); font-family: inherit; font-size: .875rem; cursor: pointer; } .fuss__schlichtung { margin: 0 0 var(--s3); max-width: 60ch; } .fuss__zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); } .fuss__zahlung { display: flex; flex-wrap: wrap; gap: var(--s2); } .fuss__zahlicon { height: 24px; width: auto; } /* END_SECTION:footer */ /* START_SECTION:header (INDEX:10) */ .nav__inhalt { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s4); } .nav__marke { display: inline-flex; align-items: center; min-height: var(--tap); text-decoration: none; color: var(--text); } .nav__logo { display: block; height: 18px; width: auto; } .nav__logo--svg svg { display: block; height: 18px; width: auto; color: currentColor; } .nav__wortmarke { font-family: var(--schrift-marke); font-weight: 800; font-stretch: 118%; letter-spacing: .02em; text-transform: uppercase; font-size: 1.0625rem; color: var(--text); } .nav__links { display: flex; justify-content: center; gap: var(--s4); } .nav__link { display: inline-flex; align-items: center; min-height: var(--tap); font-size: .875rem; color: var(--text); text-decoration: none; } .nav__link:hover { color: var(--text-2); text-decoration: none; } .nav__link.ist-aktiv { font-weight: 600; } .nav__rechts { display: flex; align-items: center; gap: var(--s3); justify-self: end; } /* Der Umschalter kommt aus snippets/sprachwahl.liquid und traegt dort die Klasse .sprachwahl. Unter 760 px verschwindet er hier und taucht in der Fusszeile auf -- nicht doppelt, sondern genau einmal sichtbar. */ .sprachwahl--kopf .sprachwahl__feld { min-height: var(--tap); border: 0; background: none; font-family: inherit; font-size: .875rem; color: var(--text); cursor: pointer; } /* Wo welcher sichtbar ist, steht in assets/apple-fundament.css -- eine Sichtbarkeitsregel, die ZWEI Sektionen betrifft, gehoert in keine der beiden. */ .nav__korb { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap); min-height: var(--tap); color: var(--text); } .nav__korb svg { width: 20px; height: 20px; } .nav__korbzahl { position: absolute; top: 4px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--blau-knopf); color: #fff; font-size: .625rem; line-height: 16px; text-align: center; font-weight: 600; } /* EINE ZEILE, AUCH AUF DEM HANDY. Vorher brach die Linkreihe in eine zweite Zeile um. Gemessen am 08.09.2026 auf 390x844: der Kopf nahm dadurch 110 px, also 13 % des Bildschirms, bevor ueberhaupt etwas vom Laden zu sehen war. Bei einem Ein-Produkt-Laden ist das der teuerste Platz der ganzen Seite. Kein Burger-Menue: drei Links hinter einem Knopf zu verstecken kostet einen Tipp und spart nichts. Stattdessen darf die Reihe seitlich rollen, falls sie nicht passt -- sichtbar bleibt immer der Anfang. scrollbar-width: none, weil eine Rollleiste ueber 3 Links wie ein Fehler aussieht; gerollt wird mit dem Finger, nicht mit der Leiste. */ @media (max-width: 760px) { .nav__inhalt { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s2); } .nav__links { justify-content: flex-start; gap: var(--s3); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -ms-overflow-style: none; /* s1 statt s2: nach dem Umzug des Sprachumschalters in die Fusszeile fehlten noch genau 2 px (203 sichtbar, 205 gebraucht). Die zwei seitlichen Polster geben sie her, ohne dass die Reihe enger wirkt. */ margin-inline: var(--s1); } .nav__links::-webkit-scrollbar { display: none; } .nav__link { font-size: .8125rem; white-space: nowrap; } .nav__logo--svg svg { height: 17px; } } /* Unterhalb von 430 px: Monogramm statt Wortmarke. */ .nav__logo--zeichen { display: none; } @media (max-width: 430px) { .nav__logo--wort { display: none; } .nav__logo--zeichen { display: block; } .nav__logo--zeichen svg { height: 20px; } } /* END_SECTION:header */ /* START_SECTION:material (INDEX:13) */ .material__raster { display: grid; gap: var(--s6); } @media (min-width: 900px) { .material__raster { grid-template-columns: 1fr 1fr; gap: var(--s8); align-items: center; } } .material__titel { margin: 0 0 var(--s4); max-width: 20ch; } .material__absatz { margin: 0 0 var(--s3); max-width: 54ch; color: var(--text-2); } .material__nachweis { margin: var(--s4) 0 0; padding-top: var(--s3); border-top: 1px solid var(--linie); max-width: 54ch; } .material__bild { margin: 0; border-radius: var(--ecke-flaeche); overflow: hidden; } {%- comment -%} Das Makrobild ist sehr breit und flach. Ohne feste Proportion steht es oben in einer Spalte, die so hoch ist wie der Text daneben -- darunter bleibt ein schwarzes Loch von mehreren hundert Pixeln (gemessen 11.09.). Mit Proportion und `cover` fuellt es die Spalte, und der Ausschnitt zeigt ohnehin genau das, worum es geht: die Naht. {%- endcomment -%} .material__bild img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; } @media (max-width: 899px) { .material__bild img { aspect-ratio: 16 / 9; } } .material__bild figcaption { margin-top: var(--s3); color: var(--text-2); } /* END_SECTION:material */ /* START_SECTION:merkmale (INDEX:14) */ .merkmale__titel { margin: 0 0 var(--s6); max-width: 22ch; } .merkmale__raster { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s6) var(--s5); grid-template-columns: 1fr; } @media (min-width: 700px) { .merkmale__raster { grid-template-columns: 1fr 1fr; } } @media (min-width: 1000px) { .merkmale__raster { grid-template-columns: repeat(3, 1fr); } } .merkmal__symbol { display: block; margin-bottom: var(--s3); color: var(--blau-knopf); } .merkmal__titel { margin: 0 0 var(--s2); } .merkmal__text { margin: 0; color: var(--text-2); max-width: 40ch; } /* END_SECTION:merkmale */ /* START_SECTION:produkt (INDEX:17) */ /* Luft zwischen Finder und Tabelle: die Ueberschrift der Tabelle klebte direkt an der Unterkante des grauen Finderkastens. */ .pdp__tabelle { margin-top: var(--s5); } /* ---- Zustand: ausverkauft / Benachrichtigung --------------------------- Grundsatz aus Apples tab-bars.md: nicht abschalten, sondern erklaeren. Deshalb bleibt eine ausverkaufte Groesse anklickbar und traegt eine Beschriftung -- sie wird nur leiser, nicht tot. */ .wahl__karte--leer .wahl__titel { color: var(--text-2); } .wahl__leer { display: block; margin-top: 2px; color: var(--text-2); letter-spacing: .01em; } /* Ein Farbpunkt ohne hinterlegten Wert wird SICHTBAR als Luecke markiert. Vorher rutschte er als unsichtbarer Kreis durch -- ein Fehler, der wie Absicht aussah. Schraffur statt Fuellung: sofort als "fehlt" lesbar. */ .farbwahl__punkt--fehlt { background-image: repeating-linear-gradient(45deg, #B3261E 0 3px, transparent 3px 6px); outline: 1px solid #B3261E; } /* Der Meldeblock ist ohne Bestand die einzige Handlung auf der Seite -- also darf er nicht wie eine Randnotiz aussehen. Rand statt nur Fuellfarbe, damit er sich als Einheit liest. */ .pdp__melden { margin-top: var(--s4); padding: var(--s4); background: var(--grund-2); border-radius: 16px; border: 1px solid var(--linie); } .melden__titel { margin: 0 0 2px; } .melden__text { margin: 0 0 var(--s3); color: var(--text-2); max-width: 42ch; } .melden__zeile { display: flex; flex-wrap: wrap; gap: var(--s2); } .melden__eingabe { flex: 1 1 12rem; min-height: var(--tap); padding: 0 14px; font: inherit; font-size: 1rem; /* 16px: iOS zoomt sonst rein */ color: var(--text); background: var(--grund); border: 1px solid var(--linie-stark); border-radius: 12px; } .melden__eingabe::placeholder { color: var(--text-2); } .melden__knopf { flex: 0 0 auto; } .melden__einwilligung { display: flex; gap: var(--s2); align-items: flex-start; margin-top: var(--s3); cursor: pointer; } .melden__einwilligung input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--blau-knopf); flex: 0 0 auto; } .melden__danke { margin: 0; font-weight: 600; display: flex; gap: var(--s2); align-items: center; } .melden__fehler { margin: 0 0 var(--s2); color: #B3261E; font-weight: 600; } @media (max-width: 420px) { .melden__knopf { flex: 1 1 100%; } } .pdp { padding-block: var(--s6); } /* Apples Verhaeltnis: Galerie breit, Kaufspalte schmal, eine Spalte Luft dazwischen. Auf dem Handy kommt die Kaufspalte zuerst. */ .pdp__raster { display: grid; gap: var(--s6); } @media (min-width: 900px) { .pdp__raster { /* 6fr statt 7fr fuer die Galerie. Das Hauptbild ist hochkant 3:4 und wird ausserdem auf die Fensterhoehe gedeckelt, damit es beim Kleben ganz sichtbar bleibt -- dadurch war es 609 px breit in einer 672 px breiten Spalte, und zwischen Bild und Kaufspalte standen 183 px Luft statt der vorgesehenen 96. Mit 6fr passt die Spalte zum Bild statt umgekehrt. */ grid-template-columns: minmax(0, 6fr) 1fr minmax(360px, 4fr); align-items: start; } /* DIE GALERIE KLEBT, NICHT DIE KAUFSPALTE. Gefunden am Schirmbild vom 08.09.2026: vorher klebte die Kaufspalte. Die ist aber die LAENGERE von beiden -- Titel, Wahl, Knopf, Benachrichtigung, vier Aufklapper. Eine Spalte, die hoeher ist als das Fenster, kann gar nicht kleben; sie scrollt einfach mit. Die Galerie dagegen war nach einem Drittel zu Ende und liess rechts ein leeres Feld ueber die halbe Seite stehen. Jetzt bleibt das Produkt im Bild, waehrend man Beschreibung, Datenblatt und Groessentabelle liest -- also genau dann, wenn man wissen will, wovon die Rede ist. */ /* GALERIE LINKS, KAUFSPALTE RECHTS — nachgetragen am 09.09.2026. Vorher lag die Kaufspalte links und die Galerie rechts. Das ist die Umkehrung von dem, was apple.com/shop macht und was in der Planung stand. In einer von links nach rechts gelesenen Sprache verkauft das Bild und entscheidet die Spalte daneben; andersherum steht die Entscheidung vor dem Grund. DIE DOM-REIHENFOLGE BLEIBT ABSICHTLICH UMGEKEHRT (Kaufspalte zuerst). Zwei Gruende, beide besser als eine gleiche Reihenfolge: auf dem Handy steht die Kaufspalte damit ohne Scrollen oben, und Vorlese-Software liest Name, Preis und Auswahl VOR der Bilderreihe -- also das, wonach jemand sucht, statt zuerst durch Vorschaubilder zu laufen. Die Tabulator-Reihenfolge folgt derselben Logik. ZEILE MIT ANGEBEN, NICHT NUR SPALTE. Ohne `grid-row: 1` schob das Raster die Galerie in eine ZWEITE Zeile: die Kaufspalte steht im Quelltext zuerst und belegt Spalte 3, und die Standardsuche ("sparse") geht nie rueckwaerts in dieselbe Zeile. Gemessen kurz nach dem Tausch: Kaufspalte bei y 96, Galerie bei y 2428 -- der Bildbereich war schlicht leer, obwohl das Bild im Quelltext stand und der Browser es als sichtbar meldete. */ .pdp__kauf { grid-column: 3; grid-row: 1; } .pdp__galerie { grid-column: 1; grid-row: 1; position: sticky; top: 72px; max-height: calc(100vh - 88px); overflow: hidden; } } .pdp__titel { margin: 0 0 var(--s2); } .pdp__kurz { margin: 0 0 var(--s3); color: var(--text-2); } .pdp__preis { margin: 0 0 var(--s1); } .pdp__ersparnis { margin: 0 0 var(--s4); color: var(--text-2); } .pdp__wahlgruppe { border: 0; padding: 0; margin: 0 0 var(--s4); } /* Label und Wert nebeneinander, NICHT auseinandergezogen. Vorher stand "Farbe:" links und "Schwarz" ganz rechts am Spaltenrand -- dazwischen 200 px Nichts, und die beiden lasen sich wie zwei verschiedene Angaben. Der Groessenlink darf dagegen nach rechts, er gehoert zur Zeile, aber nicht zum Wert. */ .pdp__wahllabel { padding: 0; margin-bottom: var(--s2); display: flex; align-items: baseline; gap: 6px; width: 100%; color: var(--text-2); } .pdp__groessenlink { margin-left: auto; } .pdp__wahlwert { color: var(--text); font-weight: 600; } .pdp__groessenlink { font-size: .875rem; } .pdp__farben { display: flex; flex-wrap: wrap; gap: var(--s1); } .pdp__groessen { display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); } /* Auf dem Handy feste vier Spalten: vier Groessen gehoeren in EINE Reihe, sonst sucht man XL unter S. Mit minmax(0,1fr) darf eine Kachel auch schmaler werden als ihr laengster Inhalt -- sonst erzwingt schon ein langes Wort den Umbruch. */ @media (max-width: 480px) { .pdp__groessen { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* Sobald "ausverkauft" mitlaeuft, braucht eine Kachel rund 100 px -- vier davon passen auf 390 px nicht (gemessen: der Text stand ueber die Kachelkante hinaus). Dann lieber zwei Reihen zu zwei. */ .pdp__groessen--marken { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .pdp__wahlhinweis { margin: var(--s2) 0 0; color: #B3261E; font-size: .875rem; font-weight: 600; } .wahl-fehlt .wahl__karte { border-color: #B3261E; } .pdp__kaufen { margin-top: var(--s4); } /* Farbwahl fuer Bundles */ .bfarben { border: 0; padding: 0; margin: var(--s4) 0 0; } .bfarben__titel { padding: 0; margin-bottom: var(--s2); font-weight: 600; } .bfarben__zeile { display: grid; grid-template-columns: 7rem 1fr; align-items: center; gap: var(--s3); margin-bottom: var(--s2); } .bfarben__label { color: var(--text-2); font-size: .875rem; } .bfarben__hinweis { margin: var(--s2) 0 0; color: var(--text-2); } .bfarben__alarm { color: #B3261E; font-weight: 600; text-decoration: underline wavy; } @media (max-width: 480px) { .bfarben__zeile { grid-template-columns: 1fr; gap: var(--s1); } } /* EU-Gewaehrleistungshinweis. Die Farben sind VORGESCHRIEBEN (DVO (EU) 2025/1960): Blau #003399, Gelb #FFED00. Sie stehen bewusst nicht als Marken-Token da -- sie gehoeren nicht uns und duerfen sich nicht mit der Palette aendern. Das Zeichen bricht Stealth Monochrome auf; das ist so gewollt und nicht verhandelbar. */ .gewaehr { margin-top: var(--s4); } .gewaehr__bild { display: block; width: 100%; max-width: 320px; height: auto; } .gewaehr--fehlt { padding: var(--s3); border-radius: var(--ecke-karte); background: #FFED00; color: #000; font-size: .875rem; border: 2px solid #003399; } .gewaehr--fehlt code { font-size: .8125rem; } .pdp__zusagen { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: 10px; color: var(--text-2); } .pdp__zusagen li { display: flex; align-items: center; gap: 10px; } .pdp__zusagen .symbol { color: var(--text); opacity: .55; } .pdp__falten { margin-top: var(--s6); border-top: 1px solid var(--linie); } .falte { border-bottom: 1px solid var(--linie); } .falte__kopf { min-height: var(--tap); display: flex; align-items: center; cursor: pointer; font-weight: 600; list-style: none; } .falte__kopf::-webkit-details-marker { display: none; } .falte__kopf::after { content: "+"; margin-left: auto; font-weight: 400; color: var(--text-2); transition: transform var(--zeit-kurz) var(--kurve); } .falte[open] .falte__kopf::after { content: "–"; } .falte__kopf:focus-visible { outline: 2px solid var(--blau-knopf); outline-offset: -2px; } .falte__inhalt { padding-bottom: var(--s3); color: var(--text-2); } .falte__liste { margin: 0; padding-left: 1.2em; display: grid; gap: var(--s1); } .pdp__hauptbild { position: relative; cursor: zoom-in; border-radius: var(--ecke-flaeche); overflow: hidden; background: var(--grund-2); } .pdp__bild { display: block; width: 100%; height: auto; } .pdp__zoomzeichen { position: absolute; right: 12px; bottom: 12px; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--flaeche-milch); color: var(--text); backdrop-filter: blur(8px); pointer-events: none; transition: transform var(--zeit-kurz, 240ms) var(--kurve, ease); } .pdp__hauptbild:hover .pdp__zoomzeichen { transform: scale(1.08); } html.reduced-motion .pdp__zoomzeichen { transition: none; } .pdp__hauptbild:focus-visible { outline: 2px solid var(--blau-knopf); outline-offset: 3px; } /* Bildstreifen unter dem Hauptbild, mittig — wie apple.com. Aktiv = 2px Unterstrich, kein Kasten, kein Ring. */ /* Bildstreifen: EIN Raster mit fester Kachelform. Vorher eine umbrechende Reihe mit hoehenvariablen Bildern -- neun Medien in verschiedenen Seitenverhaeltnissen ergaben eine zweite, ausgefranste Zeile mit unterschiedlich grossen Kacheln. Auf dem Schirmbild war das der unruhigste Punkt der ganzen Seite. 3:4 fuer alle, Ausschnitt statt Verzerrung. */ .pdp__streifen { display: grid; gap: var(--s2); margin-top: var(--s3); grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); } .pdp__daumen { aspect-ratio: 3 / 4; padding: 0; background: none; border: 1px solid transparent; border-radius: 8px; overflow: hidden; cursor: pointer; transition: border-color var(--zeit-sofort) var(--kurve); } .pdp__daumen:hover { border-color: var(--linie-stark); } .pdp__daumen.ist-aktiv { border-color: var(--text); } .pdp__daumen:focus-visible { outline: 2px solid var(--blau-knopf); outline-offset: 2px; } /* SPEZIFITAET BEACHTEN. image.liquid bringt `.image > img { width:100%; height:auto }` mit -- Spezifitaet (0,1,1). Ein `.pdp__daumen img` hat die GLEICHE (0,1,1), dann entscheidet die Reihenfolge im gebuendelten Stylesheet, und die faellt gegen uns aus. Gemessen am 08.09.2026: die Knoepfe waren alle 61x82 px, die Bilder darin aber 79, 40, 79, 33 px hoch -- object-fit kann nichts fuellen, was keine Hoehe hat. Deshalb hier (0,2,1) statt (0,1,1). Kein !important: das wuerde den naechsten, der es anders braucht, ohne Not aussperren. */ .pdp__daumen > .image, .pdp__daumen > .pdp__daumenbild { display: block; width: 100%; height: 100%; } .pdp__daumen .image > img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; } /* Klebende Kaufleiste */ .kaufleiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--flaeche-milch-stark); border-top: 1px solid var(--linie); padding-bottom: env(safe-area-inset-bottom); } @supports (backdrop-filter: blur(20px)) { .kaufleiste { backdrop-filter: saturate(180%) blur(20px); } } .kaufleiste__inhalt { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding-block: var(--s2); } .kaufleiste__text { display: flex; flex-direction: column; min-width: 0; } .kaufleiste__titel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kaufleiste__preis { color: var(--text-2); } .kaufleiste__knopf { flex: 0 1 auto; min-width: 0; } /* Auf dem Handy nur Preis und Handlung. Auf 390 px brach "MAX ONE" in zwei Zeilen um und die Leiste wurde doppelt so hoch -- fuer eine Angabe, die man auf der Produktseite ohnehin weiss. Apple macht es in seiner eigenen Kaufleiste genauso: dort steht der Preis und der Knopf, nicht der Produktname. */ @media (max-width: 520px) { .kaufleiste__titel { display: none; } .kaufleiste__preis { font-size: 1.0625rem; font-weight: 600; color: var(--text); } .kaufleiste__knopf { flex: 1 1 auto; } } /* ========================================================================== AUF DEM HANDY KOMMT DAS BILD ZUERST. Gemessen am 11.09.2026, 390 px: die Galerie begann bei 2.203 px -- zweieinhalb Bildschirme weit unten. Die Warteliste fragte schon bei 573 px, also 1.630 px BEVOR der Kaeufer das Produkt je gesehen hatte. Bei Waesche, die man nicht anprobieren kann, ist das Bild das einzige Argument; ohne es ist die Seite ein Formular. Warum das so war und warum die Begruendung fuer Desktop trotzdem stimmt: die Kaufspalte steht im Quelltext ZUERST, damit Vorlese-Software Name, Preis und Auswahl vor der Bilderreihe liest. Das bleibt so -- die DOM-Reihenfolge wird nicht angefasst. Nur die ANZEIGE dreht sich auf schmalen Schirmen um, ueber die Grid-Zeile. DIESER BLOCK STEHT AM ENDE DES STILBLOCKS, und das ist kein Zufall: `.pdp__streifen { display: grid }` steht weiter oben in derselben Datei und hat dieselbe Spezifitaet. Weiter vorne verlor die Regel hier gegen sie, und die Vorschaureihe blieb ein dreizeiliges Raster -- die Messung zeigte unveraendert 721 px. Dieselbe Falle wie beim Kopf und beim Hero-Textlink: nicht der Wert war falsch, sondern welche Regel gewinnt. Und das Hauptbild wird gedeckelt: 58 % der Fensterhoehe. Ohne Deckel fuellt es bei 844 px den ganzen Schirm, und Name und Preis stehen wieder unter der Falz -- nur diesmal das andere Argument. Mit Deckel reisst die naechste Zeile an, und das ist die Einladung zum Weiterscrollen. ========================================================================== */ @media (max-width: 899px) { /* min-width: 0 ist hier PFLICHT, nicht Feinschliff. Ein Rasterelement schrumpft standardmaessig nicht unter die Breite seines Inhalts (min-width: auto). Die wischbare Vorschaureihe darunter ist 11 x 58 px plus Abstaende = rund 718 px breit -- damit zog sie die ganze Spalte auf 894 px, auf einem 390-px-Schirm. Gemessen: 160 Befunde Ueberlauf, ausgeloest von genau dieser einen fehlenden Zeile. `overflow-x: auto` allein reicht nicht: es begrenzt die Anzeige, nicht die Breitenberechnung des Elternelements. */ .pdp__galerie { grid-row: 1; min-width: 0; } .pdp__kauf { grid-row: 2; min-width: 0; } .pdp__hauptbild { max-height: 58svh; } .pdp__hauptbild img { width: 100%; height: 100%; object-fit: contain; } /* Die Vorschaubilder als EINE wischbare Reihe, nicht als Raster. Gemessen: 11 Bilder in einem Raster mit 58-px-Spalten ergeben bei 390 px drei Zeilen -- zusammen 280 px. Damit landeten Name und Preis bei 935 px, also wieder unter der Falz, nur diesmal wegen der Vorschau statt wegen des Hauptbilds. Eine Reihe kostet 58 px und zeigt trotzdem, dass es mehr gibt: der angeschnittene Rand rechts IST hier die Einladung -- anders als bei drei Produkten, wo genau das ein Fehler war. */ .pdp__streifen { display: flex; overflow-x: auto; gap: var(--s2); scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; } .pdp__streifen::-webkit-scrollbar { display: none; } .pdp__streifen > * { flex: 0 0 58px; scroll-snap-align: start; } } /* END_SECTION:produkt */ /* START_SECTION:warum (INDEX:24) */ .warum__titel { margin: 0 0 var(--s7); max-width: 18ch; } .warum__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s7); } .wgrund { display: grid; gap: var(--s3); align-items: start; } @media (min-width: 760px) { .wgrund { grid-template-columns: 5rem 1fr; gap: var(--s5); } .warum__liste { gap: var(--s6); } } .wgrund__zahl { font: 700 1.25rem/1 var(--schrift-marke); letter-spacing: .1em; color: var(--text-2); padding-top: .35em; } .wgrund__titel { margin: 0 0 var(--s2); } .wgrund__satz { margin: 0; color: var(--text-2); max-width: 56ch; } .auf-dunkel .wgrund__satz, .auf-dunkel .wgrund__zahl { color: var(--text-2-invers); } /* END_SECTION:warum */ /* START_SNIPPET:bildzoom (INDEX:29) */ .zoom { border: 0; padding: 0; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100dvh; background: var(--grund); color: var(--text); } .zoom::backdrop { background: rgba(0,0,0,.86); } .zoom__buehne { width: 100%; height: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: zoom-in; } .zoom__buehne.ist-gross { cursor: zoom-out; overflow: auto; } .zoom__bild { max-width: 100%; max-height: 100dvh; object-fit: contain; transition: transform var(--zeit-mittel) var(--kurve-aus); } .ist-gross .zoom__bild { transform: scale(2.4); max-width: none; max-height: none; } html.reduced-motion .zoom__bild { transition: none; } .zoom__zu { position: absolute; top: var(--s3); right: var(--s3); z-index: 2; width: var(--tap); height: var(--tap); display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; cursor: pointer; background: var(--flaeche-milch); color: var(--text); font-size: 1rem; } .zoom__zu:focus-visible { outline: 2px solid var(--blau-knopf); outline-offset: 2px; } .zoom__hinweis { position: absolute; left: 50%; bottom: var(--s3); transform: translateX(-50%); margin: 0; padding: 8px 16px; border-radius: var(--ecke-pille); background: var(--flaeche-milch); pointer-events: none; } /* END_SNIPPET:bildzoom */ /* START_SNIPPET:datenblatt (INDEX:32) */ .datenblatt__liste { margin: 0; } /* Zwischenueberschrift: sagt, WOHER die Zeilen darunter kommen. Ohne sie stehen Vorgabe und Messung gleichrangig nebeneinander, und der Leser kann nicht unterscheiden, was schon geprueft ist. */ .db__gruppe { margin: 0 0 var(--s2); font-weight: 600; color: var(--text); letter-spacing: .04em; text-transform: uppercase; } .db__gruppe--zweite { margin-top: var(--s5); } .db__zeile { display: grid; grid-template-columns: minmax(9rem, 38%) 1fr; gap: var(--s3); padding-block: 10px; border-bottom: 1px solid var(--linie); } .db__zeile:last-child { border-bottom: 0; } .db__zeile dt { margin: 0; color: var(--text-2); font-size: .875rem; } .db__zeile dd { margin: 0; font-variant-numeric: tabular-nums; } /* Kein Rot: der offene Zustand ist Absicht, kein Fehler. */ .db__offen { color: var(--text-2); font-style: italic; } .auf-dunkel .db__zeile { border-color: var(--linie-invers); } .auf-dunkel .db__zeile dt, .auf-dunkel .db__offen { color: var(--text-2-invers); } .datenblatt__fuss { margin: var(--s3) 0 0; max-width: 52ch; } /* Auf schmalen Schirmen untereinander: eine 38-%-Spalte fuer "Herkunft der Fertigung" bricht sonst in vier Zeilen und die Tabelle franst aus. */ @media (max-width: 520px) { .db__zeile { grid-template-columns: 1fr; gap: 2px; } .db__zeile dt { font-size: .8125rem; } } /* END_SNIPPET:datenblatt */ /* START_SNIPPET:groessenfinder (INDEX:35) */ .gfinder { padding: var(--s4); border: 1px solid var(--linie); border-radius: var(--ecke-flaeche); background: var(--grund-2); } .gfinder__titel { margin: 0 0 var(--s1); } .gfinder__lead { margin: 0 0 var(--s4); } .gfinder__wege { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3); } .gfinder__weg { flex: 1 1 140px; } .gfinder__oder { padding-bottom: 14px; color: var(--text-2); } .gfinder__label { display: block; margin-bottom: var(--s2); font-size: .875rem; color: var(--text-2); } .gfinder__eingabe { box-sizing: border-box; width: 100%; min-height: var(--tap); padding: 10px 14px; font-family: inherit; font-size: 1.0625rem; border: 1px solid var(--rahmen-feld); border-radius: var(--ecke-karte); background: var(--grund); color: var(--text); } .gfinder__eingabe:focus-visible { outline: 2px solid var(--blau-knopf); outline-offset: 1px; border-color: var(--blau-knopf); } .gfinder__antwort { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--linie); } .gfinder__ergebnis { margin: 0 0 var(--s2); display: flex; align-items: baseline; gap: var(--s2); } .gfinder__label-klein { font-size: .875rem; color: var(--text-2); } .gfinder__groesse { font-size: 2rem; font-weight: 600; line-height: 1; } .gfinder__grund { margin: 0 0 var(--s3); } .gfinder__uebernehmen { min-height: var(--tap); } .gfinder__messen { margin-top: var(--s3); } .gfinder__messen summary { min-height: var(--tap); display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--blau-link); list-style: none; } .gfinder__messen summary::-webkit-details-marker { display: none; } .gfinder__winkel { width: 7px; height: 7px; flex: 0 0 auto; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg) translate(-1px, -1px); transition: transform 180ms var(--kurve, ease); } .gfinder__messen[open] .gfinder__winkel { transform: rotate(45deg) translate(-2px, -2px); } html.reduced-motion .gfinder__winkel { transition: none; } .gfinder__messen summary:focus-visible { outline: 2px solid var(--blau-knopf); outline-offset: 2px; } /* END_SNIPPET:groessenfinder */ /* START_SNIPPET:groessentabelle (INDEX:36) */ .gtab__regel { margin: 0 0 var(--s3); color: var(--text); font-weight: 600; } .gtab__tabelle { width: 100%; border-collapse: collapse; font-size: 1rem; } .gtab__tabelle th, .gtab__tabelle td { text-align: left; padding: 12px 8px; border-bottom: 1px solid var(--linie); } .gtab__tabelle thead th { font-weight: 600; color: var(--text-2); font-size: .8125rem; text-transform: none; } .gtab__tabelle tbody th { font-weight: 600; width: 4em; } .gtab__tabelle tbody tr:last-child th, .gtab__tabelle tbody tr:last-child td { border-bottom: 0; } .gtab__hinweis { margin: var(--s3) 0 0; } .gtab__fehlt { color: #B3261E; font-weight: 600; text-decoration: underline wavy; } .gtab__einheit { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); } .gtab__einheit-label { margin-right: var(--s1); } .gtab__schalter { min-width: var(--tap); min-height: var(--tap); padding: 0 14px; cursor: pointer; border: 1px solid var(--rahmen-feld); border-radius: var(--ecke-control, 8px); background: var(--grund); color: var(--text-2); font-family: inherit; font-size: .875rem; transition: border-color var(--zeit-sofort) var(--kurve); } .gtab__schalter.ist-an { border-color: var(--blau-knopf); border-width: 2px; color: var(--text); font-weight: 600; } .gtab__schalter:focus-visible { outline: 2px solid var(--blau-knopf); outline-offset: 2px; } .gtab__modell { margin: var(--s3) 0 0; padding-top: var(--s3); border-top: 1px solid var(--linie); } /* END_SNIPPET:groessentabelle */ /* START_SNIPPET:image (INDEX:37) */ .image { display: block; position: relative; overflow: hidden; width: 100%; height: auto; } .image > img { width: 100%; height: auto; } /* END_SNIPPET:image */ /* START_SNIPPET:pflicht-produktangaben (INDEX:43) */ .pflicht { margin-top: var(--s3); display: grid; gap: var(--s2); } .pflicht__preis a { color: var(--text-2); text-decoration: underline; } .pflicht__preis a:hover { color: var(--blau-link); } /* Fehlende Pflichtangabe wird SICHTBAR, nicht still uebergangen. Rot allein reicht nicht -- Apple, accessibility.md: "Convey information with more than color alone." Deshalb zusaetzlich das Warnzeichen im Text. */ .pflicht__fehlt { color: #B3261E; font-weight: 600; text-decoration: underline wavy; } .pflicht__hersteller summary { min-height: var(--tap); display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--text-2); list-style: none; } .pflicht__hersteller summary::-webkit-details-marker { display: none; } /* Eigener Pfeil statt des Browserdreiecks: das Dreieck sieht auf jedem System anders aus und auf keinem nach dieser Marke. Ein Winkel aus zwei Strichen dagegen ueberall gleich -- und er DREHT sich, damit der Zustand sichtbar ist und nicht geraten werden muss. */ .pflicht__pfeil { width: 7px; height: 7px; flex: 0 0 auto; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg) translate(-1px, -1px); transition: transform var(--dauer-tipp, 180ms) var(--kurve-tipp, ease); } .pflicht__hersteller[open] .pflicht__pfeil { transform: rotate(45deg) translate(-2px, -2px); } html.reduced-motion .pflicht__pfeil { transition: none; } .pflicht__hersteller summary:focus-visible { outline: 2px solid var(--blau-knopf); outline-offset: 2px; } .pflicht__hersteller-text { padding-block: var(--s2); } /* END_SNIPPET:pflicht-produktangaben */ /* START_SNIPPET:symbol (INDEX:47) */ .symbol { display: block; flex: 0 0 auto; color: currentColor; } /* Optisch ausgleichen: Strichsymbole wirken neben Text zu hoch angesetzt. */ .symbol--inline { display: inline-block; vertical-align: -0.18em; } /* END_SNIPPET:symbol */