/* Start custom CSS *//* Support – Themen: Custom CSS of the template "Support – Thema". 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;
}

/* Chip above headings (outline chip with the C mark). */ .cksup-chip {
  display: inline-flex;
  align-items: center;
  height: calc(28 * var(--u));
  margin: 0 0 calc(18 * var(--u));
  padding: 0 calc(34 * var(--u)) 0 calc(49 * var(--u));
  border-style: solid;
  border-color: transparent;
  border-width: 0 calc(26 * var(--u)) 0 calc(42 * var(--u));
  border-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22214%22 height=%2229%22 viewBox=%220 0 214 29%22%3E%3Cpath fill=%22%23fff%22 d=%22M30.09 .5H206.39C216.74 1.44 212.39 10.5 212.39 10.5L203.39 23.5C199.23 29.5 188.39 28.5 188.39 28.5H16.09Z%22/%3E%3Cpath fill=%22none%22 stroke=%22%23B2B1B9%22 d=%22M30.09 .5H206.39C216.74 1.44 212.39 10.5 212.39 10.5L203.39 23.5C199.23 29.5 188.39 28.5 188.39 28.5H16.09%22/%3E%3Cpath fill=%22%23B2B1B9%22 fill-rule=%22evenodd%22 d=%22M40 .98C40 .5 39.63.1 39.16.06H25.37C17.22.06 12.86 2.17 10.36 5.52L.95 18.13C-.7 20.28-1.72 28.06 11.47 28.06H22.85C23.8 28.06 24.65 27.61 25.2 26.91L26.87 24.69C27.04 24.46 27.03 24.1 26.86 23.88L20.84 16.38C20.66 16.16 20.38 16.16 20.21 16.39L15.96 22.07C15.79 22.29 15.42 22.48 15.14 22.48H9.1C8.82 22.48 8.73 22.29 8.9 22.07L18.48 9.27C18.65 9.05 18.55 8.86 18.27 8.86L14.89 8.85C14.6 8.85 14.51 8.66 14.68 8.44L15.41 7.47C15.58 7.24 15.95 7 16.22 6.92L20.79 5.65C21.07 5.58 21.52 5.52 21.8 5.52H27.84C28.12 5.52 28.21 5.7 28.04 5.93L23.25 12.33C23.08 12.56 23.25 12.8 23.5 12.67L35.77 6.54C36.02 6.42 36.36 6.13 36.53 5.9L39.88 1.43C39.96 1.3 40 1.14 40 .98Z%22/%3E%3C/svg%3E") 0 26 0 42 fill / 0 calc(26 * var(--u)) 0 calc(42 * var(--u)) stretch;
  padding-inline: calc(7 * var(--u)) 0;
  color: var(--text-subtle);
  font: 600 calc(14 * var(--u))/1 var(--brand-font), sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.cksup-title {
  margin: 0;
  color: var(--text-dark);
  font: italic 900 calc(45 * var(--u))/calc(50 * var(--u)) var(--brand-font), sans-serif;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.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);
}

/* Page head */ .cksup-title {
  margin-bottom: calc(50 * var(--u));
}

/* Button back to the support hub below the menu items: the site's lime button across the menu width. */ .cksup-back {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: calc(49 * var(--u));
  margin-top: calc(30 * var(--u));
  border-style: solid;
  border-color: transparent;
  border-width: 0 calc(38 * var(--u));
  border-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22439%22 height=%2252%22 viewBox=%220 0 439 52%22%3E%3Cpath fill=%22%23A9FF00%22 d=%22M421.637 0c24.312-.011 15.988 18.04 15.988 18.04l-13.99 22.287C415.971 51.342 403.65 52 403.65 52H17.363C-6.949 52 1.375 33.96 1.375 33.96l13.99-22.287C23.019.658 35.35 0 35.35 0Z%22/%3E%3C/svg%3E") 0 38 fill / 0 calc(38 * var(--u)) stretch;
  color: var(--text-dark);
  font: 800 calc(22 * var(--u))/1 var(--brand-font), sans-serif;
  letter-spacing: -0.01em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.cksup-back:is(:hover, :focus-visible) {
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22439%22 height=%2252%22 viewBox=%220 0 439 52%22%3E%3Cpath fill=%22%2395E600%22 d=%22M421.637 0c24.312-.011 15.988 18.04 15.988 18.04l-13.99 22.287C415.971 51.342 403.65 52 403.65 52H17.363C-6.949 52 1.375 33.96 1.375 33.96l13.99-22.287C23.019.658 35.35 0 35.35 0Z%22/%3E%3C/svg%3E");
  color: var(--text-dark);
}

.cksup-back:focus-visible {
  outline: 2px solid #263607;
  outline-offset: 3px;
}

/* Page body: kicker, heading, text and quick links left, menu "Alle Infos:" right, both starting at the kicker.
   Both columns are sticky: the shorter one rides along while the longer one scrolls. */ .cksup-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(520 * var(--u));
  gap: calc(80 * var(--u));
  align-items: start;
}

.cksup-main {
  min-width: 0;
}

.cksup-main, .cksup-menu {
  position: sticky;
  top: calc(150 * var(--u));
}

.cksup-intro {
  color: var(--cksup-muted);
  font: 400 calc(20 * var(--u))/calc(30 * var(--u)) var(--brand-font), sans-serif;
  letter-spacing: -0.02em;
}

.cksup-intro > :first-child {
  margin-top: 0;
}

.cksup-intro > :last-child {
  margin-bottom: 0;
}

.cksup-intro p {
  margin: 0 0 calc(17 * var(--u));
}

.cksup-intro h3 {
  margin: calc(34 * var(--u)) 0 calc(14 * var(--u));
  color: var(--text-dark);
  font: italic 800 calc(22 * var(--u))/calc(26 * var(--u)) var(--brand-font), sans-serif;
  letter-spacing: 0;
  text-transform: uppercase;
}

.cksup-intro :is(ul, ol) {
  margin: 0 0 calc(17 * var(--u));
  padding-left: 1.2em;
}

.cksup-intro li + li {
  margin-top: calc(6 * var(--u));
}

/* In-text links as on the legal pages: text colour, thin underline, dark on hover. */ .cksup-intro a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: calc(1 * var(--u));
  text-underline-offset: calc(3 * var(--u));
}

.cksup-intro a:hover {
  color: var(--text-dark);
}

.cksup-intro a:focus-visible {
  outline: calc(2 * var(--u)) solid var(--text-dark);
  outline-offset: calc(2 * var(--u));
  border-radius: calc(2 * var(--u));
}

.cksup-intro strong {
  color: var(--text-dark);
  font-weight: 600;
}

.cksup-intro table {
  width: 100%;
  margin: 0 0 calc(20 * var(--u));
  border-collapse: collapse;
  color: var(--text-dark);
  font-size: calc(17 * var(--u));
}

.cksup-intro :is(th, td) {
  padding: calc(9 * var(--u)) calc(12 * var(--u));
  border: 1px solid #E4E4E7;
  text-align: left;
}

.cksup-intro th {
  background: var(--cksup-surface);
  font-weight: 600;
}

/* Videos of the old support pages (Vimeo via oEmbed). */ .cksup-intro iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--ck-card-radius);
}

/* Full-width row below text and menu: shortcodes in a paragraph of their own, e.g. the size charts of the
   Größenfinder plugin ([ck_size_finder_charts]); its calculator sits on the grey surface. */ .cksup-wide {
  min-width: 0;
  margin-top: calc(80 * var(--u));
}

.cksup-wide .ck-sf-ov-calc {
  background: var(--cksup-surface);
}

/* Menu "Alle Infos:": buttons in the look of the FAQ rows (category FAQ), the open page black. */ .cksup-menu {
  padding: calc(40 * var(--u));
  border-radius: calc(30 * var(--u));
  background: var(--cksup-surface);
}

.cksup-menu-list {
  display: flex;
  flex-direction: column;
  gap: calc(15 * var(--u));
  margin: 0;
  padding: 0;
  list-style: none;
}

.cksup-menu-list > li {
  margin: 0;
}

.cksup-menu-link {
  display: flex;
  align-items: center;
  gap: calc(22 * var(--u));
  min-height: calc(90 * var(--u));
  padding: calc(18 * var(--u)) calc(30 * var(--u)) calc(18 * var(--u)) calc(26 * var(--u));
  border: 1px solid #E4E4E7;
  border-radius: var(--ck-card-radius, calc(20 * var(--u)));
  background: #FAFAFB;
  color: var(--text-dark);
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.cksup-menu-link:is(:hover, :focus-visible) {
  border-color: var(--surface-deep);
  color: var(--text-dark);
}

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

.cksup-menu-link[aria-current="page"] {
  border-color: var(--surface-deep);
  background: var(--surface-deep);
  color: var(--text-light);
}

.cksup-menu-icon {
  display: grid;
  flex: 0 0 calc(44 * var(--u));
  place-items: center;
  width: calc(44 * var(--u));
  height: calc(44 * var(--u));
}

.cksup-menu-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Icons on black: black lines become white, red stays red. */ .cksup-menu-link[aria-current="page"] .cksup-menu-icon img {
  filter: invert(1) hue-rotate(180deg);
}

.cksup-menu-label {
  min-width: 0;
  font: italic 800 calc(20 * var(--u))/calc(24 * var(--u)) var(--brand-font), sans-serif;
  letter-spacing: -0.005em;
  overflow-wrap: anywhere;
  hyphens: auto;
  text-transform: uppercase;
}

.cksup-links {
  display: flex;
  flex-wrap: wrap;
  gap: calc(32 * var(--u));
  margin: calc(40 * var(--u)) 0 0;
  padding: 0;
  list-style: none;
}

.cksup-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(15 * var(--u));
  color: var(--surface-ink);
  font: 700 calc(18 * var(--u))/1 var(--brand-font), sans-serif;
  letter-spacing: 0.01em;
  text-decoration: none;
  text-transform: uppercase;
}

.cksup-link-icon {
  width: calc(100 * var(--u));
  height: calc(100 * var(--u));
  border-radius: calc(20 * var(--u));
  background: var(--cksup-surface);
  transition: background-color 160ms ease;
}

.cksup-link-icon img {
  width: calc(54 * var(--u));
  height: calc(54 * var(--u));
  object-fit: contain;
  transition: filter 160ms ease;
}

.cksup-link:is(:hover, :focus-visible) .cksup-link-icon {
  background: var(--text-dark);
}

/* Black lines of the icons turn white on the black tile; red parts stay visible. */ .cksup-link:is(:hover, :focus-visible) .cksup-link-icon img {
  filter: invert(1) hue-rotate(180deg);
}

.cksup-link:is(:hover, :focus-visible) {
  color: var(--surface-ink);
}

.cksup-link:focus-visible {
  outline: none;
}

@media (max-width: 1024px) {
  .cksup-chip {
    height: calc(26 * var(--u));
    font-size: calc(12 * var(--u));
  }

  .cksup-back {
    height: calc(48 * var(--u));
    margin-top: calc(20 * var(--u));
    font-size: calc(19 * var(--u));
  }

  .cksup-title {
    font-size: calc(32 * var(--u));
    line-height: calc(36 * var(--u));
  }

  .cksup-title {
    margin-bottom: calc(28 * var(--u));
  }

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

  .cksup-main, .cksup-menu {
    position: static;
  }

  .cksup-wide {
    margin-top: calc(40 * var(--u));
  }

  .cksup-intro {
    font-size: calc(17 * var(--u));
    line-height: calc(26 * var(--u));
  }

  .cksup-intro h3 {
    margin-top: calc(26 * var(--u));
    font-size: calc(18 * var(--u));
    line-height: calc(22 * var(--u));
  }

  .cksup-intro table {
    display: block;
    overflow-x: auto;
    font-size: calc(14 * var(--u));
  }

  .cksup-intro iframe {
    border-radius: calc(16 * var(--u));
  }

  .cksup-menu {
    padding: calc(16 * var(--u));
    border-radius: calc(24 * var(--u));
  }

  .cksup-menu-list {
    gap: calc(10 * var(--u));
  }

  .cksup-menu-link {
    gap: calc(14 * var(--u));
    min-height: calc(70 * var(--u));
    padding: calc(14 * var(--u)) calc(16 * var(--u));
    border-radius: calc(16 * var(--u));
  }

  .cksup-menu-icon {
    flex-basis: calc(36 * var(--u));
    width: calc(36 * var(--u));
    height: calc(36 * var(--u));
  }

  .cksup-menu-label {
    font-size: calc(17 * var(--u));
    line-height: calc(21 * var(--u));
  }

  .cksup-links {
    gap: calc(14 * var(--u));
    margin-top: calc(28 * var(--u));
  }

  .cksup-link {
    gap: calc(10 * var(--u));
    font-size: calc(14 * var(--u));
  }

  .cksup-link-icon {
    width: calc(78 * var(--u));
    height: calc(78 * var(--u));
    border-radius: calc(16 * var(--u));
  }

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

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

/* The topic template shows the contact block on white: grey icon circles (variable of the class "cksup-contact"). */ section:has(.cksup-contact) {
  --cksup-channel-icon-bg: var(--surface-soft, #F2F2F6);
}

/* Block spacing after Figma 8:23976 (desktop): page head 80u below the header, 150u to the contact block. */ @media (min-width: 1025px) {
  :is(section, main).ck-section:has(.cksup-title):has(.cksup-body) {
    padding-top: calc(80 * var(--ck-design-unit));
  }

  section.ck-section:has(.cksup-contact):has(.cksup-channels) {
    padding-top: calc(50 * var(--ck-design-unit));
  }
}/* End custom CSS */