/* Ergänzungen zur gemeinsamen style.css (übernommen aus der cd-app) */
header.site .brand { display: flex; align-items: center; gap: 10px; }
header.site .brand img { height: 40px; }
main .wrap { padding-top: 24px; padding-bottom: 40px; }
.lead { font-size: 1.15em; }
.note { color: #555; }
.produkte { display: grid; gap: 28px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin: 24px 0; }
.produkt { background: var(--tile); display: flex; flex-direction: column; }
.produkt img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: var(--footer); }
.produkt .txt { padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.produkt h2 { margin: 0; font-size: 1.4rem; color: var(--fg); }
.produkt .sub { font-size: 16px; color: #555; margin: 0; }
.produkt p { margin: 0; font-size: 17px; }
.produkt .preis { font-size: 1.3rem; font-weight: 700; color: var(--fg); margin-top: auto; padding-top: 8px; }
.produkt .btns { gap: 10px; }
.produkt .btn { font-size: 17px; }
footer.site { margin-top: 40px; padding: 20px 0; }
footer.site .legal { margin-top: 0; }

/* VORSCHAU-Band quer über die Seite (solange der Shop noch nicht offiziell ist). Entfernen: <div class="vorschau"> in den HTML-Dateien löschen. */
.vorschau { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-30deg); z-index: 1000; pointer-events: none;
  font-size: clamp(64px, 16vw, 220px); font-weight: 800; letter-spacing: .08em; color: rgba(192, 35, 83, .18); white-space: nowrap; user-select: none; }