· Wischleiste: .sg-chips--scroll
* Zustand kommt aus aria-pressed / aria-current – nie nur aus einer Klasse (WCAG 4.1.2). */
.sg-chips{display:flex;flex-wrap:wrap;gap:var(--sg-space-2)}
.sg-chips--scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:var(--sg-space-1)}
.sg-chips--scroll::-webkit-scrollbar{display:none}
.sg-chip{display:inline-flex;align-items:center;gap:var(--sg-space-1-5);flex:0 0 auto;min-height:2.25rem;padding:0 var(--sg-space-4);
border:1px solid var(--sg-color-border-strong);border-radius:var(--sg-radius-pill);background:var(--sg-color-surface);color:var(--sg-color-text);
font-family:var(--sg-font-family-body);font-size:var(--sg-font-size-sm);font-weight:var(--sg-font-weight-semibold);line-height:1.2;
text-decoration:none;white-space:nowrap;cursor:pointer;-webkit-appearance:none;appearance:none;
transition:background-color var(--sg-motion-fast) var(--sg-motion-easing),border-color var(--sg-motion-fast) var(--sg-motion-easing),color var(--sg-motion-fast) var(--sg-motion-easing)}
.sg-chip:hover{border-color:var(--sg-color-primary-text);color:var(--sg-color-primary-text)}
.sg-chip:focus-visible{outline:var(--sg-size-focus-width) solid var(--sg-color-focus);outline-offset:var(--sg-size-focus-offset)}
.sg-chip[aria-pressed="true"],.sg-chip[aria-current]:not([aria-current="false"]),
.sg-chip:is(.is-on,.is-active){ /* zweite Zeile: Brücke für Modul-Filter, bis das Skript aria-pressed gesetzt hat */
background:var(--sg-color-primary);border-color:var(--sg-color-primary);color:var(--sg-color-on-primary)}
.sg-chip__n{display:inline-flex;align-items:center;justify-content:center;min-width:1.5em;padding:0 var(--sg-space-1-5);border-radius:var(--sg-radius-pill);
background:var(--sg-color-bg-subtle);color:var(--sg-color-text-muted);font-size:var(--sg-font-size-xs);font-weight:var(--sg-font-weight-bold);font-variant-numeric:tabular-nums}
.sg-chip[aria-pressed="true"] .sg-chip__n,.sg-chip[aria-current]:not([aria-current="false"]) .sg-chip__n,.sg-chip:is(.is-on,.is-active) .sg-chip__n{background:var(--sg-color-on-primary);color:var(--sg-color-primary-text)}
.sg-chip--icon{padding-left:var(--sg-space-1-5)} /* Chip mit Symbol vorne */
.sg-chip svg,.sg-chip img{width:1.1em;height:1.1em;flex:0 0 auto}
.sg-chip[disabled],.sg-chip[aria-disabled="true"]{opacity:.5;cursor:not-allowed;pointer-events:none}
@media (forced-colors:active){.sg-chip[aria-pressed="true"]{outline:2px solid Highlight}}
/* Komponente: Formularfeld (.sg-field + .sg-input/.sg-select/.sg-textarea/.sg-check) – nur Tokens.
* Doku: /styleguide/#sgd-field
* Aufbau: .sg-field > label.sg-field__label[for] + p.sg-field__hint + Steuerelement + p.sg-field__error
* Zustände: :focus-visible (Fokusring), [aria-invalid="true"] / .sg-field--error, :disabled, [readonly] */
/* --- Sicherheitsnetz: Jedes Formularfeld zeigt bei Tastatur-/Eingabe-Fokus einen sichtbaren Ring –
* auch dort, wo Modul-CSS outline:none setzt (WCAG 2.4.7). Gilt nur auf Seiten mit Tokens. */
:is(input:not([type="hidden"]),select,textarea):focus-visible{outline:var(--sg-size-focus-width) solid var(--sg-color-focus)!important;outline-offset:var(--sg-size-focus-offset)!important}
.sg-field{display:flex;flex-direction:column;gap:var(--sg-space-1-5);min-width:0;margin:0 0 var(--sg-space-4)}
.sg-field__label{font-size:var(--sg-font-size-sm);font-weight:var(--sg-font-weight-semibold);color:var(--sg-color-text)}
.sg-field__req{color:var(--sg-color-danger);margin-left:2px}
.sg-field__hint{margin:0;font-size:var(--sg-font-size-sm);color:var(--sg-color-text-muted)}
.sg-field__error{display:flex;align-items:flex-start;gap:var(--sg-space-1);margin:0;font-size:var(--sg-font-size-sm);font-weight:var(--sg-font-weight-semibold);color:var(--sg-color-danger)}
.sg-field__error svg{width:1em;height:1em;flex:0 0 auto;margin-top:.15em}
.sg-input,.sg-select,.sg-textarea{width:100%;min-height:2.75rem;box-sizing:border-box;
padding:var(--sg-space-2) var(--sg-space-3);border:1px solid var(--sg-color-border-field);border-radius:var(--sg-radius-md);
background:var(--sg-color-surface);color:var(--sg-color-text);
font-family:var(--sg-font-family-body);font-size:max(16px,var(--sg-font-size-md));line-height:1.4;
transition:border-color var(--sg-motion-fast) var(--sg-motion-easing)}
.sg-input::placeholder,.sg-textarea::placeholder{color:var(--sg-color-text-subtle);opacity:1}
.sg-input:hover,.sg-select:hover,.sg-textarea:hover{border-color:var(--sg-color-text-muted)}
.sg-textarea{min-height:6rem;resize:vertical}
.sg-select{-webkit-appearance:none;appearance:none;padding-right:var(--sg-space-10);
background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
background-position:calc(100% - 20px) 55%,calc(100% - 15px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.sg-input[readonly],.sg-textarea[readonly]{background:var(--sg-color-bg-subtle);color:var(--sg-color-text-muted)}
.sg-input:disabled,.sg-select:disabled,.sg-textarea:disabled{opacity:.55;cursor:not-allowed}
.sg-field--error :is(.sg-input,.sg-select,.sg-textarea),:is(.sg-input,.sg-select,.sg-textarea)[aria-invalid="true"]{border-color:var(--sg-color-danger);border-width:2px}
/* Checkbox / Radio mit Label rechts – ganze Zeile klickbar, Klickfläche ≥ 24 px */
.sg-check{display:flex;align-items:flex-start;gap:var(--sg-space-2);min-height:var(--sg-size-target-min);cursor:pointer;font-size:var(--sg-font-size-base);color:var(--sg-color-text)}
.sg-check input{width:1.125rem;height:1.125rem;margin:.15em 0 0;flex:0 0 auto;accent-color:var(--sg-color-primary)}
/* Suchfeld mit Icon (Label unsichtbar, aber vorhanden) */
.sg-search{position:relative;display:flex;align-items:center}
.sg-search__icon{position:absolute;left:var(--sg-space-3);width:1.1em;height:1.1em;color:var(--sg-color-text-muted);pointer-events:none}
.sg-search .sg-input{padding-left:var(--sg-space-10)}
/* Komponente: Kartenraster (.sg-grid) – nur Tokens + Token-Breakpoints. Doku: /styleguide/#sgd-grid
* --products Produkt-/Rezept-/Deal-Kacheln: 5 · 4 (≤1199) · 3 (≤900) · 2 (≤640)
* --articles Artikel-/Deal-Karten mit Text: 3 · 2 (≤900) · 1 (≤640)
* Spalten immer minmax(0,1fr): lange Wörter sprengen die Spalten nicht. */
.sg-grid{display:grid;gap:var(--sg-space-4);align-items:start;min-width:0}
.sg-grid--products{grid-template-columns:repeat(5,minmax(0,1fr))}
.sg-grid--articles{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sg-space-6)}
@media (max-width:1199px){.sg-grid--products{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:900px){
.sg-grid--products{grid-template-columns:repeat(3,minmax(0,1fr))}
.sg-grid--articles{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sg-space-4)}
}
@media (max-width:640px){
.sg-grid{gap:var(--sg-space-3)}
.sg-grid--products{grid-template-columns:repeat(2,minmax(0,1fr))}
.sg-grid--articles{grid-template-columns:minmax(0,1fr)}
}
/* Komponente: Hero-Panel (.sg-hero-panel) – Kopfbereich von Detailseiten (Deal, Gutschein). Nur Tokens.
* Doku: /styleguide/#sgd-hero · Dunkelmodus automatisch über die Tokens.
* Marken-Heros (z. B. Vorpacklink in More-Orange) dürfen eigene Flächen haben, nutzen aber
* Radius/Abstände aus den Tokens. */
.sg-hero-panel{background:linear-gradient(180deg,var(--sg-color-surface),var(--sg-color-bg-subtle));border:1px solid var(--sg-color-border);
border-radius:var(--sg-radius-xl);padding:var(--sg-space-8) var(--sg-space-8);box-shadow:var(--sg-shadow-md)}
@media (max-width:640px){.sg-hero-panel{padding:var(--sg-space-6) var(--sg-space-5)}}
/* Komponenten: Seiten-Container, Seitenkopf, Breadcrumbs – nur Tokens. Doku: /styleguide/#sgd-layout
* .sg-container: EINE Breite für alle Seiten = Header-Breite (1240 px inkl. Seitenrand → 1192 px Inhalt),
* gleicher Abstand oben (20 px) → Breadcrumb und Titel stehen auf jeder Seite an derselben Stelle.
* --medium / --narrow ändern NICHT die Position, nur die maximale Zeilenbreite des Inhalts (linksbündig).
* .sg-page-header > nav.sg-breadcrumbs + p.sg-page-eyebrow + h1.sg-page-title + p.sg-page-lead + .sg-page-actions */
.sg-container{box-sizing:border-box;width:100%;max-width:var(--sg-layout-container-wide);margin-inline:auto;
padding-inline:var(--sg-layout-gutter);padding-block:var(--sg-space-5) var(--sg-space-20)}
.sg-container--medium > *{max-width:var(--sg-layout-container-medium)}
.sg-container--narrow > *{max-width:var(--sg-layout-container-narrow)}
@media (max-width:640px){.sg-container{padding-inline:var(--sg-layout-gutter-sm)}}
.sg-page-header{display:flex;flex-direction:column;gap:var(--sg-space-2);margin:0 0 var(--sg-space-6)}
/* Breadcrumb im Seitenkopf: zusammen mit dem Flex-Abstand genau so weit vom Titel wie überall (16 px) */
.sg-page-header > .sg-breadcrumbs{margin-bottom:var(--sg-space-2)}
.sg-page-eyebrow{margin:0;font-size:var(--sg-font-size-xs);font-weight:var(--sg-font-weight-bold);letter-spacing:.06em;text-transform:uppercase;color:var(--sg-color-primary-text)}
.sg-page-title{margin:0;font-family:var(--sg-font-family-display);font-size:var(--sg-font-size-4xl);font-weight:var(--sg-font-weight-semibold);
line-height:var(--sg-font-line-height-tight);letter-spacing:-.01em;color:var(--sg-color-text);text-wrap:balance}
.sg-page-lead{margin:0;max-width:64ch;font-size:var(--sg-font-size-lg);line-height:var(--sg-font-line-height-normal);color:var(--sg-color-text-muted)}
.sg-page-actions{display:flex;flex-wrap:wrap;gap:var(--sg-space-2);margin-top:var(--sg-space-2)}
/* Breadcrumbs: