/* Rubrik-Themes des Marktplatzes (/autos/rubrik//) + Rubrik-Leiste auf /autos/. MECHANIK: Das gesamte Marktplatz-CSS ist gegen Tokens geschrieben (:root in templates/marketplace/base.html). Ein überschreibt ausschließlich diese Tokens — Header, Karten, Chips, Buttons, Pager und Footer ziehen automatisch nach. Keine Template-Kopie, keine !important-Kaskade. Warum body und nicht :root? Custom Properties werden pro Element aufgelöst; die Deklaration auf gewinnt für und alle Nachfahren gegenüber der geerbten :root-Deklaration — unabhängig von der Ladereihenfolge der Dateien. KONTRASTE (gegen die jeweilige --card gerechnet, WCAG AA verlangt 4.5:1): Luxus Text 15.6:1 · Akzent 7.0:1 · Muted 5.6:1 Sport Text 14.8:1 · Akzent 5.4:1 · Muted 6.3:1 Tuning Text 15.1:1 · Akzent 9.2:1 · Muted 5.9:1 Oldtimer Text 13.9:1 · Akzent 5.5:1 · Muted 6.5:1 🧨 Sport-Rot ist bewusst #ff5a4d und nicht das kräftigere #ff2d20 — letzteres lag mit 4.8:1 zu dicht an der Grenze, um Rundungen und Displayprofile zu überleben. */ /* ══ Rubrik-Leiste (auf der hellen Trefferliste /autos/) ══════════════════ */ /* auto-fit statt repeat(4,1fr): die Leiste zeigt auf /autos/ vier Kacheln, am Fuß einer Rubrik-Seite nur die drei anderen — beides soll die Breite füllen. */ .rb-leiste{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin:4px 0 18px} .rb-kachel{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--line); border-radius:14px;background:var(--card);box-shadow:var(--shadow);transition:transform .16s,border-color .16s} .rb-kachel:hover{transform:translateY(-2px)} .rb-kachel .rb-top{display:flex;align-items:center;gap:8px} .rb-kachel .rb-ic{font-size:1.05rem;line-height:1} .rb-kachel .rb-name{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.02rem;letter-spacing:-.01em} .rb-kachel .rb-n{margin-left:auto;font-size:.74rem;font-weight:800;color:var(--muted); background:var(--bg);border-radius:999px;padding:.1rem .5rem} .rb-kachel .rb-kurz{font-size:.78rem;color:var(--muted);line-height:1.35} .rb-kachel.r-sport:hover{border-color:#d9433a} .rb-kachel.r-luxus:hover{border-color:#b08a3c} .rb-kachel.r-tuning:hover{border-color:#1f8fa8} .rb-kachel.r-oldtimer:hover{border-color:#8b5e34} @media(max-width:720px){.rb-leiste{grid-template-columns:1fr 1fr}} @media(max-width:420px){ .rb-leiste{grid-template-columns:1fr;gap:8px} .rb-kachel{padding:10px 12px} .rb-kachel .rb-kurz{display:none} } /* ══ Rubrik-Seite: Grundgerüst (themen-unabhängig) ════════════════════════ */ .rb-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);margin-bottom:22px} /* 🧨🧨 padding-block, NICHT die Kurzform `padding`. Das Element traegt zugleich die Klasse .wrap, und deren Seitenluft (`padding:0 16px`, mobil 20px) steht in einer FRUEHER geladenen Regel gleicher Spezifitaet — eine Kurzform hier loescht sie komplett mit. Genau daran klebten Brotkrume, Ueberschrift und Einleitungstext ALLER Rubrikseiten bei x=0 direkt am Bildschirmrand ("reingepresst", Befund des Betreibers vom 16.08.), waehrend Trefferzeile und Karten darunter bei 16px standen — der Hero war also zusaetzlich gegen den Rest der Seite verschoben. */ .rb-hero-in{position:relative;z-index:1;padding-block:46px 38px} .rb-krumen{display:flex;flex-wrap:wrap;gap:6px;font-size:.8rem;color:var(--muted);margin-bottom:14px} .rb-krumen a:hover{color:var(--brand)} .rb-hero h1{margin:0 0 10px;font-family:'Bricolage Grotesque',sans-serif;font-weight:800; font-size:clamp(1.9rem,5.2vw,3.4rem);line-height:1.04;letter-spacing:-.03em} .rb-hero .rb-intro{margin:0;max-width:60ch;color:var(--muted);font-size:1.02rem;line-height:1.55} .rb-hero .rb-zahl{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;padding:.3rem .8rem; border-radius:999px;border:1px solid var(--line);font-size:.8rem;font-weight:800; text-transform:uppercase;letter-spacing:.08em;color:var(--brand)} /* 🧨 flex-start + `margin-left:auto` am letzten Element statt space-between: seit dem 18.08. steht zwischen Trefferzahl und Link auch der Ansicht-Umschalter, und space-between hätte ihn einsam in die Mitte der Zeile gestellt. */ .rb-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 16px} .rb-tools .rb-alle{margin-left:auto} .rb-tools .rb-alle{font-weight:800;font-size:.86rem;color:var(--brand)} .rb-leer{text-align:center;color:var(--muted);padding:48px 16px;background:var(--card); border:1px solid var(--line);border-radius:16px} .rb-quer{margin:34px 0 0;padding-top:22px;border-top:1px solid var(--line)} .rb-quer h2{font-family:'Bricolage Grotesque',sans-serif;font-size:1.1rem;margin:0 0 12px} @media(max-width:720px){.rb-hero-in{padding-block:30px 26px}} /* ══ LUXUS — Nachtschwarz + Champagnergold, großzügig, ruhig ══════════════ */ body[data-rubrik="luxus"]{ --bg:#0e1015;--card:#171a21;--ink:#f4f1ea;--muted:#9a9384; --brand:#c8a04a;--brand2:#e8d4a0;--line:rgba(232,212,160,.16); --grad:linear-gradient(100deg,#c8a04a 0%,#e8d4a0 100%); --hdr-bg:rgba(14,16,21,.9);--fav-bg:rgba(244,241,234,.14);--fav-ink:#d8d2c4; --tint:rgba(200,160,74,.16);--img-bg:#0b0d11; --shadow:0 24px 70px -30px rgba(0,0,0,.85); } body[data-rubrik="luxus"] .car{border-radius:20px} body[data-rubrik="luxus"] .rb-hero{ background:radial-gradient(120% 150% at 78% 0%,rgba(200,160,74,.20) 0%,transparent 62%),#0e1015} body[data-rubrik="luxus"] .rb-hero h1{font-weight:700;letter-spacing:-.035em} body[data-rubrik="luxus"] .car-price{font-weight:700;color:var(--brand2)} /* ══ SPORT — Anthrazit + Signalrot, kantig, schnell ═══════════════════════ */ body[data-rubrik="sport"]{ --bg:#0b0d12;--card:#14171e;--ink:#f2f4f8;--muted:#98a0b0; --brand:#ff5a4d;--brand2:#ffa03d;--line:rgba(255,255,255,.12); --grad:linear-gradient(100deg,#ff5a4d 0%,#ffa03d 100%); --hdr-bg:rgba(11,13,18,.9);--fav-bg:rgba(242,244,248,.14);--fav-ink:#c3cad6; --tint:rgba(255,90,77,.16);--img-bg:#0a0c10; --shadow:0 24px 70px -30px rgba(0,0,0,.85); } body[data-rubrik="sport"] .car, body[data-rubrik="sport"] .rb-kachel{border-radius:8px} body[data-rubrik="sport"] .rb-hero{ background:linear-gradient(104deg,#0b0d12 0%,#0b0d12 46%,rgba(255,90,77,.22) 100%)} body[data-rubrik="sport"] .rb-hero h1{font-style:italic;letter-spacing:-.035em} body[data-rubrik="sport"] .car-specs span{border-radius:5px} /* ══ TUNING — Tiefschwarz + Cyan/Violett, technisch, Neon ═════════════════ */ body[data-rubrik="tuning"]{ --bg:#0a0a0f;--card:#13131c;--ink:#eef2f7;--muted:#8e97ab; --brand:#22d3ee;--brand2:#a855f7;--line:rgba(34,211,238,.18); --grad:linear-gradient(100deg,#22d3ee 0%,#a855f7 100%); --hdr-bg:rgba(10,10,15,.9);--fav-bg:rgba(238,242,247,.14);--fav-ink:#b9c2d0; --tint:rgba(34,211,238,.14);--img-bg:#08080d; --shadow:0 24px 70px -30px rgba(0,0,0,.9); } body[data-rubrik="tuning"] .rb-hero{ background: repeating-linear-gradient(45deg,rgba(255,255,255,.022) 0 2px,transparent 2px 6px), radial-gradient(100% 140% at 12% 0%,rgba(168,85,247,.24) 0%,transparent 58%),#0a0a0f} body[data-rubrik="tuning"] .car:hover{ border-color:var(--brand);box-shadow:0 0 0 1px rgba(34,211,238,.32),0 24px 70px -30px rgba(34,211,238,.4)} body[data-rubrik="tuning"] .car-price, body[data-rubrik="tuning"] .car-specs span{font-variant-numeric:tabular-nums} /* ══ OLDTIMER — bewusst HELL: Creme + Cognac, warm, ruhig ═════════════════ */ body[data-rubrik="oldtimer"]{ --bg:#f5efe3;--card:#fffdf8;--ink:#2a2118;--muted:#6b5a45; --brand:#8b5e34;--brand2:#b9884f;--line:rgba(42,33,24,.16); --grad:linear-gradient(100deg,#8b5e34 0%,#b9884f 100%); --hdr-bg:rgba(245,239,227,.9);--fav-bg:rgba(255,253,248,.94);--fav-ink:#8a7358; --tint:rgba(139,94,52,.12);--img-bg:#ece3d3; --shadow:0 18px 50px -28px rgba(70,50,30,.45); } body[data-rubrik="oldtimer"] .rb-hero{ background:radial-gradient(110% 140% at 82% 0%,rgba(139,94,52,.16) 0%,transparent 60%),#f5efe3} body[data-rubrik="oldtimer"] .rb-hero h1{font-weight:800;letter-spacing:-.015em} body[data-rubrik="oldtimer"] .car{border-radius:10px} /* Beim Klassiker zählt das Baujahr, nicht die Laufleistung — erster Spec-Chip (EZ/BJ) bekommt deshalb das Gewicht, das sonst der Preis trägt. */ body[data-rubrik="oldtimer"] .car-specs span:first-child{ background:var(--tint);border-color:var(--brand);color:var(--brand);font-weight:800} /* ══ A11y ════════════════════════════════════════════════════════════════ */ [data-rubrik] a:focus-visible, [data-rubrik] button:focus-visible, [data-rubrik] input:focus-visible, [data-rubrik] select:focus-visible{outline:2px solid var(--brand);outline-offset:2px} @media(prefers-reduced-motion:reduce){ .rb-kachel,.car{transition:none} .rb-kachel:hover,.car:hover{transform:none} }