`; } function buildImagesHTML(arr) { const imgs = (arr || []).slice(0, 1); // <= nur 1 Bild if (!imgs.length) return ""; return renderGrid1(imgs); } /* ====================== Layout (Grid inline) ====================== */ function applyRowLayout(row, imagesFirst) { const single = window.matchMedia("(max-width: 980px)").matches; row.style.display = "grid"; row.style.width = "100%"; row.style.alignItems = "start"; row.style.gap = "28px"; row.style.margin = "40px 0 56px"; row.style.position = "relative"; if (single) { row.style.gridTemplateColumns = "1fr"; row.style.gridTemplateAreas = `"media" "info" "desc"`; } else { if (imagesFirst) { row.style.gridTemplateColumns = "58% 42%"; row.style.gridTemplateAreas = `"media info" "desc desc"`; } else { row.style.gridTemplateColumns = "42% 58%"; row.style.gridTemplateAreas = `"info media" "desc desc"`; } } } /* ====================== Typo (größer) ====================== */ function forceTypography(colInfo, row) { const model = colInfo.querySelector(".sam-model"); const spec = colInfo.querySelector(".sam-spec"); const desc = row.querySelector(".sam-desc"); if (model) { model.style.setProperty("font-size", "18px", "important"); model.style.setProperty("font-weight", "800", "important"); model.style.setProperty("letter-spacing", ".25em", "important"); model.style.setProperty("color", "#d6522e", "important"); model.style.setProperty("margin", "0 0 18px", "important"); model.style.setProperty("text-transform", "uppercase", "important"); model.style.setProperty("display", "inline-block", "important"); model.style.setProperty("line-height", "1.5", "important"); } if (spec) { model && model.style.setProperty("margin-bottom", "18px", "important"); spec.style.setProperty("font-size", "20px", "important"); spec.style.setProperty("line-height", "1.9", "important"); spec.style.setProperty("gap", "10px", "important"); spec.style.setProperty("color", "#222", "important"); spec.style.setProperty("margin", "10px 0 16px", "important"); spec.querySelectorAll("strong").forEach((s) => { s.style.setProperty("font-weight", "700", "important"); s.style.setProperty("color", "#000", "important"); }); } if (desc) { desc.style.setProperty("font-size", "20px", "important"); desc.style.setProperty("line-height", "1.9", "important"); desc.style.setProperty("color", "#333", "important"); desc.style.setProperty("margin-top", "20px", "important"); } } /* ====================== Zeile rendern ====================== */ function renderRow(it, index) { const hasImages = Array.isArray(it.images) && it.images.length > 0; const imagesHTML = hasImages ? buildImagesHTML(it.images) : ""; const imagesFirst = (index % 2 === 0); const row = document.createElement("section"); row.className = "sam-row"; applyRowLayout(row, imagesFirst); const colImages = document.createElement("div"); colImages.className = "sam-col sam-images"; colImages.style.gridArea = "media"; if (hasImages) colImages.innerHTML = imagesHTML; const colInfo = document.createElement("div"); colInfo.className = "sam-col sam-info"; colInfo.style.gridArea = "info"; colInfo.style.minWidth = "0"; const fullModel = (it.title || "").trim(); const modelHTML = fullModel ? `

/ ${fullModel.toUpperCase()}

` : `

`; colInfo.innerHTML = `

${modelHTML}

Baujahr: ${it.month ? String(it.month).padStart(2, "0") + " / " : ""}${it.year || "—"}

Kilometer: ${it.tacho != null ? Number(it.tacho).toLocaleString("de-DE") + " km" : "—"}

Leistung: ${it.kw != null ? `${Math.round(it.kw)} kW` : "" }${(it.kw != null && it.ps != null) ? " / " : ""}${it.ps != null ? `${Math.round(it.ps)} PS` : ""}

Projekt: ${it.number || "—"}

`; if (hasImages) { if (imagesFirst) row.append(colImages, colInfo); else row.append(colInfo, colImages); } else { row.append(colInfo); } const desc = document.createElement("div"); desc.className = "sam-desc"; desc.style.gridArea = "desc"; desc.textContent = it.text || ""; row.appendChild(desc); forceTypography(colInfo, row); root.appendChild(row); } /* ====================== Laden & Scroll ====================== */ async function loadMore() { if (loading || done) return; loading = true; setStatus("Lade Sammlung …"); try { const url = new URL(LIST); url.searchParams.set("_limit", String(limit)); url.searchParams.set("_offset", String(offset)); if (query) url.searchParams.set("_q", query); const res = await fetch(url, { cache: "no-store" }); const txt = await res.text(); if (!res.ok) throw new Error(txt); const j = JSON.parse(txt); const batch = j.items || []; if (batch.length === 0) { done = true; setStatus(""); return; } batch.forEach((it, i) => renderRow(it, (offset - 1) * limit + i)); items = items.concat(batch); offset += 1; if (j.total && items.length >= j.total) done = true; setStatus(""); } catch (e) { console.error(e); setStatus("Fehler beim Laden."); } finally { loading = false; } } const io = new IntersectionObserver((entries) => { if (entries.some(e => e.isIntersecting)) loadMore(); }, { rootMargin: "800px 0px" }); io.observe(sentinel); /* ====================== Suche ====================== */ function applySearch() { root.innerHTML = ""; items = []; offset = 1; done = false; loadMore(); } search?.addEventListener("keydown", (e) => { if (e.key === "Enter") { query = (search.value || "").trim(); applySearch(); } }); searchBtn?.addEventListener("click", () => { query = (search.value || "").trim(); applySearch(); }); /* ====================== Relayout bei Resize ====================== */ function relayoutAll() { const rows = root.querySelectorAll(".sam-row"); rows.forEach((row, idx) => { const imagesFirst = (idx % 2 === 0); applyRowLayout(row, imagesFirst); }); } window.addEventListener("resize", relayoutAll); /* ====================== Start ====================== */ loadMore(); })();