/* SK1 Smart Kontakt 1.2.2 - auto-sized speech bubble for short and long text. */
#sk1-sc-root.sk1-sc {
  --sk1-sc-ink: #172639;
  --sk1-sc-muted: #657386;
  --sk1-sc-border: #e1e8ee;
  --sk1-sc-accent: #176e93;
  position: fixed;
  z-index: 2147483000;
  right: 20px;
  bottom: calc(var(--sk1-sc-bottom-desktop, 24px) + env(safe-area-inset-bottom, 0px));
  width: max-content;
  max-width: calc(100vw - 24px);
  color: var(--sk1-sc-ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.45;
  text-align: left;
  direction: ltr;
  isolation: isolate;
  pointer-events: none;
}
#sk1-sc-root *, #sk1-sc-root *::before, #sk1-sc-root *::after { box-sizing: border-box; }
#sk1-sc-root [hidden] { display: none !important; }
#sk1-sc-root button, #sk1-sc-root input, #sk1-sc-root select, #sk1-sc-root textarea { font: inherit; }
#sk1-sc-root button { cursor: pointer; }
#sk1-sc-root .sk1-sc-launcher {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  pointer-events: auto;
}
#sk1-sc-root .sk1-sc-avatar-button {
  width: 74px; height: 74px; flex: 0 0 74px; padding: 3px;
  border-radius: 50%; border: 3px solid #fff; background: #fff;
  box-shadow: 0 4px 22px rgba(21, 44, 62, .27);
  position: relative; display: flex; align-items: center; justify-content: center;
  transition: transform .18s ease, box-shadow .18s ease;
}
#sk1-sc-root .sk1-sc-avatar-button:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(21, 44, 62, .33); }
#sk1-sc-root .sk1-sc-avatar-button img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; display: block; }
#sk1-sc-root .sk1-sc-avatar-indicator {
  position: absolute; width: 29px; height: 29px; display: grid; place-items: center;
  right: -6px; top: -6px; background: var(--sk1-sc-accent); border: 3px solid #fff;
  border-radius: 50%; color: #fff; box-shadow: 0 2px 7px rgba(0,0,0,.12);
}
#sk1-sc-root .sk1-sc-avatar-indicator svg { width: 15px; height: 15px; }
/* Size the invitation to its text, never a fixed width/height. Max width prevents
   long messages extending off-screen; the copy scrolls only on very short viewports.
   Explicit sizing also overrides themes that force all buttons to width: 100%. */
#sk1-sc-root .sk1-sc-teaser {
  display: block;
  flex: 0 1 auto;
  width: max-content;
  max-width: min(290px, calc(100vw - 130px));
  height: auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  color: #172639;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  white-space: normal;
  text-transform: none;
  padding: 10px 13px;
  text-align: left;
  background: #fff;
  border: 1px solid #e4ebf0;
  border-radius: 15px;
  box-shadow: 0 5px 24px rgba(18, 32, 52, .15);
  position: relative;
  animation: sk1-sc-teaser-appear .35s ease var(--sk1-sc-teaser-delay, 7s) both;
}
#sk1-sc-root .sk1-sc-teaser-copy {
  display: block;
  width: auto;
  height: auto;
  max-height: min(260px, 42dvh);
  overflow-x: hidden;
  overflow-y: auto;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}
#sk1-sc-root .sk1-sc-teaser::after {
  content: ""; position: absolute; right: -7px; top: 50%; width: 14px; height: 14px;
  background: #fff; border-right: 1px solid #e4ebf0; border-top: 1px solid #e4ebf0;
  transform: translateY(-50%) rotate(45deg);
}
#sk1-sc-root .sk1-sc-panel {
  width: min(380px, calc(100vw - 28px));
  position: absolute; right: 0; bottom: calc(74px + 14px);
  pointer-events: auto;
  display: flex; flex-direction: column;
  max-height: min(660px, calc(100dvh - var(--sk1-sc-bottom-desktop, 24px) - 113px));
  overflow: hidden; border: 1px solid #e6ecf1; border-radius: 20px;
  background: #fff; box-shadow: 0 18px 60px rgba(14, 35, 57, .26);
  animation: sk1-sc-panel-open .22s both;
}
#sk1-sc-root .sk1-sc-panel-header {
  min-height: 75px; padding: 12px 16px; background: #f7fafc;
  display: flex; flex: 0 0 auto; align-items: center; gap: 11px;
  border-bottom: 1px solid var(--sk1-sc-border);
}
#sk1-sc-root .sk1-sc-panel-header > img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; }
#sk1-sc-root .sk1-sc-heading-group { display: flex; flex-direction: column; gap: 0; flex: 1 1 auto; min-width: 0; }
#sk1-sc-root .sk1-sc-heading-group strong { font-size: 15px; font-weight: 750; line-height: 1.3; }
#sk1-sc-root .sk1-sc-heading-group span { color: var(--sk1-sc-muted); font-size: 12px; }
#sk1-sc-root .sk1-sc-icon-button {
  display: grid; place-items: center; width: 38px; height: 38px; padding: 0;
  flex: 0 0 38px; border: 0; background: transparent; border-radius: 10px; color: #52677a;
}
#sk1-sc-root .sk1-sc-icon-button:hover { background: #e8eff4; }
#sk1-sc-root .sk1-sc-panel-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 19px 20px 18px; flex: 1 1 auto; }
#sk1-sc-root h2 { font-size: 20px; line-height: 1.24; letter-spacing: -.25px; font-weight: 750; margin: 0 0 9px; padding: 0; color: var(--sk1-sc-ink); }
#sk1-sc-root p { font-size: 14px; color: var(--sk1-sc-muted); line-height: 1.5; margin: 0 0 17px; }
#sk1-sc-root .sk1-sc-actions { display: flex; flex-direction: column; gap: 10px; }
#sk1-sc-root .sk1-sc-action {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  text-decoration: none; font-weight: 700; font-size: 15px; line-height: 1.2;
  padding: 13px 12px; min-height: 48px; width: 100%;
  border-radius: 11px; transition: background-color .15s, transform .15s;
}
#sk1-sc-root .sk1-sc-action:hover { transform: translateY(-1px); }
#sk1-sc-root .sk1-sc-action-main { color: #fff; background: var(--sk1-sc-accent); border: 2px solid var(--sk1-sc-accent); }
#sk1-sc-root .sk1-sc-action-main:hover { filter: brightness(.91); color: #fff; }
#sk1-sc-root .sk1-sc-action-outline { color: var(--sk1-sc-ink); background: #fff; border: 1.5px solid #d6e0e8; }
#sk1-sc-root .sk1-sc-action-outline:hover { background: #f5f9fc; }
#sk1-sc-root .sk1-sc-panel-footer {
  border-top: 1px solid #e5edf2; background: #fafcfd; flex: 0 0 auto;
  padding: 10px 15px; text-align: center; color: #6b7785; font-size: 11px; line-height: 1.3;
}
#sk1-sc-root .sk1-sc-back {
  margin: 0 0 12px; padding: 5px 0; display: inline-flex; align-items: center;
  gap: 3px; color: #3b6883; font-weight: 600; font-size: 13px; border: 0; background: transparent;
}
#sk1-sc-root .sk1-sc-back svg { width: 16px; height: 16px; }
#sk1-sc-root .sk1-sc-field { display: flex; flex-direction: column; margin: 0 0 12px; min-width: 0; }
#sk1-sc-root .sk1-sc-field-row { display: grid; grid-template-columns: 1.3fr .7fr; gap: 10px; }
#sk1-sc-root label { display: block; font-size: 13px; font-weight: 650; margin-bottom: 5px; color: #243445; }
#sk1-sc-root .sk1-sc-field input:not([type="file"]),
#sk1-sc-root .sk1-sc-field select,
#sk1-sc-root .sk1-sc-field textarea {
  width: 100%; border: 1px solid #ccd8e2; border-radius: 9px;
  background: #fff; color: #182839; font-size: 16px; padding: 10px 11px;
  min-height: 42px; line-height: 1.3; outline-offset: 2px;
}
#sk1-sc-root .sk1-sc-field textarea { min-height: 92px; resize: vertical; }
#sk1-sc-root .sk1-sc-field input[type="file"] { font-size: 12px; width: 100%; max-width: 100%; padding: 4px 0; color: #3a495b; }
#sk1-sc-root .sk1-sc-field small { color: #687787; font-size: 11px; margin-top: 5px; }
#sk1-sc-root .sk1-sc-checkbox { display: flex; align-items: flex-start; gap: 9px; font-weight: 400; font-size: 12px; line-height: 1.45; margin: 12px 0 15px; }
#sk1-sc-root .sk1-sc-checkbox input { flex: 0 0 auto; width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--sk1-sc-accent); }
#sk1-sc-root .sk1-sc-checkbox a { color: var(--sk1-sc-accent); text-decoration: underline; }
#sk1-sc-root .sk1-sc-feedback { margin: 0 0 10px; padding: 10px; border: 1px solid #e8bfbb; background: #fff4f2; color: #802f29; border-radius: 8px; font-size: 13px; }
#sk1-sc-root .sk1-sc-feedback.is-info { border-color: #d2e6ef; background: #eef8fc; color: #31586a; }
#sk1-sc-root .sk1-sc-submit[disabled] { cursor: wait; opacity: .65; }
#sk1-sc-root .sk1-sc-honeypot { position: absolute !important; width: 1px; height: 1px; overflow: hidden; left: -10000px; }
#sk1-sc-root .sk1-sc-success-icon { margin-bottom: 12px; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; color: #17643a; background: #e5f4eb; }
#sk1-sc-root .sk1-sc-success-icon + h2 { margin-bottom: 12px; }
#sk1-sc-root button:focus-visible, #sk1-sc-root a:focus-visible, #sk1-sc-root input:focus-visible, #sk1-sc-root textarea:focus-visible, #sk1-sc-root select:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; }
/* The invitation is visible even if frontend.js fails to load; CSS provides the delay. */
#sk1-sc-root .sk1-sc-teaser.sk1-sc-teaser-returned { animation-delay: 0s; }
@keyframes sk1-sc-teaser-appear { from {opacity: 0; visibility: hidden; transform: translateY(6px)} to {opacity: 1; visibility: visible; transform: none} }
@keyframes sk1-sc-panel-open { from {opacity: 0; transform: translateY(9px)} to {opacity: 1; transform: none} }
/* Breakpoint for invitation targeting: mobile <=767px, desktop >=768px. */
@media (max-width: 767px) {
  #sk1-sc-root[data-teaser-devices="desktop"] .sk1-sc-teaser { display: none !important; }
}
@media (min-width: 768px) {
  #sk1-sc-root[data-teaser-devices="mobile"] .sk1-sc-teaser { display: none !important; }
}
@media (max-width: 620px) {
  #sk1-sc-root.sk1-sc { right: 14px; bottom: calc(var(--sk1-sc-bottom-mobile, 96px) + env(safe-area-inset-bottom, 0px)); }
  #sk1-sc-root .sk1-sc-avatar-button { width: 66px; height: 66px; flex-basis: 66px; }
  #sk1-sc-root .sk1-sc-teaser { max-width: min(240px, calc(100vw - 110px)); font-size: 13px; padding: 10px 12px; border-radius: 14px; }
  #sk1-sc-root .sk1-sc-teaser-copy { max-height: min(230px, 38dvh); }
  #sk1-sc-root .sk1-sc-panel { bottom: 78px; max-height: calc(100dvh - var(--sk1-sc-bottom-mobile, 96px) - 104px); }
  #sk1-sc-root .sk1-sc-panel-scroll { padding: 16px 15px; }
  #sk1-sc-root .sk1-sc-field-row { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 380px) {
  #sk1-sc-root .sk1-sc-panel { width: calc(100vw - 24px); right: -3px; }
  #sk1-sc-root .sk1-sc-teaser { max-width: calc(100vw - 113px); }
}
@media (prefers-reduced-motion: reduce) {
  #sk1-sc-root .sk1-sc-panel, #sk1-sc-root .sk1-sc-teaser { animation: none; }
  #sk1-sc-root .sk1-sc-action, #sk1-sc-root .sk1-sc-avatar-button { transition: none; }
}
