/* Sticky contact card (see contact-card.js). Uses the site's tokens with fallbacks. */
.cc{position:fixed;right:20px;bottom:20px;z-index:60;display:grid;grid-template-columns:44px auto auto;align-items:center;gap:12px;
  padding:12px 40px 12px 12px;background:#fff;border:1px solid var(--silver,var(--hair,#e3e4ea));border-radius:16px;
  box-shadow:0 14px 40px -12px rgba(16,20,70,.32);font-family:var(--sans,system-ui,sans-serif);color:var(--ink,#14161d);
  opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .35s ease,transform .35s cubic-bezier(.2,.7,.2,1)}
.cc[hidden]{display:none}
.cc.show{opacity:1;transform:none;pointer-events:auto;cursor:pointer}
.cc.show:hover{border-color:var(--navy,#1b2380)}
.cc img{width:44px;height:44px;border-radius:50%;object-fit:cover;display:block}
.cc-t{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.cc-s{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted,var(--slate,#5f6472))}
.cc-s i{flex:none;width:7px;height:7px;border-radius:50%;background:#b8bcc8}
.cc.open .cc-s i{background:#2fa36b}
.cc-t b{font-size:15px;font-weight:700}
.cc-r{font-size:12px;color:var(--muted,var(--slate,#5f6472))}
.cc-go{margin-left:14px;font-weight:600;font-size:14px;color:var(--navy,#1b2380);text-decoration:none;white-space:nowrap}
.cc-go:hover{text-decoration:underline;text-underline-offset:3px}
.cc-x{position:absolute;top:6px;right:8px;width:24px;height:24px;border:0;border-radius:6px;background:none;font-size:18px;line-height:1;color:var(--muted,var(--slate,#5f6472));cursor:pointer}
.cc-x:hover{background:#f1f2f6}
@media (prefers-reduced-motion:reduce){.cc{transition:none}}
/* Message dialog opened from the card */
.ccm{width:min(560px,calc(100vw - 24px));max-height:calc(100vh - 24px);padding:0;border:0;border-radius:20px;background:#fff;color:var(--ink,#14161d);
  font-family:var(--sans,system-ui,sans-serif);box-shadow:0 30px 80px -20px rgba(0,0,0,.45)}
.ccm::backdrop{background:rgba(14,15,22,.55)}
.ccm[open]{animation:ccm-in .25s cubic-bezier(.2,.7,.2,1)}
@keyframes ccm-in{from{opacity:0;transform:translateY(12px) scale(.98)}}
.ccm-h{display:grid;grid-template-columns:48px 1fr 32px;align-items:center;gap:12px;padding:22px 24px 18px;border-bottom:1px solid var(--silver,var(--hair,#e3e4ea))}
.ccm-av{position:relative;width:48px;height:48px}
.ccm-av img{width:48px;height:48px;border-radius:50%;object-fit:cover;display:block}
.ccm-av::after{content:"";position:absolute;right:0;bottom:2px;width:11px;height:11px;border-radius:50%;background:#b8bcc8;border:2px solid #fff}
.ccm-av.open::after{background:#2fa36b}
.ccm-h b{display:block;font-size:16px}
.ccm-h span{font-size:13px;color:var(--muted,var(--slate,#5f6472))}
.ccm-x{width:32px;height:32px;border:0;border-radius:50%;background:#f1f2f6;font-size:18px;line-height:1;cursor:pointer;color:var(--ink,#14161d)}
.ccm-x:hover{background:#e3e5ec}
.ccm-b{padding:20px 24px 12px}
.ccm-b>div{display:none}
.ccm-b[data-step="1"] .ccm-s1,.ccm-b[data-step="2"] .ccm-s2,.ccm-b[data-step="3"] .ccm-s3{display:block}
.ccm-bubble{display:inline-block;margin:0 0 18px;padding:12px 14px;border-radius:14px 14px 14px 4px;background:#f1f2f6;font-size:15px;line-height:1.45}
.ccm-bubble small{display:block;margin-top:4px;font-size:12px;color:var(--muted,var(--slate,#5f6472))}
.ccm-q{margin:0 0 14px;font-weight:600}
.ccm label{display:block;font-size:13px;font-weight:600}
.ccm textarea,.ccm input:not([type=checkbox]){display:block;width:100%;margin-top:6px;padding:10px 12px;font-size:15px;line-height:1.5;font-family:inherit;color:inherit;
  border:1px solid var(--silver,var(--hair,#d9dbe3));border-radius:10px;background:#fafafb;box-sizing:border-box}
.ccm textarea{resize:vertical;min-height:120px}
.ccm textarea:focus,.ccm input:focus{outline:2px solid var(--navy,#1b2380);outline-offset:0;border-color:var(--navy,#1b2380);background:#fff}
.ccm-g{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.ccm-ok{display:flex!important;gap:10px;align-items:flex-start;margin-top:14px;font-weight:400!important;font-size:12.5px!important;line-height:1.45;color:var(--muted,var(--slate,#5f6472))}
.ccm-ok input{flex:none;appearance:none;-webkit-appearance:none;width:18px;height:18px;margin:1px 0 0;border:1.5px solid #b9bcc8;border-radius:5px;background:#fff center/12px no-repeat;cursor:pointer;transition:background-color .15s,border-color .15s}
.ccm-ok input:hover{border-color:var(--navy,#1b2380)}
.ccm-ok input:checked{background-color:var(--navy,#1b2380);border-color:var(--navy,#1b2380);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.ccm-ok input:focus-visible{outline:2px solid var(--navy,#1b2380);outline-offset:2px}
.ccm-ok a{color:inherit}
.ccm-f{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0 12px}
.ccm-n{font-size:12px;color:var(--muted,var(--slate,#5f6472))}
.ccm-next,.ccm-send{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border:0;border-radius:999px;background:var(--navy,#1b2380);color:#fff;font-weight:600;font-size:14px;line-height:1;font-family:inherit;cursor:pointer}
.ccm-next:disabled{opacity:.4;cursor:default}
.ccm-next svg,.ccm-send svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ccm-back{border:0;background:none;padding:8px 0;font-weight:500;font-size:14px;line-height:1;font-family:inherit;color:var(--muted,var(--slate,#5f6472));cursor:pointer}
.ccm-hint{margin:12px 0 0;font-size:12.5px;color:var(--muted,var(--slate,#5f6472))}
.ccm-when{display:none!important;margin-top:10px}
.has-phone .ccm-when{display:block!important}
.ccm-ts{margin-top:14px;min-height:0}
.ccm-ts:empty{display:none}
@media (max-width:600px){.ccm-g{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.ccm[open]{animation:none}}
/* Back-to-top button: above the card while the card is shown */
.to-top{position:fixed;right:20px;bottom:20px;z-index:59;width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--silver,var(--hair,#e3e4ea));border-radius:50%;
  background:#fff;color:var(--navy,#1b2380);box-shadow:0 8px 24px -10px rgba(16,20,70,.35);cursor:pointer;opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .3s ease,transform .3s ease,bottom .3s ease}
.to-top svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:var(--navy,#1b2380);color:#fff}
.has-cc .to-top{bottom:112px}
@media (max-width:600px){.has-cc .to-top{bottom:84px;right:19px}}
@media (prefers-reduced-motion:reduce){.to-top{transition:none}}
/* Mockup only: move the headline-font picker out of the card's corner */
.fontswitch{left:16px!important;right:auto!important}
.mock-note{left:16px!important;right:auto!important;bottom:64px!important}

/* Phones: the card shrinks to a round avatar button at the bottom right (tap opens the message dialog),
   so it no longer covers the content. The text and the close button are only shown on larger screens. */
@media (max-width:600px){
  .cc{left:auto;right:14px;bottom:14px;display:block;padding:3px;border-radius:50%;width:auto}
  .cc-t,.cc-go,.cc-x{display:none}
  .cc img{width:54px;height:54px}
  .cc::after{content:"";position:absolute;right:3px;bottom:3px;width:12px;height:12px;border-radius:50%;background:#b8bcc8;border:2px solid #fff}
  .cc.open::after{background:#2fa36b}
  body:has(.cc.show) .to-top{bottom:86px;right:22px}
}

/* card visible: the back-to-top button sits above it (the card would cover it otherwise) */
body:has(.cc.show) .to-top{bottom:112px}
@media (max-width:600px){body:has(.cc.show) .to-top{bottom:86px;right:22px}}
/* fasannet.at: send error in the dialogs (contact-card.js FN.fallback) */
.ccm-err{margin:12px 0 0;padding:10px 12px;border:1px solid #b3261e;border-radius:10px;background:#fdf0ef;font-size:14px;line-height:1.5;color:#000}
.ccm-err a{color:inherit}
.ccm-b[data-busy] .ccm-send{opacity:.6;pointer-events:none}
