# Kupp-west Apple Clean – conventions for building with this system

This system is the "Apple Clean" design of the Kupp-west eBay listing template
(`variants/23-apple-clean`). Everything visual comes from one stylesheet of
semantic `kwac-*` classes; the React components in this bundle only emit that
markup, so a design built here can be copied 1:1 into the static HTML template.

## 1. Wrap everything in `Page`

`Page` renders `<div class="kwac">`, and that element carries the color tokens,
the Helvetica stack, the 17px/1.6 body type and the near-white background.
Without it every component renders unstyled. Nothing else is required: no
theme provider, no font loading (system fonts only), no icon library.

```jsx
<Page>
  <Summary>…</Summary>
  <Header />
  <VehicleBar model="VW Touran Typ: 5T1" facts="Komplettsatz · Baujahr 05.2015 – jetzt" />
  <Hero eyebrow="Komplettset für den VW Touran 5T1" title="Die Anhängerkupplung für Ihren Touran. Komplett gedacht." lead="…" links={[{ label: 'Technische Daten', href: '#kwac-daten' }]} />
  <StatsRow><Stat value="1.800" unit="kg Anhängelast" /><Stat value="75" unit="kg Stützlast" /></StatsRow>
  <Section alt id="kwac-fahrzeuge" statement="Passt es? Hier steht es." copy="…">
    <VehicleTable columns={['HSN / TSN', 'Marke & Fahrzeugtyp', 'Baujahr', 'PS / KW']} rows={[…]} />
  </Section>
  <Section final statement="Bereit anzukuppeln?">
    <CtaActions><Button href="#kwac-fahrzeuge">Kompatibilität prüfen</Button></CtaActions>
  </Section>
  <Footer token="[kwkw-131282-153195-kwkw]">Anhängerkupplungen und fahrzeugspezifische Elektrosätze.</Footer>
</Page>
```

## 2. Styling idiom: semantic classes only, no utilities, no inline styles

- The page is a vertical stack of `Section` bands (`.kwac-band`, alternate
  `alt` on and off), each with a centered statement headline and optional copy,
  followed by ONE grid or table component. Do not nest sections.
- Every visual comes from a `kwac-*` class in `_ds_bundle.css`. Do not write
  Tailwind-style utility classes, do not invent new class names, do not use
  `style={{…}}` on listing markup – the real eBay template forbids inline
  styles, JavaScript, forms, iframes and any http:// resource.
- The body face is Inter (Google Fonts `@import` inside `_ds_bundle.css`),
  falling back to Helvetica/Arial.
- Colors are the eight custom properties on `.kwac` (also mirrored on `:root`
  in `tokens/colors.css`): `--bg`, `--bg-alt`, `--ink`, `--muted`, `--hair`,
  `--blue`, `--blue-deep`, `--dark`. Blue is the only accent: links, buttons,
  chips, the highlighted offer outline. No other hue, no gradients, no shadows.
- The long product page (template "Produktseite") opens with `DarkHero` instead
  of `Hero` (near-black band with product tiles and the "Passend für" row) and
  adds `LoadComparison` (dark, left-aligned pill bars) after the feature band.
  These two are the only dark surfaces; use `--ink-on-dark`, `--muted-on-dark`,
  `--label-on-dark` and `--blue-on-dark` on them, never the light-mode tokens.
- Buttons are `<a>` pills: `Button` (primary filled, `variant="ghost"`
  outlined, `size="compact"` for the sticky bar). Links are `TextLink`
  (`.kwac-link` with chevron, `variant="inline"` inside copy).
- Grids come in container/item pairs and are fixed by CSS to the column counts
  of the template: `Gallery`/`GalleryItem` (3), `FeatureTrio`/`Feature` (3),
  `IncludedGrid`/`IncludedItem` (5), `Offers`/`OfferCard` (2),
  `DetailGrid`/`DetailCard` (2), `NoteGrid`/`NoteCard` (2), `SpecGrid`/
  `SpecColumn` (2), `FaqGrid`/`FaqItem` (2), `MoreOffers`/`MoreOfferCard` (4).
  All collapse responsively below 900px / 740px / 400px on their own.
- Class vocabulary you will see in the markup (all in `_ds_bundle.css`):
  `kwac-band`, `kwac-band-alt`, `kwac-final`, `kwac-statement`,
  `kwac-band-copy`, `kwac-hero`, `kwac-h1`, `kwac-lead`, `kwac-stats`,
  `kwac-stat`, `kwac-fit`, `kwac-gallery`, `kwac-trio`, `kwac-included`,
  `kwac-offers`, `kwac-offer`, `kwac-offer-this`, `kwac-offer-chip`,
  `kwac-button`, `kwac-button-ghost`, `kwac-cta`, `kwac-link`,
  `kwac-hero-dark`, `kwac-hero-tile`, `kwac-hero-fit`, `kwac-compare`,
  `kwac-bars`, `kwac-bar`, `kwac-tablewrap`, `kwac-table`, `kwac-specs`, `kwac-spec-table`,
  `kwac-detail`, `kwac-notes`, `kwac-doclist`, `kwac-more`, `kwac-brands`,
  `kwac-faq`, `kwac-footer`.
- If a layout truly does not exist here, compose it from `Section` plus an
  existing grid and say so; a new pattern means a new `kwac-*` class in the
  central stylesheet, never ad-hoc styling in the listing.

## 3. Content rules (German, engineer-to-buyer)

Formal *Sie*, short declaratives, no exclamation marks, no emoji, exact
unrounded numbers ("1.800 kg", "9,9 kN"), technical nouns used confidently
(Anhängelast, Stützlast, D-Wert, Datenbus, Check-Control, PDC-Abschaltung).
Statement headlines are two short sentences ("1.800 kg. Zieht, was Sie
vorhaben."). CTAs are verb + object ("Kompatibilität prüfen"). Unknown values
are shown as "—", never invented.

## 4. Where the truth lives

- `styles.css` imports `tokens/*.css` and `_ds_bundle.css`; the latter IS
  `variants/23-apple-clean/styles.css`, the one stylesheet of the template.
- `components/<group>/<Name>/<Name>.prompt.md` documents props and placement
  per component; `<Name>.d.ts` is the exact prop contract.