/* ============================================================
   pflanzenmatch.de — Pflanzen-Detailseiten (pflanze/<id>.html)
   Statisch generiert via tools/build-detailseiten.js.
   Baut auf den Tokens aus styles.css, den Foto-Styles aus
   quiz.css (.qz-foto) und den Karten-Styles aus katalog.css
   (.kat-karte für "Ähnliche Pflanzen", .kat-cta) auf.
   ============================================================ */

.pfl-main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 118px clamp(20px, 4vw, 48px) 90px;
}

/* ---------- Brotkrumen ---------- */
.pfl-brotkrumen {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  font-size: 0.8rem;
  color: var(--text-muted);
  padding-bottom: 20px;
}
.pfl-brotkrumen a { color: var(--text-secondary); transition: color var(--dur-micro); }
.pfl-brotkrumen a:hover { color: var(--green-deep); }
.pfl-brotkrumen .pfl-trenner { opacity: 0.55; }

/* ---------- Produktbereich ---------- */
.pfl-produkt {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 4vw, 54px);
  align-items: start;
}
@media (min-width: 860px) {
  .pfl-produkt { grid-template-columns: minmax(320px, 5fr) minmax(360px, 6fr); }
}

.pfl-galerie { position: relative; }
.pfl-galerie .qz-foto {
  height: clamp(250px, 42vh, 430px);
  border-radius: var(--radius-card);
  border: var(--border-fine);
}
.pfl-galerie .qz-foto-blatt { width: 150px; height: 150px; margin-bottom: 34px; }
.pfl-galerie .qz-foto-topf { width: 116px; height: 36px; }

.pfl-info { display: grid; gap: 14px; justify-items: start; }
.pfl-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pfl-luft {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terra-deep);
  background: var(--surface-terra-pale);
  border-radius: 999px;
  padding: 4px 10px;
}
.pfl-name {
  font-family: var(--f-serif);
  font-weight: 420;
  font-size: clamp(2rem, 1.5rem + 2vw, 2.9rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
}
.pfl-name em { font-style: italic; color: var(--green-deep); }
.pfl-botanic { font-size: 0.95rem; color: var(--text-muted); font-style: italic; margin-top: -8px; }

/* ---------- Pflege-Eckdaten als Icon-Kacheln ---------- */
.pfl-eckdaten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 10px;
  width: 100%;
}
.pfl-eckdatum {
  display: grid;
  gap: 5px;
  justify-items: start;
  background: var(--surface-paper);
  border: var(--border-fine);
  border-radius: var(--radius-card);
  padding: 12px 13px;
}
.pfl-eckdatum svg { width: 21px; height: 21px; color: var(--green-leaf); display: block; }
.pfl-eckdatum-label {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.pfl-eckdatum-wert { font-size: 0.88rem; font-weight: 550; color: var(--green-forest); line-height: 1.3; }

.pfl-standorte { font-size: 0.85rem; color: var(--text-muted); }
.pfl-beschreibung { color: var(--text-secondary); line-height: 1.7; max-inline-size: 60ch; }

/* ---------- Kaufkasten (Preis + Shop, zentrale Anzeige-Stelle) ---------- */
.pfl-kauf {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: var(--surface-paper);
  border: var(--border-fine);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  padding: 18px 20px 16px;
  display: grid;
  gap: 10px;
  justify-items: start;
}
/* Terracotta-Standfläche wie auf den Plantcards */
.pfl-kauf::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 4px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(90deg, var(--terra), var(--terra-soft));
  opacity: 0.85;
}
.pfl-preis-zeile { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pfl-preis { font-family: var(--f-mono); font-size: 1.15rem; color: var(--text-primary); }
.pfl-preis-stand { font-size: 0.75rem; color: var(--text-muted); }
.pfl-preis-hinweis { font-size: 0.78rem; color: var(--text-muted); }
.pfl-kauf .affiliate-note { margin-top: 2px; padding-bottom: 6px; }

/* ---------- Ähnliche Pflanzen ---------- */
.pfl-aehnlich { padding-top: clamp(44px, 7vw, 76px); display: grid; gap: 16px; }
.pfl-aehnlich-titel {
  font-family: var(--f-serif);
  font-weight: 430;
  font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem);
  line-height: 1.12;
}
.pfl-aehnlich-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.pfl-cta-wrap { padding-top: clamp(36px, 6vw, 60px); }

/* ---------- Mobile ---------- */
@media (max-width: 820px) {
  .pfl-main { padding-top: 102px; }
}
@media (max-width: 480px) {
  .pfl-aehnlich-grid { grid-template-columns: 1fr; }
  .pfl-kauf { max-width: none; }
}