/* ==========================================================================
   Conversion Optimierung header: self-built dashboard instead of the iPad photo (18.10.2026).
   Christian: "entwickel hier für das bild eine eigene graphic, die conversion optimierung darstellt,
   also vllt dashboard? mach in meinem stil" and "pack den text mittig nicht top aligned".
   Framing reuses the system: macOS window (.wr-shot_win / .wr-shot_bar) on the pink patchwork field
   (.wr-field.is-pink) from css/werbung-reevo.css; the inner cards follow the "Kampagnen-Puls" dashboard
   (.dp, Online-Werbung): #fafaf8 ground, white cards with #e6e6e2 hairlines, beige bars, title in Charter.
   Accent = the headline pink #f26b1d for the "after" state. All figures are an illustration, marked
   "Beispielansicht". The mock scales like a picture: sizes in em on a font-size in cqw.
   The old photo header is Sektionspeicher entry 18 (styles in css/co-header.css, unchanged).
   Square corners on site elements; the macOS window keeps its own exception, mock cards stay square.
   ========================================================================== */

/* Text vertically centred against the graphic once the two columns stand side by side */
@media (min-width: 820px) {
  body .co-header_grid { align-items: center; }
}

/* ---------- frame: square field, window bleeding off right and bottom ---------- */
body .co-viz { container-type: inline-size; }
body .co-viz_shot { position: relative; aspect-ratio: 1 / 1; overflow: hidden; container-type: inline-size; }
body .co-viz_shot .wr-field { --t: 5cqw; }
/* the rounded window corner uncovers the pixels under the first top patch (same fix as .wr-shot) */
body .co-viz_shot > .wr-field > .wr-pt:first-child { height: calc(var(--t) + 12px) !important; }
body .co-viz_shot .wr-shot_win {
  position: absolute; top: 5cqw; left: 5cqw; right: -2cqw; bottom: -2cqw; margin: 0;
  display: flex; flex-direction: column;
  font-size: max(9px, 2.45cqw);
}
body .co-viz_shot .wr-shot_bar { flex: none; height: 2.9em; padding: 0 1.1em; gap: .55em; }
body .co-viz_shot .wr-shot_bar i { width: .8em; height: .8em; }

/* ---------- dashboard ---------- */
body .co-db { flex: 1 1 auto; min-height: 0; padding: 1.5em 1.5em 0; color: #111; text-align: left; font-variant-numeric: tabular-nums; }
body .co-db :where(p) { margin: 0; }
body .co-db_head { display: flex; align-items: center; gap: .75em; margin-bottom: 1.25em; }
body .co-db_title { font-family: var(--_typography---font-styles--heading); font-size: 2em; line-height: 1.1; letter-spacing: -0.01em; }
body .co-db_badge { padding: .2em .55em; border: 1px solid #e3e3e3; background: #fff; font-size: .8em; line-height: 1.4; color: #6b6b6b; }

body .co-db_card { border: 1px solid #e6e6e2; background: #fff; min-width: 0; }
body .co-db_l { font-size: .9em; line-height: 1.35; color: #555; }

body .co-db_row { display: grid; grid-template-columns: 11.5em minmax(0, 1fr); gap: .9em; margin-bottom: .9em; }
body .co-db_kpi { display: flex; flex-direction: column; padding: 1em 1.1em; }
body .co-db_v { margin-top: .35em; font-size: 2.6em; line-height: 1.05; font-weight: 500; letter-spacing: -0.02em; }
body .co-db_c { margin-top: .45em; font-size: .9em; line-height: 1.35; }
body .co-db_c b { font-weight: 500; color: #2f8a57; }
body .co-db_was { margin-top: auto; padding-top: .9em; border-top: 1px solid #ececea; font-size: .9em; line-height: 1.35; color: #6b6b6b; }

body .co-db_chart { padding: 1em 1.1em .7em; }
body .co-db_svg { display: block; width: 100%; height: auto; margin-top: .5em; overflow: visible; }
body .co-db_grid { stroke: #ececea; stroke-width: 1; }
body .co-db_grid.is-zero { stroke: #111; }
body .co-db_tick, body .co-db_markt { fill: #6b6b6b; font-size: 10.5px; font-family: var(--_typography---font-styles--body); }
body .co-db_tick { text-anchor: end; }
body .co-db_markt { fill: #111; font-weight: 500; }
body .co-db_mark { stroke: #111; stroke-width: 1; stroke-dasharray: 3 3; }
body .co-db_line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
body .co-db_line.is-before { stroke: #b9b9b2; }
body .co-db_line.is-after { stroke: #f26b1d; }
body .co-db_area { fill: #fde3cf; }
body .co-db_dot { fill: #fff; stroke: #f26b1d; stroke-width: 2.5; }

/* funnel: bars only in the left part, the notification stack sits over the free right side */
body .co-db_funnel { padding: 1em 1.1em 1.2em; }
body .co-db_steps { width: 13em; margin: .8em 0 0; padding: 0; list-style: none; }
body .co-db_steps li { padding: 0; display: grid; grid-template-columns: 1fr auto; column-gap: 1em; row-gap: .3em; margin: 0; }
body .co-db_steps li + li { margin-top: .7em; }
body .co-db_steps span { font-size: .9em; line-height: 1.3; color: #111; }
body .co-db_steps b { font-size: .9em; line-height: 1.3; font-weight: 500; }
body .co-db_steps i { grid-column: 1 / -1; display: block; height: .6em; width: max(.5em, calc(var(--w) * 100%)); background: #e4d9ab; transform-origin: 0 50%; }
body .co-db_steps .is-goal i { background: #f26b1d; }
body .co-db_steps .is-goal span, body .co-db_steps .is-goal b { font-weight: 600; }

/* ---------- the three notifications, bottom right over the window (text unchanged) ---------- */
body .co-viz .co-header_cards { z-index: 2; left: auto; right: 3cqw; bottom: 3cqw; width: 52cqw; max-width: none; gap: .5em; font-size: max(11px, 2cqw); }
body .co-viz .co-header_card { gap: .6em; padding: .7em .8em; border: 1px solid #e3e3de;
  box-shadow: 0 1px 2px rgba(60, 20, 40, .06), 0 18px 36px -18px rgba(60, 20, 40, .35); }
body .co-viz .co-header_card-icon { width: 1.9em; height: 1.9em; }
body .co-viz .co-header_card-icon svg { width: 1.1em; height: 1.1em; }
body .co-viz .co-header_card-title, body .co-viz .co-header_card-line { font-size: 1em; line-height: 1.35; }
body .co-viz .co-header_card-title { white-space: normal; }
body .co-viz .co-header_card-line { display: block; -webkit-line-clamp: unset; margin-top: .1em; }

/* phones: the mock would shrink the notifications below reading size, so they leave the window and stack
   under it, the first one still overlapping the window's lower edge */
@media (max-width: 479px) {
  body .co-viz .co-header_cards { position: relative; right: auto; bottom: auto; left: auto; width: auto; margin: -3cqw 0 0 7cqw; font-size: 13px; }
}

/* ---------- motion: once, when the graphic is visible (js inline after the section); off with reduced motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  body .co-viz .co-header_card:nth-child(1) { animation-delay: 1.1s; }
  body .co-viz .co-header_card:nth-child(2) { animation-delay: 1.4s; }
  body .co-viz .co-header_card:nth-child(3) { animation-delay: 1.7s; }
  body .co-viz.is-pre .co-db_steps i { transform: scaleX(0); }
  body .co-viz.is-pre .co-db_line.is-after { stroke-dashoffset: 1; }
  body .co-viz.is-pre .co-db_area, body .co-viz.is-pre .co-db_dot { opacity: 0; }
  body .co-viz .co-db_steps i { transition: transform 1s cubic-bezier(.165, .84, .44, 1); }
  body .co-viz .co-db_steps li:nth-child(2) i { transition-delay: .1s; }
  body .co-viz .co-db_steps li:nth-child(3) i { transition-delay: .2s; }
  body .co-viz .co-db_steps li:nth-child(4) i { transition-delay: .3s; }
  body .co-viz .co-db_line.is-after { stroke-dasharray: 1; transition: stroke-dashoffset 1.1s cubic-bezier(.65, 0, .35, 1) .15s; }
  body .co-viz .co-db_area, body .co-viz .co-db_dot { transition: opacity .6s ease 1s; }
}

/* 21.10.2026, Christian (phone): "auch bei conversionsoptimierung ist im header visual die card nicht bis ganz rechts" /
   "das wird bei den layouts immer so sein" - like all header windows on phones: the yellow field runs edge to edge,
   the window starts at the container edge and runs out at the right and bottom screen edge; up to 991 since 21.10.2026 (iPad: "das soll nie sein") */
@media (max-width: 991px) {
  body .co-viz_shot { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
  body .co-viz_shot .wr-shot_win { left: 5cqw; right: 0; bottom: 0; border-right: 0; border-bottom: 0; }
}