/* rpmdepot Design-System — POC-Startseite Sektionen * Alles unter .rpm-ds gescoped. Nutzt ausschließlich --rpm-*-Tokens (rpm-ds.tokens.css). * Kopf übernommen aus Prototyp „Fokus W201 190E" (Artefakt 5e923e08), tokenisiert. * Source of Truth: OneDrive rpmdepot/Technology/System/poc-startseite-spec.md §4 */ /* ===== Basis ===== */ .rpm-ds { width:100%; font-family:var(--rpm-body-font); color:var(--rpm-color-fg-body); line-height:var(--rpm-leading-normal); } /* Bänder stoßen ohne Block-Gap aneinander (jede Sektion bringt eigenes Padding mit) */ .rpm-ds > * { margin-top:0; margin-bottom:0; } .rpm-ds h1,.rpm-ds h2,.rpm-ds h3 { color:var(--rpm-color-fg); } .rpm-ds a { color:inherit; } .rpm-ds .rpm-inner { max-width:var(--rpm-container); margin:0 auto; } /* Buttons */ .rpm-ds .rpm-btn { display:inline-flex; align-items:center; gap:.5em; font-weight:700; font-size:15px; padding:.82em 1.4em; text-decoration:none; border:0; cursor:pointer; transition:transform .18s var(--rpm-ease),filter .18s,background .18s; } .rpm-ds .rpm-btn svg { transition:transform .18s var(--rpm-ease); } .rpm-ds .rpm-btn:hover svg { transform:translateX(4px); } .rpm-ds .rpm-btn-primary { background:var(--rpm-color-brand); color:var(--rpm-color-on-brand); } .rpm-ds .rpm-btn-primary:hover { transform:translateY(-2px); filter:brightness(1.06); } .rpm-ds .rpm-btn-ghost { background:#fff; color:var(--rpm-color-brand-hover); border:1.5px solid var(--rpm-color-brand); } .rpm-ds .rpm-btn-ghost:hover { background:var(--rpm-brand-050); transform:translateY(-2px); } .rpm-ds a:focus-visible,.rpm-ds .rpm-btn:focus-visible { outline:3px solid var(--rpm-color-brand); outline-offset:3px; } .rpm-ds .rpm-eyebrow { margin:0 0 10px; font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--rpm-color-brand); } /* ===== 1) HERO — invertierte Fläche ===== */ .rpm-ds .rpm-hero { background-color:var(--rpm-color-invert-bg); background-size:cover; background-position:center; color:var(--rpm-color-invert-fg); position:relative; overflow:hidden; } .rpm-ds .rpm-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(14,26,41,.28) 0%, rgba(14,26,41,.52) 50%, rgba(14,26,41,.86) 100%), radial-gradient(120% 90% at 88% 15%, var(--rpm-color-invert-glow), transparent 55%); } /* Content rechts, damit das Hero-Bild links sichtbar bleibt */ .rpm-ds .rpm-hero-in { position:relative; z-index:1; max-width:var(--rpm-container); margin:0 auto; padding:clamp(46px,7.5vw,90px) clamp(18px,5vw,44px) clamp(40px,6vw,68px); } /* Text-Spalte rechts angeordnet, Inhalt aber LINKSBÜNDIG (wie Live-Hero) */ .rpm-ds .rpm-hero-col { max-width:560px; margin-left:auto; text-align:left; } .rpm-ds .rpm-hero-col h1 { max-width:none; } @media (max-width:700px){ .rpm-ds .rpm-hero::after { background:linear-gradient(180deg, rgba(14,26,41,.78) 0%, rgba(14,26,41,.92) 100%); } .rpm-ds .rpm-hero-col { margin-left:0; max-width:none; } /* Trust-Bar-Trenner brechen sonst als Orphan an Zeilenenden um */ .rpm-ds .rpm-trust .rpm-sep { display:none; } } .rpm-ds .rpm-hero .rpm-eyebrow { color:var(--rpm-color-invert-eyebrow); margin-bottom:18px; } .rpm-ds .rpm-hero h1 { margin:0; color:#fff; font-size:var(--rpm-text-3xl); line-height:1.05; letter-spacing:-.02em; font-weight:800; max-width:20ch; text-wrap:balance; } .rpm-ds .rpm-hero p { margin:1rem 0 0; color:var(--rpm-color-invert-fg-dim); font-size:var(--rpm-text-lg); max-width:46ch; } .rpm-ds .rpm-hero .rpm-btn { margin-top:1.6rem; } /* ===== 2) TRUST-BAR — Reviews ===== */ .rpm-ds .rpm-trust { background:var(--rpm-color-bg); border-bottom:1px solid var(--rpm-color-border); } .rpm-ds .rpm-trust-in { max-width:var(--rpm-container); margin:0 auto; padding:10px clamp(18px,5vw,44px); display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 22px; font-size:14px; color:var(--rpm-color-fg-muted); } .rpm-ds .rpm-trust b { color:var(--rpm-color-fg); } .rpm-ds .rpm-trust .rpm-stars { color:var(--rpm-color-accent); letter-spacing:2px; font-size:15px; } .rpm-ds .rpm-trust .rpm-sep { width:1px; height:16px; background:var(--rpm-color-border); } /* ===== 3) FOKUS — rpmd-usp (1:1 /erfahrungen, hier gescoped) ===== */ .rpm-ds .rpmd-usp-wrap { padding:clamp(44px,6.5vw,80px) clamp(18px,5vw,44px); } .rpm-ds .rpmd-usp-head { text-align:center; margin:0 auto; max-width:640px; } .rpm-ds .rpmd-usp-eyebrow { margin:0 0 10px; font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--rpm-color-brand); } .rpm-ds .rpmd-usp-head h2 { margin:0 0 10px; font-size:var(--rpm-text-2xl); line-height:1.12; letter-spacing:-.01em; font-weight:800; } .rpm-ds .rpmd-usp-sub { margin:0; color:var(--rpm-color-fg-muted); font-size:16px; } .rpm-ds .rpmd-usp-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; max-width:var(--rpm-container); margin:28px auto 0; } .rpm-ds .rpmd-usp-card { background:var(--rpm-color-bg); border:1px solid var(--rpm-color-border); padding:28px; display:flex; flex-direction:column; gap:12px; transition:border-color .2s,transform .2s; } .rpm-ds a.rpmd-usp-card { text-decoration:none; } .rpm-ds a.rpmd-usp-card:hover { border-color:var(--rpm-color-brand); transform:translateY(-3px); } .rpm-ds .rpmd-usp-icon { width:44px; height:44px; background:var(--rpm-brand-050); display:flex; align-items:center; justify-content:center; } .rpm-ds .rpmd-usp-title { margin:0; font-size:18px; font-weight:700; color:var(--rpm-color-fg); } .rpm-ds .rpmd-usp-body { margin:0; font-size:14px; color:var(--rpm-color-fg-body); line-height:1.6; } .rpm-ds .rpmd-usp-link { margin:0; font-size:14px; margin-top:auto; padding-top:14px; border-top:1px solid var(--rpm-color-border); } .rpm-ds .rpmd-usp-link a { color:var(--rpm-color-brand-hover); text-decoration:none; font-weight:600; display:inline-flex; align-items:center; gap:.4em; } .rpm-ds .rpmd-usp-link a:hover { color:var(--rpm-color-brand); } .rpm-ds a.rpmd-usp-card:hover .rpmd-usp-link a svg { transform:translateX(4px); } .rpm-ds .rpmd-usp-link svg { transition:transform .2s; } .rpm-ds .rpm-fokus-cta { max-width:var(--rpm-container); margin:clamp(24px,3vw,34px) auto 0; display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; } .rpm-ds .rpm-fokus-cta .rpm-note { color:var(--rpm-color-fg-muted); font-size:14px; } .rpm-ds .rpm-fokus-cta .rpm-note a { color:var(--rpm-color-brand-hover); font-weight:700; text-decoration:none; } .rpm-ds .rpm-fokus-cta .rpm-note a:hover { color:var(--rpm-color-brand); } @media (max-width:900px){ .rpm-ds .rpmd-usp-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:620px){ .rpm-ds .rpmd-usp-grid{ grid-template-columns:1fr; } } /* ===== 4) PARTNER-/LOGO-BAND (Grayscale-Platzhalter) ===== */ .rpm-ds .rpm-logos { background:var(--rpm-color-bg); border-top:1px solid var(--rpm-color-border); border-bottom:1px solid var(--rpm-color-border); } .rpm-ds .rpm-logos-in { max-width:var(--rpm-container); margin:0 auto; padding:clamp(30px,4vw,46px) clamp(18px,5vw,44px); text-align:center; } .rpm-ds .rpm-logos .rpm-cap { font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--rpm-color-fg-muted); margin:0 0 22px; } .rpm-ds .rpm-logos-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:26px 44px; } .rpm-ds .rpm-logo-ph { height:40px; min-width:130px; padding:0 18px; border:1px solid var(--rpm-neutral-200); border-radius:6px; display:flex; align-items:center; justify-content:center; color:var(--rpm-neutral-400); font-size:12px; font-weight:700; letter-spacing:.06em; background:var(--rpm-neutral-50); filter:grayscale(1); opacity:.75; transition:opacity .2s; } .rpm-ds .rpm-logo-ph:hover { opacity:1; } /* ===== BODY: generische Section ===== */ .rpm-ds .rpm-section { padding:var(--rpm-section-pad-y) clamp(18px,5vw,44px); background:var(--rpm-color-bg); } .rpm-ds .rpm-section--alt { background:var(--rpm-color-page); } .rpm-ds .rpm-section-in { max-width:var(--rpm-container); margin:0 auto; } .rpm-ds .rpm-section-head { display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:6px; margin:0 0 24px; flex-wrap:wrap; } .rpm-ds .rpm-section h2 { margin:0; font-size:var(--rpm-text-2xl); font-weight:800; letter-spacing:-.01em; } .rpm-ds .rpm-section-link { color:var(--rpm-color-brand-hover); font-weight:700; text-decoration:none; font-size:14px; display:inline-flex; align-items:center; gap:.4em; } .rpm-ds .rpm-section-link:hover { color:var(--rpm-color-brand); } /* Produkt-Card-Grid (statische Platzhalter) */ .rpm-ds .rpm-card-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; } .rpm-ds .rpm-card { background:var(--rpm-card-bg); border:1px solid var(--rpm-card-border); display:flex; flex-direction:column; text-decoration:none; transition:border-color .2s,transform .2s; } .rpm-ds .rpm-card:hover { border-color:var(--rpm-color-brand); transform:translateY(-3px); } .rpm-ds .rpm-card-media { aspect-ratio:4/3; background:var(--rpm-neutral-100); display:flex; align-items:center; justify-content:center; color:var(--rpm-neutral-400); font-size:12px; font-weight:600; letter-spacing:.04em; filter:grayscale(1); } .rpm-ds .rpm-card-body { padding:16px 18px 18px; display:flex; flex-direction:column; gap:6px; } .rpm-ds .rpm-card-title { margin:0; font-size:15px; font-weight:700; color:var(--rpm-color-fg); line-height:1.3; } .rpm-ds .rpm-card-price { margin:0; font-size:14px; color:var(--rpm-color-fg-muted); } .rpm-ds .rpm-card-price b { color:var(--rpm-color-fg); font-weight:700; } @media(max-width:900px){ .rpm-ds .rpm-card-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media(max-width:520px){ .rpm-ds .rpm-card-grid{ grid-template-columns:1fr; } } /* Bodykit — Pill-Links (keine Tabs) */ .rpm-ds .rpm-bodykit { padding:var(--rpm-section-pad-y) clamp(18px,5vw,44px); background:var(--rpm-color-page); } .rpm-ds .rpm-bodykit-in { max-width:var(--rpm-container); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,48px); align-items:center; } .rpm-ds .rpm-bodykit h2 { margin:0 0 10px; font-size:var(--rpm-text-2xl); font-weight:800; } .rpm-ds .rpm-bodykit p { margin:0 0 20px; color:var(--rpm-color-fg-body); line-height:1.6; max-width:44ch; } .rpm-ds .rpm-pills { display:flex; flex-wrap:wrap; gap:12px; } .rpm-ds .rpm-pill { display:inline-flex; align-items:center; gap:.5em; padding:.6em 1.15em; border:1.5px solid var(--rpm-color-brand); border-radius:var(--rpm-radius-pill); color:var(--rpm-color-brand-hover); font-weight:700; font-size:14px; text-decoration:none; transition:background .18s,color .18s,transform .18s; } .rpm-ds .rpm-pill:hover { background:var(--rpm-color-brand); color:#fff; transform:translateY(-2px); } .rpm-ds .rpm-bodykit-media { aspect-ratio:16/10; background:var(--rpm-neutral-200); display:flex; align-items:center; justify-content:center; color:var(--rpm-neutral-400); font-size:13px; font-weight:600; filter:grayscale(1); } @media(max-width:820px){ .rpm-ds .rpm-bodykit-in{ grid-template-columns:1fr; } } /* ===== Promo-Banner (3 Top-Kacheln: Bild + Overlay + CTA) ===== */ .rpm-ds .rpm-promo { padding:clamp(28px,4vw,44px) clamp(18px,5vw,44px); background:var(--rpm-color-bg); } .rpm-ds .rpm-promo-grid { max-width:var(--rpm-container); margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .rpm-ds .rpm-promo-card { position:relative; min-height:220px; display:flex; flex-direction:column; justify-content:flex-end; padding:26px; text-decoration:none; color:#fff; background-color:var(--rpm-color-invert-bg); background-size:cover; background-position:center; overflow:hidden; transition:transform .2s var(--rpm-ease); } .rpm-ds .rpm-promo-card::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(14,26,41,.30) 0%, rgba(14,26,41,.55) 55%, rgba(14,26,41,.84) 100%); } .rpm-ds .rpm-promo-card:hover { transform:translateY(-3px); } .rpm-ds .rpm-promo-card > * { position:relative; z-index:1; } .rpm-ds .rpm-promo-title { margin:0 0 6px; font-size:1.25rem; font-weight:800; color:#fff; } .rpm-ds .rpm-promo-sub { margin:0 0 16px; font-size:14px; color:rgba(246,249,252,.82); } .rpm-ds .rpm-promo-card .rpm-btn { align-self:flex-start; } @media(max-width:820px){ .rpm-ds .rpm-promo-grid{ grid-template-columns:1fr; } } /* ===== Warum rpmdepot (USP-Text, 3 Spalten) ===== */ .rpm-ds .rpm-why { padding:var(--rpm-section-pad-y) clamp(18px,5vw,44px); background:var(--rpm-color-page); } .rpm-ds .rpm-why-in { max-width:var(--rpm-container); margin:0 auto; } .rpm-ds .rpm-why-head { max-width:760px; margin:0 0 30px; } .rpm-ds .rpm-why-head h2 { margin:0 0 12px; font-size:var(--rpm-text-2xl); font-weight:800; letter-spacing:-.01em; } .rpm-ds .rpm-why-head p { margin:0; color:var(--rpm-color-fg-body); line-height:1.6; font-size:16px; } .rpm-ds .rpm-why-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:24px; } .rpm-ds .rpm-why-col { border-top:2px solid var(--rpm-color-brand); padding-top:16px; } .rpm-ds .rpm-why-col h3 { margin:0 0 8px; font-size:18px; font-weight:700; color:var(--rpm-color-fg); } .rpm-ds .rpm-why-col p { margin:0 0 10px; font-size:14px; color:var(--rpm-color-fg-body); line-height:1.6; } .rpm-ds .rpm-why-col a { color:var(--rpm-color-brand-hover); font-weight:700; text-decoration:none; font-size:14px; display:inline-flex; align-items:center; gap:.4em; } .rpm-ds .rpm-why-col a:hover { color:var(--rpm-color-brand); } /* ===== Generisches CTA-Band (Services / PLUS / Newsletter / Baureihen) ===== */ .rpm-ds .rpm-cta-band { padding:var(--rpm-section-pad-y) clamp(18px,5vw,44px); background:var(--rpm-color-bg); } .rpm-ds .rpm-cta-band--alt { background:var(--rpm-color-page); } .rpm-ds .rpm-cta-band--brand { background:var(--rpm-color-invert-bg); position:relative; overflow:hidden; } .rpm-ds .rpm-cta-band--brand::after { content:""; position:absolute; inset:0; background:radial-gradient(120% 120% at 85% 10%, var(--rpm-color-invert-glow), transparent 55%); } .rpm-ds .rpm-cta-in { position:relative; z-index:1; max-width:760px; margin:0 auto; text-align:center; } .rpm-ds .rpm-cta-in .rpm-eyebrow { text-align:center; } .rpm-ds .rpm-cta-in h2 { margin:0 0 12px; font-size:var(--rpm-text-2xl); font-weight:800; letter-spacing:-.01em; } .rpm-ds .rpm-cta-in p { margin:0 0 20px; color:var(--rpm-color-fg-body); line-height:1.6; font-size:16px; } .rpm-ds .rpm-cta-band--brand .rpm-cta-in h2 { color:#fff; } .rpm-ds .rpm-cta-band--brand .rpm-cta-in p { color:var(--rpm-color-invert-fg-dim); } .rpm-ds .rpm-cta-band--brand .rpm-eyebrow { color:var(--rpm-color-invert-eyebrow); } .rpm-ds .rpm-cta-in .mailpoet_form { margin:0 auto; max-width:520px; text-align:left; } /* MailPoet-Form-Container transparent (weißen Kasten entfernen), Felder unberührt */ .rpm-ds .rpm-cta-in #mailpoet_form_1, .rpm-ds .rpm-cta-in .mailpoet_form, .rpm-ds .rpm-cta-in .mailpoet_form_column, .rpm-ds .rpm-cta-in .mailpoet_column_with_background { background:transparent !important; box-shadow:none !important; } /* Button-Reihe (PLUS: primär + sekundär) */ .rpm-ds .rpm-cta-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; } /* Fahrzeug-Finder: Headline + Picker zentriert */ .rpm-ds .rpm-finder .rpm-section-head { justify-content:center; text-align:center; } .rpm-ds .rpm-finder .rpm-fitment-selector { justify-content:center; } /* ===== FAQ — Akkordeon (DS-Komponente, boxed + Border-left brand) ===== */ .rpm-ds .rpm-faq { max-width:var(--rpm-container-text); margin:0 auto; } .rpm-ds .rpm-faq details { background:var(--rpm-color-bg); border:1px solid var(--rpm-color-border); border-left:3px solid var(--rpm-color-brand); margin:0 0 12px; } .rpm-ds .rpm-faq summary { cursor:pointer; list-style:none; position:relative; padding:18px 48px 18px 22px; font-weight:700; font-size:16px; color:var(--rpm-color-fg); } .rpm-ds .rpm-faq summary::-webkit-details-marker { display:none; } .rpm-ds .rpm-faq summary::after { content:"+"; position:absolute; right:22px; top:15px; font-size:22px; font-weight:400; color:var(--rpm-color-brand); } .rpm-ds .rpm-faq details[open] summary::after { content:"\2013"; } .rpm-ds .rpm-faq details p { margin:0; padding:0 22px 20px; color:var(--rpm-color-fg-body); line-height:1.65; font-size:15px; } .rpm-ds .rpm-faq a { color:var(--rpm-color-brand-hover); font-weight:600; } /* Optionaler Sektions-Titel (Kategorie-Archiv, Reifenrechner) */ .rpm-ds .rpm-faq > h2 { margin:0 0 1.25rem; font-size:1.5rem; line-height:1.25; font-weight:800; color:var(--rpm-color-fg); } /* SEO-Frage als

in (JSON-LD/Outline) — optisch neutral halten */ .rpm-ds .rpm-faq summary h3 { display:inline; margin:0; font:inherit; color:inherit; } /* Antwort-Container fuer mehrteilige Antworten (div-Wrapper statt einzelnem

), z. B. Kategorie-FAQ (wpautop) und Reifenrechner (Prosa + Tabellen). */ .rpm-ds .rpm-faq .rpm-faq-a { padding:0 22px 20px; color:var(--rpm-color-fg-body); line-height:1.65; font-size:15px; } .rpm-ds .rpm-faq .rpm-faq-a > :first-child { margin-top:0; } .rpm-ds .rpm-faq .rpm-faq-a > :last-child { margin-bottom:0; } /* Einbettungskontext: FAQ direkt nach dem Produkt-Grid (woocommerce_after_shop_loop) */ .rpm-ds.rpm-faq-archive { clear:both; margin-top:clamp(2rem,4vw,2.5rem); } /* Entrance-Animation */ @media (prefers-reduced-motion:no-preference){ .rpm-ds .rpm-rise{ opacity:0; transform:translateY(12px); animation:rpm-rise .55s cubic-bezier(.2,.7,.2,1) forwards; } .rpm-ds .rpmd-usp-card:nth-child(2){ animation-delay:.07s; } .rpm-ds .rpmd-usp-card:nth-child(3){ animation-delay:.14s; } @keyframes rpm-rise{ to{ opacity:1; transform:none; } } } /* ===== Homepage-POC-Promotion (aus 6508 page-scoped