/* ============================================================
   FEATURE ZIGZAG — alternierendes 2-Spalten-Layout (Tablet+)
   Enthält Layout-Wrapper, Copy-Spalte, Checklist und Mock-Basis.
   Mock-Varianten leben in mocks.css.
   ============================================================ */

.zz { padding: 64px 20px; background: var(--surface); }
.zz .container { display: flex; flex-direction: column; gap: 56px; }
.zz__row {
  display: grid; gap: 28px;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
.zz__copy h3 {
  font-size: clamp(22px, 4.4vw, 30px);
  font-weight: 700; line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--text);
  margin: 8px 0 12px;
}
.zz__copy > .eyebrow { margin-bottom: 8px; }
.zz__copy p {
  font-size: 16px; line-height: 1.6; color: var(--text2); margin: 0 0 18px;
  max-width: 56ch;
}

/* ─── Checklist (▪ ✓ Item) ────────────────────────────────── */
.checklist { display: flex; flex-direction: column; gap: 10px; }
.checklist li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; color: var(--text2);
}
.checklist .check {
  flex: 0 0 18px; width: 18px; height: 18px;
  border-radius: 999px; background: var(--green-tint);
  color: var(--green); font-weight: 700; font-size: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 2px;
}

/* ─── Mock-Basis (gemeinsam für alle Varianten in mocks.css) ─ */
.mock {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r3);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}

/* ─── Responsive ──────────────────────────────────────────── */
@media (min-width: 1024px) {
  .zz { padding: 96px 24px; }
  .zz .container { gap: 96px; }
  .zz__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
  .zz__row--rev .zz__copy { order: 2; }
  .zz__row--rev .zz__mock { order: 1; }
}