.ds24-section--custom-code .ak-03 {
  --lightningcss-light: ;
  --lightningcss-dark: initial;
  color-scheme: dark;
  --ds24-color-black: #000;
  --ds24-color-white: #fff;
  --ds24-color-white-70: #ffffffb3;
  --ds24-color-white-50: #ffffff80;
  --ds24-color-white-20: #fff3;
  --ds24-color-black-50: #00000080;
  --ds24-color-gray: #828990;
  --ds24-color-product-bluetiful: #2463eb;
  --ds24-container-lg: 1360px;
  --ds24-space-xl: 120px;
  --ds24-space-lg: 80px;
  --ds24-space-md: 40px;
  --ds24-space-sm: 30px;
  --ds24-space-xs: 20px;
  --ds24-radius-sm: 4px;
  --ds24-radius-md: 8px;
  --ds24-radius-lg: 12px;
  --ds24-radius-full: 999px;
}

.ds24-section--custom-code .ak-03 * {
  box-sizing: border-box;
}

.ds24-section--custom-code .ak-03 {
  background: var(--ds24-color-black);
  color: var(--ds24-color-white);
  font: 500 18px/1.4 var(--ds24-font-family);
  padding-inline: 20px;
  padding-block: var(--ds24-space-xl);
  margin: 0;
  overflow-x: hidden;
}

.ds24-section--custom-code .ak-03 .ds24-container {
  max-width: var(--ds24-container-lg);
  margin: 0 auto;
}

.ds24-section--custom-code .ak-03 .sec-top {
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--ds24-space-md);
  margin-bottom: var(--ds24-space-md);
  display: flex;
}

.ds24-section--custom-code .ak-03 .head {
  gap: var(--ds24-space-xs);
  max-width: 860px;
  display: grid;
}

.ds24-section--custom-code .ak-03 .reihe {
  position: relative;
}

.ds24-section--custom-code .ak-03 .navs {
  left: 12px;
  right: 12px;
  top: var(--mid, 60%);
  z-index: 8;
  pointer-events: none;
  justify-content: space-between;
  display: flex;
  position: absolute;
  transform: translateY(-50%);
}

.ds24-section--custom-code .ak-03 .nav {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  border: 1px solid var(--ds24-color-white-50);
  width: 52px;
  height: 52px;
  color: var(--ds24-color-white);
  border-radius: 50%;
  place-items: center;
  transition: background .2s, border-color .2s, opacity .2s;
  display: grid;
}

.ds24-section--custom-code .ak-03 .nav svg {
  width: 20px;
  height: 20px;
}

.ds24-section--custom-code .ak-03 .nav:hover {
  background: var(--ds24-color-white);
  color: var(--ds24-color-black);
  border-color: var(--ds24-color-white);
}

.ds24-section--custom-code .ak-03 .nav:focus-visible {
  outline: 2px solid var(--ds24-color-product-bluetiful);
  outline-offset: 3px;
}

.ds24-section--custom-code .ak-03 .nav:disabled {
  opacity: .3;
  cursor: default;
  color: var(--ds24-color-white);
  border-color: var(--ds24-color-white-50);
}

.ds24-section--custom-code .ak-03 .nav, .ds24-section--custom-code .ak-03 .nav:disabled {
  pointer-events: auto;
  backdrop-filter: blur(6px);
  background: #0000008c;
}

.ds24-section--custom-code .ak-03 .nav:hover:not(:disabled) {
  background: var(--ds24-color-white);
}

.ds24-section--custom-code .ak-03 h2 {
  font: 500 60px/1 var(--ds24-font-family);
  letter-spacing: -1px;
  margin: 0;
}

.ds24-section--custom-code .ak-03 h2 em {
  font-style: italic;
}

.ds24-section--custom-code .ak-03 .intro {
  color: var(--ds24-color-white-70);
  max-width: 60ch;
  margin: 0;
}

.ds24-section--custom-code .ak-03 .gallery {
  gap: var(--ds24-space-sm);
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  display: flex;
  overflow-x: auto;
}

.ds24-section--custom-code .ak-03 .gallery::-webkit-scrollbar {
  display: none;
}

.ds24-section--custom-code .ak-03 .item {
  flex: 0 0 calc((100% - 3 * var(--ds24-space-sm)) / 3.2);
  scroll-snap-align: start;
  align-content: start;
  row-gap: var(--ds24-space-xs);
  grid-template-rows: auto auto;
  display: grid;
}

.ds24-section--custom-code .ak-03 .cap {
  align-content: start;
  gap: 10px;
  min-height: 128px;
  display: grid;
}

.ds24-section--custom-code .ak-03 .cat {
  font: 500 13px/1.3 var(--ds24-font-family);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ds24-color-white-50);
}

.ds24-section--custom-code .ak-03 .pname {
  font: 500 34px/1.05 var(--ds24-font-family);
  letter-spacing: -.8px;
  margin: 0;
}

.ds24-section--custom-code .ak-03 .claim {
  color: var(--ds24-color-white-70);
  margin: 0;
  font-size: 17px;
  line-height: 1.4;
}

.ds24-section--custom-code .ak-03 .panel {
  border-radius: var(--ds24-radius-lg);
  padding: 56px 0 124px;
  position: relative;
  overflow: hidden;
}

.ds24-section--custom-code .ak-03 .g1 {
  background: radial-gradient(90% 70% at 20% 10%, #9b8ab3 0%, #0000 60%), radial-gradient(80% 70% at 90% 95%, #5e5566 0%, #0000 70%), linear-gradient(165deg, #7c6e8e, #2e2836);
}

.ds24-section--custom-code .ak-03 .g2 {
  background: radial-gradient(90% 70% at 80% 10%, #8fa3b8 0%, #0000 60%), radial-gradient(80% 70% at 10% 95%, #586b7f 0%, #0000 70%), linear-gradient(195deg, #6e859e, #2c3642);
}

.ds24-section--custom-code .ak-03 .g3 {
  background: radial-gradient(90% 70% at 20% 10%, #a8978c 0%, #0000 60%), radial-gradient(80% 70% at 90% 95%, #5b534e 0%, #0000 70%), linear-gradient(165deg, #726862, #2e2926);
}

.ds24-section--custom-code .ak-03 .g4 {
  background: radial-gradient(90% 70% at 80% 10%, #c49bb6 0%, #0000 60%), radial-gradient(80% 70% at 15% 95%, #956486 0%, #0000 70%), linear-gradient(195deg, #8a6280, #3a2735);
}

.ds24-section--custom-code .ak-03 .g5 {
  background: radial-gradient(90% 70% at 20% 10%, #a3a38e 0%, #0000 60%), radial-gradient(80% 70% at 90% 95%, #666659 0%, #0000 70%), linear-gradient(165deg, #818170, #30302a);
}

.ds24-section--custom-code .ak-03 .g6 {
  background: radial-gradient(90% 70% at 80% 10%, #9aa3ab 0%, #0000 60%), radial-gradient(80% 70% at 10% 95%, #4f555a 0%, #0000 70%), linear-gradient(195deg, #636a71, #25292c);
}

.ds24-section--custom-code .ak-03 .idea {
  z-index: 6;
  font: 500 11px/1 var(--ds24-font-family);
  letter-spacing: .18em;
  text-transform: uppercase;
  border-radius: var(--ds24-radius-full);
  color: var(--ds24-color-white-70);
  background: #00000047;
  padding: 6px 9px;
  position: absolute;
  top: 16px;
  left: 16px;
}

.ds24-section--custom-code .ak-03 .pager {
  z-index: 7;
  align-items: center;
  gap: 4px;
  display: flex;
  position: absolute;
  top: 10px;
  right: 10px;
}

.ds24-section--custom-code .ak-03 .dots {
  gap: 6px;
  padding: 0 2px;
  display: flex;
}

.ds24-section--custom-code .ak-03 .pg {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  width: 26px;
  height: 26px;
  font: 400 20px/1 var(--ds24-font-family);
  color: var(--ds24-color-white-70);
  border-radius: 50%;
  place-items: center;
  transition: color .2s, background .2s;
  display: grid;
}

.ds24-section--custom-code .ak-03 .pg:hover {
  color: var(--ds24-color-white);
  background: #ffffff1f;
}

.ds24-section--custom-code .ak-03 .pg:focus-visible {
  outline: 2px solid var(--ds24-color-white);
  outline-offset: 1px;
}

.ds24-section--custom-code .ak-03 .dots b {
  background: var(--ds24-color-white-50);
  border-radius: 50%;
  width: 7px;
  height: 7px;
  transition: all .25s;
}

.ds24-section--custom-code .ak-03 .dots b.on {
  background: var(--ds24-color-white);
  border-radius: 4px;
  width: 22px;
}

.ds24-section--custom-code .ak-03 .phone {
  cursor: pointer;
  width: min(216px, 58%);
  margin: 0 auto;
  position: relative;
}

.ds24-section--custom-code .ak-03 .scr {
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s;
  position: absolute;
  inset: 0;
}

.ds24-section--custom-code .ak-03 .scr.on {
  opacity: 1;
}

.ds24-section--custom-code .ak-03 .call {
  z-index: 6;
  border-radius: var(--ds24-radius-md);
  background: var(--ds24-color-white);
  color: var(--ds24-color-black);
  opacity: 0;
  pointer-events: none;
  gap: 3px;
  padding: 14px 16px;
  transition: opacity .35s .1s, transform .35s .1s;
  display: grid;
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  transform: translateY(8px);
  box-shadow: 0 18px 36px -16px #0009;
}

.ds24-section--custom-code .ak-03 .call.on {
  opacity: 1;
  transform: none;
}

.ds24-section--custom-code .ak-03 .call b {
  font: 500 17px/1.2 var(--ds24-font-family);
  letter-spacing: -.2px;
}

.ds24-section--custom-code .ak-03 .call span {
  color: #4f555a;
  font-size: 14.5px;
  line-height: 1.35;
}

.ds24-section--custom-code .ak-03 .call:before {
  content: "";
  left: var(--tip, 22px);
  background: var(--ds24-color-white);
  width: 10px;
  height: 10px;
  position: absolute;
  top: -5px;
  transform: rotate(45deg);
}

.ds24-section--custom-code .ak-03 .wire {
  z-index: 5;
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: visible;
}

.ds24-section--custom-code .ak-03 .wire path {
  fill: none;
  stroke: #fff;
  stroke-width: 1.5px;
  stroke-dasharray: 4 4;
}

.ds24-section--custom-code .ak-03 .wire circle {
  fill: #2463eb;
  stroke: #fff;
  stroke-width: 2px;
}

@media (width <= 1100px) {
  .ds24-section--custom-code .ak-03 {
    padding-block: var(--ds24-space-lg);
  }

  .ds24-section--custom-code .ak-03 h2 {
    font-size: 44px;
  }

  .ds24-section--custom-code .ak-03 .gallery {
    scroll-snap-type: x mandatory;
    gap: var(--ds24-space-xs);
    scrollbar-width: none;
    margin-inline: -20px;
    padding: 0 20px 8px;
    scroll-padding-left: 20px;
    display: flex;
    overflow-x: auto;
  }

  .ds24-section--custom-code .ak-03 .gallery::-webkit-scrollbar {
    display: none;
  }

  .ds24-section--custom-code .ak-03 .sec-top {
    display: block;
  }

  .ds24-section--custom-code .ak-03 .navs {
    display: none;
  }

  .ds24-section--custom-code .ak-03 .item {
    scroll-snap-align: start;
    flex: 0 0 min(360px, 88vw);
    grid-template-rows: auto auto;
    align-content: start;
    display: grid;
  }

  .ds24-section--custom-code .ak-03 .cap {
    min-height: 150px;
  }

  .ds24-section--custom-code .ak-03 .panel {
    padding: 52px 0 150px;
  }
}

.ds24-section--custom-code .ak-03 h2 em {
  color: #0000;
  background-image: linear-gradient(90deg, #d3a2c6 0%, #6f9bf5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  margin-right: -.08em;
  padding-right: .08em;
}

.ds24-section--custom-code .ak-03 .intro {
  color: #ffffffe0;
  font-size: 21px;
  line-height: 1.45;
}

@media (width <= 700px) {
  .ds24-section--custom-code .ak-03 .intro {
    font-size: 18px;
  }
}

.ds24-section--custom-code .ak-03 .fit {
  aspect-ratio: 330 / 700;
  width: 100%;
  position: relative;
}

.ds24-section--custom-code .ak-03 .fit img {
  border-radius: 14.5% / 6.9%;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  inset: 0;
}

@media (width <= 1100px) {
  .ds24-section--custom-code .ak-03 .gallery {
    padding-inline: max(20px, 50vw - min(180px, 44vw));
    scroll-padding-inline: 0;
  }

  .ds24-section--custom-code .ak-03 .item {
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
}

.ds24-section--custom-code .ak-03 .ring {
  pointer-events: none;
  border-radius: 14px;
  transition: all .3s .15s;
  position: absolute;
  box-shadow: 0 0 0 3px #2463eb, 0 0 0 9px #2463eb38;
}
