/** Shopify CDN: Minification failed Line 505:2 Unexpected "{" Line 505:3 Expected identifier but found "%" Line 506:43 Expected identifier but found whitespace Line 511:3 Expected identifier but found "%" **/ /* SHOPIFY_STYLESHEETS_VERSION: 1.0 */ /* CSS from section stylesheet tags */ /* START_SECTION:404 (INDEX:0) */ .vfehlt__inhalt { padding-block: var(--s8); } /* Die Zahl gross und leise: sie sagt sofort, was los ist, ohne die eigentliche Aussage zu uebertoenen. aria-hidden, weil die Ueberschrift daneben dasselbe in Worten sagt -- eine vorgelesene "404" waere Laerm. */ .vfehlt__code { margin: 0 0 var(--s2); font-family: var(--schrift-marke); font-weight: 800; font-stretch: 118%; font-size: clamp(3rem, 12vw, 6rem); line-height: .9; color: var(--linie); letter-spacing: -.02em; } .vfehlt__titel { margin: 0 0 var(--s3); } .vfehlt__text { margin: 0 0 var(--s5); color: var(--text-2); max-width: 44ch; } .vfehlt__wege { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); } /* END_SECTION:404 */ /* 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:cart (INDEX:4) */ .wkz__angaben { list-style: none; margin: var(--s1) 0 0; padding: 0; display: grid; gap: 2px; color: var(--text-2); } .wkz__angabe-name { color: var(--text-2); } /* Leerzustand: eng gesetzt, nicht in der Seitenmitte verloren. Vorher stand die Ueberschrift oben links und der Inhalt einen halben Bildschirm darunter mittig -- zwei Ausrichtungen auf einer fast leeren Seite. Jetzt eine. */ .wk__leer { max-width: 30rem; margin: var(--s5) 0 var(--s8); } .wk__leer-text { margin: 0 0 var(--s4); color: var(--text-2); } .wk__vorschlag { display: flex; align-items: center; gap: var(--s4); padding: var(--s3); text-decoration: none; color: var(--text); border: 1px solid var(--linie); border-radius: var(--ecke-flaeche); transition: border-color var(--zeit-kurz, 240ms) var(--kurve, ease); } .wk__vorschlag:hover { border-color: var(--linie-stark); text-decoration: none; } .wk__vorschlagbild { width: 92px; height: 122px; object-fit: cover; border-radius: 10px; flex: 0 0 auto; } .wk__vorschlag .image { flex: 0 0 auto; width: 92px; } .wk__vorschlagtext { display: grid; gap: 2px; flex: 1 1 auto; } .wk__vorschlagsatz { color: var(--text-2); } .wk__vorschlagpreis { margin-top: 4px; } .wk__vorschlagpfeil { color: var(--text-2); flex: 0 0 auto; } .wk__titel { margin: 0 0 var(--s6); } .wk__raster { display: grid; gap: var(--s6); align-items: start; } @media (min-width: 900px) { .wk__raster { grid-template-columns: 1fr 340px; gap: var(--s7); } .wk__summe { position: sticky; top: 72px; } } .wk__zeilen { list-style: none; margin: 0; padding: 0; } .wkz { display: grid; grid-template-columns: 88px 1fr auto; gap: var(--s3); padding-block: var(--s4); border-bottom: 1px solid var(--linie); align-items: start; } .wkz__bild { display: block; border-radius: var(--ecke-karte); overflow: hidden; background: var(--grund-2); } .wkz__bild img { display: block; width: 100%; height: auto; } .wkz__name { display: block; color: var(--text); text-decoration: none; } .wkz__name:hover { text-decoration: underline; } .wkz__variante { margin: 2px 0 0; } .wkz__preis { margin: 0; white-space: nowrap; } .wkz__steuerung { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s3); flex-wrap: wrap; } .wkz__menge { display: inline-flex; align-items: center; border: 1px solid var(--rahmen-feld); border-radius: var(--ecke-karte); } .wkz__menge button { width: var(--tap); height: var(--tap); display: flex; align-items: center; justify-content: center; border: 0; background: none; cursor: pointer; font-size: 1.125rem; color: var(--text); border-radius: var(--ecke-karte); } .wkz__menge button:hover { background: var(--grund-2); } .wkz__menge button:focus-visible { outline: 2px solid var(--blau-knopf); outline-offset: -2px; } .wkz__zahl { min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; } .wkz__weg { min-height: var(--tap); padding: 0; border: 0; background: none; cursor: pointer; color: var(--text-2); font-family: inherit; font-size: .875rem; text-decoration: underline; } .wkz__weg:hover { color: var(--text); } .wkz__weg:focus-visible { outline: 2px solid var(--blau-knopf); outline-offset: 2px; } .wk__summe { padding: var(--s4); border: 1px solid var(--linie); border-radius: var(--ecke-flaeche); background: var(--grund-2); } .wk__summe-titel { margin: 0 0 var(--s4); } .wk__rechnung { margin: 0 0 var(--s3); } .wk__posten { display: flex; justify-content: space-between; gap: var(--s3); padding-block: var(--s2); } .wk__posten dt, .wk__posten dd { margin: 0; } .wk__posten--gesamt { margin-top: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--linie); font-weight: 600; font-size: 1.125rem; } /* KOSTENLOS in Versalien, wie apple.com es macht -- "0,00 €" liest sich wie ein Betrag, "KOSTENLOS" wie ein Versprechen. */ .wk__frei { text-transform: uppercase; letter-spacing: .04em; font-size: .875rem; font-weight: 600; } .wk__ust { margin: 0 0 var(--s4); } .wk__kasse { margin-bottom: var(--s3); } .wk__zusagen { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .wk__zusagen li { display: flex; align-items: center; gap: 10px; } .wk__zusagen .symbol { color: var(--text); opacity: .55; } /* END_SECTION:cart */ /* START_SECTION:collection (INDEX:5) */ .samm__kopf { max-width: 52ch; margin-bottom: var(--s6); } .samm__titel { margin: 0 0 var(--s2); } .samm__text { color: var(--text-2); } .samm__leer { color: #B3261E; font-weight: 600; text-decoration: underline wavy; } .samm__gitter { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); grid-template-columns: 1fr; } @media (min-width: 640px) { .samm__gitter { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .samm__gitter { grid-template-columns: repeat(var(--spalten, 3), 1fr); } } .samm__groesse { margin: var(--s5) 0 0; color: var(--text-2); } .samm__groesse a { color: var(--blau-link); white-space: nowrap; } .samm__belege { list-style: none; margin: var(--s3) 0 0; padding: var(--s4) 0 0; border-top: 1px solid var(--linie); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); color: var(--text-2); } .samm__belege strong { color: var(--text); font-weight: 600; } .samm__belege-mehr { margin-left: auto; } .samm__belege-mehr a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--blau-link); } @media (max-width: 640px) { .samm__belege { gap: 6px var(--s4); } .samm__belege-mehr { margin-left: 0; width: 100%; } } /* END_SECTION:collection */ /* START_SECTION:collections (INDEX:6) */ .ksicht__titel { margin: 0 0 var(--s5); } .ksicht__leer { margin: 0 0 var(--s4); color: var(--text-2); max-width: 44ch; } .pkarte__zahl { margin: 2px 0 0; color: var(--text-2); } /* END_SECTION:collections */ /* START_SECTION:community (INDEX:7) */ .comm__titel { margin: 0 0 var(--s6); } /* FESTE SPALTENZAHL statt auto-fit. Mit auto-fit passten bei 1440 px vier Kacheln nebeneinander -- bei sechs Kacheln bleibt dann eine Reihe mit vier und eine mit zwei, und rechts steht ein halbes leeres Feld. Auf dem Schirmbild vom 08.09.2026 war das der unruhigste Block der Startseite. Sechs Kacheln teilen sich sauber in 3x2 und 2x3 -- also drei Spalten ab Tablet, zwei auf dem Handy. Keine Reihe bleibt halb. */ .comm__gitter { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); grid-template-columns: repeat(2, 1fr); } @media (min-width: 760px) { .comm__gitter { grid-template-columns: repeat(3, 1fr); } } .ckachel__medium { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--ecke-flaeche); background: var(--grund-2); margin-bottom: var(--s3); } .auf-dunkel .ckachel__medium { background: var(--grund-dunkel-2); } .ckachel__bild, .ckachel__video { width: 100%; height: 100%; object-fit: cover; display: block; } .ckachel__video { position: absolute; inset: 0; } html.no-js .ckachel__video, html.reduced-motion .ckachel__video { display: none; } .ckachel__titel { margin: 0 0 2px; } .ckachel__satz { margin: 0; } /* END_SECTION:community */ /* START_SECTION:custom-section (INDEX:8) */ .custom-section { position: relative; overflow: hidden; width: 100%; } .custom-section__background { position: absolute; width: 100%; height: 100%; z-index: -1; overflow: hidden; } .custom-section__background img { position: absolute; width: 100%; height: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); } .custom-section__content { display: grid; grid-template-columns: var(--content-grid); } .custom-section__content > * { grid-column: 2; } /* END_SECTION:custom-section */ /* 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:hero (INDEX:11) */ /* Groesser: 78vh liess auf einem 900-px-Fenster nur 700 px, und mit dem Text darin wirkte der Hero wie ein Banner, nicht wie ein Auftritt. 88vh laesst unten einen Rest der naechsten Sektion sehen -- das ist der Hinweis zum Weiterscrollen, den man sonst extra bauen muesste. */ .hero { position: relative; overflow: hidden; min-height: min(88vh, 860px); display: grid; } .hero__medium { position: absolute; inset: 0; } .hero__standbild, .hero__video { width: 100%; height: 100%; object-fit: cover; display: block; } .hero__video { position: absolute; inset: 0; } /* Ohne JS und bei Reduce Motion bleibt das Standbild oben liegen. */ html.no-js .hero__video, html.reduced-motion .hero__video { display: none; } html.no-js .hero__pause, html.reduced-motion .hero__pause { display: none; } .hero__pause { position: absolute; right: var(--s3); bottom: var(--s3); z-index: 2; width: var(--tap); height: var(--tap); display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; cursor: pointer; font-size: .75rem; } .hero__pause:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* Die Bahn spannt, der Text sitzt links unten darin. Unten statt mittig, weil das Motiv in der Bildmitte steht -- Text ueber einem Gesicht ist immer die schlechtere Wahl, egal wie gut der Verlauf ist. */ .hero__band { position: relative; z-index: 1; align-self: end; width: 100%; padding-block: var(--s8) var(--s7); } .hero__text { max-width: 42ch; } .hero__oberzeile { margin: 0 0 var(--s2); font-size: .875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; } .hero__titel { margin: 0 0 var(--s3); } .hero__unterzeile { margin: 0 0 var(--s5); font-size: 1.25rem; } .hero__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); } .hero__link { display: inline-flex; align-items: center; min-height: var(--tap); font-size: 1.0625rem; } /* Dunkler Hero: Text muss gegen das Bild lesbar bleiben, nicht nur gegen die Grundfarbe. Ein Verlauf ist dafuer zuverlaessiger als eine Deckschicht ueber dem ganzen Bild -- er nimmt dem Bild oben nichts weg. */ /* LESBARKEIT, GEMESSEN — nicht geschaetzt. Aus hero-wide.mp4 drei Bilder gezogen und die linke Haelfte vermessen: die hellen Stellen liegen bei 207 von 255. Weisser Text darauf ergibt 1,56:1 — praktisch unlesbar. Der erste Verlauf fiel bei 55 % schon auf .35 ab, und genau dort endet der Text noch. Der Text steht in max-width 42ch, das sind bei 17px Grundtext rund 380 px = etwa ein Drittel der 1200px-Bahn. Der Verlauf haelt jetzt 78 % bis 34 % und 62 % bis 52 %, blendet also erst NACH dem Text aus. Gerechnet: 62 % Deckung auf 207 ergibt 6,4:1. Mit Reserve fuer ein Video, das spaeter heller wird. */ .hero.auf-dunkel .hero__medium::after { content: ""; position: absolute; inset: 0; /* ZWEI Verlaeufe uebereinander, seit der Text unten links steht: einer von links (traegt die Textbreite), einer von unten (traegt die Zeile mit den Knoepfen). Einer allein muesste doppelt so stark sein und wuerde das halbe Bild zudecken. Nachgemessen am hellsten Bereich des Videos (207/255): unten links kommen beide zusammen auf rund 0,86 Deckung -- weisser Text ergibt dort ueber 12:1. */ background: linear-gradient(90deg, rgba(0,0,0,.70) 0%, rgba(0,0,0,.58) 38%, rgba(0,0,0,.18) 72%, rgba(0,0,0,0) 100%), linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.10) 42%, rgba(0,0,0,.52) 78%, rgba(0,0,0,.66) 100%); } @media (max-width: 700px) { /* Hochkant steht der Text unten. Dort muss die Abdunklung tiefer reichen, weil der Text ueber die volle Breite laeuft. */ .hero.auf-dunkel .hero__medium::after { background: linear-gradient(180deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,.42) 42%, rgba(0,0,0,.78) 72%, rgba(0,0,0,.86) 100%); } .hero__text { align-self: end; } } /* END_SECTION:hero */ /* START_SECTION:laufband (INDEX:12) */ /* Polster mit der Schrift geschrumpft: 86 px Bandhoehe um eine 14-px-Zeile sahen aus, als fehle dort etwas. */ .laufband { overflow: hidden; padding-block: var(--s3); border-block: 1px solid var(--linie); } .laufband.auf-dunkel { border-color: var(--linie-invers); } .laufband__spur { display: flex; width: max-content; animation: laufband 40s linear infinite; } /* KLEINER ALS DIE UEBERSCHRIFTEN, NICHT GROESSER. Vorher lief das Band mit bis zu 2,5 rem und war damit das lauteste Element der ganzen Startseite -- lauter als "Worn where we live." direkt darunter und lauter als jede Produktueberschrift. Gemessen an einem Schirmbild bei 1440 px: die Laufschrift stand bei 40 px, die Sektionsueberschrift darunter bei 38. Ein Band, das nur den Markennamen und den Claim wiederholt, hat keinen Anspruch auf die groesste Schrift der Seite. Es ist ein Trenner mit Puls, kein Argument. Als schmale Zeile in Nebentextfarbe behaelt es den Streetwear-Ton und nimmt den Ueberschriften nichts mehr weg. */ .laufband__text { padding-inline: var(--s5); white-space: nowrap; font-family: var(--schrift-marke); font-weight: 800; font-stretch: 118%; font-size: clamp(.8125rem, 1.1vw, 1rem); color: var(--text-2); text-transform: uppercase; letter-spacing: .14em; } .auf-dunkel .laufband__text { color: var(--text-2-invers); } @keyframes laufband { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .laufband__spur { animation: none; } .laufband__text:last-child { display: none; } } html.reduced-motion .laufband__spur { animation: none; } html.reduced-motion .laufband__text:last-child { display: none; } /* END_SECTION:laufband */ /* 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:page (INDEX:15) */ /* ZEILENLAENGE. .bahn--schmal deckelt bei 820 px; das waeren bei 17 px Inter immer noch rund 90 Zeichen. Die eigentliche Bremse ist deshalb 70ch. Achtung, ch ist die Breite der Null und damit breiter als der Durchschnittsbuchstabe — 70ch traegt real etwa 68-72 Zeichen, genau das gesuchte Fenster. Die Bahn bleibt trotzdem drum herum: sie haelt den Seitenrand auf dem Handy und den Text auf gleicher Hoehe wie in allen anderen Sektionen. */ .rseite__text { max-width: 70ch; color: var(--text); overflow-wrap: break-word; } .rseite__kopf { margin-bottom: var(--s6); max-width: 70ch; } .rseite__titel { margin: 0; } .rseite__stand { margin: var(--s3) 0 0; } /* ---- Inhaltsverzeichnis ---- */ .rseite__vz { max-width: 70ch; margin: 0 0 var(--s7); padding: var(--s4) var(--s5); background: var(--grund-2); border-radius: var(--ecke-flaeche); } .rseite__vz-titel { margin: 0 0 var(--s2); } .rseite__vz-liste { margin: 0; padding: 0; list-style: none; counter-reset: vz; } .rseite__vz-eintrag { counter-increment: vz; } /* 44 px Trefferflaeche als echte Zeilenhoehe, nicht als unsichtbares Feld: hier stehen die Links untereinander, da darf die Flaeche wachsen, ohne dass sie den Nachbarn verdeckt. Apple, buttons.md: "at least 44x44 pt". */ .rseite__vz-link { display: flex; align-items: center; gap: var(--s2); min-height: var(--tap); color: var(--blau-link); } .rseite__vz-link::before { content: counter(vz) "."; flex: 0 0 auto; min-width: 1.6em; color: var(--text-2); font-variant-numeric: tabular-nums; } /* ---- Ueberschriften im Admin-HTML ---- Der Abstand nach OBEN ist der groessere. Eine Zwischenueberschrift gehoert optisch zum Text darunter; steht sie mittig zwischen beiden Bloecken, muss man beim Ueberfliegen jedes Mal pruefen, wozu sie zaehlt. scroll-margin-top haelt sie nach dem Sprung unter der klebenden Navigation (48 px) frei — ohne das steht die angesprungene Ueberschrift dahinter und der Leser sieht auf Absatz zwei. */ .rseite__text h2, .rseite__text h3, .rseite__text h4 { scroll-margin-top: calc(48px + var(--s4)); } .rseite__text h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600; line-height: 1.16; margin: var(--s7) 0 var(--s3); } .rseite__text h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.25; margin: var(--s5) 0 var(--s2); } .rseite__text h4 { font-size: 1.0625rem; font-weight: 600; line-height: 1.29; margin: var(--s4) 0 var(--s2); } .rseite__text > :first-child { margin-top: 0; } .rseite__text > :last-child { margin-bottom: 0; } /* ---- Fliesstext ---- critical.css setzt `* { margin: 0 }`. Ohne die Regeln hier klebt der ganze Rechtstext zu einem Block zusammen — das ist kein Schoenheits-, sondern ein Lesbarkeitsfehler. */ .rseite__text p, .rseite__text ul, .rseite__text ol, .rseite__text dl, .rseite__text blockquote { margin: 0 0 var(--s3); } .rseite__text ul, .rseite__text ol { padding-left: 1.4em; } .rseite__text ul { list-style: disc; } .rseite__text ol { list-style: decimal; } .rseite__text li { margin-bottom: var(--s1); } .rseite__text li > ul, .rseite__text li > ol { margin: var(--s1) 0 0; } .rseite__text dt { font-weight: 600; } .rseite__text dd { margin: 0 0 var(--s2); color: var(--text-2); } .rseite__text strong, .rseite__text b { font-weight: 600; } .rseite__text hr { border: 0; border-top: 1px solid var(--linie); margin: var(--s6) 0; } .rseite__text blockquote { padding-left: var(--s4); border-left: 2px solid var(--linie); color: var(--text-2); } .rseite__text code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9375em; } /* Falls doch mal ein Bild im Admin-Text landet: es soll die Bahn nicht sprengen. Gewollt ist auf diesen Seiten keins. */ .rseite__text img { max-width: 100%; height: auto; border-radius: var(--ecke-flaeche); margin-bottom: var(--s3); } /* ---- Links ---- UNTERSTRICHEN, nicht nur blau. Im Fundament ist `a` ohne Unterstrich gesetzt, das passt zu Navigation und Knoepfen. In einer Textwand ist Farbe allein aber das einzige Merkmal — und damit WCAG 1.4.1 verletzt, sobald jemand Farben schlecht unterscheidet. Zur 44-px-Regel: ein Link MITTEN IM SATZ bekommt sie bewusst nicht. Ein unsichtbares 44-px-Feld ueber einem Wort wuerde in die Zeile darueber und darunter ragen und dort Klicks abfangen. WCAG 2.5.8 nimmt genau diesen Fall ausdruecklich aus ("Inline: the target is in a sentence"). Was allein in einer Zeile steht — Mailadresse, Link auf die Kasse — faellt nicht darunter und bekommt die volle Flaeche. */ .rseite__text a { color: var(--blau-link); text-decoration: underline; text-underline-offset: .15em; } .rseite__text a:hover { text-decoration-thickness: 2px; } .rseite__text p > a:only-child, .rseite__text li > a:only-child { display: inline-flex; align-items: center; min-height: var(--tap); } /* ---- Tabellen ---- Der Schiebe-Rahmen kommt aus dem Liquid oben. min-width haelt die Tabelle lesbar, statt sie auf dem Handy in drei Buchstaben je Spalte zu quetschen; dafuer schiebt man sie dann seitwaerts. */ .rseite__tabelle { margin: 0 0 var(--s4); overflow-x: auto; } .rseite__tabelle:focus-visible { outline: 2px solid var(--blau-knopf); outline-offset: 2px; } .rseite__text table { width: 100%; min-width: 30rem; border-collapse: collapse; font-size: .9375rem; } .rseite__text th, .rseite__text td { padding: var(--s2) var(--s3); text-align: left; vertical-align: top; border-bottom: 1px solid var(--linie); } .rseite__text th { font-weight: 600; color: var(--text); } .rseite__text tbody tr:last-child td { border-bottom: 0; } @media (max-width: 640px) { .rseite__vz { padding: var(--s4); } .rseite__text h2 { margin-top: var(--s6); } } /* END_SECTION:page */ /* START_SECTION:password (INDEX:16) */ /* Ink Black als Flaeche -- hier und nur hier. Die Torseite ist der eine Moment, in dem die Marke allein steht, ohne Ware daneben. */ .tor { min-height: 100svh; display: grid; place-items: center; background: #111111; color: #FFFFFF; padding: var(--s5) var(--s4); } .tor__inhalt { width: 100%; max-width: 34rem; text-align: center; } .tor__logo svg { display: block; width: min(300px, 72%); height: auto; margin: 0 auto var(--s3); color: #FFFFFF; } .tor__claim { margin: 0 0 var(--s6); font-family: var(--schrift-marke); font-weight: 800; font-stretch: 118%; text-transform: uppercase; letter-spacing: .16em; font-size: .8125rem; color: #A1A1A6; } .tor__titel { margin: 0 0 var(--s2); color: #FFFFFF; } /* #A1A1A6 auf #111111 = 7,0:1. Apples eigenes #86868B kaeme auf 4,7:1 -- genug fuer die Norm, aber auf einer Flaeche, die sonst nichts anderes zeigt, ist mehr Abstand die bessere Wahl. */ .tor__text { margin: 0 auto var(--s5); max-width: 30rem; color: #A1A1A6; } .tor__zeile { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; } .tor__eingabe { flex: 1 1 15rem; min-height: var(--tap); padding: 0 16px; font: inherit; font-size: 1rem; /* 16px, sonst zoomt iOS hinein */ color: #FFFFFF; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); border-radius: 12px; } .tor__eingabe::placeholder { color: #86868B; } .tor__eingabe:focus-visible { outline: 2px solid var(--blau-dunkel); outline-offset: 2px; } .tor__knopf { flex: 0 0 auto; } .tor__einwilligung { display: flex; gap: var(--s2); align-items: flex-start; margin: var(--s3) auto 0; max-width: 30rem; text-align: left; color: #A1A1A6; cursor: pointer; } .tor__einwilligung input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--blau-dunkel); flex: 0 0 auto; } .tor__danke { margin: 0; font-weight: 600; display: inline-flex; gap: var(--s2); align-items: center; } .tor__fehler { margin: 0 0 var(--s2); color: #FF6961; font-weight: 600; } .tor__zugang { margin-top: var(--s7); } .tor__zugangkopf { display: inline-flex; align-items: center; min-height: var(--tap); cursor: pointer; font-size: .8125rem; color: #86868B; list-style: none; } .tor__zugangkopf::-webkit-details-marker { display: none; } .tor__zugangkopf:hover { color: #FFFFFF; } .tor__pwform { margin-top: var(--s3); } @media (max-width: 420px) { .tor__knopf { flex: 1 1 100%; } } /* END_SECTION:password */ /* 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:produktzeile (INDEX:18) */ /* Belegzeile: sachlich, nicht dekoriert. Sie soll wie ein Datenblatt wirken und nicht wie ein Werbebanner -- deshalb keine Kacheln, keine Symbole, nur Zahl und Wort. */ .pzeile__belege { list-style: none; margin: var(--s5) 0 0; padding: var(--s4) 0 0; border-top: 1px solid var(--linie); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); color: var(--text-2); } .pzeile__belege strong { color: var(--text); font-weight: 600; } .pzeile__belege-mehr { margin-left: auto; } .pzeile__belege-mehr a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--blau-link); } @media (max-width: 640px) { .pzeile__belege { gap: 6px var(--s4); } .pzeile__belege-mehr { margin-left: 0; width: 100%; } } .pkarte__stueck { margin: 0 0 2px; color: var(--text-2); } .pzeile__kopf { margin-bottom: var(--s6); } .pzeile__titel { margin: 0 0 var(--s2); } .pzeile__unterzeile { margin: 0; color: var(--text-2); max-width: 52ch; } @media (min-width: 900px) { .pzeile__kopf { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s7); align-items: end; } .pzeile__titel { grid-column: 1; margin-bottom: 0; max-width: 14ch; } .pzeile__unterzeile { grid-column: 2; max-width: 34ch; padding-bottom: .35em; } } .pzeile__leer { color: #B3261E; font-weight: 600; text-decoration: underline wavy; } /* auto-FILL statt auto-FIT, und eine Obergrenze je Spalte. Mit auto-fit und 1fr zieht eine einzelne Kachel auf die volle Breite -- auf der Kollektionsuebersicht mit EINER Sammlung war das Produktbild dadurch 1.200 px breit und fuellte den Bildschirm. auto-fill laesst leere Spalten stehen, statt die vorhandenen aufzublasen. */ /* END_SECTION:produktzeile */ /* START_SECTION:search (INDEX:19) */ .suche__titel { margin: 0 0 var(--s5); } .suche__form { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s5); max-width: 34rem; } .suche__feld { flex: 1 1 14rem; min-height: var(--tap); padding: 0 16px; font: inherit; font-size: 1rem; /* 16px, sonst zoomt iOS beim Tippen */ color: var(--text); background: var(--grund); border: 1px solid var(--linie-stark); border-radius: 12px; } .suche__feld::placeholder { color: var(--text-2); } .suche__knopf { flex: 0 0 auto; } .suche__zahl { margin: 0 0 var(--s4); color: var(--text-2); } .suche__leer { margin: 0; max-width: 46ch; color: var(--text-2); } .suche__blaettern { margin-top: var(--s6); } .suche__blaettern a { min-height: var(--tap); display: inline-flex; align-items: center; padding-inline: 10px; } @media (max-width: 420px) { .suche__knopf { flex: 1 1 100%; } } /* END_SECTION:search */ /* START_SECTION:technik (INDEX:20) */ .technik__zeichnung { margin: var(--s7) 0 0; } /* Weisser Grund unter der Zeichnung, auch wenn die Sektion grau ist: die Zeichnung IST auf Weiss gezeichnet, ein grauer Rand daneben sieht nach Fehler aus. */ .technik__zeichnung img { display: block; width: 100%; height: auto; background: #fff; border-radius: var(--ecke-flaeche); border: 1px solid var(--linie); } .technik__bildunterschrift { margin: var(--s3) auto 0; max-width: 62ch; text-align: center; } .technik__kopf { max-width: 46ch; margin-bottom: var(--s8); } /* ZWEISPALTIGER KOPF AB 900 px. Gemessen an einem Schirmbild bei 1440 px: die Ueberschrift stand in drei Zeilen links, daneben lagen 845 x 179 px nichts. Kein Weissraum -- ein Loch. Die Liste darunter ist zweispaltig, der Kopf war es nicht, und dadurch sah die Sektion aus, als fehle etwas. Apples eigenes Muster fuer genau diesen Fall: grosse Ueberschrift links, der begleitende Satz rechts auf der Grundlinie der letzten Ueberschriftzeile. Der Satz sitzt damit dort, wo das Auge nach der Ueberschrift ohnehin hinlaeuft, und die Sektion bekommt dieselbe Achse wie die Punkte darunter. */ @media (min-width: 900px) { .technik__kopf { max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s7); align-items: end; } .technik__label { grid-column: 1; grid-row: 1; } .technik__titel { grid-column: 1; grid-row: 2; margin-bottom: 0; max-width: 14ch; } .technik__sub { grid-column: 2; grid-row: 2; max-width: 34ch; padding-bottom: .35em; } } .technik__titel { margin: 0 0 var(--s3); } .technik__sub { margin: 0; font-size: 1.25rem; color: var(--text-2); } .auf-dunkel .technik__sub { color: var(--text-2-invers); } .technik__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s7); } @media (min-width: 900px) { .technik__liste { grid-template-columns: 1fr 1fr; gap: var(--s8) var(--s7); } } .tpunkt__kopf { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: start; margin-bottom: var(--s3); } .tpunkt__marke { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--blau-link); padding-top: 3px; } .auf-dunkel .tpunkt__marke { color: var(--blau-dunkel); } .tpunkt__nr { font-size: .75rem; font-weight: 600; letter-spacing: .06em; font-variant-numeric: tabular-nums; } .tpunkt__name { margin: 0 0 2px; } .tpunkt__claim { margin: 0; color: var(--text-2); } .auf-dunkel .tpunkt__claim { color: var(--text-2-invers); } .tpunkt__text { margin: 0; max-width: 52ch; } .tpunkt__bild { margin-top: var(--s3); border-radius: var(--ecke-flaeche); overflow: hidden; } .tpunkt__bild img { display: block; width: 100%; height: auto; } /* Enger angebunden. Vorher standen zwischen Zeichnung und Knopf s8+s6, dazu die Sektionspolsterung -- auf dem Schirmbild schwebte der Knopf in rund 200 px Leere und sah aus wie vergessen. */ /* END_SECTION:technik */ /* START_SECTION:ueberuns (INDEX:21) */ .ueber__raster { display: grid; gap: var(--s6); } @media (min-width: 900px) { .ueber__raster { grid-template-columns: 1.1fr 1fr; gap: var(--s8); align-items: center; } } .ueber__claim { margin: 0 0 var(--s4); } .ueber__absatz { margin: 0 0 var(--s3); max-width: 54ch; } .ueber__standards { list-style: none; margin: var(--s5) 0; padding: 0; display: grid; gap: var(--s2); } .ueber__standards li { padding-left: 1.4em; position: relative; color: var(--text-2); } .ueber__standards li::before { content: "—"; position: absolute; left: 0; color: var(--blau-link); } .ueber__gruender { margin: 0; padding-top: var(--s4); border-top: 1px solid var(--linie); max-width: 54ch; } .ueber__bild { border-radius: var(--ecke-flaeche); overflow: hidden; } .ueber__bild img { display: block; width: 100%; height: auto; } /* END_SECTION:ueberuns */ /* START_SECTION:vertrauen (INDEX:22) */ .negation { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2) var(--s5); margin: 0 auto var(--s6); text-align: center; } .negation__teil { font-family: var(--schrift-marke); font-weight: 700; font-size: clamp(1.05rem, 2.4vw, 1.6rem); letter-spacing: -.01em; } @media (max-width: 520px) { .negation { gap: 2px var(--s4); } } /* Mehr Luft: die Zeile stand direkt unter dem Hero eingeklemmt und las sich wie eine Fussnote statt wie drei Zusagen. */ .vertrauen { padding-block: var(--s6); border-block: 1px solid var(--linie); } /* Auf die Satzkante. Die Liste hatte ein eigenes Polster statt der Bahn und begann dadurch bei x 45 statt bei x 144 -- als einziges Element der Seite ausserhalb des Satzspiegels. Gemessen an einem Schirmbild bei 1440 px. Die Bahn liegt am