/* Webseite 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).
   Inner cards follow the "Kampagnen-Puls" dashboard (.dp, .dp_kpi from the Webflow css). All figures are an illustration ("Beispielansicht").
   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. */

body .wr-field.is-p5 { --a: #c4d3f5; --b: #8fabeb; --c: #e6ecfb; --d: #2f5fd0; }

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

/* ---------- visual: care log ---------- */
body .wpf .dp_kpis { margin-bottom: .75rem; }
body .wpf_grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: .75rem; }
body .wpf_card { border: 0; background: var(--dp-tile, #f5f5f3); min-width: 0; }
body .wpf_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 .wpf_rows { margin: 0; padding: 0; list-style: none; }
body .wpf_rows li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; gap: 1rem; align-items: center; margin: 0; padding: .8rem 1.1rem; font-size: 14px; line-height: 1.45; color: #111; }
body .wpf_rows li + li { border-top: 1px solid rgba(17,17,17,.07); }
body .wpf_rows time { font-size: 13px; color: var(--dp-mute, #74746e); font-variant-numeric: tabular-nums; }
body .wpf_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 .wpf_ok svg { width: 12px; height: 12px; flex: none; }

body .wpf_side { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
body .wpf_msgs { display: flex; flex-direction: column; gap: .5rem; padding: .5rem 1.1rem 1.1rem; }
body .wpf_msg { max-width: 85%; margin: 0; padding: .55rem .8rem; font-size: 14px; line-height: 1.4; }
body .wpf_msg.is-in { align-self: flex-start; background: #fff; color: #111; }
body .wpf_msg.is-out { align-self: flex-end; background: #2f5fd0; color: #fff; }
body .wpf_msg time { display: block; margin-top: .2rem; font-size: 12px; line-height: 1.3; opacity: .7; text-align: right; }

body .wpf_up { flex: 1 1 auto; }
body .wpf_bars { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 3px; height: 44px; margin: .6rem 1.1rem 0; }
body .wpf_bars i { display: block; background: #4fa775; transform-origin: 50% 100%; }
body .wpf_upl { display: flex; justify-content: space-between; margin: 0; padding: .45rem 1.1rem 1rem; font-size: 12px; line-height: 1.4; color: var(--dp-mute, #74746e); font-variant-numeric: tabular-nums; }

@media (max-width: 991px) {
  body .wpf_grid { grid-template-columns: 1fr; }
}
@media (max-width: 719px) {
  body .wpf .dp_kpis { margin-bottom: .75rem; }
  body .wpf_grid, body .wpf_side { gap: .75rem; }
  body .wpf_rows li { grid-template-columns: 3rem minmax(0, 1fr) auto; gap: .75rem; padding: .8rem .9rem; font-size: 14px; }
  body .wpf_bars { gap: 2px; }
}
@media (max-width: 479px) {
  /* chip shrinks to its tick so the log text keeps room */
  body .wpf_ok { gap: 0; padding: .3rem; font-size: 0; }
  body .wpf_msg { font-size: 14px; }
}

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