@layer base, components;

/* src/main/frontdev/css/base/surface.css */
@layer base {
  [data-tone=light] {
    --surface-tone: light;
    --surface-text-color: var(--color-white);
    --surface-heading-color: var(--color-white);
    --surface-icon-color: var(--color-white);
    --surface-collapsible-hover-bg: rgba(255, 255, 255, 0.08);
    --surface-link-color: var(--color-white);
    --surface-link-hover-color: var(--color-white);
    --surface-border: var(--rahn-blue-30);
    --surface-btn-primary-bg: var(--rahn-blue-10);
    --surface-btn-primary-bg-hover: var(--rahn-blue-30);
    --surface-btn-primary-text: var(--rahn-blue);
    --surface-btn-primary-text-hover: var(--rahn-blue);
    --surface-btn-primary-border: transparent;
    --surface-btn-primary-border-hover: transparent;
    --surface-btn-outlined-bg: transparent;
    --surface-btn-outlined-bg-hover: var(--rahn-blue-60);
    --surface-btn-outlined-text: var(--color-white);
    --surface-btn-outlined-text-hover: var(--color-white);
    --surface-btn-outlined-border: var(--rahn-blue-30);
    --surface-btn-outlined-border-hover: var(--rahn-blue-30);
    --surface-btn-highlight-bg: var(--rahn-cyan);
    --surface-btn-highlight-bg-hover: var(--rahn-cyan-60);
    --surface-btn-highlight-text: var(--color-black);
    --surface-btn-highlight-text-hover: var(--color-black);
    --surface-btn-highlight-border: transparent;
    --surface-btn-highlight-border-hover: transparent;
    --surface-btn-highlight-text-shadow: none;
    --surface-btn-text-bg: transparent;
    --surface-btn-text-bg-hover: transparent;
    --surface-btn-text-text: var(--color-white);
    --surface-btn-text-text-hover: var(--color-white);
    --surface-btn-text-border: transparent;
    --surface-btn-text-border-hover: var(--rahn-blue-60);
    --surface-btn-link-bg: transparent;
    --surface-btn-link-bg-hover: transparent;
    --surface-btn-link-text: var(--color-white);
    --surface-btn-link-text-hover: var(--color-white);
    --surface-btn-link-border: transparent;
    --surface-btn-link-border-hover: transparent;
    --surface-btn-disabled-bg: var(--rahn-blue-60);
    --surface-btn-disabled-bg-hover: var(--rahn-blue-60);
    --surface-btn-disabled-text: var(--rahn-blue-10);
    --surface-btn-disabled-text-hover: var(--rahn-blue-30);
    --surface-btn-disabled-border: transparent;
    --surface-btn-disabled-border-hover: transparent;
    --surface-form-control-focus-border: var(--rahn-blue-60);
    --surface-form-control-focus-ring: 0 0 0 3px rgb(255 255 255 / 18%);
    color: var(--surface-text-color);
  }
  :root,
  [data-tone=default] {
    --surface-tone: default;
    --surface-text-color: var(--color-black);
    --surface-heading-color: var(--rahn-blue);
    --surface-icon-color: var(--rahn-blue);
    --surface-collapsible-hover-bg: var(--rahn-light-blue-70);
    --surface-collapsible-bg: var(--rahn-grey-30);
    --surface-link-color: var(--rahn-blue);
    --surface-link-hover-color: var(--rahn-orange);
    --surface-border: var(--rahn-blue-60);
    --surface-btn-primary-bg: var(--rahn-blue);
    --surface-btn-primary-bg-hover: var(--rahn-blue-60);
    --surface-btn-primary-text: var(--color-white);
    --surface-btn-primary-text-hover: var(--color-white);
    --surface-btn-primary-border: var(--rahn-blue);
    --surface-btn-primary-border-hover: var(--rahn-blue-60);
    --surface-btn-outlined-bg: transparent;
    --surface-btn-outlined-bg-hover: var(--rahn-light-blue-70);
    --surface-btn-outlined-text: var(--rahn-blue);
    --surface-btn-outlined-text-hover: var(--rahn-blue);
    --surface-btn-outlined-border: var(--rahn-blue-30);
    --surface-btn-outlined-border-hover: var(--rahn-blue-60);
    --surface-btn-highlight-bg: var(--rahn-orange);
    --surface-btn-highlight-bg-hover: var(--rahn-orange-60);
    --surface-btn-highlight-text: var(--color-white);
    --surface-btn-highlight-text-hover: var(--color-white);
    --surface-btn-highlight-border: var(--rahn-orange-60);
    --surface-btn-highlight-border-hover: var(--rahn-orange-60);
    --surface-btn-highlight-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.24);
    --surface-btn-text-bg: transparent;
    --surface-btn-text-bg-hover: transparent;
    --surface-btn-text-text: var(--rahn-blue);
    --surface-btn-text-text-hover: var(--rahn-blue);
    --surface-btn-text-border: transparent;
    --surface-btn-text-border-hover: var(--rahn-blue-30);
    --surface-btn-link-bg: transparent;
    --surface-btn-link-bg-hover: transparent;
    --surface-btn-link-text: var(--rahn-blue);
    --surface-btn-link-text-hover: var(--rahn-orange);
    --surface-btn-link-border: transparent;
    --surface-btn-link-border-hover: transparent;
    --surface-btn-disabled-bg: var(--rahn-grey-70);
    --surface-btn-disabled-bg-hover: var(--rahn-grey);
    --surface-btn-disabled-text: var(--rahn-blue-60);
    --surface-btn-disabled-text-hover: var(--rahn-blue-60);
    --surface-btn-disabled-border: transparent;
    --surface-btn-disabled-border-hover: transparent;
    --surface-form-placeholder: var(--rahn-blue-60);
    --surface-form-control-focus-border: var(--rahn-blue-60);
    --surface-form-control-focus-ring: none;
    --surface-form-control-disabled-bg: var(--rahn-grey-30);
    --surface-form-control-bg: var(--color-white);
  }
  [data-tone] h1,
  [data-tone] .typo-h1,
  [data-tone] h2,
  [data-tone] .typo-h2,
  [data-tone] h3,
  [data-tone] .typo-h3,
  [data-tone] h4,
  [data-tone] .typo-h4,
  [data-tone] h5,
  [data-tone] .typo-h5,
  [data-tone] h6,
  [data-tone] .typo-h6,
  [data-tone] b,
  [data-tone] strong {
    color: var(--surface-heading-color);
  }
  [data-tone] a,
  [data-tone] a:focus-visible {
    color: var(--surface-link-color);
  }
  [data-tone] a:hover {
    color: var(--surface-link-hover-color);
  }
}

/* src/main/frontdev/css/rca/base.css */
@layer base {
  .brand-scope-rca {
    --border-radius-sm: 14px;
    --border-radius-md: 18px;
    --border-radius-backgrounds: 0;
    --font-heading: var(--font-gt-america-extended);
    --page-edge: 0px;
    .content-wrapper > .content-wrapper-inner {
      --border-radius-backgrounds: var(--border-radius-md);
      &:not(:has(.cmp-person-list[data-output-option])) {
        align-items: stretch;
      }
    }
    .content-wrapper > .content-wrapper-inner .content-wrapper {
      --border-radius-backgrounds: var(--border-radius-sm);
    }
    &,
    [data-tone=default] {
      --surface-link-color: var(--rca-hydration);
      --surface-link-hover-color: var(--rahn-blue);
      --surface-btn-primary-text: var(--rca-hydration);
      --surface-btn-primary-text-hover: var(--rahn-blue);
      --surface-btn-primary-border: var(--rca-hydration);
      --surface-btn-primary-border-hover: var(--rahn-blue);
      --surface-btn-outlined-text: var(--rahn-blue);
      --surface-btn-outlined-text-hover: var(--rca-hydration);
      --surface-btn-outlined-border: var(--rahn-blue);
      --surface-btn-outlined-border-hover: var(--rca-hydration);
      --surface-btn-highlight-text: var(--color-white);
      --surface-btn-highlight-text-hover: var(--color-white);
      --surface-btn-highlight-border: transparent;
      --surface-btn-highlight-border-hover: transparent;
      --surface-btn-highlight-bg: var(--rahn-orange);
      --surface-btn-highlight-bg-hover: var(--rahn-orange-60);
      --surface-btn-highlight-text-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
      --surface-btn-text-text: var(--rahn-blue);
      --surface-btn-text-text-hover: var(--rca-hydration);
      --surface-btn-text-border: transparent;
      --surface-btn-text-border-hover: var(--rca-hydration);
    }
    [data-tone=light] {
      --surface-link-color: var(--color-white);
      --surface-link-hover-color: var(--color-white);
      --surface-btn-primary-text: var(--rca-hydration-10);
      --surface-btn-primary-text-hover: var(--rca-hydration-30);
      --surface-btn-primary-border: var(--rca-hydration-10);
      --surface-btn-primary-border-hover: var(--rca-hydration-30);
      --surface-btn-primary-bg: transparent;
      --surface-btn-primary-bg-hover: transparent;
      --surface-btn-outlined-text: var(--rca-hydration-10);
      --surface-btn-outlined-text-hover: var(--rca-hydration-30);
      --surface-btn-outlined-border: var(--rca-hydration-10);
      --surface-btn-outlined-border-hover: var(--rca-hydration-30);
      --surface-btn-outlined-bg: transparent;
      --surface-btn-outlined-bg-hover: transparent;
      --surface-btn-highlight-text: var(--rca-hydration-10);
      --surface-btn-highlight-text-hover: var(--rca-hydration-30);
      --surface-btn-highlight-border: var(--rca-hydration-10);
      --surface-btn-highlight-border-hover: var(--rca-hydration-30);
      --surface-btn-highlight-bg: transparent;
      --surface-btn-highlight-bg-hover: transparent;
      --surface-btn-highlight-text-shadow: none;
      --surface-btn-text-text: var(--color-white);
      --surface-btn-text-text-hover: var(--color-white);
      --surface-btn-text-border: transparent;
      --surface-btn-text-border-hover: var(--rahn-blue-30);
    }
    h5,
    .typo-h5,
    h6,
    .typo-h6 {
      font-weight: var(--typo-weight-semibold);
    }
  }
}

/* src/main/frontdev/css/rca/components/page-header.css */
@layer components {
  .brand-scope-rca .page-header__row--breadcrumbs {
    max-width: calc(var(--content-max-width) - 2 * var(--page-edge) - 2 * var(--border-edge));
  }
}

/* src/main/frontdev/css/rca/components/buttons.css */
@layer components {
  .brand-scope-rca {
    .btn {
      --btn-height: 2.5rem;
      --btn-radius: var(--border-radius-sm);
      --btn-bg: transparent;
      --btn-bg-hover: transparent;
      --btn-text: var(--rca-hydration);
      --btn-text-hover: var(--rahn-blue);
      --btn-border: var(--rca-hydration);
      --btn-border-hover: var(--rahn-blue);
    }
    .btn:disabled,
    .btn[aria-disabled=true] {
      --btn-text: var(--rahn-grey);
      --btn-text-hover: var(--rahn-grey);
      --btn-border: var(--rahn-grey);
      --btn-border-hover: var(--rahn-grey);
      cursor: not-allowed;
    }
    .btn--text:disabled,
    .btn--text[aria-disabled=true] {
      --btn-bg: transparent;
      --btn-bg-hover: transparent;
    }
    .btn--primary {
      --btn-text: var(--surface-btn-primary-text);
      --btn-text-hover: var(--surface-btn-primary-text-hover);
      --btn-border: var(--surface-btn-primary-border);
      --btn-border-hover: var(--surface-btn-primary-border-hover);
    }
    .btn--outlined {
      --btn-text: var(--surface-btn-outlined-text);
      --btn-text-hover: var(--surface-btn-outlined-text-hover);
      --btn-border: var(--surface-btn-outlined-border);
      --btn-border-hover: var(--surface-btn-outlined-border-hover);
    }
    .btn--highlight {
      --btn-text: var(--surface-btn-highlight-text);
      --btn-text-hover: var(--surface-btn-highlight-text-hover);
      --btn-border: var(--surface-btn-highlight-border);
      --btn-border-hover: var(--surface-btn-highlight-border-hover);
      --btn-bg: var(--surface-btn-highlight-bg);
      --btn-bg-hover: var(--surface-btn-highlight-bg-hover);
    }
    .btn--text {
      --btn-text: var(--surface-btn-text-text);
      --btn-text-hover: var(--surface-btn-text-text-hover);
      --btn-border: var(--surface-btn-text-border);
      --btn-border-hover: var(--surface-btn-text-border-hover);
    }
    .btn--negative {
      &.btn--primary,
      &.btn--outlined,
      &.btn--highlight {
        --btn-text: var(--rca-hydration-10);
        --btn-text-hover: var(--rca-hydration-30);
        --btn-border: var(--rca-hydration-10);
        --btn-border-hover: var(--rca-hydration-30);
        --btn-bg: transparent;
        --btn-bg-hover: transparent;
      }
      &.btn--text {
        --btn-text: var(--color-white);
        --btn-text-hover: var(--color-white);
        --btn-border: transparent;
        --btn-border-hover: var(--rahn-blue-30);
      }
    }
    .btn--small {
      --btn-radius: var(--border-radius-sm);
      --btn-padding: 0.75rem;
      --btn-height: 2.5rem;
    }
    .btn--icon {
      --btn-padding: 0;
    }
  }
  .brand-scope-rca .documents-hub__select {
    position: relative;
    display: inline-block;
    .documents-hub__summary-icon {
      transition: transform 180ms ease;
    }
    .documents-hub__summary-icon svg {
      display: block;
      width: 100%;
      height: 100%;
    }
    &[open] .documents-hub__summary-icon {
      transform: rotate(180deg);
    }
    .documents-hub__menu {
      position: absolute;
      top: 100%;
      left: 0;
      z-index: 100;
      min-width: 100%;
      margin: 0.35rem 0 0;
      padding: 0;
      list-style: none;
      background: var(--color-white);
      border-radius: var(--border-radius-sm);
      box-shadow: var(--elevation-2);
      overflow: hidden;
      font-size: var(--typo-size-sm);
    }
    .documents-hub__menu-item + .documents-hub__menu-item {
      border-top: 1px solid var(--rahn-grey-70);
    }
    .documents-hub__menu-link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--spacing-xs);
      padding: 0.65rem 0.85rem;
      color: var(--surface-btn-primary-text, var(--color-white));
      text-decoration: none;
    }
    .documents-hub__menu-link:hover,
    .documents-hub__menu-link:focus-visible {
      background: var(--surface-btn-primary-bg-hover);
      color: var(--surface-btn-primary-text-hover, var(--color-white));
    }
    .documents-hub__menu-link-label {
      flex: 1;
      text-align: left;
    }
    .documents-hub__menu-link-icon {
      display: inline-flex;
      flex-shrink: 0;
      width: 1.1rem;
      height: 1.1rem;
    }
    .documents-hub__menu-link-icon svg {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
}

/* src/main/frontdev/css/rca/components/hero.css */
@layer components {
  .brand-scope-rca .cmp-hero {
    --hero-content-desktop-width: 56%;
    > .content-wrapper-inner {
      border: 1px solid white;
    }
    .hero__image-slot {
      width: 44%;
      max-width: none;
    }
    .hero__visual {
      width: 100%;
      height: 100%;
    }
  }
  @media (max-width: 1024px) {
    .brand-scope-rca .cmp-hero {
      &:has(.hero__image) > .content-wrapper-inner,
      &[data-background]:not([data-background=transparent]) > .content-wrapper-inner {
        margin: clamp(var(--spacing-md), 8vw, var(--spacing-xl)) auto;
      }
      .hero__image-slot {
        width: 100%;
      }
    }
  }
}

/* src/main/frontdev/css/rca/components/text-image.css */
@layer components {
  .brand-scope-rca .cmp-text-image {
    --text-image-border-color: transparent;
    --text-image-border-color-base: transparent;
    > .content-wrapper-inner {
      align-items: stretch;
    }
    .text-image__image,
    .text-image__media[data-border=true] .text-image__video {
      border-radius: var(--border-radius-sm);
      width: 100%;
    }
    .text-image__media[data-border=true] {
      --text-image-border-color-base: var(--rahn-blue);
    }
    .text-image__media-inner {
      position: relative;
    }
    .text-image__media-inner::before {
      content: "";
      position: absolute;
      inset: 0;
      padding: 1px;
      border-radius: var(--border-radius-sm);
      background:
        linear-gradient(
          90deg,
          var(--text-image-border-color-base),
          var(--text-image-border-color));
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
      z-index: 1;
    }
    .text-image__media[data-shift=true] .text-image__media-inner-content {
      border-radius: 0;
    }
    .text-image__body[data-media-position=right] .text-image__media[data-shift=true],
    .text-image__body[data-media-position=top] .text-image__media[data-shift=true] {
      margin-bottom: var(--spacing-sm);
      margin-left: var(--spacing-sm);
      .text-image__media-inner::before {
        transform: translate(calc(-1 * var(--spacing-sm)), var(--spacing-sm));
      }
    }
    .text-image__body[data-media-position=bottom] .text-image__media[data-shift=true] {
      margin-top: var(--spacing-sm);
      margin-left: var(--spacing-sm);
      .text-image__media-inner::before {
        transform: translate(calc(-1 * var(--spacing-sm)), calc(-1 * var(--spacing-sm)));
      }
    }
    .text-image__body[data-media-position=left] .text-image__media[data-shift=true] {
      margin-right: var(--spacing-sm);
      margin-bottom: var(--spacing-sm);
      .text-image__media-inner::before {
        transform: translate(var(--spacing-sm), var(--spacing-sm));
      }
    }
  }
}

/* src/main/frontdev/css/rca/components/card.css */
@layer components {
  .cmp-card {
    --card-image-ratio: 2 / 1;
    --card-elevation: 1;
    --card-title-weight: var(--typo-weight-light);
    overflow: visible;
    .cmp-card__tag {
      position: absolute;
      top: 8px;
      left: -8px;
      background-color: var(--color-white);
      color: var(--rahn-blue);
      z-index: 450;
      padding: 0 0.3em 0.25rem;
      border-radius: 6px;
      box-shadow: var(--elevation-2);
      font-size: 1.75rem;
      font-family: var(--font-gt-america-extended);
      line-height: 1;
      transform: rotate(-4deg);
    }
    .cmp-card__tag-label {
      background-image:
        linear-gradient(
          90deg,
          var(--rahn-blue) 0%,
          var(--rca-skin) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
    }
  }
  .brand-scope-rca .cmp-card[data-variant=bigTeaser] {
    --card-title-size: var(--typo-size-2xl);
    --card-image-ratio: 4 / 5;
    --card-big-teaser-min-height-ratio: 125%;
    --card-content-gradient:
      linear-gradient(
        
        180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.38) 58%,
        rgba(0, 0, 0, 0.58) 100% );
    border-radius: 0;
    .cmp-card__inner:has(.cmp-card__image) .cmp-card__content {
      justify-content: end;
    }
    .cmp-card__actions {
      margin-top: 0;
    }
    .cmp-card__content {
      padding: clamp(var(--spacing-md), 6vw, var(--spacing-lg)) clamp(var(--spacing-md), 6vw, var(--spacing-lg)) clamp(var(--spacing-lg), 9vw, var(--spacing-xl));
    }
    .cmp-card__overlay {
      border-radius: 0;
      font-size: var(--typo-size-sm);
    }
  }
}

/* src/main/frontdev/css/rca/components/rca-product-detail.css */
@layer components {
  .brand-scope-rca .cmp-rca-product-detail {
    display: flex;
    flex-direction: column;
    row-gap: var(--spacing-2xl);
    margin-bottom: var(--spacing-xl);
    > .content-wrapper-inner {
      gap: var(--spacing-2xl);
    }
    .cmp-rca-product-detail__video-container {
      aspect-ratio: 16 / 9;
      position: relative;
    }
    .cmp-rca-product-detail__video {
      width: 100%;
      height: 100%;
      display: block;
    }
    @media (max-width: 1024px) {
      row-gap: var(--spacing-lg);
      .content-wrapper-inner {
        gap: var(--spacing-lg);
      }
    }
  }
  .brand-scope-rca .cmp-rca-product-detail .cmp-rca-product-detail__section--1 .content-wrapper-inner {
    display: grid;
    width: 100%;
    align-items: start;
    column-gap: var(--spacing-md);
    row-gap: 0;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "title title" "content media";
    .cmp-rca-product-detail__subtitle {
      grid-area: title;
    }
    .cmp-rca-product-detail__desc {
      grid-area: content;
      box-shadow: var(--elevation-1);
      padding: var(--content-edge);
      margin-left: calc(var(--content-edge) * -1);
      margin-right: calc((var(--spacing-md) + var(--content-edge)) * -1);
    }
    .cmp-rca-product-detail__desc-inner {
      border: 1px solid var(--surface-border);
      border-radius: var(--border-radius-md);
      padding: var(--content-edge);
      padding-bottom: clamp(var(--spacing-sm), 1.5vw, var(--spacing-md));
      padding-right: calc(var(--content-edge) + 1rem);
      display: flex;
      flex-direction: column;
    }
    .cmp-rca-product-detail__desc-content {
      --desc-collapsed-height: 18rem;
      position: relative;
      height: var(--desc-expanded-height, auto);
      overflow: hidden;
      transition: height var(--expand-collapse-animation-duration) ease;
    }
    .cmp-rca-product-detail__desc-inner.is-collapsed .cmp-rca-product-detail__desc-content {
      height: var(--desc-collapsed-height);
    }
    .cmp-rca-product-detail__desc-inner:not(.is-truncated) .cmp-rca-product-detail__desc-content {
      height: auto;
      overflow: visible;
      transition: none;
    }
    .cmp-rca-product-detail__desc-inner.is-collapsed.is-truncated .cmp-rca-product-detail__desc-content::after {
      content: "";
      position: absolute;
      inset: auto 0 -1rem 0;
      height: 5rem;
      background:
        linear-gradient(
          to bottom,
          rgb(255 255 255 / 0%),
          var(--color-white));
    }
    .cmp-rca-product-detail__desc-toggle {
      margin-top: var(--spacing-sm);
      align-self: flex-start;
    }
    .cmp-rca-product-detail__desc-toggle-icon {
      display: inline-flex;
      transition: transform 160ms ease;
    }
    .cmp-rca-product-detail__desc-inner:not(.is-collapsed) .cmp-rca-product-detail__desc-toggle-icon {
      transform: rotate(180deg);
    }
    .cmp-rca-product-detail__media {
      grid-area: media;
      margin-top: 10rem;
      margin-left: calc(var(--spacing-md) * -0.5);
    }
    @media (max-width: 1024px) {
      grid-template-columns: 1fr;
      grid-template-areas: "title" "content" "media";
      .cmp-rca-product-detail__desc {
        margin-inline: 0;
      }
      .cmp-rca-product-detail__desc-inner {
        padding-bottom: clamp(var(--spacing-sm), 1.5vw, var(--spacing-md));
        padding-right: var(--content-edge);
      }
      .cmp-rca-product-detail__media {
        margin-inline: 0;
        margin-top: -3rem;
      }
    }
  }
  .brand-scope-rca .cmp-rca-product-detail .cmp-rca-product-detail__section--2 {
    .cmp-grid__content {
      column-gap: 0;
    }
    .cmp-grid__col1 {
      margin-right: var(--spacing-md);
    }
    .cmp-grid__col1 .content-wrapper-inner {
      gap: var(--spacing-xl);
    }
    .cmp-rca-product-detail__features {
      padding: var(--content-edge);
    }
    .cmp-rca-product-detail__features-inner {
      border-radius: var(--border-radius-md);
      border: 1px solid var(--color-white);
      padding: calc(var(--content-edge) + var(--spacing-sm));
      display: flex;
      flex-direction: column;
      gap: var(--spacing-md);
    }
    .cmp-rca-product-detail__specs {
      display: flex;
      flex-wrap: wrap;
      gap: var(--spacing-md);
    }
    .cmp-rca-product-detail__specs-item--inci {
      min-width: 65%;
    }
    @media (max-width: 1024px) {
      .cmp-grid__col1 {
        margin-right: 0;
      }
      .cmp-grid__col2 {
        order: -1;
      }
      .cmp-rca-product-detail__features-inner {
        padding-inline: var(--content-edge);
      }
      .cmp-grid__col1 .content-wrapper-inner {
        gap: var(--spacing-lg);
      }
    }
  }
  .brand-scope-rca .cmp-split-cta {
    .cmp-split-cta__inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      border-radius: var(--border-radius-md);
      border: 1px solid var(--surface-border);
      overflow: hidden;
      padding: 0;
      gap: 0;
    }
    .cmp-split-cta__content {
      padding: var(--spacing-md) var(--content-edge);
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .cmp-split-cta__media {
      aspect-ratio: 1 / 1;
    }
    .cmp-split-cta__text {
      margin-bottom: var(--spacing-sm);
    }
    .cmp-split-cta--reverse .cmp-split-cta__inner {
      direction: rtl;
    }
    .cmp-split-cta--reverse .cmp-split-cta__content,
    .cmp-split-cta--reverse .cmp-split-cta__media {
      direction: ltr;
    }
    .cmp-split-cta__media img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    @media (max-width: 768px) {
      .cmp-split-cta__inner {
        grid-template-columns: 1fr;
      }
      &.cmp-split-cta--reverse .cmp-split-cta__inner {
        .cmp-split-cta__media {
          grid-row: 1;
        }
        .cmp-split-cta__content {
          grid-row: 2;
        }
      }
    }
  }
  .cmp-rca-product-detail .cmp-rca-product-detail__section--4 .content-wrapper-inner {
    grid-template-columns: 1fr;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
  }
}

/* src/main/frontdev/css/rca/components/person-list.css */
@layer components {
  .cmp-person-list-wrapper:has(.cmp-person-list[data-output-option=personalContact]) {
    border-radius: var(--border-radius-md);
  }
  .cmp-person-list {
    .cmp-person-list__item,
    .cmp-person-list__list {
      justify-content: start;
    }
  }
}

/* src/main/frontdev/css/rca/components/teaser-list-custom.css */
@layer components {
  .cmp-card[data-variant=bigTeaser] {
    .cmp-card__image,
    .cmp-card__content::before {
      border-radius: 0;
    }
  }
}

/* src/main/frontdev/css/rca/components/event-list.css */
@layer components {
  .cmp-event-list .cmp-card-list {
    --timeline-dot-size: 15px;
    --timeline-line-width: 3px;
    --timeline-offset-left: calc(var(--timeline-dot-size) / 2);
    --timeline-dot-center-offset-top: calc(var(--spacing-sm) + var(--typo-size-xl) / 2);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    position: relative;
    padding-left: calc(var(--timeline-offset-left) + var(--spacing-sm));
    &::before {
      content: "";
      position: absolute;
      top: var(--timeline-dot-center-offset-top);
      bottom: 1.25rem;
      left: calc(var(--timeline-line-width) / -2 + var(--timeline-dot-size) / 2);
      width: var(--timeline-line-width);
      background: var(--surface-heading-color);
      transform: translateY(1rem) scaleY(0);
      transform-origin: top center;
      opacity: 0;
      animation: cmp-event-list-timeline-in 500ms ease forwards;
    }
    &:not(:has(.cmp-list__button-container))::before {
      display: none;
    }
    .cmp-card-list__grid {
      display: contents;
    }
    .cmp-list__button-container,
    .cmp-card-list__item {
      position: relative;
    }
    &:not(:has(.cmp-list__button-container)) .cmp-card-list__item::after {
      content: "";
      position: absolute;
      top: var(--timeline-dot-center-offset-top);
      bottom: calc(-1 * (var(--spacing-md) + var(--timeline-dot-center-offset-top)));
      left: calc(-1 * var(--spacing-sm) - var(--timeline-line-width) / 2);
      width: var(--timeline-line-width);
      background: var(--surface-heading-color);
    }
    &:not(:has(.cmp-list__button-container)) .cmp-card-list__item:last-child::after {
      display: none;
    }
    .cmp-list__button-container::before,
    .cmp-card-list__item::before {
      content: "";
      position: absolute;
      left: calc(-1 * var(--spacing-sm));
      width: var(--timeline-dot-size);
      height: var(--timeline-dot-size);
      border-radius: 50%;
      background: var(--surface-heading-color);
      z-index: 1;
    }
    .cmp-list__button-container::before {
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .cmp-card-list__item::before {
      top: calc(var(--timeline-dot-center-offset-top) - var(--timeline-dot-size) / 2);
      transform: translateX(-50%);
      transition: all 160ms ease;
    }
    .cmp-card-list__item:hover::before {
      width: 1.1rem;
      height: 1.1rem;
    }
    .cmp-card__date {
      font-weight: var(--typo-weight-semibold);
      color: var(--surface-heading-color);
    }
    .cmp-card__content .cmp-card__title {
      font-size: var(--typo-size-lg);
    }
  }
  @keyframes cmp-event-list-timeline-in {
    to {
      transform: translateY(0) scaleY(1);
      opacity: 1;
    }
  }
}

/* src/main/frontdev/css/rca/components/list.css */
@layer components {
  .brand-scope-rca {
    .cmp-list__text > .cmp-list__title {
      font-size: var(--typo-size-sm);
      font-weight: var(--typo-weight-semibold);
    }
  }
}

/* src/main/frontdev/css/rca.css */