/* Top-Anzeigen und Hervorhebung im Fahrzeugmarkt (05.09.2026).
   Markup: templates/marketplace/_car_card.html (.car-anzeige), _anzeigen_block.html,
   _ranking_hinweis.html, sortierung.html. Eingebunden in marketplace/base.html NACH
   marketplace-cards.css und marketplace-rubrik.css — die Karte gehört jenen, dies hier
   legt nur das Etikett und die Färbung darüber.
   🧨 Alle Farben über Tokens (:root in marketplace/base.html, umgesetzt von den vier
   Rubrik-Themes): --brand, --brand-text, --tint, --ink, --muted, --line, --card.
   Ein Hex-Wert hier wäre gegen die dunklen Rubrik-Themes immun.

   RECHT (UWG § 5b Abs. 2 + Anhang Nr. 11a, BGH I ZR 2/11): das Wort „Anzeige" steht in
   Fließtextgröße, fett, dunkel auf hellem Chip — NICHT in .68rem wie die Plaketten und
   nicht als Symbol. NN/g: eine „zu schicke" Karte liest sich als Werbung und wird
   übersprungen; deshalb nur ein dezenter Tint (6 %) und ein etwas kräftigerer Rahmen. */

/* ── Etikett in der Karte (erste Zeile von .car-b) ─────────────────────────── */
.car-anzeige{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:0;
  font-size:.86rem;line-height:1.3;color:var(--ink)}
/* Chip: Markenton als SCHRIFT auf --tint (4,85:1, dieselbe Kombination wie .car-zustand). */
.car-anzeige b{font-weight:800;letter-spacing:.02em;border-radius:6px;padding:.1rem .48rem;
  color:var(--brand-text, var(--brand));background:var(--tint);
  border:1px solid color-mix(in srgb,var(--brand) 26%,transparent)}
.car-anzeige span{color:var(--muted)}
/* 🧨 Rubrik-Themes (body[data-rubrik]): dort ist --tint HALBTRANSPARENT und liegt auf einer
   dunklen Karte — der Markenton darauf misst nur 2,3–4,0:1 (Playwright-Messung 05.09.2026,
   marketplace/test_topanzeige_browser.py). Deshalb invertiert: Chip in --ink (dem Fließtext-
   Ton des Themes), Schrift in --card. Das Paar ist per Konstruktion so lesbar wie jeder Satz
   auf der Karte — unabhängig davon, welchen Akzent ein Theme wählt. */
body[data-rubrik] .car-anzeige b{background:var(--ink,#0d1326);color:var(--card,#fff);
  border-color:color-mix(in srgb,var(--ink,#0d1326) 60%,transparent)}

/* Die Karte färbt sich über das Etikett — `<article class="car">` bleibt byte-gleich
   (Ratsche test_automarkt_liste). Ohne :has-Unterstützung fehlt nur der Tint; das
   Etikett (die Pflichtangabe) steht unabhängig davon. */
.car:has(> .car-b > .car-anzeige){
  background:color-mix(in srgb,var(--brand) 6%,var(--card));
  border-color:color-mix(in srgb,var(--brand) 34%,var(--line))}
.car:has(> .car-b > .car-anzeige) .car-dealer{border-top-color:color-mix(in srgb,var(--brand) 18%,var(--line))}

/* Kachelansicht: .car-b ist `display:contents`, das Etikett wird direktes Flex-Kind und
   braucht eigene `order` (vor der Plaketten-Zeile, order:1) und Innenabstände. */
html[data-ansicht="kachel"] .car-anzeige{order:0;padding:11px 13px 0}
html[data-ansicht="kachel"] .car-anzeige+.car-plaketten{padding-top:7px}
html[data-ansicht="kachel"] .car-anzeige+.car-title{padding-top:7px}

/* ── Händler-Boost: bezahltes Etikett in Händlerzeile (Karte), Verzeichnis, Profil ──── */
.car-dealer-boost{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;color:var(--muted);margin-left:6px;vertical-align:middle}
.car-dealer-boost b{font-weight:800;letter-spacing:.02em;border-radius:5px;padding:.05rem .4rem;
  color:var(--brand-text, var(--brand));background:var(--tint);
  border:1px solid color-mix(in srgb,var(--brand) 26%,transparent)}
body[data-rubrik] .car-dealer-boost b{background:var(--ink,#0d1326);color:var(--card,#fff);
  border-color:color-mix(in srgb,var(--ink,#0d1326) 60%,transparent)}
.hp-boost{display:flex;align-items:flex-start;gap:8px;margin:10px 0 0;font-size:.9rem;line-height:1.4;color:var(--muted)}
.hp-boost b{font-weight:800;letter-spacing:.02em;border-radius:6px;padding:.1rem .48rem;flex:none;
  color:var(--brand-text, var(--brand));background:var(--tint);
  border:1px solid color-mix(in srgb,var(--brand) 26%,transparent)}
.hp-boost a{color:inherit}

/* ── Block „Top-Platzierungen · bezahlte Platzierung" (Seite 1) ────────────── */
.mk-anzeigen{margin:0 0 18px;padding:12px 12px 10px;border-radius:18px;
  border:1px solid color-mix(in srgb,var(--brand) 28%,var(--line));
  background:color-mix(in srgb,var(--brand) 4%,var(--card))}
.mk-anzeigen-h{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 8px;margin:0 0 10px;
  font-size:1rem;font-weight:800;color:var(--ink)}
.mk-anzeigen-sub{font-weight:600;font-size:.9rem;color:var(--muted)}
.mk-anzeigen-info{margin-left:auto;font-size:.82rem;font-weight:700;
  color:var(--brand-text, var(--brand));text-decoration:underline;text-underline-offset:2px}
.mk-anzeigen .mk-grid{gap:10px}
.mk-anzeigen-trenner{margin:12px 2px 0;font-size:.86rem;font-weight:700;color:var(--muted)}

/* ── Ranking-Hinweis unter der Sortierung (§ 5b Abs. 2 UWG) ────────────────── */
.mk-ranking{margin:-6px 0 14px;font-size:.8rem;line-height:1.45;color:var(--muted)}
.mk-ranking a{color:var(--brand-text, var(--brand));font-weight:700;white-space:nowrap}

/* ── Regelseite /autos/sortierung/ ─────────────────────────────────────────── */
.mk-regeln{max-width:760px;margin:28px auto 56px;padding:0 18px;color:var(--ink);line-height:1.6}
.mk-regeln h1{font-size:1.7rem;margin:0 0 6px}
.mk-regeln h2{font-size:1.1rem;margin:26px 0 6px}
.mk-regeln p{margin:0 0 10px}
.mk-regeln-lead{font-size:1.02rem;color:var(--muted)}
.mk-regeln-hint{margin-top:28px;font-size:.9rem;color:var(--muted)}
.mk-regeln a{color:var(--brand-text, var(--brand));font-weight:700}

@media(max-width:640px){
  .car-anzeige{font-size:.82rem}
  .mk-anzeigen{padding:10px 8px 8px;border-radius:14px}
  .mk-anzeigen-info{margin-left:0}
}