/* Elektroprotokoll — Zusatz-Stylesheet nur für die Produktseite /app/ (Frontmatter extra_css).
   Handdatei wie style.css; gleiche Variablen, gleiches Raster. Kasten und Badge stehen in style.css,
   weil sie auf allen Seiten vorkommen. */

.app-hero { display: grid; gap: 1.25rem; align-items: center; margin: 1.5rem 0 2.5rem; }
.app-preis { font-weight: 600; margin: 0 0 .25rem; }
.app-shot { margin: 1.25rem 0 1.75rem; }
.app-shot img { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: var(--shadow); }
.app-shot figcaption { font-size: .9rem; color: var(--text-muted); margin-top: .5rem; }
.app-shot-phone { max-width: 20rem; margin-left: auto; margin-right: auto; }
@media (min-width: 48rem) { .app-hero { grid-template-columns: 1fr 1fr; } }

.steps { list-style: none; counter-reset: s; padding: 0; display: grid; gap: .75rem; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 2.25rem 1fr; gap: .875rem; margin: 0; }
.steps li::before { content: counter(s); display: inline-flex; align-items: center; justify-content: center; height: 2.25rem; font-weight: 700; color: var(--yellow-ink); background: var(--yellow); border-radius: 8px; }

.price table { min-width: 0; }
.price th[scope="row"] { white-space: nowrap; }
.price td small { display: block; color: var(--text-muted); font-size: .85rem; }

@media print { .app-shot { break-inside: avoid; } }