/* mw-resell.css - page 4689 (Bewegte Landingpages), standalone cinematic page.
   Palette follows the hero VIDEO (standalone pages have no CF theme class, documented bug);
   scoped color values mirror the site's dark Core Framework tokens.
   NOTE: this install runs a 10px rem root (Bricks 62.5%), and the CF fluid text tokens
   resolve too small on a standalone page, so TYPE SIZES here are page-scoped px clamps.
   Colors, radius and spacing stay on CF variables. */
@font-face{font-family:Inter;src:url(../fonts/Inter-Var.ttf) format("truetype");font-weight:100 900;font-style:normal;font-display:swap}

body.page-id-4689{
  margin:0;background:#0e0b09;color:#faf4ea;
  font-family:Inter,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip;
  font-size:clamp(15px,14px + .3vw,18px);
  --text-title:#faf4ea;--text-body:rgba(250,244,234,.8);--bg-body:#0e0b09;
  --secondary:#c25a34;--light:#fff;--on-accent:#1a1206;--accent-ink:#e7ad5c;
  --band-1:#1a150d;--band-2:#211a11;--bg-surface:#1d1710;
  --border-primary:rgba(242,233,216,.11);--text-faint:#82765e;
  --glass-bg:rgba(255,255,255,.06);--glass-border:rgba(255,255,255,.16);
  --tint-strength:.14;--overlay-blur:12px;--grain-opacity:.05;--particle-opacity:.5;--vignette-strength:.45;
}

/* fixed wordmark - matches the homepage .mw-logo treatment (22px Inter 800 -.03em) */
.mw-brand{position:fixed;top:clamp(14px,2.5vw,26px);left:clamp(18px,4vw,40px);z-index:130}
.mw-brand a{font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-weight:800;font-size:22px;letter-spacing:-.03em;text-decoration:none}
.mw-brand .mw-a{color:var(--text-title)}
.mw-brand .mw-b{color:var(--accent-ink)}

/* ---- HERO (mechanic untouched; sizing polish only) ---- */
#mw-hero{height:460vh;position:relative;background:#0e0b09}
#mw-hero .ce-scroll__title,#mw-hero .ce-scroll__lead{text-shadow:0 2px 24px rgba(0,0,0,.55)}
#mw-hero .ce-scroll__title{font-size:clamp(36px,28px + 1.3vw,54px)}
#mw-hero .ce-scroll__lead{font-size:clamp(16px,14px + .5vw,20px)}
#mw-hero .ce-scroll__eyebrow{font-size:clamp(13px,11px + .3vw,16px);color:var(--primary);letter-spacing:.3em;margin-bottom:var(--space-s,1rem)}
.page-id-4689 .ce-scroll__cta{padding:var(--space-s,12px) var(--space-xl,32px);font-size:clamp(15px,13px + .35vw,18px);font-weight:700;letter-spacing:.01em}
.page-id-4689 .ce-scroll__cta--primary{color:var(--on-accent)}

/* hero center overlay: breathing room between the headline and the CTA (desktop + mobile).
   flex column stacks the children; align-items stays stretch so the heading wraps normally
   (text is centred via text-align), the button re-centres with align-self. Gap uses a CF
   spacing variable (fallback 28px) instead of a hardcoded value. */
#mw-hero .ce-scroll__overlay--center{display:flex;flex-direction:column;gap:var(--space-l,28px)}
#mw-hero .ce-scroll__overlay--center .ce-scroll__title{margin:0}
#mw-hero .ce-scroll__overlay--center .ce-scroll__cta{align-self:center}
/* controlled headline break: the two phrase spans stay inline (one line) on desktop */
#mw-hero .ce-scroll__title .mw-hl{display:inline}

/* ---- shared section shell ---- */
.mw-sec{position:relative;z-index:5;padding:clamp(90px,18vh,170px) clamp(22px,5vw,64px);text-align:center}
.mw-sec>*{max-width:1100px;margin-inline:auto}
.mw-sec .ce-scroll__eyebrow{display:flex;align-items:center;justify-content:center;gap:16px;font-size:13px;color:var(--primary);letter-spacing:.28em;margin:0 0 var(--space-l,28px)}
.mw-sec .ce-scroll__eyebrow::before,.mw-sec .ce-scroll__eyebrow::after{content:"";width:48px;height:1px;background:var(--border-primary)}
.mw-h2{font-size:clamp(34px,22px + 2.6vw,60px);line-height:1.1;font-weight:800;letter-spacing:-.02em;color:var(--text-title);margin:0 auto var(--space-l,28px);max-width:24ch}
.mw-acc{color:var(--primary)}
.mw-lede{font-size:clamp(17px,15px + .4vw,21px);line-height:1.7;color:var(--text-body);max-width:62ch;margin:0 auto}

/* ---- 01 Die Lage: oversized statement ---- */
#mw-lage{padding-bottom:clamp(110px,20vh,210px)}
#mw-lage .mw-h2{font-size:clamp(40px,24px + 4vw,82px);max-width:20ch}

/* ---- 02 Das Produkt: centered two-tone header + "Der Verband" staggered brick cards on band-1 ---- */
#mw-produkt{background:var(--band-1);border-block:1px solid var(--border-primary)}
#mw-produkt>*{width:100%;max-width:1100px}
#mw-produkt .mw-ph-l1,#mw-produkt .mw-ph-l2{font-size:clamp(40px,26px + 3.4vw,78px);line-height:1.06;margin:0;letter-spacing:-.025em}
#mw-produkt .mw-ph-l2{color:var(--primary)}
.mw-cards{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(18px,2.6vw,32px);margin-top:clamp(56px,9vh,90px);text-align:left}
.mw-card{position:relative;overflow:clip;background:var(--bg-surface);border:1px solid var(--border-primary);border-radius:var(--radius-l,12px);padding:clamp(28px,3.6vw,46px);box-shadow:0 34px 70px -34px var(--shadow-primary,rgba(0,0,0,.75));transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.mw-card:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--primary) 35%,var(--border-primary));box-shadow:0 46px 90px -36px var(--shadow-primary,rgba(0,0,0,.85))}
.mw-card::before{content:"";position:absolute;top:0;left:0;width:56px;height:3px;background:var(--primary)}
.mw-card:nth-child(1){grid-column:1/7}
.mw-card:nth-child(2){grid-column:4/10;margin-top:clamp(-56px,-4vh,-24px);z-index:2}
.mw-card:nth-child(3){grid-column:7/13;margin-top:clamp(-56px,-4vh,-24px);z-index:3}
.mw-card .mw-num{font-size:clamp(40px,26px + 1.8vw,62px);line-height:.9;font-weight:800;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--primary) 65%,transparent);margin:0 0 18px}
.mw-card-h{font-size:clamp(22px,18px + .8vw,30px);font-weight:800;letter-spacing:-.01em;color:var(--text-title);margin:0 0 10px}
.mw-card-p{font-size:clamp(15px,14px + .3vw,18px);line-height:1.7;color:var(--text-body);margin:0;max-width:48ch}

/* ---- 03 Der Ablauf: open steps with amber ticks ---- */
.mw-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,4vw,48px);margin-top:clamp(48px,8vh,80px);text-align:left}
.mw-step{position:relative;border-top:1px solid var(--border-primary);padding-top:26px}
.mw-step::before{content:"";position:absolute;top:-1px;left:0;width:48px;height:2px;background:var(--primary)}
.mw-step .mw-num{font-size:13px;-webkit-text-stroke:0;color:var(--primary);letter-spacing:.28em;font-weight:700;margin:0 0 16px}
.mw-step .mw-card-h{font-size:clamp(19px,16px + .6vw,24px);margin:0 0 .55em}

/* ---- 04 Der Beweis: band-2 + parallax still from the hero clip ---- */
#mw-beweis{background:var(--band-2);overflow:clip;border-block:1px solid var(--border-primary)}
.mw-beweis-bg{position:absolute;inset:-14% 0;max-width:none!important;margin:0!important;background:url(/wp-content/uploads/scroll-frames/bewegte-landingpages/desktop/frame-0120.webp) center/cover no-repeat;opacity:.26;z-index:0;pointer-events:none}
#mw-beweis::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--band-2) 0%,transparent 32%,transparent 62%,var(--band-2) 100%);z-index:1;pointer-events:none}
#mw-beweis>:not(.mw-beweis-bg){position:relative;z-index:2}

/* ---- 05 Kontakt: amber floor glow ---- */
#mw-kontakt{padding-bottom:clamp(110px,18vh,180px)}
#mw-kontakt::before{content:"";position:absolute;left:0;right:0;bottom:0;height:75%;background:radial-gradient(ellipse 55% 55% at 50% 100%,color-mix(in srgb,var(--primary) 14%,transparent),transparent 70%);pointer-events:none;z-index:0}
#mw-kontakt>*{position:relative;z-index:1}
#mw-kontakt .ce-scroll__cta{font-size:clamp(17px,14px + .5vw,20px);padding:var(--space-m,18px) var(--space-2xl,48px)}
.mw-cta-row{margin-top:clamp(32px,5vh,52px)}
.mw-foot{margin-top:clamp(64px,10vh,96px);font-size:13px;color:var(--text-faint)}
.mw-foot a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.mw-foot a:hover{color:var(--primary)}

@media (max-width:860px){
  .mw-cards{display:flex;flex-direction:column;gap:16px}
  .mw-card:nth-child(n){grid-column:auto;margin-top:0;z-index:auto}
  .mw-steps{grid-template-columns:1fr}
}

/* phones: widen the hero centre overlay so "Ihre Marke. Ihr Preis." fits on one line,
   then break the headline cleanly into 2 lines at the phrase boundary (not 3 ragged lines).
   Font size is unchanged. The #mw-hero prefix beats scroll-engine.css's 90vw/46ch cap. */
@media (max-width:700px){
  #mw-hero .ce-scroll__overlay--center{max-width:min(96vw,42rem)}
  #mw-hero .ce-scroll__title .mw-hl{display:block}
}