/* ==== 66-kontakt.css ==== */
/* ---------- КОНТАКТ (kontakt.html) · prefix .kt- ----------
   „Кино“ 2026-09-27: the cobalt sub-hero, then two scenes on the dark stage (04-stage.css):
   #kt-book cobalt „Час“ (the booking card, step 1) · #contact deep (chrome, step 2) · #kt-next night „После“ (3 stops on one road + e-mail line) */

/* arrows that point to a section above or below */
.kt-up{transform:rotate(-90deg)}
.btn:hover .kt-up{transform:translateY(-3px) rotate(-90deg)}
.kt-down{transform:rotate(90deg)}
.btn:hover .kt-down{transform:translateY(3px) rotate(90deg)}

/* ---------- hero: the audit of a fictional business ---------- */
.kt-hero :focus-visible{outline-color:#fff}
/* the longer headline sits on 2 lines at 1280/1440 instead of 3 with a lone „е“ */
.kt-hero .sub-title{font-size:clamp(40px,4.6vw,64px)}
.kt-hv{display:flex;justify-content:center}
.kt-hv-in{position:relative;width:min(100%,470px);padding:46px 0 42px}
.kt-au{position:relative;padding:22px;border-radius:28px;background:#fff;color:var(--ink);box-shadow:0 44px 90px -40px rgba(4,8,60,.8),0 0 0 6px rgba(255,255,255,.12)}
.kt-au-top{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.kt-au-mk{width:46px;height:46px;flex:none}
.kt-au-top p{display:grid;gap:2px;flex:1;min-width:0}
.kt-au-top b{font-size:18px;font-weight:600;line-height:1.2;letter-spacing:-.01em}
.kt-au-top p span{font-size:14px;line-height:1.3;color:var(--muted)}
.kt-au-st{display:inline-flex;align-items:center;gap:6px;flex:none;height:32px;padding:0 12px 0 10px;border-radius:999px;background:var(--cobalt-tint);color:var(--cobalt);font-size:14px;font-weight:600}
.kt-au-st .ic{width:16px;height:16px;stroke-width:2.8}
.kt-au-list{position:relative;display:grid;margin:4px 0 14px}
.kt-au-list li{display:grid;grid-template-columns:40px minmax(0,1fr) 30px;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.kt-au-list li:nth-child(4){border-bottom:0}
.kt-au-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--mist);color:var(--ink-2)}
.kt-au-ic .ic{width:20px;height:20px}
.kt-au-list p{display:grid;gap:1px;min-width:0}
.kt-au-list b{font-size:16px;font-weight:600;line-height:1.25}
.kt-au-list p span{font-size:14px;line-height:1.3;color:var(--muted)}
.kt-au-list em{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-style:normal;font-weight:700;font-size:15px}
.kt-au-list em .ic{width:16px;height:16px;stroke-width:2.8}
.kt-au-list .no em{background:#FFF0E0;color:#A4520A}
.kt-au-list .ok em{background:#E3F6EC;color:#127A4B}
.kt-au-list .kt-au-scan{position:absolute;left:-22px;right:-22px;top:0;display:block;height:25%;padding:0;border:0;opacity:0;pointer-events:none;background:linear-gradient(180deg,rgba(35,53,255,0),rgba(35,53,255,.1) 50%,rgba(35,53,255,0))}
.kt-au-foot{display:flex;align-items:center;gap:14px;padding:14px 18px 14px 16px;border-radius:18px;background:var(--cobalt);color:#fff}
.kt-au-foot>b{min-width:30px;font-size:36px;font-weight:700;line-height:1;letter-spacing:-.04em;text-align:center}
.kt-au-foot p{display:grid;gap:2px;flex:1;min-width:0}
.kt-au-foot strong{font-size:16px;font-weight:600;line-height:1.25}
.kt-au-foot span{font-size:14px;line-height:1.3;color:rgba(255,255,255,.82)}
.kt-au-foot .ic{width:22px;height:22px}
.kt-hv-tk,.kt-hv-re{position:absolute;z-index:2;display:flex;align-items:center;gap:12px;padding:10px 18px 10px 10px;border-radius:20px;background:#fff;color:var(--ink);box-shadow:0 24px 48px -20px rgba(4,8,60,.75)}
.kt-hv-tk{top:0;right:-30px}
.kt-hv-re{bottom:0;left:-34px}
.kt-hv-ic{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:var(--cobalt);color:#fff}
.kt-hv-av{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;font-style:normal;font-weight:700;font-size:18px;color:#fff;background:linear-gradient(150deg,#3A4BFF,#1420B5)}
.kt-hv-tk p,.kt-hv-re p{display:grid;gap:1px}
.kt-hv-tk b,.kt-hv-re b{font-size:16px;font-weight:600;line-height:1.2}
.kt-hv-tk p span,.kt-hv-re p span{font-size:14px;line-height:1.3;color:var(--muted)}

/* =========================================================================================
   #kt-book — the booking card: the one lit object on the cobalt stage
   ========================================================================================= */
.kt-bk{max-width:1120px;margin-inline:auto}
/* a soft pool of light under the card, so it sits on the stage instead of floating on it */
.kt-bk::before{content:"";position:absolute;left:8%;right:8%;top:14%;bottom:-6%;z-index:-1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(120,146,255,.42),rgba(91,124,255,.14) 60%,transparent);filter:blur(24px)}
/* the card lands as one solid object (a short rise, not the photo zoom), then its chips pop onto it */
html.js .play .kt-cal.sq{animation-name:kt-land;animation-duration:.9s}
@keyframes kt-land{from{opacity:0;transform:translateY(28px) scale(.98)}to{opacity:1;transform:none}}
.kt-cal{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);overflow:hidden;color:var(--ink);border:0}

.kt-fs{margin:0;padding:0;border:0;min-width:0}
.kt-fs legend{float:left;width:100%;display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:0;margin-bottom:18px;font:600 17px/26px var(--f);letter-spacing:0;text-transform:none;color:var(--ink-2)}
.kt-fs legend + *{clear:both}
.kt-month{font-size:clamp(18px,1.5vw,21px);font-weight:600;letter-spacing:-.02em;text-transform:none;color:var(--ink)}
.kt-cal-days{padding:clamp(22px,3.2vw,44px)}
.kt-dow,.kt-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.kt-dow{margin-bottom:10px;text-align:center;font:600 15px/1 var(--f);letter-spacing:0;text-transform:none;color:var(--muted)}
.kt-d{position:relative;display:grid;place-items:center;height:clamp(54px,5vw,66px);border-radius:16px;line-height:1;color:var(--ink)}
.kt-d > span{display:grid;justify-items:center;gap:3px}
.kt-d b{font-size:clamp(18px,1.4vw,20px);font-weight:600;letter-spacing:-.01em}
.kt-d small{font-size:13px;font-weight:600;color:var(--cobalt)}
.kt-d.is-open{cursor:pointer;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line-2);transition:box-shadow .25s,background-color .25s,color .25s}
.kt-d.is-open:hover{box-shadow:inset 0 0 0 1.5px var(--cobalt)}
.kt-d input,.kt-t input,.kt-w input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.kt-d.is-open:has(input:checked){background:var(--cobalt);color:#fff;box-shadow:0 14px 28px -14px rgba(35,53,255,.9)}
.kt-d.is-open:has(input:checked) small{color:#fff}
.kt-d:has(input:focus-visible),.kt-t:has(input:focus-visible) span,.kt-w:has(input:focus-visible) span{outline:3px solid var(--cobalt);outline-offset:3px}
.kt-d.is-na{color:#A3AAC2}
.kt-d.is-hol{color:#6E7592;background:repeating-linear-gradient(135deg,var(--mist) 0 6px,#fff 6px 12px)}
.kt-d.is-today::after{content:"";position:absolute;bottom:9px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--cobalt)}
.kt-legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:auto;padding-top:20px;font-size:14px;color:var(--muted)}
.kt-legend span{display:inline-flex;align-items:center;gap:8px}
.kt-legend span[hidden]{display:none}
.kt-legend i{width:16px;height:16px;border-radius:5px}
.kt-legend .lg-o{background:repeating-linear-gradient(135deg,var(--mist-2) 0 3px,#fff 3px 6px);box-shadow:inset 0 0 0 1px var(--line)}
.kt-lg-note{margin-right:auto;font-size:15px}
.kt-nojs{grid-column:1/-1;padding:18px;border-radius:16px;background:var(--mist);font-size:16px;color:var(--ink-2)}
/* without JS the pickers cannot reach the form: show the note and the button only */
html:not(.js) .kt-dow,html:not(.js) .kt-legend,html:not(.js) .kt-cal-side,html:not(.js) .kt-ticket{display:none}
html:not(.js) .kt-cal{grid-template-columns:minmax(0,1fr)}
html:not(.js) .kt-grid{clear:both}
html:not(.js) .kt-cal-foot{padding-top:0;border-top:0}
html:not(.js) .kt-cal-days legend{display:none}

.kt-cal-side{display:grid;align-content:start;gap:30px;padding:clamp(22px,3.2vw,44px);border-left:1px solid var(--line)}
.kt-times{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.kt-t,.kt-w{position:relative;display:block}
.kt-t span{display:grid;place-items:center;height:50px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line-2);font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;transition:box-shadow .25s,background-color .25s,color .25s}
.kt-t:hover span{box-shadow:inset 0 0 0 1.5px var(--cobalt)}
.kt-t:has(input:checked) span{background:var(--cobalt);color:#fff;box-shadow:0 12px 24px -12px rgba(35,53,255,.9)}
.kt-ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.kt-w span{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 6px;border-radius:18px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line-2);font-size:16px;font-weight:600;line-height:1.1;transition:box-shadow .25s,background-color .25s,color .25s}
.kt-w .ic{width:22px;height:22px;color:var(--cobalt)}
.kt-w:hover span{box-shadow:inset 0 0 0 1.5px var(--cobalt)}
.kt-w:has(input:checked) span{background:var(--cobalt-tint);color:var(--cobalt);box-shadow:inset 0 0 0 2px var(--cobalt)}
.kt-ticket{display:flex;align-items:center;gap:14px;min-height:60px;padding:8px 20px 8px 8px;border-radius:999px;background:var(--mist);transition:background-color .3s,box-shadow .3s}
.kt-ticket-ic{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:#fff;color:var(--cobalt);transition:background-color .3s,color .3s}
.kt-ticket-ic .kt-ic-ok{display:none;stroke-width:2.6}
.kt-sum{font-size:16px;font-weight:600;line-height:1.4;color:var(--ink-2)}
.kt-ticket.is-ok{background:var(--cobalt-tint)}
.kt-ticket.is-ok .kt-sum{color:var(--ink)}
.kt-ticket.is-ok .kt-ticket-ic{background:var(--cobalt);color:#fff}
.kt-ticket.is-ok .kt-ic-cal{display:none}
.kt-ticket.is-ok .kt-ic-ok{display:block;animation:kt-pop .5s var(--ease) both}
.kt-ticket.is-miss{box-shadow:0 0 0 2px var(--cobalt),0 0 0 6px rgba(35,53,255,.16)}
.kt-ticket.is-miss .kt-sum{color:var(--cobalt)}
/* „continue“ with a group still empty: its legend turns cobalt and a soft ring marks its choices (66-kontakt.js, cleared on the next change) */
.kt-fs .kt-grid,.kt-fs .kt-times{outline:3px solid transparent;outline-offset:6px;border-radius:18px;transition:outline-color .3s}
.kt-fs.is-miss .kt-grid,.kt-fs.is-miss .kt-times{outline-color:rgba(35,53,255,.35)}
.kt-fs.is-miss legend{color:var(--cobalt)}
/* summary + continue: one bar under both columns (the booking reads calendar, time, channel, then this) */
.kt-cal-foot{grid-column:1/-1;display:flex;align-items:center;gap:16px;padding:18px clamp(22px,3.2vw,44px);border-top:1px solid var(--line)}
.kt-cal-foot .kt-ticket{flex:1;min-width:0}
.kt-cal-foot .btn{flex:none;width:auto;min-width:min(100%,340px)}

/* a short flash when the booking lands in the form */
@keyframes kt-flash{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}35%{box-shadow:0 0 0 8px rgba(255,255,255,.45)}}
.kt-flash{animation:kt-flash 1.4s var(--ease) .5s}

/* =========================================================================================
   #kt-next — one white road left → right through 3 stops, a drawn vignette above each (on phones the road runs down)
   ========================================================================================= */
.kt-next .scn-head{max-width:1120px}
/* the last scene before the footer: no dead gap under the e-mail line */
.kt-next{padding-bottom:clamp(56px,6vw,96px)}
.kt-nx{--ah:clamp(190px,16vw,248px);--pm:26px;--sq-gap:.12s;position:relative;max-width:1180px;margin-inline:auto}
.kt-nx-list{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0;list-style:none}
.kt-nx-i{display:flex;flex-direction:column;align-items:center;padding-inline:clamp(12px,2.2vw,32px);text-align:center}
.kt-nx-viz{display:block;width:auto;height:var(--ah);aspect-ratio:4/3;max-width:100%;overflow:visible}
.kt-nx-pin{position:relative;z-index:1;display:grid;place-items:center;width:48px;height:48px;margin:var(--pm) 0 20px;border-radius:50%;
  background:#fff;color:var(--cobalt);font:700 16px/1 var(--f);font-variant-numeric:tabular-nums;box-shadow:0 0 0 8px rgba(255,255,255,.08),0 12px 30px -8px rgba(0,0,0,.6)}
.kt-nx-pin::after{content:"";position:absolute;inset:-8px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.7);opacity:0}
.kt-nx-i h3{font-size:clamp(21px,1.75vw,25px);font-weight:600;line-height:1.2;letter-spacing:-.02em;color:#fff;text-wrap:balance}
.kt-nx-i p{max-width:26ch;margin-top:10px;font-size:17px;line-height:1.5;color:var(--on-2);text-wrap:pretty}
/* the road: its middle (y 30 of 60) runs through the centre of the three pins, which sit at 1/6, 3/6, 5/6 of the width */
.kt-nx-road{position:absolute;left:0;top:calc(var(--ah) + var(--pm) + 24px);width:100%;height:auto;transform:translateY(-50%);overflow:visible;pointer-events:none}
.kt-nx-road path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.kt-nx-bed{stroke:rgba(201,210,255,.13);stroke-width:20}
.kt-nx-line{stroke:#fff;stroke-width:3}
html.js .play .kt-nx-line.sq{animation-duration:1.8s;animation-timing-function:linear}
/* where the road starts (the enquiry just sent) and where it lands (a flag after the last stop) */
.kt-nx-road .w{fill:#fff}.kt-nx-road .t{fill:#C9D2FF}
.kt-nx-road .pole{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round}
.kt-nx-road g{transform-box:fill-box;transform-origin:50% 50%}
.kt-nx-road .kt-nx-flag{transform-origin:0 100%}

/* vignettes: flat, drawn for the dark stage (white, #C9D2FF, #8FA0FF, cobalt, navy; .y is for the price tag, off until the owner confirms it) */
.kt-nx-viz .halo{fill:url(#kt-glow);stroke:none}
.kt-nx-viz .floor{fill:#040618;opacity:.35}
.kt-nx-viz .w{fill:#fff}.kt-nx-viz .t{fill:#C9D2FF}.kt-nx-viz .p{fill:#8FA0FF}.kt-nx-viz .c{fill:#2335FF}.kt-nx-viz .n{fill:#0B1233}.kt-nx-viz .y{fill:#FFD43B}
.kt-nx-viz .o5{opacity:.5}.kt-nx-viz .o6{opacity:.6}
.kt-nx-viz .st{stroke:#fff;stroke-width:3}
.kt-nx-viz .hand,.kt-nx-viz .ck,.kt-nx-viz .ck-c,.kt-nx-viz .wave{fill:none;stroke-linecap:round;stroke-linejoin:round}
.kt-nx-viz .hand{stroke:#fff;stroke-width:3}
.kt-nx-viz .ck{stroke:#fff;stroke-width:2.6}
.kt-nx-viz .ck-c{stroke:#2335FF;stroke-width:3}
.kt-nx-viz .wave{stroke:#fff;stroke-width:3}
.kt-nx-viz .tx{font:700 14px var(--f);text-anchor:middle;fill:#2335FF}
.kt-nx-viz .n-tx{fill:#0B1233}
.kt-nx-viz .tl{font:700 14px var(--f);fill:#0B1233;font-variant-numeric:tabular-nums}
.kt-nx-viz .ok-tx{font:700 15px var(--f);fill:#fff;letter-spacing:-.01em}
.kt-nx-viz .ph{fill:none;stroke:#2335FF;stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round}
/* the call follows the channel picked above (66-kontakt.js sets data-kt-call) */
.kt-nx-viz[data-kt-call="phone"] .kt-pip,.kt-nx-viz:not([data-kt-call="phone"]) .kt-ph{display:none}
.kt-nx-viz g{transform-box:fill-box;transform-origin:50% 50%}

/* the other way in: one plain line with the address and a small copy button (lands after the flag) */
.kt-nx-foot{--d0:2.1s;margin-top:clamp(48px,5vw,72px)}
.kt-mrow{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 10px;font-size:17px;line-height:1.4;color:var(--on-2);text-align:center}
.kt-mail{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:5px;overflow-wrap:anywhere}
.kt-mail:hover{text-decoration-color:#fff}
.kt-copy{width:44px;min-height:44px;height:44px;padding:0;flex:none}
.kt-copy .ic{width:19px;height:19px}
.kt-copy:hover .ic{transform:none}
.kt-copy .kt-ic-ok{display:none;stroke-width:2.6}
.kt-copy.is-done .kt-ic-copy{display:none}
.kt-copy.is-done .kt-ic-ok{display:block}

/* toast for the copy button and the booking: a white lit pill on the dark stage */
.kt-toast{position:fixed;left:16px;right:16px;bottom:24px;z-index:95;width:fit-content;max-width:calc(100vw - 32px);margin-inline:auto;padding:14px 22px;border-radius:28px;background:#fff;color:var(--ink);font-size:16px;font-weight:600;line-height:1.35;text-align:center;box-shadow:0 24px 60px -20px rgba(0,0,0,.7);opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .3s,transform .4s var(--ease)}
.kt-toast.on{opacity:1;transform:none}
.kt-toast:empty{display:none}

/* the shared contact card is step 2 here: its audit chips would repeat the hero picture (02-chrome.css .ct-checks) */
.page-kontakt .ct-checks{display:none}

/* ---------- motion (transform/opacity only; loops only while on screen, still with reduced motion) ---------- */
@media (prefers-reduced-motion:no-preference){
  /* hero: the audit rows arrive, a soft scan runs down the list, the two chips float */
  html.js .kt-au-list li:not(.kt-au-scan){animation:kt-row .8s var(--ease) both;animation-delay:calc(.55s + var(--i) * .14s)}
  html.js .kt-au-list em{animation:kt-pop .6s var(--ease) both;animation-delay:calc(.95s + var(--i) * .14s)}
  html.js .kt-au-list .kt-au-scan{animation:kt-scan 7s ease-in-out 1.8s infinite}
  html.js .kt-hv-tk{animation:kt-float 7s ease-in-out infinite alternate}
  html.js .kt-hv-re{animation:kt-float 8s ease-in-out -4s infinite alternate}
  /* next: the one calm loop, the three stops glow in turn (9 s) */
  .kt-next.play.live .kt-nx-pin::after{animation:kt-ping 9s ease-out 3.4s infinite}
  .kt-next.play.live .kt-nx-i:nth-child(2) .kt-nx-pin::after{animation-delay:6.4s}
  .kt-next.play.live .kt-nx-i:nth-child(3) .kt-nx-pin::after{animation-delay:9.4s}
}
@keyframes kt-row{from{opacity:0;transform:translateX(-12px)}}
@keyframes kt-pop{from{opacity:0;transform:scale(.4)}}
@keyframes kt-scan{0%{opacity:0;transform:translateY(-100%)}8%{opacity:1}46%{opacity:1;transform:translateY(400%)}54%,100%{opacity:0;transform:translateY(400%)}}
@keyframes kt-float{from{transform:translateY(0)}to{transform:translateY(-10px)}}
@keyframes kt-ping{0%{opacity:0;transform:scale(.8)}6%{opacity:.8}26%,100%{opacity:0;transform:scale(1.55)}}
@keyframes kt-ping-m{0%{opacity:0;transform:scale(.8)}6%{opacity:.8}26%,100%{opacity:0;transform:scale(1.3)}}
@keyframes kt-growY{from{transform:scaleY(0)}to{transform:none}}
@keyframes kt-repop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes kt-rerise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes kt-refade{from{opacity:0}to{opacity:1}}

/* ---------- layout ---------- */
@media (min-width:1001px){
  /* the day grid fills the calendar column next to the time/channel column */
  html.js .kt-cal-days{display:flex;flex-direction:column}
  html.js .kt-grid{flex:1;grid-auto-rows:minmax(72px,1fr)}
  html.js .kt-d{height:auto}
}
@media (max-width:1000px){
  .kt-cal{grid-template-columns:minmax(0,1fr)}
  .kt-cal-side{border-left:0;border-top:1px solid var(--line)}
  .kt-cal-foot{flex-direction:column;align-items:stretch;padding-top:0;border-top:0}
  .kt-cal-foot .btn{width:100%;min-width:0}
}
@media (max-width:900px){
  .kt-hv-in{padding:46px 0 40px}
  .kt-hv-tk{right:-12px}
  .kt-hv-re{left:-12px}
}
/* phones: the road runs down the left edge, each stop is pin | picture + title + line */
@media (max-width:760px){
  .kt-nx{--ah:172px}
  .kt-nx-road{display:none}
  .kt-nx-list{gap:44px}
  .kt-nx-list{grid-template-columns:1fr}
  .kt-nx-i{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:20px;align-items:start;padding:0;text-align:left}
  .kt-nx-pin{grid-column:1;grid-row:1;margin:0;width:46px;height:46px;font-size:15px;box-shadow:0 0 0 6px rgba(255,255,255,.08)}
  .kt-nx-viz{grid-column:2;grid-row:1;justify-self:start;margin:-6px 0 14px -10px}
  .kt-nx-i h3,.kt-nx-i p{grid-column:2}
  .kt-nx-i h3{font-size:21px}
  .kt-nx-i p{margin-top:6px;font-size:16px}
  /* each stop plays when it reaches the screen: its own clock starts at its pin (desktop keeps the one cascade) */
  .kt-nx-i:nth-child(1){--d0:calc(-2.5 * var(--sq-gap) + .1s)}
  .kt-nx-i:nth-child(2){--d0:calc(-6.6 * var(--sq-gap) + .1s)}
  .kt-nx-i:nth-child(3){--d0:calc(-10.6 * var(--sq-gap) + .1s)}
  .kt-nx-foot{--d0:.1s}
  /* the ping ring stays inside the screen edge and lighter than the road */
  .kt-nx-pin::after{inset:-6px}
  .kt-next.play.live .kt-nx-pin::after{animation-name:kt-ping-m}
  /* the road: one line from pin 01 to pin 03 (segments meet under the pins), on the same translucent bed as on desktop;
     each segment grows down from its stop once that stop plays */
  .kt-nx-i:not(:last-child)::after{content:"";position:absolute;left:21.5px;top:23px;bottom:-67px;width:3px;border-radius:3px;background:linear-gradient(#fff,#C9D2FF);
    box-shadow:0 0 0 8.5px rgba(201,210,255,.13);transform-origin:50% 0}
  html.js .kt-nx-i[data-play]:not(.play)::after{transform:scaleY(0)}
  html.js .kt-nx-i.play::after{animation:kt-growY 1s var(--ease) both;animation-delay:.9s}

  /* the booking card unfolds: days first, the hours after a day, the channel and the button after an hour */
  html.js .kt-cal-side{display:block;max-height:0;padding-block:0;opacity:0;visibility:hidden;overflow:hidden;border-top-color:transparent;
    transition:max-height .7s var(--ease),padding .6s var(--ease),opacity .45s,border-color .45s}
  html.js .kt-cal.kt-s1 .kt-cal-side{max-height:640px;padding-block:22px 4px;opacity:1;visibility:visible;border-top-color:var(--line)}
  html.js .kt-fs-way,html.js .kt-cal-foot{max-height:0;opacity:0;visibility:hidden;overflow:hidden;transition:max-height .7s var(--ease),opacity .45s,margin .6s var(--ease),padding .6s var(--ease)}
  html.js .kt-cal-foot{padding-bottom:0}
  html.js .kt-cal.kt-s2 .kt-fs-way{max-height:260px;margin-top:26px;opacity:1;visibility:visible}
  html.js .kt-cal.kt-s2 .kt-cal-side{padding-bottom:22px}
  html.js .kt-cal.kt-s2 .kt-cal-foot{max-height:300px;padding-bottom:18px;opacity:1;visibility:visible}
  /* the chips pop again as their group unfolds */
  html.js .play .kt-cal.kt-s1 .kt-t.sq.sq-pop{animation-name:kt-repop;animation-delay:calc(.12s + (var(--s) - 5) * .14s)}
  html.js .play .kt-cal.kt-s2 .kt-w.sq{animation-name:kt-rerise;animation-delay:calc(.1s + (var(--s) - 7.4) * .2s)}
  html.js .play .kt-cal.kt-s2 .kt-cal-foot.sq{animation-name:kt-refade;animation-delay:.5s}
  /* the fixed mobile bar sits at the bottom: keep the toast above it */
  .kt-toast{bottom:calc(92px + env(safe-area-inset-bottom))}
}
@media (max-width:560px){
  .kt-hv-in{padding:40px 0 52px}
  .kt-hv-tk{top:0;right:10px}
  .kt-hv-re{bottom:0;left:10px}
  .kt-au{padding:18px 16px 16px;border-radius:24px}
  .kt-au-top{gap:10px;padding-bottom:12px}
  .kt-au-mk{width:40px;height:40px}
  .kt-au-top b{font-size:17px}
  .kt-au-list li{grid-template-columns:36px minmax(0,1fr) 28px;gap:10px;padding:9px 0}
  .kt-au-ic{width:36px;height:36px;border-radius:11px}
  .kt-au-list em{width:28px;height:28px}
  .kt-au-list .kt-au-scan{left:-16px;right:-16px}
  .kt-au-foot{padding:12px 14px}
  .kt-au-foot>b{font-size:32px}
  .kt-hv-tk,.kt-hv-re{padding:8px 14px 8px 8px;border-radius:18px;gap:10px}
  .kt-hv-ic,.kt-hv-av{width:38px;height:38px}
  .kt-hv-tk b,.kt-hv-re b{font-size:15px}

  .kt-cal-days,.kt-cal-side{padding:22px 16px}
  .kt-cal-side{gap:26px}
  .kt-cal-foot{padding:0 16px 18px}
  .kt-dow,.kt-grid{gap:6px}
  .kt-d{height:54px;border-radius:14px}
  .kt-legend{gap:8px 16px}
  .kt-times{gap:6px}
  .kt-t span{height:48px}
  .kt-ways{gap:6px}
  .kt-w span{padding:12px 4px}
  .kt-ticket{padding:12px}
}
@media (max-width:420px){
  /* the address and the copy button stay on one line under the label */
  .kt-mrow{gap:4px 6px;font-size:16px}
}
@media (max-width:400px){
  /* 360–400: the month and the long „continue“ button fit the card instead of widening it past its clip */
  .kt-month{font-size:17px}
  .kt-cal-foot .btn{padding:0 18px;font-size:17px;line-height:1.2;white-space:normal;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .kt-nx-i::after{animation:none!important;transform:none!important}
}

/* hero loops pause while their picture is off-screen (66-kontakt.js toggles .kt-play) */
[data-kt-live]:not(.kt-play) .kt-a,[data-kt-live]:not(.kt-play) .kt-a::before,[data-kt-live]:not(.kt-play) .kt-a::after{animation-play-state:paused}