/* Produktseiten /product und /product/* (ROADMAP 8F) – nur Ergänzungen zum Design-System (site.css). */

.product-head { max-width: 760px; }
.product-back { margin-top: 10px; font-size: 14px; }
.product-back .icon { transform: rotate(180deg); }

.product-stats { margin-top: 8px; }
.product-features .product-feature h3 { margin: 12px 0 6px; font-size: 17px; }
.product-features .product-feature p { margin: 0; color: var(--text-2); }

/* Übersicht: fünf Bereiche als Karten */
.product-areas { margin-top: 8px; }
.product-area { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; }
.product-area h2 { margin: 6px 0 0; font-size: 20px; }
.product-area p { margin: 0; color: var(--text-2); flex: 1; }
.product-area-stat { color: var(--muted); font-size: 14px; }
.product-area-stat b { color: var(--text); font: 400 22px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.product-area .link-arrow { margin-top: 4px; color: var(--accent-text); }

/* Live-Liste (Server, Speditionen, Events, Umfragen, Endpunkte) */
.product-split { grid-template-columns: minmax(0, 1fr); margin-top: 24px; }
.product-live .card-title { display: flex; align-items: center; gap: 10px; }
.product-live-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 0; }
.product-live-item {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 10px 0;
  border-bottom: 1px solid var(--border); min-width: 0;
}
.product-live-item:last-child { border-bottom: 0; }
.product-live-title { font-weight: 650; overflow-wrap: anywhere; }
.product-live-meta { margin-left: auto; font-size: 14px; overflow-wrap: anywhere; }
code.product-live-meta { font-size: 13px; }

.product-cta { margin-top: 20px; }

/* Zuletzt veröffentlicht */
.product-releases { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.product-release-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; height: 100%;
  text-decoration: none; color: inherit; }
.product-release-title { overflow-wrap: anywhere; }

@media (max-width: 640px) {
  .product-live-meta { margin-left: 0; flex-basis: 100%; }
  .product-cta .btn { flex: 1 1 100%; }
}