/* Online-Werbung, reevo.ai round (17.10.2026).
   1) Dashboard as a product shot: macOS window on a patchwork field (after the reevo.ai hero shot).
   2) Section "Wo aus Klicks Anfragen werden" (after reevo.ai "Where call data becomes deal intelligence").
   3) Section "Antworten statt Tabellen" (after reevo.ai "Your intelligence: answers, not just dashboards").
   Palette measured on reevo.ai. Patchwork patches are generated with a seeded script (positions in %),
   like the FEATURE-FINDEN frame. Every selector starts with "body" so inline page styles do not win.
   Corners square everywhere (site rule); only the macOS traffic-light dots are round. */

/* ---------- shared patchwork ---------- */
body .wr-field { position: absolute; inset: 0; overflow: hidden; --t: 5cqw; --a: #fff47d; --b: #ffdd4e; --c: #fed3ed; --d: #e36fb6; background: var(--a); }
body .wr-field.is-pink { --a: #fed3ed; --b: #e36fb6; --c: #fbe3f1; --d: #f3a6d3; }
body .wr-field.is-gold { --a: #fff47d; --b: #ffdd4e; --c: #fff9b8; --d: #fa7b34; }
body .wr-field::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .35 0 0 0 0 .1 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
body .wr-pt { position: absolute; display: block; }
body .wr-pt.is-pl { background: var(--c); }
body .wr-pt.is-pl2 { background: var(--b); }
body .wr-pt.is-ck { background: repeating-conic-gradient(var(--b) 0 25%, var(--a) 0 50%) 0 0 / 12px 12px; }
body .wr-pt.is-ck2 { background: repeating-conic-gradient(var(--d) 0 25%, var(--c) 0 50%) 0 0 / 6px 6px; }
body .wr-pt.is-vs { background: repeating-linear-gradient(90deg, var(--d) 0 3px, var(--c) 3px 7px); }
body .wr-pt.is-hs { background: repeating-linear-gradient(0deg, var(--b) 0 3px, var(--a) 3px 7px); }

/* ---------- 1) dashboard as product shot ---------- */
body .wr-shot { position: relative; margin-top: 5rem; overflow: hidden; container-type: inline-size; }
body .wr-shot .wr-field { --t: 5cqw; }
body .wr-shot_win { position: relative; z-index: 1; margin: 5cqw -2cqw -2cqw 5cqw; border: 1px solid rgba(17,17,17,.14); background: #fafaf8; box-shadow: 0 2px 4px rgba(60,50,0,.06), 0 30px 60px -30px rgba(60,50,0,.35); }
body .wr-shot_bar { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-bottom: 1px solid #e3e3de; background: #f2f2ee; }
body .wr-shot_bar i { display: block; width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.12); }
body .wr-shot_bar i:nth-child(2) { background: #febc2e; }
body .wr-shot_bar i:nth-child(3) { background: #28c840; }
body .wr-shot .dp { margin: 0; border: 0; background: transparent; }
@media (max-width: 719px) {
  body .wr-shot { margin-top: 3.5rem; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
  body .wr-shot .wr-field { --t: 12px; }
  body .wr-shot_win { margin: 12px -1px -1px 12px; }
  body .wr-shot_bar { height: 36px; padding: 0 12px; gap: 7px; }
  body .wr-shot_bar i { width: 10px; height: 10px; }
  body .wr-shot .dp { margin: 0; padding-left: 1rem; padding-right: 1rem; }
}

/* ---------- shared section frame ---------- */
body .wr-sec { padding: 8rem 0; background: #fff; color: #111; }
body .wr-h2 { margin: 0; font-family: var(--_typography---font-styles--heading); font-size: 56px; font-weight: 400; line-height: 1.08; letter-spacing: -0.02em; color: #111; hyphens: manual; -webkit-hyphens: manual; }
@media (max-width: 991px) { body .wr-sec { padding: 6rem 0; } body .wr-h2 { font-size: 44px; } }
@media (max-width: 719px) { body .wr-sec { padding: 4.5rem 0; } body .wr-h2 { font-size: 36px; max-width: none; } }
@media (max-width: 479px) { body .wr-h2 { font-size: 30px; } }

/* ---------- 2) tabs + card ("Wo aus Klicks Anfragen werden") ---------- */
body .wr-di_grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 5rem; align-items: stretch; }
body .wr-di_copy { display: flex; flex-direction: column; justify-content: space-between; gap: 3rem; }
body .wr-di_h2 { max-width: 9em; }
body .wr-tabs { margin: 0; padding: 0; list-style: none; border-left: 1px solid #e5e5e5; }
body .wr-tab { position: relative; padding: .9rem 0 .9rem 1.5rem; }
body .wr-tab::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: #111; transform: scaleY(0); transform-origin: top; transition: transform .35s ease; }
body .wr-tab.is-active::before { transform: scaleY(1); }
body .wr-tab_btn { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; font: inherit; font-size: 17px; line-height: 1.4; font-weight: 600; text-align: left; color: #8a8a8a; cursor: pointer; transition: color .2s ease; }
body .wr-tab_btn:hover, body .wr-tab.is-active .wr-tab_btn { color: #111; }
body .wr-tab_btn:focus-visible { outline: 2px solid #111; outline-offset: 4px; }
body .wr-tab_btn .nfr-free { font-weight: 400; }
body .wr-tab_body { display: none; max-width: 30rem; margin: .5rem 0 0; font-size: 17px; line-height: 1.6; color: #555; }
body .wr-tab.is-active .wr-tab_body { display: block; }

body .wr-di_vis { position: relative; aspect-ratio: 1 / 1; container-type: inline-size; }
body .wr-di_vis .wr-field { --t: 7cqw; }
body .wr-card { position: absolute; z-index: 1; left: 50%; top: 50%; width: 72cqw; transform: translate(-50%, -50%); padding: 4cqw; background: #fff; box-shadow: 0 1px 2px rgba(60,40,0,.08), 0 24px 48px -24px rgba(60,40,0,.32); font-size: max(11px, 2.3cqw); line-height: 1.5; color: #111; text-align: left; }
body .wr-card[hidden] { display: none; }
body .wr-card_label { display: inline-flex; align-items: center; gap: .45em; margin: 0 0 1.1em; padding: .3em .7em; background: #eeecfb; color: #5b55b8; font-size: .86em; font-weight: 500; }
body .wr-card_label svg { width: 1.05em; height: 1.05em; fill: currentColor; }
body .wr-card_lead { margin: 0 0 .8em; font-size: 1.32em; line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; }
body .wr-card_p { margin: 0 0 .7em; color: #6b6b6b; }
body .wr-card_chips { display: flex; flex-wrap: wrap; gap: .5em; margin: 1.1em 0 1.3em; }
body .wr-card_chip { padding: .25em .65em; border: 1px solid #e5e5e5; background: #fafafa; font-size: .86em; color: #555; white-space: nowrap; }
body .wr-card_box { border: 1px solid #e5e5e5; }
body .wr-card_row { display: flex; align-items: center; gap: .75em; padding: .75em .9em; }
body .wr-card_row + .wr-card_row { border-top: 1px solid #e5e5e5; }
body .wr-card_ico { display: flex; align-items: center; justify-content: center; flex: none; width: 1.9em; height: 1.9em; background: #f4f4f2; }
body .wr-card_ico svg { width: 1.1em; height: 1.1em; fill: none; stroke: #111; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
body .wr-card_txt { flex: 1; min-width: 0; font-size: .95em; font-weight: 500; }
body .wr-card_btn { flex: none; padding: .3em .75em; border: 1px solid #d9d9d9; background: #fff; font-size: .86em; font-weight: 500; color: #111; }
@media (prefers-reduced-motion: no-preference) {
  body .wr-card.is-in { animation: wr-card-in .45s ease both; }
  @keyframes wr-card-in { from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)); } to { opacity: 1; transform: translate(-50%, -50%); } }
}
@media (max-width: 1199px) { body .wr-di_grid { gap: 3.5rem; } }
@media (max-width: 991px) {
  body .wr-di_grid { grid-template-columns: 1fr; gap: 3rem; }
  body .wr-di_copy { gap: 2.5rem; }
  body .wr-di_vis { max-width: 640px; }
}
@media (max-width: 719px) {
  body .wr-card { width: 84cqw; padding: 5cqw; font-size: max(11px, 3.4cqw); }
  body .wr-di_vis .wr-field { --t: 6cqw; }
}
@media (max-width: 479px) {
  body .wr-di_vis { aspect-ratio: auto; min-height: 126vw; margin: 0 calc(50% - 50vw); }
  body .wr-card { width: 88cqw; font-size: 12.5px; }
  body .wr-card_lead { font-size: 15.5px; }
}

/* ---------- 3) two cards ("Antworten statt Tabellen") ---------- */
body .wr-an_h2 { max-width: 12em; margin-bottom: 3.5rem; }
body .wr-an_grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
body .wr-an_card { position: relative; display: flex; flex-direction: column; min-height: 640px; overflow: hidden; container-type: inline-size; }
body .wr-an_card .wr-field { --t: 4.5cqw; }
body .wr-an_text { position: relative; z-index: 1; margin: 7.5cqw 7.5cqw 0; padding: 1.5rem 1.5rem 1.4rem; background: var(--wr-tbg, #fff47d); }
body .wr-an_card.is-pink { --wr-tbg: #fed3ed; }
body .wr-an_title { margin: 0 0 .6rem; font-family: var(--_typography---font-styles--body); font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; color: #111; }
body .wr-an_p { margin: 0; max-width: 30rem; font-size: 17px; line-height: 1.6; color: #111; }
body .wr-an_mock { position: relative; z-index: 1; height: 360px; margin: auto 10cqw -40px; padding-top: 0; background: #fff; border: 1px solid rgba(17,17,17,.1); box-shadow: 0 24px 48px -24px rgba(60,40,0,.3); font-size: 14px; line-height: 1.45; color: #111; }
body .wr-an_spacer { flex: none; height: 2.5rem; }

/* chat mock */
body .wr-chat_top { display: flex; align-items: center; height: 38px; padding: 0 16px; border-bottom: 1px solid #ececec; color: #9a9a9a; font-size: 18px; letter-spacing: .1em; }
body .wr-chat_ch { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid #ececec; font-weight: 600; }
body .wr-chat_ch svg { width: 16px; height: 16px; fill: none; stroke: #111; stroke-width: 1.8; stroke-linecap: round; }
body .wr-chat_msg { display: flex; gap: 10px; padding: 14px 16px 4px; }
body .wr-chat_av { display: flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; background: #e36fb6; color: #fff; font-weight: 600; font-size: 14px; }
body .wr-chat_av.is-cs { background: #111; }
body .wr-chat_who { margin: 0; font-weight: 600; }
body .wr-chat_who time { margin-left: 6px; font-weight: 400; font-size: 12px; color: #8a8a8a; }
body .wr-chat_txt { margin: 2px 0 0; color: #222; }
body .wr-chat_txt b { font-weight: 500; color: #3d6fb8; background: #eaf1fb; padding: 0 2px; }

/* chart mock */
body .wr-chart_tools { display: flex; align-items: center; gap: 6px; padding: 12px 14px; border-bottom: 1px solid #ececec; }
body .wr-chart_filter { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid #ddd; font-size: 13px; font-weight: 500; }
body .wr-chart_filter svg, body .wr-chart_ib svg { width: 14px; height: 14px; fill: none; stroke: #111; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
body .wr-chart_ib { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid #ddd; }
body .wr-chart_ib:first-of-type { margin-left: auto; }
body .wr-chart_legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 12px 14px 0; font-size: 12.5px; color: #555; }
body .wr-chart_legend span { display: inline-flex; align-items: center; gap: 6px; }
body .wr-chart_legend span::before { content: ""; width: 14px; height: 3px; background: #2f9e62; }
body .wr-chart_legend span + span::before { background: #f2c200; }
body .wr-chart_svg { display: block; width: 100%; height: auto; padding: 6px 10px 0 4px; box-sizing: border-box; }
body .wr-chart_grid { stroke: #efefef; stroke-width: 1; }
body .wr-chart_t { fill: #8a8a8a; font-size: 11px; font-family: var(--_typography---font-styles--body), sans-serif; }
body .wr-chart_area { fill: rgba(47,158,98,.18); stroke: #2f9e62; stroke-width: 2; stroke-linejoin: round; }
body .wr-chart_line { fill: none; stroke: #f2c200; stroke-width: 2; stroke-linejoin: round; }
body .wr-chart_goal { stroke: #e0483e; stroke-width: 1.5; stroke-dasharray: 5 4; }
body .wr-chart_goalt { fill: #e0483e; font-size: 11px; font-weight: 600; font-family: var(--_typography---font-styles--body), sans-serif; }

@media (max-width: 1199px) { body .wr-an_card { min-height: 600px; } body .wr-an_mock { margin-left: 7cqw; margin-right: 7cqw; } }
@media (max-width: 991px) {
  body .wr-an_grid { grid-template-columns: 1fr; }
  body .wr-an_card { min-height: 560px; }
  body .wr-an_mock { margin-left: 12cqw; margin-right: 12cqw; }
}
@media (max-width: 719px) {
  body .wr-an_h2 { margin-bottom: 2.5rem; }
  body .wr-an_card { min-height: 540px; }
  body .wr-an_card .wr-field { --t: 14px; }
  body .wr-an_text { margin: 28px 28px 0; padding: 1.25rem; }
  body .wr-an_mock { margin-left: 28px; margin-right: 28px; }
}
@media (max-width: 479px) {
  body .wr-an_grid { margin: 0 calc(50% - 50vw); }
  body .wr-an_card { min-height: 520px; }
  body .wr-an_text { margin: 22px 22px 0; padding: 1.1rem; }
  body .wr-an_title { font-size: 18px; }
  body .wr-an_mock { margin-left: 22px; margin-right: 22px; font-size: 13px; }
}

/* Paper comments 17.10.2026 */
/* card label: the site's normal .text-eyebrow, no pill (Christian: "nimm meine normale eyebrow") */
body .wr-card_label { display: block; margin: 0 0 .9em; padding: 0; background: none; color: #2a2a2a; }
/* chat mock: more messages, cut off at the card's bottom edge ("noch mehr inhalte, können unten ruhig abgecroppt sein") */
body .wr-an_card .wr-chat { max-height: none; }
/* from 991 down only the first chart ("ab hier nur noch den ersten graph anzeigen") */
@media (max-width: 991px) { body .dp_charts .dp_chart + .dp_chart { display: none; } }
body .wr-an_mock { overflow: hidden; }
/* macOS window = the one exception to "eckig" (17.10.2026, Christian: "border radius wie von apple ... und die roten, gelben, grünen knöpfe auch wie apple, das ist hier ausnahme").
   10px window corners like macOS, round traffic lights; the site-wide radius reset uses !important, so these do too. */
body .wr-shot_win { border-radius: 10px 10px 0 0 !important; overflow: hidden; }
body .wr-shot_bar { border-radius: 10px 10px 0 0 !important; }
body .wr-shot_bar i { border-radius: 50% !important; }
/* The rounded window corner uncovers a few pixels below the first top patch; let that patch reach under the corner so the stripes run on
   (Christian, 17.10.2026: "oben links in der ecke ist das muster unterbrochen ... der eine strich ist abgebrochen"). */
body .wr-shot > .wr-field > .wr-pt:first-child { height: calc(var(--t) + 12px) !important; }

/* Window-on-field headers: one grainy gradient slab instead of the patchwork, on every page that uses this layout
   (18.10.2026, Christian: "überall wo dieses layout war, will ich diese gradients statt den mustern ... die gradients brauchen alle den grain").
   After V1 in Paper ("Home · Header-Visual · Gradient"): deep colour at a hard left edge, fading to white on the right, top edge soft towards
   the right. Colours per field variant; the pixel pieces stay in the markup, hidden. */
body .wr-shot .wr-field, body .co-viz_shot .wr-field { --g1: #f2a900; --g2: #ffd23c; --g3: #fff2bd;
  background: linear-gradient(90deg, var(--g1) 0%, var(--g2) 32%, var(--g3) 62%, #fffdf6 84%, #fff 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 18%, transparent 62%), linear-gradient(180deg, transparent 0, #000 22%);
  mask-image: linear-gradient(90deg, #000 18%, transparent 62%), linear-gradient(180deg, transparent 0, #000 22%);
  -webkit-mask-composite: source-over; mask-composite: add; }
body .wr-shot .wr-field > i, body .co-viz_shot .wr-field > i { display: none; }
body .wr-shot .wr-field::after, body .co-viz_shot .wr-field::after { opacity: .55; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); background-size: 220px 220px; }
body .wr-shot .wr-field.is-pink { --g1: #d9469b; --g2: #ef8cc6; --g3: #fdd9ee; }
body .wr-shot .wr-field.is-orange, body .co-viz_shot .wr-field.is-orange { --g1: #e8590c; --g2: #f7924f; --g3: #fdd3b8; }
body .wr-shot .wr-field.is-p4 { --g1: #ef7a35; --g2: #f6ad83; --g3: #fde3cf; }
body .wr-shot .wr-field.is-p5 { --g1: #1f4fd0; --g2: #5e8cf0; --g3: #cddbfa; }
body .wr-shot .wr-field.is-p6 { --g1: #e0a800; --g2: #f3d04a; --g3: #faeeb6; }

/* Dashboard windows ("Kampagnen-Puls" style, .dp inside .wr-shot_win), 21.10.2026.
   Christian: "da muss die card immer weißen hintergrund haben, und dann die cards in der card wie 'Anfragen gesamt', die müssen
   leichtes grau haben. und mach den style etwas moderner, was in den cards passiert."
   White app area, light grey borderless tiles, small muted labels, large tabular values, delta pills, quieter chart lines.
   Shared tokens here; per-visual tiles (wpf, snl, spf, scx, scv, wck) use them in their css/hdr-*.css. Corners stay square. */
body .wr-shot_win:has(> .dp) { background: #fff; }
body .wr-shot .dp { --dp-tile: #f5f5f3; --dp-line: rgba(17,17,17,.07); --dp-mute: #74746e; --dp-pos: #23794a; --dp-pos-bg: #e3f1e8;
  background: #fff; }
body .wr-shot .dp_badge { padding: .2rem .55rem; border: 0; background: var(--dp-tile); font-size: 12px; font-weight: 500; letter-spacing: .01em; color: var(--dp-mute); }
body .wr-shot .dp_h { font-size: 15px; font-weight: 600; letter-spacing: -0.005em; color: #111; }
body .wr-shot .dp_h span { color: var(--dp-mute); }
body .wr-shot .dp_kpis { gap: .75rem; }
body .wr-shot .dp_groups { gap: 1.5rem; }
body .wr-shot .dp_kpi { border: 0; background: var(--dp-tile); }
body .wr-shot .dp_kpi-l { padding: 1rem 1.1rem 0; border: 0; background: none; font-size: 13px; font-weight: 500; letter-spacing: .005em; color: var(--dp-mute); }
body .wr-shot .dp_kpi-v { padding: .45rem 1.1rem 0; font-size: 32px; line-height: 1.1; font-weight: 500; letter-spacing: -0.03em; }
body .wr-shot .dp_kpi-c { padding: .55rem 1.1rem 1rem; font-size: 13px; line-height: 1.4; color: var(--dp-mute); }
body .wr-shot .dp_kpi-c b { display: inline-block; margin-right: .05rem; padding: .05rem .4rem; background: var(--dp-pos-bg); color: var(--dp-pos); font-weight: 600; font-variant-numeric: tabular-nums; }
body .wr-shot .dp_charts { gap: .75rem; }
body .wr-shot .dp_chart { border: 0; background: var(--dp-tile); padding: 1.25rem 1.25rem .75rem; }
body .wr-shot .dp_ct { margin-bottom: .35rem; font-size: 15px; font-weight: 600; letter-spacing: -0.005em; }
body .wr-shot .dp_legend { font-size: 13px; color: var(--dp-mute); }
body .wr-shot .dp_grid { stroke: rgba(17,17,17,.08); stroke-width: .75; }
body .wr-shot .dp_grid.is-zero { stroke: rgba(17,17,17,.28); stroke-width: 1; }
body .wr-shot .dp_ytick, body .wr-shot .dp_xtick { fill: #8c8c86; font-size: 11px; }
body .wr-shot .dp_bar, body .wr-shot .dp_legend .is-bar { fill: #e2d39a; background: #e2d39a; }
body .wr-shot .dp_line { stroke: #24505d; stroke-width: 2; }
body .wr-shot .dp_legend .is-line { background: #24505d; }
@media (max-width: 719px) {
  body .wr-shot .dp_kpis { gap: .5rem; }
  body .wr-shot .dp_kpi-l { padding: .8rem .9rem 0; }
  body .wr-shot .dp_kpi-v { padding: .35rem .9rem 0; font-size: 24px; }
  body .wr-shot .dp_kpi-c { padding: .45rem .9rem .8rem; }
  body .wr-shot .dp_chart { padding: 1rem .9rem .5rem; }
}
@media (max-width: 479px) { body .wr-shot .dp_kpi-l, body .wr-shot .dp_kpi-c { font-size: 12px; } }