/* ==========================================================================
   Webtexte 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 home-page text draft with tracked changes and margin notes, in the macOS window on the
   pink patchwork field (.wr-shot, .wr-field.is-pink, .wr-shot_win from css/werbung-reevo.css,
   unchanged). The draft is an invented example business, marked "Beispielansicht".
   The old header with the image row is kept as a snippet (sektionspeicher-webtexte.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 .ht-shot { container-name: hxshot; }

/* ---------- editor ---------- */
body .ht { padding: 56px 48px 48px; background: #fafaf8; color: #111; text-align: left; }
body .ht :where(p) { margin: 0; }
body .ht .dp_head { margin-bottom: 40px; }
body .ht_doc { display: grid; row-gap: 0; }
body .ht_row { display: grid; grid-template-columns: minmax(0, 1fr) 320px; column-gap: 24px; align-items: start; }
body .ht_block { padding: 32px 48px; border: 1px solid #e6e6e2; border-top: 0; background: #fff; }
body .ht_row:first-child .ht_block { border-top: 1px solid #e6e6e2; padding-top: 48px; }
body .ht_row:last-child .ht_block { padding-bottom: 48px; }
body .ht_label { margin-bottom: 9.6px !important; font-size: 13px; line-height: 1.4; font-weight: 500; color: #8a8a8a; }

body .ht_h { max-width: 640px; font-family: var(--_typography---font-styles--heading); font-size: 34px; line-height: 1.15; letter-spacing: -0.01em; }
body .ht_p { max-width: 640px; font-size: 17px; line-height: 1.6; }
body .ht_btn { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 15px; line-height: 1.4; font-weight: 500; }
body .ht_btn del, body .ht_btn ins { padding: 8.8px 14.4px; border: 1px solid #d9d9d9; }
body .ht .ht_btn ins { border-color: #111; background: #111; color: #fff; padding: 8.8px 14.4px; }

/* tracked changes: struck old text, new text on a pink marker; the strike is a background line so it can draw itself */
body .ht del { text-decoration: none; color: #9a9a9a; background: linear-gradient(#e0483e, #e0483e) 0 55% / 100% 1.5px no-repeat; }
body .ht ins { text-decoration: none; background: #fbe3f1; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
body .ht_h del, body .ht_h ins, body .ht_p del, body .ht_p ins { padding: 0 .1em; }
body .ht_h del, body .ht_h ins { display: inline; }
/* 18.10.2026, Christian: "g ist irgendwie gecapped" — at line-height 1.15 the pink box of each line is taller than the line and
   covered the descenders of the line above. The pink is now exactly one line high, so lines meet without overlapping. */
body .ht_h ins { background: linear-gradient(#fbe3f1, #fbe3f1) center / 100% 1.15em no-repeat; }

/* margin notes */
body .ht_note { position: relative; margin-top: 24px; padding: 14.4px 16px 16px; border: 1px solid #e6e6e2; border-left: 3px solid #e36fb6; background: #fff; box-shadow: 0 1px 2px rgba(60, 20, 40, .05), 0 14px 28px -18px rgba(60, 20, 40, .3); }
body .ht_note::before { content: ""; position: absolute; top: 22.4px; right: 100%; width: 24px; border-top: 1px dashed #e36fb6; }
body .ht_note-who { display: flex; align-items: center; gap: 8.8px; margin-bottom: 7.2px !important; font-size: 15px; line-height: 1.3; font-weight: 600; }
body .ht_note-who span { display: inline-flex; align-items: center; justify-content: center; width: 25.6px; height: 25.6px; background: #111; color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .02em; }
body .ht_note-txt { font-size: 15px; line-height: 1.45; color: #555; }

/* ---------- narrower window ---------- */
@container hxshot (max-width: 1000px) {
  body .ht { padding: 40px 32px 32px; }
  body .ht_row { grid-template-columns: minmax(0, 1fr) 240px; column-gap: 20px; }
  body .ht_block { padding: 28px 32px; }
  body .ht_row:first-child .ht_block { padding-top: 36px; }
  body .ht_row:last-child .ht_block { padding-bottom: 36px; }
  body .ht_h { font-size: 28px; }
  body .ht_note::before { width: 20px; }
}
/* tablet and phone: each note sits under its block, indented, still tied to it by the pink edge */
@container hxshot (max-width: 820px) {
  body .ht { padding: 32px 16px 24px; }
  body .ht .dp_head { margin-bottom: 24px; }
  body .ht_doc { border: 1px solid #e6e6e2; background: #fff; }
  body .ht_row { grid-template-columns: 1fr; }
  body .ht_block, body .ht_row:first-child .ht_block { padding: 24px 20px 0; border: 0; }
  body .ht_row:last-child .ht_block { padding-bottom: 0; }
  body .ht_row:last-child { padding-bottom: 24px; }
  body .ht_note { margin: 16px 20px 0 36px; box-shadow: none; }
  body .ht_note::before { display: none; }
  body .ht_h { font-size: 24px; }
  body .ht_p { font-size: 16px; }
}

/* ---------- motion: once when the shot comes into view (script after the shot); final state without JS ---------- */
@media (prefers-reduced-motion: no-preference) {
  body .ht del { transition: background-size .6s cubic-bezier(.65, 0, .35, 1), color .4s ease; }
  body .ht ins { transition: opacity .6s ease, background-color .6s ease; }
  body .ht_note { transition: opacity .6s ease, transform .8s cubic-bezier(.165, .84, .44, 1); }
  body .ht_row:nth-child(1) del { transition-delay: .2s; }
  body .ht_row:nth-child(1) ins { transition-delay: .7s; }
  body .ht_row:nth-child(1) .ht_note { transition-delay: 1s; }
  body .ht_row:nth-child(2) del { transition-delay: 1.1s; }
  body .ht_row:nth-child(2) ins { transition-delay: 1.6s; }
  body .ht_row:nth-child(2) .ht_note { transition-delay: 1.9s; }
  body .ht_row:nth-child(3) del { transition-delay: 2s; }
  body .ht_row:nth-child(3) ins { transition-delay: 2.5s; }
  body .ht_row:nth-child(3) .ht_note { transition-delay: 2.8s; }
  body .is-pre .ht del { background-size: 0 1.5px; color: #111; }
  body .is-pre .ht_btn del { color: #111; }
  body .is-pre .ht ins { opacity: 0; }
  body .is-pre .ht_note { opacity: 0; transform: translateX(16px); }
}
@container hxshot (max-width: 820px) {
  @media (prefers-reduced-motion: no-preference) { body .is-pre .ht_note { transform: translateY(12px); } }
}

/* Vorher/Nachher section (18.10.2026, Christian: "die texte aus dem mockup will ich so wie du oben im header beim visual [...]
   layout ist dann headline und paragraph und dann full container width das bild darunter"): the phone slider became a second
   text shot with the Fritten Mafia texts, under the text at the full container width. */
body .vn--shot .vn_grid { grid-template-columns: 1fr; }
body .vn--shot .ht-shot { margin-top: 4rem; }
@media (max-width: 719px) { body .vn--shot .ht-shot { margin-top: 2.5rem; } }

/* 21.10.2026, Christian: "lass hier die erklärungen weg, also auch auf desktop, oben im visual das gleiche" - no margin notes in
   either text draft (header and the Fritten Mafia shot), the draft runs over the full width of the window */
body .ht_note { display: none; }
body .ht_row { grid-template-columns: minmax(0, 1fr); }