/* ===================================================
   Creative Gnomes – Seite "Personalisierte Drucke" (nutzt style.css + box.css)
   =================================================== */

/* Drei Schritte */
.pers-steps { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pers-step {
  display: flex; align-items: flex-start; gap: 14px;
  background: rgba(40, 32, 22, 0.72); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 18px 20px;
}
.pers-step-num {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--green); color: #fff; font-weight: 700; font-size: 0.9rem;
}
.pers-step b { display: block; color: var(--white); font-family: var(--font-head); font-size: 1rem; margin-bottom: 4px; }
.pers-step span:not(.pers-step-num) { color: var(--text-muted); font-size: 0.85rem; line-height: 1.6; }

.pers-title { text-align: center; font-size: clamp(1.1rem, 2.4vw, 1.45rem); margin-bottom: 14px; }

/* Raster: drei Spalten, Bild im 4:3-Format ohne Beschnitt */
.pers-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pers-card-link { display: block; }
.pers-card .product-img-wrap {
  height: auto; aspect-ratio: 4 / 3;
  background: radial-gradient(120% 100% at 50% 15%, rgba(90, 72, 48, 0.55), rgba(24, 19, 13, 0.9));
}
.pers-card .product-img-wrap img { object-fit: contain; padding: 14px; }
.pers-card:hover .product-img-wrap img { transform: scale(1.04); }
.pers-badge {
  position: absolute; left: 12px; top: 12px; z-index: 2;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--amber-light); background: rgba(24, 19, 13, 0.85);
  border: 1px solid var(--border-warm); border-radius: 999px; padding: 4px 10px;
}
.pers-card .product-desc { margin-bottom: 16px; }

/* Infos unten */
.pers-info { padding-top: 24px; }
.pers-facts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: rgba(40, 32, 22, 0.72); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.pers-facts div { padding: 18px 20px; min-width: 0; }
.pers-facts div + div { border-left: 1px solid var(--border); }
.pers-facts b { display: block; color: var(--white); font-size: 0.95rem; margin-bottom: 4px; }
.pers-facts span { color: var(--text-muted); font-size: 0.82rem; line-height: 1.55; }
.pers-help { margin-top: 20px; border: 1.5px dashed var(--border-warm); border-radius: var(--radius-lg); padding: 18px 22px; }
.pers-help p { margin: 0; color: var(--text-muted); max-width: 70ch; line-height: 1.65; }
.pers-help b { color: var(--white); }

@media (max-width: 900px) {
  .pers-steps { grid-template-columns: 1fr; }
  .pers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pers-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pers-facts div:nth-child(3) { border-left: 0; }
  .pers-facts div:nth-child(n+3) { border-top: 1px solid var(--border); }
}
@media (max-width: 560px) {
  .pers-grid { grid-template-columns: 1fr; }
  .pers-facts { grid-template-columns: 1fr; }
  .pers-facts div + div { border-left: 0; border-top: 1px solid var(--border); }
}

/* Ganze Karte klickbar: der Titel-Link spannt sich über die Karte, der Button bleibt darüber */
.pers-card { position: relative; cursor: pointer; }
.pers-card-title { color: inherit; text-decoration: none; }
.pers-card-title::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.pers-card .btn { position: relative; z-index: 2; }
.pers-card-title:focus-visible { outline: none; }
.pers-card:focus-within { border-color: var(--green); }