/* Start custom CSS *//* Support – Themen: Custom CSS of the page "Support". Generated from snippets/support-topics.css by
   tools/build-support-topics.py; edit the source, not this file. */ :is(.cksup-search, .cksup-topics, .cksup-chip, .cksup-title, .cksup-body) {
  --u: var(--ck-design-unit);
  --cksup-surface: var(--surface-soft, #F2F2F6);
  --cksup-muted: var(--text-muted, #606060);
  --cksup-red: var(--brand-orange-text, #C62816);
  box-sizing: border-box;
  font-family: var(--brand-font), sans-serif;
}

/* Hub search */ .cksup-search {
  position: relative;
  display: flex;
  align-items: center;
  width: calc(948 * var(--u));
  max-width: 100%;
  height: calc(83 * var(--u));
  margin: 0 auto;
  padding: 0 calc(8 * var(--u)) 0 calc(43 * var(--u));
  border-radius: calc(83 * var(--u));
  background: var(--text-light);
}

.cksup-search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
  color: var(--text-dark);
  font: 400 calc(24 * var(--u))/1 var(--brand-font), sans-serif;
  letter-spacing: -0.01em;
}

.cksup-search input[type="search"]::placeholder {
  color: var(--cksup-muted);
  opacity: 1;
}

.cksup-search input[type="search"]::-webkit-search-cancel-button {
  display: none;
}

/* Focus frame as the blog search (Elementor search widget): thin black ring on the field edge. */ .cksup-search:focus-within {
  outline: 1px solid var(--text-dark);
  outline-offset: -1px;
}

/* Magnifier: icon "C&K Header — Suche" of the media library (ID 324) as a white mask. */ .cksup-search-submit {
  position: relative;
  flex: 0 0 auto;
  width: calc(67 * var(--u));
  height: calc(67 * var(--u));
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--text-dark);
  cursor: pointer;
}

.cksup-search-submit::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--text-light);
  -webkit-mask: url("/wp-content/uploads/2026/09/ck-header-search.svg") center / calc(56 * var(--u)) no-repeat;
  mask: url("/wp-content/uploads/2026/09/ck-header-search.svg") center / calc(56 * var(--u)) no-repeat;
}

.cksup-search-submit:hover, .cksup-search-submit:focus-visible {
  background: #242424;
}

.cksup-search-results {
  position: absolute;
  top: calc(100% + 10 * var(--u));
  left: 0;
  right: 0;
  z-index: 20;
  max-height: calc(440 * var(--u));
  margin: 0;
  padding: calc(8 * var(--u));
  overflow-y: auto;
  border-radius: calc(24 * var(--u));
  background: var(--text-light);
  box-shadow: 0 calc(12 * var(--u)) calc(40 * var(--u)) rgba(0, 0, 0, 0.18);
  list-style: none;
  text-align: left;
}

/* Scrollbar look (thin, no arrow buttons, inside the rounded corners): Kit Custom CSS section "thin-scrollbar"
   (snippets/thin-scrollbar.kit.css), shared with the blog search and the popups. */
.cksup-search-results {
  scrollbar-gutter: stable;
}

.cksup-search-results[hidden] {
  display: none;
}

.cksup-search-results a {
  display: block;
  padding: calc(12 * var(--u)) calc(22 * var(--u));
  border-radius: calc(14 * var(--u));
  color: var(--text-dark);
  font: 600 calc(18 * var(--u))/1.3 var(--brand-font), sans-serif;
  text-decoration: none;
}

.cksup-search-results a small {
  display: block;
  margin-top: calc(3 * var(--u));
  color: var(--cksup-muted);
  font-size: calc(15 * var(--u));
  font-weight: 400;
}

.cksup-search-results a:is(:hover, :focus-visible, [aria-selected="true"]) {
  background: var(--cksup-surface);
  outline: none;
}

.cksup-search-results .cksup-search-empty {
  padding: calc(12 * var(--u)) calc(22 * var(--u));
  color: var(--cksup-muted);
  font-size: calc(17 * var(--u));
}

/* Topic cards */ .cksup-topics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(16 * var(--u));
  margin: 0;
  padding: 0;
  list-style: none;
}

.cksup-topics > li {
  display: flex;
  margin: 0;
}

.cksup-card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: calc(370 * var(--u));
  overflow: hidden;
  border: 1px solid var(--cksup-surface);
  border-radius: calc(30 * var(--u));
  background: var(--text-light);
  color: var(--text-dark);
  text-decoration: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.cksup-card:is(:hover, :focus-visible) {
  color: var(--text-dark);
}

.cksup-card:hover {
  border-color: var(--line-soft);
  box-shadow: 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, 0.06);
}

.cksup-card:focus-visible {
  outline: 2px solid var(--text-dark);
  outline-offset: 3px;
}

.cksup-card-head {
  display: flex;
  align-items: center;
  gap: calc(15 * var(--u));
  min-height: calc(118 * var(--u));
  padding: calc(19 * var(--u)) calc(24 * var(--u)) calc(19 * var(--u)) calc(34 * var(--u));
  border-radius: calc(30 * var(--u));
  background: var(--cksup-surface);
}

.cksup-card-icon, .cksup-link-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: calc(80 * var(--u));
  height: calc(80 * var(--u));
  border-radius: 50%;
  background: var(--text-light);
}

/* Figma: white circle with drop shadow 0 6 11 / 12 %. */ .cksup-card-icon {
  box-shadow: 0 calc(6 * var(--u)) calc(11 * var(--u)) rgba(0, 0, 0, 0.12);
}

.cksup-card-icon img {
  width: calc(46 * var(--u));
  height: calc(46 * var(--u));
  object-fit: contain;
}

.cksup-card-title {
  color: var(--text-dark);
  font: italic 800 calc(22 * var(--u))/calc(24 * var(--u)) var(--brand-font), sans-serif;
  text-transform: uppercase;
}

.cksup-card-text {
  flex: 1 1 auto;
  padding: calc(32 * var(--u)) calc(34 * var(--u)) calc(16 * var(--u));
  color: var(--cksup-muted);
  font: 400 calc(18 * var(--u))/calc(24 * var(--u)) var(--brand-font), sans-serif;
}

.cksup-card-more {
  padding: 0 calc(34 * var(--u)) calc(34 * var(--u));
  color: var(--cksup-red);
  font: italic 800 calc(16 * var(--u))/calc(18 * var(--u)) var(--brand-font), sans-serif;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-transform: uppercase;
}

@media (max-width: 1024px) {
  .cksup-search {
    height: calc(58 * var(--u));
    padding: 0 calc(6 * var(--u)) 0 calc(24 * var(--u));
  }

  .cksup-search input[type="search"] {
    font-size: calc(17 * var(--u));
  }

  .cksup-search-submit {
    width: calc(46 * var(--u));
    height: calc(46 * var(--u));
  }

  .cksup-search-submit::before {
    -webkit-mask-size: calc(40 * var(--u));
    mask-size: calc(40 * var(--u));
  }

  .cksup-search-results a {
    font-size: calc(16 * var(--u));
  }

  .cksup-topics {
    grid-template-columns: minmax(0, 1fr);
    gap: calc(12 * var(--u));
  }

  .cksup-card {
    min-height: 0;
    border-radius: calc(24 * var(--u));
  }

  .cksup-card-head {
    min-height: calc(86 * var(--u));
    padding: calc(12 * var(--u)) calc(20 * var(--u));
    border-radius: calc(24 * var(--u));
  }

  .cksup-card-icon {
    width: calc(62 * var(--u));
    height: calc(62 * var(--u));
  }

  .cksup-card-icon img {
    width: calc(36 * var(--u));
    height: calc(36 * var(--u));
  }

  .cksup-card-title {
    font-size: calc(20 * var(--u));
    line-height: calc(22 * var(--u));
  }

  .cksup-card-text {
    padding: calc(18 * var(--u)) calc(22 * var(--u)) calc(12 * var(--u));
    font-size: calc(16 * var(--u));
    line-height: calc(22 * var(--u));
  }

  .cksup-card-more {
    padding: 0 calc(22 * var(--u)) calc(22 * var(--u));
    font-size: calc(15 * var(--u));
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.cksup-card, .cksup-link-icon, .cksup-link-icon img, .cksup-menu-link) {
    transition: none;
  }
}

/* Contact section of the hub page: grey band across the full viewport width, white icon circles with shadow
   (variables of the class "cksup-contact", snippets/support-contact.css). */ section:has(.cksup-contact) {
  --cksup-channel-icon-shadow: 0 calc(6 * var(--ck-design-unit)) calc(11 * var(--ck-design-unit)) rgba(0, 0, 0, 0.12);
  background: var(--surface-soft, #F2F2F6);
  box-shadow: 0 0 0 100vmax var(--surface-soft, #F2F2F6);
  clip-path: inset(0 -100vmax);
}

/* Block spacing after Figma 241:1918 (desktop): 150u around the topic cards, 137u in the contact band, the
   Instagram block 150u below the testimonials. The double :has() outweighs the section class. */ @media (min-width: 1025px) {
  section.ck-section:has(.cksup-topics):has(.ck-section-intro) {
    padding-block: calc(150 * var(--ck-design-unit));
  }

  section.ck-section:has(.cksup-contact):has(.cksup-channels) {
    padding-block: calc(137 * var(--ck-design-unit));
  }

  .ck-template-embed section.ck-insta {
    padding-top: 0;
  }
}/* End custom CSS */