/* Shop Newsletter header (18.10.2026): Werbe-Header layout from /online-werbung plus its own visual.
   Christian: "mach auf folgende unterseiten den header layout von online werbung ... visual darunter halt individuell was sinn macht".
   Frame = the system from css/werbung-reevo.css (.wr-shot, .wr-field, macOS window); field in the page's nav colour (yellow, .nfr-mega-icon.is-p6).
   Visual: key figures, the mails that run by themselves, and a cart-reminder mail as the reader sees it. Inner cards follow the
   "Kampagnen-Puls" dashboard (.dp, .dp_kpi). All figures are an illustration ("Beispielansicht"). Square corners except the macOS window.
   Motion once on scroll-in, off with reduced motion; without JS the final state shows. Old header: Sektionspeicher snippet. */

body .wr-field.is-p6 { --a: #f8eaae; --b: #e8c43a; --c: #fdf5d6; --d: #c99a12; }

/* no tag row on this page: give the lead the gap the tags would have made */

/* ---------- visual ---------- */
body .snl :where(p) { margin: 0; }
body .snl .dp_kpis { margin-bottom: .75rem; }
body .snl .dp_h { margin: 0 0 1rem; }
body .snl_grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .75rem; align-items: start; }
body .snl_card { border: 0; background: var(--dp-tile, #f5f5f3); min-width: 0; }
body .snl_ct { margin: 0; padding: .95rem 1.1rem .35rem; border: 0; background: none; font-size: 13px; line-height: 1.4; font-weight: 500; letter-spacing: .005em; color: var(--dp-mute, #74746e); }

body .snl_flows { margin: 0; padding: 0; list-style: none; }
body .snl_flow { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; row-gap: .15rem; margin: 0; padding: .8rem 1.1rem; font-size: 14px; line-height: 1.45; color: #111; }
body .snl_flow + .snl_flow { border-top: 1px solid rgba(17,17,17,.07); }
body .snl_ft { font-weight: 600; }
body .snl_fw, body .snl_cnt { font-size: 12px; color: var(--dp-mute, #74746e); }
body .snl_cnt { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
body .snl_st { display: inline-flex; align-items: center; justify-self: end; gap: .4rem; padding: .1rem .5rem; background: #e3f1e8; color: #23794a; font-size: 12px; font-weight: 600; white-space: nowrap; }
body .snl_st::before { content: ""; width: 6px; height: 6px; background: currentColor; }
body .snl_flow.is-plan .snl_st { background: #fdf5d6; color: #8a6a00; }

body .snl_mh { padding-top: .35rem; border-bottom: 1px solid rgba(17,17,17,.07); background: none; }
body .snl_mh p { display: flex; gap: .75rem; padding: .4rem 1.1rem; font-size: 13px; line-height: 1.4; }
body .snl_mh p + p { border-top: 0; }
body .snl_mh span { flex: none; width: 3.75rem; color: var(--dp-mute, #74746e); }
body .snl_mh b { font-weight: 600; }
body .snl_mb { margin: .75rem; padding: 1.25rem 1.25rem 1rem; background: #fff; font-size: 14px; line-height: 1.55; color: #222; }
body .snl_hi { margin-bottom: .4rem !important; font-weight: 600; color: #111; }
body .snl_prod { display: flex; align-items: center; gap: .9rem; margin-top: 1.1rem; padding: .75rem; border: 0; background: var(--dp-tile, #f5f5f3); }
body .snl_prod i { display: block; flex: none; width: 52px; height: 52px; background: #c9d3bf; }
body .snl_prod span { font-weight: 500; color: #111; }
body .snl_prod small { display: block; font-size: 12px; font-weight: 400; color: var(--dp-mute, #74746e); }
body .snl_btn { display: inline-block; margin-top: 1.1rem !important; padding: .7rem 1.1rem; background: #111; color: #fff; font-size: 14px; font-weight: 500; }
body .snl_legal { margin-top: 1.25rem !important; padding-top: .75rem; border-top: 1px solid rgba(17,17,17,.07); font-size: 12px; color: #8c8c86; }

@media (max-width: 991px) {
  body .snl_grid { grid-template-columns: 1fr; }
}
@media (max-width: 719px) {
  body .snl .dp_kpis { margin-bottom: .75rem; }
  body .snl_grid { gap: .75rem; }
  body .snl_flow { padding: .75rem .9rem; font-size: 14px; }
  body .snl_ct { padding-left: .9rem; padding-right: .9rem; }
  body .snl_mh p { padding-left: .9rem; padding-right: .9rem; }
  body .snl_mb { margin: .5rem; padding: 1rem .9rem .9rem; font-size: 14px; }
}

/* ---------- motion: once, on scroll-in ---------- */
@media (prefers-reduced-motion: no-preference) {
  body .snl-shot .dp_kpi, body .snl-shot .snl_flow, body .snl-shot .snl_mail { transition: opacity .5s ease, transform .6s cubic-bezier(.165, .84, .44, 1); }
  body .snl-shot .dp_kpi { transition-delay: calc(var(--i) * 70ms); }
  body .snl-shot .snl_flow { transition-delay: calc(.25s + var(--i) * 110ms); }
  body .snl-shot .snl_mail { transition-delay: .45s; }
  body .snl-shot.is-pre .dp_kpi, body .snl-shot.is-pre .snl_flow { opacity: 0; transform: translateY(10px); }
  body .snl-shot.is-pre .snl_mail { opacity: 0; transform: translateY(18px); }
}