/* Kolitsch site helpers. Colours, radius and font are the brand values in brand-guide.html. */
:root { --kd-primary: #2B27EA; --kd-ink: #0F0F0F; --kd-grey: #595959;  /* brand grey #7D7D7D fails 4.5:1 on small text */ --kd-surface: #F1F5FF; --kd-line: #E3E3F8; }
.kd-tab, .kd-panel, .kd-menu, .kd-yt-note { font-family: "Oxygen", "Oxygen Placeholder", sans-serif; }
.kd-tab svg, .kd-panel svg, .kd-menu svg { width: 22px; height: 22px; fill: currentColor; flex: none; }

/* sticky side button: a tab on the right edge (desktop), a round button bottom right (phone) */
.kd-tab {
  position: fixed; z-index: 2147483000; right: 0; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 16px 12px; border: 0; border-radius: 8px 0 0 8px; cursor: pointer;
  background: var(--kd-primary); color: #fff; font-size: 15px; letter-spacing: .2px;
  box-shadow: 0 8px 24px rgba(43, 39, 234, .28);
}
.kd-tab span { writing-mode: vertical-rl; transform: rotate(180deg); }
.kd-tab:focus-visible, .kd-panel a:focus-visible, .kd-x:focus-visible, .kd-menu a:focus-visible,
[data-framer-name="Acordion Top"]:focus-visible, .framer-qs1afv:focus-visible {
  outline: 3px solid var(--kd-primary); outline-offset: 2px;
}

.kd-layer { position: fixed; inset: 0; z-index: 2147483001; }
.kd-layer[hidden], .kd-menu[hidden] { display: none; }
.kd-backdrop { position: absolute; inset: 0; background: rgba(15, 15, 15, .35); }
.kd-panel {
  position: absolute; right: 0; top: 0; bottom: 0; width: min(380px, 100%); overflow-y: auto;
  background: #fff; color: var(--kd-ink); padding: 24px; box-shadow: -20px 0 60px rgba(0, 0, 0, .12);
  border-radius: 25px 0 0 25px; display: flex; flex-direction: column; gap: 8px;
}
.kd-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.kd-head h2 { margin: 0; font: 700 22px/1.3 "Oxygen", sans-serif; color: var(--kd-ink); }
.kd-x { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--kd-surface); color: var(--kd-ink); cursor: pointer; }
.kd-book, .kd-row { display: flex; align-items: center; gap: 14px; text-decoration: none; border-radius: 8px; padding: 14px 16px; }
.kd-book { background: var(--kd-primary); color: #fff; min-height: 58px; }
.kd-row { color: var(--kd-ink); background: var(--kd-surface); }
.kd-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--kd-primary); flex: none; }
.kd-book b, .kd-row b { display: block; font-weight: 700; font-size: 16px; }
.kd-book small, .kd-row small { display: block; font-size: 14px; line-height: 1.45; color: var(--kd-grey); word-break: break-word; }
.kd-book small { color: rgba(255, 255, 255, .85); }
.kd-note { margin: 8px 4px 0; font-size: 14px; color: var(--kd-grey); }

/* phone menu */
.kd-menu { position: fixed; inset: 0; z-index: 2147483002; background: #fff; padding: 20px; overflow-y: auto; }
.kd-menu .kd-x { margin-left: auto; }
.kd-menu nav { display: flex; flex-direction: column; gap: 4px; margin-top: 16px; }
.kd-menu nav a { font-size: 22px; color: var(--kd-ink); text-decoration: none; padding: 14px 4px; border-bottom: 1px solid var(--kd-line); }
.kd-menu nav a.kd-menu-book { margin-top: 20px; border: 0; border-radius: 8px; background: var(--kd-primary); color: #fff; text-align: center; font-size: 17px; padding: 18px; }
.kd-menu nav a.kd-menu-lang { border: 0; text-align: center; font-size: 16px; color: var(--kd-primary); }
.framer-qs1afv { cursor: pointer; }

/* FAQ boxes and video */
[data-framer-name="Acordion Top"] { cursor: pointer; }
/* phones: no tap delay, and hover looks only where a real mouse exists (iOS can swallow a first tap on hover) */
.kd-tab, .kd-x, .kd-row, .kd-book, .kd-menu a, .framer-qs1afv, [data-framer-name="Acordion Top"] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) and (pointer: fine) {
  .kd-tab:hover { filter: brightness(1.08); }
  .kd-row:hover { background: var(--kd-line); }
}
[data-framer-name="Acordion Top"] svg { transition: transform .2s ease; }
[data-framer-name="Acordion Bottom"][hidden] { display: none !important; }
.kd-yt-note {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 2; pointer-events: none;
  border-radius: 8px; padding: 6px 12px; background: rgba(15, 15, 15, .65); color: #fff; font-size: 13px; white-space: nowrap;
}

@media (max-width: 779.98px) {
  .kd-tab {
    top: auto; transform: none; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom));
    width: 58px; height: 58px; padding: 0; border-radius: 50%; justify-content: center;
  }
  .kd-tab span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .kd-tab svg { width: 28px; height: 28px; }
  .kd-panel {
    top: auto; left: 0; width: 100%; max-height: 88vh; border-radius: 25px 25px 0 0;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }
}
@media (prefers-reduced-motion: reduce) { [data-framer-name="Acordion Top"] svg { transition: none; } }