/* ==========================================================================
   Broschüren & Flyer 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 print preview in the macOS window on the gold patchwork field (.wr-shot, .wr-field.is-gold,
   .wr-shot_win from css/werbung-reevo.css, unchanged). All values in the preview are an
   illustration, marked "Beispielansicht". The old header with the image row is kept as a
   snippet (sektionspeicher-broschueren.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, not the stage's */
body .hb-shot { container-name: hxshot; }

/* ---------- layout inside the window ---------- */
body .hb { display: grid; grid-template-columns: minmax(0, 1fr) 288px; background: #fafaf8; color: #111; text-align: left; }
body .hb :where(p, dl, dd, ul) { margin: 0; }
body .hb_main { min-width: 0; padding: 56px 48px 48px; }
body .hb .dp_head { margin-bottom: 36px; }

/* pasteboard with the pages; page sizes in cqw of the stage so the spread scales like a picture */
body .hb_stage { display: flex; align-items: flex-end; justify-content: center; gap: 3.5%; padding: 56px 3cqw; background: #ecebe6; container-type: inline-size; }
body .hb_spread { display: flex; flex: none; box-shadow: 0 1px 2px rgba(60,50,0,.08), 0 18px 36px -20px rgba(60,50,0,.35); outline: 1px dashed rgba(224,72,62,.55); outline-offset: .9cqw; }
body .hb_sheet { position: relative; flex: none; width: 25cqw; aspect-ratio: 210 / 297; padding: 2.4cqw 2.2cqw; background: #fff; overflow: hidden; }
body .hb_sheet.is-cover, body .hb_sheet.is-flyer { box-shadow: 0 1px 2px rgba(60,50,0,.08), 0 18px 36px -20px rgba(60,50,0,.35); outline: 1px dashed rgba(224,72,62,.55); outline-offset: .9cqw; }
body .hb_sheet.is-left { border-right: 1px solid #ecebe6; }

/* text lines and placeholders */
body .hb_ln { display: block; height: .55cqw; margin-top: .75cqw; background: #d9d8d2; }
body .hb_ln.is-light { background: rgba(255,255,255,.55); }
body .hb_ln.is-h { height: .8cqw; margin-top: 0; background: #111; }
body .hb_page-t, body .hb_cover-t, body .hb_flyer-t { font-family: var(--_typography---font-styles--heading); font-weight: 400; letter-spacing: -0.01em; }
body .hb_page-t { margin-bottom: 1.4cqw !important; font-size: 2.15cqw; line-height: 1.1; color: #111; }
body .hb_img { margin: 1.6cqw 0 .6cqw; }
body .hb_img.is-a { height: 9cqw; background: repeating-linear-gradient(90deg, #fa7b34 0 .35cqw, #ffdd4e .35cqw .8cqw); }
body .hb_img.is-b { height: 14cqw; margin: -2.4cqw -2.2cqw 1.8cqw; background: repeating-conic-gradient(#ffdd4e 0 25%, #fff47d 0 50%) 0 0 / 1.6cqw 1.6cqw; }
body .hb_cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4cqw; }
body .hb_folio { position: absolute; right: 2cqw; bottom: 1.4cqw; font-size: .9cqw; color: #8a8a8a; }

/* cover */
body .hb_sheet.is-cover { display: flex; flex-direction: column; background: #1f4a57; }
body .hb_cover-img { position: relative; flex: none; height: 58%; margin: -2.4cqw -2.2cqw 2cqw; background: #fa7b34; overflow: hidden; }
body .hb_cover-img i { position: absolute; left: 0; right: 0; bottom: 0; height: 62%; background: #ffdd4e; clip-path: polygon(0 100%, 0 55%, 30% 10%, 52% 48%, 70% 25%, 100% 70%, 100% 100%); }
body .hb_cover-t { font-size: 2.6cqw; line-height: 1.08; color: #fff; margin-bottom: .6cqw !important; }

/* flyer DIN lang */
body .hb_sheet.is-flyer { width: 12cqw; aspect-ratio: 99 / 210; padding: 1.4cqw 1.2cqw; }
body .hb_flyer-band { height: 30%; margin: -1.4cqw -1.2cqw 1.4cqw; background: repeating-linear-gradient(0deg, #ffdd4e 0 .35cqw, #fff47d .35cqw .8cqw); }
body .hb_flyer-t { font-size: 1.5cqw; line-height: 1.1; color: #111; }
body .hb_sheet.is-flyer .hb_ln { height: .45cqw; margin-top: .6cqw; }
body .hb_flyer-btn { position: absolute; left: 1.2cqw; bottom: 1.6cqw; width: 6cqw; height: 1.6cqw; background: #111; }

/* side panel */
body .hb_side { padding: 56px 28px 48px; border-left: 1px solid #e6e6e2; background: #fff; }
body .hb_h { margin: 0 0 14.4px !important; font-size: 15px; line-height: 1.4; font-weight: 600; }
body .hb_specs { margin-bottom: 36px !important; border-top: 1px solid #ececea; }
body .hb_specs div { display: flex; justify-content: space-between; gap: 16px; padding: 8.8px 0; border-bottom: 1px solid #ececea; font-size: 15px; line-height: 1.4; }
body .hb_specs dt { color: #6b6b6b; }
body .hb_specs dd { font-weight: 500; text-align: right; }
body .hb_checks { padding: 0; list-style: none; }
body .hb_checks li { position: relative; margin: 0 0 9.6px; padding: 0 0 0 28px; font-size: 15px; line-height: 1.4; }
body .hb_checks li::before { content: ""; position: absolute; left: 0; top: .1em; width: 17.6px; height: 17.6px; 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 .hb_status { margin-top: 28px !important; padding: 11.2px 14.4px; border: 1px solid #cfe6d8; background: #eef7f1; font-size: 15px; line-height: 1.4; font-weight: 500; color: #23704a; }

/* ---------- narrower window: side panel moves under the stage ---------- */
@container hxshot (max-width: 1000px) {
  body .hb { grid-template-columns: 1fr; }
  body .hb_main { padding: 40px 32px 32px; }
  body .hb_side { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; padding: 28px 32px 40px; border-left: 0; border-top: 1px solid #e6e6e2; }
  body .hb_side .hb_h:nth-of-type(1) { grid-column: 1; grid-row: 1; }
  body .hb_specs { grid-column: 1; grid-row: 2; margin-bottom: 0 !important; }
  body .hb_side .hb_h:nth-of-type(2) { grid-column: 2; grid-row: 1; }
  body .hb_checks { grid-column: 2; grid-row: 2; }
  body .hb_status { grid-column: 1 / -1; grid-row: 3; }
}
/* ---------- phone-wide window: spread first, cover and flyer under it, all larger ---------- */
@container hxshot (max-width: 640px) {
  body .hb_main { padding: 32px 20px 24px; }
  body .hb .dp_head { margin-bottom: 24px; }
  body .hb_side { padding: 28px 20px 40px; }
  body .hb_stage { flex-wrap: wrap; gap: 6cqw 7%; padding: 7cqw 4cqw; }
  body .hb_spread { order: -1; }
  body .hb_sheet { width: 40cqw; padding: 4cqw 3.6cqw; }
  body .hb_sheet.is-flyer { width: 19cqw; padding: 2.6cqw 2.2cqw; }
  body .hb_ln { height: 1cqw; margin-top: 1.35cqw; }
  body .hb_ln.is-h { height: 1.4cqw; }
  body .hb_page-t { font-size: 3.4cqw; margin-bottom: 2.4cqw !important; }
  body .hb_cover-t { font-size: 4.1cqw; }
  body .hb_flyer-t { font-size: 2.4cqw; }
  body .hb_img.is-a { height: 16cqw; margin: 2.8cqw 0 1cqw; }
  body .hb_img.is-b { height: 22cqw; margin: -4cqw -3.6cqw 3cqw; background-size: 2.8cqw 2.8cqw; }
  body .hb_cover-img { margin: -4cqw -3.6cqw 3.6cqw; }
  body .hb_flyer-band { margin: -2.6cqw -2.2cqw 2.4cqw; }
  body .hb_sheet.is-flyer .hb_ln { height: .8cqw; margin-top: 1.1cqw; }
  body .hb_flyer-btn { left: 2.2cqw; bottom: 2.8cqw; width: 11cqw; height: 2.8cqw; }
  body .hb_folio { font-size: 1.8cqw; }
  body .hb_spread, body .hb_sheet.is-cover, body .hb_sheet.is-flyer { outline-offset: 1.4cqw; }
}
@container hxshot (max-width: 560px) {
  body .hb_side { grid-template-columns: 1fr; }
  body .hb_side .hb_h:nth-of-type(2) { grid-column: 1; grid-row: 3; margin-top: 28px !important; }
  body .hb_checks { grid-column: 1; grid-row: 4; }
  body .hb_status { grid-row: 5; margin-top: 20px !important; }
}

/* ---------- motion: once when the shot comes into view (script after the shot); final state without JS ---------- */
@media (prefers-reduced-motion: no-preference) {
  body .hb_sheet.is-cover, body .hb_spread, body .hb_sheet.is-flyer { transition: opacity .7s ease, transform 1s cubic-bezier(.165, .84, .44, 1); }
  body .hb_spread { transition-delay: .15s; }
  body .hb_sheet.is-flyer { transition-delay: .3s; }
  body .hb_checks li::before { transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
  body .hb_checks li:nth-child(1)::before { transition-delay: .7s; }
  body .hb_checks li:nth-child(2)::before { transition-delay: .9s; }
  body .hb_checks li:nth-child(3)::before { transition-delay: 1.1s; }
  body .hb_checks li:nth-child(4)::before { transition-delay: 1.3s; }
  body .hb_status { transition: opacity .5s ease 1.6s; }
  body .is-pre .hb_sheet.is-cover, body .is-pre .hb_spread, body .is-pre .hb_sheet.is-flyer { opacity: 0; transform: translateY(24px); }
  body .is-pre .hb_checks li::before { transform: scale(0); }
  body .is-pre .hb_status { opacity: 0; }
}