/* ══════════════════════════════════════════════════════════════════════════
   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; }

/* Aktionen: Kampagne oeffnen + Merken (pn-merken.css) in einer Zeile */
body.pn-ui .pn-cf-card__actions { display: flex; gap: 0.5rem; align-items: center; margin-top: auto; }
body.pn-ui .pn-cf-card__cta { flex: 1 1 auto; min-width: 0; 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; }
}

/* Frage stellen / Diskussion: fuehrt in die Community (wie bei Angeboten) */
body.pn-ui .pn-cf-card__talk { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; margin: 0; }
body.pn-ui .pn-cf-card__ask,
body.pn-ui .pn-cf-card__discuss {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 0.875rem; color: var(--bsn); font-weight: 700;
}
body.pn-ui .pn-cf-card__ask::before { content: "?"; display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; margin-right: 0.4rem; border-radius: 50%; background: var(--accent); color: #fff; font-size: 0.8125rem; }
body.pn-ui .pn-cf-card__ask:focus-visible,
body.pn-ui .pn-cf-card__discuss:focus-visible { outline: 2px solid var(--bsn); outline-offset: 2px; }

/* Seite "Frage zu dieser Kampagne" */
body.pn-ui .pn-cf-ask__grid { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 1.5rem; align-items: start; margin-bottom: 2rem; }
body.pn-ui .pn-cf-ask__card { list-style: none; margin: 0; padding: 0; }
body.pn-ui .pn-cf-ask__form { display: grid; gap: 0.75rem; }
body.pn-ui .pn-cf-ask__title { margin: 0; font: 700 1.5rem/1.2 var(--pn-serif); color: var(--pn-ink); }
body.pn-ui .pn-cf-ask__lead,
body.pn-ui .pn-cf-ask__hint { margin: 0; color: var(--pn-text); font-size: 0.9375rem; }
body.pn-ui .pn-cf-ask__hint { font-size: 0.8125rem; }
body.pn-ui .pn-cf-ask__label { font-weight: 700; color: var(--pn-ink); }
body.pn-ui .pn-cf-ask__text {
  box-sizing: border-box; width: 100%; min-height: 8rem; padding: 0.75rem 0.9rem;
  background: var(--card); color: var(--pn-ink);
  border: 1px solid var(--border); border-radius: var(--pn-radius-sm);
  font: inherit; font-size: 1rem; resize: vertical;
}
body.pn-ui .pn-cf-ask__text:focus-visible { outline: 2px solid var(--bsn); outline-offset: 2px; }
body.pn-ui .pn-cf-ask__error { margin: 0; padding: 0.6rem 0.9rem; border-radius: var(--pn-radius-sm); background: #FFF4EB; color: var(--pn-ink); font-weight: 600; }
body.pn-ui .pn-cf-ask__buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
body.pn-ui .pn-cf-ask__submit {
  min-height: 44px; padding: 0 1.3rem; border: 0; border-radius: 999px;
  background: var(--bsn); color: #fff; font: inherit; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; text-decoration: none;
}
body.pn-ui .pn-cf-ask__submit:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
body.pn-ui .pn-cf-ask__link { display: inline-flex; align-items: center; min-height: 44px; color: var(--bsn); font-weight: 600; }
@media (max-width: 760px) {
  body.pn-ui .pn-cf-ask__grid { grid-template-columns: minmax(0, 1fr); }
  /* Auf schmalen Bildschirmen zuerst die Frage, darunter die Kampagne */
  body.pn-ui .pn-cf-ask__card { order: 1; }
}