/* Produktseiten (erzeugt von build_produktseiten.py), ergänzt untermstrich.css. Stand 05.11.2026. */

.krumen { margin: -1.5rem 0 1.5rem; font-size: .95rem; color: var(--soft); }
.krumen a { color: var(--soft); }

.produkt-kopf { display: grid; grid-template-columns: minmax(10rem, 18rem) 1fr; gap: 2rem; align-items: start; margin-bottom: 1rem; }
.produkt-kopf img { width: 100%; height: auto; border-radius: .75rem; border: 1px solid var(--line); display: block; }
.produkt-kopf h1 { font-size: clamp(1.7rem, 4.5vw, 2.4rem); line-height: 1.15; margin-bottom: .6rem; }
.fakten { color: var(--soft); font-size: .98rem; margin-bottom: 1.25rem; }
.knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.5rem 0 .75rem; }
.klein { font-size: .9rem; color: var(--soft); }

.inhalt { border-top: 1px solid var(--line); padding: 1.1rem 0 .4rem; max-width: 46rem; }
.inhalt h3 { font: 700 .98rem/1.35 "Source Sans 3", system-ui, sans-serif; letter-spacing: .05em; color: var(--accent); margin: 0 0 .5rem; }
.inhalt h4 { font: 700 .82rem/1.3 "Source Sans 3", system-ui, sans-serif; letter-spacing: .07em; color: var(--soft); margin: 1rem 0 .3rem; }
.inhalt ul { margin: 0 0 .75rem; padding-left: 1.2rem; }
.inhalt li { margin: .2rem 0; }

@media (max-width: 40rem) {
  .produkt-kopf { grid-template-columns: 1fr; }
  .produkt-kopf img { max-width: 14rem; }
  .previews { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
}