/* ==========================================================================
   Landingpages header (18.10.2026): Werbe-Header layout from /online-werbung
   (classes .wh, .wh_h1, .wh_lead from the webflow css, unchanged) with its own visual:
   a search ad on the left and the landing page it leads to on the right, in the macOS window on
   the yellow-pink patchwork field of Online-Werbung (.wr-shot, .wr-field, .wr-shot_win from
   css/werbung-reevo.css, unchanged). Ad and page belong to an invented business, marked "Beispielansicht".
   The numbered pins tie the three points "Eine Seite. Ein Ziel. Kein Umweg." to the page.
   The old header with the image row is kept as a snippet (sektionspeicher-landingpages.html, session scratchpad).
   Corners square everywhere; only the macOS window keeps its radius (rule in werbung-reevo.css).
   Selectors start with `body` because the page carries inline <style> copies.
   ========================================================================== */

/* no tag row on this page: the lead keeps the distance the tags would give */

/* named so the breakpoints below ask the shot's width */
body .hl-shot { container-name: hxshot; }

body .hl { display: grid; grid-template-columns: 432px minmax(0, 1fr); background: #fafaf8; color: #111; text-align: left; }
body .hl :where(p, ol, ul) { margin: 0; }

/* ---------- left: ad and the three points ---------- */
body .hl_side { padding: 56px 40px 48px 48px; border-right: 1px solid #e6e6e2; }
body .hl .dp_head { flex-wrap: wrap; margin-bottom: 36px; }
body .hl_ad { padding: 20px 20px 21.6px; border: 1px solid #e6e6e2; background: #fff; box-shadow: 0 1px 2px rgba(60,50,0,.05), 0 16px 32px -20px rgba(60,50,0,.3); font-family: Arial, Helvetica, sans-serif; }
body .hl_ad-tag { margin-bottom: 8px !important; font-size: 13px; line-height: 1.3; font-weight: 700; color: #202124; }
body .hl_ad-url { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.3; color: #4d5156; }
body .hl_ad-url i { display: block; flex: none; width: 17.6px; height: 17.6px; background: #1f4a57; }
body .hl_ad-h { margin: 7.2px 0 5.6px !important; font-size: 19px; line-height: 1.3; color: #1a0dab; }
body .hl_ad-d { font-size: 14px; line-height: 1.5; color: #4d5156; }

body .hl_steps { margin-top: 36px !important; padding: 0; list-style: none; counter-reset: none; }
body .hl_steps li { display: flex; gap: 14.4px; margin: 0; padding: 14.4px 0; border-top: 1px solid #ececea; font-size: 15px; line-height: 1.45; color: #555; }
body .hl_steps li:last-child { border-bottom: 1px solid #ececea; }
body .hl_steps strong { font-weight: 600; color: #111; }
body .hl_steps b, body .hl_pin { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 24px; height: 24px; background: #e36fb6; color: #fff; font-family: var(--_typography---font-styles--body); font-size: 12px; font-weight: 600; line-height: 1; font-style: normal; letter-spacing: 0; }

/* ---------- right: the landing page in a browser frame, cut off at the bottom ---------- */
body .hl_page { position: relative; min-width: 0; padding: 56px 0 0 48px; overflow: hidden; }
body .hl_url { display: flex; align-items: center; height: 41.6px; padding: 0 16px; border: 1px solid #e3e3de; border-bottom: 0; background: #f2f2ee; }
body .hl_url span { flex: 1; max-width: 416px; padding: 4.8px 12.8px; background: #fff; border: 1px solid #e3e3de; font-size: 13px; line-height: 1.3; color: #6b6b6b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body .hl_site { height: calc(100% - 41.6px); padding: 28px 36px 32px; border: 1px solid #e3e3de; border-right: 0; background: #fff; }
body .hl_nav { display: flex; align-items: center; gap: 12px; padding-bottom: 24px; border-bottom: 1px solid #ececea; }
body .hl_logo { font-family: var(--_typography---font-styles--heading); font-size: 20px; line-height: 1.2; }
body .hl_hero { display: grid; grid-template-columns: minmax(0, 1fr) 272px; gap: 40px; padding-top: 40px; align-items: start; }
body .hl_h { position: relative; font-family: var(--_typography---font-styles--heading); font-size: 38px; line-height: 1.1; letter-spacing: -0.015em; }
body .hl_h mark { background: linear-gradient(transparent 62%, #fff47d 62%); color: inherit; }
body .hl_h .hl_pin { position: relative; top: -.6em; margin-left: 6.4px; vertical-align: middle; }
body .hl_ln { display: block; height: 8px; margin-top: 11.2px; background: #e3e2dc; }
body .hl_h + .hl_ln { margin-top: 24px; }
body .hl_ticks { margin-top: 24px !important; padding: 0; list-style: none; }
body .hl_ticks li { position: relative; margin: 0 0 7.2px; padding-left: 24px; font-size: 15px; line-height: 1.4; }
body .hl_ticks li::before { content: ""; position: absolute; left: 0; top: .2em; width: 15.2px; height: 15.2px; background: #2f8a57 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center / 80% no-repeat; }

body .hl_form { padding: 20px; border: 1px solid #e6e6e2; background: #fafaf8; }
body .hl_form-h { margin-bottom: 16px !important; font-size: 15px; line-height: 1.35; font-weight: 600; }
body .hl_field { margin-bottom: 8.8px !important; padding: 9.6px 12px; border: 1px solid #dcdcd6; background: #fff; font-size: 13px; line-height: 1.3; color: #8a8a8a; }
body .hl_btn { position: relative; display: flex; justify-content: space-between; align-items: center; margin-top: 14.4px !important; padding: 12.8px 14.4px; background: #111; color: #fff; font-size: 14px; line-height: 1.2; font-weight: 500; }
body .hl_btn .hl_pin { position: absolute; right: -12px; top: -12px; background: #e36fb6; }
body .hl_band { display: flex; gap: 32px; margin-top: 44px; padding-top: 24px; border-top: 1px solid #ececea; }
body .hl_band .hl_ln { margin: 0; }
body .hl_pin { background: #e36fb6; }
body .hl_nav .hl_pin { margin-left: auto; }
body .hl_nav .hl_pin::before { content: "kein Menü"; position: absolute; transform: translateX(calc(-100% - 17.6px)); font-size: 13px; font-weight: 500; color: #b8b8b2; white-space: nowrap; }
body .hl_nav .hl_pin { position: relative; }

/* ---------- narrower window: points under the ad, page below ---------- */
@container hxshot (max-width: 1000px) {
  body .hl { grid-template-columns: 1fr; }
  body .hl_side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; padding: 40px 32px 32px; border-right: 0; border-bottom: 1px solid #e6e6e2; }
  body .hl .dp_head { grid-column: 1 / -1; margin-bottom: 24px; }
  body .hl_steps { margin-top: 0 !important; }
  body .hl_page { padding: 32px 0 0 32px; height: 480px; }
  body .hl_hero { grid-template-columns: minmax(0, 1fr) 240px; gap: 32px; }
  body .hl_h { font-size: 32px; }
}
@container hxshot (max-width: 640px) {
  body .hl_side { grid-template-columns: 1fr; padding: 32px 20px 24px; }
  body .hl_steps { margin-top: 24px !important; }
  body .hl_page { padding: 24px 0 0 20px; height: 544px; }
  body .hl_site { padding: 20px 20px 24px; }
  body .hl_hero { grid-template-columns: 1fr; gap: 24px; padding-top: 24px; }
  body .hl_h { font-size: 27px; }
  body .hl_form { max-width: 272px; }
  body .hl_band { display: none; }
}

/* ---------- motion: once when the shot comes into view (script after the shot); final state without JS ---------- */
@media (prefers-reduced-motion: no-preference) {
  body .hl_ad { transition: opacity .6s ease, transform .9s cubic-bezier(.165, .84, .44, 1); }
  body .hl_page > * { transition: opacity .7s ease .45s, transform 1s cubic-bezier(.165, .84, .44, 1) .45s; }
  body .hl_pin { transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
  body .hl_h .hl_pin { transition-delay: 1.3s; }
  body .hl_btn .hl_pin { transition-delay: 1.5s; }
  body .hl_nav .hl_pin { transition-delay: 1.7s; }
  body .hl_h mark { transition: background-size .8s cubic-bezier(.65, 0, .35, 1) 1s; background-repeat: no-repeat; background-size: 100% 100%; }
  body .is-pre .hl_ad { opacity: 0; transform: translateX(-24px); }
  body .is-pre .hl_page > * { opacity: 0; transform: translateY(32px); }
  body .is-pre .hl_pin { transform: scale(0); }
  body .is-pre .hl_h mark { background-size: 0 100%; }
}