/* Workshop page */

/* blueprint header art */
.wr-clip { position: absolute; inset: 0; overflow: hidden; z-index: 1; pointer-events: none; user-select: none; }
.wr {
  position: absolute; top: calc(50% + 40px); right: calc(max(var(--padx), 50% - 610px) + 10px); width: 500px; height: 250px;
  transform: translateY(-50%) scale(1.15); transform-origin: 100% 50%; display: block;
  color: rgb(150, 118, 66); opacity: .2; filter: grayscale(1) sepia(1) saturate(45%) hue-rotate(-10deg);
  font-family: var(--ui); font-size: 10px; font-weight: 500; letter-spacing: .16em; font-variant-numeric: tabular-nums;
}
html[data-mc-dark] .wr { color: rgb(201, 160, 99); opacity: .12; filter: grayscale(1) sepia(1) saturate(45%) hue-rotate(-10deg) brightness(1.3); }
@media (max-width: 759px) { .wr { display: none; } }
@media (max-width: 1099px) and (min-width: 760px) { .wr { transform: translateY(-50%) scale(.7); } }
@media (max-width: 1279px) and (min-width: 1100px) { .wr { transform: translateY(-50%) scale(.9); } }
.wr-car { position: absolute; left: 30px; right: 30px; top: 20px; aspect-ratio: 1452 / 456; }
.wr-car img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wr-ground { position: absolute; left: -14px; right: -14px; top: 97%; height: 1px; background: currentColor; }
.wr-axis { position: absolute; top: 38%; bottom: -12px; width: 1px; background: repeating-linear-gradient(180deg, currentColor 0 8px, transparent 8px 12px, currentColor 12px 14px, transparent 14px 18px); }
.wr-axis--a { left: 16.2%; } .wr-axis--b { left: 73%; }
.wr-haxis { position: absolute; left: 8%; right: 16%; top: 72%; height: 1px; background: repeating-linear-gradient(90deg, currentColor 0 8px, transparent 8px 12px, currentColor 12px 14px, transparent 14px 18px); }
.wr-dim { position: absolute; display: flex; align-items: center; gap: 8px; }
.wr-dim--wb { left: calc(30px + 16.2% * 440 / 500); width: calc((73% - 16.2%) * 440 / 500); top: 178px; }
.wr-dim--len { left: 30px; right: 30px; top: 204px; }
.wr-dim--h { right: 6px; top: 20px; height: 138px; flex-direction: column; gap: 6px; }
.wr-line { flex: 1 1 auto; height: 1px; background: currentColor; }
.wr-linev { flex: 1 1 auto; width: 1px; background: currentColor; }
.wr-tick { width: 1px; height: 10px; background: currentColor; }
.wr-tickh { width: 10px; height: 1px; background: currentColor; }
.wr-vtext { writing-mode: vertical-rl; transform: rotate(180deg); }

/* process */
.wp-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 44px; align-items: start; width: 100%; max-width: none; margin: 0 auto; }
.wp-frame {
  position: relative; width: 100%; aspect-ratio: 3 / 2; border: 1px solid var(--stroke); box-shadow: 0 30px 60px -44px rgba(58,44,32,.35); border-radius: 18px; overflow: hidden;
  background:
    linear-gradient(180deg, rgba(248, 246, 243, .9) 0%, rgba(248, 246, 243, 0) 14%),
    linear-gradient(90deg, rgba(92, 72, 44, .3) 0%, rgba(92, 72, 44, .12) 40%, rgba(0, 0, 0, 0) 85%),
    #F8F6F3;
}
html[data-mc-dark] .wp-frame {
  background:
    linear-gradient(180deg, rgba(16, 4, 7, .9) 0%, rgba(16, 4, 7, 0) 14%),
    linear-gradient(90deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .2) 40%, rgba(0, 0, 0, 0) 85%),
    #100407;
}
.wp-wash { position: absolute; inset: 0; z-index: 0; pointer-events: none; transition: opacity .5s var(--ease); }
.wp-wash--day { opacity: 1; background: linear-gradient(180deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .06) 46%, rgba(170, 138, 83, .05) 100%); }
.wp-wash--night { opacity: 0; background: radial-gradient(ellipse 62% 42% at 50% 96%, rgba(226, 168, 98, .30) 0%, rgba(198, 138, 74, .12) 44%, rgba(160, 110, 58, 0) 78%); }
html[data-mc-dark] .wp-wash--day { opacity: 0; }
html[data-mc-dark] .wp-wash--night { opacity: 1; }
.wp-shot { position: absolute; opacity: 0; visibility: hidden; z-index: 1; pointer-events: none; transition: opacity .62s var(--ease), visibility 0s linear .62s; }
.wp-shot.is-active { opacity: 1; visibility: visible; z-index: 2; pointer-events: auto; transition-delay: 0s, 0s; }
/* Minden lépés képe teljesen kitölti a keretet (a "cut" képek sem kisebb dobozban ülnek) */
.wp-shot--full, .wp-shot--cut { inset: 0; }
.wp-shot .mc-slot img { object-fit: cover; }

.wp-listwrap { position: relative; align-self: stretch; min-height: 0; }
.wp-list { position: absolute; inset: 0; overflow-y: auto; padding-right: 22px; }
.wp-fade { position: absolute; left: 0; right: 22px; bottom: 0; height: 72px; pointer-events: none; z-index: 3; transition: opacity .26s var(--ease);
  background: linear-gradient(180deg, rgba(248, 246, 243, 0) 0%, rgba(248, 246, 243, .72) 58%, #F8F6F3 100%); }
html[data-mc-dark] .wp-fade { background: linear-gradient(180deg, rgba(16, 4, 7, 0) 0%, rgba(16, 4, 7, .72) 58%, #100407 100%); }
.wp-listwrap.at-end .wp-fade { opacity: 0; }
.wp-row { --acc: #7E6233; position: relative; display: block; padding: 0 20px 0 18px; margin-bottom: 8px; border-radius: 14px; border: 1px solid var(--stroke); background: transparent; transition: border-color .32s var(--ease), background .32s var(--ease); }
html[data-mc-dark] .wp-row { --acc: #D6B074; }
.wp-row:last-child { margin-bottom: 0; }
.wp-row:hover { border-color: rgba(170, 138, 83, .45); }
html[data-mc-dark] .wp-row:hover { border-color: rgba(236, 230, 222, .45); }
.wp-row.is-open { border-color: rgba(126, 98, 51, .55); background: rgba(126, 98, 51, .06); }
html[data-mc-dark] .wp-row.is-open { border-color: rgba(214, 176, 116, .55); background: rgba(214, 176, 116, .05); }
.wp-btn { display: grid; grid-template-columns: 44px 1fr; align-items: baseline; gap: 8px; width: 100%; min-height: 56px; padding: 18px 0; margin: 0; border: 0; background: none; text-align: left; cursor: pointer; color: inherit; transition: padding .32s var(--ease); }
.wp-row.is-open .wp-btn { padding-bottom: 6px; }
.wp-num { font-family: var(--ui); font-size: 13px; font-weight: 500; letter-spacing: .14em; font-variant-numeric: tabular-nums; color: rgba(var(--ink-rgb), .72); transition: color .32s var(--ease); }
.wp-title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(19px, 1.5vw, 23px); line-height: 1.24; letter-spacing: -.002em; color: rgba(var(--ink-rgb), .66); transition: color .32s var(--ease); }
.wp-row:hover .wp-num, .wp-row.is-open .wp-num { color: var(--acc); }
.wp-row:hover .wp-title, .wp-row.is-open .wp-title { color: var(--ink); }
.wp-bodywrap { overflow: hidden; max-height: 0; opacity: 0; padding-left: 52px; transform: translateY(-4px); transition: max-height .56s var(--ease), opacity .22s var(--ease), transform .56s var(--ease); }
.wp-row.is-open .wp-bodywrap { max-height: 220px; opacity: 1; transform: none; transition: max-height .56s var(--ease), opacity .44s var(--ease) .09s, transform .56s var(--ease); }
.wp-body { margin: 0 0 22px; max-width: 42ch; font-size: 14.5px; line-height: 1.72; color: var(--ink-body); text-wrap: pretty; }
@media (max-width: 759px) {
  .wp-grid { grid-template-columns: 1fr; gap: 32px; }
  .wp-frame { border-radius: 14px; aspect-ratio: 5 / 4; }
  .wp-listwrap { align-self: auto; }
  .wp-list { position: relative; inset: auto; overflow: visible; padding-right: 0; }
  .wp-fade { display: none; }
  .wp-row { border-radius: 12px; }
}

/* TV */
.wtv-sec { padding-top: 40px; padding-bottom: 40px; }
@media (max-width: 759px) { .wtv-sec { padding-top: 24px; padding-bottom: 40px; } }
.wtv { position: relative; width: 100%; max-width: 980px; margin: 0 auto; }
.wtv-screen { position: absolute; z-index: 1; left: 12.6%; top: 14.4%; width: 60.2%; height: 62.8%; background: #0c0a08; overflow: hidden; border-radius: 9% / 13%; }
.wtv-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.wtv-play { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; background-color: #0c0a08; background-position: center; background-size: cover; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; }
.wtv-play__btn { display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 50%; background: rgba(21, 17, 13, .72); border: 1px solid rgba(244, 238, 232, .5); transition: transform .2s var(--ease), background .2s; }
.wtv-play:hover .wtv-play__btn { transform: scale(1.06); background: rgba(21, 17, 13, .86); }
.wtv-play__btn span { display: block; width: 0; height: 0; margin-left: 6px; border-style: solid; border-width: 13px 0 13px 21px; border-color: transparent transparent transparent #F4EEE8; }
.wtv-frame { position: relative; z-index: 2; display: block; width: 100%; height: auto; pointer-events: none; user-select: none; filter: saturate(.58) hue-rotate(9deg) brightness(.97); }
.wtv-sh { position: absolute; z-index: 1; border-radius: 50%; pointer-events: none; }
.wtv-sh--wide { left: 1%; width: 98%; top: 83.5%; height: 8%; background: radial-gradient(50% 50% at 50% 42%, rgba(40, 28, 16, .16) 0%, rgba(40, 28, 16, .08) 45%, rgba(40, 28, 16, 0) 100%); filter: blur(10px); }
.wtv-sh--contact { left: 6.5%; width: 87.5%; top: 85.6%; height: 1.6%; background: radial-gradient(50% 50% at 50% 30%, rgba(30, 20, 12, .28) 0%, rgba(30, 20, 12, .15) 60%, rgba(30, 20, 12, 0) 100%); filter: blur(3px); }
.wtv-sh--footl { left: 4.5%; width: 14%; top: 85%; height: 2.6%; background: radial-gradient(50% 50% at 50% 35%, rgba(30, 20, 12, .24) 0%, rgba(30, 20, 12, 0) 100%); filter: blur(4px); }
.wtv-sh--footr { left: 81.5%; width: 14%; top: 85%; height: 2.6%; background: radial-gradient(50% 50% at 50% 35%, rgba(30, 20, 12, .24) 0%, rgba(30, 20, 12, 0) 100%); filter: blur(4px); }
html[data-mc-dark] .wtv-sh--wide { background: radial-gradient(50% 50% at 50% 42%, rgba(40, 28, 16, .42) 0%, rgba(40, 28, 16, .22) 45%, rgba(40, 28, 16, 0) 100%); }
html[data-mc-dark] .wtv-sh--contact { background: radial-gradient(50% 50% at 50% 30%, rgba(30, 20, 12, .6) 0%, rgba(30, 20, 12, .38) 60%, rgba(30, 20, 12, 0) 100%); }
html[data-mc-dark] .wtv-sh--footl, html[data-mc-dark] .wtv-sh--footr { background: radial-gradient(50% 50% at 50% 35%, rgba(30, 20, 12, .55) 0%, rgba(30, 20, 12, 0) 100%); }

/* industrial */
.wind-sec { position: relative; z-index: 2; padding: 160px var(--padx) 120px; }
@media (max-width: 759px) { .wind-sec { padding: 72px var(--padx) 72px; } }
.wind {
  position: relative; width: 100%; max-width: 1220px; margin: 0 auto; padding: 56px 64px 60px; min-height: 380px; border-radius: 32px;
  border: 1px solid rgb(61, 93, 110); background: linear-gradient(90deg, rgba(109, 134, 146, .8) 0%, rgba(109, 134, 146, .22) 100%);
  display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 48px; align-items: center;
}
html[data-mc-dark] .wind { border-color: rgb(143, 163, 173); background: linear-gradient(90deg, rgba(10, 42, 59, .8) 0%, rgba(10, 42, 59, .22) 100%); }
.wind-copy { position: relative; z-index: 2; max-width: 560px; }
.wind-eyebrow { margin: 0 0 22px; font-family: var(--ui); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: rgba(var(--ink-rgb), .86); }
.wind-h2 { margin: 0 0 14px; font-family: var(--serif); font-weight: 400; font-size: clamp(27px, 3.1vw, 46px); line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; color: var(--ink); }
.wind-sub { margin: 0 0 18px; font-size: 19px; line-height: 1.5; color: rgba(var(--ink-rgb), .94); }
.wind-body { margin: 0 0 30px; max-width: 480px; font-size: 15px; line-height: 1.7; text-wrap: pretty; color: rgba(var(--ink-rgb), .86); }
.wind-img { position: absolute; right: 48px; bottom: 0; width: 400px; top: -118px; z-index: 2; clip-path: inset(-200vh -100vw 0 -100vw); }
.wind-img .mc-slot { background: transparent; }
.wind-img .mc-slot img { object-fit: contain; object-position: 50% 50%; transform: translate(-34.24%, 4.92%) scale(1.688); transform-origin: 50% 50%; }
@media (max-width: 1019px) {
  .wind { display: block; padding: 56px 44px 0; }
  .wind-img { position: relative; right: auto; top: auto; width: 100%; max-width: 320px; height: 340px; margin: 88px -84px 0 auto; clip-path: inset(-200vh 40px 0 -100vw round 0 0 31px 0); }
}
@media (max-width: 759px) { .wind { padding: 44px 28px 0; border-radius: 22px; } .wind-h2 { font-size: 30px; } .wind-sub { font-size: 17px; } .wind-img { margin: 88px -68px 0 auto; clip-path: inset(-200vh 40px 0 -100vw round 0 0 21px 0); } }

/* Industrial (cool) button */
.mc-btn--industrial {
  --chrome:
    linear-gradient(90deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 7%, rgba(255,255,255,.16) 26%, rgba(255,255,255,0) 45%, rgba(0,0,0,0) 92%, rgba(0,0,0,.28) 100%),
    radial-gradient(140% 220% at 18% -80%, rgba(255,255,255,.85), rgba(255,255,255,0) 45%),
    radial-gradient(120% 170% at 50% 150%, rgba(61,93,110,.34), rgba(61,93,110,0) 62%),
    conic-gradient(from 92deg at 50% 50%, rgba(255,255,255,.30), rgba(0,0,0,.20) 14%, rgba(255,255,255,.34) 30%, rgba(0,0,0,.18) 48%, rgba(255,255,255,.26) 63%, rgba(0,0,0,.20) 80%, rgba(255,255,255,.30) 100%),
    linear-gradient(180deg,#fbfcfd 0%,#e2e7ea 9%,#a9b4ba 25%,#51606a 43%,#26323a 50%,#66737b 55%,#bcc6cb 68%,#f6f8f9 81%,#bfc9ce 91%,#7f8c94 100%);
  --face: radial-gradient(130% 190% at 50% -35%, #5A7B8C 0%, #3D5D6E 50%, #2A4555 100%), radial-gradient(90% 120% at 50% 130%, rgba(206,215,219,.18), rgba(206,215,219,0) 70%);
  --face-ink: #F4F7F8; --txt-shadow: 0 1px 0 rgba(0,0,0,.55);
  --face-inset: inset 0 2px 4px rgba(6,27,39,.55), inset 0 -1px 0 rgba(255,255,255,.18); --face-ring: rgba(255,255,255,.10);
  --drop: 0 14px 26px -14px rgba(10,42,59,.62), 0 3px 8px -4px rgba(10,42,59,.40);
}
html[data-mc-dark] .mc-btn--industrial {
  --chrome:
    linear-gradient(90deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 7%, rgba(255,255,255,.16) 26%, rgba(255,255,255,0) 45%, rgba(0,0,0,0) 92%, rgba(0,0,0,.28) 100%),
    radial-gradient(140% 220% at 18% -80%, rgba(255,255,255,.55), rgba(255,255,255,0) 45%),
    radial-gradient(120% 170% at 50% 150%, rgba(109,134,146,.30), rgba(109,134,146,0) 62%),
    conic-gradient(from 92deg at 50% 50%, rgba(255,255,255,.26), rgba(0,0,0,.30) 14%, rgba(255,255,255,.30) 30%, rgba(0,0,0,.26) 48%, rgba(255,255,255,.22) 63%, rgba(0,0,0,.28) 80%, rgba(255,255,255,.26) 100%),
    linear-gradient(180deg,#f0f1f3 0%,#c6c9ce 9%,#84878d 25%,#3c3e42 43%,#1b1c1f 50%,#4e5055 55%,#9ea1a7 68%,#dfe1e4 81%,#93969b 91%,#5a5c61 100%);
  --face: radial-gradient(130% 190% at 50% -35%, #164059 0%, #0A2A3B 50%, #061B27 100%); --face-ink: #EEF3F5;
  --drop: 0 14px 26px -14px rgba(0,0,0,.95), 0 3px 9px -4px rgba(0,0,0,.7);
}

/* Process stepper – csak mobilon: egyszerre egy lépés, közvetlenül a hozzá tartozó kép alatt */
.wp-step { display: none; }
@media (max-width: 759px) {
  .wp-grid { gap: 14px; }
  .wp-step { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
  .wp-step__btn { appearance: none; cursor: pointer; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--stroke); background: transparent; color: var(--ink-body); display: flex; align-items: center; justify-content: center; padding: 0; transition: opacity .2s ease, border-color .2s ease; }
  .wp-step__btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-strong); }
  .wp-step__btn:disabled { opacity: .3; cursor: default; }
  .wp-step__mid { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
  .wp-step__count { font-family: var(--ui); font-size: 11px; font-weight: 500; letter-spacing: .18em; font-variant-numeric: tabular-nums; color: var(--ink-body); }
  .wp-step__bar { display: flex; gap: 4px; width: 100%; max-width: 200px; }
  .wp-step__bar i { flex: 1 1 0; height: 2px; border-radius: 2px; background: var(--stroke); transition: background .25s ease; }
  .wp-step__bar i.is-on { background: var(--accent); }

  /* csak az aktuális lépés kártyája látszik, kibontva */
  .wp-row:not(.is-open) { display: none; }
  .wp-row.is-open .wp-btn { cursor: default; padding-bottom: 6px; }
  .wp-row.is-open .wp-bodywrap { max-height: none; }
  .wp-body { margin-bottom: 20px; }
}

@media (max-width: 759px) {
  /* Solutions: rövidebb gombfelirat mobilon ("Visit" és nyíl nélkül) */
  .mc-btn--industrial .mc-btn__visit, .mc-btn--industrial .mc-btn__arrow { display: none; }
}

@media (max-width: 759px) {
  /* A robot alja jobbra, hogy a kép összességében középen legyen a blokkban */
  .wind-img .mc-slot img { transform: translate(calc(16.1% - 64px), 10.5%) scale(1.1); }
}

@media (max-width: 359px) { .wind-img .mc-slot img { transform: translate(calc(19.2% - 64px), 14.7%) scale(1); } }

/* Process (mobil): a "cut" képek is teljesen kitöltik a keretet, mint az első háromnál */
@media (max-width: 759px) {
  .wp-shot--cut { left: 0; right: 0; top: 0; bottom: 0; aspect-ratio: auto; }
  .wp-shot--cut .mc-slot img { object-fit: cover; }
}

/* =====================================================================
   Tablet álló (760–1023 px)
   ===================================================================== */
@media (min-width: 760px) and (max-width: 1023px) {
  /* Process: lépésenként, mint mobilon */
  .wp-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; max-width: 680px; }
  .wp-frame { border-radius: 14px; }
  .wp-listwrap { align-self: auto; }
  .wp-list { position: relative; inset: auto; overflow: visible; padding-right: 0; }
  .wp-fade { display: none; }
  .wp-step { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
  .wp-step__btn { appearance: none; cursor: pointer; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--stroke); background: transparent; color: var(--ink-body); display: flex; align-items: center; justify-content: center; padding: 0; transition: opacity .2s ease, border-color .2s ease; }
  .wp-step__btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-strong); }
  .wp-step__btn:disabled { opacity: .3; cursor: default; }
  .wp-step__mid { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
  .wp-step__count { font-family: var(--ui); font-size: 11px; font-weight: 500; letter-spacing: .18em; font-variant-numeric: tabular-nums; color: var(--ink-body); }
  .wp-step__bar { display: flex; gap: 4px; width: 100%; max-width: 240px; }
  .wp-step__bar i { flex: 1 1 0; height: 2px; border-radius: 2px; background: var(--stroke); transition: background .25s ease; }
  .wp-step__bar i.is-on { background: var(--accent); }
  .wp-row:not(.is-open) { display: none; }
  .wp-row.is-open .wp-btn { cursor: default; padding-bottom: 6px; }
  .wp-row.is-open .wp-bodywrap { max-height: none; }
  .wp-body { margin-bottom: 20px; max-width: 60ch; }
  .wp-shot--cut { left: 0; right: 0; top: 0; bottom: 0; aspect-ratio: auto; }
  .wp-shot--cut .mc-slot img { object-fit: cover; }
  .wtv-sec { padding-bottom: 16px; }
}
@media (min-width: 760px) and (max-width: 1019px) {
  /* Solutions: szöveg + robot egymás mellett; a robot alja mélyebbre tolva (a rögzítő lemez nem látszik, mint desktopon) */
  .wind-sec { padding: 72px var(--padx) 88px; }
  .wind { display: block; padding: 34px 40px 38px; min-height: 300px; }
  .wind-copy { max-width: calc(100% - 336px); }
  .wind-sub { font-size: 17px; margin-bottom: 14px; }
  .wind-body { font-size: 14.5px; line-height: 1.64; margin-bottom: 24px; }
  .wind-img { position: absolute; right: -24px; left: auto; bottom: 0; top: auto; width: 320px; max-width: none; height: 540px; margin: 0; clip-path: inset(-200vh -100vw 0 -100vw); }
  .wind-img .mc-slot img { transform: translate(-53px, 75px) scale(1.656); }
  .mc-btn--industrial .mc-btn__visit, .mc-btn--industrial .mc-btn__arrow { display: none; }
}

/* Desktop: üres hely a process lista alján (az utolsó lépések is felülre görgethetők) */
.wp-spacer { flex: 0 0 auto; }
@media (max-width: 1023px) { .wp-spacer { display: none; } }

/* Mobil: a TV keretének látható széle pontosan a tartalom margójáig ér (a PNG-ben ~5% átlátszó perem van) */
@media (max-width: 759px) {
  .wtv { width: 111.6%; max-width: none; margin-left: -5.8%; margin-right: 0; }
}

/* Mobil: a robot alja mélyebbre tolva (mint tableten: a rögzítő lemez nem látszik, csak a fekete henger), felül kisebb a hézag a gomb és a kép között */
@media (max-width: 759px) {
  /* a robot feje mindig ~24 px-re a gomb alatt (a doboz teteje ettől függően kicsit a gomb mögé is nyúlhat) */
  .wind-img { margin-top: calc(44px - 340px + 1.1264 * min(320px, 100vw - 98px)); pointer-events: none; }
  /* Bw ≈ a doboz szélessége (a blokk szélessége – 58 px, max. 320); ty úgy, hogy a kép 478. pixelsora a blokk alján legyen */
  .wind-img .mc-slot img {
    transform: translate(-15.5%, calc(170px - .515 * min(320px, 100vw - 98px))) scale(1.4);
  }
}
@media (max-width: 359px) {
  .wind-img { margin-top: calc(44px - 340px + .9655 * (100vw - 98px)); }
  .wind-img .mc-slot img { transform: translate(-15.5%, calc(170px - .44 * (100vw - 98px))) scale(1.2); }
}