/* Marktplatz-Fahrzeugkarte — EINE Quelle für Trefferliste, Merkliste und Rubrik-Seiten. Gehörte bis 08/2026 dupliziert in templates/marketplace/list.html UND merkliste.html; mit den Rubrik-Themes wäre daraus eine dritte Pflegestelle geworden. Markup: templates/marketplace/_car_card.html 🧨 Alle Flächenfarben über Tokens (siehe :root in marketplace/base.html) — ein Hex-Wert hier wäre gegen die Rubrik-Themes immun und ergäbe weiße Karten auf dunklem Grund. ZWEI ANSICHTEN (Betreiber-Entscheid 18.08.2026, Vorbild mobile.de): • LISTE (Standard) — ein Fahrzeug je Zeile, Foto links, Daten rechts. • KACHELN — das frühere Raster, erreichbar über den Umschalter (_ansicht_umschalter.html). 🧨🧨 Der STANDARD steht im Basis-CSS, der Sonderfall hängt an html[data-ansicht="kachel"]. Andersherum wäre die Liste ohne JavaScript nicht zu sehen: das Attribut setzt erst ein Skript im aus dem localStorage. So bekommt jeder Besucher die Liste — auch mit blockiertem JS, auch im ersten Frame (kein Umspringen nach dem Laden). */ /* ── Trefferliste: ein Fahrzeug je Zeile ────────────────────────────────────── Die Zeile hat DREI Zonen mit je einer Frage: Foto — „wie sieht es aus?" Mitte — „welches Auto ist das?" (Titel, Zusatz, Eckdaten, Vertrauen, Händler) Kaufspalte — „was kostet es und wie komme ich ran?" 🧨 Die Kaufspalte hat eine FESTE Breite. Dadurch stehen Preis und Aktionen in jeder Zeile auf derselben Kante, und man vergleicht senkrecht mit einem Blick. Bei mobile.de wandert der Preis mit der Textlänge — genau das kostet dort beim Überfliegen Zeit. */ .mk-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px} .car{position:relative;background:var(--card);border:1px solid var(--line);border-radius:16px; overflow:hidden;display:grid;grid-template-columns:minmax(190px,28%) minmax(0,1fr) 208px; align-items:stretch;transition:transform .18s,border-color .18s,box-shadow .18s;box-shadow:var(--shadow)} .car:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--brand) 40%,var(--line))} /* 🧨 Ausgedehnter Link: das ::after des Titel-Links deckt die ganze Zeile ab, Kontakt, Merken und die Herz-Taste liegen mit z-index darüber. So bleibt die ganze Zeile anklickbar, ohne verschachtelte Klickziele in einem (ungültiges HTML, auf dem Handy unzuverlässig). */ .car-link::after{content:"";position:absolute;inset:0;z-index:1} .car-link:hover{color:var(--brand)} /* Tastatur: der Rahmen gehört um die GANZE Zeile, nicht nur um die zwei Wörter des Titels — sonst sieht man beim Tabben nicht, welches Auto gerade dran ist. */ .car:focus-within{outline:3px solid var(--brand);outline-offset:2px} .car-link:focus-visible{outline:none} /* 🧨🧨 `width:100%` ist hier PFLICHT, nicht Kosmetik — und `aspect-ratio` gehört in der ZEILE ausdrücklich NICHT hierher. Am 18.08. am Objekt gemessen: Zeile ohne Häkchen → 229 × 172 px, alles richtig Zeile MIT Häkchen → Zeile 188 px hoch, Foto **250 × 188** in einer 229px-Spalte Ursache: das Rasterfeld streckt die HÖHE (align-items:stretch), und ein Kasten mit `aspect-ratio` und automatischer Breite rechnet daraus seine Breite zurück (188 × 4/3 = 250). Das Foto schob sich über die Fahrzeugdaten und schnitt den ersten Buchstaben des Titels ab — sichtbar NUR in inhaltsreichen Zeilen, im Quelltext gar nicht. Verwandt mit dem Befund vom 16.08. (`max-height` + `aspect-ratio` deckelte die Breite), nur andersherum. Mit definiter Breite kann das Verhältnis die Breite nicht mehr bestimmen; die Höhe kommt aus der Zeile, `object-fit:cover` schneidet sauber zu. `min-height` hält das Foto in inhaltsarmen Zeilen auf ansehnlicher Größe. Ratsche: test_automarkt_liste.py::test_haken_zeile_macht_das_foto_nicht_breiter */ .car-img{width:100%;height:100%;min-height:158px;background:var(--img-bg);position:relative;overflow:hidden} .car-img img{width:100%;height:100%;object-fit:cover;display:block} .car-img .noimg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.82rem} .car-zust{position:absolute;top:9px;left:9px;background:rgba(13,19,38,.82);color:#fff;font-size:.68rem;font-weight:800;border-radius:7px;padding:.18rem .5rem;text-transform:uppercase;letter-spacing:.02em} /* right:53px statt 9px: das Merkliste-Herz (.fav-btn, 38px breit + 9px Rand, z-index:3) saß exakt darüber und verdeckte das Band vollständig. */ .car-aktion{position:absolute;top:9px;right:53px;background:#dc2626;color:#fff;font-size:.68rem;font-weight:800;border-radius:7px;padding:.18rem .5rem;text-transform:uppercase;letter-spacing:.02em} /* 🧨 Die Unfall-Angabe ist eine Pflichtangabe im Inserat und darf NIE verdeckt werden. Platz wird deshalb deterministisch reserviert — aber NUR, wenn unten rechts wirklich die Fotozahl steht (`:has`). Pauschal 78px abzuziehen zwang „Reparierter Unfallschaden" auch ohne Gegenüber in zwei Zeilen. */ .car-unfall{position:absolute;bottom:9px;left:9px;max-width:calc(100% - 18px);color:#fff;font-size:.68rem;font-weight:800;line-height:1.15;border-radius:7px;padding:.18rem .5rem;text-transform:uppercase;letter-spacing:.02em} .car-img:has(.car-fotos) .car-unfall{max-width:calc(100% - 78px)} .car-unfall.badge-repariert{background:#b45309} .car-unfall.badge-unfall{background:#dc2626} /* Rubrik-Plakette oben links, unter dem Zustands-Band. 🧨 NICHT unten rechts: `.car-unfall` liegt unten links mit max-width:calc(100% - 18px) und läuft auf schmalen Karten unter die Plakette — die Unfall-Angabe ist eine Pflichtangabe im Inserat und darf NIE verdeckt werden. */ .car-rubrik{position:absolute;top:9px;left:9px;display:inline-flex;align-items:center;gap:5px; background:rgba(13,19,38,.82);color:#fff;font-size:.68rem;font-weight:800;border-radius:7px; padding:.18rem .5rem;text-transform:uppercase;letter-spacing:.02em;backdrop-filter:blur(4px)} .car-img:has(.car-zust) .car-rubrik{top:36px} .car-rubrik .rb-ic{font-size:.8em;line-height:1} .car-rubrik.r-sport{background:rgba(190,24,20,.88)} .car-rubrik.r-luxus{background:rgba(120,92,26,.88)} .car-rubrik.r-tuning{background:rgba(30,64,120,.88)} .car-rubrik.r-oldtimer{background:rgba(94,60,30,.88)} /* Das Herz am Foto gehört der KACHEL — in der Zeile steht „♥ Merken" beschriftet in der Kaufspalte. Zwei Herzen für dieselbe Sache wären doppelt gemoppelt. */ .car .fav-btn{display:none} /* ── Mitte: welches Auto ist das? ─────────────────────────────────────────── */ .car-b{padding:15px 18px 14px;display:flex;flex-direction:column;gap:6px;min-width:0} .car-title{margin:0;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.2rem;line-height:1.22;overflow-wrap:anywhere} /* Zwei Zeilen und dann Schluss: importierte Zusatztitel sind gern 200 Zeichen lang und drückten die Eckdaten sonst aus dem Blick. */ .car-sub{margin:0;color:var(--muted);font-size:.9rem;line-height:1.35;overflow-wrap:anywhere; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* Eckdaten als ruhige Punktzeile statt gerahmter Kästchen (Betreiber-Entscheid 18.08.): vier Rahmen je Zeile × 24 Zeilen sind 96 Kästen auf einem Bildschirm — das ermüdet. */ .car-facts{margin:2px 0 0;color:var(--ink);font-size:.9rem;font-weight:600;line-height:1.45} .car-facts span[aria-hidden]{color:var(--muted);margin:0 .1rem} .car-fotos{position:absolute;bottom:9px;right:9px;display:inline-flex;align-items:center;gap:4px; background:rgba(13,19,38,.72);color:#fff;font-size:.7rem;font-weight:800;border-radius:7px; padding:.16rem .45rem;backdrop-filter:blur(4px)} /* Vertrauensangaben: eine Zeile, grün nur im Häkchen — die Angabe selbst bleibt Fließtext. Alles grün wäre ein Werbebanner, und niemand liest fünf grüne Wörter. */ .car-haken{list-style:none;margin:3px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px} .car-haken li{display:inline-flex;align-items:center;gap:5px;font-size:.83rem;font-weight:600;color:var(--ink)} .car-haken .hk{color:#15803d;font-weight:800} /* Händlerzeile: unten, abgesetzt — sie beantwortet „von wem und wo", nicht „welches Auto". margin-top:auto schiebt sie an den unteren Rand, damit sie in ALLEN Zeilen auf einer Linie steht, egal wie lang der Titel darüber ist. */ .car-dealer{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:10px; border-top:1px solid var(--line);font-size:.8rem;color:var(--muted);min-width:0} /* 🧨 Weisser Kasten mit Rahmen statt nacktem Bild: Haendlerlogos kommen in allen Formen und Hintergruenden (dunkle PNGs, transparente SVGs, Fotos). Ohne feste Buehne springt die Zeile je nach Logo um, und ein dunkles Logo verschwindet auf dunklem Rubrik-Theme. 28px hoch — darunter ist eine Wortmarke nicht mehr zu erkennen. */ .car-logo{flex:0 0 auto;width:auto;height:28px;max-width:92px;object-fit:contain; background:#fff;border:1px solid var(--line);border-radius:6px;padding:2px 4px} .car-logo-fb{flex:0 0 auto;font-size:.95rem;line-height:1} .car-dealer-txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .car-dealer .star{color:#f59e0b;font-weight:800} .car-bw-n{color:var(--muted)} /* Die Entfernung ist bei einer Umkreissuche die zweitwichtigste Zahl nach dem Preis — deshalb dunkler als der Rest der Zeile, aber ohne Signalfarbe. */ .car-dist{color:var(--ink);font-weight:700} /* ── Kaufspalte: was kostet es, wie komme ich ran? ────────────────────────── */ .car-buy{display:flex;flex-direction:column;gap:4px;padding:15px 18px 14px 16px; border-left:1px solid var(--line);background:color-mix(in srgb,var(--bg) 45%,var(--card))} .car-price{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.55rem;line-height:1.1;letter-spacing:-.01em} .car-price-anfrage{font-size:1rem;color:var(--muted);font-weight:700} .preis-alt{display:block;text-decoration:line-through;color:var(--muted);font-weight:600;font-size:.6em;margin:0 0 2px} .preis-neu{color:#dc2626} .preis-spar{font-size:.76rem;color:#15803d;font-weight:700} .car-mwst{margin:0;font-size:.76rem;color:var(--muted);font-weight:600} /* Aktionen unten in der Spalte: in jeder Zeile an derselben Stelle. */ .car-actions{margin-top:auto;padding-top:10px;display:flex;flex-direction:column;gap:7px;position:relative;z-index:2} /* 🧨 44px Mindesthöhe (Tippfläche) und deckendes var(--brand) = 4,58:1. Der Verlauf var(--grad) trägt an seinem hellen Ende nur 2,35:1 — für Schrift dieser Größe zu wenig. */ .car-cta,.car-park{display:inline-flex;align-items:center;justify-content:center;gap:6px; min-height:44px;border-radius:11px;font:inherit;font-weight:800;font-size:.9rem;cursor:pointer; text-align:center;transition:filter .15s,border-color .15s,color .15s} .car-cta{background:var(--brand);color:#fff;border:0} .car-cta:hover{filter:brightness(1.06)} .car-park{background:var(--card);color:var(--ink);border:1.5px solid var(--line)} .car-park:hover{border-color:var(--brand);color:var(--brand)} .car-park.is-fav{border-color:var(--brand);color:var(--brand);background:var(--tint)} /* ── Umschalter Liste ↔ Kacheln ───────────────────────────────────────────── */ /* Markup: templates/marketplace/_ansicht_umschalter.html, Logik: static/js/ds-market.js. 🧨 Aktiv-Zustand über --ink auf --tint plus Markierungslinie, NICHT weiße Schrift auf --brand oder --grad: bei .85rem gilt 4,5:1, und der Verlauf trägt nur 2,35:1. */ .mk-ansicht{display:inline-flex;border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--card)} .mk-ans-btn{display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;color:var(--muted); font:inherit;font-weight:800;font-size:.85rem;padding:.5rem .8rem;min-height:40px;cursor:pointer;line-height:1} .mk-ans-btn+.mk-ans-btn{border-left:1px solid var(--line)} .mk-ans-btn:hover{color:var(--ink)} .mk-ans-btn[aria-pressed="true"]{background:var(--tint);color:var(--ink);box-shadow:inset 0 -2px 0 var(--brand)} .mk-ans-btn svg{flex:0 0 auto;display:block} /* Auf dem Handy nur die Symbole — nebeneinander mit „Sortieren" wäre die Zeile sonst zweizeilig und der Umschalter rutschte unter die Trefferzahl. */ @media(max-width:520px){.mk-ans-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}} /* ── Kachelansicht (Umschalter) ───────────────────────────────────────────── */ /* 🧨 Höhere Spezifität als die Basisregeln oben (Attribut + Klasse) — die Reihenfolge allein trägt hier nicht, weil darunter Media-Queries folgen und @media die Spezifität NICHT erhöht (Fehler vom 16.08.). 🧨 `display:contents` auf .car-b flacht die Verschachtelung ab, damit Preis und Händlerzeile in der Kachel frei einsortiert werden können (Bild → Titel → Zusatz → Eckdaten → Preis → Händler). Ohne das säße der Preis zwangsläufig UNTER der Händlerzeile, weil er im Markup ein Geschwister von .car-b ist. Preis dafür: die Innenabstände müssen an den Kindern stehen — .car-b hat in der Kachel keine mehr. */ html[data-ansicht="kachel"] .mk-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px} html[data-ansicht="kachel"] .car{display:flex;flex-direction:column} html[data-ansicht="kachel"] .car-img{aspect-ratio:16/10;height:auto} html[data-ansicht="kachel"] .car .fav-btn{display:flex} html[data-ansicht="kachel"] .car-b{display:contents} html[data-ansicht="kachel"] .car-title{order:2;padding:12px 13px 0;font-size:1.08rem} html[data-ansicht="kachel"] .car-sub{order:3;padding:2px 13px 0;-webkit-line-clamp:1} html[data-ansicht="kachel"] .car-facts{order:4;padding:5px 13px 0;font-size:.85rem} /* In der schmalen Kachel zögen Häkchen und Knöpfe die Karte in die Länge — dort zählt der Überblick, die Einzelheiten stehen eine Ansicht weiter. */ html[data-ansicht="kachel"] .car-haken, html[data-ansicht="kachel"] .car-actions{display:none} html[data-ansicht="kachel"] .car-buy{order:5;margin-top:auto;padding:10px 13px 0;border-left:0;background:none} html[data-ansicht="kachel"] .car-price{font-size:1.4rem} html[data-ansicht="kachel"] .car-dealer{order:6;margin:10px 13px 12px;padding-top:9px} /* ── Mittlere Breiten: Kaufspalte rutscht unter die Fahrzeugdaten ─────────── */ /* Unter ~1280px Fenster bleibt der Ergebnisspalte neben dem Filter zu wenig Platz für drei Spalten — die Kaufspalte würde die Fahrzeugdaten auf Streifenbreite quetschen. Sie wandert deshalb unter die Daten und wird zur waagerechten Leiste: Preis links, Aktionen rechts. Die senkrechte Vergleichbarkeit geht dabei bewusst verloren; sie ist ein Vorteil für den breiten Bildschirm, kein Selbstzweck. */ @media(max-width:1279px){ .car{grid-template-columns:minmax(160px,30%) minmax(0,1fr)} .car-buy{grid-column:2;flex-direction:row;align-items:center;justify-content:space-between; gap:12px;flex-wrap:wrap;border-left:0;border-top:1px solid var(--line);background:none; padding:10px 18px 14px} .car-actions{margin-top:0;padding-top:0;flex-direction:row;gap:8px} .car-cta,.car-park{padding:0 .9rem} .car-b{padding-bottom:6px} .car-b .car-dealer{border-top:0;padding-top:8px} } /* ── Schmale Schirme: die Zeile wird zur gestapelten Karte ─────────────────── */ /* Unter ~700px bliebe vom Foto ein Briefmarkenstreifen; dort ist die gestapelte Karte die ehrlichere Form — sie zeigt EIN Auto je Bildschirmbreite, genau wie die Zeile. */ @media(max-width:700px){ .car{grid-template-columns:minmax(0,1fr)} /* Gestapelt gibt es keine Nachbarspalte, gegen die das Foto laufen könnte — hier darf das Seitenverhältnis die Höhe bestimmen (height:auto macht es dafür überhaupt erst wirksam, die Grundregel oben setzt 100%). */ .car-img{aspect-ratio:16/9;height:auto} .car-b{padding:13px 14px 8px} .car-title{font-size:1.1rem} .car-buy{grid-column:1;padding:10px 14px 13px} /* 🧨 Beide Knöpfe gleich breit statt „Kontakt" schmal und „Merken" breit: auf dem Handy trifft man mit dem Daumen, nicht mit dem Mauszeiger. */ .car-actions{flex:1 1 210px} .car-cta,.car-park{flex:1} /* 🧨 Auf dem Handy darf die Händlerzeile UMBRECHEN statt abzuschneiden: mit einer Zeile blieb vom Ort „24103…" übrig — und der Ort ist beim Autokauf eine der wichtigsten Angaben (Abholung, Probefahrt). Zwei Zeilen sind besser als keine Auskunft. */ .car-dealer-txt{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.4} html[data-ansicht="kachel"] .mk-grid{grid-template-columns:1fr} html[data-ansicht="kachel"] .car-img{aspect-ratio:16/9} } /* Sehr schmal: Preis und Knopfpaar untereinander, sonst wird der Preis abgeschnitten. 🧨🧨 `flex:0 0 auto` ist hier PFLICHT. Im Block darüber steht `flex:1 1 210px` — als BREITEN-Basis gedacht, weil .car-buy dort in Zeilenrichtung läuft. Sobald die Spalte kippt, ist dieselbe Zahl eine HÖHEN-Basis: die Knopfleiste wurde 210px hoch und die beiden Knöpfe zu Flächen von der Größe einer Bildschirmhälfte (am 18.08. auf 390px gemessen). Eine Flex-Basis gilt immer für die HAUPTACHSE — wer die Richtung dreht, muss sie mitdrehen. */ @media(max-width:400px){ .car-buy{flex-direction:column;align-items:stretch} .car-actions{flex:0 0 auto;flex-direction:row} } /* Ergebnislisten-Chrome (Trefferzahl, Pager, Leerzustand). Lag bis 08/2026 nur im