④段整套同步（六节＋ P/S/F/J ＋模板）＋ open-design 移到技能根

一、④段整套同步（用户选候选 A） - 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。 - ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐： · 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。 · 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。 · 保留旧版有价值的要求：每项功能补齐做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；横向流程图每步写清页面／功能／操作／完成判据。 · 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。 · 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。 · 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。 - 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图＋用户路径）。二、open-design 移到技能根（用户选候选 A） - `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。 - `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。 - 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与同根技能（`<技能根>/<技能名>/`）两类分开写。 - open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。 - 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md 当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。三、验收 - check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝通过 225 / 失败 0 / 提示 27。 - 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。
2026-10-15 21:17:28 +08:00
1 parent fa0a9026c8
commit 5afeb6b78a
@@ -0,0 +1,583 @@
+# Design System Inspired by Starbucks
+
+> Category: E-Commerce & Einzelhandel
+> Globale Kaffeeeinzelhandelsmarke. Vierstufiges Grünsystem, warme Crème-Leinwand, vollrunde Buttons.
+
+## 1. Visuelles Thema & Atmosphäre
+
+Das Design-System von Starbucks ist ein **warmes, selbstsicheres Retail-Flaggschiff**, das das Grün der Schürze aus den Filialen auf jede Oberfläche trägt. Die Leinwand wechselt zwischen einem neutral-warmen Crème (`#f2f0eb`) und einem keramischen Gebrochenweiß (`#edebe9`) – Farben, die auf echte Ladenmaterialien verweisen: Papierservietten, Café-Wände, Holzoberflächen – während das charakteristische **Starbucks-Grün** (`#006241`) den Markenmoment auf Hero-Bändern, CTAs und dem Rewards-Erlebnis verankert. Die Grüntöne kommen in vier kalibrierten Abstufungen (Starbucks, Accent, House, Uplift), die jeweils einer bestimmten Flächenrolle zugeordnet sind, und Gold (`#cba258`) erscheint ausschließlich bei Rewards-Status-Zeremonien – nicht als allgemeiner Akzent.
+
+Typografie trägt den größten Teil der Markenstimme. Die hauseigene **SoDoSans**-Schrift (exklusiv für Starbucks) bespielt nahezu jede Oberfläche mit einem engen Letter-Spacing von `-0.16px` – sie wirkt selbstsicher und freundlich, ohne modemagazinartig streng zu sein. Ungewöhnlich: Die Rewards-Seite wechselt für bestimmte Headline-Momente zu einer warmen Serifenschrift (`"Lander Tall", "Iowan Old Style", Georgia`), die subtil an das nostalgische Gefühl einer Café-Kreidetafel erinnert. Und die Karriereseiten verwenden eine handgeschriebene Schrift (`"Kalam", "Comic Sans MS", cursive`) für persönliche Bechernamens-Akzente. Drei Schriften, drei Kontexte – das System ist diszipliniert darin, wann welche erscheint.
+
+Die Flächen atmen durch abgerundete Geometrie. Jeder Button ist eine 50px-Vollpille. Karten erhalten einen 12px-Rundungsradius. Der schwebende „Frap"-CTA – ein kreisrunder 56px-Bestellbutton in Green Accent (`#00754A`) – ist die signierte Tiefengeste des Produkts: Er schwebt unten rechts mit einem mehrschichtigen Schatten-Stack (`0 0 6px rgba(0,0,0,0.24)` Basis + `0 8px 12px rgba(0,0,0,0.14)` Umgebung) und verdichtet sich beim Drücken über `scale(0.95)`. Elevationen sind ansonsten zurückhaltend – Kartenschatten bleiben bei einem geflüsterten Alpha von `0.14/0.24`, die globale Navigation erhält einen leisen dreilagigen Schatten-Stack. Das gesamte System fühlt sich an wie saubere Café-Beschilderung: lesbar, warm und nie laut.
+
+**Wesentliche Merkmale:**
+- Vierstufiges grünes Markensystem (Starbucks / Accent / House / Uplift), jeweils einer eigenen Flächenrolle zugeordnet – kein einheitliches „Markengrün"
+- Gold ausschließlich für Rewards-Status-Momente reserviert; niemals als Allzweck-Akzent
+- Warm-neutrale Leinwand (`#f2f0eb` / `#edebe9`) statt kaltem Weiß – verweist auf Café-Materialien
+- Exklusive hauseigene Schrift (SoDoSans) mit engem Letter-Spacing `-0.16px` als universelle Markenstimme
+- Kontextspezifische Schriftwechsel: Serifenschrift (Lander Tall) für Rewards, Handschrift (Kalam) für Karriere-Bechernamen
+- Vollrunde Buttons (`50px` Radius) universell, `scale(0.95)` beim aktiven Drücken als charakteristische Mikrointeraktion
+- Schwebender kreisrunder „Frap"-CTA (`56px`, Green-Accent-Füllung, mehrschichtiger Schatten-Stack) – das signierte Elevationselement des Produkts
+- Geschenkkarten-Oberflächen als **fotografierte physische Produkte** gestaltet – jede Karte ist ein eigenständiges illustriertes Foto, keine generierte Grafik
+- 12px-Kartenradius + flüsterartig weiche Schatten halten Inhaltskarten flach mit einem Hauch von Abhebung
+- Rem-basierte Abstands-Skala verankert bei 1,6rem (~16px) = `--space-3`, hochskalierend bis 6,4rem (~64px)
+
+**Farbblock-Seitenrhythmus:** Crème-Hero → weiße Inhaltsbereiche → dunkelgrünes (`#1E3932`) Feature-Band mit weißem Text → Crème-Nutzungszone → dunkelgrüner (`#1E3932`) Footer mit Gold-/Weißtext – eine espressodunkle Rahmung um den hellen Hauptteil.
+
+## 2. Farbpalette & Rollen
+
+**Analysierte Seiten:** Startseite, Rewards, Geschenkkarten, Produktdetail (Pink Energy Drink), Produkternährung (Cold Brew).
+
+### Primär
+
+- **Starbucks Green** (`#006241`): Das historische Markengrün. Verwendet für h1-Überschriften, primäre Bereichsheadlines auf der Rewards-Seite und als zentrales Markensignal, wo eine einzige dominante Farbe benötigt wird.
+- **Green Accent** (`#00754A`): Ein etwas helleres, leuchtstärkeres Grün. Die primäre Füll-CTA-Farbe („Explore our afternoon menu", „See the spring menu") und die Füllung des schwebenden runden Frap-Buttons.
+- **House Green** (`#1E3932`): Das tiefe, fast schwarze Markengrün. Footer-Oberfläche, Feature-Band-Hintergründe, dunkle Rewards-Status-Oberflächen und das Headline-„Free coffee is just the beginning"-Hero-Band auf der Rewards-Seite.
+- **Green Uplift** (`#2b5148`): Ein sekundäres mitteltiefes Grün, sparsam für dekorative Akzente und Dunkelgradientenmomente eingesetzt.
+- **Green Light** (`#d4e9e2`): Eine helle Minzwäsche für Formularvalidierungs-Zustandstöne und helle grüne Nutzungsoberflächen.
+
+### Sekundär & Akzent
+
+- **Gold** (`#cba258`): Fast ausschließlich für Rewards-Status-Zeremonien reserviert – Gold-Tier-Callouts, Partner-Badges (SkyMiles, Bonvoy) und Akzente mit Premium-Anmutung. Niemals eine Allzweck-Markenfarbe.
+- **Gold Light** (`#dfc49d`): Weicheres Gold für Hintergrundwäschen auf Gold-Tier-Bereichen.
+- **Gold Lightest** (`#faf6ee`): Crème-goldene Seitenoberflächen-Wäsche, verwendet unter Partner-Bereichen auf der Rewards-Seite – verbindet den Gold-Akzent mit dem warmen neutralen System.
+
+### Oberfläche & Hintergrund
+
+- **White** (`#ffffff`): Primäre Karten- und Modal-Oberfläche. Auch Kartenfüllung auf Geschenkkarten-Kacheln.
+- **Neutral Cool** (`#f9f9f9`): Subtile kühl-graue Oberfläche für Dropdown-Menüs („Account"-Dropdown), Formular-Karten-Wraps und ruhige Nutzeroberflächen-Container.
+- **Neutral Warm** (`#f2f0eb`): Die warme Crème als **primäre Seitenleinwand** für Rewards-Nutzungszonen und Hero-Bänder.
+- **Ceramic** (`#edebe9`): Ein etwas wärmeres/dunkleres Crème für Zonentrennungen, sanfte Seitenbereichswäschen und das Rewards-Partner-Band.
+- **Black** (`#000000`): Tiefes Tintenschwarz, reserviert für den dunklen CTA-Streifen am Seitenanfang („Join now") und Hochkontrast-Anmelde-Buttons in der oberen Navigation.
+
+### Neutrale Töne & Text
+
+- **Text Black** (`rgba(0, 0, 0, 0.87)`): Primäre Überschriften- und Fließtextfarbe auf hellen Oberflächen. Kein reines Schwarz – ein 87%-Deckkraft-Schwarz, das wärmer wirkt.
+- **Text Black Soft** (`rgba(0, 0, 0, 0.58)`): Sekundärer/Metadaten-Text auf hellen Oberflächen.
+- **Text White** (`rgba(255, 255, 255, 1)`): Primäre Überschriften-/Fließtextfarbe auf dunkelgrünen Oberflächen.
+- **Text White Soft** (`rgba(255, 255, 255, 0.70)`): Sekundärtext auf dunkelgrünen Oberflächen – Footer-Link-Beschreibungen, Bildunterschriften.
+- **Rewards Green** (`#33433d`): Ein dediziertes gedämpftes Schiefergrün, ausschließlich für Textblöcke auf der Rewards-Seite verwendet – eine etwas „staubigere" Lesefarbe als Text Black, die „Reward-Oberfläche" signalisiert, ohne vollständiges Starbucks-Grün zu verwenden.
+
+### Semantisch & Akzent
+
+- **Red** (`#c82014`): Fehler- und Destruktiv-Zustände (Formular ungültig, destruktive Aktionen).
+- **Yellow** (`#fbbc05`): Warnzustand, klassischer Marken-Touch.
+- **Green Light** (`#d4e9e2` bei 33% Deckkraft = `hsl(160 32% 87% / 33%)`): Hintergrundton für gültige Formularfelder.
+- **Red Tint** (`hsl(4 82% 43% / 5%)`): Ungültiger Feldton auf Formularen.
+
+### Schwarz/Weiß-Alpha-Leitern
+
+Zwei parallele transparente Skalen für Überlagerung und Sekundärtextverwendung:
+- `rgba(0,0,0,0.06)` bis `rgba(0,0,0,0.90)` in 10%-Schritten – für dunkle Überlagerungen auf hellen Oberflächen
+- `rgba(255,255,255,0.10)` bis `rgba(255,255,255,0.90)` in 10%-Schritten – für helle Überlagerungen auf dunklen Oberflächen
+
+### Gradientensystem
+
+Keine strukturellen Gradienten-Token beobachtet. Die Oberflächenhierarchie ist durchgehend aus Volltonfarb-Blöcken aufgebaut – das System setzt auf seine fünfstufige Crème/Grün-Oberflächenpalette statt auf Gradienten.
+
+## 3. Typografieregeln
+
+### Schriftfamilie
+
+- **Primär:** `SoDoSans, "Helvetica Neue", Helvetica, Arial, sans-serif` – Starbucks' exklusive Unternehmensschrift, auf nahezu jeder Oberfläche verwendet
+- **Lade-Fallback:** `"Helvetica Neue", Helvetica, Arial, sans-serif` – was Nutzer sehen, bevor SoDoSans geladen ist
+- **Rewards-Serifenschrift:** `"Lander Tall", "Iowan Old Style", Georgia, serif` – für bestimmte Headline-Momente auf der Rewards-Seite für ein warmes, redaktionelles Gefühl
+- **Karriere-Handschrift:** `"Kalam", "Comic Sans MS", cursive` – ausschließlich für dekorative Bechernamen-Akzente auf Karriereseiten, in Anlehnung an die handgeschriebenen Namen auf Starbucks-Bechern
+
+Keine OpenType-Stilsets explizit bei `:root` aktiviert.
+
+### Hierarchie
+
+| Rolle | Größe | Gewicht | Zeilenhöhe | Letter Spacing | Hinweise |
+|------|------|--------|-------------|----------------|-------|
+| Display (text-10) | 5,0rem / 80px | 400–600 | 1,2 | -0.16px | Größtes Rewards/Hero-Display |
+| Jumbo (text-9) | 3,6rem / 58px | 400–600 | 1,2 | -0.16px | Sekundäre Hero-Überschriften |
+| Hero Large (text-8) | 2,8rem / 45px | 400–600 | 1,2–1,5 | -0.16px | Landing-Bereich-Headlines |
+| H1 | 24px | 600 | 36px | -0.16px | Primäre Überschrift in Starbucks-Grün |
+| H2 | 24px | 400 | 36px | -0.16px | Bereichstitel mit normalem Gewicht in Text Black |
+| Body Large | 19px | 400–600 | 33,25px (~1,75) | -0.16px | Hero-Einführungstext, Feature-Band-Fließtext |
+| Body (text-3) | 1,6rem / 16px | 400 | 1,5 (24px) | -0.01em | Standardmäßiger Fließtext |
+| Small (text-2) | 1,4rem / ~14px | 400–600 | 1,5 | -0.01em | Button-Beschriftung, Metadaten, Formular-Labels |
+| Micro (text-1) | 1,3rem / ~13px | 400 | 1,5 | -0.01em | Aktiver Float-Label-Zustand, Bildunterschriften-Mikrotext |
+| Button-Beschriftung | 14–16px | 400–600 | 1,2 | -0.01em | Alle Pill-Button-Beschriftungen |
+
+**Letter-Spacing-Token:**
+- `letterSpacingNormal`: `-0.01em` (Standard – eng, charakteristisch)
+- `letterSpacingLoose`: `0.1em` (betonte Großbuchstaben)
+- `letterSpacingLooser`: `0.15em` (Großbuchstaben-Stils-Labels, extreme Betonung)
+
+**Zeilenhöhen-Token:**
+- `lineHeightNormal`: `1,5` (Fließtext)
+- `lineHeightCompact`: `1,2` (Display/Buttons)
+
+### Prinzipien
+
+- **Enges negatives Tracking (`-0.01em`)** wird nahezu überall angewendet – das gesamte Produkt wirkt leicht komprimiert, was SoDoSans seine selbstsichere Präsenz verleiht, ohne gequetscht zu wirken.
+- **Gewichtsunterschiede tragen die Hierarchie, keine Größenunterschiede.** H1 und H2 teilen dieselbe Größe 24px/36px; nur Gewicht (600 vs. 400) und Farbe (Starbucks-Grün vs. Text Black) unterscheiden sie.
+- **Größen-Token verwenden rem, verankert bei `1rem = 10px`** auf dieser Seite (über einen `font-size: 62.5%`-Root-Trick). Also `1.6rem` = 16px, `2.4rem` = 24px usw. Die Skala ist semantisch (textSize-1 bis textSize-10), keine beliebigen Pixelwerte.
+- **Kontextspezifische Schriftwechsel** – Serifenschrift bei Rewards, Handschrift bei Karriere – sind bewusst und lokalisiert. Niemals innerhalb derselben Oberfläche mit dem primären Serifenlosen mischen.
+- **Fließtext geht nie zu reinem Schwarz** – er liegt bei `rgba(0,0,0,0.87)`, um zur Temperatur der warm-neutralen Leinwand zu passen.
+
+### Hinweis zu Schrift-Ersetzungen
+
+SoDoSans ist exklusiv für Starbucks (lizenziert von House Industries, nicht öffentlich verfügbar). Sinnvolle Open-Source-Alternativen:
+- **Inter** (Google Fonts) – ähnliche humanistische geometrische Proportionen, breite Gewichtsspanne
+- **Manrope** – etwas runder, ähnlich selbstsicheres Gefühl
+- **Nunito Sans** – wärmer, gute Café-Marken-Alternative
+
+Bei Verwendung einer Alternative das enge `-0.01em` / `-0.16px` Tracking auf Lesbarkeit prüfen; bei manchen Open-Source-Schriften ist stattdessen `-0.005em` besser geeignet.
+
+Lander Tall (die Rewards-Serifenschrift) ist eine Exklusivschrift – Open-Source-Alternativen: **Iowan Old Style** (bereits im Fallback), **Lora** oder **Source Serif Pro**. Kalam (Karriere-Handschrift) ist direkt auf Google Fonts verfügbar.
+
+## 4. Komponenten-Styling
+
+### Buttons
+
+**1. Primär Gefüllt – „Explore our afternoon menu / Sign up for free"**
+- Hintergrund: `#00754A` (Green Accent)
+- Text: `#ffffff`
+- Rahmen: `1px solid #00754A`
+- Radius: `50px` (vollrunde Pille)
+- Innenabstand: `7px 16px`
+- Schrift: SoDoSans, 16px, Gewicht 600, Letter-Spacing `-0.01em`
+- Aktiv-Zustand: `transform: scale(0.95)` über `--buttonActiveScale`
+- Übergang: `all 0.2s ease`
+
+**2. Primär Umrissen – „Give them a try / Start an order"**
+- Hintergrund: transparent
+- Text: `#00754A` (Green Accent)
+- Rahmen: `1px solid #00754A`
+- Gleicher Radius/Innenabstand/Aktiv-Zustand/Übergang wie Primär Gefüllt
+
+**3. Schwarz Gefüllt – „Join now"**
+- Hintergrund: `#000000`
+- Text: `#ffffff`
+- Rahmen: `1px solid #000000`
+- Radius: `50px`, Innenabstand: `7px 16px`
+- Schrift: 14px, Gewicht 600
+- Verwendet im CTA-Streifen am Seitenanfang und bei ähnlichen Konversionsmomenten
+
+**4. Dunkel Umrissen – „Sign in"**
+- Hintergrund: transparent
+- Text: `rgba(0, 0, 0, 0.87)` (Text Black)
+- Rahmen: `1px solid rgba(0, 0, 0, 0.87)`
+- Radius: `50px`, Innenabstand: `7px 16px`
+- Schrift: 14px, Gewicht 600
+
+**5. Grün-auf-Grün Invertiert – „See the spring menu"**
+- Hintergrund: `#ffffff`
+- Text: `#00754A`
+- Rahmen: `1px solid #ffffff`
+- Verwendet, wenn die Fläche hinter dem Button das dunkle House-Green-Band ist – weißer Button mit grünem Text statt gefüllter grüner Pille auf grünem Hintergrund
+
+**6. Umrissen auf Dunkel – „Learn more / Order now"**
+- Hintergrund: transparent
+- Text: `#ffffff`
+- Rahmen: `1px solid #ffffff`
+- Verwendet auf dunkelgrünen Feature-Bändern als sekundäre Aktion, gepaart mit einem weiß gefüllten CTA
+
+**7. Einwilligungs-Zustimmung (dunkelgrüne Variante)**
+- Hintergrund: `rgb(0, 130, 72)` (eine spezifische Variantenfarbe im Cookie-Einwilligungs-Modul)
+- Text: `#ffffff`
+- Kein Rahmen, `50px` Radius, `7px 16px` Innenabstand, 14px / Gewicht 400
+- Etwas heller als Green Accent – reserviert für die Zustimmen-Aktion im Einwilligungsbanner
+
+**8. Frap – Schwebender kreisrunder Bestellbutton**
+- Hintergrund: `#00754A` (Green Accent)
+- Symbol: `#ffffff`
+- Größe: `5.6rem / 56px` (Standard), `4rem / 40px` (Mini-Variante)
+- Radius: `50%` (vollständiger Kreis)
+- Feste Position unten rechts, `-0.8rem` Touch-Versatz für extra Tippkomfort
+- Schatten-Stack: Basis `0 0 6px rgba(0,0,0,0.24)` + Umgebung `0 8px 12px rgba(0,0,0,0.14)`
+- Aktiv-Zustand: Umgebungsschatten blendet auf `0 8px 12px rgba(0,0,0,0)` aus
+- Dies ist das signierte Elevationselement des Produkts – es schwebt über jeder gescrollten Oberfläche
+
+**9. Vollbreite Feedback-Reiter – „Provide feedback"**
+- Hintergrund: `#00754A`
+- Text: `#ffffff`
+- Radius: `12px 12px 0px 0px` (nur oben abgerundet)
+- Innenabstand: `8px 16px`
+- Schrift: 14px, Gewicht 400
+- Feste Position unten rechts, am Viewport-Rand befestigt
+
+### Karten & Container
+
+**Inhaltskarte (Standard)**
+- Hintergrund: `#ffffff` (`--cardBackgroundColor`)
+- Radius: `12px` (`--cardBorderRadius`)
+- Schatten: `0px 0px .5px 0px rgba(0,0,0,0.14), 0px 1px 1px 0px rgba(0,0,0,0.24)` (`--cardBoxShadow`)
+- Verwendet für: Feature-Karten, Menüpunkt-Kacheln, Rewards-Status-Panels
+
+**Geschenkkarten-Kachel**
+- Hintergrund: Illustrierte Fotografie füllt die Karte (kein einfarbiger Hintergrund)
+- Radius: ähnlich wie Karten (`~12px`, an den Ecken etwas enger)
+- Schatten: leichter als Standardkarte – diese werden wie physische Karten auf der Leinwand behandelt
+- Beschriftet nach Kategorie über dem Kartenraster (Spring, Thank You, Birthday, Celebration, Mother's Day, Appreciation, Encouragement, Milestones, Anytime)
+
+**Rewards-Status-Karten (Signatur der Rewards-Seite)**
+- Dreierspaltiges Raster: Bronze / Gold / Silber – jeweils ein dunkelgrünes (`#1E3932`) Panel mit:
+  - Farbigem Gradienten-/Farbkopfring
+  - Nummeriertem „Level"-Badge
+  - Status-Titel in großem SoDoSans Gewicht 600
+  - Sterne / Vorteile-Liste in weißem/transluzentem weißen Text
+  - Unterer „As you earn more stars…"-Fortschrittsunterschrift
+
+**Partner-Karte (Rewards)**
+- Hintergrund: `#faf6ee` (Gold Lightest) warme Crème-Oberfläche
+- Inhalt: Partner-Logos („SkyMiles", „Bonvoy") zentriert, mit beschreibendem Text darunter
+- Radius und Schatten folgen der Standard-Kartenspezifikation
+
+**Dropdown-Menü (Account-Dropdown, obere Navigation)**
+- Hintergrund: `#f9f9f9` (Neutral Cool)
+- Menüpunkte bei `24px / Gewicht 400` in Text Black
+- Kein Rahmen – nur Hintergrundflächenwechsel gegenüber weißer Navigation
+
+**Modal**
+- Innenabstand: `2.4rem` (`--modalPadding`)
+- Oberer Innenabstand: `8.8rem` (`--modalTopPadding`) – lässt Platz für Schließen-Button / Header
+- Kombinierter vertikaler Innenabstand: `11.2rem`
+- Radius folgt der Kartenspezifikation (`12px`)
+
+### Eingaben & Formulare
+
+**Floating-Label-Eingabe**
+- Label schwebt über dem Eingaberahmen, wenn fokussiert/ausgefüllt
+- Desktop-Label-Schriftgröße: `1.9rem` Standard, animiert zu `1.4rem` im aktiven Zustand
+- Mobil-Label-Schriftgröße: `1.6rem` Standard, animiert zu `1.3rem` im aktiven Zustand
+- Horizontaler Label-Versatz: `12px` vom linken Rand
+- Aktives Label-Translate: nach oben bis `-12px` mit `-50%`-Y-Translation
+- Feld-Innenabstand: `12px`
+- Horizontaler Formular-Innenabstand: `1.6rem`
+- Validierung: gültiges Feld erhält `rgba(green-light, 0.33)`-Ton; ungültiges Feld erhält `rgba(red, 0.05)`-Ton
+- Übergang: `0.3s option-label-marker-expansion cubic-bezier(0.32, 2.32, 0.61, 0.27)` bei aktivierter Eingabe
+
+**Options-Symbol (Checkbox/Radio)**
+- Innenabstand: `3px`
+- Verwendet die oben genannte checked-input-Cubic-Bezier-Animation (eine leicht „federnde" 2.32-Überschwing-Kurve)
+
+### Navigation
+
+**Globale Navigation (obere Leiste)**
+- Feste Position mit progressiven Höhen: `64px` xs → `72px` mobil → `83px` Tablet → `99px` Desktop
+- Schatten-Stack: `0 1px 3px rgba(0,0,0,0.1), 0 2px 2px rgba(0,0,0,0.06), 0 0 2px rgba(0,0,0,0.07)` – dreilagige weiche Abhebung
+- Links: Starbucks-Wortmarken-Logo, versetzt um `99px` (md) / `131px` (lg) vom linken Rand
+- Primäre Links inline in SoDoSans Gewicht 400–600: Menu · Rewards · Gift Cards
+- Rechts: Filiale-finden-Link + Sign in (umrissen) + Join now (schwarz gefüllt)
+
+**Unternavigation (zweite Leiste, z. B. interne Rewards-Navigation)**
+- Höhe: `53px` (globale Unternavigation) / `48px` (interne Unternavigation)
+- Typischerweise horizontale Tab-Gruppe unterhalb der globalen Navigation
+
+**Mobile Navigation**
+- Klappt unterhalb des Tablet-Breakpoints zu einem Hamburger-Drawer zusammen
+- Schwebender Frap-Button bleibt unten rechts, unabhängig vom Navigationszustand
+
+### Bildbehandlung
+
+- **Hero-Fotografie**: Produktfotos (Getränke in klarem Glas mit farbigen Hintergründen – Koralle, Salbei, warmes Bernstein) belegen ca. 40vw eines Split-Hero-Layouts; Text belegt die anderen 60vw (`--headerCrateProportion: 40vw` / `--contentCrateProportion: 60vw`)
+- **Geschenkkarten-Illustrationen**: Jede Karte ist ein eigenständiges illustriertes Foto (Malerei-Anmutung, handgezeichnet wirkend, warme Farbpalette). Niemals generische generierte Grafiken.
+- **Rewards-Zeremonie-Bilder**: Fotos von Starbucks-Rewards-App-Bildschirmen, in der Hand gehalten, winklige Kompositionen – Produkt-im-Kontext-Fotografie.
+- **Menü-Thumbnails**: Quadratische oder 4:3-Produktfotografie mit sauberen weißen/crèmefarbenen Hintergründen, leichter weicher Schlagschatten um das Glas.
+- **Bildeinblenden**: `opacity 0.3s ease-in` Übergang beim Bildladen (`--imageFadeTransition`).
+
+### Feature-Band (dunkelgrüner Hero-Streifen)
+
+Vollbreites `#1E3932`-Band (House Green) mit:
+- Links: weiße Überschrift + Unterzeile + CTA-Reihe
+- Rechts: Produktfotografie oder Illustration
+- Teilungsverhältnis ~40/60 oder 50/50 je nach Bereich
+- Weißer Text durchgehend mit `rgba(255,255,255,0.70)` für sekundäre Texte
+- CTAs folgen der Paarung Grün-auf-Grün Invertiert (weiß gefüllt) + Umrissen auf Dunkel (weißer Rahmen)
+
+### Expander / Akkordeon
+
+- Dauer: `300ms` (`--expanderDuration`)
+- Timing-Kurve: `cubic-bezier(0.25, 0.46, 0.45, 0.94)` – ein gleichmäßiges Ease-out
+- Für FAQ-Bereiche auf Rewards- und Geschenkkarten-Seite verwendet
+
+### Cookie-Einwilligungs-Modul
+
+Dunkelgrüne Modal-Karte oben auf der Seite mit „Agree"-Button (grün gefüllt) und „Manage preferences"-Button (umrissen). Erscheint beim ersten Besuch; schließbar.
+
+### Produktdetail-Komponenten (PDP-Signatur-Cluster)
+
+Ein wiederkehrender Komponenten-Cluster auf Menü-Produktseiten (z. B. `/menu/product/40498/iced` für ein Getränkedetail, `/menu/product/.../nutrition` für Nährwertangaben). Diese erweitern das Komponenteninventar ohne Token-Änderungen.
+
+**Größenauswahl**
+- Horizontale Reihe mit 4 Becher-Symbol-Buttons (Tall / Grande / Venti / Trenta)
+- Jedes Element: Becker-Silhouetten-Symbol oben, Größenname darunter (16/700 in Starbucks-Grün), Flüssigunzen-Unterschrift (13/400 in Text Black Soft)
+- Aktiver Zustand: ein grüner kreisförmiger Ring-Umriss (`2px solid #00754A`) um das ausgewählte Becher-Symbol
+- Inaktiv: kein Ring, gleiche Typografie
+- Vollbreite Reihe, gleichmäßiger Abstand
+- Container-Radius: `12px` oder flach; einzelne Symbole sind `50%` kreisförmig
+- Innenabstand: `16px 24px`
+
+**Add-in / Milch-Auswahl (umrahmtes Rechteck)**
+- Hintergrund: `#ffffff`
+- Rahmen: `1px solid #d6dbde` (Eingabe-Rahmen)
+- Radius: `4px`
+- Vollbreite in seiner Spalte
+- Schwebender Label oberhalb des oberen Rahmens: „Add-ins" / „Milk" / „Add-ins" – 13/700 in Text Black, Großbuchstaben, `0.325px` Letter-Spacing
+- Angezeigter Wert zentriert (z. B. „Ice", „Coconut", „Strawberry Fruit Inclusions scoop"): 16/400 Text Black
+- Chevron-nach-unten-Symbol rechts in Text Black Soft
+- Fokus: Rahmen wechselt zu Green Accent (`#00754A`)
+
+**Numerischer Stepper**
+- Eingebettet in eine Add-in-Zeile, wenn eine Menge erforderlich ist (z. B. Strawberry Fruit Inclusions scoop)
+- `−`-Minus-Button + Zahl + `+`-Plus-Button, alle inline rechts des Labels
+- Buttons: kreisförmig `32×32px` mit `1px solid #d6dbde` Rahmen, neutral-graues Symbol
+- Zahl: 16/700 Text Black zentriert
+
+**Anpassen-Button**
+- Hintergrund: `#ffffff`
+- Text: `#00754A` (Green Accent)
+- Rahmen: `1.5px solid #00754A`
+- Radius: `50px` (vollrunde Pille)
+- Innenabstand: `14px 40px` (großzügiger als Standard-Pillen – dies ist eine sekundäre primäre Aktion)
+- Beschriftung: „Customize" mit einem goldenen Funken-✨-Symbol links eingebettet
+- Verwendet für: Einsteigen in den Getränke-Anpassungsfluss nach Größen-/Milchauswahl
+
+**Zum-Bestellung-Hinzufügen-Button (PDP)**
+- Hintergrund: `#00754A` (Green Accent)
+- Text: `#ffffff`
+- Radius: `50px`
+- Innenabstand: `14px 32px`
+- Fixiert oben rechts der Produktkarte und/oder rechtsbündig im Filialverfügbarkeits-Band
+- Gleiches `scale(0.95)`-Aktiv-Verhalten wie andere primäre CTAs
+
+**Rewards-Kosten-Pille – „200★ item"**
+- Hintergrund: transparent
+- Rahmen: `1px solid #cba258` (Gold)
+- Text: `#cba258` (Gold)
+- Radius: `50px` (vollrunde Pille)
+- Innenabstand: `4px 12px`
+- Inhalt: „200★ item", wobei `★` ein kleines ausgefülltes Stern-Glyphe ist – zeigt die für die Einlösung dieses Artikels benötigten Rewards-Sterne
+- Schrift: Proxima Nova 13/700 mit `0.5px` Letter-Spacing
+- Nur auf Produkten verwendet, die mit Rewards einlösbar sind
+
+**Produktbeschreibungs-Band**
+- Vollbreites dunkelgrünes Band (`#1E3932` House Green)
+- Enthält von oben nach unten:
+  1. Rewards-Kosten-Pille (gold), falls zutreffend
+  2. Produktbeschreibungs-Fließtext in Weiß (16/400/1.5)
+  3. Nährwert-Zusammenfassung inline („140 calories, 25g sugar, 2.5g fat") mit Info-Symbol-Tooltip – 14/700 weiß
+  4. „Full nutrition & ingredients list" umrahmter weißer Pill-Button auf Grün
+- Innenabstand: `32px` vertikal
+- Erscheint unterhalb des primären Produktkopf-Bands
+
+**Zutaten / Nährwerttabelle**
+- Zweispaltiges Layout auf der Nährwert-Seite
+- Linke Spalte: „Ingredients"-Header + Liste oder „Not available for this item"-Platzhaltertext mit erklärendem Absatz in Text Black Soft 14/400
+- Rechte Spalte: „Nutrition"-Header + Label/Wert-Zeilen
+- Jede Zeile: Nährstoff-Label (Proxima Nova 14/400) links, Wert (z. B. „140 calories", „25g", „205 mg**") rechts, getrennt durch eine `1px solid #e7e7e7`-Haarlinie darunter
+- Fußnote für Koffein-/Sternchen-Markierungen in 13/400 Text Black Soft unten
+- Wiederverwendbares Muster für regulierungskonforme Nährwerttabellen
+
+**Filialverfügbarkeits-Auswahl**
+- Erscheint auf dem dunkelgrünen Feature-Band oberhalb der Größenauswahl-Reihe
+- Vollbreites abgerundetes Rechteck mit transparent-weißem Inneren
+- Text: „For item availability, choose a store" in Weiß, 14/400
+- Rechte Seite: Chevron-nach-unten-Affordanz + Einkaufstasche-SVG-Symbol in weißem Umriss
+- Radius: `4px`
+- Höhe: ~48px
+
+**PDP-Breadcrumb**
+- „Menu / Refreshers / Pink Energy Drink"-Pfad über dem Produkttitel
+- Trennzeichen: `/`-Schrägstrich in Text Black Soft
+- Aktuelle Seite unverlinkt, vorherige Seiten als unterstrichene Green-Accent-Links
+- Schrift: 14/400 Proxima Nova
+- Erscheint auf allen PDP-Seiten
+
+**Zurück-Chevron-Link (PDP-Nährwert-/Detail-Unterseiten)**
+- „← Back"-Textlink über Bereichsüberschriften auf der Nährwertseite
+- Text in Green Accent (`#00754A`) 14/700 Proxima Nova
+- Linkes Chevron `<` im gleichen Grün
+- Alternative zum vollständigen Breadcrumb auf tiefen Unterseiten
+
+## 5. Layout-Prinzipien
+
+### Abstands-System
+
+Rem-basierte semantische Skala (verankert `1rem = 10px`):
+
+| Token | Rem | Pixel | Typische Verwendung |
+|-------|-----|--------|-------------|
+| `--space-1` | `0.4rem` | 4px | Engster Inline-Innenabstand |
+| `--space-2` | `0.8rem` | 8px | Kleiner Abstand, vertikaler Button-Innenabstand |
+| `--space-3` | `1.6rem` | 16px | Standard – Karten-Innenabstand, äußerer Rinnstein xs |
+| `--space-4` | `2.4rem` | 24px | Bereich-Innenabstand, äußerer Rinnstein md |
+| `--space-5` | `3.2rem` | 32px | Hauptabstand zwischen Bereichen |
+| `--space-6` | `4rem` | 40px | Große Abstände, äußerer Rinnstein lg, Header-Kiste |
+| `--space-7` | `4.8rem` | 48px | Bereich-zu-Bereich-Abstand |
+| `--space-8` | `5.6rem` | 56px | Sehr großes Atmen – Frap-Höhe |
+| `--space-9` | `6.4rem` | 64px | Breitester Bereich-Innenabstand |
+
+**Rinnstein-Token:**
+- `--outerGutter: 1.6rem` (16px, Standard / Mobil)
+- `--outerGutterMedium: 2.4rem` (24px, Tablet)
+- `--outerGutterLarge: 4.0rem` (40px, Desktop)
+
+**Universelle Rhythmus-Konstante:** `1.6rem` (16px) erscheint auf jeder Seite als Standard-Außenrinnstein, Karten-Innenabstand-Basis und Textgröße 3 Fließtext – die am häufigsten verwendete Abstandseinheit des Systems.
+
+### Raster & Container
+
+- Spaltenbreiten-Skala: `--columnWidthSmall: 343px` / `Medium: 500px` / `Large: 720px` / `XLarge: 1440px`
+- Geschenkkarten-Raster verwendet ein responsives 3-5-spaltiges Raster mit `~343px`-Kacheln
+- Rewards-Status-Bereich: 3-spaltiges dunkelgrünes Panel bei `lg+`-Breakpoints
+- Hero: asymmetrische Aufteilung 40% (Bild) / 60% (Inhalt) über `--headerCrateProportion` / `--contentCrateProportion`
+
+### Leerraumphilosophie
+
+Leerraum vermittelt das Gefühl von „reichlich Platz im Café". Bereichs-Innenabstände sind großzügig (40–64px). Inhaltsblöcke werden durch Leerraum statt durch Trennlinien getrennt. Die Crème-Leinwand (`#f2f0eb`) ist selbst ein visueller Atemraum zwischen weißen Karten und grünen Feature-Bändern.
+
+### Rahmenradius-Skala
+
+| Wert | Verwendung |
+|-------|-----|
+| `12px` | Karten, Modals, Menüpunkt-Kacheln (`--cardBorderRadius`) |
+| `12px 12px 0 0` | Vollbreiter Feedback-Reiter (nur oben abgerundet) |
+| `50px` | Alle Buttons – vollrunder Pillen-Radius (`--buttonBorderRadius`) |
+| `50%` | Kreisförmige Symbole, Frap-Schwebbutton, Avatar-Thumbnails |
+| Spezial | `3.3333%/5.298%` elliptisch für Starbucks-Visa-Karten-Mockups (`--svcRoundedCorners`) |
+
+## 6. Tiefe & Elevation
+
+| Ebene | Behandlung | Verwendung |
+|-------|-----------|-----|
+| Karte | `0 0 0.5px rgba(0,0,0,0.14), 0 1px 1px rgba(0,0,0,0.24)` | Standard-Inhaltskarten – ein flüsterartig weicher Doppelschatten |
+| Globale Navigation | `0 1px 3px rgba(0,0,0,0.1), 0 2px 2px rgba(0,0,0,0.06), 0 0 2px rgba(0,0,0,0.07)` | Dreilagige weiche Abhebung auf der festen oberen Leiste |
+| Frap Basis | `0 0 6px rgba(0,0,0,0.24)` | Basis-Halo um den schwebenden kreisrunden CTA |
+| Frap Umgebung | `0 8px 12px rgba(0,0,0,0.14)` | Gestapelter gerichteter Umgebungsschatten – lässt den Frap nach vorne schweben |
+| Geschenkkarte | Leichter Schlagschatten um illustriertes Foto | Physisches-Karten-Gefühl für Geschenkkarten-Kacheln |
+| Starbucks Card (SVC) | `drop-shadow(0 4px 1px rgba(0,0,0,0.11)) drop-shadow(0 0 2px rgba(0,0,0,0.24))` | Gestapelte SVG-Schlagschatten für Starbucks-Card-Visuals |
+
+**Schatten-Philosophie:** Flüsterartig weich, geschichtet über Vollton – das System greift nie auf einen einzelnen schweren Schlagschatten zurück. Stattdessen werden 2–3 niedrig-Alpha-Schatten mit unterschiedlichen Versätzen gestapelt, um reales Umgebungs- und Direktlicht zu simulieren. Der Frap-Button ist das am stärksten elevierte Element auf jeder Seite.
+
+### Dekorative Tiefe
+
+- **Kein Gradientensystem** – Oberflächen sind einfarbige Farbblöcke
+- **Farbblock-Bandierung** erzeugt wahrgenommene Tiefe (dunkelgrüne Bänder wirken als „vertiefte Feature-Zonen" zwischen Crème/weißen Hauptbereichen)
+- **SVG-Filter-Schatten** auf Starbucks-Card-Visuals verleihen eine leichte dreidimensionale Physikalität ohne box-shadow
+
+## 7. Dos und Don'ts
+
+### Richtig machen
+- Neutral Warm (`#f2f0eb`) oder Ceramic (`#edebe9`) als Seitenleinwand statt reinem Weiß verwenden – das warme Crème ist das Markenzeichen
+- Die Grünstufen ihrer vorgesehenen Flächenrolle zuordnen – Starbucks Green für Überschriften, Green Accent für CTAs, House Green für tiefe Bänder, Uplift für Dekoratives
+- Tracking bei `-0.01em` / `-0.16px` für SoDoSans im gesamten System eng halten
+- 50px vollrunden Pillen-Radius auf jedem Button ohne Ausnahme verwenden
+- `transform: scale(0.95)` als universellen Button-Aktiv-Zustand anwenden
+- Gold ausschließlich für Rewards-Status-Zeremonienmomente reservieren
+- SoDoSans für fast alles verwenden; nur für Rewards-Redaktions-Headlines zur Lander-Tall-Serifenschrift wechseln; Kalam-Handschrift für Karriere-„Bechernamen"-Momente reservieren
+- 2–3 niedrig-Alpha-Schatten statt eines schwereren Schlagschattens für Elevation schichten
+- Den kreisrunden Frap-CTA als dauerhaft schwebenden Bestelleinstieg auf jeder Shopping-Oberfläche verwenden
+- Die Crème-Leinwand zwischen Inhaltskarten atmen lassen – Leerraum statt Trennlinien
+
+### Nicht machen
+- Nicht reines Weiß als Seitenleinwand verwenden – die warme Crème-Temperatur ist bedeutungstragend
+- Nicht „ein Markengrün" wählen – das Vier-Grün-System ist beabsichtigt; ausschließlich `#006241` überall einzusetzen flacht die Marke ab
+- Gold nicht als Allzweck-Akzent verwenden – es ist nur ein Rewards-Signal
+- Die Ecken von Buttons nicht eckig machen – die 50px-Pille ist universell
+- Keine Gradientenfüllungen einführen – das System ist durchgehend Farbblock
+- H1 und H2 nicht durch Größe kontrastieren – die Hierarchie entsteht durch Gewicht + Farbe (600 Starbucks-Grün vs. 400 Text Black)
+- Nicht reines Schwarz für Fließtext verwenden – `rgba(0,0,0,0.87)` passt zur warmen Leinwand
+- Das `scale(0.95)`-Aktiv-Feedback bei Buttons nicht weglassen – es ist eine charakteristische Mikrointeraktion
+- Keine einzelnen schweren Schatten verwenden; immer 2–3 niedrig-Alpha-Schatten schichten
+- Keine Serifenschriften oder Handschriften in den Haupt-Shopping-Fluss einführen – sie gehören zu Rewards- und Karriere-Kontexten
+
+## 8. Responsives Verhalten
+
+### Breakpoints
+
+Aus Komponenten-Breiten-Token und progressiven Navigationshöhen abgeleitet:
+
+| Name | Breite | Wesentliche Änderungen |
+|------|-------|-------------|
+| xs | < 480px | Globale Navigation 64px; Hamburger-Menü; einspaltiges Layout; Pill-Buttons vollbreit |
+| Mobil | 480–767px | Globale Navigation 72px; Geschenkkarten-Raster 2-spaltig; Karten-Innenabstand enger |
+| Tablet | 768–1023px | Globale Navigation 83px; Geschenkkarten-Raster 3-spaltig; Hero-Aufteilung beginnt |
+| Desktop | 1024–1439px | Globale Navigation 99px; Geschenkkarten-Raster 4-spaltig; vollständiger asymmetrischer Hero 40/60 |
+| XLarge | 1440px+ | Inhalt begrenzt auf `--columnWidthXLarge`; Geschenkkarten-Raster 5-spaltig; zusätzlicher Crème-Rand |
+
+### Touch-Targets
+
+- Pill-Buttons bei `7px 16px` Innenabstand messen ~32px Höhe – unterhalb des 44px WCAG-AAA-Minimums für rein berührungsbasierte Oberflächen. Auf Mobilgeräten kann der Button-Innenabstand visuell erweitert werden, um das Minimum zu erfüllen.
+- Schwebender kreisrunder Frap-Button bei `56px` liegt deutlich über dem Minimum.
+- Frap verwendet `--frapTouchOffset: calc(-1 * .8rem)`, um den Tippbereich 8px über den visuellen Rand hinaus zu erweitern.
+- Formular-Float-Label-Eingaben vergrößern ihre Label-Schriftgröße auf Mobilgeräten (1.6rem Basis vs. 1.9rem Desktop) – einfacher zu tippen und auf Armlänge zu lesen.
+
+### Zusammenklapps-Strategie
+
+- **Globale Navigationshöhe skaliert progressiv**: 64 → 72 → 83 → 99px über Breakpoints, kein einzelner Wert
+- **Hero-Aufteilung klappt zusammen**: 40/60-asymmetrische Aufteilung → gestapelt (Bild oben, Inhalt darunter) auf Mobil
+- **Geschenkkarten-Raster**: 5-spaltig → 4-spaltig → 3-spaltig → 2-spaltig → 1-spaltig über Breakpoints mit angepassten Kartenbreiten
+- **Feature-Bänder**: Bleiben vollbreit, aber Text + Bilder stapeln sich vertikal auf Mobil
+- **Äußerer Rinnstein skaliert**: 16px → 24px → 40px mit wachsendem Viewport
+- **Rewards-3-Spalten-Status-Panels**: Stapeln sich auf Mobilgeräten zu einer einzelnen Spalte
+
+### Bildverhalten
+
+- Hero-Produktfotografie wird auf Mobilgeräten vertikal enger beschnitten; Inhalt wird zum visuellen Anker
+- Geschenkkarten-Illustrationen bewahren das Seitenverhältnis; Kartenraster fließt neu
+- `opacity 0.3s ease-in` Einblend-Übergang beim Bildladen (verhindert abruptes Aufpoppen)
+- Rewards-App-in-Hand-Fotografie skaliert proportional; dehnt sich nie
+
+## 9. Agent-Prompt-Leitfaden
+
+### Schnelle Farbreferenz
+
+- Primärer CTA: „Green Accent (`#00754A`)"
+- Primärer CTA-Text: „White (`#ffffff`)"
+- Marken-Überschrift: „Starbucks Green (`#006241`)"
+- Feature-Band / Footer: „House Green (`#1E3932`)"
+- Seitenleinwand: „Neutral Warm (`#f2f0eb`)"
+- Kartenleinwand: „White (`#ffffff`)"
+- Überschriften-Text auf Hell: „Text Black (`rgba(0,0,0,0.87)`)"
+- Fließtext auf Hell: „Text Black Soft (`rgba(0,0,0,0.58)`)"
+- Fließtext auf Dunkelgrün: „Text White Soft (`rgba(255,255,255,0.70)`)"
+- Rewards-Akzent: „Gold (`#cba258`)"
+- Rewards-Text: „Rewards Green (`#33433d`)"
+- Destruktiv: „Red (`#c82014`)"
+
+### Beispiel-Komponenten-Prompts
+
+1. „Erstelle einen primären Starbucks-CTA-Pill-Button mit Green-Accent-(`#00754A`)-Hintergrund, weißem Text ‚Explore our afternoon menu', SoDoSans-Schrift bei 16px Gewicht 600 mit `-0.01em` Letter-Spacing, `50px` Rahmenradius (vollrunde Pille), `7px 16px` Innenabstand. Wende `transform: scale(0.95)` als Aktiv-Zustand mit einem `0.2s ease`-Übergang an."
+
+2. „Gestalte eine Inhaltskarte mit White-(`#ffffff`)-Hintergrund bei `12px` Rahmenradius, geschichtetem Schatten `0 0 0.5px rgba(0,0,0,0.14), 0 1px 1px rgba(0,0,0,0.24)`. Inhalt mit `16–24px` (`--space-3` bis `--space-4`) innen polstern. Auf einer Neutral-Warm-(`#f2f0eb`)-Seitenleinwand mit `16px` Abstand zu Geschwisterelementen platzieren."
+
+3. „Baue den schwebenden kreisrunden Frap-Bestellbutton – `56px` Durchmesser, Green-Accent-(`#00754A`)-Füllung, weißes Einkaufstasche-Symbol zentriert. Geschichteter Schatten: `0 0 6px rgba(0,0,0,0.24)` + `0 8px 12px rgba(0,0,0,0.14)`. Feste Position unten rechts mit `-0.8rem` Touch-Versatz. Aktiv-Zustand lässt den Umgebungsschatten auf `0 8px 12px rgba(0,0,0,0)` mit `scale(0.95)` verschwinden."
+
+4. „Baue ein dunkelgrünes Feature-Band – vollbreiter Bereich mit House-Green-(`#1E3932`)-Hintergrund. Linke Spalte: weißes SoDoSans-h2 bei 24px Gewicht 600, gefolgt von einem Text-White-Soft-(`rgba(255,255,255,0.70)`)-Fließtextabsatz und einer CTA-Reihe mit zwei Buttons (weiß gefüllt mit Green-Accent-Text für primär, Outlined-on-Dark weißer Rahmen für sekundär). Rechte Spalte: Produktfotografie. Teilungsverhältnis 40/60, unterhalb von `768px` vertikal gestapelt."
+
+5. „Erstelle eine Rewards-Status-Karte – House-Green-(`#1E3932`)-Panel mit `12px` Rahmenradius, farbigem Gradienten-Kopfstreifen (Bronze/Silber/Gold-Tier). Titel in SoDoSans 24px Gewicht 600 in Weiß. Vorteile-Liste als weiße Aufzählungspunkte mit `rgba(255,255,255,0.70)` sekundären Unterschriften. Unten Fortschrittstext in Text White Soft. 3 Panels bei `lg+` im Raster, Einzelspalte auf Mobil."
+
+6. „Gestalte eine Geschenkkarten-Kachel – Kartenradius entspricht `12px`, füllt sich mit einem illustrierten Foto (handgemalte Aquarell-Anmutung) als gesamte Oberfläche. Subtiler Schlagschatten lässt sie wie eine physische Karte auf der Crème-Leinwand wirken. Unter einem Kategorie-Label (‚Spring', ‚Thank You', ‚Birthday') in SoDoSans 24px Gewicht 400 oberhalb des Rasters gruppieren."
+
+7. „Erstelle einen Starbucks-Produktdetail-Header – House-Green-(`#1E3932`)-Band mit Breadcrumb ‚Menu / Refreshers / Pink Energy Drink' in 14/400 Weiß über dem Produkttitel in SoDoSans 32/700 Großbuchstaben Weiß. Produktfoto zentriert unterhalb des Titels. Unterhalb des Fotos: eine 4-spaltige Größenauswahl-Reihe – jeder Becher-Symbol-Button zeigt eine vertikale Becker-Silhouette, Größenname (‚Tall' / ‚Grande' / ‚Venti' / ‚Trenta') in 16/700 Weiß und Flüssigunzen in 13/400 Text White Soft. Ausgewählte Größe umhüllt das Becher-Symbol mit einem `2px solid #00754A` kreisförmigen Ring."
+
+8. „Baue einen Starbucks-Anpassungsfluss – unter der Größenauswahl 3 gestapelte umrahmte-Rechteck-Eingabe-Reihen (weißer Hintergrund, `1px solid #d6dbde` Rahmen, `4px` Radius). Jede hat ein schwebendes Label (‚Add-ins', ‚Milk', ‚Add-ins') oberhalb des oberen Rahmens in 13/700 Text Black Großbuchstaben. Wert zentriert (z. B. ‚Ice', ‚Coconut'). Rechts: Chevron-nach-unten in Text Black Soft. Für die Scoop-Zeile einen numerischen Stepper einbetten (`−` `1` `+` mit kreisförmigen `32px` umrahmten Buttons). Unterhalb aller drei Felder: umrahmte grüne ‚Customize'-Pille mit Gold-Funken-Symbol, `50px` Radius, `14px 40px` Innenabstand. Mit einer Green-Accent-gefüllten ‚Add to Order'-Pille in derselben Reihe kombinieren."
+
+9. „Gestalte ein Starbucks-Produktbeschreibungs-Band – vollbreites House-Green-(`#1E3932`) unterhalb des Produktheaders. Oben: eine goldumrahmte ‚200★ item'-Rewards-Kosten-Pille (`50px` Radius, `4px 12px` Innenabstand, Gold-`#cba258`-Rahmen und -Text). Darunter: Produktbeschreibung in Weiß 16/400/1.5. Nährwert-Inline-Zusammenfassung in Weiß 14/700 (‚140 calories, 25g sugar, 2.5g fat') mit Info-Symbol-Tooltip. Umrahmter-Weiß-auf-Grün-Pill-Button ‚Full nutrition &amp; ingredients list'. 32px vertikaler Innenabstand."
+
+10. „Erstelle eine Starbucks-Nährwerttabelle – zweispaltiges Layout innerhalb einer White-Karte. Linke Spalte: ‚Ingredients'-Header (24/400 Text Black), gefolgt von Zutatenliste oder ‚Not available for this item'-Platzhalterabsatz in 14/400 Text Black Soft. Rechte Spalte: ‚Nutrition'-Header, dann Label/Wert-Zeilen (Nährstoffname links, Wert rechts), getrennt durch `1px solid #e7e7e7`-Haarlinien. Typografie: Labels in 14/400 Text Black, Werte in 14/700 Text Black rechtsbündig. Fußnoten-Sternchen-Markierungen in 13/400 Text Black Soft unten."
+
+### Iterations-Leitfaden
+
+Beim Verfeinern bestehender Screens, die mit diesem Design-System erstellt wurden:
+1. Fokus auf EINE Komponente auf einmal
+2. Auf spezifische Farbnamen und Hex-Codes aus diesem Dokument verweisen
+3. Natürliche Sprachbeschreibungen (‚warme Crème-Leinwand', ‚vierstufiges Grünsystem') neben exakten Werten verwenden
+4. Die 50px-Pille + `scale(0.95)`-Aktiv-Zustand universell beibehalten
+5. Prüfen, ob Grüntöne ihrer korrekten Rolle zugeordnet sind (Green Accent für CTA, Starbucks Green für Überschrift, House Green für Band)
+6. Keine Gradienten einführen – das System ist Farbblock
+7. SoDoSans-Tracking bei `-0.01em` / `-0.16px` überall beibehalten
+
+### Bekannte Lücken
+
+- SoDoSans ist eine exklusive Schrift, die nicht auf Google Fonts verfügbar ist – bei öffentlicher Implementierung Inter oder Manrope als Ersatz verwenden und den Tausch dokumentieren
+- Lander Tall (Rewards-Serifenschrift) ist ebenfalls exklusiv – Ersatz durch Iowan Old Style, Lora oder Source Serif Pro
+- Spezifische Animations-Timings pro Komponente jenseits der wenigen dokumentierten (`--duration: 0.4s`, `--iconTransition: all ease-out 0.2s`, `--expanderDuration: 300ms`) sind nicht für jede interaktive Oberfläche erfasst
+- Vollständiges Styling des Formularfehler-Zustands (rote Rahmenbreite, Symbolplatzierung) im Tint-Token sichtbar, aber nicht vollständig extrahiert
+- Karriereseiten-spezifische Komponenten (Bechernamen-Karte, Such-Radio-Raster) werden in Token-Namen referenziert, sind aber in dieser Extraktion nicht abgedeckt
+- Starbucks-Visa-Karten / Starbucks-Card (SVC) detaillierte Mockup-Specs werden durch `--svcRoundedCorners`- und `--svcShadowFilter`-Token angedeutet, sind aber nicht vollständig dokumentiert