/* Process section media, PHONE ONLY (task P3, 2026-09-30). Loaded after assets/phone.css.
   Card 2 = assets/process/redesign.js (.rd-v2 stage, 3 directions A/B/C).
   Card 3 = assets/process/launch.js (.ln-v2 stage, Dachdecker launch + analytics).
   Every rule is scoped under .rd-v2 / .ln-v2 so it outranks the older .rd-* / .ln-* rules in phone.css
   without editing that file. All px are 720x450 stage px (the stage is scaled to the card, ~0.447 at 390). */

/* Dachdecker template fonts (self-hosted in the showcase, same files the real template uses) */
@font-face{font-family:'Changa One';font-style:normal;font-weight:400;font-display:swap;src:url('../../mobile/showcase/dachdecker/assets/fonts/changa-one-400-normal-latin.woff2') format('woff2')}
@font-face{font-family:'Changa One';font-style:italic;font-weight:400;font-display:swap;src:url('../../mobile/showcase/dachdecker/assets/fonts/changa-one-400-italic-latin.woff2') format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;src:url('../../mobile/showcase/dachdecker/assets/fonts/lato-700-normal-latin.woff2') format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:900;font-display:swap;src:url('../../mobile/showcase/dachdecker/assets/fonts/lato-900-normal-latin.woff2') format('woff2')}

@media (max-width:940px){
  /* ── card 2: three design directions ── */
  .rd-stage.rd-v2 .rd-nav{position:absolute}
  .rd-stage.rd-v2 .rd-logo.rd-c{color:#10231E;font-family:Inter,system-ui,sans-serif;font-weight:800;font-size:22px;letter-spacing:-.04em;top:8px;opacity:0;visibility:hidden}
  .rd-stage.rd-v2 .rd-title > span{white-space:nowrap}
  .rd-stage.rd-v2 .rd-title .rd-c{position:absolute;inset:0;font-family:Inter,system-ui,sans-serif;font-weight:800;letter-spacing:-.045em;line-height:.98;opacity:0;visibility:hidden}
  .rd-stage.rd-v2 .rd-sub{font-style:normal;font-size:21px;line-height:1.3;height:56px}
  .rd-stage.rd-v2 .rd-sub > span{position:absolute;left:0;top:0;white-space:nowrap}
  .rd-stage.rd-v2 .rd-sub .rd-a{font-style:italic}
  .rd-stage.rd-v2 .rd-sub .rd-c{font-family:Inter,system-ui,sans-serif;font-size:20px;font-weight:500;opacity:0;visibility:hidden}
  .rd-stage.rd-v2 .rd-btn1 .rd-c{font-family:Inter,system-ui,sans-serif;font-size:15px;font-weight:700;letter-spacing:-.01em;opacity:0;visibility:hidden}
  .rd-stage.rd-v2 .rd-ph2{border:0}
  .rd-stage.rd-v2 .rd-note{z-index:5}
  .rd-stage.rd-v2 .rd-cursor{z-index:6}

  /* ── card 3: launch + analytics ── */
  .ln-stage.ln-v2{font-family:Lato,Inter,system-ui,sans-serif;background:#F4F5F7}
  .ln-v2 .ln-site{inset:auto;left:0;top:0;width:720px;height:450px;background:#162942;transform-origin:0 0;overflow:hidden}
  .ln-v2 .ln-dnav{left:0;top:0;width:720px;height:62px;background:#fff;display:flex;align-items:center;gap:26px;padding:0 40px;box-sizing:border-box}
  .ln-v2 .ln-dnav span{font-family:'Changa One',Inter,sans-serif;font-size:24px;color:#162942;letter-spacing:-.01em;margin-right:auto;white-space:nowrap}
  .ln-v2 .ln-dnav i{display:block;width:52px;height:7px;border-radius:4px;background:#D6DAE1}
  .ln-v2 .ln-dnav b{font-size:16px;font-weight:700;color:#162942;display:flex;align-items:center;gap:8px;white-space:nowrap}
  .ln-v2 .ln-dnav b svg{width:18px;height:18px;fill:none;stroke:#E8A13A;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .ln-v2 .ln-dh{left:40px;top:112px;width:380px;font-family:'Changa One',Inter,sans-serif;font-size:46px;line-height:1.02;color:#fff;letter-spacing:-.01em}
  .ln-v2 .ln-dh em{display:block;margin-top:8px;font-style:italic;font-size:27px;color:#fff}
  .ln-v2 .ln-dsub{left:40px;top:258px;width:330px;height:10px;border-radius:5px;background:rgba(255,255,255,.28);box-shadow:0 20px 0 rgba(255,255,255,.28)}
  .ln-v2 .ln-dbtn{left:40px;top:318px;height:48px;padding:0 22px;border-radius:10px;background:#E8A13A;color:#162942;font-size:16px;font-weight:700;display:flex;align-items:center;gap:10px;white-space:nowrap}
  .ln-v2 .ln-dbtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
  .ln-v2 .ln-dbtn2{left:282px;top:318px;width:128px;height:48px;border-radius:10px;border:1.5px solid rgba(255,255,255,.4);box-sizing:border-box;background:rgba(255,255,255,.06)}
  .ln-v2 .ln-dph1,.ln-v2 .ln-dph2{border-radius:18px;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.55)}
  .ln-v2 .ln-dph1 img,.ln-v2 .ln-dph2 img{width:100%;height:100%;object-fit:cover;display:block}
  .ln-v2 .ln-dph2{left:470px;top:104px;width:230px;height:170px;transform:rotate(-6deg)}
  .ln-v2 .ln-dph1{left:420px;top:176px;width:230px;height:210px;transform:rotate(6deg)}
  .ln-v2 .ln-veil{background:rgba(244,245,247,.42)}
  .ln-v2 .ln-chip{background:#162942}
  .ln-v2 .ln-track{background:#E6E9EE}
  .ln-v2 .ln-fill{background:#162942}

  /* analytics view (after launch) */
  .ln-v2 .ln-dash{inset:0}
  .ln-v2 .ln-dash > *{position:absolute}
  .ln-v2 .ln-dhead{left:196px;top:30px;right:28px;height:84px;display:flex;align-items:center;gap:14px}
  .ln-v2 .ln-dhead strong{font-size:27px;font-weight:900;color:#162942;letter-spacing:-.01em;white-space:nowrap}
  .ln-v2 .ln-dhead .ln-pulse{width:14px;height:14px;border-radius:50%;background:#22A45D;box-shadow:0 0 0 0 rgba(34,164,93,.5);flex:none;animation:lnPulse 1.6s ease-out infinite}
  .ln-v2.ln-still .ln-pulse{animation:none}
  .ln-v2 .ln-demo{margin-left:auto;font-size:21px;font-weight:700;color:#6B7483;background:#E6E9EE;border-radius:30px;padding:7px 16px;white-space:nowrap}
  .ln-v2 .ln-tile{background:#fff;border-radius:22px;box-shadow:0 2px 0 rgba(22,41,66,.04),0 18px 36px -24px rgba(22,41,66,.35);box-sizing:border-box;padding:20px 24px;color:#162942;overflow:hidden}
  .ln-v2 .ln-tile em{display:block;font-style:normal;font-size:24px;font-weight:700;color:#6B7483;white-space:nowrap}
  .ln-v2 .ln-tile b{display:block;font-size:64px;font-weight:900;line-height:1;letter-spacing:-.02em;margin-top:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
  .ln-v2 .ln-tile b small{font-size:34px;font-weight:700;color:#6B7483;margin-left:6px;letter-spacing:0}
  .ln-v2 .ln-t1,.ln-v2 .ln-t4{left:28px;top:128px;width:324px;height:146px}
  .ln-v2 .ln-t2,.ln-v2 .ln-t5{left:368px;top:128px;width:324px;height:146px}
  .ln-v2 .ln-t3,.ln-v2 .ln-t6{left:28px;top:288px;width:664px;height:146px}
  .ln-v2 .ln-t1 em{display:flex;align-items:center;gap:10px}
  .ln-v2 .ln-t1 em i{width:13px;height:13px;border-radius:50%;background:#22A45D;display:block}
  .ln-v2 .ln-spark{position:absolute;right:24px;top:22px;width:92px;height:40px}
  .ln-v2 .ln-spark path{fill:none;stroke:#E8A13A;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
  /* traffic sources: one stacked bar + 4 legend items */
  .ln-v2 .ln-t3 .ln-srcbar{display:flex;height:22px;border-radius:11px;overflow:hidden;margin-top:18px;background:#E6E9EE}
  .ln-v2 .ln-t3 .ln-srcbar s{display:block;height:100%;transform-origin:0 50%;text-decoration:none}
  .ln-v2 .ln-t3 .ln-legend{display:flex;justify-content:space-between;margin-top:16px}
  .ln-v2 .ln-t3 .ln-legend span{display:flex;align-items:center;gap:8px;font-size:23px;font-weight:700;white-space:nowrap}
  .ln-v2 .ln-t3 .ln-legend span i{width:14px;height:14px;border-radius:4px;display:block}
  .ln-v2 .ln-t3 .ln-legend span u{text-decoration:none;color:#6B7483;font-weight:700}
  .ln-v2 .ln-c1{background:#162942}.ln-v2 .ln-c2{background:#E8A13A}.ln-v2 .ln-c3{background:#D9467A}.ln-v2 .ln-c4{background:#4C8DF6}
  /* page speed ring */
  .ln-v2 .ln-t4 .ln-ring{position:absolute;right:22px;top:24px;width:92px;height:92px}
  .ln-v2 .ln-ring circle{fill:none;stroke-width:10}
  .ln-v2 .ln-ring .ln-rbg{stroke:#E6E9EE}
  .ln-v2 .ln-ring .ln-rfg{stroke:#22A45D;stroke-linecap:round}
  .ln-v2 .ln-t4 b{color:#1C8A4E}
  /* campaign row */
  .ln-v2 .ln-t6{display:flex;align-items:center;gap:22px}
  .ln-v2 .ln-t6 .ln-cico{width:70px;height:70px;border-radius:18px;background:#FDF1DE;display:flex;align-items:center;justify-content:center;flex:none}
  .ln-v2 .ln-t6 .ln-cico svg{width:36px;height:36px;fill:none;stroke:#C98115;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
  .ln-v2 .ln-t6 .ln-cmeta{flex:1;min-width:0}
  .ln-v2 .ln-t6 .ln-cmeta strong{display:block;font-size:27px;font-weight:900;white-space:nowrap}
  .ln-v2 .ln-t6 .ln-cmeta em{margin-top:4px}
  .ln-v2 .ln-t6 b{margin-top:0;text-align:right}
  .ln-v2 .ln-t6 b small{display:block;margin:4px 0 0;font-size:22px;text-align:right}
}
@keyframes lnPulse{0%{box-shadow:0 0 0 0 rgba(34,164,93,.55)}100%{box-shadow:0 0 0 14px rgba(34,164,93,0)}}
@media (prefers-reduced-motion:reduce){.ln-v2 .ln-pulse{animation:none!important}}

/* ══ v3 (task F, 2026-09-30): the browser frame IS the grey media container, for all three cards ══
   The .klb fills the square .saw-mock edge to edge (0 px gap, same 20.8 px radius, clipped); the URL bar stays on top
   and the media fills everything under it. Cards 2 and 3 use a 720 x H stage (H follows the card, ~636 at 390)
   set by redesign.js / launch.js, so the designs are drawn for the square, not letterboxed 16:10. */
@media (max-width:940px){
  #ablauf .saw-mocks .saw-mock{padding:0!important;display:block;background:none;border-radius:20.8px;overflow:hidden}
  #ablauf .saw-mocks .klb{position:relative;display:flex;flex-direction:column;width:100%!important;height:100%;border:0;border-radius:20.8px;overflow:hidden;box-shadow:none!important;transform:none!important;transition:none;-webkit-mask-image:-webkit-radial-gradient(white,black);background:#FBFAF8}
  #ablauf .saw-mocks .klb-bar{flex:none}
  #ablauf .saw-mocks .saw-view,#ablauf .saw-mocks .ln-view{flex:1 1 auto;min-height:0;height:auto!important;aspect-ratio:auto!important;width:100%}
  /* card 1 (Preview): the screenshot covers the whole area under the bar */
  #ablauf .saw-mocks .saw-c1 .saw-view{background:#0F3440}
  #ablauf .saw-mocks .saw-c1 .saw-shot{width:100%;height:100%;object-fit:cover;object-position:50% 0}

  /* card 2 stage type, re-scaled for the 720 x H artboard (~0.5 css px per stage px at 390) */
  .rd-stage.rd-v2 .rd-nav{top:28px;height:48px}
  .rd-stage.rd-v2 .rd-logo{font-size:24px;top:10px}
  .rd-stage.rd-v2 .rd-logo.rd-b{font-size:29px;top:6px}
  .rd-stage.rd-v2 .rd-logo.rd-c{font-size:30px;top:4px}
  .rd-stage.rd-v2 .rd-links{top:20px;gap:18px}
  .rd-stage.rd-v2 .rd-links i{width:56px;height:8px;border-radius:4px}
  .rd-stage.rd-v2 .rd-navpill{height:48px;padding:0 26px;font-size:19px;top:0}
  .rd-stage.rd-v2 .rd-sub{font-size:28px;height:76px}
  .rd-stage.rd-v2 .rd-sub .rd-c{font-size:25px;line-height:1.3}
  .rd-stage.rd-v2 .rd-btn1{font-size:19px}
  .rd-stage.rd-v2 .rd-btn1 .rd-c{font-size:20px}
  .rd-stage.rd-v2 .rd-btn2{left:292px;top:350px;width:236px;height:56px;border-radius:10px;border:2px solid rgba(255,255,255,.62);box-sizing:border-box;display:flex;align-items:center;justify-content:center;color:#fff;font-size:19px;font-weight:600;white-space:nowrap;letter-spacing:.01em}
  .rd-stage.rd-v2 .rd-note{padding:14px 17px;gap:6px;border-radius:19px 19px 19px 5px}
  .rd-stage.rd-v2 .rd-note i{width:10px;height:10px}
}

/* card 3 (launch) re-authored for the 720 x H stage (designed at H = 636; --H is set by launch.js) */
@media (max-width:940px){
  .ln-v2 .ln-site{height:var(--H,636px)}
  .ln-v2 .ln-dnav{height:74px;gap:28px;padding:0 40px}
  .ln-v2 .ln-dnav span{font-size:29px}
  .ln-v2 .ln-dnav i{width:56px;height:8px}
  .ln-v2 .ln-dnav b{font-size:19px;gap:9px}
  .ln-v2 .ln-dnav b svg{width:21px;height:21px}
  .ln-v2 .ln-dh{top:124px;width:400px;font-size:56px}
  .ln-v2 .ln-dh em{margin-top:12px;font-size:32px}
  .ln-v2 .ln-dsub{top:318px;width:350px;height:12px;border-radius:6px;box-shadow:0 24px 0 rgba(255,255,255,.28)}
  .ln-v2 .ln-dbtn{top:390px;height:60px;padding:0 26px;font-size:20px;border-radius:12px}
  .ln-v2 .ln-dbtn svg{width:21px;height:21px}
  .ln-v2 .ln-dbtn2{left:40px;top:466px;width:auto;height:60px;padding:0 26px;border-radius:12px;border:2px solid rgba(255,255,255,.42);display:flex;align-items:center;color:#fff;font-size:20px;font-weight:700;white-space:nowrap;letter-spacing:.01em}
  .ln-v2 .ln-dph2{left:456px;top:112px;width:236px;height:214px;transform:rotate(-6deg)}
  .ln-v2 .ln-dph1{left:420px;top:318px;width:262px;height:254px;transform:rotate(6deg)}
  .ln-v2 .ln-chip{left:172px;top:calc(var(--H,636px) / 2 - 36px);height:72px;padding:0 30px;gap:14px;font-size:27px}
  .ln-v2 .ln-chip svg{width:30px;height:30px}
  .ln-v2 .ln-deploy{left:160px;width:400px;top:calc(var(--H,636px) / 2 - 32px);height:64px;border-radius:64px}
  .ln-v2 .ln-track{height:10px}
  .ln-v2 .ln-ok{width:44px;height:44px}
  .ln-v2 .ln-ok svg{width:25px;height:25px}
  /* analytics */
  .ln-v2 .ln-dhead{left:194px;top:26px;right:28px;height:127px;gap:14px}
  .ln-v2 .ln-dhead strong{font-size:29px}
  .ln-v2 .ln-demo{font-size:21px;padding:8px 16px}
  .ln-v2 .ln-tile{padding:24px 26px;border-radius:26px}
  .ln-v2 .ln-tile em{font-size:26px}
  .ln-v2 .ln-tile b{font-size:88px;margin-top:22px}
  .ln-v2 .ln-tile b small{font-size:38px}
  .ln-v2 .ln-t1,.ln-v2 .ln-t4{left:28px;top:170px;width:324px;height:206px}
  .ln-v2 .ln-t2,.ln-v2 .ln-t5{left:368px;top:170px;width:324px;height:206px}
  .ln-v2 .ln-t3,.ln-v2 .ln-t6{left:28px;top:390px;width:664px;height:226px}
  .ln-v2 .ln-t1 em i{width:15px;height:15px}
  .ln-v2 .ln-spark{right:22px;top:24px;width:72px;height:32px}
  .ln-v2 .ln-t3 .ln-srcbar{height:26px;border-radius:13px;margin-top:20px}
  .ln-v2 .ln-t3 .ln-legend{display:grid;grid-template-columns:1fr 1fr;gap:10px 40px;margin-top:16px}
  .ln-v2 .ln-t3 .ln-legend span{font-size:26px;line-height:1.2;gap:10px}
  .ln-v2 .ln-t3 .ln-legend span i{width:16px;height:16px}
  .ln-v2 .ln-t3 .ln-legend span u{margin-left:auto}
  .ln-v2 .ln-t4 .ln-ring{right:24px;top:28px;width:118px;height:118px}
  .ln-v2 .ln-t6{gap:26px}
  .ln-v2 .ln-t6 .ln-cico{width:96px;height:96px;border-radius:24px}
  .ln-v2 .ln-t6 .ln-cico svg{width:48px;height:48px}
  .ln-v2 .ln-t6 .ln-cmeta strong{font-size:31px;white-space:normal;line-height:1.1}
  .ln-v2 .ln-t6 b small{font-size:25px}
}

/* ══ v4 (task E, 2026-09-30): localized process media + the PREVIEW -> real domain address bar (card 3) ══
   launch.js hides the i18n-managed .klb-url and draws its own two-layer address field (.ln-addr):
   preview layer = grey "Vorschau/Preview" badge (eye icon) + gmaxmedia.nl/<slug> in grey
   live layer    = green lock + the real domain in near-black semibold (the one functional green whisper, like Live)
   Both layers are absolutely stacked in a fixed-size field, so the swap is transform + opacity only (no bar re-layout). */
@media (max-width:940px){
  .saw-c3.ln-on .klb-bar > .klb-url{display:none!important}
  .saw-c3 .ln-addr{position:relative;flex:1 1 auto;min-width:0;height:18px;margin-left:8px;align-self:center}
  .saw-c3 .ln-a-pv,.saw-c3 .ln-a-lv{position:absolute;left:0;top:0;bottom:0;display:flex;align-items:center;white-space:nowrap;will-change:transform,opacity}
  .saw-c3 .ln-a-pv{gap:6px}
  .saw-c3 .ln-a-lv{gap:4px}
  .saw-c3 .ln-a-badge{display:inline-flex;align-items:center;gap:3px;height:20px;padding:0 7px 0 6px;border-radius:6px;background:#E9E6DF;color:#44444A;font-size:12px;font-weight:650;letter-spacing:.01em;line-height:1}
  .saw-c3 .ln-a-badge svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}
  .saw-c3 .ln-a-url{font-size:11px;color:#8A8A90;letter-spacing:.005em}
  .saw-c3 .ln-a-slug{color:#6C6C74}
  .saw-c3 .ln-addr .ln-lock{display:inline-flex;width:12px;height:12px;margin:0;overflow:visible;flex:none}
  .saw-c3 .ln-addr .ln-lock svg{width:12px;height:12px;fill:none;stroke:#1F9D55;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
  .saw-c3 .ln-a-dom{font-size:11.5px;font-weight:600;color:#17171B;letter-spacing:-.005em}
  /* stage text slots */
  .ln-v2 .ln-dnav b u{text-decoration:none}
  .ln-v2 .ln-t3 .ln-legend strong{font:inherit;color:inherit}
  .ln-v2 .ln-dh > span{display:block}
  /* the stages are self-contained artboards: keep their per-frame style/layout work from reaching the page */
  .rd-stage.rd-v2,.ln-stage.ln-v2{contain:layout paint style}
}
@media (max-width:940px){
  .saw-c3 .ln-over{position:absolute;left:0;top:0;width:720px;transform-origin:0 0;pointer-events:none;z-index:4;font-family:Lato,Inter,system-ui,sans-serif}
  .saw-c3 .ln-over > *{position:absolute}
}
@media (max-width:940px){
  /* narrow-card safety: the preview address ellipsizes instead of running under the card edge (390: 17 px spare in NL) */
  .saw-c3 .ln-a-pv{right:0}
  .saw-c3 .ln-a-url{overflow:hidden;text-overflow:ellipsis;min-width:0}
}
@media (max-width:940px){
  /* the Live badge no longer reserves flow space while it is hidden, so the preview address gets the full bar width */
  .saw-c3.ln-on .klb-bar{position:relative}
  .saw-c3.ln-on .klb-bar > .klb-live{position:absolute;right:15px;top:0;bottom:0;margin:0}
}