/* Produktseite S3Flow — Ergänzung zu site.css.
   Nur Komponenten, die ausschließlich die Produktseite braucht (Screenshots,
   Funktionsblöcke, Download). Tokens und Grundlayout kommen aus site.css.
   Keine @import, keine CDN-Schriften, kein JavaScript. */

/* ── Kopf der Produktseite ──────────────────────────────────────────── */

.hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-md);
}

/* ── Screenshots ────────────────────────────────────────────────────── */

.shot {
  margin: 0;
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--base-900);
  border: var(--border) solid var(--line-700);
  border-radius: var(--r-panel);
}

.shot figcaption {
  margin-top: var(--sp-md);
  color: var(--text-300);
  font-size: 0.85rem;
}

/* Die Bildunterschrift benennt die Stelle in der App, daher monospace
   für wörtliche Bezeichner wie s3:// oder [SSE-KMS]. */
.shot figcaption .mono {
  color: var(--text-100);
}

.shot--lead {
  margin-top: var(--sp-4xl);
  margin-bottom: var(--sp-5xl);
}

/* Dialog-Aufnahmen sind kleiner als die Fensteraufnahmen. Ohne Deckel würden
   sie auf Spaltenbreite hochskaliert und unscharf. */
.shot--narrow img {
  max-width: 560px;
}

/* ── Funktionsblöcke: Text links, Screenshot rechts (ab 860px) ──────── */

.feature + .feature {
  margin-top: var(--sp-5xl);
}

.feature__grid {
  display: grid;
  gap: var(--sp-xxl);
  align-items: start;
}

@media (min-width: 860px) {
  .feature__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--sp-4xl);
  }

  /* Jeder zweite Block spiegelt sich, damit die Seite nicht monoton wird.
     Die Reihenfolge im Quelltext bleibt Text -> Bild (Screenreader, Tab). */
  .feature--flip .feature__text {
    order: 2;
  }
}

.feature__text > * + * {
  margin-top: var(--sp-lg);
}

.feature__text p {
  color: var(--text-300);
}

.feature__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  padding: 0;
  margin: 0;
  list-style: none;
}

.feature__meta li {
  padding: 0 var(--sp-md);
  background: var(--base-700);
  border: var(--border) solid var(--line-700);
  border-radius: var(--r-control);
  color: var(--text-300);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 20px;
}

/* ── Download ───────────────────────────────────────────────────────── */

.download__grid {
  display: grid;
  gap: var(--sp-xl);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.download__grid > *, .product .panel { min-width: 0; }
.checksum { margin-top: var(--sp-md); }
.checksum dt { color: var(--text-300); font-size: 0.8rem; }
.checksum dd { margin: var(--sp-sm) 0 0; }
.checksum code { display: block; overflow-wrap: anywhere; padding: var(--sp-md); }

.platform {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
  padding: var(--sp-xl);
  background: var(--base-800);
  border: var(--border) solid var(--line-700);
  border-radius: var(--r-panel);
}

/* Noch nicht verfügbare Plattformen bleiben lesbar (text_300 statt text_500),
   sind aber durch Rahmen und Etikett klar als "nicht jetzt" markiert. */
.platform--pending {
  background: var(--base-900);
  border-style: dashed;
}

.platform h3 {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
}

.platform p {
  color: var(--text-300);
  font-size: 0.9rem;
}

.platform .btnrow {
  margin-top: auto;
  padding-top: var(--sp-md);
}

/* Prüfschritte nach dem Download: wörtliche Befehle, daher monospace-Block. */
.steps {
  margin: 0;
  padding-left: 1.4rem;
  color: var(--text-300);
  font-size: 0.95rem;
}

.steps > li + li {
  margin-top: var(--sp-md);
}

.cmd {
  display: block;
  margin-top: var(--sp-sm);
  padding: var(--sp-md) var(--sp-lg);
  overflow-x: auto;
  background: var(--base-700);
  border: var(--border) solid var(--line-700);
  border-left: 2px solid var(--accent-500);
  border-radius: var(--r-control);
  color: var(--text-100);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  white-space: pre;
}

/* ── Keine Telemetrie ───────────────────────────────────────────────── */

.claims {
  list-style: none;
  padding: 0;
  margin: 0;
}

.claims > li {
  position: relative;
  padding: var(--sp-md) 0 var(--sp-md) var(--sp-xxl);
  color: var(--text-300);
}

.claims > li + li {
  border-top: var(--border) solid var(--line-700);
}

/* Das Häkchen ist Dekoration; die Aussage steht vollständig im Text. */
.claims > li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--success);
  font-family: var(--font-mono);
}

/* ── Tabelle: Systemvoraussetzungen ─────────────────────────────────── */

.facts {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.facts th,
.facts td {
  padding: var(--sp-lg) var(--sp-md);
  text-align: left;
  vertical-align: top;
  border-bottom: var(--border) solid var(--line-700);
}

.facts th {
  width: 34%;
  color: var(--text-100);
  font-weight: 600;
}

.facts td {
  color: var(--text-300);
}

@media (max-width: 560px) {
  .facts th,
  .facts td {
    display: block;
    width: auto;
  }

  .facts th {
    border-bottom: 0;
    padding-bottom: 0;
  }
}

/* Website-Hierarchie entsprechend dem überarbeiteten Firmenauftritt. */
.product-hero { max-width: 880px; }
.product-hero h1 { max-width: 20ch; }
.feature__text { min-width: 0; }
.feature__text code, .feature__text .mono { overflow-wrap: anywhere; }
.shot--lead { padding: 16px; background: var(--base-800); border: 1px solid var(--line-700); }
@media (max-width: 720px) {
  .shot--lead { padding: 8px; }
  .product .grid--2 { grid-template-columns: 1fr; }
}