/* ==========================================================================
   Website Redesign 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:
   one invented website before and after, split by a draggable line, in the macOS window on an
   orange patchwork field (.wr-shot, .wr-field, .wr-shot_win from css/werbung-reevo.css, unchanged;
   the orange variant is defined here, in the brand orange of the headline accents and the pale
   tones of the "Zielgruppe" frame). Marked "Beispielansicht".
   The old header with the image row is kept as a snippet (sektionspeicher-website-redesign.html, session scratchpad).
   Corners square everywhere, also in the dated "before" site; only the macOS window keeps its radius.
   Sizes in px: this site's rem is fluid, the mock should scale only through its own breakpoints.
   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 */

/* orange patchwork, only on this page */
body .wr-field.is-orange { --a: #fde8dc; --b: #f9c6aa; --c: #fdeee5; --d: #f58a4b; }

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

/* address field in the window bar */
body .hr-shot .hr_addr { flex: 0 1 340px; margin: 0 auto; padding: 5px 16px; background: #e6e6e0; font-size: 12px; line-height: 1.3; color: #6b6b6b; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transform: translateX(-26px); }

/* ---------- before/after frame ---------- */
body .hr { position: relative; --x: 45%; display: grid; overflow: hidden; text-align: left; }
body .hr :where(p) { margin: 0; }
body .hr_layer { grid-area: 1 / 1; min-width: 0; }
body .hr_layer.is-new { clip-path: inset(0 0 0 var(--x)); }
body .hr_range { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: none; }
body .hr_handle { position: absolute; z-index: 2; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; background: #111; pointer-events: none; }
body .hr_handle span { position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; background: #111 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3C/svg%3E") center / 22px no-repeat; }
body .hr_range:focus-visible + .hr_handle span { outline: 2px solid #111; outline-offset: 3px; }
body .hr_tag { position: absolute; z-index: 2; bottom: calc(2cqw + 16px); padding: 5px 10px; background: #111; color: #fff; font-size: 13px; line-height: 1.3; font-weight: 500; pointer-events: none; }
body .hr_tag.is-old { left: 16px; }
body .hr_tag.is-new { right: calc(2cqw + 16px); display: flex; align-items: center; gap: 8px; }
body .hr_tag span { padding: 1px 6px; background: #fff; color: #6b6b6b; font-weight: 400; font-size: 12px; }

/* ---------- before: a dated site ---------- */
body .hr_layer.is-old { padding: 28px 48px 64px; background: #e9e7df; color: #222; font-family: "Times New Roman", Times, serif; }
body .hr_o-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding: 20px 22px; background: linear-gradient(#5b86c5, #1d3f7a); }
body .hr_o-logo { font-size: 28px; line-height: 1.1; font-weight: 700; font-style: italic; color: #fff; text-shadow: 2px 2px 0 #0b1f3f; }
body .hr_o-tel { font-family: Verdana, Geneva, sans-serif; font-size: 11px; color: #dbe6f7; white-space: nowrap; }
body .hr_o-nav { padding: 7px 10px; border: 1px solid #8aa3c8; border-top: 0; background: #c9d6ea; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 1.6; color: #555; }
body .hr_o-nav u, body .hr_o-p u, body .hr_o-box u { color: #1a0dab; }
body .hr_o-body { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 16px; margin-top: 10px; padding: 16px; border: 1px solid #bbb; background: #fff; }
body .hr_o-slider { position: relative; display: flex; justify-content: space-between; align-items: center; height: 190px; padding: 0 12px; background: linear-gradient(135deg, #8e9aa8, #c9cfd6 60%, #a9b2bd); font-family: Verdana, Geneva, sans-serif; font-size: 40px; color: #fff; }
body .hr_o-slider i { position: absolute; left: 50%; bottom: 10px; width: 42px; height: 6px; margin-left: -21px; background: repeating-linear-gradient(90deg, #fff 0 6px, transparent 6px 18px); }
body .hr_o-h { margin: 16px 0 8px !important; font-size: 24px; line-height: 1.2; font-weight: 700; color: #1d3f7a; }
body .hr_o-p { font-size: 15px; line-height: 1.5; color: #333; text-align: justify; }
body .hr_o-aside { border: 1px solid #c8b968; background: #fffbe0; padding: 10px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 1.45; }
body .hr_o-box-h { margin-bottom: 8px !important; font-weight: 700; color: #c00; text-align: center; }
body .hr_o-box { padding: 6px 0; border-top: 1px dotted #c8b968; }
body .hr_o-foot { margin-top: 10px !important; font-family: Verdana, Geneva, sans-serif; font-size: 11px; color: #777; text-align: center; }

/* ---------- after: the same business, calm ---------- */
body .hr_layer.is-new { padding: 32px 56px 72px; background: #fff; color: #111; }
body .hr_n-nav { display: flex; align-items: center; gap: 32px; }
body .hr_n-logo { font-family: var(--_typography---font-styles--heading); font-size: 24px; line-height: 1.1; }
body .hr_n-links { display: flex; gap: 28px; margin-left: auto !important; font-size: 15px; color: #555; }
body .hr_n-btn { display: inline-flex; align-items: center; gap: 12px; padding: 11px 16px; background: #111; color: #fff; font-size: 13px; line-height: 1.1; font-weight: 500; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
body .hr_n-hero { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; padding-top: 64px; }
body .hr_n-eyebrow { margin-bottom: 18px !important; font-size: 15px; line-height: 1.4; font-weight: 500; color: #2a2a2a; }
body .hr_n-h { font-family: var(--_typography---font-styles--heading); font-size: 50px; line-height: 1.04; letter-spacing: -0.02em; }
body .hr_n-p { max-width: 30em; margin-top: 22px !important; font-size: 17px; line-height: 1.55; color: #444; }
body .hr_n-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 30px !important; }
body .hr_n-btn.is-big { padding: 16px 20px; font-size: 14px; gap: 28px; }
body .hr_n-link { font-size: 15px; text-decoration: underline; text-underline-offset: 4px; }
body .hr_n-img { order: -1; position: relative; aspect-ratio: 4 / 3.4; background: #fde8dc; overflow: hidden; }
body .hr_n-img i { position: absolute; right: 0; bottom: 0; width: 78%; height: 78%; background: repeating-linear-gradient(0deg, #f26b1d 0 10px, #f58a4b 10px 12px); clip-path: polygon(0 100%, 0 80%, 20% 80%, 20% 60%, 40% 60%, 40% 40%, 60% 40%, 60% 20%, 80% 20%, 80% 0, 100% 0, 100% 100%); }

/* ---------- narrower window ---------- */
@container hxshot (max-width: 1000px) {
  body .hr_layer.is-old { padding: 22px 28px 64px; }
  body .hr_o-body { grid-template-columns: minmax(0, 1fr) 170px; }
  body .hr_o-slider { height: 150px; }
  body .hr_layer.is-new { padding: 26px 32px 72px; }
  body .hr_n-links { display: none; }
  body .hr_n-btn { margin-left: auto; }
  body .hr_n-hero { gap: 32px; padding-top: 48px; }
  body .hr_n-h { font-size: 38px; }
}
@container hxshot (max-width: 640px) {
  body .hr-shot .hr_addr { flex-basis: 200px; transform: translateX(-20px); font-size: 11px; }
  body .hr_layer.is-old { padding: 14px 14px 60px; }
  body .hr_o-top { padding: 12px 12px; }
  body .hr_o-logo { font-size: 18px; }
  body .hr_o-tel { display: none; }
  body .hr_o-nav { font-size: 10.5px; }
  body .hr_o-body { grid-template-columns: 1fr; padding: 10px; }
  body .hr_o-aside { display: none; }
  body .hr_o-slider { height: 110px; font-size: 28px; }
  body .hr_o-h { font-size: 18px; }
  body .hr_o-p { font-size: 13px; }
  body .hr { --x: 30%; }
  /* on a phone the split rests at 30 %, so the calm site keeps its content in the right part */
  body .hr_layer.is-new { padding: 18px 16px 64px calc(30% + 16px); }
  body .hr_n-logo { font-size: 19px; }
  body .hr_n-nav .hr_n-btn { padding: 9px 11px; font-size: 11px; }
  body .hr_n-hero { grid-template-columns: 1fr; gap: 22px; padding-top: 30px; }
  body .hr_n-eyebrow { margin-bottom: 12px !important; font-size: 13px; }
  body .hr_n-h { font-size: 24px; }
  body .hr_n-p { margin-top: 14px !important; font-size: 15px; }
  body .hr_n-cta { margin-top: 20px !important; }
  body .hr_n-btn.is-big { padding: 13px 16px; font-size: 12px; }
  body .hr_n-img { order: 0; aspect-ratio: 16 / 9; }
  body .hr_handle span { width: 34px; height: 34px; margin: -17px 0 0 -17px; background-size: 18px; }
  body .hr_tag { bottom: 14px; font-size: 12px; }
  body .hr_tag.is-old { left: 12px; } body .hr_tag.is-new { right: 12px; }
}

/* ---------- motion: the split slides in from the right once (script after the shot); 45 % without JS ---------- */
@media (prefers-reduced-motion: no-preference) {
  body .is-pre .hr { --x: 88%; }
}
@container hxshot (max-width: 640px) {
  @media (prefers-reduced-motion: no-preference) { body .is-pre .hr { --x: 92%; } }
}

/* v2 (19.10.2026, Christian: "das vorher ding ist zu übertrieben. mach das nachher ding als vorher ding, und das nachher ding mach da
   das titelbild von sleep atelier rein"). The calm Müller site is now the before; the after is a capture of sleepatelier.ch.
   The dated-site styles above stay for the snippet. */
body .hr_layer.is-old.is-calm { padding: 32px 56px 72px; background: #fff; color: #111; font-family: inherit; }
body .hr_layer.is-new.is-shot { position: relative; padding: 0; background: #fbfaf8; }
body .hr_layer.is-shot img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 0; }
@container hxshot (max-width: 1000px) { body .hr_layer.is-old.is-calm { padding: 26px 32px 72px; } }
@container hxshot (max-width: 640px) { body .hr_layer.is-old.is-calm { padding: 18px 16px 64px; } body .hr_layer.is-new.is-shot { padding: 0; } }