/* ══════════════════════════════════════════════════════════════════════════
   vc-srpim.css — DIE Kärtchenansicht (Inserats-Karte) — EINE Quelle

   Betreiber 17.09.2026: „immer einfach Kärtchenansicht und nicht das was auch
   immer das sein sollte … bei jeder Kategorie gleich und alle zukünftigen auch."

   Bis dahin stand dieselbe Karten-Optik zweimal im Haus: als <style id="srpim-style">
   in kategorie.html (alle dynamischen/künftigen Kategorien) und — in einer eigenen
   Ausbaustufe — in immobilien.html. Die Merkliste im Konto zeichnete stattdessen
   die Erstellformular-Vorschau jeder Kategorie-Bibliothek: darum sah dort jede
   Kategorie anders aus und manche Karte zeigte gar kein Bild.

   Diese Datei ist der WÖRTLICHE Block aus kategorie.html (Z. 471–537, Stand
   17.09.2026), per Skript herausgelöst — nichts abgetippt, nichts umgeschrieben.
   Eingebunden von: kategorie.html (statt des Inline-Blocks) und account.html
   (Merkliste). Die Feinabstimmung aller Sektionen (Bild 40 %, Schrift, Reihen-
   folge, Steuer-Hinweis) kommt wie bisher aus vc-cardlook.js — auch dort gilt
   `article.srpim` ohne Seitenbindung, also in der Merkliste genauso.

   ⚠️ Wer hier etwas ändert, ändert es für ALLE Kategorien und die Merkliste.
══════════════════════════════════════════════════════════════════════════ */
/* ── Booking-Stil Such-Ergebnis-Zeilenkarten (1:1 aus immobilien.html fix-73), Praefix srpim- —
     nur #grid; OHNE Herz/Merkliste/Parken (dyn hat kein Fav-System) ── */
.srpim{display:grid;grid-template-columns:230px minmax(0,1fr);grid-template-rows:auto auto auto 1fr;grid-template-areas:"photo head" "photo rate" "photo body" "photo buy" "dealer dealer";gap:.35rem 1.05rem;background:#fff;border:1px solid var(--bord);border-radius:8px;padding:.9rem;cursor:pointer;position:relative;text-align:left;font-family:inherit}
.srpim:hover{border-color:rgba(27,86,204,.45);box-shadow:0 8px 26px rgba(12,26,46,.10)}
html[data-theme="dark"] .srpim{background:#17171c;border-color:#28282e;color:#e8e9ee}
html[data-theme="dark"] .srpim:hover{border-color:#3a3b42;box-shadow:0 8px 26px rgba(0,0,0,.35)}
.srpim-photo{grid-area:photo;position:relative;width:230px;max-width:100%;aspect-ratio:1/1;border-radius:8px;overflow:hidden;background:#0f1722;display:flex;align-items:center;justify-content:center}
.srpim-photo img{width:100%;height:100%;object-fit:cover;display:block}
.srpim-photo svg.bg-icon{width:54px;height:54px;opacity:.25;color:#fff}
.srpim-head{grid-area:head;min-width:0}
.srpim-titlerow{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.srpim-neu{display:inline-block;background:#f6a609;color:#3a2a00;font-size:.66rem;font-weight:900;padding:.14rem .5rem;border-radius:999px;text-transform:uppercase;letter-spacing:.03em}
.srpim-title{font-size:1.28rem;font-weight:800;letter-spacing:-.015em;color:var(--blue);line-height:1.25}
html[data-theme="dark"] .srpim-title{color:#7BAFF8}
.srpim-locline{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;font-size:.8rem;margin-top:.3rem;color:var(--tmut)}
.srpim-locline svg{color:var(--blue);flex-shrink:0}
.srpim-locline a{color:var(--blue);font-weight:600;text-decoration:none}
.srpim-locline a:hover{text-decoration:underline}
html[data-theme="dark"] .srpim-locline a,html[data-theme="dark"] .srpim-locline svg{color:#7BAFF8}
.srpim-bodyc{grid-area:body;min-width:0;display:flex;flex-direction:column;gap:.45rem;margin-top:.15rem}
.srpim-desc{font-size:.84rem;color:var(--tmid);line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
html[data-theme="dark"] .srpim-desc{color:#c9cad2}
.srpim-specs{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-top:auto}
html[data-theme="dark"] .srpim-specs .spec{color:#c9cad2}
.srpim-buy{grid-area:buy;display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;gap:.15rem;text-align:right}
.srpim-price{font-size:1.45rem;font-weight:900;letter-spacing:-.02em;color:var(--text)}
html[data-theme="dark"] .srpim-price{color:#fff}
.srpim-price-lbl{font-size:.72rem;color:var(--tmut)}
.srpim-cta{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;background:var(--blue);color:#fff;border:none;border-radius:8px;padding:.6rem 1.05rem;font-size:.86rem;font-weight:800;cursor:pointer;font-family:inherit;transition:background .2s;margin-top:.4rem}
.srpim-cta:hover{background:var(--blueh)}
html[data-theme="dark"] .srpim-cta{background:#16315c}
html[data-theme="dark"] .srpim-cta:hover{background:#2c2d34}
.srpim-dealer{grid-area:dealer;display:flex;align-items:center;gap:.65rem;border-top:1px solid var(--bord);padding-top:.75rem;margin-top:.55rem;flex-wrap:wrap}
html[data-theme="dark"] .srpim-dealer{border-top-color:#28282e}
.srpim-dlogo{width:40px;height:40px;flex-shrink:0;border-radius:50%;background:#fff;border:1px solid var(--bord);display:flex;align-items:center;justify-content:center;overflow:hidden;font-weight:900;color:#16181c;font-size:.85rem}
html[data-theme="dark"] .srpim-dlogo{border-color:#28282e}
.srpim-dlogo img{width:100%;height:100%;object-fit:cover;display:block}
.srpim-dinfo{flex:1;min-width:0}
.srpim-dname{display:block;font-size:.86rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
html[data-theme="dark"] .srpim-dname{color:#fff}
.srpim-dstars{color:#f5b942;font-size:.82rem;letter-spacing:1px;margin-left:.35rem}
.srpim-dcount{font-size:.75rem;color:var(--tmut);margin-left:.2rem}
.srpim-dloc{display:block;font-size:.78rem;color:var(--tmut);margin-top:.1rem}
html[data-theme="dark"] .srpim-dloc{color:#9a9ba3}
.srpim-actions{display:flex;gap:.5rem;flex-shrink:0}
.srpim-btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;border-radius:8px;padding:.5rem .9rem;font-size:.82rem;font-weight:800;cursor:pointer;font-family:inherit}
.srpim-btn svg{flex-shrink:0}
.srpim-btn-contact{background:var(--blue);border:1.5px solid var(--blue);color:#fff}
.srpim-btn-contact:hover{background:var(--blueh);border-color:var(--blueh)}
html[data-theme="dark"] .srpim-btn-contact{background:#16315c;border-color:#16315c}
html[data-theme="dark"] .srpim-btn-contact:hover{background:#2c2d34;border-color:#2c2d34}
/* „Parken" — Optik 1:1 aus immobilien.html, damit die weiteren Kategorien
   genauso aussehen wie die festen (gefülltes Herz, sobald gemerkt). */
.srpim-btn-park{background:transparent;border:1.5px solid var(--blue);color:var(--blue)}
.srpim-btn-park:hover{background:rgba(27,86,204,.08)}
.srpim-btn-park.on svg{fill:currentColor}
html[data-theme="dark"] .srpim-btn-park{color:#7BAFF8;border-color:#2E5FB5}
html[data-theme="dark"] .srpim-btn-park:hover{background:rgba(46,95,181,.15)}
@media(max-width:720px){
  .srpim{grid-template-columns:1fr;grid-template-rows:auto;grid-template-areas:"photo" "head" "rate" "body" "buy" "dealer";gap:.5rem}
  .srpim-photo{width:100%;aspect-ratio:16/9}
  .srpim-buy{align-items:flex-start;text-align:left;width:100%}
  .srpim-cta{width:100%}
  .srpim-dinfo{flex:1 1 60%}
  .srpim-actions{width:100%}
  .srpim-btn{flex:1 1 100%}
}

/* Eckdaten-Chips (.srpim-specs > .spec) — wörtlich aus kategorie.html Z. 104–106;
   ohne sie stünden die Eckdaten in der Merkliste ungestylt. */
.spec{display:inline-flex;align-items:center;gap:.32rem;font-size:.76rem;color:var(--tmid);font-weight:600;white-space:nowrap}
.spec svg{color:#9aa3b0;flex-shrink:0}
@media(max-width:760px){.spec{font-size:.72rem}}

/* ══ Merkliste im Konto: die Konto-Haut vom Inserats-Kärtchen fernhalten ══
   account.html überzieht ALLES in `.main` mit einer eigenen Radius-Staffel
   (vc-konto-design.js: `.main.main *:not(svg){border-radius:10px!important}`).
   Das Inserats-Kärtchen ist aber kein Konto-Widget — es soll Zeichen für
   Zeichen so aussehen wie auf der Kategorieseite. Gemessen am 17.09.2026:
   Karte 12→10px, Foto 0→10px, Händler-Logo 50%→10px, Eckdaten 0→10px.
   Nur diese Datei und nur innerhalb von #merklisteContent; `!important` ist
   hier Pflicht, weil die Konto-Haut selbst mit `!important` arbeitet.
   🚨 Wer oben (oder in vc-cardlook.js) einen Radius ändert, ändert ihn hier mit:
      Karte 12px = vc-cardlook.js `article.srpim`, Knöpfe 8px = oben, Logo 50 %. */
#merklisteContent .srpim.srpim,
#merklisteContent .srpim.srpim :not(svg){border-radius:0!important}
#merklisteContent article.srpim.srpim{border-radius:12px!important}
#merklisteContent .srpim.srpim .srpim-dlogo{border-radius:50%!important}
#merklisteContent .srpim.srpim .srpim-btn,
#merklisteContent .srpim.srpim .srpim-cta{border-radius:8px!important}