/* Komponente: KI-Hinweis auf Bildern (ai-media.php) – bewusst dezent: kleines Overlay-Badge oben rechts. * Rahmen so groß wie das Bild (inline-block); füllt das Bild seinen Container (Karten-Medien, Seitenverhältnis), * füllt der Rahmen ihn ebenfalls. Ausrichtungsklassen wandern vom Bild auf den Rahmen. */ .sg-ai-media{position:relative;display:inline-block;vertical-align:top;max-width:100%} .sg-ai-media.alignleft{float:left}.sg-ai-media.alignright{float:right} .sg-ai-media.aligncenter{display:block;width:fit-content;margin-inline:auto} :where(.sg-card__media, figure, picture) > .sg-ai-media{display:block;width:100%;height:100%} .sg-ai-badge{position:absolute;top:var(--sg-space-2);right:var(--sg-space-2);z-index:var(--sg-z-raised);pointer-events:none} /* Komponente: Badge (.sg-badge) – kurze, nicht klickbare Kennzeichnung. Doku: /styleguide/#sgd-badge * Töne: (neutral) · --brand · --brand-solid · --sale · --success · --warning · --danger * · --inverse · --overlay (auf Bildern) · --gold · --partner (+ data-brand="esn" …) * Größe: --sm · (Standard) · --lg Form: --square (statt Pille) * Position: --pin (oben links auf einem Bild/einer Medien-Karte) * Jede Schrift-/Flächen-Kombination ist ein geprüftes Token-Paar (WCAG 2.2 AA, 4,5 : 1). */ .sg-badge{display:inline-flex;align-items:center;gap:var(--sg-space-1);max-width:100%; padding:var(--sg-space-1) var(--sg-space-2);border:var(--sg-size-border) solid var(--sg-color-border);border-radius:var(--sg-radius-pill); background:var(--sg-color-bg-subtle);color:var(--sg-color-text-muted); font-family:var(--sg-font-family-body);font-size:var(--sg-font-size-xs);font-weight:var(--sg-font-weight-bold); line-height:1.2;letter-spacing:.01em;white-space:nowrap;vertical-align:middle;text-decoration:none} .sg-badge svg{width:1em;height:1em;flex:0 0 auto} .sg-badge img{width:auto;height:1em;flex:0 0 auto} .sg-badge--brand{background:var(--sg-color-primary-soft);color:var(--sg-color-primary-text);border-color:transparent} .sg-badge--brand-solid{background:var(--sg-color-primary);color:var(--sg-color-on-primary);border-color:transparent} .sg-badge--sale{background:var(--sg-color-sale);color:var(--sg-color-on-sale);border-color:transparent;font-weight:var(--sg-font-weight-heavy)} .sg-badge--success{background:var(--sg-color-success-soft);color:var(--sg-color-success);border-color:transparent} .sg-badge--warning{background:var(--sg-color-warning-soft);color:var(--sg-color-warning);border-color:transparent} .sg-badge--danger{background:var(--sg-color-danger-soft);color:var(--sg-color-danger);border-color:transparent} .sg-badge--inverse{background:var(--sg-color-text);color:var(--sg-color-bg);border-color:transparent} .sg-badge--overlay{background:var(--sg-color-surface);color:var(--sg-color-text);border-color:transparent;box-shadow:var(--sg-shadow-sm)} .sg-badge--gold{background:var(--sg-color-gold);color:var(--sg-color-on-gold);border-color:transparent} .sg-badge--partner{background:var(--sg-color-text);color:var(--sg-color-bg);border-color:transparent} .sg-badge--partner[data-brand="more-nutrition"]{background:var(--sg-partner-more-nutrition);color:var(--sg-partner-more-nutrition-on)} .sg-badge--partner[data-brand="more-taste"]{background:var(--sg-partner-more-taste);color:var(--sg-partner-more-taste-on)} .sg-badge--partner[data-brand="esn"]{background:var(--sg-partner-esn);color:var(--sg-partner-esn-on)} .sg-badge--partner[data-brand="oace"]{background:var(--sg-partner-oace);color:var(--sg-partner-oace-on)} .sg-badge--partner[data-brand="ninja"]{background:var(--sg-partner-ninja);color:var(--sg-partner-ninja-on)} .sg-badge--partner[data-brand="vorpack"]{background:var(--sg-partner-vorpack);color:var(--sg-partner-vorpack-on)} .sg-badge--sm{font-size:var(--sg-font-size-2xs);padding:var(--sg-space-0-5) var(--sg-space-1-5)} .sg-badge--lg{font-size:var(--sg-font-size-sm);padding:var(--sg-space-1-5) var(--sg-space-3)} .sg-badge--square{border-radius:var(--sg-radius-sm)} .sg-badge--pin{position:absolute;top:var(--sg-space-3);left:var(--sg-space-3);z-index:2;pointer-events:none} .sg-badge--pin-end{left:auto;right:var(--sg-space-3)} /* Alte Modul-Badges auf .sg-badge-Maße (nur Schrift/Form – Farben bleiben im Modul) */ body .sg-cp-badge[class]{padding:var(--sg-space-1-5) var(--sg-space-3);border-radius:var(--sg-radius-pill);font-size:var(--sg-font-size-sm);font-weight:var(--sg-font-weight-bold);line-height:1.2} /* = --lg */ body .sg-cp-feat-badge[class]{padding:var(--sg-space-1) var(--sg-space-2);border-radius:var(--sg-radius-pill);font-size:var(--sg-font-size-xs);font-weight:var(--sg-font-weight-bold);line-height:1.2;letter-spacing:.01em} /* = Standard */ /* Komponente: Button (.sg-btn) – nur Tokens. Doku: /styleguide/#sgd-button * Varianten: --primary (Standard-Aktion) · --secondary (Kontur) · --ghost (nur Text) · --danger (tonal) * · --partner (+ data-brand="esn|more-nutrition|more-red|more-white|more-taste|vorpack|whatsapp") * Größen: --sm (32 px) · (Standard 40 px) · --lg (48 px) Breite: --block * Alle Größen ≥ 24 px Klickfläche (WCAG 2.5.8); --lg erfüllt 44 px für Touch. * Zustände: :hover, :focus-visible (Fokusring), [disabled]/[aria-disabled="true"]. */ .sg-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sg-space-2); min-height:2.5rem;padding:0 var(--sg-space-5);border:var(--sg-size-border) solid transparent;border-radius:var(--sg-radius-pill); font-family:var(--sg-font-family-body);font-size:var(--sg-font-size-base);font-weight:var(--sg-font-weight-bold); line-height:1.2;text-align:center;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-btn svg,.sg-btn img{width:1.15em;height:1.15em;flex:0 0 auto} .sg-btn:focus-visible{outline:var(--sg-size-focus-width) solid var(--sg-color-focus);outline-offset:var(--sg-size-focus-offset)} .sg-btn--primary{background:var(--sg-color-primary);color:var(--sg-color-on-primary)} .sg-btn--primary:hover{background:var(--sg-color-primary-hover);color:var(--sg-color-on-primary)} .sg-btn--secondary{background:var(--sg-color-surface);color:var(--sg-color-text);border-color:var(--sg-color-border-field)} .sg-btn--secondary:hover{border-color:var(--sg-color-primary-text);color:var(--sg-color-primary-text)} .sg-btn--ghost{background:transparent;color:var(--sg-color-primary-text)} .sg-btn--ghost:hover{background:var(--sg-color-primary-soft)} .sg-btn--danger{background:var(--sg-color-danger-soft);color:var(--sg-color-danger)} .sg-btn--danger:hover{border-color:var(--sg-color-danger)} .sg-btn--partner{background:var(--sg-color-text);color:var(--sg-color-bg)} .sg-btn--partner[data-brand="more-nutrition"]{background:var(--sg-partner-more-nutrition);color:var(--sg-partner-more-nutrition-on)} .sg-btn--partner[data-brand="more-taste"]{background:var(--sg-partner-more-taste);color:var(--sg-partner-more-taste-on)} .sg-btn--partner[data-brand="more-red"]{background:var(--sg-partner-more-nutrition-deep);color:var(--sg-partner-more-nutrition-deep-on)} /* More rot/weiß (Vorpacklink-Seite) */ .sg-btn--partner[data-brand="more-white"]{background:var(--sg-partner-more-nutrition-deep-on);color:var(--sg-partner-more-nutrition-deep)} /* weiß auf More-Rot */ .sg-btn--partner[data-brand="esn"]{background:var(--sg-partner-esn);color:var(--sg-partner-esn-on)} .sg-btn--partner[data-brand="oace"]{background:var(--sg-partner-oace);color:var(--sg-partner-oace-on)} .sg-btn--partner[data-brand="ninja"]{background:var(--sg-partner-ninja);color:var(--sg-partner-ninja-on)} .sg-btn--partner[data-brand="vorpack"]{background:var(--sg-partner-vorpack);color:var(--sg-partner-vorpack-on)} .sg-btn--partner[data-brand="whatsapp"]{background:var(--sg-partner-whatsapp);color:var(--sg-partner-whatsapp-on)} .sg-btn--partner:hover{filter:brightness(.93)} .sg-btn--sm{min-height:2rem;padding:0 var(--sg-space-3);font-size:var(--sg-font-size-sm)} .sg-btn--lg{min-height:3rem;padding:0 var(--sg-space-6);font-size:var(--sg-font-size-md)} .sg-btn--block{display:flex;width:100%} /* Nur-Symbol-Button (icon_only): quadratisch, Name nur für Screenreader */ .sg-btn--icon{padding:0;width:2.5rem} .sg-btn--icon.sg-btn--sm{width:2rem} .sg-btn--icon.sg-btn--lg{width:3rem} /* Umschalter (pressed): gedrückt = gefülltes Symbol; Merken-Herz (.sg-btn--fav) zusätzlich in Gefahr-Rot (AA-Paar danger/bg, danger/surface) */ .sg-btn[aria-pressed="true"] .sg-icon__heart{fill:currentColor} .sg-btn--fav[aria-pressed="true"]{color:var(--sg-color-danger)} .sg-btn--fav .sg-icon{transition:transform var(--sg-motion-base) var(--sg-motion-easing)} .sg-btn--fav[aria-pressed="true"] .sg-icon{transform:scale(1.12)} .sg-btn[disabled],.sg-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;pointer-events:none} @media (forced-colors:active){.sg-btn{border-color:ButtonText}} /* Alte Modul-Buttons auf die zwei Größen des Design Systems (Andreas 09.10.2026: „jedes UI-Element einheitlich“). * Nur Maße/Schrift/Form – Farben bleiben im Modul (Varianten). „body“ davor: Modul-Styles laden nach dem Design System. * Höhe über padding-block, damit auch inline-block/block-Elemente den Text mittig behalten. */ /* groß (= .sg-btn--lg, 48 px): Haupt-Aktionen */ body :is(.pd-buy, .sg-cp-redeem, .sg-nw-btn, .sg-acc-btn, .sg-rs-more, .sg-rs-wabtn, .sg-hp-btn, .sg-daily-btn, .sg-mp-btn)[class]{ min-height:3rem;padding-block:calc((3rem - 1.2em - 2px) / 2);padding-inline:var(--sg-space-6);border-radius:var(--sg-radius-pill); font-family:var(--sg-font-family-body);font-size:var(--sg-font-size-md);font-weight:var(--sg-font-weight-bold);line-height:1.2} /* Standard (= .sg-btn, 40 px): Neben-Aktionen in Karten und Abschnitten */ body :is(.pd-rate, .sg-hs-cta, .sg-nw-channel-btn, .sg-pv-seo-link, .sgn-cta-btn, .sg-rs-btn)[class]{ min-height:2.5rem;padding-block:calc((2.5rem - 1.2em - 2px) / 2);padding-inline:var(--sg-space-5);border-radius:var(--sg-radius-pill); font-family:var(--sg-font-family-body);font-size:var(--sg-font-size-base);font-weight:var(--sg-font-weight-bold);line-height:1.2} /* Komponente: Karte (.sg-card) – nur Tokens. Doku + Beispiele: /styleguide/#sgd-card * Grundtypen: .sg-card Panel mit Innenabstand * .sg-card--media Bild oben, Inhalt in .sg-card__body (kein Innenabstand außen) * Optionen: --subtle (graue Fläche, ohne Rand) · --elevated (Schatten) · --interactive (Hover/Fokus) * Ganze Karte klickbar: genau EIN Link mit .sg-card__link (meist im Titel); er spannt sich per * ::after über die Karte. So gibt es nur einen Tab-Stopp und einen kurzen Linknamen (WCAG 2.4.4). */ .sg-card{position:relative;display:flex;flex-direction:column;gap:var(--sg-space-3);min-width:0; background:var(--sg-color-surface);color:var(--sg-color-text); border:var(--sg-size-border) solid var(--sg-color-border);border-radius:var(--sg-radius-lg); padding:var(--sg-space-5);text-decoration:none} .sg-card[hidden]{display:none!important} .sg-card--subtle{background:var(--sg-color-bg-subtle);border-color:transparent} .sg-card--elevated{box-shadow:var(--sg-shadow-md)} .sg-card--media{padding:0;gap:0;overflow:hidden} .sg-card--plain{background:none;border:0;padding:0;border-radius:var(--sg-radius-md)} /* ohne Fläche/Rand – z. B. Bild + Titel in Reihen */ .sg-card--plain.sg-card--interactive:hover{box-shadow:none} .sg-card__media{position:relative;display:block;margin:0;background:var(--sg-color-bg-subtle);overflow:hidden} .sg-card__media img{display:block;width:100%;height:100%;object-fit:cover} .sg-card__media--4x3{aspect-ratio:4/3} .sg-card__media--16x9{aspect-ratio:16/9} .sg-card__media--1x1{aspect-ratio:1/1} .sg-card__media img.sg-card__img--contain{object-fit:contain;padding:var(--sg-space-3);box-sizing:border-box} /* Packshots: ganzes Produkt zeigen */ .sg-card__media--fit > img:not(.sg-card__media-bg){position:relative;z-index:1;object-fit:contain} /* ganzes Bild (Aktionsbanner 4:1, Logos, Hochformat) */ .sg-card__media--fit > .sg-card__media-bg{position:absolute;inset:-10%;width:120%;height:120%;object-fit:cover;filter:blur(1.5rem) saturate(1.15);opacity:.9;pointer-events:none} /* Rand: unscharfe Kopie statt leerer Balken */ .sg-card__overlay{position:absolute;top:var(--sg-space-2);left:var(--sg-space-2);z-index:var(--sg-z-raised);pointer-events:none} /* Badge über dem Bild */ .sg-card__body{display:flex;flex-direction:column;gap:var(--sg-space-2);flex:1 1 auto;padding:var(--sg-space-4)} .sg-card__eyebrow{font-size:var(--sg-font-size-xs);font-weight:var(--sg-font-weight-semibold);letter-spacing:.04em;text-transform:uppercase;color:var(--sg-color-primary-text)} .sg-card .sg-card__title{margin:0;font-family:var(--sg-font-family-body);font-size:var(--sg-font-size-lg);font-weight:var(--sg-font-weight-bold);line-height:var(--sg-font-line-height-snug);color:var(--sg-color-text)} .sg-card__text{margin:0;font-size:var(--sg-font-size-base);line-height:var(--sg-font-line-height-normal);color:var(--sg-color-text-muted)} .sg-card__meta{font-size:var(--sg-font-size-sm);color:var(--sg-color-text-subtle)} .sg-card__body > .sg-badge,.sg-card > .sg-badge{align-self:flex-start} .sg-card__footer{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sg-space-2);margin-top:auto} /* Klickbare Karte */ .sg-card__link{color:inherit;text-decoration:none} .sg-card__link::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit} .sg-card :is(a,button,input,select,textarea,summary,label,[role="button"],[tabindex]):not(.sg-card__link){position:relative;z-index:2} /* weitere Bedienelemente bleiben klickbar */ .sg-card--interactive{transition:box-shadow var(--sg-motion-base) var(--sg-motion-easing),transform var(--sg-motion-base) var(--sg-motion-easing),border-color var(--sg-motion-base) var(--sg-motion-easing)} .sg-card--interactive:hover{box-shadow:var(--sg-shadow-lg)} .sg-card--interactive:hover .sg-card__title{color:var(--sg-color-primary-text)} @media (prefers-reduced-motion:no-preference){.sg-card--interactive:hover{transform:translateY(-2px)}} .sg-card--interactive:focus-within:has(.sg-card__link:focus-visible), a.sg-card--interactive:focus-visible{outline:var(--sg-size-focus-width) solid var(--sg-color-focus);outline-offset:var(--sg-size-focus-offset)} .sg-card__link:focus-visible{outline:none} /* Fallback ohne :has(): Fokusring am Link selbst */ @supports not selector(:has(*)){.sg-card__link:focus-visible{outline:var(--sg-size-focus-width) solid var(--sg-color-focus);outline-offset:var(--sg-size-focus-offset)}} /* Kartentitel: zwei Stufen (Andreas 09.10.2026). Standard = .sg-card__title (lg, 700); kompakt = dichte Raster * (Produkt-, Aktions-, Marken-, Restock-, Kategorie-Karten) md, 700. Farbe bleibt im Modul (z. B. weiß auf Bild). */ body :is(.dl3-title, .pd-bn-title, .sg-pv-card-title, .sg-mk-name, .sg-hp-dcard-t, .sg-rs-card-name, .sg-hp-cat-name, .sg-pv-cat-name)[class]{ font-family:var(--sg-font-family-body);font-size:var(--sg-font-size-md);font-weight:var(--sg-font-weight-bold);line-height:var(--sg-font-line-height-snug)} body :is(.sg-dx-card-title, .sg-hp-ncard-title, .sg-nw-card-title)[class]{ font-family:var(--sg-font-family-body);font-size:var(--sg-font-size-lg);font-weight:var(--sg-font-weight-bold);line-height:var(--sg-font-line-height-snug)} /* ===== Karten-Innenabstände einheitlich (Andreas 09.10.2026: „Abstände überall absolut korrekt und gleichmäßig“) ===== * Zwei Stufen: Karte/Panel = space-5 (20 px) rundum, Radius lg · kompakte Zeile/Kachel = space-3 × space-4 (12/16 px), Radius md * (wie .sg-notice). Vorher 14–28 px bzw. 8–14 px und Radien 11–20 px je Modul. Medien-/Plain-Karten bleiben ohne Innenabstand. * Hinweis: Ein künftiger .sg-card--*-Modifier mit eigenem Padding muss hier in :not() ergänzt werden. */ body :is(.sg-card:not(.sg-card--media, .sg-card--plain), .sg-pv-start-card, .sg-pv-filter, .sg-mp-filters, .sg-mp-empty, .sg-mk-btile, .sg-cp-brandcard, .sg-cp-sec, .sg-cp-feat, .sg-cp-tile, .sg-cp-step, .sg-daily, .sg-quests, .sg-wc, .sg-hs, .sg-hs-empty, .sg-nw-channel, .sg-rs-filter, .sg-rs-wa)[class]{padding:var(--sg-space-5);border-radius:var(--sg-radius-lg)} body :is(.sg-pv-brandtile, .sg-pv-seo-cat, .dl3-rs__item, .sg-hs-you, .sg-cp-hdeal, .sg-suppbar-set, .sg-cteaser-set)[class]{ padding:var(--sg-space-3) var(--sg-space-4);border-radius:var(--sg-radius-md)} body :is(.sg-cp-faq-i, .sg-pv-faq-item, .sg-nw-faq-item, .sg-rs-faq-item)[class]{border-radius:var(--sg-radius-md)} body .sg-cp-howto > li{padding:var(--sg-space-3) var(--sg-space-4);border-radius:var(--sg-radius-md)} /* Komponente: Chip / Filter (.sg-chip) – nur Tokens. Doku: /styleguide/#sgd-chip * Umschalt-Filter: * Navigations-Filter (Link): für den aktiven. * Gruppe:
· 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:var(--sg-size-border) 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}} /* Alte Modul-Chips (Produkt-Tags, KI-Vorschläge der Startseite) auf .sg-chip-Maße */ body :is(.pd-tag, .sg-hp-ai-chip)[class]{min-height:2.25rem;padding-block:calc((2.25rem - 1.2em - 2px) / 2);padding-inline:var(--sg-space-4);border-radius:var(--sg-radius-pill); 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} /* Komponente: Kontaktformular (contact.php) – nur Tokens. Doku: /styleguide/#sgd-contact */ .sg-contact{position:relative;display:flex;flex-direction:column} .sg-contact__status:focus{outline:none} .sg-contact__status:focus-visible{outline:var(--sg-size-focus-width) solid var(--sg-color-focus);outline-offset:var(--sg-size-focus-offset);border-radius:var(--sg-radius-md)} .sg-contact__consent .sg-check{font-size:var(--sg-font-size-sm);line-height:var(--sg-font-line-height-normal);color:var(--sg-color-text-muted)} .sg-contact__consent a{color:var(--sg-color-primary-text)} .sg-contact__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .sg-contact__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sg-space-3)} /* Komponente: Inhalt (.sg-ranklist, .sg-prose) – nur Tokens. Doku: /styleguide/#sgd-ranklist * Rangliste:
  1. 1 * ……Badge
* Fließtext:
– Lesebreite ~48rem, Absatz- und Listenabstände. * rem-Breiten (48/64rem, 2rem Platz-Kreis) sind Layout-Maße für Lesbarkeit, bewusst ohne Token. */ .sg-ranklist{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sg-space-2) var(--sg-space-6);max-width:64rem} .sg-ranklist__row{display:flex;align-items:center;gap:var(--sg-space-3);padding:var(--sg-space-3) var(--sg-space-4);border:var(--sg-size-border) solid var(--sg-color-border);border-radius:var(--sg-radius-md);background:var(--sg-color-surface)} .sg-ranklist__n{flex:0 0 auto;width:2rem;height:2rem;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--sg-radius-pill);background:var(--sg-color-primary-soft);color:var(--sg-color-primary-text);font-weight:var(--sg-font-weight-bold);font-variant-numeric:tabular-nums} .sg-ranklist__body{display:flex;flex-direction:column;min-width:0;flex:1 1 auto} .sg-ranklist__title{font-weight:var(--sg-font-weight-bold);color:var(--sg-color-text);text-decoration:none} a.sg-ranklist__title:hover{color:var(--sg-color-primary-text);text-decoration:underline} a.sg-ranklist__title:focus-visible{outline:var(--sg-size-focus-width) solid var(--sg-color-focus);outline-offset:var(--sg-size-focus-offset);border-radius:var(--sg-radius-sm)} .sg-ranklist__sub{font-size:var(--sg-font-size-sm);color:var(--sg-color-text-muted);overflow-wrap:anywhere} .sg-ranklist__aside{flex:0 0 auto} @media (max-width:640px){.sg-ranklist{grid-template-columns:minmax(0,1fr)}} .sg-prose{max-width:48rem;font-size:var(--sg-font-size-md);line-height:var(--sg-font-line-height-relaxed);color:var(--sg-color-text)} .sg-prose p{margin:0 0 var(--sg-space-4)} .sg-prose ul,.sg-prose ol{margin:0 0 var(--sg-space-4);padding-left:var(--sg-space-5)} .sg-prose li{margin-bottom:var(--sg-space-2)} .sg-prose > :last-child{margin-bottom:0} .sg-prose a{color:var(--sg-color-primary-text);text-decoration:underline;text-underline-offset:var(--sg-space-1)} /* 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[hidden]{display:none} .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:var(--sg-size-border) 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:var(--sg-size-border-strong)} /* 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)} /* ===== Modul-Felder auf den Feld-Standard (Andreas 09.10.2026: „alles einheitlich“) ===== * Gleiche Maße wie .sg-input/.sg-select: 44 px hoch, Radius md, Rahmen border-field, Schrift ≥ 16 px * (unter 16 px zoomt iOS beim Antippen ins Feld). Kopfzeilen-Suche und KI-Eingabe der Startseite bleiben eigene Varianten. * Spezifität über body … [class] bzw. body … :is(), damit Modul-CSS (wird später ausgegeben) nicht gewinnt. */ /* Suchfeld/Feld mit Symbol: Rahmen sitzt am Wrapper, das Eingabefeld darin ist randlos */ body :is(.sg-pv-search, .sg-nw-search, .sg-rs-search, .sg-mp-search, .sg-acc-field)[class]{ min-height:2.75rem;box-sizing:border-box;padding:0 var(--sg-space-3); border:var(--sg-size-border) solid var(--sg-color-border-field);border-radius:var(--sg-radius-md);background:var(--sg-color-surface)} body :is(.sg-pv-search, .sg-nw-search, .sg-rs-search, .sg-mp-search, .sg-acc-field) :is(input, select)[class], body :is(.sg-pv-search, .sg-nw-search, .sg-rs-search, .sg-mp-search, .sg-acc-field) :is(input, select){ min-height:calc(2.75rem - 2 * var(--sg-size-border));padding-block:0;font-size:max(16px,var(--sg-font-size-md));line-height:1.4;color:var(--sg-color-text)} /* Einzelne Auswahl- und Eingabefelder in Modulen */ body :is(.sg-pv-sortwrap select, .sg-rs-sortwrap select, .sg-mp-fgroup-sort select, .sg-mp-lbl :is(input[type=text], input[type=email], input[type=search], select, textarea), .sg-mp-reply input[type=text], .sg-acc-field textarea){ min-height:2.75rem;box-sizing:border-box;padding:var(--sg-space-2) var(--sg-space-3); border:var(--sg-size-border) solid var(--sg-color-border-field);border-radius:var(--sg-radius-md);background:var(--sg-color-surface);color:var(--sg-color-text); font-size:max(16px,var(--sg-font-size-md));line-height:1.4} body :is(.sg-mp-lbl textarea, .sg-acc-field textarea){min-height:6rem} /* Textfeld im Konto-Wrapper: Rahmen nur am Textfeld selbst (vorher doppelter Rahmen) */ body .sg-acc-field:has(textarea)[class]{min-height:0;padding:0;border:0;background:none} /* 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:var(--sg-size-border) 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)}} /* Komponente: Icons (icon.php) – SVG in der Schriftfarbe, Größe relativ zur Schrift. Doku: /styleguide/#sgd-icon */ .sg-icon{display:inline-block;width:1.15em;height:1.15em;flex:none;vertical-align:-.2em} /* 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} /* Abschnittsüberschrift (h2 unter dem Seitentitel) – einheitlich für alle Seiten */ .sg-section-title{margin:0;font-family:var(--sg-font-family-display);font-size:var(--sg-font-size-2xl);font-weight:var(--sg-font-weight-semibold);line-height:var(--sg-font-line-height-tight);letter-spacing:-.005em;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)} /* Seitenkopf mit Bild (sg_ui_page_header 'media', z. B. /wiki/): Text links, Bild rechts ab 901 px; darunter gestapelt */ .sg-page-header--media{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sg-space-2) var(--sg-space-8);align-items:center} .sg-page-header__text{display:flex;flex-direction:column;gap:var(--sg-space-2);min-width:0} .sg-page-header__media{min-width:0;max-width:min(100%,28rem)} .sg-page-header__media img{display:block;width:100%;height:auto;border-radius:var(--sg-radius-lg)} .sg-page-header__media .sg-ai-media{display:block} @media (min-width:901px){ .sg-page-header--media{grid-template-columns:minmax(0,3fr) minmax(0,2fr)} .sg-page-header--media > .sg-breadcrumbs{grid-column:1 / -1} .sg-page-header__media{justify-self:end;max-width:100%} } /* Breadcrumbs: