/* Shop Conversionoptimierung 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 (peach, .nfr-mega-icon.is-p4).
   Visual, on purpose not the /conversion-optimierung dashboard: the shop path as three small screens (product page, cart, checkout),
   each with what was changed and its drop-off before/after. Changes are worded after the page's own benefit list.
   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-p4 { --a: #fde3cf; --b: #f5b38c; --c: #fff0e4; --d: #f26b1d; }

/* ---------- visual ---------- */
body .scv { --scv-acc: #f26b1d; }
body .scv :where(p) { margin: 0; }
body .scv_steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
body .scv_step { display: flex; flex-direction: column; min-width: 0; }
body .scv_step > .dp_h { display: flex; align-items: center; gap: .6rem; }
body .scv_num { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; background: #111; color: #fff; font-size: 12px; font-weight: 600; }

body .scv_screen { display: flex; flex-direction: column; flex: 1 1 auto; padding: 1.1rem 1.1rem 0; border: 0; background: var(--dp-tile, #f5f5f3); font-size: 14px; line-height: 1.4; color: #111; }
body .scv_img { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; margin-bottom: .9rem; background: #fff; }
body .scv_img svg { width: 62%; height: auto; }
body .scv_name { font-size: 15px; font-weight: 600; }
body .scv_stars { margin-top: .2rem !important; font-size: 12px; color: var(--dp-mute, #74746e); }
body .scv_stars span { color: #e8a33a; letter-spacing: .05em; }
body .scv_price { margin-top: .5rem !important; font-size: 18px; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
body .scv_btn { margin-top: .9rem !important; padding: .65rem .75rem; background: #111; color: #fff; font-size: 14px; font-weight: 500; text-align: center; }
body .scv_list { margin: .8rem 0 0; padding: 0; list-style: none; font-size: 12px; color: var(--dp-mute, #74746e); }
body .scv_list li { position: relative; margin: 0; padding: 0 0 0 1.1rem; }
body .scv_list li + li { margin-top: .2rem; }
body .scv_list li::before { content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; background: #2f8a57; }

body .scv_items { margin: 0; padding: 0; list-style: none; }
body .scv_items li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: .75rem; align-items: center; margin: 0; padding: 0 0 .8rem; }
body .scv_items li + li { padding-top: .8rem; border-top: 1px solid rgba(17,17,17,.07); }
body .scv_items i { display: block; width: 40px; height: 40px; background: #d9cbb4; }
body .scv_items i.is-b { background: #cfd8c4; }
body .scv_items small { display: block; font-size: 12px; color: var(--dp-mute, #74746e); }
body .scv_items b, body .scv_sum b { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
body .scv_sum { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-top: 1px solid rgba(17,17,17,.07); }
body .scv_sum.is-total { font-weight: 600; }
body .scv_sum.is-total b { font-weight: 600; }
body .scv_pay { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .7rem !important; }
body .scv_pay span { padding: .1rem .45rem; border: 0; background: #fff; font-size: 12px; color: #5a5a55; }

body .scv_express { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .9rem !important; font-size: 12px; color: var(--dp-mute, #74746e); }
body .scv_express span { flex-basis: 100%; }
body .scv_express b { flex: 1 1 0; padding: .5rem .4rem; border: 1px solid rgba(17,17,17,.06); background: #fff; font-size: 13px; font-weight: 500; color: #111; text-align: center; }
body .scv_field { padding: .55rem .7rem; border: 1px solid rgba(17,17,17,.06); background: #fff; font-size: 13px; color: #8c8c86; }
body .scv_field + .scv_field { margin-top: .45rem !important; }

/* what was changed: a strip at the foot of each screen */
body .scv_note { margin: auto -1.1rem 0 !important; padding: .6rem 1.1rem; border-top: 0; background: #fde3cf; font-size: 13px; font-weight: 500; line-height: 1.4; }
body .scv_screen > :nth-last-child(2) { margin-bottom: 1rem !important; }
body .scv_note::before { content: "Geändert: "; font-weight: 400; color: #8a4a1f; }

/* drop-off before / after */
body .scv_drop { margin-top: .5rem; padding: .9rem 1.1rem 1rem; border: 0; background: var(--dp-tile, #f5f5f3); }
body .scv_dl { margin-bottom: .55rem !important; font-size: 13px; line-height: 1.4; font-weight: 500; color: var(--dp-mute, #74746e); }
body .scv_bar { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr) 2.75rem; gap: .6rem; align-items: center; font-size: 13px; line-height: 1.4; }
body .scv_bar + .scv_bar { margin-top: .35rem !important; }
body .scv_bar span { font-size: 12px; color: var(--dp-mute, #74746e); }
body .scv_bar i { position: relative; display: block; height: 8px; background: #fff; }
body .scv_bar i::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--w) * 100%); background: #d3cdc1; transform-origin: 0 50%; }
body .scv_bar.is-after i::before { background: var(--scv-acc); }
body .scv_bar b { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
body .scv_bar.is-after b { color: #111; }

@media (max-width: 1199px) {
  body .scv_steps { gap: 1rem; }
}
/* phones: the three screens become a swipe row inside the window (no page scroll), the next one peeking in */
@media (max-width: 719px) {
  body .scv_steps { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; gap: .75rem; margin: 0 -1rem; padding: 0 1rem .75rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 1rem; overscroll-behavior-x: contain; }
  body .scv_step { scroll-snap-align: start; }
}

/* ---------- motion: once, on scroll-in ---------- */
@media (prefers-reduced-motion: no-preference) {
  body .scv-shot .scv_step { transition: opacity .5s ease, transform .6s cubic-bezier(.165, .84, .44, 1); transition-delay: calc(var(--i) * 120ms); }
  body .scv-shot .scv_note { transition: opacity .5s ease; transition-delay: calc(.6s + var(--i, 0) * 150ms); }
  body .scv-shot .scv_bar i::before { transition: transform .9s cubic-bezier(.165, .84, .44, 1); }
  body .scv-shot .scv_step:nth-child(1) .scv_bar i::before { transition-delay: .45s; }
  body .scv-shot .scv_step:nth-child(2) .scv_bar i::before { transition-delay: .6s; }
  body .scv-shot .scv_step:nth-child(3) .scv_bar i::before { transition-delay: .75s; }
  body .scv-shot .scv_bar.is-after i::before { transition-duration: 1.1s; }
  body .scv-shot.is-pre .scv_step { opacity: 0; transform: translateY(12px); }
  body .scv-shot.is-pre .scv_note { opacity: 0; }
  body .scv-shot.is-pre .scv_bar i::before { transform: scaleX(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; }

/* 21.10.2026, Christian: "die card ist zu hoch, muss bisschen gekürzt werden" - flatter product picture below 992 */
@media (max-width: 991px) { body .scv_img { aspect-ratio: 16 / 9; } }