/* ══════════════════════════════════════════════════════════════════════════
   Crowdfunding-Seite (/crowdfunding) - templates/crowdfunding.html
   ──────────────────────────────────────────────────────────────────────────
   Kopf und Filter nutzen die Termine-Bausteine (pn-events.css), Chips,
   Knoepfe und Raster kommen aus pn-ui.css. Hier stehen nur die Karten.
   Regeln aus pn-ui: ein Rahmen je Karte, Touch-Ziele >= 44px, Metadaten
   >= 12px, kein Ueberlauf ab 320px, kein !important.
   ══════════════════════════════════════════════════════════════════════════ */

body.pn-ui .pn-cf { max-width: var(--pn-max); margin: 0 auto 3rem; padding: 0 var(--pn-gutter); }

body.pn-ui .pn-cf__stats { display: flex; gap: 0.75rem; margin: 0; }
body.pn-ui .pn-cf__stats div {
  min-width: 7rem; padding: 0.6rem 0.9rem;
  background: var(--card); border: 1.5px solid var(--border); border-radius: var(--pn-radius-sm);
}
body.pn-ui .pn-cf__stats dt { font-size: 0.75rem; color: var(--pn-text); }
body.pn-ui .pn-cf__stats dd { margin: 0; font-size: 1.35rem; font-weight: 700; color: var(--pn-ink); }

body.pn-ui .pn-cf__sorts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.75rem; }
body.pn-ui .pn-cf__hint,
body.pn-ui .pn-cf__count,
body.pn-ui .pn-cf__note { font-size: 0.85rem; color: var(--pn-text); margin: 0 0 1rem; }
body.pn-ui .pn-cf__note { margin-top: 1.5rem; }
body.pn-ui .pn-cf__empty { padding: 3rem 1rem; text-align: center; color: var(--pn-text); }

body.pn-ui .pn-cf__grid { list-style: none; margin: 0; padding: 0; }

/* Karte: genau ein Rahmen */
body.pn-ui .pn-cf-card {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--pn-radius); box-shadow: var(--pn-shadow); overflow: hidden;
}
body.pn-ui .pn-cf-card__media {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
  background: #EEF0F3;
}
/* Bild fuellt die feste 16:9-Flaeche, Hoch-/Quadratformate werden beschnitten */
body.pn-ui .pn-cf-card__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
body.pn-ui .pn-cf-card__platform,
body.pn-ui .pn-cf-card__new {
  position: absolute; top: 0.6rem;
  padding: 0.25rem 0.6rem; border-radius: 999px;
  font-size: 0.75rem; font-weight: 700; line-height: 1.3;
  background: rgba(42, 51, 63, 0.88); color: #fff;
}
body.pn-ui .pn-cf-card__platform { left: 0.6rem; }
body.pn-ui .pn-cf-card__platform--kickstarter { background: #05CE78; color: #0B2E1D; }
body.pn-ui .pn-cf-card__platform--gamefound { background: #FF5A3C; color: #fff; }
body.pn-ui .pn-cf-card__platform--spieleschmiede { background: #1F4E8C; color: #fff; }
body.pn-ui .pn-cf-card__platform--backerkit { background: #1DB9C3; color: #062B2E; }
body.pn-ui .pn-cf-card__new { right: 0.6rem; background: var(--accent); color: var(--bsn); }

body.pn-ui .pn-cf-card__body {
  display: flex; flex-direction: column; gap: 0.6rem; flex: 1;
  padding: 0.9rem 1rem 1rem;
}
body.pn-ui .pn-cf-card__title {
  margin: 0; font-family: var(--pn-serif); font-size: 1.15rem; line-height: 1.3;
  overflow-wrap: anywhere;
}
body.pn-ui .pn-cf-card__title a { color: var(--pn-ink); text-decoration: none; }
body.pn-ui .pn-cf-card__title a:hover { text-decoration: underline; }
body.pn-ui .pn-cf-card__by { margin: 0; font-size: 0.8rem; color: var(--pn-text); overflow-wrap: anywhere; }
body.pn-ui .pn-cf-card__blurb {
  margin: 0; font-size: 0.9rem; line-height: 1.45; color: var(--pn-text);
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

body.pn-ui .pn-cf-card__pledged { margin: 0; font-size: 1.1rem; color: var(--pn-ink); }
body.pn-ui .pn-cf-card__approx { font-size: 0.8rem; font-weight: 400; color: var(--pn-text); }
body.pn-ui .pn-cf-card__bar { height: 8px; margin: 0.35rem 0; border-radius: 999px; background: #E5E7EB; overflow: hidden; }
body.pn-ui .pn-cf-card__bar span { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
body.pn-ui .pn-cf-card__meta {
  display: flex; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap;
  margin: 0; font-size: 0.8rem; color: var(--pn-text);
}

body.pn-ui .pn-cf-card__facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 0.75rem;
  margin: 0; padding-top: 0.6rem; border-top: 1px solid var(--border);
}
body.pn-ui .pn-cf-card__facts dt { font-size: 0.75rem; color: var(--pn-text); }
body.pn-ui .pn-cf-card__facts dd { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--pn-ink); overflow-wrap: anywhere; }
body.pn-ui .pn-cf-card__facts small { display: block; font-size: 0.75rem; font-weight: 400; color: var(--pn-text); }
body.pn-ui .pn-cf-card__wide { grid-column: 1 / -1; }

body.pn-ui .pn-cf-card__cta { margin-top: auto; width: 100%; text-align: center; }

body.pn-ui .pn-cf__pager {
  display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap;
  margin: 1.5rem 0 0; font-size: 0.9rem; color: var(--pn-text);
}

@media (max-width: 679px) {
  body.pn-ui .pn-cf__stats { width: 100%; }
  body.pn-ui .pn-cf__stats div { flex: 1; min-width: 0; }
  /* Sortier-Chips als Raster statt Querscroll (UI-Regel 10.08.2026) */
  body.pn-ui .pn-cf__sorts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.pn-ui .pn-cf__sorts .pn-chip { justify-content: center; }
}