/* Webseite Check header (18.10.2026): Werbe-Header layout from /online-werbung plus its own visual.
   Christian: "webseite check auch in dem layout dann wie shop check, und das kostenfrei aus dem nav raus, das kann als tag unter der headline dann sein".
   Frame = the system from css/werbung-reevo.css (.wr-shot, .wr-field, macOS window); field blue (is-p5), rendered as the grainy gradient there.
   Visual: a check report for an invented page (deinefirma.de) - a sketch of the start page with numbered pins and four findings sorted by impact,
   each with its next step. Illustration only, marked "Beispielansicht". Inner frame follows the "Kampagnen-Puls" dashboard (.dp from the Webflow css).
   Square corners everywhere except the macOS window (handled in werbung-reevo.css). Motion plays once on scroll-in (inline script, class is-pre),
   off with reduced motion; without JS the final state shows. Old header: Sektionspeicher snippet (session scratchpad). */

body .wck-shot { container-name: wckshot; }
body .wck { --blue: #1f4fd0; }
body .wck :where(p) { margin: 0; }

body .wck_grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: .75rem; align-items: stretch; }

/* ---------- page sketch with pins ---------- */
body .wck_page { display: flex; flex-direction: column; border: 0; background: var(--dp-tile, #f5f5f3); }
body .wck_url { padding: .95rem 1.1rem .6rem; border: 0; background: none; font-size: 13px; line-height: 1.4; font-weight: 500; color: var(--dp-mute, #74746e); }
body .wck_site { display: flex; flex-direction: column; flex: 1 1 auto; margin: 0 .75rem .75rem; padding: 1.1rem 1.1rem 1.25rem; background: #fff; }
body .wck_site i { display: block; background: #ecebe7; }
body .wck_pin { position: absolute; z-index: 1; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: var(--blue); color: #fff; font-size: 13px; line-height: 1; font-weight: 600; box-shadow: 0 0 0 3px rgba(31,79,208,.18); }

body .wck_nav { position: relative; display: flex; align-items: center; gap: .6rem; padding-bottom: 1rem; border-bottom: 1px solid #f0efeb; }
body .wck_nav i { width: 2.2rem; height: 6px; }
body .wck_nav i.wck_logo { width: 3.4rem; height: 12px; margin-right: auto; background: #cfcdc6; }
body .wck_nav .wck_pin { right: -10px; top: -14px; }

body .wck_hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: center; padding: 1.5rem 0; }
body .wck_copy { position: relative; display: flex; flex-direction: column; gap: .5rem; }
body .wck_l { height: 7px; width: 92%; }
body .wck_l.is-s { width: 64%; }
body .wck_l.is-h { height: 14px; width: 100%; background: #cfcdc6; }
body .wck_l.is-h.is-s { width: 72%; margin-bottom: .5rem; }
body .wck_copy > .wck_pin.is-1 { left: -12px; top: -12px; }
body .wck_btn { position: relative; display: block; width: 5.5rem; height: 22px; margin-top: .6rem; border: 1px dashed #b9b7b0; }
body .wck_btn .wck_pin { right: -14px; top: -12px; }
body .wck_img { position: relative; aspect-ratio: 4 / 3; background: linear-gradient(135deg, #e3e2dd, #d2d0c9); }
body .wck_img .wck_pin { right: -10px; top: -10px; }
/* the sketch stretches to the findings list; the card row takes the extra height */
body .wck_cols { display: grid; flex: 1 1 auto; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; min-height: 3.25rem; }
body .wck_cols i { background: #f3f2ef; }

/* ---------- findings ---------- */
body .wck_list { margin: 0; padding: 0; list-style: none; border: 0; background: var(--dp-tile, #f5f5f3); }
body .wck_item { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 1rem; align-items: start; margin: 0; padding: 1rem 1.1rem; }
body .wck_item + .wck_item { border-top: 1px solid rgba(17,17,17,.07); }
body .wck_num { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; background: var(--blue); color: #fff; font-size: 12px; line-height: 1; font-weight: 600; }
body .wck_area { margin-bottom: .2rem !important; font-size: 11px; line-height: 1.4; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: #8c8c86; }
body .wck_find { font-size: 14px; line-height: 1.45; font-weight: 600; letter-spacing: -0.005em; color: #111; }
body .wck_step { margin-top: .3rem !important; font-size: 13px; line-height: 1.45; color: var(--dp-mute, #74746e); }
body .wck_imp { padding: .1rem .45rem; background: #e9e9e5; color: #5a5a55; font-size: 12px; line-height: 1.4; font-weight: 600; white-space: nowrap; }
body .wck_imp.is-hi { background: #dfe7fb; color: #1f4fd0; }

@container wckshot (max-width: 1080px) {
  body .wck_grid { grid-template-columns: minmax(0, 1fr); }
  body .wck_page { display: none; }
}
@media (max-width: 719px) {
  body .wck_item { grid-template-columns: 24px minmax(0, 1fr); gap: .75rem; padding: 1rem .9rem; }
  body .wck_imp { grid-column: 2; justify-self: start; margin-top: .1rem; }
  body .wck_find { font-size: 14px; }
  body .wck_step { font-size: 13px; }
}

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