/* Shop Check header (18.10.2026): Werbe-Header layout from /online-werbung plus its own visual.
   Christian: "shop check header auch so wie bei online werbung den stil"; first tag "Kostenfrei" (moved here from the nav).
   Frame = the system from css/werbung-reevo.css (.wr-shot, .wr-field, macOS window); Shop Check has no nav icon, so the field is orange (is-orange).
   Visual: a Shop-Check report - findings sorted by impact (Warenkorb, Produktseite, Ladezeit, Vertrauen), each with its next step,
   plus the checked areas. Wording follows the page's own lists (FAQ, "Was dein Shop davon hat"). Illustration only ("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 28. */

/* ---------- visual ---------- */
body .scx { --scx-acc: #e8590c; }
body .scx :where(p) { margin: 0; }
body .scx_grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: .75rem; }
body .scx_card { display: flex; flex-direction: column; min-width: 0; border: 0; background: var(--dp-tile, #f5f5f3); }
body .scx_ct { display: flex; justify-content: space-between; gap: 1rem; 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 .scx_ct span { font-weight: 400; color: #8c8c86; font-variant-numeric: tabular-nums; }

/* findings, sorted by impact */
body .scx_finds { margin: 0; padding: 0; list-style: none; }
body .scx_finds li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: .9rem; align-items: start; margin: 0; padding: .85rem 1.1rem; font-size: 14px; line-height: 1.45; color: #111; }
body .scx_finds li + li { border-top: 1px solid rgba(17,17,17,.07); }
body .scx_num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; background: #111; color: #fff; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
body .scx_body { min-width: 0; }
body .scx_area { display: block; margin-bottom: .15rem; font-size: 11px; line-height: 1.4; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: #8c8c86; }
body .scx_what { display: block; font-weight: 600; letter-spacing: -0.005em; }
body .scx_next { display: block; margin-top: .25rem; font-size: 13px; color: var(--dp-mute, #74746e); }
body .scx_next::before { content: "→ "; color: var(--scx-acc); }
body .scx_imp { padding: .1rem .45rem; font-size: 12px; line-height: 1.4; font-weight: 600; white-space: nowrap; background: #fde3cf; color: #a8410a; }
body .scx_imp.is-mid { background: #e9e9e5; color: #5a5a55; }

/* checked areas */
body .scx_areas { margin: 0; padding: .25rem 1.1rem .5rem; list-style: none; }
body .scx_areas li { display: flex; align-items: center; gap: .75rem; margin: 0; padding: .55rem 0; font-size: 14px; line-height: 1.4; color: #111; }
body .scx_areas li b { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--dp-mute, #74746e); white-space: nowrap; }
body .scx_mark { display: flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; background: #2f8a57; color: #fff; }
body .scx_mark svg { width: 13px; height: 13px; }
body .scx_mark.is-lever { background: var(--scx-acc); }
body .scx_foot { margin: auto 0 0 !important; 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 .scx_grid { grid-template-columns: 1fr; }
  body .scx_areas { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
}
@media (max-width: 719px) {
  body .scx_grid { gap: .75rem; }
  body .scx_finds li { gap: .7rem; padding: .85rem .9rem; font-size: 14px; }
  body .scx_next { font-size: 13px; }
  body .scx_areas { grid-template-columns: 1fr; }
  body .scx_areas li { font-size: 14px; }
}
@media (max-width: 479px) {
  body .scx_finds li { grid-template-columns: 24px minmax(0, 1fr); }
  body .scx_imp { grid-column: 2; justify-self: start; margin-top: -.2rem; }
}

/* ---------- motion: once, on scroll-in ---------- */
@media (prefers-reduced-motion: no-preference) {
  body .scx-shot .scx_finds li { transition: opacity .5s ease, transform .6s cubic-bezier(.165, .84, .44, 1); transition-delay: calc(.15s + var(--i) * 130ms); }
  body .scx-shot .scx_mark { transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(.4s + var(--i) * 110ms); }
  body .scx-shot.is-pre .scx_finds li { opacity: 0; transform: translateY(10px); }
  body .scx-shot.is-pre .scx_mark { transform: scale(0); }
}