/*
 * Catch & Keep Größenfinder — drawer, calculator, size tables, PDP strip, overview page.
 * Scoped to .ck-sf-* only. Site tokens (--ck-design-unit, --action-lime, --surface-soft, …) are used with fallbacks.
 * Lime is only ever combined with black text. Icons (cross, chevrons, checks) are CSS; SVG only for product sketches.
 */

.ck-sf-root,
.ck-sf-overview,
.ck-sf-strip {
  /* Site design unit (1920 / 440 artboards), clamped so the drawer stays readable on small and huge screens. */
  --ck-sf-u: clamp(0.8px, var(--ck-design-unit, 1px), 1.25px);
  --ck-sf-black: var(--text-dark, #000);
  --ck-sf-ink: var(--surface-ink, #09090b);
  --ck-sf-muted: var(--text-muted, #606060);
  --ck-sf-surface: var(--surface-soft, #f2f2f6);
  --ck-sf-surface-2: #e7e7ec;
  --ck-sf-border: #d4d4d8;
  --ck-sf-lime: var(--action-lime, #a9ff00);
  --ck-sf-lime-hover: var(--action-hover, #95e600);
  --ck-sf-orange: var(--brand-orange, #ff330a);
  --ck-sf-orange-soft: #fff4f2;
  --ck-sf-error: #b3261e;
  --ck-sf-font: var(--brand-font, Barlow), Barlow, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ck-sf-radius: max(8px, calc(10 * var(--ck-sf-u)));
  --ck-sf-radius-l: max(12px, calc(15 * var(--ck-sf-u)));
  --ck-sf-radius-card: max(16px, calc(20 * var(--ck-sf-u)));
  --ck-sf-target: 44px;
  --ck-sf-fs-xs: max(12px, calc(14 * var(--ck-sf-u)));
  --ck-sf-fs-s: max(13px, calc(16 * var(--ck-sf-u)));
  --ck-sf-fs-m: max(15px, calc(18 * var(--ck-sf-u)));
  --ck-sf-fs-l: max(16px, calc(20 * var(--ck-sf-u)));
  --ck-sf-fs-input: max(18px, calc(24 * var(--ck-sf-u)));
  --ck-sf-fs-h3: max(24px, calc(33 * var(--ck-sf-u)));
  --ck-sf-fs-size: max(30px, calc(44 * var(--ck-sf-u)));
  --ck-sf-gap: max(12px, calc(16 * var(--ck-sf-u)));
  --ck-sf-ease: cubic-bezier(.2, .7, .2, 1);
}

.ck-sf-root[hidden],
.ck-sf-root [hidden],
.ck-sf-overview [hidden] {
  display: none !important;
}

/* ---------------------------------------------------------------------------------------------------------------
 * Drawer shell (native modal <dialog>: top layer above header, sticky bar and Elementor popups)
 * ------------------------------------------------------------------------------------------------------------- */

.ck-sf-dialog {
  position: fixed;
  inset: 0 0 0 auto;
  box-sizing: border-box;
  width: min(100vw, max(420px, calc(669 * var(--ck-sf-u))));
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: var(--ck-sf-black);
  font-family: var(--ck-sf-font);
  font-size: var(--ck-sf-fs-m);
  line-height: 1.4;
  text-align: left;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateX(100%);
  transition: transform 0.25s var(--ck-sf-ease);
}

.ck-sf-dialog:not([open]) {
  display: none;
}

.ck-sf-dialog[open] {
  transform: none;
}

@starting-style {
  .ck-sf-dialog[open] {
    transform: translateX(100%);
  }
}

.ck-sf-dialog.is-closing {
  transform: translateX(100%);
}

.ck-sf-dialog::backdrop {
  background: rgba(0, 0, 0, 0.333);
}

/* The page behind the open drawer (1.3.4): locked by CSS while the dialog is modal – no inline styles on <html>, and
   the lock ends with the modal state on every close path. The page scrollbar disappears meanwhile (the drawer reaches
   the window edge; the page behind the backdrop may move by the scrollbar width – owner decision). Separate rules: a
   browser without :has() drops only the first one and uses the class set by drawer.js (also the fallback without
   showModal()). Self-contained – no site CSS needed. */
html:has(dialog.ck-sf-dialog:modal) {
  overflow: hidden;
}

html.ck-sf-scroll-lock {
  overflow: hidden;
}

.ck-sf-dialog *,
.ck-sf-dialog *::before,
.ck-sf-dialog *::after {
  box-sizing: border-box;
}

/* Fallback without HTMLDialogElement.showModal(): fixed overlay, background made inert by JS. */
.ck-sf-root.is-fallback {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  background: rgba(0, 0, 0, 0.333);
}

.ck-sf-root.is-fallback .ck-sf-dialog {
  z-index: 2147483647;
}

.ck-sf-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ck-sf-gap);
  min-height: max(60px, calc(76 * var(--ck-sf-u)));
  padding: calc(10 * var(--ck-sf-u)) calc(30 * var(--ck-sf-u)) calc(10 * var(--ck-sf-u)) calc(30 * var(--ck-sf-u));
  padding-top: max(calc(10 * var(--ck-sf-u)), env(safe-area-inset-top));
  background: var(--ck-sf-surface);
}

.ck-sf-title {
  margin: 0;
  color: var(--ck-sf-black);
  font: italic 800 max(22px, calc(32 * var(--ck-sf-u))) / 1 var(--ck-sf-font);
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.ck-sf-close {
  position: relative;
  flex: 0 0 auto;
  width: max(var(--ck-sf-target), calc(45 * var(--ck-sf-u)));
  height: max(var(--ck-sf-target), calc(45 * var(--ck-sf-u)));
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #dcdce2;
  color: var(--ck-sf-black);
  cursor: pointer;
  transition: background-color 0.15s;
}

.ck-sf-close:hover {
  background: #c9c9d1;
}

/* CSS cross (no icon file). */
.ck-sf-x::before,
.ck-sf-x::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}

.ck-sf-x::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.ck-sf-x::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Back to the form (header, left of «Schließen»): same circle as «Schließen». */
.ck-sf-back {
  position: relative;
  flex: 0 0 auto;
  width: max(var(--ck-sf-target), calc(45 * var(--ck-sf-u)));
  height: max(var(--ck-sf-target), calc(45 * var(--ck-sf-u)));
  /* 10 px to «Schließen» instead of the header gap. */
  margin: 0 calc(10px - var(--ck-sf-gap)) 0 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #dcdce2;
  color: var(--ck-sf-black);
  cursor: pointer;
  transition: background-color 0.15s;
}

.ck-sf-back:hover {
  background: #c9c9d1;
}

.ck-sf-back:focus-visible,
.ck-sf-back-inline:focus-visible {
  outline: 2px solid var(--ck-sf-black);
  outline-offset: 2px;
}

/* The title keeps its place on the left; arrow and «Schließen» form the right group. */
.ck-sf-head .ck-sf-title {
  margin-right: auto;
}

/* CSS arrow ← (no icon file): shaft + head. */
.ck-sf-back-arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 12px;
  transform: translate(-50%, -50%);
}

.ck-sf-back-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 1px;
  width: 15px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transform: translateY(-50%);
}

.ck-sf-back-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 1px;
  width: 8px;
  height: 8px;
  border: solid currentColor;
  border-width: 0 0 2px 2px;
  border-radius: 0 0 0 1px;
  transform: translateY(-50%) rotate(45deg);
  transform-origin: center;
}

/* Overview page (no drawer header): the way back sits on top of the result. */
.ck-sf-back-inline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--ck-sf-target);
  margin: 0 0 calc(8 * var(--ck-sf-u));
  padding: 0;
  border: 0;
  background: none;
  color: var(--ck-sf-black);
  font: 600 var(--ck-sf-fs-s) / 1.2 var(--ck-sf-font);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.ck-sf-back-inline .ck-sf-back-arrow {
  position: relative;
  top: auto;
  left: auto;
  flex: 0 0 auto;
  transform: none;
}

.ck-sf-scroll {
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: calc(26 * var(--ck-sf-u)) calc(40 * var(--ck-sf-u)) calc(48 * var(--ck-sf-u));
  padding-bottom: calc(48 * var(--ck-sf-u) + env(safe-area-inset-bottom));
  scrollbar-width: thin;
}

.ck-sf-panel {
  max-width: calc(480 * var(--ck-sf-u));
  margin: 0 auto;
}

.ck-sf-panel:focus-visible {
  outline-offset: 6px;
}

/* Segmented tab switch (Figma 8:4735). */
.ck-sf-tabs {
  display: flex;
  gap: calc(4 * var(--ck-sf-u));
  max-width: calc(418 * var(--ck-sf-u));
  margin: 0 auto calc(28 * var(--ck-sf-u));
  padding: calc(8 * var(--ck-sf-u));
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 999px;
  background: #fff;
}

.ck-sf-tab {
  flex: 1 1 50%;
  min-width: 0;
  min-height: max(var(--ck-sf-target), calc(45 * var(--ck-sf-u)));
  margin: 0;
  padding: 0 calc(12 * var(--ck-sf-u));
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ck-sf-black);
  font: 600 var(--ck-sf-fs-l) / 1.1 var(--ck-sf-font);
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.ck-sf-tab:hover {
  background: var(--ck-sf-surface);
}

.ck-sf-tab[aria-selected="true"] {
  background: var(--ck-sf-black);
  color: #fff;
  font-weight: 700;
}

/* ---------------------------------------------------------------------------------------------------------------
 * Shared typography and helpers
 * ------------------------------------------------------------------------------------------------------------- */

.ck-sf-root,
.ck-sf-overview {
  font-family: var(--ck-sf-font);
}

.ck-sf-h3,
.ck-sf-chart-title,
.ck-sf-ov-title {
  margin: 0 0 calc(10 * var(--ck-sf-u));
  color: var(--ck-sf-black);
  font: italic 800 var(--ck-sf-fs-h3) / 1.02 var(--ck-sf-font);
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.ck-sf-chart-title {
  text-align: center;
  font-size: max(22px, calc(30 * var(--ck-sf-u)));
}

.ck-sf-h4 {
  margin: calc(22 * var(--ck-sf-u)) 0 calc(10 * var(--ck-sf-u));
  font: 700 var(--ck-sf-fs-m) / 1.2 var(--ck-sf-font);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.ck-sf-intro {
  margin: 0 0 calc(22 * var(--ck-sf-u));
  color: var(--ck-sf-muted);
  font-size: var(--ck-sf-fs-l);
  line-height: 1.35;
}

.ck-sf-help,
.ck-sf-muted {
  margin: calc(6 * var(--ck-sf-u)) 0 0;
  color: var(--ck-sf-muted);
  font-size: var(--ck-sf-fs-s);
  line-height: 1.35;
}

.ck-sf-sr {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.ck-sf-root a,
.ck-sf-overview a {
  color: var(--ck-sf-black);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ck-sf-root :focus-visible,
.ck-sf-overview :focus-visible,
.ck-sf-strip :focus-visible {
  outline: 2px solid var(--ck-sf-black);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff;
}

/* ---------------------------------------------------------------------------------------------------------------
 * Calculator
 * ------------------------------------------------------------------------------------------------------------- */

.ck-sf-figure {
  margin: 0 0 calc(22 * var(--ck-sf-u));
  padding: 0;
}

.ck-sf-figure .ck-sf-sketch-box {
  margin-bottom: calc(8 * var(--ck-sf-u));
}

.ck-sf-figcaption {
  color: var(--ck-sf-muted);
  font-size: var(--ck-sf-fs-s);
  text-align: center;
}

.ck-sf-sketch-box {
  display: flex;
  justify-content: center;
  margin: 0 auto calc(22 * var(--ck-sf-u));
  color: #1d1d1f;
}

/* One limit for every product illustration (owner, round 9): at most 300 units and 300 px, wide and high — drawer,
   overview and support page, every product type. */
.ck-sf-sketch-box svg {
  display: block;
  width: 100%;
  max-width: min(300px, calc(260 * var(--ck-sf-u)));
  height: auto;
  max-height: min(300px, calc(300 * var(--ck-sf-u)));
  overflow: visible;
}

.ck-sf-sketch-box--calc svg {
  max-width: min(300px, calc(250 * var(--ck-sf-u)));
}

/* Illustration + «i» in its top right corner (user, Round 9). The frame takes the width limit of the svg, so the
   illustration stays exactly centred and the «i» (absolute) never moves it (Round 10). */
.ck-sf-sketch-frame {
  position: relative;
  display: block;
  width: 100%;
  max-width: min(300px, calc(260 * var(--ck-sf-u)));
}

.ck-sf-sketch-box--calc .ck-sf-sketch-frame {
  max-width: min(300px, calc(250 * var(--ck-sf-u)));
}

.ck-sf-table-panel .ck-sf-sketch-frame {
  max-width: min(300px, calc(220 * var(--ck-sf-u)));
}

.ck-sf-sketch-frame svg {
  max-width: 100%;
  margin-inline: auto;
}

.ck-sf-sketch-frame .ck-sf-info {
  top: 0;
  right: 0;
  left: auto;
  margin: 0;
}

.ck-sf-sketch-frame .ck-sf-tip {
  top: 30px;
  right: 0;
  bottom: auto;
  max-width: min(260px, 80vw);
}

.ck-sf-sketch-box [data-role="off"] {
  display: none;
}

.ck-sf-sketch-box .ck-sf-arrow[data-role="primary"] {
  color: var(--ck-sf-orange);
}

.ck-sf-sketch-box .ck-sf-arrow[data-role="secondary"] {
  color: #8e94a3;
}

.ck-sf-sketch-box .ck-sf-code {
  fill: var(--ck-sf-black);
  font-family: var(--ck-sf-font);
  font-weight: 700;
}

.ck-sf-sketch-box .ck-sf-arrow.is-active {
  color: var(--ck-sf-black);
  filter: drop-shadow(0 0 3px var(--ck-sf-lime));
}

.ck-sf-sketch-box .ck-sf-code.is-active {
  text-decoration: underline;
}

.ck-sf-form {
  display: flex;
  flex-direction: column;
  gap: var(--ck-sf-gap);
  margin: 0;
}

.ck-sf-fields {
  display: flex;
  flex-direction: column;
  gap: var(--ck-sf-gap);
}

.ck-sf-field {
  margin: 0;
}

.ck-sf-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(8 * var(--ck-sf-u));
  margin: 0 0 calc(7 * var(--ck-sf-u));
  padding: 0;
  color: var(--ck-sf-black);
  font: 600 var(--ck-sf-fs-s) / 1.2 var(--ck-sf-font);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ck-sf-opt {
  color: var(--ck-sf-muted);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

.ck-sf-best {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--ck-sf-lime);
  color: #000;
  font-size: var(--ck-sf-fs-xs);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

/* Sketch letter in a ring (user, Round 9: strictly centred). Inline SVG: the ring (border) and the letter share one
   pixel-snapped box, and whole-pixel sides keep both on the same grid at any font size. The letter is anchored at the
   centre and lowered by half the cap height (Barlow: 0.7 em); the ink offsets below move asymmetric capitals (stem on
   the left) so their ink, not their advance width, is centred. */
.ck-sf-code-chip {
  display: inline-block;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 1.6em;
  width: round(1.6em, 1px);
  height: 1.6em;
  height: round(1.6em, 1px);
  border: 1.5px solid currentColor;
  border-radius: 999px;
  overflow: visible;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  vertical-align: middle;
}

.ck-sf-code-chip.is-wide {
  width: 2.3em;
  width: round(2.3em, 1px);
}

.ck-sf-code-chip text {
  fill: currentColor;
  text-anchor: middle;
  transform: translate(calc(-1 * var(--ck-sf-chip-dx, 0em)), var(--ck-sf-chip-dy, 0.35em));
}

.ck-sf-code-chip[data-l="B"] { --ck-sf-chip-dx: 0.0063em; }
.ck-sf-code-chip[data-l="C"] { --ck-sf-chip-dx: 0.0029em; }
.ck-sf-code-chip[data-l="D"] { --ck-sf-chip-dx: 0.0079em; }
.ck-sf-code-chip[data-l="E"] { --ck-sf-chip-dx: 0.0124em; }
.ck-sf-code-chip[data-l="F"] { --ck-sf-chip-dx: 0.0238em; }
.ck-sf-code-chip[data-l="H"] { --ck-sf-chip-dx: 0.0035em; }
.ck-sf-code-chip[data-l="J"] { --ck-sf-chip-dx: -0.0209em; --ck-sf-chip-dy: 0.3463em; }
.ck-sf-code-chip[data-l="K"] { --ck-sf-chip-dx: 0.0214em; }
.ck-sf-code-chip[data-l="L"] { --ck-sf-chip-dx: 0.0177em; }
.ck-sf-code-chip[data-l="P"] { --ck-sf-chip-dx: 0.0152em; }
.ck-sf-code-chip[data-l="Q"] { --ck-sf-chip-dy: 0.3044em; }
.ck-sf-code-chip[data-l="R"] { --ck-sf-chip-dx: 0.013em; }
.ck-sf-code-chip[data-l="U"] { --ck-sf-chip-dy: 0.3463em; }
.ck-sf-code-chip[data-l="Z"] { --ck-sf-chip-dx: -0.0029em; }

.ck-sf-input {
  position: relative;
  display: flex;
  align-items: center;
  min-height: max(48px, calc(52 * var(--ck-sf-u)));
  padding: 1px;
  border: 1px solid transparent;
  border-radius: var(--ck-sf-radius);
  background: var(--ck-sf-surface);
  transition: border-color 0.15s;
}

.ck-sf-input:focus-within {
  border-color: var(--ck-sf-black);
}

.ck-sf-input input {
  flex: 1 1 auto;
  min-width: 0;
  height: auto;
  min-height: max(44px, calc(48 * var(--ck-sf-u)));
  margin: 0;
  padding: 0 calc(16 * var(--ck-sf-u));
  border: 0;
  border-radius: var(--ck-sf-radius);
  background: transparent;
  box-shadow: none;
  color: var(--ck-sf-black);
  font: 600 var(--ck-sf-fs-input) / 1.2 var(--ck-sf-font);
  outline: none;
  appearance: none;
}

.ck-sf-root .ck-sf-input input:focus-visible,
.ck-sf-overview .ck-sf-input input:focus-visible {
  outline: none;
  box-shadow: none;
}

.ck-sf-input input[aria-invalid="true"] {
  color: var(--ck-sf-error);
}

.ck-sf-input:has(input[aria-invalid="true"]) {
  border-color: var(--ck-sf-error);
}

/* Focused invalid field: the frame stays red (one line, no outer ring). */
.ck-sf-input:has(input[aria-invalid="true"]):focus-within {
  border-color: var(--ck-sf-error);
}

.ck-sf-unit {
  flex: 0 0 auto;
  padding: 0 calc(16 * var(--ck-sf-u)) 0 calc(6 * var(--ck-sf-u));
  color: var(--ck-sf-muted);
  font: 500 var(--ck-sf-fs-m) / 1 var(--ck-sf-font);
}

.ck-sf-msg:empty {
  display: none;
}

.ck-sf-msg {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--ck-sf-u));
  margin-top: calc(8 * var(--ck-sf-u));
}

.ck-sf-msg--mode {
  margin-top: calc(-6 * var(--ck-sf-u));
}

.ck-sf-error,
.ck-sf-warn,
.ck-sf-fix {
  margin: 0;
  font-size: var(--ck-sf-fs-s);
  line-height: 1.4;
}

.ck-sf-error {
  padding-left: calc(10 * var(--ck-sf-u));
  border-left: 3px solid var(--ck-sf-error);
  color: var(--ck-sf-error);
  font-weight: 600;
}

.ck-sf-warn,
.ck-sf-fix {
  padding: calc(10 * var(--ck-sf-u)) calc(12 * var(--ck-sf-u));
  border-left: 3px solid var(--ck-sf-orange);
  border-radius: 0 var(--ck-sf-radius) var(--ck-sf-radius) 0;
  background: var(--ck-sf-orange-soft);
  color: var(--ck-sf-black);
}

.ck-sf-fix p {
  margin: 0 0 calc(8 * var(--ck-sf-u));
  font-weight: 600;
}

.ck-sf-recognized {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--ck-sf-u));
}

.ck-sf-rec-chip {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  padding: calc(6 * var(--ck-sf-u)) calc(12 * var(--ck-sf-u));
  border-radius: var(--ck-sf-radius);
  background: var(--ck-sf-surface);
  font-size: var(--ck-sf-fs-s);
  line-height: 1.35;
}

/* CSS check mark. */
.ck-sf-check-icon {
  display: inline-block;
  flex: 0 0 auto;
  width: 0.45em;
  height: 0.8em;
  margin: 0 0.35em 0.15em 0.1em;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.ck-sf-inline-btn,
.ck-sf-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--ck-sf-target);
  margin: 0;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--ck-sf-black);
  font: 600 var(--ck-sf-fs-s) / 1.2 var(--ck-sf-font);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.ck-sf-rec-chip .ck-sf-inline-btn {
  min-height: 32px;
}

.ck-sf-link {
  align-self: flex-start;
  padding: 0;
}

/* Chips = native radios (keyboard arrows, no preselection where required). */
.ck-sf-chips {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.ck-sf-chips legend {
  float: left;
  width: 100%;
}

/* Chip rows: equal columns side by side; when a label does not fit, four or more chips go two per row
   (fitLabels() sets .is-two), otherwise / still too long every chip gets its own row (.is-stacked). Labels never
   wrap and are never cut. */
.ck-sf-chip-row {
  clear: both;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(8 * var(--ck-sf-u));
}

.ck-sf-chip-row.ck-sf-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ck-sf-chip-row.ck-sf-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ck-sf-chip-row.ck-sf-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ck-sf-chip-row.is-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ck-sf-chip-row.is-stacked {
  grid-template-columns: minmax(0, 1fr);
}

.ck-sf-chip {
  position: relative;
  display: flex;
  min-width: 0;
  margin: 0;
  cursor: pointer;
}

.ck-sf-chip input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.ck-sf-chip span {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--ck-sf-target);
  padding: 0 calc(12 * var(--ck-sf-u));
  overflow: hidden;
  border: 1px solid #dadada;
  border-radius: var(--ck-sf-radius);
  background: #fff;
  color: var(--ck-sf-muted);
  /* One line, centred by line height (an ellipsis needs a block box, not flex). */
  font: 500 var(--ck-sf-fs-m) / calc(var(--ck-sf-target) - 2px) var(--ck-sf-font);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}

.ck-sf-chip:hover span {
  border-color: var(--ck-sf-ink);
  color: var(--ck-sf-ink);
}

/* Keep the hover frame inside the control and visible at fractional browser zoom. */
.ck-sf-chip:hover span,
.ck-sf-pill:hover,
.ck-sf-option:hover {
  outline: 2px solid var(--ck-sf-ink);
  outline-offset: -2px;
}

.ck-sf-chip input:checked + span {
  border-color: var(--ck-sf-ink);
  background: var(--ck-sf-ink);
  color: #fff;
}

.ck-sf-chip input:focus-visible + span {
  border-color: var(--ck-sf-black);
}


/* Switch («soll länger passen») and checkbox («Maße merken»). */
.ck-sf-switch,
.ck-sf-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: calc(12 * var(--ck-sf-u));
  min-height: var(--ck-sf-target);
  margin: 0;
  font: 600 var(--ck-sf-fs-m) / 1.25 var(--ck-sf-font);
  cursor: pointer;
}

.ck-sf-switch input,
.ck-sf-check input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.ck-sf-switch-track {
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  height: 28px;
  border-radius: 999px;
  background: #b9b9c3;
  transition: background-color 0.15s;
}

.ck-sf-switch-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s;
}

.ck-sf-switch input:checked + .ck-sf-switch-track {
  background: var(--ck-sf-ink);
}

.ck-sf-switch input:checked + .ck-sf-switch-track::after {
  transform: translateX(18px);
}

.ck-sf-check-box {
  position: relative;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: 2px solid var(--ck-sf-ink);
  border-radius: 6px;
  background: #fff;
}

.ck-sf-check input:checked + .ck-sf-check-box {
  background: var(--ck-sf-ink);
}

/* The ink of the rotated mark is centred in the box (measured: the mark sits 1.875 px above its element centre). */
.ck-sf-check input:checked + .ck-sf-check-box::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 12px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, calc(-50% - 1.875px)) rotate(45deg);
}

.ck-sf-switch input:focus-visible ~ .ck-sf-switch-track,
.ck-sf-check input:focus-visible ~ .ck-sf-check-box {
  box-shadow: 0 0 0 1px var(--ck-sf-black);
}

.ck-sf-switch-wrap .ck-sf-help,
.ck-sf-remember-wrap .ck-sf-help {
  margin-top: 0;
}

/* «Genauer». */
.ck-sf-more {
  border-top: 1px solid var(--ck-sf-border);
  border-bottom: 1px solid var(--ck-sf-border);
}

.ck-sf-more-toggle {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: calc(12 * var(--ck-sf-u));
  width: 100%;
  min-height: max(56px, calc(60 * var(--ck-sf-u)));
  margin: 0;
  padding: calc(10 * var(--ck-sf-u)) 0;
  border: 0;
  background: transparent;
  color: var(--ck-sf-black);
  text-align: left;
  cursor: pointer;
}

.ck-sf-more-title {
  font: 700 var(--ck-sf-fs-m) / 1.2 var(--ck-sf-font);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.ck-sf-more-hint {
  grid-column: 1;
  color: var(--ck-sf-muted);
  font-size: var(--ck-sf-fs-s);
}

.ck-sf-more-toggle .ck-sf-chevron {
  grid-column: 2;
  grid-row: 1 / span 2;
}

/* CSS chevron. */
.ck-sf-chevron {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 6px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: translateY(-25%) rotate(45deg);
  transition: transform 0.2s;
}

[aria-expanded="true"] > .ck-sf-chevron {
  transform: translateY(25%) rotate(-135deg);
}

.ck-sf-more-body {
  display: flex;
  flex-direction: column;
  gap: var(--ck-sf-gap);
  padding: calc(4 * var(--ck-sf-u)) 0 calc(20 * var(--ck-sf-u));
}

.ck-sf-field.is-best .ck-sf-input {
  border-color: var(--ck-sf-lime);
}

.ck-sf-own {
  display: flex;
  flex-direction: column;
  gap: var(--ck-sf-gap);
  padding: var(--ck-sf-gap);
  border-radius: var(--ck-sf-radius-l);
  background: #fafafa;
  border: 1px dashed var(--ck-sf-border);
}

.ck-sf-own .ck-sf-h4 {
  margin-top: 0;
}

/* «So misst du richtig» (details/summary with CSS chevron). */
.ck-sf-howto {
  margin-top: calc(6 * var(--ck-sf-u));
}

.ck-sf-howto > summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: var(--ck-sf-target);
  color: var(--ck-sf-black);
  font: 600 var(--ck-sf-fs-s) / 1.2 var(--ck-sf-font);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  list-style: none;
}

.ck-sf-howto > summary::-webkit-details-marker {
  display: none;
}

.ck-sf-howto > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 6px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s;
}

.ck-sf-howto[open] > summary::after {
  transform: translateY(2px) rotate(-135deg);
}

.ck-sf-howto-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--ck-sf-gap);
  align-items: start;
  margin-top: calc(8 * var(--ck-sf-u));
  padding: calc(14 * var(--ck-sf-u));
  border-radius: var(--ck-sf-radius);
  background: var(--ck-sf-surface);
  font-size: var(--ck-sf-fs-s);
}

/* Without an icon the steps take the full width; the explanations below always do. */
.ck-sf-howto-text:first-child,
.ck-sf-howto-more {
  grid-column: 1 / -1;
}

.ck-sf-howto-icon {
  flex: 0 0 auto;
  width: max(48px, calc(64 * var(--ck-sf-u)));
  height: auto;
}

.ck-sf-howto-text p,
.ck-sf-howto-more p {
  margin: calc(8 * var(--ck-sf-u)) 0 0;
}

.ck-sf-howto-text > p:first-child {
  margin-top: 0;
}

.ck-sf-steps,
.ck-sf-list {
  margin: 0;
  padding-left: 1.3em;
}

.ck-sf-steps li + li,
.ck-sf-list li + li {
  margin-top: 4px;
}

.ck-sf-pitfall {
  font-weight: 600;
}

.ck-sf-howto--all {
  margin-top: calc(28 * var(--ck-sf-u));
  padding-top: calc(12 * var(--ck-sf-u));
  border-top: 1px solid var(--ck-sf-border);
}

.ck-sf-howto--all > summary {
  font-size: var(--ck-sf-fs-m);
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.02em;
}

.ck-sf-howto-all-body .ck-sf-howto-item + .ck-sf-howto-item {
  margin-top: calc(14 * var(--ck-sf-u));
}

.ck-sf-howto-all-body .ck-sf-h4 {
  margin: calc(14 * var(--ck-sf-u)) 0 calc(6 * var(--ck-sf-u));
}

/* Buttons: the site brand button (snippets/brand-button.css, Figma CTA «Größe berechnen»): lime body with the
   brand cut, the C mark on the right, black caption. The caption is one line; extra text lives outside the button. */
.ck-sf-btn {
  --ck-sf-btn-h: max(44px, calc(49 * var(--ck-sf-u)));
  --ck-sf-bu: calc(var(--ck-sf-btn-h) / 49);
  --ck-sf-btn-fill: var(--ck-sf-lime);
  --ck-sf-btn-text: #000;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  height: var(--ck-sf-btn-h);
  margin: 0;
  padding: 0 calc(84 * var(--ck-sf-bu)) 0 calc(35 * var(--ck-sf-bu));
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ck-sf-btn-text);
  font: 800 max(16px, calc(22 * var(--ck-sf-bu))) / 1 var(--ck-sf-font);
  letter-spacing: -0.01em;
  text-align: center;
  text-decoration: none !important;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}

.ck-sf-btn-label {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ck-sf-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ck-sf-btn-fill);
  clip-path: polygon(9% 0, calc(100% - 47 * var(--ck-sf-bu)) 0, calc(100% - 68 * var(--ck-sf-bu)) 100%, 0 100%);
  transition: background-color 0.16s;
  pointer-events: none;
}

@supports (clip-path: shape(from 0% 0%, line to 100% 100%, close)) {
  .ck-sf-btn::before {
    clip-path: shape(from calc(44.7085 * var(--ck-sf-bu)) 0%, line to calc(100% - calc(46.74368 * var(--ck-sf-bu))) 0%,line to calc(100% - calc(47.23782 * var(--ck-sf-bu))) 0.51334%,line to calc(100% - calc(47.956 * var(--ck-sf-bu))) 1.316019%,line to calc(100% - calc(48.65319 * var(--ck-sf-bu))) 2.153032%,line to calc(100% - calc(49.32939 * var(--ck-sf-bu))) 3.023853%,line to calc(100% - calc(49.98458 * var(--ck-sf-bu))) 3.927848%,line to calc(100% - calc(50.61873 * var(--ck-sf-bu))) 4.864269%,line to calc(100% - calc(51.23184 * var(--ck-sf-bu))) 5.832256%,line to calc(100% - calc(51.8239 * var(--ck-sf-bu))) 6.83084%,line to calc(100% - calc(52.39494 * var(--ck-sf-bu))) 7.858953%,line to calc(100% - calc(52.94502 * var(--ck-sf-bu))) 8.915436%,line to calc(100% - calc(53.47424 * var(--ck-sf-bu))) 9.999056%,line to calc(100% - calc(53.98274 * var(--ck-sf-bu))) 11.108521%,line to calc(100% - calc(54.47072 * var(--ck-sf-bu))) 12.242499%,line to calc(100% - calc(54.93843 * var(--ck-sf-bu))) 13.399635%,line to calc(100% - calc(55.36799 * var(--ck-sf-bu))) 14.530685%,line to calc(100% - calc(72.00343 * var(--ck-sf-bu))) 59.708043%,line to calc(100% - calc(72.35556 * var(--ck-sf-bu))) 60.721471%,line to calc(100% - calc(72.72558 * var(--ck-sf-bu))) 61.963299%,line to calc(100% - calc(73.05913 * var(--ck-sf-bu))) 63.26269%,line to calc(100% - calc(73.35932 * var(--ck-sf-bu))) 64.622826%,line to calc(100% - calc(73.62696 * var(--ck-sf-bu))) 66.045333%,line to calc(100% - calc(73.86129 * var(--ck-sf-bu))) 67.530543%,line to calc(100% - calc(74.06046 * var(--ck-sf-bu))) 69.077732%,line to calc(100% - calc(74.22181 * var(--ck-sf-bu))) 70.685278%,line to calc(100% - calc(74.342 * var(--ck-sf-bu))) 72.350734%,line to calc(100% - calc(74.41714 * var(--ck-sf-bu))) 74.070812%,line to calc(100% - calc(74.44289 * var(--ck-sf-bu))) 75.841302%,line to calc(100% - calc(74.41452 * var(--ck-sf-bu))) 77.656914%,line to calc(100% - calc(74.32703 * var(--ck-sf-bu))) 79.511088%,line to calc(100% - calc(74.1753 * var(--ck-sf-bu))) 81.39578%,line to calc(100% - calc(73.95426 * var(--ck-sf-bu))) 83.301292%,line to calc(100% - calc(73.65913 * var(--ck-sf-bu))) 85.216195%,line to calc(100% - calc(73.2857 * var(--ck-sf-bu))) 87.127416%,line to calc(100% - calc(72.83055 * var(--ck-sf-bu))) 89.020546%,line to calc(100% - calc(72.29131 * var(--ck-sf-bu))) 90.880363%,line to calc(100% - calc(71.66669 * var(--ck-sf-bu))) 92.691562%,line to calc(100% - calc(70.95648 * var(--ck-sf-bu))) 94.439546%,line to calc(100% - calc(70.16136 * var(--ck-sf-bu))) 96.111174%,line to calc(100% - calc(69.28255 * var(--ck-sf-bu))) 97.695302%,line to calc(100% - calc(68.32147 * var(--ck-sf-bu))) 99.183036%,line to calc(100% - calc(67.70662 * var(--ck-sf-bu))) 100%, hline to calc(20.2067 * var(--ck-sf-bu)), curve to calc(1.66949 * var(--ck-sf-bu)) 64.521669% with calc(-3.03803 * var(--ck-sf-bu)) 99.97796% / calc(-1.23203 * var(--ck-sf-bu)) 72.217154%, line to calc(18.2633 * var(--ck-sf-bu)) 19.483215%, curve to calc(44.7085 * var(--ck-sf-bu)) 0% with calc(22.6626 * var(--ck-sf-bu)) 7.540939% / calc(30.348 * var(--ck-sf-bu)) 0%, close);
  }
}

/* Brand mark (SVG 294 «ck-brand-symbol») as a mask in the button colour. */
.ck-sf-btn::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: calc(70.479 * var(--ck-sf-bu));
  height: 100%;
  background: var(--ck-sf-btn-fill);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28' preserveAspectRatio='none'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M40 0.918882C40 0.435181 39.6286 0.0392069 39.156 0H25.3732C17.2232 0 12.8616 2.11146 10.3649 5.45531L0.947477 18.0661C-0.699209 20.2208 -1.72415 27.9938 11.4678 28H22.846L22.8471 27.9967C23.8034 27.9967 24.6543 27.548 25.2041 26.8499L26.8703 24.6249C27.0395 24.3988 27.0335 24.0336 26.8568 23.8134L20.8398 16.3138C20.663 16.0936 20.3799 16.0982 20.2107 16.3243L15.9577 22.0039C15.7883 22.23 15.4192 22.4149 15.1371 22.4149H9.10102C8.81908 22.4149 8.72689 22.23 8.89612 22.0039L18.4771 9.2094C18.6463 8.98333 18.5541 8.79766 18.272 8.7966L14.8863 8.78489C14.6042 8.78384 14.5128 8.59877 14.6829 8.37344L15.4147 7.40454C15.5849 7.17906 15.9465 6.9333 16.2184 6.85804L20.7939 5.59201C21.0658 5.51675 21.5189 5.45531 21.8009 5.45531H27.8369C28.119 5.45531 28.2112 5.64023 28.042 5.86631L23.2492 12.2666C23.08 12.4926 23.2485 12.7343 23.5009 12.6082L35.767 6.48145C36.0194 6.35527 36.3643 6.06715 36.5337 5.84122L39.8849 1.36578C39.9582 1.23344 40 1.08097 40 0.918882Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28' preserveAspectRatio='none'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M40 0.918882C40 0.435181 39.6286 0.0392069 39.156 0H25.3732C17.2232 0 12.8616 2.11146 10.3649 5.45531L0.947477 18.0661C-0.699209 20.2208 -1.72415 27.9938 11.4678 28H22.846L22.8471 27.9967C23.8034 27.9967 24.6543 27.548 25.2041 26.8499L26.8703 24.6249C27.0395 24.3988 27.0335 24.0336 26.8568 23.8134L20.8398 16.3138C20.663 16.0936 20.3799 16.0982 20.2107 16.3243L15.9577 22.0039C15.7883 22.23 15.4192 22.4149 15.1371 22.4149H9.10102C8.81908 22.4149 8.72689 22.23 8.89612 22.0039L18.4771 9.2094C18.6463 8.98333 18.5541 8.79766 18.272 8.7966L14.8863 8.78489C14.6042 8.78384 14.5128 8.59877 14.6829 8.37344L15.4147 7.40454C15.5849 7.17906 15.9465 6.9333 16.2184 6.85804L20.7939 5.59201C21.0658 5.51675 21.5189 5.45531 21.8009 5.45531H27.8369C28.119 5.45531 28.2112 5.64023 28.042 5.86631L23.2492 12.2666C23.08 12.4926 23.2485 12.7343 23.5009 12.6082L35.767 6.48145C36.0194 6.35527 36.3643 6.06715 36.5337 5.84122L39.8849 1.36578C39.9582 1.23344 40 1.08097 40 0.918882Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  transition: background-color 0.16s;
  pointer-events: none;
}

.ck-sf-btn:hover {
  --ck-sf-btn-fill: var(--ck-sf-lime-hover);
}

.ck-sf-root .ck-sf-btn:focus,
.ck-sf-overview .ck-sf-btn:focus {
  outline: none;
  box-shadow: none;
}

/* Keyboard focus = contrasting fill, as on the site. */
.ck-sf-root .ck-sf-btn:focus-visible,
.ck-sf-overview .ck-sf-btn:focus-visible {
  --ck-sf-btn-fill: #d9231c;
  --ck-sf-btn-text: #fff;
}

@media (forced-colors: active) {
  .ck-sf-btn {
    border: 2px solid ButtonText;
    border-radius: 24px 10px 24px 10px;
  }

  .ck-sf-btn::after {
    content: none;
  }
}

.ck-sf-cta {
  margin-top: calc(8 * var(--ck-sf-u));
}

/* Answer / colour / fix chips: white tiles with a hairline, black when chosen. One line: in a grid the pill is
   the full cell, elsewhere at most the row (ellipsis only as the last resort; texts are kept short). */
.ck-sf-pill {
  display: block;
  max-width: 100%;
  min-height: var(--ck-sf-target);
  overflow: hidden;
  margin: 0;
  padding: calc(8 * var(--ck-sf-u)) calc(16 * var(--ck-sf-u));
  border: 0;
  border-radius: var(--ck-sf-radius);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--ck-sf-border);
  color: var(--ck-sf-black);
  font: 600 var(--ck-sf-fs-s) / 1.25 var(--ck-sf-font);
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  transition: box-shadow 0.15s, background-color 0.15s;
}

.ck-sf-pill:hover {
  box-shadow: inset 0 0 0 1px var(--ck-sf-ink);
}

.ck-sf-pill:focus-visible {
  outline: 2px solid var(--ck-sf-ink);
  outline-offset: 2px;
}

.ck-sf-pill--ghost {
  color: var(--ck-sf-muted);
}

.ck-sf-pill.is-current {
  background: var(--ck-sf-ink);
  box-shadow: none;
  color: #fff;
}

.ck-sf-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8 * var(--ck-sf-u));
}

/* ---------------------------------------------------------------------------------------------------------------
 * Result: one centred card for every kind — eyebrow · size · one sentence · one chip · details (scale, tiles,
 * notes) · one brand button · exchange note · «Worauf beruht das?». White inner surfaces, one vertical rhythm.
 * ------------------------------------------------------------------------------------------------------------- */

.ck-sf-general:empty {
  display: none;
}

.ck-sf-general {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: var(--ck-sf-gap);
}

.ck-sf-result {
  scroll-margin-top: 16px;
}

/* Under «Größe berechnen»: only what blocks the calculation (missing or invalid values). */
.ck-sf-form-notice:empty {
  display: none;
}

.ck-sf-form-notice {
  margin-top: calc(14 * var(--ck-sf-u));
}

.ck-sf-notice {
  margin: 0;
  padding: calc(14 * var(--ck-sf-u)) calc(16 * var(--ck-sf-u));
  border-radius: var(--ck-sf-radius);
  background: var(--ck-sf-surface);
  color: var(--ck-sf-muted);
  font: 400 var(--ck-sf-fs-s) / 1.45 var(--ck-sf-font);
  text-align: center;
}

.ck-sf-notice--need {
  color: var(--ck-sf-black);
  font-weight: 600;
}

/* Clarification question: same surface as the result card, answers as equal white tiles. */
.ck-sf-question {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: calc(14 * var(--ck-sf-u));
  margin-bottom: calc(16 * var(--ck-sf-u));
  padding: calc(24 * var(--ck-sf-u)) calc(24 * var(--ck-sf-u)) calc(12 * var(--ck-sf-u));
  border-radius: var(--ck-sf-radius-card);
  background: var(--ck-sf-surface);
  text-align: center;
}

.ck-sf-q-text {
  margin: 0;
  color: var(--ck-sf-black);
  font: 700 var(--ck-sf-fs-l) / 1.3 var(--ck-sf-font);
}

.ck-sf-question .ck-sf-btn-row--stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(8 * var(--ck-sf-u));
}

.ck-sf-question .ck-sf-btn-row--stack.is-stacked {
  grid-template-columns: minmax(0, 1fr);
}

.ck-sf-question .ck-sf-btn-row--stack:where(:has(> :nth-child(2):last-child), :has(> :nth-child(4):last-child)):not(.is-stacked) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ck-sf-question .ck-sf-pill {
  width: 100%;
  min-height: 52px;
}

.ck-sf-skip {
  align-self: center;
  color: var(--ck-sf-muted);
}

.ck-sf-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: calc(28 * var(--ck-sf-u)) calc(24 * var(--ck-sf-u)) calc(10 * var(--ck-sf-u));
  border-radius: var(--ck-sf-radius-card);
  background: var(--ck-sf-surface);
  text-align: center;
}

.ck-sf-card > * {
  margin-top: 0;
  margin-bottom: 0;
}

/* Centred lines break evenly instead of leaving one word alone. */
.ck-sf-card p,
.ck-sf-q-text,
.ck-sf-notice {
  text-wrap: balance;
}

.ck-sf-result-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.ck-sf-result-help {
  position: relative;
  display: inline-flex;
}

.ck-sf-result-help .ck-sf-info {
  position: relative;
  top: auto;
  left: auto;
  margin: 0;
}

.ck-sf-result-help .ck-sf-tip {
  max-width: min(320px, 80vw);
  white-space: pre-line;
}

/* Symmetric margins: theme resets (Hello: h3 0.5rem / 1rem) would push the text off the centre line of the «i» ring. */
.ck-sf-result-head .ck-sf-res-heading {
  margin: 12px 0;
}

.ck-sf-res-heading {
  color: var(--ck-sf-muted);
  font: 700 var(--ck-sf-fs-xs) / 1.2 var(--ck-sf-font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ck-sf-res-heading:focus {
  outline: none;
}

/* The heading box shrinks to its capitals, so the flex row centres the «i» ring on the uppercase text whatever the
   ascent and descent of the shop font are. */
@supports (text-box: trim-both cap alphabetic) {
  .ck-sf-result-head .ck-sf-res-heading {
    text-box: trim-both cap alphabetic;
  }
}

.ck-sf-res-heading:focus-visible {
  outline: 2px solid var(--ck-sf-black);
  outline-offset: 4px;
}

.ck-sf-card .ck-sf-res-size {
  margin-top: calc(10 * var(--ck-sf-u));
}

.ck-sf-res-size {
  color: var(--ck-sf-black);
  font: italic 800 var(--ck-sf-fs-size) / 1 var(--ck-sf-font);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.ck-sf-res-size--text {
  font-size: max(22px, calc(28 * var(--ck-sf-u)));
  line-height: 1.15;
  text-transform: none;
}

/* «Zwischengröße M/L» is one long word: a step smaller than a single size so it stays on one line. */
.ck-sf-card--between .ck-sf-res-size {
  font-size: max(26px, calc(36 * var(--ck-sf-u)));
}

.ck-sf-card .ck-sf-res-sub {
  margin-top: calc(12 * var(--ck-sf-u));
  color: var(--ck-sf-black);
  font: 600 var(--ck-sf-fs-m) / 1.35 var(--ck-sf-font);
}

.ck-sf-card .ck-sf-res-text {
  margin-top: calc(6 * var(--ck-sf-u));
  color: var(--ck-sf-muted);
  font: 400 var(--ck-sf-fs-s) / 1.45 var(--ck-sf-font);
}

.ck-sf-card .ck-sf-res-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: calc(12 * var(--ck-sf-u));
}

.ck-sf-meta {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 3px 12px;
  border-radius: 999px;
  background: #fff;
  color: var(--ck-sf-black);
  font: 600 var(--ck-sf-fs-xs) / 1.2 var(--ck-sf-font);
}

.ck-sf-meta--sehr_gut,
.ck-sf-meta--gut {
  background: var(--ck-sf-lime);
}

.ck-sf-meta--grenz {
  box-shadow: inset 0 0 0 1px var(--ck-sf-orange);
}

.ck-sf-meta--est {
  box-shadow: inset 0 0 0 1px var(--ck-sf-border);
}

/* Neighbouring sizes: one segmented bar, the recommendation in black (like the selected size in the site table). */
.ck-sf-card .ck-sf-scale {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  margin-top: calc(22 * var(--ck-sf-u));
  padding: 0;
  overflow: hidden;
  border-radius: var(--ck-sf-radius);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--ck-sf-border);
  list-style: none;
}

.ck-sf-scale-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: max(58px, calc(66 * var(--ck-sf-u)));
  padding: calc(8 * var(--ck-sf-u)) 4px;
}

.ck-sf-scale-item + .ck-sf-scale-item {
  border-left: 1px solid var(--ck-sf-border);
}

.ck-sf-scale-size {
  color: var(--ck-sf-black);
  font: 800 var(--ck-sf-fs-l) / 1.1 var(--ck-sf-font);
  text-transform: uppercase;
}

.ck-sf-scale-pct {
  color: var(--ck-sf-muted);
  font: 500 var(--ck-sf-fs-xs) / 1.2 var(--ck-sf-font);
  font-variant-numeric: tabular-nums;
}

.ck-sf-scale-item.is-rec {
  background: var(--ck-sf-ink);
}

.ck-sf-scale-item.is-rec + .ck-sf-scale-item,
.ck-sf-scale-item + .ck-sf-scale-item.is-rec {
  border-left-color: var(--ck-sf-ink);
}

.ck-sf-scale-item.is-rec .ck-sf-scale-size,
.ck-sf-scale-item.is-rec .ck-sf-scale-pct {
  color: #fff;
}

.ck-sf-card .ck-sf-scale-legend {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  color: var(--ck-sf-muted);
  font: 500 var(--ck-sf-fs-xs) / 1.3 var(--ck-sf-font);
}

.ck-sf-scale-legend span:first-child {
  text-align: left;
}

.ck-sf-scale-legend span:last-child {
  text-align: right;
}

/* Hints, reserve and support lines. */
.ck-sf-card .ck-sf-notes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: calc(14 * var(--ck-sf-u));
}

.ck-sf-notes p,
.ck-sf-note {
  margin: 0;
  color: var(--ck-sf-black);
  font: 500 var(--ck-sf-fs-s) / 1.45 var(--ck-sf-font);
}

.ck-sf-card > .ck-sf-note {
  margin-top: calc(10 * var(--ck-sf-u));
}


.ck-sf-notes a,
.ck-sf-exchange a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Two-chart sets: part → size · match. */
.ck-sf-card .ck-sf-parts {
  margin-top: calc(16 * var(--ck-sf-u));
  padding: 0 calc(14 * var(--ck-sf-u));
  border-radius: var(--ck-sf-radius);
  background: #fff;
  text-align: left;
}

.ck-sf-part {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: calc(10 * var(--ck-sf-u)) 0;
}

.ck-sf-part + .ck-sf-part {
  border-top: 1px solid var(--ck-sf-border);
}

.ck-sf-part dt {
  margin: 0;
  color: var(--ck-sf-black);
  font: 500 var(--ck-sf-fs-s) / 1.35 var(--ck-sf-font);
}

.ck-sf-part dd {
  margin: 0;
  color: var(--ck-sf-black);
  font: 700 var(--ck-sf-fs-s) / 1.35 var(--ck-sf-font);
  white-space: nowrap;
}

/* Secondary action as a white row (invitation, «Modelle in Größe X»): never competes with the lime button. */
.ck-sf-row-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: calc(10 * var(--ck-sf-u)) calc(16 * var(--ck-sf-u));
  border: 0;
  border-radius: var(--ck-sf-radius);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--ck-sf-border);
  color: var(--ck-sf-black);
  font: 600 var(--ck-sf-fs-s) / 1.3 var(--ck-sf-font);
  text-align: left;
  text-decoration: none !important;
  cursor: pointer;
  transition: box-shadow 0.15s;
}

.ck-sf-card .ck-sf-row-btn {
  margin-top: calc(16 * var(--ck-sf-u));
}

.ck-sf-row-btn > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ck-sf-row-btn:hover {
  box-shadow: inset 0 0 0 1px var(--ck-sf-ink);
}

.ck-sf-row-btn:focus-visible {
  outline: 2px solid var(--ck-sf-ink);
  outline-offset: 2px;
}

/* CSS chevron. */
.ck-sf-row-arrow {
  flex: none;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border: solid currentColor;
  border-width: 2px 2px 0 0;
  transform: rotate(45deg);
}

/* «Zwischengröße»: two equal tiles (native radios); the button below follows the choice. */
.ck-sf-card .ck-sf-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(10 * var(--ck-sf-u));
  min-width: 0;
  margin-top: calc(24 * var(--ck-sf-u));
  padding: 0;
  border: 0;
}

.ck-sf-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  min-height: max(96px, calc(108 * var(--ck-sf-u)));
  padding: calc(22 * var(--ck-sf-u)) 6px calc(14 * var(--ck-sf-u));
  border-radius: var(--ck-sf-radius);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--ck-sf-border);
  cursor: pointer;
  transition: box-shadow 0.15s;
}

.ck-sf-option:hover {
  box-shadow: inset 0 0 0 1px var(--ck-sf-ink);
}

.ck-sf-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.ck-sf-option.is-picked,
.ck-sf-option:has(input:checked) {
  box-shadow: inset 0 0 0 2px var(--ck-sf-ink);
}

.ck-sf-option:has(input:focus-visible):not(.is-picked):not(:has(input:checked)) {
  box-shadow: inset 0 0 0 1px var(--ck-sf-black);
}

.ck-sf-option-tag {
  position: absolute;
  top: 0;
  left: 50%;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--ck-sf-ink);
  color: #fff;
  font: 700 max(11px, calc(12 * var(--ck-sf-u))) / 1.3 var(--ck-sf-font);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.ck-sf-option-size {
  color: var(--ck-sf-black);
  font: italic 800 max(26px, calc(34 * var(--ck-sf-u))) / 1 var(--ck-sf-font);
  text-transform: uppercase;
}

/* One line (texts are kept short so they fit a phone tile). */
.ck-sf-option-word {
  max-width: 100%;
  overflow: hidden;
  color: var(--ck-sf-muted);
  font: 500 var(--ck-sf-fs-s) / 1.3 var(--ck-sf-font);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ck-sf-option-stock {
  color: #9a2500;
  font: 600 var(--ck-sf-fs-xs) / 1.3 var(--ck-sf-font);
}

/* Button + stock line. */
.ck-sf-card .ck-sf-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: calc(10 * var(--ck-sf-u));
  margin-top: calc(24 * var(--ck-sf-u));
}

.ck-sf-avail {
  margin: 0;
  color: var(--ck-sf-black);
  font: 600 var(--ck-sf-fs-xs) / 1.35 var(--ck-sf-font);
}

/* Sold-out note (user 2026-10-15): calm, with a small amber dot instead of red text; alternatives follow. */
.ck-sf-avail--out {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--ck-sf-black);
  text-align: center;
}

.ck-sf-avail--out::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f5a524;
}

.ck-sf-avail-box {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: calc(14 * var(--ck-sf-u));
  border: 1px solid var(--ck-sf-border);
  border-radius: var(--ck-sf-radius);
  background: #fff;
  text-align: center;
}

.ck-sf-avail-sub {
  margin: 0;
  color: var(--ck-sf-muted);
  font: 500 var(--ck-sf-fs-xs) / 1.35 var(--ck-sf-font);
}

.ck-sf-alts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.ck-sf-alt {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--ck-sf-border);
  border-radius: 999px;
  background: #fff;
  color: var(--ck-sf-black);
  font: 600 var(--ck-sf-fs-xs) / 1 var(--ck-sf-font);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}

/* The theme paints button:hover / :focus pink ([type=button]:hover, 0-2-0): the chips and the restock link keep their
   own colours in every state. */
button.ck-sf-alt[type="button"]:is(:hover, :focus, :active) {
  background: #fff;
  color: var(--ck-sf-black);
}

/* The theme's [type=button] border and radius have the same weight as the chip class; the dialog scope wins. */
.ck-sf-dialog button.ck-sf-alt[type="button"] {
  border: 1px solid var(--ck-sf-border);
  border-radius: 999px;
}

.ck-sf-dialog button.ck-sf-alt[type="button"]:hover {
  border-color: var(--ck-sf-black);
}

.ck-sf-alt:hover {
  border-color: var(--ck-sf-black);
}

.ck-sf-alt:focus-visible,
.ck-sf-rel:focus-visible,
.ck-sf-restock-link:focus-visible {
  outline: 2px solid var(--ck-sf-black);
  outline-offset: 2px;
}

.ck-sf-alt-dot {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ck-sf-dot, #000);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}

.ck-sf-related {
  display: grid;
  gap: 8px;
}

.ck-sf-rel {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 12px 6px 6px;
  border: 1px solid var(--ck-sf-border);
  border-radius: calc(var(--ck-sf-radius) * .6);
  color: var(--ck-sf-black);
  font: 600 var(--ck-sf-fs-xs) / 1.3 var(--ck-sf-font);
  text-align: left;
  text-decoration: none;
  transition: border-color .15s ease;
}

.ck-sf-rel:hover {
  border-color: var(--ck-sf-black);
}

.ck-sf-rel img {
  flex: none;
  width: 48px;
  height: 58px;
  border-radius: 6px;
  background: #f1f1f4;
  object-fit: contain;
}

.ck-sf-rel-price {
  display: block;
  margin-top: 2px;
  color: var(--ck-sf-muted);
  font-weight: 500;
}

.ck-sf-rel-price--sale {
  color: #c2410c;
}

.ck-sf-rel-price del {
  color: var(--ck-sf-muted);
  font-weight: 400;
}

.ck-sf-restock-link {
  all: unset;
  align-self: center;
  /* WCAG 2.5.8: a 24 px target, not only the line of text (audit 15.10). */
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 4px;
  color: var(--ck-sf-muted);
  font: 500 var(--ck-sf-fs-xs) / 1.35 var(--ck-sf-font);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

button.ck-sf-restock-link[type="button"]:is(:hover, :focus, :active) {
  background: transparent;
  color: var(--ck-sf-muted);
}

button.ck-sf-restock-link[type="button"]:hover {
  color: var(--ck-sf-black);
}

.ck-sf-card .ck-sf-exchange {
  margin-top: calc(20 * var(--ck-sf-u));
  padding-top: calc(16 * var(--ck-sf-u));
  border-top: 1px solid var(--ck-sf-border);
  color: var(--ck-sf-black);
  font: 500 var(--ck-sf-fs-xs) / 1.5 var(--ck-sf-font);
}

.ck-sf-exchange .ck-sf-muted {
  color: var(--ck-sf-muted);
  font-weight: 400;
}

.ck-sf-why {
  font-size: var(--ck-sf-fs-xs);
}

.ck-sf-card .ck-sf-why {
  margin-top: calc(4 * var(--ck-sf-u));
}

.ck-sf-why > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ck-sf-target);
  color: var(--ck-sf-black);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  list-style: none;
}

.ck-sf-why > summary::-webkit-details-marker {
  display: none;
}

.ck-sf-why > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 8px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: translateY(-2px) rotate(45deg);
}

.ck-sf-why[open] > summary::after {
  transform: translateY(2px) rotate(-135deg);
}

.ck-sf-why-body {
  margin: 2px 0 calc(14 * var(--ck-sf-u));
  padding: calc(4 * var(--ck-sf-u)) calc(14 * var(--ck-sf-u)) calc(12 * var(--ck-sf-u));
  border-radius: var(--ck-sf-radius);
  background: #fff;
  text-align: left;
}

.ck-sf-why-body .ck-sf-muted {
  margin: calc(10 * var(--ck-sf-u)) 0 0;
}

.ck-sf-basis {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ck-sf-basis li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--ck-sf-border);
}

.ck-sf-basis-name {
  min-width: 8em;
  font-weight: 600;
}

.ck-sf-src {
  margin-left: auto;
  padding: 1px 8px;
  border: 1px solid var(--ck-sf-border);
  border-radius: 999px;
  background: #fff;
  font-size: var(--ck-sf-fs-xs);
}

.ck-sf-src--gemessen {
  border-color: var(--ck-sf-ink);
}

.ck-sf-src--geschaetzt {
  border-style: dashed;
}

/* ---------------------------------------------------------------------------------------------------------------
 * Size tables (layout v2, Figma 8:6460 / 8:5160)
 * ------------------------------------------------------------------------------------------------------------- */

/* Control under the sketch, centred: switch Produktmaße / Körpermaße (user, Round 9). */
.ck-sf-table-ctl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--ck-sf-u));
  margin: 0 0 calc(22 * var(--ck-sf-u));
}

.ck-sf-seg {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 999px;
  background: #fff;
}

.ck-sf-seg[hidden] {
  display: none;
}

.ck-sf-seg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ck-sf-black);
  font: 600 var(--ck-sf-fs-s) / 1.1 var(--ck-sf-font);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.ck-sf-seg-btn:hover {
  background: var(--ck-sf-surface);
}

.ck-sf-seg-btn[aria-pressed="true"] {
  background: var(--ck-sf-black);
  color: #fff;
}

.ck-sf-seg-btn:focus-visible {
  outline: 2px solid var(--ck-sf-ink);
  outline-offset: 2px;
}

.ck-sf-chart + .ck-sf-chart {
  margin-top: calc(40 * var(--ck-sf-u));
  padding-top: calc(28 * var(--ck-sf-u));
  border-top: 1px solid var(--ck-sf-border);
}

.ck-sf-unisex {
  margin: 0 0 calc(14 * var(--ck-sf-u));
  color: var(--ck-sf-muted);
  font-size: var(--ck-sf-fs-s);
  text-align: center;
}

.ck-sf-tables {
  display: flex;
  flex-direction: column;
  gap: calc(22 * var(--ck-sf-u));
}

.ck-sf-table-wrap {
  border-radius: var(--ck-sf-radius-l);
}

/* No overflow clip on the table: it would also clip the caption (code chip and badge at its corners). The corner
   cells carry the radius instead. */
.ck-sf-table {
  --ck-sf-table-r: max(10px, calc(12 * var(--ck-sf-u)));
  width: 100%;
  margin: 0;
  border: 1px solid var(--ck-sf-border);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--ck-sf-table-r);
  background: #fff;
  color: var(--ck-sf-black);
  font: 400 var(--ck-sf-fs-l) / 1.25 var(--ck-sf-font);
  table-layout: fixed;
}

.ck-sf-table caption {
  caption-side: top;
  padding: 0 0 calc(8 * var(--ck-sf-u));
  color: var(--ck-sf-black);
  font: 600 var(--ck-sf-fs-m) / 1.25 var(--ck-sf-font);
  text-align: left;
}

/* Letter chip · name · badge stay in one row; a long name wraps inside its own column (badge never drops below). */
.ck-sf-cap {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
}

/* One line (user, Round 9): the full name with its explanation; ellipsis only as the last resort. */
.ck-sf-caption-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ck-sf-table th,
.ck-sf-table td {
  height: max(44px, calc(52 * var(--ck-sf-u)));
  padding: 6px 10px;
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid var(--ck-sf-border);
  background: transparent;
  text-align: center;
  vertical-align: middle;
  /* Strictly one line per cell (user, Round 9): long texts live in the caption and the notes below the table. */
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ck-sf-table thead th:first-child {
  border-top-left-radius: calc(var(--ck-sf-table-r) - 1px);
}

.ck-sf-table thead th:last-child {
  border-top-right-radius: calc(var(--ck-sf-table-r) - 1px);
}

.ck-sf-table tbody tr:last-child > :first-child {
  border-bottom-left-radius: calc(var(--ck-sf-table-r) - 1px);
}

.ck-sf-table tbody tr:last-child > :last-child {
  border-bottom-right-radius: calc(var(--ck-sf-table-r) - 1px);
}

.ck-sf-table tbody tr:last-child th,
.ck-sf-table tbody tr:last-child td {
  border-bottom: 0;
}

.ck-sf-table thead th {
  background: var(--ck-sf-surface);
  font: 600 var(--ck-sf-fs-m) / 1.15 var(--ck-sf-font);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.ck-sf-table th:first-child,
.ck-sf-table td:first-child {
  width: 30%;
  border-right: 1px solid var(--ck-sf-border);
}

.ck-sf-table tbody th {
  font-weight: 700;
}

/* Recommended size after a calculation (user, Round 10): no badge, the whole row faintly lime with the lime underline,
   so it cannot be mixed up with the row below; «Empfehlung» is read out by screen readers only. */
.ck-sf-row-badge {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.ck-sf-table tr.is-rec th,
.ck-sf-table tr.is-rec td {
  background: #f6ffe5;
  background: color-mix(in srgb, var(--ck-sf-lime) 12%, #fff);
  box-shadow: inset 0 -3px 0 var(--ck-sf-lime);
}

/* Selected size on the PDP = black cell (Q22.5), the lime underline stays when it is the recommendation too. */
.ck-sf-table tr.is-selected th,
.ck-sf-table tr.is-selected td {
  background: var(--ck-sf-black);
  color: #fff;
}

/* Zone rows: same font as every row (user, Round 9), a light tint, the explanation in the tooltip. */
.ck-sf-zone-row th,
.ck-sf-zone-row td {
  background: #fafafa;
}

/* Value + «i»: the icon sits outside the flow, so the value stays exactly centred in its cell. */
.ck-sf-table td:has(.ck-sf-val-info) {
  overflow: visible;
}

/* Trimmed to cap height and baseline: the box centre is the visual centre of the figures, the icon aligns to it. */
.ck-sf-val-info {
  position: relative;
  display: inline-block;
  text-box: trim-both cap alphabetic;
}

/* 24 px target (WCAG 2.2), the visible ring is 16 px. */
.ck-sf-info {
  position: absolute;
  top: 50%;
  left: 100%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ck-sf-muted);
  font: 700 10px / 1 var(--ck-sf-font);
  cursor: help;
}

.ck-sf-info::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
}

.ck-sf-info:hover,
.ck-sf-info:focus-visible {
  color: var(--ck-sf-black);
}

.ck-sf-info:focus-visible {
  outline: 2px solid var(--ck-sf-ink);
  outline-offset: 2px;
}

.ck-sf-tip {
  position: absolute;
  right: -21px;
  bottom: calc(100% + 10px);
  z-index: 5;
  width: max-content;
  max-width: min(240px, 72vw);
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--ck-sf-black);
  color: #fff;
  font: 500 var(--ck-sf-fs-xs) / 1.35 var(--ck-sf-font);
  text-align: left;
  white-space: normal;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s, visibility 0.15s;
}

/* Mouse: hover; keyboard: focus; touch (no hover): tap toggles aria-expanded (drawer.js). */
.ck-sf-info:not([data-tip-dismissed]):hover + .ck-sf-tip,
.ck-sf-info:not([data-tip-dismissed]):focus-visible + .ck-sf-tip,
.ck-sf-info[aria-expanded="true"] + .ck-sf-tip {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.ck-sf-flat-hint,
.ck-sf-kids-zone {
  margin: calc(8 * var(--ck-sf-u)) 0 0;
  color: var(--ck-sf-muted);
  font-size: var(--ck-sf-fs-s);
}

/* A hint shared by several tables (drawer.js): directly under the tables, as close as a hint of one table. */
.ck-sf-tables > .ck-sf-flat-hint {
  margin-top: calc(8 * var(--ck-sf-u) - 22 * var(--ck-sf-u));
}

.ck-sf-tables > .ck-sf-flat-hint + .ck-sf-flat-hint {
  margin-top: calc(4 * var(--ck-sf-u) - 22 * var(--ck-sf-u));
}

.ck-sf-table-notes {
  margin-top: calc(18 * var(--ck-sf-u));
  color: var(--ck-sf-muted);
  font-size: var(--ck-sf-fs-s);
}

.ck-sf-table-notes p {
  margin: 0 0 6px;
}

/* Hints under the tables: an «i» ring in front (user, Round 9) and a hanging indent; no single word alone on the last
   line. vertical-align: middle puts the ring centre on baseline + ½ x-height of the text, its optical middle. */
.ck-sf-flat-hint,
.ck-sf-kids-zone,
.ck-sf-table-notes p {
  padding-left: 25px;
  text-indent: -25px;
  line-height: 1.45;
  text-wrap: pretty;
}

.ck-sf-flat-hint::before,
.ck-sf-kids-zone::before,
.ck-sf-table-notes p::before {
  content: "";
  display: inline-block;
  position: relative;
  /* «middle» centres the ring on the x-height (0.25 em above the baseline in Barlow); lifted to halfway between that
     and the cap-height middle (0.35 em), so it sits optically level with a line of mixed capitals (user, Round 9). */
  top: -0.05em;
  margin-right: 7px; /* 18 + 7 = the 25 px hanging indent */
  text-indent: 0;
  vertical-align: middle;
}

/* The «i» ring drawn in CSS: 18 px; dot 2 × 2 and stem 2 × 5 on whole pixels from the outer edge (border-box): the glyph
   (8–10 × 5–13 px) is centred on 9 px in both directions. */
.ck-sf-info::before,
.ck-sf-flat-hint::before,
.ck-sf-kids-zone::before,
.ck-sf-table-notes p::before {
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background:
    linear-gradient(currentColor, currentColor) 8px 5px / 2px 2px no-repeat border-box,
    linear-gradient(currentColor, currentColor) 8px 8px / 2px 5px no-repeat border-box;
}

/* Feedback line at the bottom of every Größenfinder (drawer and overview page). */
.ck-sf-feedback {
  margin: calc(28 * var(--ck-sf-u)) 0 0;
  padding-top: calc(16 * var(--ck-sf-u));
  border-top: 1px solid var(--ck-sf-border);
  color: var(--ck-sf-muted);
  font-size: var(--ck-sf-fs-xs);
  line-height: 1.45;
  text-align: center;
  text-wrap: balance;
}

.ck-sf-feedback a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

.ck-sf-feedback a:hover {
  color: var(--ck-sf-black);
}

.ck-sf-table-panel .ck-sf-sketch-box svg {
  max-width: calc(220 * var(--ck-sf-u));
}

/* ---------------------------------------------------------------------------------------------------------------
 * PDP strip shortcode (site CSS for .ck-pdp-size-cell in template 1126 wins; these are fallbacks)
 * ------------------------------------------------------------------------------------------------------------- */

.ck-sf-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
  font-family: var(--ck-sf-font);
}

.ck-sf-strip-head {
  display: none;
}

.ck-sf-strip-cells {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  overflow: hidden;
  border: 1px solid var(--ck-sf-border);
  border-radius: var(--ck-sf-radius-l);
}

:where(.ck-sf-strip) .ck-pdp-size-cell {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 64px;
  padding: 12px 6px;
  text-align: center;
}

:where(.ck-sf-strip) .ck-pdp-size-cell + .ck-pdp-size-cell {
  border-left: 1px solid var(--ck-sf-border);
}

:where(.ck-sf-strip) .ck-pdp-size-num {
  font-weight: 700;
}

:where(.ck-sf-strip) .ck-pdp-size-range {
  color: var(--ck-sf-muted);
  font-size: var(--ck-sf-fs-s);
}

:where(.ck-sf-strip) .ck-pdp-size-cell.ck-size-selected {
  background: var(--ck-sf-black);
  color: #fff;
}

:where(.ck-sf-strip) .ck-pdp-size-cell.ck-size-selected .ck-pdp-size-range {
  color: #fff;
}

.ck-sf-strip-all {
  display: inline-flex;
  align-items: center;
  min-height: var(--ck-sf-target);
  color: var(--ck-sf-black);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------------------------------------------------------------------------------------------------------------
 * Overview page «Größen & Passform»
 * ------------------------------------------------------------------------------------------------------------- */

.ck-sf-overview {
  color: var(--ck-sf-black);
  font-size: var(--ck-sf-fs-m);
  line-height: 1.4;
}

.ck-sf-overview *,
.ck-sf-overview *::before,
.ck-sf-overview *::after {
  box-sizing: border-box;
}

.ck-sf-ov-calc {
  max-width: 560px;
  margin: 0 auto calc(48 * var(--ck-sf-u));
  padding: calc(28 * var(--ck-sf-u)) var(--ck-sf-gap);
  border-radius: var(--ck-sf-radius-l);
  background: #fff;
}

.ck-sf-field--select {
  margin-bottom: var(--ck-sf-gap);
}

.ck-sf-select {
  position: relative;
  display: flex;
  align-items: center;
}

.ck-sf-select select {
  width: 100%;
  min-height: max(48px, calc(52 * var(--ck-sf-u)));
  padding: 1px 45px 1px calc(16 * var(--ck-sf-u) + 1px);
  border: 1px solid transparent;
  border-radius: var(--ck-sf-radius);
  background: var(--ck-sf-surface);
  color: var(--ck-sf-black);
  font: 600 var(--ck-sf-fs-m) / 1.2 var(--ck-sf-font);
  appearance: none;
  cursor: pointer;
}

.ck-sf-select .ck-sf-chevron {
  position: absolute;
  right: 14px;
  pointer-events: none;
}

.ck-sf-ov-heading {
  margin: 0 0 calc(20 * var(--ck-sf-u));
  font: italic 800 var(--ck-sf-fs-h3) / 1.05 var(--ck-sf-font);
  text-transform: uppercase;
}

.ck-sf-ov-tables .ck-sf-tables {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: calc(22 * var(--ck-sf-u));
}

.ck-sf-ov-tables .ck-sf-chart-title {
  text-align: left;
}

.ck-sf-ov-tables .ck-sf-unisex {
  text-align: left;
}

/* ---------------------------------------------------------------------------------------------------------------
 * Guide view (overview shortcode, view="guide"): category cards, then calculator + tables of the chosen chart.
 * Cards follow the «Zwischengröße» tiles (white, 1 px frame, 2 px ink frame when chosen); without JS every chart
 * panel is listed below the cards.
 * ------------------------------------------------------------------------------------------------------------- */

.ck-sf-guide-pick {
  margin: 0 0 calc(40 * var(--ck-sf-u));
}

.ck-sf-guide-heading {
  margin-bottom: calc(10 * var(--ck-sf-u));
}

.ck-sf-guide-intro {
  max-width: 62ch;
  margin-bottom: calc(24 * var(--ck-sf-u));
}

.ck-sf-guide-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(140px, calc(168 * var(--ck-sf-u))), 1fr));
  gap: calc(12 * var(--ck-sf-u));
  margin: 0;
  padding: 0;
  list-style: none;
}

.ck-sf-guide-item {
  display: flex;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.ck-sf-guide-item::before {
  content: none;
}

.ck-sf-overview a.ck-sf-guide-card {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  gap: calc(10 * var(--ck-sf-u));
  min-width: 0;
  min-height: max(132px, calc(156 * var(--ck-sf-u)));
  padding: calc(16 * var(--ck-sf-u)) calc(10 * var(--ck-sf-u)) calc(14 * var(--ck-sf-u));
  border-radius: var(--ck-sf-radius);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--ck-sf-border);
  color: var(--ck-sf-black);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow 0.15s, background-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.ck-sf-overview a.ck-sf-guide-card:hover {
  box-shadow: inset 0 0 0 1px var(--ck-sf-ink);
  outline: 2px solid var(--ck-sf-ink);
  outline-offset: -2px;
}

.ck-sf-overview a.ck-sf-guide-card[aria-pressed="true"] {
  background: var(--ck-sf-surface);
  box-shadow: inset 0 0 0 2px var(--ck-sf-ink);
}

.ck-sf-overview a.ck-sf-guide-card:focus-visible {
  outline: 2px solid var(--ck-sf-black);
  outline-offset: 2px;
  box-shadow: inset 0 0 0 1px var(--ck-sf-ink), 0 0 0 2px #fff;
}

.ck-sf-overview a.ck-sf-guide-card[aria-pressed="true"]:focus-visible {
  box-shadow: inset 0 0 0 2px var(--ck-sf-ink), 0 0 0 2px #fff;
}

/* Chosen card: check mark in an ink circle (CSS icon), so the state is not shown by the frame alone. */
.ck-sf-guide-card[aria-pressed="true"]::before {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ck-sf-ink);
}

.ck-sf-guide-card[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  top: 19px;
  right: 19px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: translate(50%, calc(-50% - 1.5px)) rotate(45deg);
}

.ck-sf-guide-icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: max(64px, calc(84 * var(--ck-sf-u)));
  color: #1d1d1f;
}

.ck-sf-guide-icon svg,
.ck-sf-guide-icon img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 100%;
  overflow: visible;
}

/* The sketch as an icon: no measuring arrows, letters or stitching; lines keep their width at the small size. */
.ck-sf-guide-icon :is(.ck-sf-arrow, .ck-sf-code, .ck-sf-stitch, [data-measure]) {
  display: none;
}

.ck-sf-guide-icon svg * {
  vector-effect: non-scaling-stroke;
}

.ck-sf-guide-name {
  display: block;
  max-width: 100%;
  font: 600 var(--ck-sf-fs-s) / 1.25 var(--ck-sf-font);
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Panels: with JS only the chosen one is shown; the gap appears only between visible panels. */
.ck-sf-guide-panels {
  display: flex;
  flex-direction: column;
  gap: calc(48 * var(--ck-sf-u));
}

.ck-sf-guide-panel {
  min-width: 0;
  padding-top: calc(28 * var(--ck-sf-u));
  border-top: 1px solid var(--ck-sf-border);
  /* Fragment jumps and scrollIntoView() stop below a sticky site header. */
  scroll-margin-top: var(--ck-sf-anchor-offset, 96px);
  /* The two-column layout follows the width of the page column, not of the window. */
  container: ck-sf-guide-panel / inline-size;
}

.ck-sf-guide-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(6 * var(--ck-sf-u));
  margin: 0 0 calc(24 * var(--ck-sf-u));
}

.ck-sf-overview .ck-sf-guide-change {
  margin: 0;
}

.ck-sf-guide-title {
  margin: 0;
  color: var(--ck-sf-black);
  font: italic 800 var(--ck-sf-fs-h3) / 1.05 var(--ck-sf-font);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  overflow-wrap: break-word;
  hyphens: auto;
  scroll-margin-top: var(--ck-sf-anchor-offset, 96px);
}

.ck-sf-guide-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(40 * var(--ck-sf-u));
}

/* With JS the chosen chart takes the place of the cards (drawer.js hides them): no separator line above it. */
.ck-sf-guide-pick[hidden] + .ck-sf-guide-panels > .ck-sf-guide-panel {
  padding-top: 0;
  border-top: 0;
}

/* Wide screens: the Größenfinder of the chosen chart (drawer tabs «Größenrechner / Größentabelle», drawer.js) in a
   box on the grey surface over the full column width. */
.ck-sf-guide .ck-sf-guide-calc {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: calc(28 * var(--ck-sf-u)) calc(32 * var(--ck-sf-u)) calc(36 * var(--ck-sf-u));
  background: var(--ck-sf-surface);
  box-shadow: inset 0 0 0 1px var(--ck-sf-border);
}

.ck-sf-guide-panel .ck-sf-tabs {
  margin-bottom: calc(32 * var(--ck-sf-u));
}

/* The guide fills its page column (support page: the full content width next to / below the topic menu). */
.ck-sf-overview.ck-sf-guide {
  width: 100%;
  max-width: none;
}

/* --- Wide screens with JS (.is-wide): the chosen chart ---------------------------------------------------------- */

/* Scrolling to the chart stops below the site's sticky header (site token --ck-header-main-height). */
.ck-sf-guide.is-wide {
  --ck-sf-anchor-offset: calc(var(--ck-header-main-height, 76px) + 16 * var(--ck-sf-u));
  --ck-sf-icon-btn: max(var(--ck-sf-target), calc(45 * var(--ck-sf-u)));
}

/* «Zurück» to the cards and «Zurück zur Eingabe»: round icon buttons (CSS cross / arrow) in ink, so they stand out on
   the white page and on the grey surface; their names stay for screen readers. Both sit in the top right corner, level
   with the chart name: the cross outside the grey box, the arrow (shown with a result) to its left. */
.ck-sf-guide.is-wide .ck-sf-guide-panel {
  position: relative;
}

.ck-sf-guide.is-wide .ck-sf-guide-head {
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  gap: var(--ck-sf-gap);
}

.ck-sf-guide.is-wide .ck-sf-guide-title {
  padding-right: calc(var(--ck-sf-icon-btn) + 12 * var(--ck-sf-u));
}

.ck-sf-guide.is-wide a.ck-sf-guide-change,
.ck-sf-guide.is-wide .ck-sf-step--result > button.ck-sf-back-inline {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--ck-sf-icon-btn);
  height: var(--ck-sf-icon-btn);
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  background-color: var(--ck-sf-ink);
  color: #fff;
  text-decoration: none;
}

.ck-sf-guide.is-wide .ck-sf-step--result > button.ck-sf-back-inline {
  position: absolute;
  z-index: 3;
  top: 0;
  right: calc(var(--ck-sf-icon-btn) + 12 * var(--ck-sf-u));
  margin: 0;
}

.ck-sf-guide.is-wide :is(a.ck-sf-guide-change, .ck-sf-step--result > button.ck-sf-back-inline):is(:hover, :focus, :active) {
  background-color: var(--ck-sf-lime);
  color: #000;
  text-decoration: none;
}

.ck-sf-guide.is-wide a.ck-sf-guide-change > .ck-sf-back-arrow {
  display: none;
}

.ck-sf-guide.is-wide :is(a.ck-sf-guide-change, .ck-sf-step--result > button.ck-sf-back-inline) > span:not(.ck-sf-back-arrow),
.ck-sf-guide.is-wide .ck-sf-guide-panel .ck-sf-chart-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.ck-sf-guide.is-wide a.ck-sf-guide-change::before,
.ck-sf-guide.is-wide a.ck-sf-guide-change::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}

.ck-sf-guide.is-wide a.ck-sf-guide-change::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* On the grey surface: white fields, cards and help boxes (light inner boxes of a white card turn grey); control
   frames with at least 3:1 against the surface and the white fill (WCAG 1.4.11). :where() keeps the state rules
   (hover, focus, chosen, invalid) in charge. */
.ck-sf-guide.is-wide .ck-sf-guide-panel {
  --ck-sf-line: #80808a;
}

:where(.ck-sf-guide.is-wide .ck-sf-guide-panel) .ck-sf-input {
  border-color: var(--ck-sf-line);
  background: #fff;
}

:where(.ck-sf-guide.is-wide .ck-sf-guide-panel) :is(.ck-sf-tabs, .ck-sf-seg) {
  border-color: var(--ck-sf-line);
}

:where(.ck-sf-guide.is-wide .ck-sf-guide-panel) .ck-sf-chip span {
  border-color: var(--ck-sf-line);
}

:where(.ck-sf-guide.is-wide .ck-sf-guide-panel) .ck-sf-switch-track {
  background: var(--ck-sf-line);
}

:where(.ck-sf-guide.is-wide .ck-sf-guide-panel) :is(.ck-sf-pill, .ck-sf-option, .ck-sf-row-btn) {
  box-shadow: inset 0 0 0 1px var(--ck-sf-line);
}

:where(.ck-sf-guide.is-wide .ck-sf-guide-panel) :is(.ck-sf-card, .ck-sf-question, .ck-sf-notice, .ck-sf-rec-chip, .ck-sf-howto-body, .ck-sf-own) {
  background: #fff;
}

:where(.ck-sf-guide.is-wide .ck-sf-guide-panel) :is(.ck-sf-card .ck-sf-parts, .ck-sf-why-body, .ck-sf-avail-box, .ck-sf-meta:not(.ck-sf-meta--sehr_gut, .ck-sf-meta--gut)) {
  background: var(--ck-sf-surface);
}

:where(.ck-sf-guide.is-wide .ck-sf-guide-panel) .ck-sf-table thead th {
  background: var(--ck-sf-surface-2);
}

/* One box for every sketch (at most 300 units, never over 300 px): the drawing is fitted and centred in it, the «i»
   sits in its corner, so gloves, shirts and pants appear at one size. */
.ck-sf-guide.is-wide .ck-sf-guide-panel .ck-sf-sketch-box .ck-sf-sketch-frame {
  width: min(100%, 300px, calc(300 * var(--ck-sf-u)));
  max-width: none;
  aspect-ratio: 1;
}

.ck-sf-guide.is-wide .ck-sf-guide-panel .ck-sf-sketch-box .ck-sf-sketch-frame svg {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
}

.ck-sf-cap-info {
  position: relative;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
}

.ck-sf-cap-info .ck-sf-info {
  top: 0;
  left: 0;
  margin: 0;
}

.ck-sf-cap-info .ck-sf-tip {
  right: -8px;
  max-width: min(320px, 72vw);
  white-space: pre-line;
}

/* Support page on wide screens (owner, rounds 5, 7 and 8): one table per kind, «Größe | A | B | C …» (drawer.js
   mergeTables()). Every header cell is one line: the letter of the sketch (a button: the full name and the unit as its
   name, the full name in a tooltip on hover, focus and tap); the key beside the sketch names every letter and states
   the unit once. Hovering or focusing a column (header, cell or key) lights up the column and its arrow in the sketch. */
.ck-sf-table--merged :is(th, td):first-child {
  width: max(76px, calc(100 * var(--ck-sf-u)));
}

.ck-sf-table--merged thead th {
  height: auto;
  padding: calc(10 * var(--ck-sf-u)) 6px;
  /* The tooltips leave the cell. */
  overflow: visible;
  vertical-align: bottom;
}

.ck-sf-table--merged thead th[data-measure] {
  letter-spacing: 0;
  text-transform: none;
}


.ck-sf-col-key-wrap {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.ck-sf-table--merged .ck-sf-info.ck-sf-col-key {
  position: relative;
  top: auto;
  left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 24px;
  height: auto;
  min-height: 24px;
  margin: 0;
  padding: 0 1px;
  color: var(--ck-sf-black);
  font: 600 max(12px, calc(15 * var(--ck-sf-u))) / 1.2 var(--ck-sf-font);
  white-space: nowrap;
}

.ck-sf-table--merged .ck-sf-info.ck-sf-col-key::before {
  content: none;
}

.ck-sf-col-key-wrap > .ck-sf-tip {
  right: auto;
  left: -8px;
}

.ck-sf-table--merged .ck-sf-col-key-cell > .ck-sf-cap-info {
  display: inline-block;
  margin: 0 0 0 2px;
  vertical-align: middle;
}

/* Key beside the sketch: letter and full name of every column, one per line, and the unit once. */
.ck-sf-col-legend-list {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--ck-sf-u));
  margin: 0;
  padding: 0;
  color: var(--ck-sf-black);
  font: 500 var(--ck-sf-fs-m) / 1.3 var(--ck-sf-font);
  list-style: none;
}

.ck-sf-col-legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.ck-sf-col-legend-item > .ck-sf-code-chip {
  flex: 0 0 auto;
}

.ck-sf-col-legend-item.is-col > span {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.ck-sf-col-units {
  margin: calc(10 * var(--ck-sf-u)) 0 0;
  color: var(--ck-sf-muted);
  font: 600 var(--ck-sf-fs-s) / 1.3 var(--ck-sf-font);
}

.ck-sf-table--merged :is(td, th[data-measure]) + :is(td, th[data-measure]) {
  border-left: 1px solid var(--ck-sf-border);
}

.ck-sf-table--merged tbody td {
  padding-right: 6px;
  padding-left: 6px;
}

.ck-sf-table--merged td.is-col {
  background-color: var(--ck-sf-surface);
}

/* The support page shows everything (owner, round 4): «So misst du richtig», «Genauer» and «Worauf beruht das?» are
   open, each under a plain title instead of a toggle (drawer.js ctx.open); the drawer and narrow screens keep their
   disclosures. */
.ck-sf-guide.is-wide .ck-sf-howto.is-open > .ck-sf-howto-title {
  margin: 0;
  padding-top: calc(4 * var(--ck-sf-u));
  color: var(--ck-sf-black);
  font: 600 var(--ck-sf-fs-s) / 1.2 var(--ck-sf-font);
}

.ck-sf-guide.is-wide .ck-sf-howto--all.is-open {
  padding-top: calc(22 * var(--ck-sf-u));
}

.ck-sf-guide.is-wide .ck-sf-howto--all.is-open > .ck-sf-howto-title {
  margin: 0;
  padding: 0;
  color: var(--ck-sf-black);
  font: 700 var(--ck-sf-fs-m) / 1.2 var(--ck-sf-font);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ck-sf-guide.is-wide .ck-sf-howto--all.is-open .ck-sf-howto-all-body .ck-sf-h4 {
  margin: 0 0 calc(8 * var(--ck-sf-u));
  color: var(--ck-sf-black);
  font-size: var(--ck-sf-fs-s);
}

/* Measures as cards in an even grid (owner, round 9): 4 cards in one row where they fit, else two per row; 3 cards in
   one row, else two and the last over the full width. The names of one row share one height (subgrid), so every card
   of a row starts and ends on the same line. */
.ck-sf-guide.is-wide .ck-sf-howto--all.is-open {
  container: ck-sf-howto / inline-size;
}

.ck-sf-guide.is-wide .ck-sf-howto--all.is-open > .ck-sf-howto-all-body {
  --ck-sf-howto-cols: 2;
  display: grid;
  grid-template-columns: repeat(var(--ck-sf-howto-cols), minmax(0, 1fr));
  gap: 0 calc(22 * var(--ck-sf-u));
  margin-top: calc(14 * var(--ck-sf-u));
}

.ck-sf-guide.is-wide .ck-sf-howto--all.is-open > .ck-sf-howto-all-body[data-count="1"] {
  --ck-sf-howto-cols: 1;
}

@container ck-sf-howto (min-width: 760px) {
  .ck-sf-guide.is-wide .ck-sf-howto--all.is-open > .ck-sf-howto-all-body[data-count="3"] {
    --ck-sf-howto-cols: 3;
  }
}

@container ck-sf-howto (min-width: 1050px) {
  .ck-sf-guide.is-wide .ck-sf-howto--all.is-open > .ck-sf-howto-all-body[data-count="4"] {
    --ck-sf-howto-cols: 4;
  }
}

@container ck-sf-howto (max-width: 759.98px) {
  .ck-sf-guide.is-wide .ck-sf-howto--all.is-open > .ck-sf-howto-all-body[data-count="3"] > .ck-sf-howto-item:last-child {
    grid-column: 1 / -1;
  }
}

.ck-sf-guide.is-wide .ck-sf-howto--all.is-open .ck-sf-howto-item {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  min-width: 0;
  margin: 0;
}

.ck-sf-guide.is-wide .ck-sf-howto--all.is-open .ck-sf-howto-all-body .ck-sf-howto-item > .ck-sf-h4 {
  align-self: end;
}

.ck-sf-guide.is-wide .ck-sf-howto--all.is-open .ck-sf-howto-item > :is(.ck-sf-howto-body, .ck-sf-list) {
  align-self: stretch;
  margin: 0 0 calc(18 * var(--ck-sf-u));
}

/* «Allgemein» first over the full width (read before the measures), its tips in two columns where they fit. */
.ck-sf-guide.is-wide .ck-sf-howto--all.is-open .ck-sf-howto-item--general {
  grid-column: 1 / -1;
}

.ck-sf-guide.is-wide .ck-sf-howto--all.is-open .ck-sf-howto-item--general > .ck-sf-list {
  columns: 2 max(240px, calc(260 * var(--ck-sf-u)));
  column-gap: calc(40 * var(--ck-sf-u));
}

.ck-sf-guide.is-wide .ck-sf-howto--all.is-open .ck-sf-howto-item--general li {
  break-inside: avoid;
}

.ck-sf-guide.is-wide .ck-sf-howto--all.is-open .ck-sf-howto-item > .ck-sf-list {
  padding: calc(14 * var(--ck-sf-u)) calc(14 * var(--ck-sf-u)) calc(14 * var(--ck-sf-u)) calc(34 * var(--ck-sf-u));
  border-radius: var(--ck-sf-radius);
  background: #fff;
  font-size: var(--ck-sf-fs-s);
}

.ck-sf-guide.is-wide .ck-sf-more.is-open > .ck-sf-more-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: calc(16 * var(--ck-sf-u)) 0 calc(6 * var(--ck-sf-u));
}

.ck-sf-guide.is-wide .ck-sf-more-head > :is(.ck-sf-more-title, .ck-sf-more-hint) {
  margin: 0;
}

.ck-sf-guide.is-wide .ck-sf-more-head > .ck-sf-more-title {
  color: var(--ck-sf-black);
}

.ck-sf-guide.is-wide .ck-sf-why.is-open > .ck-sf-why-title {
  margin: calc(14 * var(--ck-sf-u)) 0 calc(6 * var(--ck-sf-u));
  color: var(--ck-sf-muted);
  font: 700 var(--ck-sf-fs-xs) / 1.2 var(--ck-sf-font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Texts that change with «Für wen?» (intro, hints) keep the space of the longer variant, and the place of «Soll länger
   passen» is kept for Erwachsene (drawer.js, support page): switching never moves the page (owner, round 9). */
.ck-sf-stack {
  display: grid;
}

.ck-sf-stack > span {
  grid-area: 1 / 1;
}

.ck-sf-stack > .ck-sf-stack-alt,
.ck-sf-reserved {
  visibility: hidden;
}

/* Left-aligned note in the open box: full lines (the balanced wrap of the centred card lines would leave a gap). */
.ck-sf-guide.is-wide .ck-sf-why.is-open .ck-sf-why-body p {
  text-wrap: pretty;
}

/* One column (owner, round 8): the tabs on top, then a band with the sketch and beside it its key — heading, intro and
   «Maße merken» (calculator) or the switch «Produktmaße / Körpermaße», the letters with their names, the unit and
   «Unisex-Größen» (tables) — then the form, the result or the tables over the full width of the box. No side column,
   nothing sticks. */
.ck-sf-guide.is-wide .ck-sf-guide-finder > .ck-sf-panel {
  max-width: none;
}

.ck-sf-guide.is-wide :is(.ck-sf-calc-aside, .ck-sf-chart-band) {
  --ck-sf-sketch-w: min(300px, calc(300 * var(--ck-sf-u)));
  display: grid;
  grid-template-columns: var(--ck-sf-sketch-w) minmax(0, max-content);
  justify-content: center;
  align-items: center;
  column-gap: calc(40 * var(--ck-sf-u));
  margin: 0 0 calc(28 * var(--ck-sf-u));
  padding-bottom: calc(28 * var(--ck-sf-u));
  border-bottom: 1px solid var(--ck-sf-border);
}

.ck-sf-guide.is-wide :is(.ck-sf-calc-aside .ck-sf-figure, .ck-sf-chart-aside .ck-sf-sketch-box) {
  margin: 0;
}

.ck-sf-guide.is-wide .ck-sf-calc-key > .ck-sf-intro {
  margin-bottom: calc(18 * var(--ck-sf-u));
}

.ck-sf-guide.is-wide .ck-sf-calc-key .ck-sf-remember-wrap {
  margin: 0;
}

/* With a result the instruction above the form is left out (heading and «Maße merken» stay). */
.ck-sf-guide.is-wide .ck-sf-calc:has(> .ck-sf-step--result:not([hidden])) .ck-sf-calc-key > .ck-sf-intro {
  display: none;
}

.ck-sf-guide.is-wide .ck-sf-chart-key {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(14 * var(--ck-sf-u));
  min-width: 0;
}

.ck-sf-guide.is-wide .ck-sf-chart-key > .ck-sf-table-ctl {
  justify-content: flex-start;
  margin: 0;
}

.ck-sf-guide.is-wide .ck-sf-chart-key > .ck-sf-unisex {
  margin: 0;
  text-align: left;
}

/* Form: every field with «So misst du richtig» beside it (a field without it shows its hint there); all inputs keep
   one width (2/5 of the box). */
@container ck-sf-guide-panel (min-width: 640px) {
  .ck-sf-guide.is-wide .ck-sf-calc .ck-sf-field {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    grid-template-rows: auto auto auto 1fr;
    column-gap: calc(32 * var(--ck-sf-u));
    align-items: start;
  }

  .ck-sf-guide.is-wide .ck-sf-calc .ck-sf-field > * {
    grid-column: 1;
    min-width: 0;
  }

  .ck-sf-guide.is-wide .ck-sf-calc .ck-sf-field > .ck-sf-howto.is-open {
    grid-column: 2;
    grid-row: 1 / -1;
    margin-top: 0;
  }

  .ck-sf-guide.is-wide .ck-sf-calc .ck-sf-field > .ck-sf-howto.is-open > .ck-sf-howto-title {
    margin-bottom: calc(7 * var(--ck-sf-u));
    padding-top: 0;
  }

  .ck-sf-guide.is-wide .ck-sf-calc .ck-sf-field > .ck-sf-howto.is-open > .ck-sf-howto-body {
    margin-top: 0;
  }

  .ck-sf-guide.is-wide .ck-sf-calc .ck-sf-field:not(:has(> .ck-sf-howto)) > .ck-sf-help {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    margin: 0;
  }
}

/* Result card in a wide box: the size with its details and notes beside «Worauf beruht das?», the button and the
   exchange note over the full width below (drawer.js splitCards()); one after the other in narrower boxes. */
.ck-sf-card-main,
.ck-sf-card-why,
.ck-sf-card-foot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
}

.ck-sf-card-main > *,
.ck-sf-card-why > *,
.ck-sf-card-foot > * {
  margin-top: 0;
  margin-bottom: 0;
}

.ck-sf-card-main > .ck-sf-note {
  margin-top: calc(10 * var(--ck-sf-u));
}

@container ck-sf-guide-panel (min-width: 1000px) {
  .ck-sf-guide.is-wide .ck-sf-card.is-split:has(> .ck-sf-card-why) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "main why" "foot foot";
    align-items: center;
    column-gap: calc(56 * var(--ck-sf-u));
    padding: calc(32 * var(--ck-sf-u)) calc(40 * var(--ck-sf-u)) calc(16 * var(--ck-sf-u));
  }

  .ck-sf-guide.is-wide .ck-sf-card.is-split > .ck-sf-card-main {
    grid-area: main;
  }

  .ck-sf-guide.is-wide .ck-sf-card.is-split > .ck-sf-card-why {
    grid-area: why;
  }

  .ck-sf-guide.is-wide .ck-sf-card.is-split > .ck-sf-card-foot {
    grid-area: foot;
    margin-top: calc(24 * var(--ck-sf-u));
  }

  .ck-sf-guide.is-wide .ck-sf-card.is-split > .ck-sf-card-why .ck-sf-why-title {
    margin-top: 0;
  }
}

/* ---------------------------------------------------------------------------------------------------------------
 * Guide view on narrow screens (≤ 1024 px, the site's mobile switch): an inline Größenfinder with the structure and
 * look of the product page drawer (grey head, tabs «Größenrechner / Größentabelle», same calculator and tables), in
 * the page instead of an overlay, with a product type dropdown on top. drawer.js sets .is-inline; without JS (or
 * on wide screens) the cards and server-rendered panels stay.
 * ------------------------------------------------------------------------------------------------------------- */

.ck-sf-guide-inline {
  display: none;
}

/* Same look as the drawer on the product page (owner, round 9): no frame and no second padding around the content (the
   page column is its edge, as the drawer's padding is), at most as wide as the drawer and centred, the grey head as a
   bar, the product type field in the drawer's field style. */
.ck-sf-guide.is-inline > .ck-sf-guide-inline {
  display: block;
  min-width: 0;
  max-width: 560px;
  margin: 0 auto;
  background: transparent;
  color: var(--ck-sf-black);
  font-family: var(--ck-sf-font);
  font-size: var(--ck-sf-fs-m);
  line-height: 1.4;
  text-align: left;
  scroll-margin-top: var(--ck-sf-anchor-offset, 96px);
}

.ck-sf-guide.is-inline > :is(.ck-sf-guide-pick, .ck-sf-guide-panels) {
  display: none;
}

.ck-sf-guide-inline > .ck-sf-inline-head {
  min-height: 60px;
  padding: calc(10 * var(--ck-sf-u)) 16px;
  border-radius: var(--ck-sf-radius);
}

.ck-sf-inline-body {
  padding: 20px 0 28px;
}

.ck-sf-inline-body .ck-sf-panel {
  max-width: none;
}

.ck-sf-inline-intro {
  margin: calc(14 * var(--ck-sf-u)) 0 0;
  color: var(--ck-sf-muted);
  font-size: var(--ck-sf-fs-s);
}

.ck-sf-inline-main {
  margin-top: calc(24 * var(--ck-sf-u));
}

.ck-sf-inline-main .ck-sf-tabs {
  margin-bottom: calc(24 * var(--ck-sf-u));
}

/* Tables of the chosen chart: as in the drawer (one column on phones), two columns where the page column allows the
   drawer table width. */
.ck-sf-inline-body .ck-sf-tables {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: calc(22 * var(--ck-sf-u));
}

.ck-sf-inline-body .ck-sf-tables > :is(.ck-sf-howto--all, h4) {
  grid-column: 1 / -1;
}

/* Smallest phones: the page column is narrower than the drawer ever gets; keep «Größe» in the first column whole. */
.ck-sf-inline-body .ck-sf-table :is(th, td):first-child {
  width: max(30%, 88px);
}

.ck-sf-field--dd .ck-sf-label {
  display: block;
  margin-bottom: 6px;
}

/* Product type dropdown: the site's field (white, 1 px #e4e4e7 frame, radius 10 units, black frame in focus) and a
   list in the same style. */
.ck-sf-dd {
  position: relative;
}

.ck-sf-dd-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: max(48px, calc(52 * var(--ck-sf-u)));
  margin: 0;
  padding: 4px 44px 4px calc(14 * var(--ck-sf-u) + 2px);
  border: 1px solid transparent;
  border-radius: var(--ck-sf-radius);
  background: var(--ck-sf-surface);
  color: var(--ck-sf-black);
  font: 600 var(--ck-sf-fs-m) / 1.2 var(--ck-sf-font);
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  white-space: normal;
  cursor: pointer;
  transition: border-color 0.15s;
}

/* In focus or open: one black 1 px frame, as the site's fields (no ring); themes do not recolour it. */
.ck-sf-overview .ck-sf-dd-btn:is(:focus, :focus-visible),
.ck-sf-overview .ck-sf-dd-btn[aria-expanded="true"] {
  border-color: var(--ck-sf-black);
  outline: none;
  box-shadow: none;
}

button.ck-sf-dd-btn:is(:hover, :focus, :active) {
  background-color: var(--ck-sf-surface);
  color: var(--ck-sf-black);
}

.ck-sf-dd-btn > .ck-sf-chevron {
  position: absolute;
  top: 50%;
  right: 14px;
  margin: 0;
  transform: translateY(-75%) rotate(45deg);
  pointer-events: none;
}

.ck-sf-dd-btn[aria-expanded="true"] > .ck-sf-chevron {
  transform: translateY(-25%) rotate(-135deg);
}

.ck-sf-dd-value {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
}

.ck-sf-dd-value.is-placeholder {
  color: var(--ck-sf-muted);
  font-weight: 500;
}

.ck-sf-dd-list {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: min(60vh, 440px);
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--ck-sf-field-border, #e4e4e7);
  border-radius: var(--ck-sf-radius);
  background: #fff;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.12);
  list-style: none;
  outline: none;
}

/* The open list keeps its light frame; the keyboard position is the framed active option. */
.ck-sf-overview .ck-sf-dd-list:is(:focus, :focus-visible) {
  outline: none;
}

.ck-sf-dd-opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--ck-sf-target);
  margin: 0;
  padding: 6px 40px 6px 10px;
  border-radius: max(6px, calc(8 * var(--ck-sf-u)));
  color: var(--ck-sf-black);
  font: 500 var(--ck-sf-fs-m) / 1.25 var(--ck-sf-font);
  cursor: pointer;
}

.ck-sf-dd-opt::before {
  content: none;
}

.ck-sf-dd-opt.is-active {
  background: var(--ck-sf-surface);
}

.ck-sf-dd-list:focus-visible .ck-sf-dd-opt.is-active {
  box-shadow: inset 0 0 0 1px var(--ck-sf-black);
}

.ck-sf-dd-opt[aria-selected="true"] {
  font-weight: 700;
}

/* Chosen option: CSS check mark. */
.ck-sf-dd-opt[aria-selected="true"]::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 6px;
  height: 12px;
  border: solid var(--ck-sf-black);
  border-width: 0 2px 2px 0;
  transform: translateY(-60%) rotate(45deg);
}

.ck-sf-dd-icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: #1d1d1f;
}

.ck-sf-dd-icon svg {
  display: block;
  width: auto;
  max-width: 100%;
  height: 100%;
  overflow: visible;
}

.ck-sf-dd-icon :is(.ck-sf-arrow, .ck-sf-code, .ck-sf-stitch, [data-measure]) {
  display: none;
}

.ck-sf-dd-icon svg * {
  vector-effect: non-scaling-stroke;
}

@media (max-width: 380px) {
  .ck-sf-dd-icon {
    width: 30px;
    height: 30px;
  }
}

@media (forced-colors: active) {
  .ck-sf-dd-opt.is-active {
    outline: 2px solid Highlight;
  }
}

/* Waiting for the calculation after «Größe berechnen» (slow networks): the site-wide subtle sheen (owner, 07.10).
   A light band runs over the brand body (::before, clipped to the brand cut) and, a little later, over the C mark
   (::after, masked to the mark); the caption stays as it is. No spinning ring. */
.ck-sf-cta.is-busy {
  cursor: progress;
}

.ck-sf-cta.is-busy::before,
.ck-sf-cta.is-busy::after {
  background-image: linear-gradient(110deg, transparent 40%, rgb(255 255 255 / 0.3) 50%, transparent 60%);
  background-size: 300% 100%;
  background-repeat: no-repeat;
  background-position: 90% 0;
}

.ck-sf-cta.is-busy::before {
  animation: ck-sf-sheen-body 2.2s ease-in-out infinite;
}

.ck-sf-cta.is-busy::after {
  animation: ck-sf-sheen-mark 2.2s ease-in-out infinite;
}

@keyframes ck-sf-sheen-body {
  0% {
    background-position: 90% 0;
  }

  70%,
  100% {
    background-position: 10% 0;
  }
}

@keyframes ck-sf-sheen-mark {
  0%,
  42% {
    background-position: 90% 0;
  }

  76%,
  100% {
    background-position: 10% 0;
  }
}

/* Reduced motion: no movement, the button is evenly a little lighter while it waits. */
@media (prefers-reduced-motion: reduce) {
  .ck-sf-cta.is-busy::before,
  .ck-sf-cta.is-busy::after {
    animation: none;
    background-image: linear-gradient(rgb(255 255 255 / 0.32), rgb(255 255 255 / 0.32));
    background-size: auto;
  }
}

.ck-sf-calc[aria-busy="true"] .ck-sf-cta {
  cursor: progress;
}

@media (max-width: 600px) {
  .ck-sf-guide-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .ck-sf-overview a.ck-sf-guide-card {
    min-height: 0;
    padding: 14px 8px 12px;
  }

  .ck-sf-guide-icon {
    height: 56px;
  }
}

@media (forced-colors: active) {
  .ck-sf-overview a.ck-sf-guide-card {
    border: 1px solid CanvasText;
  }

  .ck-sf-overview a.ck-sf-guide-card[aria-pressed="true"] {
    outline: 3px solid Highlight;
    outline-offset: -3px;
  }
}

/* Theme link colours on hover / focus (element-qualified, as for the buttons below). */
a:is(.ck-sf-guide-card, .ck-sf-guide-change):is(:hover, :focus, :active) {
  color: var(--ck-sf-black);
}

a.ck-sf-guide-card:is(:hover, :focus, :active) {
  text-decoration: none;
}

/* ---------------------------------------------------------------------------------------------------------------
 * Mobile (site switches its design unit at 1024 px)
 * ------------------------------------------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .ck-sf-dialog {
    width: min(calc(100vw - 20px), 560px);
  }

  .ck-sf-head {
    min-height: 60px;
    padding-left: 20px;
    padding-right: 12px;
  }

  .ck-sf-scroll {
    padding-left: 20px;
    padding-right: 20px;
  }

  .ck-sf-panel {
    max-width: none;
  }
}

@media (max-width: 600px) {
  /* Phones: a little more width for the card content; «Zwischengröße» breaks only between word and sizes. */
  .ck-sf-card,
  .ck-sf-question {
    padding-left: 16px;
    padding-right: 16px;
  }

  .ck-sf-card--between .ck-sf-res-size {
    font-size: 28px;
    line-height: 1.05;
  }
}

@media (max-width: 380px) {
  .ck-sf-dialog {
    width: 100vw;
  }

  .ck-sf-scroll {
    padding-left: 16px;
    padding-right: 16px;
  }

  .ck-sf-tab {
    padding: 0 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ck-sf-dialog,
  .ck-sf-dialog *,
  .ck-sf-overview *,
  .ck-sf-strip * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  .ck-sf-btn::before,
  .ck-sf-chip input:checked + span,
  .ck-sf-tab[aria-selected="true"],
  .ck-sf-seg-btn[aria-pressed="true"] {
    border: 2px solid CanvasText;
  }
}

/* Themes recolour every hovered / focused button (Hello Elementor: #c36 background, white text, also on :focus after
   a click). Element-qualified selectors outweigh such theme rules in any stylesheet order; our own state colours stay. */
button:is(.ck-sf-info, .ck-sf-btn, .ck-sf-more-toggle, .ck-sf-link, .ck-sf-inline-btn, .ck-sf-back-inline, .ck-sf-tab, .ck-sf-seg-btn):is(:hover, :focus, :active) {
  background-color: transparent;
}

button:is(.ck-sf-pill, .ck-sf-row-btn):is(:hover, :focus, :active) {
  background-color: #fff;
}

button:is(.ck-sf-close, .ck-sf-back):is(:focus, :active) {
  background-color: #dcdce2;
}

button:is(.ck-sf-more-toggle, .ck-sf-tab, .ck-sf-seg-btn, .ck-sf-pill, .ck-sf-row-btn, .ck-sf-close, .ck-sf-back):is(:hover, :focus, :active) {
  color: var(--ck-sf-black);
}

button:is(.ck-sf-link, .ck-sf-inline-btn, .ck-sf-back-inline):is(:hover, :focus, :active) {
  color: var(--ck-sf-black);
  text-decoration: underline;
}

button:is(.ck-sf-pill--ghost, .ck-sf-skip):is(:hover, :focus, :active) {
  color: var(--ck-sf-muted);
}

button.ck-sf-btn:is(:hover, :focus, :active) {
  color: var(--ck-sf-btn-text);
}

button.ck-sf-info:is(:focus, :active) {
  color: var(--ck-sf-muted);
}

button.ck-sf-info:is(:hover, :focus-visible) {
  color: var(--ck-sf-black);
}

button:is(.ck-sf-close, .ck-sf-back):hover {
  background-color: #c9c9d1;
}

button:is(.ck-sf-tab, .ck-sf-seg-btn):hover {
  background-color: var(--ck-sf-surface);
}

button:is(.ck-sf-tab[aria-selected="true"], .ck-sf-seg-btn[aria-pressed="true"]):is(:hover, :focus, :active) {
  background-color: var(--ck-sf-black);
  color: #fff;
}

button.ck-sf-pill.is-current:is(:hover, :focus, :active) {
  background-color: var(--ck-sf-ink);
  color: #fff;
}

/* Theme button defaults (radius, nowrap) on buttons that do not set them. */
:is(.ck-sf-info, .ck-sf-more-toggle) {
  border-radius: 0;
}

:is(.ck-sf-tab, .ck-sf-info, .ck-sf-more-toggle, .ck-sf-row-btn, .ck-sf-close, .ck-sf-back) {
  white-space: normal;
}

/* Theme «transition: all» on buttons without their own transition. */
:is(.ck-sf-btn, .ck-sf-info, .ck-sf-more-toggle, .ck-sf-link, .ck-sf-inline-btn, .ck-sf-back-inline) {
  transition: none;
}

/* Form fields in focus, as on the site: one black 1 px frame on the field itself, no gap, no ring (the generic
   :focus-visible ring and theme rings are switched off); an invalid field keeps its red frame. */
:is(.ck-sf-root, .ck-sf-overview, .ck-sf-strip) :is(input, select, textarea):is(:focus, :focus-visible) {
  outline: none;
  outline-offset: 0;
  box-shadow: none;
}

:is(.ck-sf-root, .ck-sf-overview) .ck-sf-select select:is(:focus, :focus-visible) {
  border-color: var(--ck-sf-black);
}