/*
 * Claude 2026-07-20: dmi_de-Redesign Schritt 2 - Objektkarten (Startseite + estatelist).
 * Rein ADDITIV; Tokens/Welt-Scoping kommen aus dmi-base.css. Die Welt (Denkmal gruen /
 * Pflege honig) wird PRO Karte gesetzt (.dmi-oc.dk / .dmi-oc.pf), damit gemischte Listen
 * (Angebote-Seite) korrekt einfaerben. Klassen als dmi-* (kollidieren sonst mit Bootstrap).
 */

/* Karten-Raster: Startseite-Angebote + estatelist teilen sich dieses Grid. */
.dmi-grid-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }

/* ---- Karte ---- */
.dmi-oc { position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--sh-sm); transition:transform .18s, box-shadow .18s; display:flex; flex-direction:column; }
.dmi-oc:hover { transform:translateY(-4px); box-shadow:var(--sh); }
.dmi-oc.dk { --accent:var(--dk); --accent-deep:var(--dk-deep); --tint:var(--dk-tint); --edge:var(--dk-edge); }
.dmi-oc.pf { --accent:var(--pf); --accent-deep:var(--pf-deep); --tint:var(--pf-tint); --edge:var(--pf-edge); }

/* Vollflaechiger, ganze-Karte-klickbarer Link (Stretched-Link) unter den echten Links. */
.dmi-oc .dmi-cardlink { position:absolute; inset:0; z-index:1; }

/* Foto + Overlay-Badges */
.dmi-oc .dmi-oc-ph { height:186px; position:relative; overflow:hidden; background:#e9e4da; }
.dmi-oc .dmi-oc-ph img { width:100%; height:100%; object-fit:cover; display:block; }
.dmi-oc .dmi-chip { position:absolute; top:13px; left:13px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#fff; padding:6px 11px; border-radius:99px; z-index:2; }
.dmi-oc.dk .dmi-chip { background:rgba(35,79,67,.94); }
.dmi-oc.pf .dmi-chip { background:rgba(140,81,23,.94); }
.dmi-oc .dmi-kfw { position:absolute; top:13px; right:13px; font-size:10.5px; font-weight:700; color:var(--ink); background:rgba(255,255,255,.94); padding:5px 9px; border-radius:7px; z-index:2; }
.dmi-oc .dmi-oc-flag { position:absolute; left:13px; bottom:13px; font-size:11px; font-weight:700; color:#fff; background:rgba(32,33,28,.86); padding:5px 10px; border-radius:7px; z-index:2; line-height:1.25; }
.dmi-oc .dmi-oc-flag.excl { background:var(--accent-deep); }
.dmi-oc .dmi-oc-flag strong { color:#fff; }

/* Karten-Body */
.dmi-oc .dmi-oc-bd { padding:18px 20px 20px; flex:1; display:flex; flex-direction:column; }
.dmi-oc .dmi-loc { font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--slate); }
.dmi-oc .dmi-nm { font-family:var(--serif); font-weight:600; font-size:21px; margin:3px 0 12px; line-height:1.12; }
.dmi-oc .dmi-nm a { color:inherit; text-decoration:none; position:relative; z-index:2; }
.dmi-oc .dmi-nm a:hover { color:var(--accent-deep); text-decoration:none; }
.dmi-oc .dmi-hl { list-style:none; padding:0; margin:0 0 14px; display:grid; gap:6px; }
.dmi-oc .dmi-hl li { font-size:13px; color:var(--ink-soft); padding-left:18px; position:relative; }
.dmi-oc .dmi-hl li::before { content:""; position:absolute; left:0; top:7px; width:8px; height:8px; border-radius:2px; background:var(--accent); opacity:.85; }

/* Datenleiste (2x2) */
.dmi-oc .dmi-dl { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; margin:auto 0 14px; }
.dmi-oc .dmi-dl > div { background:#fbfaf7; padding:8px 12px; margin:0; }
.dmi-oc .dmi-dl dt { font-size:10.5px; letter-spacing:.03em; text-transform:uppercase; color:var(--slate); margin:0; font-weight:400; }
.dmi-oc .dmi-dl dd { margin:2px 0 0; font-weight:700; font-size:14px; font-variant-numeric:tabular-nums; }
.dmi-oc .dmi-dl .key dd { color:var(--accent-deep); }

/* Fuss: Preis + zum-Expose */
.dmi-oc .dmi-cardfoot { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.dmi-oc .dmi-price { font-size:12px; color:var(--slate); }
.dmi-oc .dmi-price b { display:block; font-size:15.5px; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
.dmi-oc .dmi-btn-ghost { position:relative; z-index:2; border-radius:var(--r-sm); padding:9px 16px; font-weight:700; font-size:13px; background:#fff; color:var(--accent-deep); border:1px solid var(--edge); text-decoration:none; white-space:nowrap; display:inline-block; }
.dmi-oc .dmi-btn-ghost:hover { background:var(--tint); color:var(--accent-deep); text-decoration:none; }

@media (max-width:900px) { .dmi-grid-cards { grid-template-columns:1fr 1fr; } }
@media (max-width:680px) { .dmi-grid-cards { grid-template-columns:1fr; } }