/* Slalom motif from the gift card (dashed line + cones), on every page since 26.10.2026 (includes/kr-look.php).
   Rules sit under :root:not(.kr-look-off) so the preview badge (preview mode only) can switch the layer off for comparison.
   Colours: ink on light, yellow on dark; the card stays yellow. */
:root { --sl-line: #1d1d1b; --sl-cone: #1d1d1b; --sl-stripe: #f4b301; }
[data-theme="dark"], body.dark-mode { --sl-line: #f4b301; --sl-cone: #f4b301; --sl-stripe: #1d1d1b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sl-line: #f4b301; --sl-cone: #f4b301; --sl-stripe: #1d1d1b; } }

.kr-sl-line { fill: none; stroke: var(--sl-line); stroke-width: 10; stroke-dasharray: 34 26; stroke-linecap: round; }
.kr-sl-thin { stroke-width: 4; stroke-dasharray: 14 10; }
.kr-sl-h { stroke-width: 8; stroke-dasharray: 28 21; }
.kr-c-b { fill: var(--sl-cone); }
.kr-c-s { fill: var(--sl-stripe); }
.kr-c-ground { fill: none; stroke: var(--sl-line); stroke-width: 3; stroke-linecap: round; }
.kr-sl-reveal { fill: none; stroke: #fff; stroke-width: 14; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.kr-look-off .kr-sl-rail, .kr-look-off .kr-slalom { display: none !important; }

/* 1. Course steps: the line runs through the step numbers, a cone stands in every bend (drawn by kr-slalom.js) */
.kr-sl-wrap { position: relative; }
.kr-sl-rail { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
:root:not(.kr-look-off) .pg-steps.kr-sl-path { counter-reset: kr-step; padding-left: 64px; position: relative; z-index: 1; }
:root:not(.kr-look-off) .pg-steps.kr-sl-path > li { counter-increment: kr-step; position: relative; border-left: 0; border-radius: 12px; }
:root:not(.kr-look-off) .pg-steps.kr-sl-path > li::before { content: counter(kr-step); position: absolute; left: -58px; top: 10px; width: 38px; height: 38px;
  box-sizing: border-box; border-radius: 50%; display: grid; place-items: center; background: var(--bg-color);
  border: 3px solid var(--sl-line); color: var(--text-main); font: 800 1.05rem/1 var(--font-heading); }
:root:not(.kr-look-off) .path-timeline > .kr-sl-rail { z-index: 1; }
:root:not(.kr-look-off) .path-timeline .path-step:not(.magic-step) .step-num { border: 3px solid var(--sl-line); color: var(--text-main); background: var(--bg-color); }
/* /start: the guide's five steps, numbers in circles in the margin (the «1.» of each title is hidden by kr-slalom.js) */
:root:not(.kr-look-off) .sg-steps { position: relative; counter-reset: kr-step; }
:root:not(.kr-look-off) .sg-steps > .sg-step-box { counter-increment: kr-step; position: relative; z-index: 1; margin: 0 0 1.9rem 64px; }
:root:not(.kr-look-off) .sg-steps > .sg-step-box::before { content: counter(kr-step); position: absolute; left: -58px; top: -6px; width: 38px; height: 38px;
  box-sizing: border-box; border-radius: 50%; display: grid; place-items: center; background: var(--bg-color);
  border: 3px solid var(--sl-line); color: var(--text-main); font: 800 1.05rem/1 var(--font-heading); }
:root:not(.kr-look-off) .sg-steps > .sg-step-box > .sg-step-title { margin: 0 0 .45rem; }
:root:not(.kr-look-off) .kr-sl-n { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .kr-sl-rail .kr-sl-reveal { transition: stroke-dashoffset 1.6s cubic-bezier(.22, .61, .36, 1); }
  .kr-sl-rail:not(.is-in) .kr-sl-reveal { stroke-dashoffset: 1; }
  .kr-sl-rail .kr-sl-cone { transition: opacity .35s ease-out; }
  .kr-sl-rail:not(.is-in) .kr-sl-cone { opacity: 0; }
}

/* 2. The closing call to action looks like the gift card: yellow in both themes, ink text and button, slalom on the right */
:root:not(.kr-look-off) :is(.kr-cta-card, .pg-cta:has(.pg-cta-contact), .pg-cta:has(a[href="#kk-tellimus"]), .footer-cta) { position: relative; overflow: hidden; text-align: left !important; background: var(--brand-yellow) !important; border: 0 !important;
  border-radius: 20px; padding: 2.5rem 2.75rem 2rem !important; color: var(--brand-ink);
  --sl-line: #1d1d1b; --sl-cone: #1d1d1b; --sl-stripe: #f4b301; }
:root:not(.kr-look-off) :is(.kr-cta-card, .pg-cta:has(.pg-cta-contact), .pg-cta:has(a[href="#kk-tellimus"]), .footer-cta) > h2, :root:not(.kr-look-off) :is(.kr-cta-card, .pg-cta:has(.pg-cta-contact), .pg-cta:has(a[href="#kk-tellimus"]), .footer-cta) > .btn, :root:not(.kr-look-off) :is(.kr-cta-card, .pg-cta:has(.pg-cta-contact), .pg-cta:has(a[href="#kk-tellimus"]), .footer-cta) > .footer-desc { position: relative; max-width: calc(100% - 170px) !important; }
:root:not(.kr-look-off) :is(.kr-cta-card, .pg-cta:has(.pg-cta-contact), .pg-cta:has(a[href="#kk-tellimus"]), .footer-cta) > h2 { text-align: left !important; color: var(--brand-ink) !important; font-size: clamp(1.6rem, 3vw, 2.25rem) !important;
  line-height: 1.08; margin: 0 0 1.4rem !important; letter-spacing: -0.01em; text-wrap: balance; }
:root:not(.kr-look-off) :is(.kr-cta-card, .pg-cta:has(.pg-cta-contact), .pg-cta:has(a[href="#kk-tellimus"]), .footer-cta) > .footer-desc { color: #4a3d12 !important; margin: 0 0 1.6rem !important; text-align: left; font-size: 1.1rem !important; }
:root:not(.kr-look-off) :is(.kr-cta-card, .pg-cta:has(.pg-cta-contact), .pg-cta:has(a[href="#kk-tellimus"]), .footer-cta) .btn-primary { background: var(--brand-ink) !important; color: var(--brand-yellow) !important; border-color: var(--brand-ink) !important; box-shadow: none !important; }
:root:not(.kr-look-off) :is(.kr-cta-card, .pg-cta:has(.pg-cta-contact), .pg-cta:has(a[href="#kk-tellimus"]), .footer-cta) .btn-primary:hover { background: #000 !important; border-color: #000 !important; }
:root:not(.kr-look-off) :is(.kr-cta-card, .pg-cta:has(.pg-cta-contact), .pg-cta:has(a[href="#kk-tellimus"]), .footer-cta) a:focus-visible { outline: 3px solid var(--brand-ink); outline-offset: 3px; }
:root:not(.kr-look-off) :is(.kr-cta-card, .pg-cta:has(.pg-cta-contact), .pg-cta:has(a[href="#kk-tellimus"]), .footer-cta) .pg-cta-contact { position: relative; margin: 1.9rem 0 0; padding: .9rem 150px 0 0; border-top: 3px solid var(--brand-ink); color: var(--brand-ink); font-size: 1rem; }
:root:not(.kr-look-off) :is(.kr-cta-card, .pg-cta:has(.pg-cta-contact), .pg-cta:has(a[href="#kk-tellimus"]), .footer-cta) .pg-cta-contact a { color: var(--brand-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
:root:not(.kr-look-off) :is(.kr-cta-card, .pg-cta:has(.pg-cta-contact), .pg-cta:has(a[href="#kk-tellimus"]), .footer-cta) > .kr-slalom-v { position: absolute; right: 44px; top: -30px; height: calc(100% + 60px); width: auto; }
:root:not(.kr-look-off) :is(.kr-cta-card, .pg-cta:has(.pg-cta-contact), .pg-cta:has(a[href="#kk-tellimus"]), .footer-cta) > .kr-slalom-h { display: none; }
:root:not(.kr-look-off) .footer-cta { max-width: 860px; margin-left: auto !important; margin-right: auto !important; }
:root:not(.kr-look-off) .footer-cta > .btn { font-size: 1.1rem !important; padding: 1rem 2.4rem !important; }

/* /start's own closing card: an h3 and the registration button */
:root:not(.kr-look-off) .kr-cta-start { box-shadow: none !important; }
:root:not(.kr-look-off) .kr-cta-start > h3 { position: relative; max-width: calc(100% - 170px) !important; text-align: left !important; color: var(--brand-ink) !important;
  font-size: clamp(1.6rem, 3vw, 2.25rem) !important; line-height: 1.08; margin: 0 0 1.4rem !important; letter-spacing: -0.01em; text-wrap: balance; }
:root:not(.kr-look-off) .kr-cta-start > .btn { position: relative; }

/* 3. 404: the line leaves the course, the last cone lies on the ground */
:root:not(.kr-look-off) .pg-wrap.kr-404 { position: relative; }
.kr-404art { position: absolute; right: 20px; top: 0; height: 340px; width: auto; }

@media (max-width: 700px) {
  :root:not(.kr-look-off) .pg-steps.kr-sl-path { padding-left: 52px; }
  :root:not(.kr-look-off) .pg-steps.kr-sl-path > li::before { left: -50px; width: 34px; height: 34px; font-size: .95rem; }
  :root:not(.kr-look-off) .sg-steps > .sg-step-box { margin-left: 52px; }
  :root:not(.kr-look-off) .sg-steps > .sg-step-box::before { left: -50px; width: 34px; height: 34px; font-size: .95rem; }
  .kr-404art { position: static; display: block; height: 200px; margin: 2rem auto 0; }
}
@media (max-width: 600px) {
  :root:not(.kr-look-off) :is(.kr-cta-card, .pg-cta:has(.pg-cta-contact), .pg-cta:has(a[href="#kk-tellimus"]), .footer-cta) { padding: 0 1.4rem 1.5rem !important; }
  :root:not(.kr-look-off) :is(.kr-cta-card, .pg-cta:has(.pg-cta-contact), .pg-cta:has(a[href="#kk-tellimus"]), .footer-cta) > .kr-slalom-v { display: none; }
  :root:not(.kr-look-off) :is(.kr-cta-card, .pg-cta:has(.pg-cta-contact), .pg-cta:has(a[href="#kk-tellimus"]), .footer-cta) > .kr-slalom-h { display: block; position: relative; width: calc(100% + 2.8rem); height: auto; margin: .2rem -1.4rem .6rem; }
  :root:not(.kr-look-off) :is(.kr-cta-card, .pg-cta:has(.pg-cta-contact), .pg-cta:has(a[href="#kk-tellimus"]), .footer-cta) > h2, :root:not(.kr-look-off) :is(.kr-cta-card, .pg-cta:has(.pg-cta-contact), .pg-cta:has(a[href="#kk-tellimus"]), .footer-cta) > .btn, :root:not(.kr-look-off) :is(.kr-cta-card, .pg-cta:has(.pg-cta-contact), .pg-cta:has(a[href="#kk-tellimus"]), .footer-cta) > .footer-desc { max-width: none !important; }
  :root:not(.kr-look-off) :is(.kr-cta-card, .pg-cta:has(.pg-cta-contact), .pg-cta:has(a[href="#kk-tellimus"]), .footer-cta) > h2 { font-size: 1.55rem !important; }
  :root:not(.kr-look-off) :is(.kr-cta-card, .pg-cta:has(.pg-cta-contact), .pg-cta:has(a[href="#kk-tellimus"]), .footer-cta) .pg-cta-contact { padding-right: 0; }
  :root:not(.kr-look-off) .kr-cta-start > h3 { max-width: none !important; font-size: 1.55rem !important; }
}

/* Preview badge: says what the visitor is looking at, switches the layer off and on, leaves the preview */
.kr-look-badge { position: fixed; left: 12px; bottom: 12px; z-index: 9990; display: flex; align-items: center; gap: .55rem;
  max-width: calc(100vw - 24px); padding: .4rem .45rem .4rem .85rem; background: #1d1d1b; color: #fff; border-radius: 999px;
  font: 600 .8rem/1.2 var(--font-body, sans-serif); box-shadow: 0 8px 24px rgba(0, 0, 0, .28); }
.kr-look-badge .kr-look-dot { width: 8px; height: 8px; border-radius: 50%; background: #f4b301; flex: none; }
.kr-look-badge button { font: inherit; border: 0; border-radius: 999px; padding: .4rem .75rem; background: #f4b301; color: #1d1d1b; cursor: pointer; white-space: nowrap; }
.kr-look-badge button:hover { background: #e0a400; }
.kr-look-badge a { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 50%; color: #fff; flex: none; }
.kr-look-badge a:hover { background: rgba(255, 255, 255, .12); }
.kr-look-badge svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; fill: none; }
.kr-look-badge button:focus-visible, .kr-look-badge a:focus-visible { outline: 2px solid #f4b301; outline-offset: 2px; }
@media (max-width: 420px) { .kr-look-badge .kr-look-name { display: none; } }
/* the cookie card comes first: the badge waits until it is answered */
body:has(#kr-consent:not([hidden]):not(.is-away)) .kr-look-badge { display: none; }