/* Shop Pflege 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 (blue, .nfr-mega-icon.is-p5).
   Visual: extension updates + a test order through the checkout. 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-p5 { --a: #c4d3f5; --b: #8fabeb; --c: #e6ecfb; --d: #2f5fd0; }

/* ---------- visual ---------- */
body .spf .dp_kpis { margin-bottom: .75rem; }
body .spf_grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: .75rem; }
body .spf_card { border: 0; background: var(--dp-tile, #f5f5f3); min-width: 0; }
body .spf_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 .spf_rows { margin: 0; padding: 0; list-style: none; }
body .spf_rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 1.25rem; align-items: center; margin: 0; padding: .8rem 1.1rem; font-size: 14px; line-height: 1.45; color: #111; }
body .spf_rows li + li { border-top: 1px solid rgba(17,17,17,.07); }
body .spf_n { min-width: 0; }
body .spf_v { font-size: 13px; color: var(--dp-mute, #74746e); font-variant-numeric: tabular-nums; white-space: nowrap; }
body .spf_v em { display: inline-block; font-style: normal; color: #2f5fd0; }
body .spf_ok { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .5rem; background: #e3f1e8; color: #23794a; font-size: 12px; line-height: 1.4; font-weight: 600; white-space: nowrap; }
body .spf_ok svg { width: 12px; height: 12px; flex: none; }

body .spf_order { display: flex; flex-direction: column; }
body .spf_checks { margin: 0; padding: .25rem 1.1rem .5rem; list-style: none; }
body .spf_checks li { display: flex; align-items: center; gap: .75rem; margin: 0; padding: .55rem 0; font-size: 14px; line-height: 1.4; color: #111; }
body .spf_tick { display: flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; background: #2f8a57; color: #fff; }
body .spf_tick svg { width: 13px; height: 13px; }
body .spf_foot { margin: auto 0 0; padding: .8rem 1.1rem; border-top: 1px solid rgba(17,17,17,.07); font-size: 12px; line-height: 1.4; color: var(--dp-mute, #74746e); }

@media (max-width: 991px) {
  body .spf_grid { grid-template-columns: 1fr; }
}
@media (max-width: 719px) {
  body .spf .dp_kpis { margin-bottom: .75rem; }
  body .spf_grid { gap: .75rem; }
  body .spf_rows li { gap: .75rem; padding: .8rem .9rem; font-size: 14px; }
  body .spf_checks li { font-size: 14px; }
}
@media (max-width: 479px) {
  body .spf_ok { gap: 0; padding: .3rem; font-size: 0; }
}

/* ---------- motion: once, on scroll-in ---------- */
@media (prefers-reduced-motion: no-preference) {
  body .spf-shot .dp_kpi, body .spf-shot .spf_rows li { transition: opacity .5s ease, transform .6s cubic-bezier(.165, .84, .44, 1); }
  body .spf-shot .dp_kpi { transition-delay: calc(var(--i) * 70ms); }
  body .spf-shot .spf_rows li { transition-delay: calc(.25s + var(--i) * 110ms); }
  body .spf-shot .spf_v em { transition: transform .5s cubic-bezier(.165, .84, .44, 1); transition-delay: calc(.5s + var(--i) * 110ms); }
  body .spf-shot .spf_tick { transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
  body .spf-shot .spf_checks li:nth-child(1) .spf_tick { transition-delay: .5s; }
  body .spf-shot .spf_checks li:nth-child(2) .spf_tick { transition-delay: .7s; }
  body .spf-shot .spf_checks li:nth-child(3) .spf_tick { transition-delay: .9s; }
  body .spf-shot .spf_checks li:nth-child(4) .spf_tick { transition-delay: 1.1s; }
  body .spf-shot.is-pre .dp_kpi, body .spf-shot.is-pre .spf_rows li { opacity: 0; transform: translateY(10px); }
  body .spf-shot.is-pre .spf_v em { transform: translateX(-6px); }
  body .spf-shot.is-pre .spf_tick { transform: scale(0); }
}

/* WooCommerce mark is a wide wordmark-like shape; give it more width so it reads at tag size */
body .wh_tag svg.is-wide { width: 22px; height: 22px; margin: -4px 0; }