/* Zweiter Spendenzweck: Lebensmittelpakete.
   Bewusst etwas schlichter als der Moschee-Teil — er bleibt die Hauptsache. */

.pk-raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin: 1.8rem 0 2.2rem;
}

.pk-karte {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.6rem 1.5rem 1.4rem;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.pk-karte:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }

.pk-kicker {
  display: block;
  font: 600 .68rem var(--mono);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-deep);
  padding-left: 14px; position: relative;
  margin-bottom: 1rem;
}
.pk-kicker::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 8px; height: 2px; background: var(--gold);
}

/* Zutatenliste als Chips — liest sich schneller als eine Aufzählung */
.pk-inhalt { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; flex: 1; align-content: flex-start; }
.pk-inhalt li {
  font: 500 .84rem var(--sans);
  color: var(--deep);
  background: var(--palm-tint);
  border: 1px solid rgba(30, 91, 69, .14);
  border-radius: 999px;
  padding: 5px 12px;
}

.pk-wer { list-style: none; margin: 0; padding: 0; flex: 1; }
.pk-wer li {
  font: 400 .9rem/1.5 var(--sans);
  color: var(--body);
  padding: .45rem 0 .45rem 18px;
  position: relative;
}
.pk-wer li + li { border-top: 1px solid var(--line); }
.pk-wer li::before {
  content: ""; position: absolute; left: 0; top: 1.05em;
  width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg);
}
.pk-wer b { color: var(--deep); font-weight: 600; }

.pk-preis { background: var(--palm); border-color: var(--palm-deep); }
.pk-preis .pk-kicker { color: rgba(250, 247, 240, .7); }
.pk-preis .pk-kicker::before { background: var(--gold); }
.pk-zahl { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: .6rem 0; }
.pk-zahl b {
  font: 600 clamp(2.4rem, 5vw, 3.4rem)/1 var(--serif);
  color: var(--ivory);
  font-variant-numeric: tabular-nums;
}
.pk-zahl span {
  font: 400 .92rem var(--sans);
  color: rgba(250, 247, 240, .78);
  margin-top: .5rem;
}
.pk-preis .pk-fuss { color: rgba(250, 247, 240, .66); border-top-color: rgba(250, 247, 240, .18); }

.pk-fuss {
  font: 400 .8rem/1.55 var(--sans);
  color: var(--mut);
  margin: 1rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid var(--line);
}

/* Das Spendenmodul dieser Sektion bekommt einen goldenen Rand,
   damit es sich vom Moschee-Modul unterscheidet. */
.pk-donate { border: 1px solid rgba(192, 160, 80, .45); }

@media (max-width: 900px) {
  .pk-raster { grid-template-columns: 1fr 1fr; }
  .pk-preis { grid-column: span 2; }
  .pk-zahl { flex-direction: row; align-items: baseline; gap: 14px; }
  .pk-zahl span { margin-top: 0; }
}
@media (max-width: 600px) {
  .pk-raster { grid-template-columns: 1fr; }
  .pk-preis { grid-column: auto; }
}