Zum Inhalt springen
DESIGN OPERATING SYSTEM
V2.7 · READY

13STOREFRONT SYSTEM

Direkt in die Auswahl.Ruhig bis zur Zahlung.

Release V14 verbindet Größen-Discovery mit verständlicher Satz-Auswahl: alle Angebote bleiben sichtbar, Vierersätze vor Zweiersätzen und Einzelreifen. Preisvergleiche rechnen mit echter Stückzahl, belegter zeitlich begrenzter Referenz oder eigener Eingabe; Montage und Zustand bleiben sichtbar. Die technische Freigabe ersetzt keine Google-Rankingmessung.

13.1STARTSCREEN

Volle Bildfläche.
Normale Überschrift.

Die Bildfläche darf bis an jede Kante reichen. Überschriften bleiben bewusst in normaler Leseskala; Navigation, Größenfinder und Status folgen einem stabilen Inhaltsraster. Das Versandversprechen steht vor dem Header, die Größenaktion öffnet sofort den Dialog.

Freigegebener 4K-Master einer Reifenprofilaufnahme für den dunklen Storefront-Einstieg
THEME
GEPRÜFT · SOFORT VERFÜGBAR

Reifen finden.
Substanz kaufen.

Großes Motiv, ruhige Botschaft und dieselbe reale Bestandslogik in jedem Einstieg.

BREITE205/QUERSCHNITT55RZOLL16
100VH

Viewport bleibt Einstieg

Auf Desktop und Mobile füllt der Startscreen mindestens den sichtbaren Bildschirm. Finder und Hauptaussage bleiben ohne Suchscroll erreichbar.

BOX

Inhalt bleibt geführt

Bild ist full width. Text, Navigation und Eingabe folgen derselben maximalen Breite und denselben symmetrischen Seitenabständen.

MOTION

Einstieg ohne Warteanimation

Startbild, Haupttext und Finder sind ab dem ersten Bildaufbau sichtbar. Der Text erhält höchstens eine kurze räumliche Bewegung von 360 ms ohne verzögertes Einblenden. Markenlogos in geschlossenen Menüs und späteren Abschnitten laden erst bei Bedarf. Reduced Motion reduziert die Bewegung; die Größenwahl wartet auf keine Animation.

13.2HELL / DUNKEL

Zwei Lichtlagen.
Eine Hierarchie.

Hell ist keine invertierte dunkle Oberfläche. Beide Modi verwenden eigene Kontrastflächen und einen freigegebenen 4K-Master, behalten aber Anordnung, Bedeutung und genau eine dominante Aktion.

Dunkler freigegebener Storefront-Master
DUNKEL#090A0C

Werkstattnacht, helle Produktkontur, Signalgelb nur für die nächste Entscheidung.

Heller freigegebener Storefront-Master
HELL#F5F5F0

Warme technische Fläche, dunkle Typografie und dieselbe erkennbare Aktionsstufe.

CANVAS DARK#090A0CCANVAS LIGHT#F5F5F0SIGNAL#DDB51BSIGNAL INK#070806

13.3MARKENSYSTEM

Offizielle Zeichen.
Vom Lager freigeschaltet.

Mega-Menü, Slider, Startseitenregister und Filter verwenden dieselbe Quelle. Im Vorschaumodus sind alle hinterlegten Hersteller sichtbar; live entscheidet ausschließlich verkaufsfähiger Bestand.

MARKENREGISTER / 12Monochrom ruhig. Beim Fokus eindeutig.
SVG · VECTOR SHARP
01
02
03
04
05
06
07
08
09
10
11
12

Fehlerfest: Jede Datei wird lokal ausgeliefert, alte XML-Doctypes und Fremdhintergründe sind entfernt; bei einem Ladefehler bleibt der Markenname sichtbar.

SOURCE

Ein Register

Alias, Dateipfad und Anzeigename kommen aus einem gemeinsamen Markenregister. Es gibt keine handkopierten Sliderlisten.

STOCK

Bestand entscheidet

Produktion schneidet das Markenregister mit den aktuell verkaufsfähigen Herstellern. Leere Markenwelten erscheinen nicht.

FALLBACK

Logo darf nie brechen

SVG wird direkt und vektorscharf geladen. Ein Textfallback erhält Navigation und Bedeutung bei jedem Assetfehler.

13.4BESTANDS-UX

Nur öffnen, was zählt.
Quadrat bleibt Wahrheit.

Die sichtbare Stückzahlauswahl zeigt Alle, 4er-Sätze, 2er-Sätze und Einzelreifen mit echten Angebotszahlen. Default bleibt Alle, sortiert nach 4 → 2 → 1 und danach Gesamtpreis. Derselbe Filter steckt im Mega-Menü und der Filterspur. Größe und andere Filter bleiben bei Mengenwechsel erhalten; Seite wird zurückgesetzt. Der Gesamt-Reset führt exakt zu /reifen. Explizite Preis- und Neu-Sortierung bleiben erhalten.

AKTUELLER BESTAND

205/55 R16

2ER-SATZ · ARTIKEL AMichelin Pilot Sport 5

6,2–6,7 mm · DOT 2023

259,60 €Artikel öffnen
EINZELREIFEN · ARTIKEL BMichelin Pilot Sport 5

6,2 mm · DOT 2023

64,90 €Artikel öffnen
4ER-SATZ · ARTIKEL CGoodyear EfficientGrip

6,2–6,7 mm · DOT 2023

259,60 €Artikel öffnen
EINZELREIFEN · ARTIKEL DHankook Ventus Prime

6,2 mm · DOT 2023

64,90 €Artikel öffnen
≥ 961 PX Sticky linke Sidebar + ruhige Ergebniswerkzeuge≤ 960 PX Saisontabs + Filterbutton + barrierearmer Dialog
4/2/1

Vor der Paginierung

Die Commerce-API sortiert und filtert den gesamten verkaufsfähigen Bestand. Ein fester Satz bleibt ein Artikel, niemals eine spontan zusammengesetzte Menge.

EUR

Vergleich ohne Fantasiepreis

Startseite und verfügbare Artikel zeigen einen Mengen- und Kostenrechner. Nur der exakt geprüfte Hankook-Vierersatz erhält bis 12.09.2026 eine ATU-Referenz; sonst ist ein eigener Neupreis erforderlich. Kein Marktbestpreis-, UVP- oder Gleichwertigkeitsversprechen.

CHECK

Klare Fertig-Kriterien

Owner Storefront/Commerce, Stand 05.09.2026: vollständige Mengenreihenfolge, Filterkombinationen, Alternative Preis/Neu, Browser-Zurück, beide Themes, 320–1440 px und Rechner einschließlich negativer Ersparnis prüfen. Mess- und Live-Nachweise stehen im datierten Deployment-Runbook.

13.5ARTIKELIDENTITÄT

Ein Kaufobjekt.
Eine feste URL.

Artikelidentität folgt dem physischen Verkauf: Ein loser StockUnit ist ein Einzelartikel, auch wenn neun technisch gleiche Exemplare danebenliegen. Ein fester TyreSet ist genau ein Satzartikel. Weder Karte noch Detailseite fassen diese Angebote nach Marke oder Modell zusammen.

UNIT

Jedes Exemplar bleibt eigen

Zehn lose Reifen desselben Modells ergeben zehn Karten und zehn Detailseiten. Bild, DOT, Profil und Zustand stammen ausschließlich vom jeweiligen StockUnit.

SET

Ein Satz bleibt geschlossen

Ein 2er- oder 4er-Satz erhält eine Karte, eine URL und einen Gesamtpreis. Seine Detailseite belegt trotzdem jedes Mitglied mit dessen Fakten und Bildern.

URL

Lesbare, stabile Artikeladresse

Karten verlinken direkt auf /artikel/einzelreifen/:seo-slug--:id oder /artikel/reifensatz/:seo-slug--:id. Marke, Modell, Größe und Saison sind lesbar; die unveränderliche ID verhindert Mehrdeutigkeit. Alte oder veraltete Slugs werden permanent auf die kanonische Adresse geführt.

13.6CHECKOUT-RHYTHMUS

Erst das Nötige.
Dann sicher zahlen.

Der Checkout bleibt Gastkauf und zeigt höchstens einen Entscheidungsblock zur Zeit. Kontakt und Versand kommen zuerst; optionale Firmen- und Rechnungsdaten erscheinen nur nach bewusster Auswahl. Prüfung, Recht und Zahlungsstart folgen als eigener ruhiger Moment.

01

Kontakt & Lieferung

Nur Name, E-Mail und Lieferadresse sind zunächst sichtbar. Pflichtfelder werden lokal erklärt und gemeinsam bestätigt.

02

Prüfen & zustimmen

Adresse, konkrete Artikel, Endpreis und Rechtseinwilligungen werden kompakt zusammengeführt. Bearbeiten führt gezielt zum ersten Schritt zurück.

03

Zahlung

Das Payment-Modul lädt erst nach erfolgreicher Serverprüfung. Rückkehr und Fehler erhalten Warenkorb, Eingaben und klaren Status.

13.74K & PRODUKTMEDIEN

Scharf in jeder Größe.
Eine klare Reihenfolge.

Großformatige CI-Bühnen beziehen freigegebene Master bis 6336 × 2688 Pixel. Produktkarten, kleine Vorschauen und Detailansichten wählen aus den registrierten AVIF-/WebP-/JPEG-Ableitungen des gewählten Shop-Hauptbilds die zur Anzeige passende Auflösung. Die vollständige Produktansicht bleibt per Klick erreichbar; interne Originalaufnahmen bleiben aus der Shop-Galerie.

014K MASTER

Hero, Saison, Markenbühne

6336 × 2688 / 5504 × 3072
02RESPONSIVE DELIVERY

AVIF/WebP, sizes, quality

bis 3840 px Device-Target
03REALE PRODUKTFOTOS

Vorschau · Karte · Detail · Vollansicht

300 / 640 / 1600 / 2048 px nach Bedarf
RELEASE GATEStorefront V11 ist nur fertig, wenn Artikelidentität, beide Themen, jede Kaufbreite, Content-Validierung und alle Kaufregeln bestehen.
  • Das Versandversprechen steht als ruhige, linienbasierte Serviceleiste oberhalb des Headers; Signalfläche, Lieferzeit und Detailweg bleiben auf Mobile kompakt.
  • Header: originales GR links, Warenkorb direkt links vom Theme-Schalter.
  • Jede Größenaktion öffnet die fokussierte Direkteingabe statt zu einem Seitenanker zu springen.
  • Seiten-H1 bleiben bei maximal 54 px auf Desktop und 39 px bei 390 px Breite.
  • Dekorative Intro-Sätze unter Seiten- und Abschnittstiteln entfallen; notwendige Status-, Rechts- und Bedienhinweise bleiben.
  • Native Selects und ihre geöffneten Optionslisten besitzen in Hell und Dunkel explizit kontrastierende Text- und Hintergrundfarben.
  • Jeder lose Reifen besitzt unabhängig von technisch gleichen Exemplaren eine eigene Karte und kanonische URL.
  • Ein fester Satz wird als ein Artikel mit einem Gesamtpreis und den Fakten aller Mitglieder gezeigt.
  • Produktkarten öffnen immer eine feste Detailseite; Produkt-Quickviews und Sammeldetailseiten existieren nicht.
  • Karte und Detailseite verwenden ausschließlich die Bilder und Zustandsdaten des konkreten Artikels.
  • Produktkarten führen das quadratische Bildformat bis Mobile unverändert fort.
  • Der Checkout zeigt Kontakt, Prüfung und Zahlung progressiv statt als vollständige Feldwand.
  • Desktopfilter und Inhaltsakkordeons halten höchstens einen Eintrag offen; Sidebar-Aktionen stehen vertikal.
  • Aktive Dimension und Facetten stehen einzeln als 44-px-Tags mit X; Gesamt-Reset entfernt auch den Größenpfad und endet auf /reifen.
  • Footer zeigt die fünf von Mollie gemeldeten Methoden als lokale SVGs und nennt Mollie als Laufzeitwahrheit.
  • Homepage, Katalog, Recht und Checkout bleiben bei 1440, 768, 390 und 320 px ohne horizontalen Overflow.

13.9FORMULARSCHUTZ

Leicht für Menschen.
Teuer für Bots.

Öffentliche Mail- und Datenschutzaktionen teilen einen einfachen Sicherheitsvertrag. Keine Hürde wird eingeblendet, wenn kein echter Schutz konfiguriert ist; produktiv gilt ausschließlich serverseitig bestätigte Providerwahrheit.

TRAP

Honeypot ist immer aktiv

Ein unsichtbares, neutrales Feld stoppt einfache Formularbots bereits ohne externen Dienst und verrät die Erkennungslogik nicht in der Fehlermeldung.

VERIFY

Turnstile entscheidet am Server

Token, Aktion und Hostname werden per Siteverify geprüft. Browsererfolg allein löst niemals eine E-Mail aus.

KEYS

Keine Testattrappe im Live-Shop

Widget erst mit echten Schlüsseln bauen, Backend-Secret setzen und danach Enforcement aktivieren. Fehlende Pflichtkonfiguration bleibt fail-closed.

13.10HILFE & CONTENT

Wissen führt weiter.
Bestand bleibt konkret.

Hilfe, Blog, FAQ und Kontakt bilden einen indexierbaren Informationsraum. Markdown liefert redaktionelle Tiefe; jede Produktpräsentation endet ausschließlich im real verfügbaren Artikelbestand.

.MD

Datei ist Redaktion

Frontmatter steuert Slug, Meta, Kategorie, Aktualität, Bild, Quellen und Related Content. Drafts bleiben unsichtbar; Validierung stoppt kaputte Veröffentlichungen.

GRAPH

Links sind Entscheidungen

Hilfe führt zu Pillars, Artikel zu Fachwissen und Fachwissen über den SDK zurück zu konkreter Ware. Ankertexte benennen ihr Ziel statt Keywords zu stapeln.

TRUTH

Bild und Text bleiben ehrlich

KIE-Motive erklären Atmosphäre. Gesetze, Maße, Profil, DOT und Verfügbarkeit bleiben sichtbares HTML beziehungsweise reale Artikeldaten.

CONTENT GATEEine redaktionelle URL ist erst freigegeben, wenn Suchintention, Primärquellen, Metadaten, Linkziele und beide Themen stimmen.
  • Hilfe besitzt auf Desktop die drei Wege Blog, FAQ und Kontakt; Mobile führt auf denselben Hub.
  • Jeder veröffentlichte Beitrag hat eindeutigen Title, Description, Canonical, Aktualisierungsdatum und lokales Hero-Bild.
  • Rechts- und Sicherheitsthemen zeigen aktuelle Primärquellen mit Prüfdatum.
  • Keyword-Verwendung folgt natürlicher Sprache und fachlicher Vollständigkeit; es gibt keine starre Dichte.
  • Ratgeber verlinken passende Live-Artikel, zeigen bei leerem Bestand aber keine erfundene Ware.
  • Produkt-, Größen- und Saisonseiten führen mit beschreibenden Linktexten zurück in den passenden Wissenscluster.
  • Sitemap-lastmod stammt aus Inhaltsdatum oder Artikeldatum und wird nicht bei jedem Request fingiert.
  • BlogPosting- und Product-Daten beschreiben ausschließlich den sichtbaren Inhalt.
  • Markdown, neue Inhaltsbilder und Sitemap werden aus dem read-only Serverordner ohne Storefront-Rebuild erkannt.
  • Ratgeber, FAQ, Kontakt und Produktlinks bleiben bei 1440, 768, 390 und 320 px in Hell und Dunkel ohne horizontalen Overflow.

13.11DISCOVERY & TECHNISCHES SEO

Mehr entdecken.
Immer konkret weiter.

Die Startseite ist kein Kampagnenplakat, sondern ein crawlbarer Einstieg in Bestand, Größen, Marken, Saison und Redaktion. Permanente Marken- und Saison-Hubs liefern eine eigene Suchintention; Facetten bleiben davon getrennt.

LIVE

Angebote stammen aus dem Lager

Neu im Bestand, Reifensätze, Einzelreifen und gefragte Größen werden aus der öffentlichen Artikel-API aufgebaut. Eine leere API erzeugt einen ehrlichen Leerzustand statt Demo-Ware.

HUB

Saison und Marke besitzen feste Ziele

Permanente Saisonseiten und /marken/[brand] bündeln Erklärung, Live-Anzahl, konkrete Artikel und passende Ratgeber. Nur tatsächlich verfügbare Marken werden verlinkt und in die Sitemap aufgenommen.

CRAWL

Indexsignale bleiben eindeutig

Bestückte Größen und Saison-Größen besitzen eigene Canonicals und Sitemap-Einträge. Leere Trefferseiten sowie freie Facetten bleiben noindex, follow. Größenlinks führen nur zu bestückten Saisonvarianten. IndexNow meldet URLs an teilnehmende Suchmaschinen; ein Google-Ranking folgt daraus nicht.

DISCOVERY GATE · 05.09.2026 · OWNER: STOREFRONT / BETREIBERTechnisch fertig nach Build, HTTP- und Schema-Prüfung. Google-Wirkung separat über Search Console prüfen: Indexierung, nicht markenbezogene Impressionen und Klicks. Ein Crawl ist kein Rankingnachweis.
  • Die Startseite verlinkt mit normalen href-Ankern auf Marken- und Saison-Hubs, Größen, konkrete Artikel, Ratgeber und FAQ.
  • Aktuelle Angebotskarten enthalten ausschließlich API-gemeldete, verkaufsfähige Ware.
  • Marken- und Saison-Hubs zeigen nur tatsächlich vorhandene Größen und Artikel; nicht verfügbare Marken erzeugen keine indexierbare Leerseite.
  • Die sichtbare Startseiten-FAQ wird nicht mit sachlich unpassendem FAQ-Rich-Result-Markup ausgezeichnet.
  • Homepage, Marken- und Saison-Hubs sowie Artikelseiten liefern eindeutige Title, Description, Canonical und große Bildvorschau.
  • Product-, Offer-, Breadcrumb-, WebSite-, Organization-, CollectionPage- und ItemList-Daten spiegeln den sichtbaren Inhalt.
  • Sitemap-lastmod verwendet die letzte relevante Änderung von Spezifikation, Verkaufsobjekt, Angebot oder Satzmitgliedschaft und enthält nur verfügbare Marken.
  • Reine Pagination besitzt eine eigene indexierbare URL; sortierte und gefilterte Kombinationen bleiben noindex, follow.
  • Die serverseitige IndexNow-Keydatei besitzt einen nicht erratbaren Root-Pfad und gibt ohne passende Konfiguration 404 zurück; Meldungen enthalten ausschließlich kanonische URLs derselben Domain.
  • Alle neuen Strecken bleiben in Hell und Dunkel bei 1440, 768, 390 und 320 px ohne horizontalen Overflow.