/* ============================================================
   ENTWICKLUNG / DIGITALE PRODUKTE — nur Seitenspezifisches
   ============================================================
   Die Seite lebt von den gemeinsamen .v4-page-Komponenten aus
   style-v4.css. Hier stehen nur die Produktkarten: Status-Chip,
   Einblick-Bild, Merkmalsliste, Ehrlich-Block, Aktionen. Die
   Kartentexte selbst sind Danis Stand vom 22.08.2026.
   ============================================================ */

/* Produktkarten: wie .v4-karte, aber Artikel mit Fusszeile */
.v4-produkte .v4-pd-karte {
  background: var(--v4-bg-surface);
  border: 1px solid var(--v4-border);
  border-radius: var(--v4-radius-card);
  padding: var(--v4-space-3);
  display: flex;
  flex-direction: column;
}
.v4-produkte .v4-pd-karte h3 { margin-top: var(--v4-space-1); }

/* Status-Chip: Mono-Etikett statt SaaS-Badge */
.v4-produkte .v4-pd-status {
  font-family: var(--v4-font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--v4-blue);
  margin: 0;
}
.v4-produkte .v4-pd-untertitel {
  color: var(--v4-text-secondary);
  margin-bottom: var(--v4-space-2);
}

/* Einblick-Bild wie die Referenzbilder des Projekt-Hubs */
.v4-produkte .v4-pd-bild { margin: 0 0 var(--v4-space-2); }
.v4-produkte .v4-pd-bild img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--v4-border);
  border-radius: var(--v4-radius-card);
}
.v4-produkte .v4-pd-bild figcaption {
  font-family: var(--v4-font-mono);
  font-size: 12.5px;
  color: var(--v4-text-secondary);
  margin-top: var(--v4-space-1);
}

/* Merkmalsliste: liniengetrennt wie .v4-liste, in Kartengroesse */
.v4-produkte .v4-pd-liste {
  list-style: none;
  margin: 0 0 var(--v4-space-2);
  padding: 0;
}
.v4-produkte .v4-pd-liste li {
  border-top: 1px solid var(--v4-border);
  padding-block: var(--v4-space-1);
  font-size: 14.5px;
  color: var(--v4-text-primary);
}

/* Ehrlich-Block: die Kennzeichnung des Reifegrads */
.v4-produkte .v4-pd-ehrlich {
  border-left: 3px solid var(--v4-signal);
  padding-left: var(--v4-space-2);
  font-size: 14.5px;
  color: var(--v4-text-secondary);
  margin-bottom: var(--v4-space-2);
}

/* Aktionen ans Kartenende, damit die Karten buendig schliessen */
.v4-produkte .v4-pd-aktionen {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--v4-space-1);
  align-items: flex-start;
}

/* Kontextabstaende */
.v4-produkte .v4-pd-raster { margin-top: var(--v4-space-3); }
.v4-produkte .v4-nachsatz { max-width: 62ch; }

/* Drei Karten brauchen frueher zwei Spalten als das 900er-Raster */
@media (max-width: 1100px) {
  .v4-produkte .v4-pd-raster { grid-template-columns: 1fr; }
}