@layer base, components;

/* src/main/frontdev/css/base/presets.css */
@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    background-repeat: no-repeat;
  }
  * {
    padding: 0;
    margin: 0;
    border: 0;
  }
  html {
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    -webkit-font-smoothing: antialiased;
    block-size: 100%;
    word-break: break-word;
    scrollbar-gutter: stable;
  }
  pre {
    white-space: pre-wrap;
  }
  body {
    min-block-size: 100%;
  }
  img,
  iframe,
  audio,
  video,
  canvas {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
    border-style: none;
  }
  svg {
    max-inline-size: 100%;
  }
  svg:not([fill]) {
    fill: currentColor;
  }
  input,
  button,
  textarea,
  select {
    font: inherit;
  }
  input {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    margin: 0;
    padding: 0;
    outline: none;
    box-sizing: border-box;
  }
  textarea {
    resize: vertical;
  }
  fieldset,
  iframe {
    border: none;
  }
  ol,
  ul,
  li,
  p {
    text-wrap: pretty;
    font-variant-numeric: proportional-nums;
    hyphens: none;
  }
  ol,
  ul,
  p {
    &:not(:last-child) {
      margin-bottom: 1em;
    }
  }
  h1,
  .typo-h1,
  h2,
  .typo-h2,
  h3,
  .typo-h3 {
    overflow-wrap: break-word;
    line-height: 1.2;
    font-variant-numeric: lining-nums;
  }
  h4,
  .typo-h4,
  h5,
  .typo-h5,
  h6,
  .typo-h6 {
    overflow-wrap: break-word;
    line-height: 1.3;
    font-variant-numeric: lining-nums;
  }
  math,
  time,
  table {
    font-variant-numeric: tabular-nums lining-nums slashed-zero;
  }
  code {
    font-variant-numeric: slashed-zero;
  }
  table {
    border-collapse: collapse;
  }
  abbr {
    font-variant-caps: all-small-caps;
    text-decoration: none;
    &[title] {
      cursor: help;
      text-decoration: underline dotted;
    }
  }
  sup,
  sub {
    line-height: 0;
  }
  :disabled {
    cursor: not-allowed;
  }
  :focus-visible {
    outline-offset: 0.2rem;
  }
  a {
    text-underline-offset: 2px;
    &:not(:is(:hover, :focus)) {
      text-decoration-color: color-mix(in srgb, currentColor, transparent 50%);
    }
  }
  ul,
  ol,
  dl {
    list-style-position: outside;
    padding-left: 1.25rem;
    list-style-type: disc;
    margin: 0;
  }
  [aria-disabled=true i],
  [disabled] {
    cursor: not-allowed;
  }
  [hidden] {
    display: none !important;
  }
  h1 sup,
  .typo-h1 sup {
    font-size: 0.5em;
    position: relative;
    top: -0.35em;
  }
}

/* src/main/frontdev/css/base/tokens.css */
@layer base {
  :root {
    --border-radius-sm: 6px;
    --border-radius-md: 8px;
    --border-radius-backgrounds: 8px;
    --elevation-1: 6px -9px 84px rgba(198, 198, 198, 0.26);
    --elevation-2: 0 6px 18px rgba(0, 0, 0, 0.18);
    --expand-collapse-animation-duration: 350ms;
    --spacing-3xs: 0.25rem;
    --spacing-2xs: 0.5rem;
    --spacing-xs: 1rem;
    --spacing-sm: 1.5rem;
    --spacing-md: 3rem;
    --spacing-lg: 4.5rem;
    --spacing-xl: 7.5rem;
    --spacing-2xl: 10.5rem;
    --page-edge: clamp(var(--spacing-xs), 2vw, var(--spacing-sm));
    --border-edge: clamp(var(--spacing-xs), 2vw, var(--spacing-sm));
    --content-edge: clamp(var(--spacing-sm), 3vw, var(--spacing-md));
    --content-max-width: 1440px;
  }
}

/* src/main/frontdev/css/base/colors.css */
@layer base {
  :root {
    --color-white: #fff;
    --color-black: #000;
    --rahn-blue: #1b508e;
    --rahn-blue-60: #6889bb;
    --rahn-blue-30: #b5c1de;
    --rahn-blue-10: #e6e9f5;
    --rahn-grey: #e1e1e0;
    --rahn-grey-70: #eaeae9;
    --rahn-grey-30: #f6f7f6;
    --rahn-orange: #fb6118;
    --rahn-orange-60: #fda074;
    --rahn-orange-30: #fed0ba;
    --rahn-orange-10: #ffefe8;
    --rahn-cyan: #5bc2e7;
    --rahn-cyan-60: #9ddaf1;
    --rahn-cyan-30: #ceedf8;
    --rahn-cyan-10: #eff9fd;
    --rahn-light-blue: #d9effb;
    --rahn-light-blue-70: #e7f4fc;
    --rahn-bordeaux: rgb(123 0 44);
    --rahn-bordeaux-60: rgb(176 102 128);
    --rahn-bordeaux-30: rgb(215 178 191);
    --rahn-bordeaux-10: rgb(242 229 233);
    --rahn-bronze: rgb(165 97 24);
    --rahn-bronze-60: rgb(201 160 116);
    --rahn-bronze-30: rgb(228 207 185);
    --rahn-bronze-10: rgb(246 239 231);
    --rahn-darkyellow: rgb(252 209 42);
    --rahn-darkyellow-60: rgb(253 227 127);
    --rahn-darkyellow-30: rgb(254 241 191);
    --rahn-darkyellow-10: rgb(255 250 233);
    --rahn-purple: rgb(63 45 168);
    --rahn-purple-60: rgb(169 129 203);
    --rahn-purple-30: rgb(212 192 229);
    --rahn-purple-10: rgb(240 234 246);
    --rahn-green: rgb(98 165 48);
    --rahn-green-60: rgb(161 201 131);
    --rahn-green-30: rgb(208 230 193);
    --rahn-green-10: rgb(239 246 234);
    --rca-skin: #e50064;
    --rca-skin-60: rgb(240 102 162);
    --rca-skin-30: rgb(247 178 208);
    --rca-skin-10: rgb(252 229 239);
    --rca-hair: #007d58;
    --rca-hair-60: rgb(102 177 155);
    --rca-hair-30: rgb(178 216 205);
    --rca-hair-10: rgb(229 242 238);
    --rca-hydration: #009cdc;
    --rca-hydration-60: rgb(101 197 241);
    --rca-hydration-30: rgb(180 224 243);
    --rca-hydration-10: rgb(229 244 251);
    --rca-lipids: #b2a359;
    --rca-lipids-60: rgb(209 200 156);
    --rca-lipids-30: rgb(231 227 205);
    --rca-lipids-10: rgb(247 246 238);
  }
}

/* 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/base/global.css */
@layer base {
  body {
    line-height: 1.4;
    min-block-size: 100dvh;
    display: flex;
    flex-direction: column;
  }
  hr {
    position: relative;
    margin: -1px auto 0;
    border: 0;
    border-top: 1px solid var(--rahn-blue);
  }
  :where(main, .edit-comp-inner) > hr {
    width: calc(100% - 2 * (var(--content-edge) + var(--page-edge)));
    margin-inline: auto;
    max-width: calc(var(--content-max-width) - 2 * var(--page-edge) - 2 * var(--border-edge));
  }
  .spaceBefore,
  .spaceAfter {
    display: block;
  }
  .space-1 {
    height: var(--spacing-xs);
  }
  .space-2 {
    height: var(--spacing-md);
  }
  .space-3 {
    height: var(--spacing-lg);
  }
  .space-4 {
    height: var(--spacing-xl);
  }
  .space-5 {
    height: var(--spacing-2xl);
  }
  .content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: visible;
    margin-inline: var(--page-edge);
    border-radius: var(--border-radius-backgrounds);
  }
  .content-wrapper > .content-wrapper-inner {
    border-radius: var(--border-radius-backgrounds);
    position: relative;
    width: 100%;
    max-width: var(--content-max-width);
    padding: var(--spacing-lg) var(--content-edge) calc(var(--spacing-lg) + var(--spacing-2xs));
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    row-gap: var(--spacing-md);
    column-gap: clamp(var(--spacing-md), 5vw, var(--spacing-xl));
    flex: 1;
  }
  .content-wrapper[data-background=transparent] > .content-wrapper-inner {
    padding-top: 0;
    padding-bottom: 0;
  }
  .content-wrapper .content-wrapper {
    margin-inline: 0;
  }
  .content-wrapper .content-wrapper > .content-wrapper-inner {
    max-width: none;
    padding: var(--spacing-md) var(--content-edge) calc(var(--spacing-md) + var(--spacing-2xs));
  }
  .content-wrapper .content-wrapper:not([data-background]) > .content-wrapper-inner,
  .content-wrapper .content-wrapper[data-background=transparent] > .content-wrapper-inner {
    padding-top: 0;
    padding-bottom: 0;
  }
  .cmp-grid .content-wrapper:not([data-background]) > .content-wrapper-inner,
  .cmp-grid .content-wrapper[data-background=transparent] > .content-wrapper-inner {
    padding-right: 0;
    padding-left: 0;
  }
  @media (max-width: 1024px) {
    .content-wrapper .content-wrapper:not([data-background]) > .content-wrapper-inner,
    .content-wrapper .content-wrapper[data-background=transparent] > .content-wrapper-inner {
      padding: 0;
    }
  }
  hr + .content-wrapper[data-background]:not([data-background=transparent]) {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  .content-wrapper[data-background]:not([data-background=transparent]):has(+ .content-wrapper[data-background]:not([data-background=transparent]), + hr) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .content-wrapper[data-background]:not([data-background=transparent]) + .content-wrapper[data-background]:not([data-background=transparent]) {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  .content-wrapper.component-background-connected-after {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .content-wrapper.component-background-connected-after > .content-wrapper-inner {
    padding-bottom: 0;
  }
  .content-wrapper.component-background-connected-before {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  .content-wrapper.component-background-connected-before > .content-wrapper-inner {
    padding-top: 0;
  }
  .component-background-connector {
    margin-inline: var(--page-edge);
  }
  .content-wrapper .component-background-connector {
    margin-inline: 0;
  }
  @media (max-width: 768px) {
    :where(main, .edit-comp-inner) > hr {
      width: calc(100% - 2 * var(--content-edge));
    }
    :where(main, .edit-comp-inner) > .content-wrapper,
    :where(main, .edit-comp-inner) > .component-background-connector {
      margin-inline: 0;
    }
    :where(main, .edit-comp-inner) > .content-wrapper {
      border-radius: 0;
    }
  }
  .content-wrapper-inner__head {
    display: flex;
    flex-direction: column;
    align-items: start;
  }
  .rte {
    a:not(.btn) {
      color: var(--surface-link-color);
      transition: color 160ms ease;
    }
    a:not(.btn):hover {
      color: var(--surface-link-hover-color);
    }
    p {
      line-height: 1.5;
    }
    ul {
      padding-left: 0;
      list-style: none;
    }
    ul > li {
      position: relative;
      padding-left: 0.9em;
    }
    ul > li::before {
      content: "\2022";
      position: absolute;
      left: 0;
      color: var(--surface-icon-color);
    }
    ol {
      padding-left: 0;
      list-style: none;
      counter-reset: rte-ordered-list;
    }
    ol > li {
      position: relative;
      padding-left: 1.25em;
      counter-increment: rte-ordered-list;
    }
    ol > li::before {
      content: counter(rte-ordered-list) ".";
      position: absolute;
      left: 0;
      width: 1.6ch;
      text-align: right;
      font-variant-numeric: tabular-nums lining-nums;
    }
    li {
      margin-bottom: 0;
    }
    li + li {
      margin-top: 0.4rem;
    }
    figure.table {
      overflow-x: auto;
      margin-block: 1em;
    }
    table {
      display: table;
      width: 100%;
      margin-block: 1em;
      border-collapse: collapse;
      border: 1px solid var(--surface-btn-outlined-border);
      font-size: var(--typo-size-xs);
    }
    figure.table > table {
      margin-block: 0;
    }
    th,
    td {
      padding: 0.75rem 0.9rem;
      border: 1px solid var(--color-black);
      text-align: left;
      vertical-align: top;
      line-height: 1.35;
    }
    th {
      background-color: var(--rahn-blue);
      color: var(--color-white);
      font-weight: var(--typo-weight-semibold);
    }
    tbody tr:nth-child(even) {
      background-color: var(--rahn-grey-30);
    }
  }
  [data-background]:not([data-background=transparent]).rte tbody tr:nth-child(even),
  [data-background]:not([data-background=transparent]) .rte tbody tr:nth-child(even) {
    background-color: transparent;
  }
  [data-background=rcaBlue],
  [data-background=rcaBlueGreen],
  [data-background=rcaBluePink] {
    --bg-base: var(--rahn-blue);
    --accent-left: #22aee8;
    --accent-center: #57badf;
    --accent-right: #9fd1e7;
    --accent-right2: #eff9fd;
    --rca-background-artwork-ratio: 7 / 5;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--bg-base);
  }
  [data-background=rcaBlue] > *,
  [data-background=rcaBlueGreen] > *,
  [data-background=rcaBluePink] > * {
    position: relative;
    z-index: 1;
  }
  [data-background=rcaBlue]::before,
  [data-background=rcaBlueGreen]::before,
  [data-background=rcaBluePink]::before {
    content: "";
    position: absolute;
    bottom: -28%;
    left: 50%;
    width: 156%;
    min-height: 156%;
    max-height: 256%;
    aspect-ratio: var(--rca-background-artwork-ratio);
    translate: -50% 0;
    border-radius: inherit;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(
        ellipse 22% 55% at 58% 0%,
        rgb(255 255 255 / 0.2) 10%,
        rgb(255 255 255 / 0.025) 66%,
        transparent 85%),
      radial-gradient(
        ellipse 35% 45% at 42% 108%,
        color-mix(in srgb, var(--accent-center) 90%, transparent) 10%,
        color-mix(in srgb, var(--accent-center) 64%, transparent) 48%,
        transparent 100%),
      radial-gradient(
        ellipse 36% 33% at 13% 76%,
        var(--accent-left),
        color-mix(in srgb, var(--accent-left) 100%, transparent) 10%,
        color-mix(in srgb, var(--accent-left) 82%, transparent) 44%,
        transparent 100%),
      radial-gradient(
        ellipse 65% 37% at 100% 72%,
        color-mix(in srgb, var(--bg-base) 100%, transparent) 0%,
        color-mix(in srgb, var(--bg-base) 60%, transparent) 25%,
        color-mix(in srgb, var(--accent-center) 30%, transparent) 60%,
        color-mix(in srgb, var(--accent-center) 30%, transparent) 70%,
        color-mix(in srgb, var(--accent-center) 10%, transparent) 90%,
        transparent 100%),
      radial-gradient(
        ellipse 80% 10% at 70% 85%,
        color-mix(in srgb, var(--bg-base) 36%, transparent) 0%,
        transparent 100%),
      radial-gradient(
        ellipse 65% 58% at 90% 105%,
        color-mix(in srgb, var(--accent-center) 95%, transparent) 20%,
        color-mix(in srgb, var(--accent-center) 86%, transparent) 45%,
        color-mix(in srgb, var(--accent-center) 56%, transparent) 70%,
        color-mix(in srgb, var(--accent-center) 14%, transparent) 90%,
        transparent 100%);
    transform-origin: 50% 60%;
    will-change: transform;
    backface-visibility: hidden;
    animation: rca-background-drift 10s ease-in-out infinite alternate;
  }
  @keyframes rca-background-drift {
    0% {
      transform: translate3d(-6%, -3%, 0) scale(1.015, 1);
    }
    50% {
      transform: translate3d(3%, 3%, 0) scale(1.04, 0.985);
    }
    100% {
      transform: translate3d(6%, -3%, 0) scale(0.985, 1.035);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    [data-background=rcaBlue]::before,
    [data-background=rcaBlueGreen]::before,
    [data-background=rcaBluePink]::before {
      animation: none;
    }
  }
  [data-background=rcaBlue] {
    --accent-left: var(--rca-hydration);
    --accent-center: var(--rca-hydration-60);
    --accent-right: var(--rca-hydration-30);
    --accent-right2: #b4e0f3ff;
    --surface-collapsible-hover-bg: color-mix(in srgb, #9fd1e7 22%, transparent);
    --surface-collapsible-bg: color-mix(in srgb, #9fd1e7 22%, transparent);
  }
  [data-background=rcaBlueGreen] {
    --accent-left: #20c348;
    --accent-center: #5fd26f;
    --accent-right: #b7ebc2;
    --accent-right2: #e1f6e6;
    --surface-collapsible-hover-bg: color-mix(in srgb, #b7e1c0 22%, transparent);
    --surface-collapsible-bg: color-mix(in srgb, #b7e1c0 22%, transparent);
  }
  [data-background=rcaBluePink] {
    --accent-left: var(--rca-skin);
    --accent-center: var(--rca-skin-60);
    --accent-right: var(--rca-skin-30);
    --accent-right2: var(--rca-skin-10);
    --surface-collapsible-hover-bg: color-mix(in srgb, #f3aaca 24%, transparent);
    --surface-collapsible-bg: color-mix(in srgb, #f3aaca 24%, transparent);
  }
  [data-background=rahnBlue] {
    background-color: var(--rahn-blue);
    --surface-collapsible-hover-bg: color-mix(in srgb, var(--rahn-blue) 95%, black);
  }
  [data-background=rahnGrey] {
    background-color: var(--rahn-grey);
    --surface-collapsible-hover-bg: color-mix(in srgb, var(--rahn-grey) 95%, black);
  }
  [data-background=rahnGrey70] {
    background-color: var(--rahn-grey-70);
    --surface-collapsible-hover-bg: var(--rahn-grey);
    --surface-collapsible-bg: var(--rahn-grey);
  }
  [data-background=rahnGrey30] {
    background-color: var(--rahn-grey-30);
    --surface-collapsible-hover-bg: var(--rahn-grey-70);
    --surface-collapsible-bg: var(--rahn-grey-70);
  }
  [data-background=rahnLightBlue] {
    background-color: var(--rahn-light-blue);
    --surface-collapsible-hover-bg: var(--rahn-light-blue-70);
    --surface-collapsible-bg: var(--rahn-light-blue-70);
  }
  [data-background=white] {
    background-color: var(--color-white);
  }
  [data-background=transparent] {
    background-color: transparent;
    --surface-collapsible-hover-bg: var(--rahn-light-blue-70);
  }
  .cmp-list,
  .cmp-collapsible-list__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    position: relative;
    &:has(> li:not([hidden]))::after {
      content: "";
      position: absolute;
      right: 0;
      left: 0;
      height: 1px;
      background: var(--rahn-blue-30);
      pointer-events: none;
      z-index: 1;
    }
    &:has(> li:not([hidden]))::after {
      bottom: 0;
    }
  }
  .cmp-list > li,
  .cmp-collapsible-list__item {
    position: relative;
    max-width: 100%;
    &:has(.btn--select.is-open) {
      z-index: 20;
    }
    &::before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      height: 1px;
      background: var(--rahn-blue-30);
      pointer-events: none;
      z-index: 1;
    }
  }
  .cmp-list li > .cmp-list__inner,
  .cmp-collapsible-list__summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-xs);
    padding: 0.75rem var(--border-edge);
    min-height: 4.8rem;
    > * {
      margin: 0;
    }
  }
  .cmp-list li > .cmp-list__inner > .cmp-list__title {
    flex: 1 1 50%;
    min-width: 50%;
    overflow-wrap: anywhere;
  }
  .cmp-list li > .cmp-list__inner > :not(.cmp-list__title) {
    min-width: 0;
    max-width: 50%;
  }
  @media (max-width: 768px) {
    .cmp-list li > .cmp-list__inner {
      flex-direction: column;
      align-items: start;
    }
    .cmp-list li > .cmp-list__inner > .cmp-list__title,
    .cmp-list li > .cmp-list__inner > :not(.cmp-list__title) {
      max-width: 100%;
    }
  }
  .cmp-list__title {
    color: var(--surface-heading-color);
  }
  .cmp-list__title {
    font-weight: var(--typo-weight-semibold);
  }
  .youtubeIframe-container {
    aspect-ratio: 16 / 9;
    position: relative;
  }
  .youtubeIframe {
    width: 100%;
    height: 100%;
    display: block;
  }
  .cmp-button-group {
    display: flex;
    column-gap: var(--spacing-2xs);
    row-gap: var(--spacing-2xs);
    flex-wrap: wrap;
  }
  .cmp-button-group__item {
    width: 100%;
  }
}

/* src/main/frontdev/css/base/fonts.css */
@layer base {
  @font-face {
    font-display: swap;
    font-family: "GT America Extended";
    font-style: normal;
    font-weight: 300;
    src: url("./GT-America-Extended-Light-PWNG6FRO.woff2") format("woff2");
  }
  @font-face {
    font-display: swap;
    font-family: "GT America Extended";
    font-style: normal;
    font-weight: 500;
    src: url("./GT-America-Extended-Medium-2742JI65.woff2") format("woff2");
  }
  @font-face {
    font-display: block;
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 300;
    src: url("./open-sans-v44-latin-300-JPUQO2Y6.woff2") format("woff2");
  }
  @font-face {
    font-display: swap;
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 300;
    src: url("./open-sans-v44-latin-300italic-S4ZHVT4H.woff2") format("woff2");
  }
  @font-face {
    font-display: block;
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    src: url("./open-sans-v44-latin-regular-WXNQF4GQ.woff2") format("woff2");
  }
  @font-face {
    font-display: swap;
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 400;
    src: url("./open-sans-v44-latin-italic-7QNVGMLE.woff2") format("woff2");
  }
  @font-face {
    font-display: block;
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 600;
    src: url("./open-sans-v44-latin-600-JBABOOUI.woff2") format("woff2");
  }
  @font-face {
    font-display: swap;
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 600;
    src: url("./open-sans-v44-latin-600italic-2P2MCMM4.woff2") format("woff2");
  }
  @font-face {
    font-display: swap;
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 800;
    src: url("./open-sans-v44-latin-800-KJG4WWYA.woff2") format("woff2");
  }
  @font-face {
    font-display: swap;
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 800;
    src: url("./open-sans-v44-latin-800italic-DCO3IHQX.woff2") format("woff2");
  }
  @font-face {
    font-display: swap;
    font-family: "Noto Sans SC";
    font-style: normal;
    font-weight: 300;
    src: url("./noto-sans-sc-v40-latin-300-ZYOMMDH4.woff2") format("woff2");
  }
  @font-face {
    font-display: swap;
    font-family: "Noto Sans SC";
    font-style: normal;
    font-weight: 400;
    src: url("./noto-sans-sc-v40-latin-regular-2ADSVPLS.woff2") format("woff2");
  }
  @font-face {
    font-display: swap;
    font-family: "Noto Sans SC";
    font-style: normal;
    font-weight: 600;
    src: url("./noto-sans-sc-v40-latin-600-IGWE67OU.woff2") format("woff2");
  }
  @font-face {
    font-display: swap;
    font-family: "Noto Sans SC";
    font-style: normal;
    font-weight: 900;
    src: url("./noto-sans-sc-v40-latin-900-7F7UDXV5.woff2") format("woff2");
  }
}

/* src/main/frontdev/css/base/typography.css */
@layer base {
  :root {
    --font-fallback:
      system-ui,
      -apple-system,
      "Segoe UI",
      Roboto,
      Arial,
      sans-serif;
    --font-open-sans: "Open Sans", var(--font-fallback);
    --font-noto-sc: "Noto Sans SC", var(--font-fallback);
    --font-gt-america-extended: "GT America Extended", var(--font-fallback);
    --font-body: var(--font-open-sans);
    --font-heading: var(--font-open-sans);
    --typo-weight-light: 300;
    --typo-weight-regular: 400;
    --typo-weight-semibold: 600;
    --typo-weight-extrabold: 800;
    --typo-size-2xs: clamp(0.875rem, 2vw, 1rem);
    --typo-size-xs: 1rem;
    --typo-size-sm: clamp(1rem, 2vw, 1.125rem);
    --typo-size-md: 1.375rem;
    --typo-size-lg: clamp(1.5rem, 3vw, 1.625rem);
    --typo-size-xl: clamp(1.75rem, 4vw, 2.375rem);
    --typo-size-2xl: clamp(2.25rem, 7vw, 4rem);
  }
  html,
  body {
    font-family: var(--font-body), sans-serif;
  }
  h1,
  .typo-h1,
  h2,
  .typo-h2,
  h3,
  .typo-h3,
  h4,
  .typo-h4,
  h5,
  .typo-h5,
  h6,
  .typo-h6 {
    font-family: var(--font-heading), sans-serif;
    color: var(--rahn-blue);
    &:not(:last-child) {
      margin-bottom: var(--spacing-xs);
      &:is(h2, .typo-h2) {
        margin-bottom: var(--spacing-sm);
      }
      &:is(h3, .typo-h3) {
        margin-bottom: var(--spacing-sm);
      }
    }
  }
  :lang(zh),
  :lang(zh-Hans),
  :lang(zh-CN) {
    font-family: var(--font-noto-sc), sans-serif;
    h1,
    .typo-h1,
    h2,
    .typo-h2,
    h3,
    .typo-h3,
    h4,
    .typo-h4,
    h5,
    .typo-h5,
    h6,
    .typo-h6 {
      font-family: var(--font-noto-sc), sans-serif;
    }
  }
  h1,
  .typo-h1 {
    font-size: var(--typo-size-2xl);
    font-weight: var(--typo-weight-light);
  }
  h2,
  .typo-h2 {
    font-size: var(--typo-size-xl);
    font-weight: var(--typo-weight-light);
    width: 100%;
    max-width: 65rem;
  }
  h3,
  .typo-h3 {
    font-size: var(--typo-size-lg);
    font-weight: var(--typo-weight-light);
  }
  h4,
  .typo-h4 {
    font-size: var(--typo-size-md);
    font-weight: var(--typo-weight-light);
  }
  h5,
  .typo-h5,
  h6,
  .typo-h6 {
    font-size: var(--typo-size-sm);
    font-weight: var(--typo-weight-light);
  }
  body {
    font-size: var(--typo-size-sm);
    font-weight: var(--typo-weight-light);
  }
  strong,
  b {
    font-weight: var(--typo-weight-semibold);
    color: var(--rahn-blue);
  }
  footer {
    font-size: var(--typo-size-sm);
  }
  caption,
  figcaption {
    font-size: var(--typo-size-xs);
  }
  p.typo-lead {
    font-size: var(--typo-size-md);
  }
  a {
    color: var(--rahn-blue);
    font-weight: var(--typo-weight-semibold);
    &:hover {
      color: var(--rahn-orange);
    }
  }
  h1,
  .typo-h1,
  h3,
  .typo-h3,
  h4,
  .typo-h4,
  h5,
  .typo-h5,
  h6,
  .typo-h6,
  li,
  p {
    max-width: 65rem;
  }
}

/* src/main/frontdev/css/components/page-footer.css */
@layer components {
  .cmp-footer {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: auto;
    .content-wrapper {
      margin: 0;
      border-radius: 0;
    }
    .content-wrapper-inner {
      gap: var(--spacing-md);
    }
    hr {
      width: 100%;
      border: 0;
      border-top: 1px solid var(--rahn-blue-60);
      margin: 0;
    }
    ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .footer__section {
      display: flex;
      width: 100%;
      gap: var(--spacing-md);
      align-items: end;
    }
    .footer__section > * {
      align-items: end;
      flex: 1;
    }
    .footer__section > :last-child {
      display: flex;
      justify-content: end;
      text-align: right;
    }
    .footer__title {
      min-width: 15rem;
      flex: 1.125;
      text-wrap: balance;
    }
    .footer__title > * {
      line-height: 1.3;
    }
    .footer__title-logo {
      display: inline-block;
      padding-inline: 0.125em;
      width: auto;
      height: 0.9em;
      vertical-align: middle;
      transform: translateY(-0.096em);
    }
    .footer__title-links {
      gap: var(--spacing-xs);
      flex-wrap: wrap;
    }
    .footer__section--1 {
      align-items: center;
    }
    .footer__section--3 {
      align-items: end;
    }
    .footer__legal-links {
      display: flex;
      row-gap: var(--spacing-2xs);
      column-gap: var(--spacing-xs);
      flex-wrap: wrap;
      white-space: nowrap;
    }
    .footer__links-no-image {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-2xs);
    }
    .footer__social-links {
      padding-top: var(--spacing-2xs);
      display: flex;
      gap: var(--spacing-xs);
    }
    .footer__links-image {
      display: flex;
      gap: var(--spacing-sm);
    }
    .footer__links-image-item img {
      max-height: 5rem;
      max-width: 5rem;
    }
    .footer__social-links img {
      max-height: 2rem;
      max-width: 2rem;
    }
    a,
    .footer__copyright,
    .footer__address {
      font-weight: var(--typo-weight-regular);
    }
    .footer__address a {
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
    }
    .footer__logo img {
      height: 2rem;
      margin-bottom: var(--spacing-sm);
    }
    .footer__address a[href^="tel:"]::before,
    .footer__address a[href^="mailto:"]::before {
      content: "";
      display: inline-block;
      flex: 0 0 auto;
      inline-size: 1.25rem;
      block-size: 1.25rem;
      background-color: currentColor;
      mask-repeat: no-repeat;
      mask-position: center;
      mask-size: contain;
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-position: center;
      -webkit-mask-size: contain;
    }
    .footer__address a[href^="tel:"]::before {
      mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384"/></svg>');
      -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384"/></svg>');
    }
    .footer__address a[href^="mailto:"]::before {
      mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"/><rect x="2" y="4" width="20" height="16" rx="2"/></svg>');
      -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"/><rect x="2" y="4" width="20" height="16" rx="2"/></svg>');
    }
    .footer__address br + a {
      margin-top: var(--spacing-2xs);
    }
    @media (max-width: 768px) {
      .footer__section {
        justify-content: space-between;
      }
      .footer__section > * {
        width: auto;
      }
      .footer__section--1 {
        flex-direction: column;
        align-items: center;
      }
      .footer__section--2 {
        flex-direction: column;
        align-items: start;
      }
      .footer__section--2 .footer__links-no-image {
        align-self: end;
      }
      .footer__legal-links {
        align-self: start;
      }
      .footer__section--3 {
        flex-direction: column-reverse;
      }
      .footer__title-links-item .btn,
      .footer__title-links-item {
        width: 100%;
      }
      .footer__title {
        text-align: center;
      }
      .content-wrapper-inner {
        padding-top: var(--spacing-md);
        padding-bottom: calc(var(--spacing-md) + var(--spacing-2xs));
      }
      .footer__section > :last-child {
        justify-content: center;
      }
    }
  }
}

/* src/main/frontdev/css/components/page-header.css */
@layer components {
  .page-header {
    --logo-height: clamp(28px, 9vw, 48px);
    --header-content-height: max(var(--logo-height), 36px);
    --header-extra-height: var(--spacing-xs);
    --nav-elevate-progress: 0;
    margin-bottom: var(--spacing-md);
    padding-top: calc((1.5 * var(--logo-height)) + var(--header-content-height) + var(--header-extra-height));
    transition: padding-top var(--search-bar-transition-duration) ease;
    &:has(.cmp-hero) {
      margin-bottom: var(--spacing-lg);
    }
    .cmp-hero:not(:has(.hero__image))[data-background=transparent] > .content-wrapper-inner {
      padding-top: var(--spacing-md);
    }
    .page-header__row--top,
    .page-header__row--breadcrumbs {
      margin-inline: auto;
      max-width: calc(var(--content-max-width) - 2 * var(--page-edge));
      padding-inline: var(--border-edge);
    }
    .page-header__row--top {
      --animation-duration: 0ms;
      --logo-shrink-progress: 0;
      --logo-optical-alignment-scrolled-progress: 0.25;
      --nav-inset-progress: 0;
      --logo-height-scrolled: clamp(24px, 6vw, 36px);
      --logo-current-height: calc( var(--logo-height) - ((var(--logo-height) - var(--logo-height-scrolled)) * var(--logo-shrink-progress)) );
      position: fixed;
      top: 0;
      left: 50%;
      z-index: 999;
      width: min(calc(var(--content-max-width) - 2 * var(--page-edge)), calc(100% - ((2 * var(--border-edge) - 0.5rem) * var(--nav-inset-progress))));
      background: var(--color-white);
      transform: translateX(-50%);
      margin-top: calc(0.5 * var(--logo-current-height));
      padding-top: calc(0.5 * var(--logo-current-height));
      padding-bottom: calc(0.5 * var(--logo-current-height));
      border-radius: var(--border-radius-md);
      transition:
        margin-top var(--animation-duration) ease,
        padding-top var(--animation-duration) ease,
        padding-bottom var(--animation-duration) ease;
    }
    .page-header__row--top::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      box-shadow: var(--elevation-2);
      opacity: var(--nav-elevate-progress);
      pointer-events: none;
      transition: opacity var(--animation-duration) ease;
    }
    .page-header__row--top-inner {
      display: grid;
      grid-template-columns: max-content 1fr auto;
      grid-template-rows: auto 1fr;
      position: relative;
      z-index: 1;
      height: var(--logo-current-height);
      min-height: 36px;
      transition: height var(--animation-duration) ease;
    }
    .page-header__row--breadcrumbs {
      margin-bottom: var(--spacing-sm);
    }
    .page-header__logo-container {
      grid-column: 1;
      grid-row: 1;
      padding-right: var(--spacing-sm);
      display: flex;
      align-items: center;
    }
    img.page-header__logo {
      height: var(--logo-current-height);
      transition: height var(--animation-duration) ease, transform var(--animation-duration) ease;
      transform: translateY(calc(-1 * (var(--logo-height) / 15) * (1 - ((1 - var(--logo-optical-alignment-scrolled-progress)) * var(--logo-shrink-progress)))));
    }
  }
}

/* src/main/frontdev/css/components/buttons.css */
@layer components {
  .btn {
    --btn-height: 3rem;
    --btn-padding: var(--spacing-xs);
    --btn-gap: var(--spacing-2xs);
    --btn-radius: var(--border-radius-md);
    --btn-border-width: 1px;
    --btn-bg: var(--surface-btn-primary-bg);
    --btn-bg-hover: var(--surface-btn-primary-bg-hover);
    --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-max-width: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    column-gap: var(--btn-gap);
    height: var(--btn-height);
    min-height: var(--btn-height);
    max-width: var(--btn-max-width);
    padding-inline: var(--btn-padding);
    border: var(--btn-border-width) solid var(--btn-border);
    border-radius: var(--btn-radius);
    background-color: var(--btn-bg);
    color: var(--btn-text);
    font-weight: var(--typo-weight-semibold);
    font-size: var(--typo-size-xs);
    text-decoration: none;
    text-align: center;
    text-wrap: nowrap;
    cursor: pointer;
    transition:
      background-color 160ms ease,
      border-color 160ms ease,
      color 160ms ease;
  }
  .btn:hover,
  .btn:focus-visible,
  .cmp-card[data-card-clickable=true]:hover .cmp-card__actions .btn {
    background-color: var(--btn-bg-hover);
    border-color: var(--btn-border-hover);
    color: var(--btn-text-hover);
  }
  .btn:disabled,
  .btn[aria-disabled=true] {
    --btn-bg: var(--surface-btn-disabled-bg);
    --btn-bg-hover: var(--surface-btn-disabled-bg-hover);
    --btn-text: var(--surface-btn-disabled-text);
    --btn-text-hover: var(--surface-btn-disabled-text-hover);
    --btn-border: var(--surface-btn-disabled-border);
    --btn-border-hover: var(--surface-btn-disabled-border-hover);
    cursor: not-allowed;
  }
  .btn--text:disabled,
  .btn--text[aria-disabled=true] {
    --btn-bg: transparent;
    --btn-bg-hover: transparent;
  }
  .documents-hub__button {
    --btn-max-width: 18rem;
  }
  .documents-hub__button .btn__label {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .btn-group {
    display: flex;
    gap: var(--spacing-xs);
    margin-top: auto;
    flex-wrap: wrap;
  }
  .body__cta-anchor {
    --hero-center-y: 50vh;
    --cta-hide-progress: 0;
    --cta-scroll-offset: 35%;
    --cta-translate-duration: 400ms;
    position: fixed;
    right: 0;
    top: var(--hero-center-y);
    transform: translate(50%, -50%) rotate(-90deg);
    transform-origin: center;
    z-index: 20;
    &.is-translated .body__cta-section {
      transform: translateY(50%);
    }
    .body__cta-section {
      display: inline-flex;
      align-items: flex-end;
      transform: translateY(-50%);
      margin: 0;
      transition: transform var(--cta-translate-duration) ease;
    }
    .btn {
      --btn-padding: var(--spacing-xs);
      border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
      transform: translateY(calc(var(--cta-hide-progress) * var(--cta-scroll-offset)));
      transition:
        min-height 100ms ease,
        height 100ms ease,
        padding-bottom 100ms ease;
      &:hover {
        --btn-height: calc(2.25rem + 0.3rem);
        padding-bottom: 0.3rem;
        transform: translateY(0);
      }
    }
    .btn__icon {
      transform: translate(3px, 1px) rotate(90deg);
      .transition-path {
        transition: transform 120ms ease;
      }
    }
  }
  .btn--outlined {
    --btn-bg: var(--surface-btn-outlined-bg);
    --btn-bg-hover: var(--surface-btn-outlined-bg-hover);
    --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-bg: var(--surface-btn-highlight-bg);
    --btn-bg-hover: var(--surface-btn-highlight-bg-hover);
    --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-text-shadow: var(--surface-btn-highlight-text-shadow, none);
    text-shadow: var(--btn-text-shadow);
  }
  .btn--text {
    --btn-bg: var(--surface-btn-text-bg);
    --btn-bg-hover: var(--surface-btn-text-bg-hover);
    --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--link {
    --btn-bg: var(--surface-btn-link-bg);
    --btn-bg-hover: var(--surface-btn-link-bg-hover);
    --btn-text: var(--surface-btn-link-text);
    --btn-text-hover: var(--surface-btn-link-text-hover);
    --btn-border: var(--surface-btn-link-border);
    --btn-border-hover: var(--surface-btn-link-border-hover);
    --btn-padding: 0;
  }
  .btn--negative {
    &.btn--primary {
      --btn-bg: var(--rahn-blue-10);
      --btn-bg-hover: var(--rahn-blue-30);
      --btn-text: var(--color-black);
      --btn-text-hover: var(--color-black);
      --btn-border: transparent;
      --btn-border-hover: transparent;
    }
    &.btn--outlined {
      --btn-bg: transparent;
      --btn-bg-hover: var(--rahn-blue-60);
      --btn-text: var(--color-white);
      --btn-text-hover: var(--color-white);
      --btn-border: var(--rahn-blue-30);
      --btn-border-hover: var(--rahn-blue-30);
    }
    &.btn--highlight {
      --btn-bg: var(--rahn-cyan);
      --btn-bg-hover: var(--rahn-cyan-60);
      --btn-text: var(--color-black);
      --btn-text-hover: var(--color-black);
      --btn-border: transparent;
      --btn-border-hover: transparent;
      --btn-text-shadow: none;
    }
    &.btn--text {
      --btn-bg: transparent;
      --btn-bg-hover: transparent;
      --btn-text: var(--color-white);
      --btn-text-hover: var(--color-white);
      --btn-border: transparent;
      --btn-border-hover: var(--rahn-blue-60);
    }
    &:disabled,
    &[aria-disabled=true] {
      --btn-bg: var(--rahn-blue-60);
      --btn-bg-hover: var(--rahn-blue-60);
      --btn-text: var(--rahn-blue-10);
      --btn-text-hover: var(--rahn-blue-30);
      --btn-border: transparent;
      --btn-border-hover: transparent;
    }
    &.btn--text:disabled,
    &.btn--text[aria-disabled=true] {
      --btn-bg: transparent;
      --btn-bg-hover: transparent;
    }
  }
  .btn--stretched {
    width: 100%;
    justify-content: space-between;
    .btn__label {
      flex: 1;
      min-width: 0;
      text-align: left;
    }
  }
  .btn--small {
    --btn-height: 2.25rem;
    --btn-padding: var(--spacing-2xs);
    --btn-radius: var(--border-radius-sm);
    font-size: var(--typo-size-2xs);
  }
  .btn__icon {
    display: inline-flex;
    flex: 0 0 auto;
    width: 1.1rem;
    height: 1.1rem;
    svg {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
  .btn__icon svg,
  .btn > svg,
  .btn [aria-hidden=true] > svg {
    transition: transform 120ms ease;
    transform-origin: center;
  }
  .lucide-expand-icon > .transition-path {
    transition: transform 120ms ease;
  }
  .cmp-card[data-card-clickable=true]:hover .cmp-card__actions .btn .btn__icon,
  .btn:hover .btn__icon {
    .lucide-external-link-icon > .transition-path {
      transform: translate(6%, -6%);
    }
    .lucide-download-icon > .transition-path {
      transform: translateY(-6%);
    }
    .lucide-arrow-right-icon > .transition-path {
      transform: translateX(6%);
    }
    .lucide-expand-icon > .transition-path--bottom-right {
      transform: translate(6%, 6%);
    }
    .lucide-expand-icon > .transition-path--top-right {
      transform: translate(6%, -6%);
    }
    .lucide-expand-icon > .transition-path--bottom-left {
      transform: translate(-6%, 6%);
    }
    .lucide-expand-icon > .transition-path--top-left {
      transform: translate(-6%, -6%);
    }
    &:not(.main-nav__cart-icon-stack) .lucide-shopping-cart-icon > .transition-path {
      transform: translateY(-3%);
      .transition-path-backwheel {
        transform: translateX(-3%);
      }
      .transition-path-frontwheel {
        transform: translateX(3%);
      }
      .transition-path-cart {
        transform-box: fill-box;
        transform-origin: center;
        rotate: -6deg;
      }
    }
  }
  .btn__icon--cart-feedback {
    position: relative;
    .cart-feedback-icon {
      position: absolute;
      inset: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transform: scale(0.85);
      transition: opacity 160ms ease, transform 160ms ease;
    }
    .cart-feedback-icon--cart {
      opacity: 1;
      transform: scale(1);
    }
  }
  .js-cart-add {
    transform-origin: center;
    transition:
      background-color 160ms ease,
      border-color 160ms ease,
      color 160ms ease,
      margin 160ms ease,
      padding 160ms ease,
      transform 120ms ease;
  }
  .js-cart-add.is-cart-added {
    .cart-feedback-icon--cart {
      opacity: 0;
      transform: scale(0.85);
    }
    .cart-feedback-icon--added {
      opacity: 1;
      transform: scale(1);
    }
  }
  .btn:active:not(:disabled):not([aria-disabled=true]) svg {
    transform: scale(0.9);
  }
  .btn--icon {
    width: var(--btn-height);
    --btn-padding: 0;
  }
  .btn--icon .btn__icon {
    width: 55%;
    height: 55%;
  }
  .btn--icon svg {
    width: 55%;
  }
  .btn--icon .btn__icon svg {
    width: 100%;
    height: 100%;
  }
  .btn:has(.chevronToggleIcon) {
    --btn-gap: var(--spacing-3xs);
  }
  .btn--select {
    position: relative;
    display: inline-block;
    width: max-content;
    max-width: 100%;
    height: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    &:hover,
    &:focus-visible {
      background: transparent;
      border-color: transparent;
      color: inherit;
    }
    &.is-open {
      z-index: 200;
    }
    > .btn--select__summary {
      --btn-gap: var(--spacing-3xs);
      display: flex;
      width: auto;
      max-width: var(--btn-max-width, 100%);
      align-items: center;
      justify-content: space-between;
      gap: var(--btn-gap, var(--spacing-2xs));
      cursor: pointer;
      list-style: none;
      text-decoration: none;
    }
    > .btn--select__summary[aria-disabled=true] {
      cursor: not-allowed;
    }
    > .btn--select__summary .btn__label {
      flex: 1;
      min-width: 0;
      text-align: left;
    }
    > .btn--select__summary .btn__icon {
      flex: 0 0 auto;
    }
    .form-single-select__input,
    .form-multiselect__input {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: 0;
      padding: 0;
      opacity: 0;
      pointer-events: none;
    }
  }
}

/* src/main/frontdev/css/components/access-message.css */
@layer components {
  .access-message {
    --access-message-viewport-max-width: calc(100vw - 1.5rem);
    position: fixed;
    z-index: 1000;
    box-sizing: border-box;
    width: max-content;
    max-width: min(34rem, var(--access-message-viewport-max-width));
    max-height: calc(100vh - 1.5rem);
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius-md);
    background: var(--rahn-orange);
    box-shadow: var(--elevation-2);
    color: var(--color-white);
    font-size: var(--typo-size-xs);
    font-weight: var(--typo-weight-semibold);
    line-height: 1.35;
    text-align: center;
    white-space: pre-line;
    overflow: auto;
    overflow-wrap: anywhere;
    pointer-events: none;
  }
}

/* src/main/frontdev/css/components/feedback.css */
@layer components {
  .feedback {
    border: 1px solid currentColor;
    padding: var(--spacing-xs) var(--border-edge);
    font-size: var(--typo-size-sm);
    text-align: center;
  }
  .feedback.is-success {
    background: var(--rahn-green-10);
    color: var(--rahn-green);
  }
  .feedback.is-error {
    background: var(--rca-skin-10);
    color: var(--rca-skin);
  }
}

/* src/main/frontdev/css/components/forms.css */
@layer components {
  .cmp-form {
    --form-control-height: 3rem;
    --form-control-padding-inline: var(--spacing-xs);
    --form-control-focus-ring: var(--surface-form-control-focus-ring);
    --form-file-button-height: calc(var(--form-control-height) - 0.75rem);
    --form-option-control-size: 1.1rem;
    --form-options-gap: calc((var(--spacing-xs) + var(--spacing-2xs)) / 2);
    --form-control-text: var(--color-black);
    --form-control-icon: var(--rahn-blue);
    --form-control-icon-slot-bg: var(--rahn-light-blue-70);
    --form-label-font-weight: inherit;
    --form-disabled-opacity: 0.45;
    &.form-stack,
    .form-stack {
      display: grid;
      gap: var(--spacing-sm);
      max-width: 48rem;
    }
    &.form-grid,
    .form-grid {
      display: grid;
      column-gap: var(--spacing-xs);
      row-gap: var(--spacing-sm);
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .form-fieldset > .form-grid > .mgnlEditorBar {
      grid-column: 1 / -1;
    }
    .form-honeypots {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      white-space: nowrap;
    }
    .form-fieldset {
      width: 100%;
      min-width: 0;
      margin: 0;
      padding: 0;
      border: 0;
      border-radius: var(--border-radius-md);
      &[data-background]:not([data-background=transparent]) {
        padding: var(--spacing-xs);
      }
    }
    .form-fieldset-group {
      width: 100%;
      min-width: 0;
    }
    &.form-grid--cols-1,
    .form-grid--cols-1 {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    &.form-grid--cols-2,
    .form-grid--cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    &.form-grid--cols-3,
    .form-grid--cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .form-field {
      display: grid;
      gap: var(--spacing-2xs);
      min-width: 0;
      align-content: start;
    }
    .form-field--full {
      grid-column: 1 / -1;
    }
    .form-field__description {
      grid-column: 1 / -1;
      width: 100%;
      margin: 0 0 var(--spacing-2xs) 0;
      color: var(--color-text-secondary, currentColor);
      font-size: var(--typo-size-2xs);
    }
    .form-field > .error {
      grid-column: 1 / -1;
      width: 100%;
    }
    .form-field label,
    .form-options legend {
      color: var(--surface-heading-color);
      font-size: var(--typo-size-sm);
    }
  }
  .cmp-grid .cmp-form.form-stack,
  .cmp-grid .cmp-form .form-stack {
    max-width: none;
  }
  .cmp-form .form-control {
    --input-bg: var(--surface-form-control-bg);
    height: var(--form-control-height);
    width: 100%;
    padding-inline: var(--form-control-padding-inline);
    padding-block: 0;
    border: 1px solid var(--rahn-blue-30);
    border-radius: var(--border-radius-md);
    background: var(--input-bg);
    color: var(--form-control-text);
    font-size: var(--typo-size-sm);
    font-weight: var(--typo-weight-light);
    transition:
      border-color 160ms ease,
      box-shadow 160ms ease,
      background-color 160ms ease,
      color 160ms ease;
    &::placeholder {
      color: var(--surface-form-placeholder);
    }
    &:focus,
    &:focus-visible {
      border-color: var(--surface-form-control-focus-border);
      box-shadow: var(--form-control-focus-ring);
      outline: none;
    }
    &:disabled {
      background: var(--surface-form-control-disabled-bg);
      color: var(--surface-btn-disabled-text);
    }
  }
  .cmp-form .form-field.is-disabled {
    opacity: var(--form-disabled-opacity);
    label,
    .form-control,
    .btn--select__summary {
      cursor: not-allowed;
    }
    .form-control,
    .btn--select__summary {
      background: var(--surface-form-control-disabled-bg);
      color: var(--surface-btn-disabled-text);
      border-color: color-mix(in srgb, var(--surface-btn-disabled-text) 35%, transparent);
    }
    .btn__icon {
      background: var(--surface-form-control-disabled-bg);
    }
  }
  .cmp-form .form-field.is-invalid {
    .form-control {
      border-color: var(--rca-skin);
      box-shadow: 0 0 0 1px var(--rca-skin);
    }
    .form-field__error {
      margin: 0;
      color: var(--rca-skin);
      font-size: var(--typo-size-xs);
    }
  }
  .cmp-form.cmp-form--label-inside .form-field.is-disabled {
    --surface-btn-disabled-text: var(--rahn-blue);
  }
  .cmp-form textarea.form-control {
    height: auto;
    min-height: 8rem;
    resize: vertical;
    padding-bottom: 0.85rem;
    padding-top: 0.85rem;
    line-height: 1.35;
  }
  .cmp-form .form-control[type=search] {
    appearance: textfield;
    &::-webkit-search-cancel-button,
    &::-webkit-search-decoration,
    &::-webkit-search-results-button,
    &::-webkit-search-results-decoration {
      appearance: none;
    }
  }
  .cmp-form .form-search-wrap {
    --form-search-clear-size: 0.9rem;
    --form-search-icon-size: 1.1rem;
    --form-search-icon-slot-size: var(--form-control-height);
    position: relative;
    display: grid;
    align-items: center;
    &:focus-within .form-search-submit {
      border-color: var(--surface-form-control-focus-border);
    }
    .form-search-clear {
      position: absolute;
      right: calc(var(--form-search-icon-slot-size) + var(--spacing-2xs));
      top: 50%;
      z-index: 1;
      display: grid;
      place-items: center;
      width: var(--form-search-clear-size);
      height: var(--form-search-clear-size);
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--rahn-blue-60);
      cursor: pointer;
      transform: translateY(-50%);
      &:disabled {
        cursor: not-allowed;
      }
      &[hidden] {
        display: none;
      }
    }
    .form-search-submit {
      position: absolute;
      right: 0;
      top: 0;
      z-index: 1;
      display: grid;
      place-items: center;
      width: var(--form-search-icon-slot-size);
      height: 100%;
      padding: 0;
      border: 0;
      border-left: 1px solid var(--rahn-blue-30);
      border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
      &.btn--primary {
        --btn-bg: var(--rahn-blue);
        --btn-bg-hover: var(--rahn-blue-60);
        --btn-text: var(--color-white);
        --btn-text-hover: var(--color-white);
        --btn-border: var(--rahn-blue);
        --btn-border-hover: var(--rahn-blue-60);
      }
      &.btn--primary.btn--negative {
        --btn-bg: var(--rahn-blue-10);
        --btn-bg-hover: var(--rahn-blue-30);
        --btn-text: var(--color-black);
        --btn-text-hover: var(--color-black);
        --btn-border: transparent;
        --btn-border-hover: transparent;
      }
    }
    .form-search-clear svg,
    .form-search-submit svg {
      display: block;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }
    .form-search-submit svg {
      width: var(--form-search-icon-size);
      height: var(--form-search-icon-size);
    }
    .form-search-input {
      padding-right: calc(var(--form-search-icon-slot-size) + var(--form-search-clear-size) + var(--spacing-xs));
    }
  }
  .cmp-form {
    .form-control[type=date] {
      color-scheme: light;
    }
    .form-control.form-control--date {
      line-height: calc(var(--form-control-height) - 2px);
      cursor: pointer;
      &.is-placeholder {
        color: var(--surface-form-placeholder);
      }
    }
  }
  .cmp-form .form-control[type=file] {
    height: auto;
    padding-inline: 0;
    padding-block: 0.35rem;
    border: 0;
    color: var(--color-black);
    font-size: var(--typo-size-2xs);
    &:focus,
    &:focus-visible {
      border-color: transparent;
      box-shadow: none;
    }
    &::file-selector-button,
    &::-webkit-file-upload-button {
      margin-right: 0.75rem;
      height: var(--form-file-button-height);
      min-height: var(--form-file-button-height);
      padding: 0.5rem 0.75rem;
      border: 1px solid var(--rahn-blue-30);
      border-radius: var(--border-radius-sm);
      background: transparent;
      color: var(--rahn-blue);
      appearance: none;
      -webkit-appearance: none;
      font: inherit;
      font-size: var(--typo-size-2xs);
      font-weight: var(--typo-weight-semibold);
      line-height: 1;
      vertical-align: middle;
      cursor: pointer;
      transition:
        background-color 160ms ease,
        border-color 160ms ease,
        color 160ms ease;
    }
    &:hover::file-selector-button,
    &:hover::-webkit-file-upload-button,
    &:focus-visible::file-selector-button,
    &:focus-visible::-webkit-file-upload-button {
      background: var(--rahn-light-blue-70);
      border-color: var(--rahn-blue-30);
      color: var(--rahn-blue);
    }
  }
  .cmp-form .form-field--file > label,
  .cmp-form .form-options legend {
    width: max-content;
    max-width: 100%;
    padding: 0.3em 0.4em;
    border: 1px solid var(--rahn-blue-30);
    border-radius: var(--border-radius-md);
    background: var(--color-white);
    color: var(--rahn-blue);
    font-size: var(--typo-size-2xs);
    line-height: 1;
    transition: border-color 160ms ease, background-color 160ms ease;
  }
  .cmp-form .form-field--file:focus-within > label,
  .cmp-form .form-options:focus-within legend {
    border-color: var(--rahn-blue);
  }
  .cmp-form {
    .form-select-wrap {
      position: relative;
      display: grid;
      align-items: center;
      > * {
        grid-area: 1 / 1;
      }
    }
    .form-control--select {
      appearance: none;
      padding-right: var(--spacing-xs);
      grid-area: 1 / 1;
      height: var(--form-control-height);
      line-height: calc(var(--form-control-height) - 2px);
    }
    .btn--select {
      display: block;
      width: 100%;
      max-width: none;
      min-width: 0;
    }
    .btn--select__summary {
      --btn-text: var(--form-control-icon);
      --btn-text-hover: var(--form-control-icon);
      --btn-gap: 0;
      position: relative;
      padding-right: 0;
      color: var(--form-control-text);
      width: 100%;
      max-width: none;
      min-width: 0;
    }
    .btn--select__summary .btn__label {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: block;
      text-align: left;
      font-weight: var(--typo-weight-light);
      pointer-events: none;
      user-select: none;
      &.is-placeholder {
        color: var(--surface-form-placeholder);
      }
    }
    .btn--select__clear {
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      width: 0.9rem;
      height: 0.9rem;
      margin-right: var(--spacing-2xs);
      border: 0;
      background: transparent;
      color: var(--rahn-blue-60);
      cursor: pointer;
      &[hidden] {
        display: none;
      }
      svg {
        display: block;
        width: 100%;
        height: 100%;
        pointer-events: none;
      }
    }
    .btn--select__summary .btn__icon {
      flex: 0 0 var(--form-control-height);
      align-self: stretch;
      display: grid;
      place-items: center;
      width: var(--form-control-height);
      height: auto;
      border-left: 1px solid var(--rahn-blue-30);
      background: var(--form-control-icon-slot-bg);
      border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
    }
    .btn--select:is(:focus-within, .is-open) > .btn--select__summary .btn__icon {
      border-color: var(--surface-form-control-focus-border);
    }
    .btn--select__selected-count {
      position: absolute;
      padding-top: 1px;
      top: 0.1rem;
      right: 0.1rem;
      z-index: 3;
      display: grid;
      place-items: center;
      min-width: 1.65rem;
      height: 1.65rem;
      border-radius: 999px;
      background: var(--rahn-orange);
      color: var(--color-white);
      font-size: 0.875rem;
      font-weight: var(--typo-weight-semibold);
      line-height: 1;
      transform: translate(45%, -45%);
      pointer-events: none;
    }
    .btn--select__selected-count[hidden] {
      display: none;
    }
    .btn--select:is(:focus-within, .is-open) > .btn--select__summary {
      border-color: var(--surface-form-control-focus-border);
      box-shadow: var(--form-control-focus-ring);
      outline: none;
    }
  }
  .cmp-form .form-control--select option {
    color: var(--color-black);
  }
  .cmp-form {
    .form-options {
      --surface-text-color: var(--color-black);
      --surface-border: var(--rahn-blue-30);
      --surface-form-control-focus-border: var(--rahn-blue-60);
      display: grid;
      gap: var(--form-options-gap);
      padding: var(--spacing-xs);
      border: 1px solid var(--rahn-blue-30);
      border-radius: var(--border-radius-md);
      background: var(--color-white);
      legend {
        color: var(--rahn-blue);
      }
    }
    .form-option-list {
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      row-gap: var(--spacing-2xs);
      column-gap: var(--spacing-xs);
      padding: 0;
      list-style: none;
      margin: 0;
    }
    .form-option-list > .form-field__description,
    .form-option-list > .error {
      flex: 0 0 100%;
      width: 100%;
    }
    .form-option {
      display: inline-flex;
      align-items: center;
      gap: var(--spacing-2xs);
      cursor: pointer;
      color: var(--surface-text-color);
      font-size: var(--typo-size-sm);
      &:not(.menu-popover__link):has(input[disabled]) {
        --form-option-disabled-color: color-mix( in srgb, var(--surface-text-color) 60%, var(--color-white) );
        opacity: var(--form-disabled-opacity);
        color: var(--form-option-disabled-color);
        cursor: default;
      }
      input {
        appearance: none;
        margin: 0;
        flex: 0 0 auto;
        width: var(--form-option-control-size);
        height: var(--form-option-control-size);
        border: 1px solid var(--surface-border);
        background: var(--color-white);
        display: grid;
        place-items: center;
        transition:
          border-color 160ms ease,
          background-color 160ms ease,
          box-shadow 160ms ease;
        &:disabled {
          border-color: var(--form-option-disabled-color);
          background: var(--rahn-grey-30);
          color: var(--surface-btn-disabled-text);
          cursor: default;
        }
        &[type=checkbox] {
          border-radius: 4px;
          &::before {
            content: "";
            width: 0.55rem;
            height: 0.3rem;
            border-left: 2px solid var(--color-white);
            border-bottom: 2px solid var(--color-white);
            transform: translateY(-0.05rem) rotate(-45deg) scale(0);
            transition: transform 120ms ease;
          }
          &:checked::before {
            transform: translateY(-0.05rem) rotate(-45deg) scale(1);
          }
        }
        &[type=radio] {
          border-radius: 50%;
          &::before {
            content: "";
            width: 0.45rem;
            height: 0.45rem;
            border-radius: 50%;
            background: var(--color-white);
            transform: scale(0);
            transition: transform 120ms ease;
          }
          &:checked::before {
            transform: scale(1);
          }
        }
        &:checked:not(:disabled) {
          border-color: var(--rahn-blue);
          background: var(--rahn-blue);
        }
        &:focus-visible {
          box-shadow: var(--surface-form-control-focus-ring);
          border-color: var(--surface-form-control-focus-border);
        }
      }
    }
    .menu-popover .menu-popover__link.form-option {
      --form-option-unavailable-color: color-mix( in srgb, var(--color-black) 50%, var(--color-white) );
      --form-option-disabled-color: color-mix( in srgb, var(--surface-text-color) 60%, var(--color-white) );
      justify-content: flex-start;
      color: var(--color-black);
      font-weight: var(--typo-weight-light);
      &:hover,
      &:focus-visible,
      &:active {
        color: var(--color-black);
      }
      &.is-unavailable {
        color: var(--form-option-unavailable-color);
      }
      &:is(.is-disabled, :has(input[disabled])) {
        opacity: var(--form-disabled-opacity);
        color: var(--form-option-disabled-color);
        cursor: default;
      }
      &.is-unavailable:not(.is-disabled):not(:has(input[disabled])) {
        opacity: 0.5;
      }
      input {
        order: -1;
      }
    }
  }
  .cmp-form.cmp-form--label-inside .form-field:not(.form-field--label-outside),
  .cmp-form .form-field--floating-label:not(.form-field--label-outside) {
    position: relative;
    > label {
      position: absolute;
      top: 50%;
      left: var(--spacing-xs);
      z-index: 2;
      margin: 0;
      border: 1px solid transparent;
      border-radius: var(--border-radius-md);
      background: var(--color-white);
      color: var(--rahn-blue);
      pointer-events: none;
      line-height: 1;
      transform: translateY(-54%);
      transform-origin: left center;
      transition:
        padding 160ms ease,
        transform 160ms ease,
        font-size 160ms ease,
        top 160ms ease,
        border-color 160ms ease,
        color 160ms ease;
    }
    &:has(.btn--select.is-open) > label {
      z-index: 201;
    }
    &.form-field--textarea > label {
      top: var(--spacing-xs);
      transform: none;
    }
    &.is-active > label,
    &:focus-within > label {
      top: 0;
      transform: translateY(-54%) scale(0.86);
      font-size: var(--typo-size-2xs);
      padding: 0.3em 0.4em;
    }
    &.is-active > label {
      border-color: var(--rahn-blue-30);
    }
    &:focus-within > label {
      border-color: var(--surface-form-control-focus-border);
    }
    &.is-disabled > label {
      background: var(--surface-form-control-disabled-bg);
      color: var(--surface-btn-disabled-text);
    }
    &.form-field--textarea.is-active > label,
    &.form-field--textarea:focus-within > label {
      top: 0;
      transform: translateY(-54%) scale(0.86);
    }
    &:not(.is-active) .btn--select__summary .btn__label {
      color: transparent;
    }
    &:not(.is-active) .form-control--select,
    &:not(.is-active) .form-control.form-control--date {
      color: transparent;
    }
    &.is-active .form-control.form-control--date,
    &:focus-within .form-control.form-control--date {
      color: inherit;
    }
    &.is-active .btn--select__summary .btn__label:not(.is-placeholder),
    &:focus-within .btn--select__summary .btn__label:not(.is-placeholder) {
      color: inherit;
    }
    .form-control::placeholder {
      color: transparent;
    }
    .form-control:focus::placeholder {
      color: var(--surface-form-placeholder);
    }
  }
  @media (max-width: 1024px) {
    .cmp-form.form-grid--cols-3,
    .cmp-form .form-grid--cols-3 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (max-width: 768px) {
    .cmp-form.form-grid,
    .cmp-form .form-grid {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
  }
}

/* src/main/frontdev/css/components/menu-popover.css */
@layer components {
  .menu-popover--hitbox {
    padding-top: var(--spacing-2xs);
    position: absolute;
    z-index: 100;
    min-width: 100%;
    width: 100%;
    margin-top: -1px;
  }
  .menu-popover--hitbox:not(.nav-page-links__sub-menu):not([hidden]) > .menu-popover,
  .menu-popover--hitbox.nav-page-links__sub-menu.is-open > .menu-popover {
    transform-origin: top center;
    animation: menu-popover-in 160ms ease-out;
  }
  @keyframes menu-popover-in {
    from {
      opacity: 0;
      transform: scale(0.96);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .menu-popover--hitbox:not(.nav-page-links__sub-menu):not([hidden]) > .menu-popover,
    .menu-popover--hitbox.nav-page-links__sub-menu.is-open > .menu-popover {
      animation: none;
    }
  }
  .menu-popover {
    --menu-popover-item-text: var(--rahn-blue);
    --menu-popover-item-hover-text: var(--rahn-blue);
    --menu-popover-item-hover-bg: var(--rahn-light-blue-70);
    --menu-popover-item-selected-bg: var(--rahn-light-blue-70);
    min-width: 100%;
    margin: 0;
    padding: var(--spacing-sm);
    list-style: none;
    background: var(--color-white);
    color: var(--color-black);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--elevation-2);
    overflow: hidden;
    font-size: var(--typo-size-xs);
    .menu-popover__list {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .menu-popover__item + .menu-popover__item {
      border-top: 1px solid var(--rahn-grey-70);
    }
    .menu-popover__link {
      display: flex;
      flex: 1;
      width: 100%;
      min-width: 0;
      border: 0;
      background: transparent;
      align-items: center;
      justify-content: space-between;
      gap: var(--spacing-2xs);
      padding: 0.5rem 0.85rem;
      color: var(--menu-popover-item-text);
      font-family: inherit;
      font-size: inherit;
      line-height: inherit;
      font-weight: var(--typo-weight-semibold);
      text-decoration: none;
      cursor: pointer;
      text-align: left;
    }
    .menu-popover__link:hover,
    .menu-popover__link:focus-visible,
    .menu-popover__link.is-keyboard-highlighted,
    .menu-popover__link:active {
      background: var(--menu-popover-item-hover-bg);
      color: var(--menu-popover-item-hover-text);
    }
    .menu-popover__link.is-selected {
      background: var(--menu-popover-item-selected-bg);
    }
    .menu-popover__link:disabled,
    .menu-popover__link.is-disabled {
      cursor: default;
    }
    .menu-popover__link.is-unavailable {
      color: color-mix(in srgb, var(--menu-popover-item-text) 40%, var(--color-white));
    }
    .menu-popover__link.is-unavailable:hover,
    .menu-popover__link.is-unavailable:focus-visible,
    .menu-popover__link.is-unavailable:active,
    .menu-popover__link.is-disabled:hover,
    .menu-popover__link.is-disabled:focus-visible,
    .menu-popover__link.is-disabled.is-keyboard-highlighted,
    .menu-popover__link.is-disabled:active {
      background: transparent;
    }
    .menu-popover__link-label {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: left;
    }
    .menu-popover__link-icon {
      width: 1.1rem;
      height: 1.1rem;
    }
    .menu-popover__link-icon svg {
      width: 100%;
      height: 100%;
    }
  }
  .menu-popover--select-button {
    --menu-popover-select-option-height: 2.375rem;
    --menu-popover-select-visible-items: 20;
    --menu-popover-select-viewport-offset: 2rem;
    max-height: min(calc(var(--menu-popover-select-visible-items) * var(--menu-popover-select-option-height)), calc(100vh - var(--menu-popover-select-viewport-offset)));
    padding: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .menu-popover--select-button .menu-popover__link {
    height: var(--menu-popover-select-option-height);
    padding: 0 0.85rem;
  }
}

/* src/main/frontdev/css/components/chevron-toggle-icon.css */
@layer components {
  .chevronToggleIcon {
    display: inline-block;
    position: relative;
    width: 1.1rem;
    height: 1.1rem;
    transition: transform 160ms ease;
  }
  .chevronToggleIcon span {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50%;
    height: 2px;
    background-color: var(--btn-text);
    display: inline-block;
    transition: background-color 160ms ease, transform 160ms ease;
    transform-origin: center;
    border-radius: 999px;
  }
  .chevronToggleIcon span:first-of-type {
    transform: rotate(45deg);
    right: 39%;
  }
  .chevronToggleIcon span:last-of-type {
    transform: rotate(-45deg);
    left: 39%;
  }
  .chevronToggleTrigger:hover .chevronToggleIcon span,
  .chevronToggleTrigger:focus-visible .chevronToggleIcon span,
  .chevronToggleState:is(.is-open, [open]) .chevronToggleIcon span,
  .chevronToggleState:is(.is-open, [open]).chevronToggleTrigger .chevronToggleIcon span {
    background-color: var(--btn-text-hover);
  }
  .chevronToggleTrigger:active .chevronToggleIcon span:first-of-type {
    transform: scale(0.85) rotate(45deg);
  }
  .chevronToggleTrigger:active .chevronToggleIcon span:last-of-type {
    transform: scale(0.85) rotate(-45deg);
  }
  .chevronToggleState:is(.is-open, [open]) .chevronToggleIcon span:first-of-type {
    transform: rotate(-45deg);
  }
  .chevronToggleState:is(.is-open, [open]) .chevronToggleIcon span:last-of-type {
    transform: rotate(45deg);
  }
  .chevronToggleState:is(.is-open, [open]) .chevronToggleTrigger:active .chevronToggleIcon span:first-of-type,
  .chevronToggleState:is(.is-open, [open]).chevronToggleTrigger:active .chevronToggleIcon span:first-of-type {
    transform: scale(0.85) rotate(-45deg);
  }
  .chevronToggleState:is(.is-open, [open]) .chevronToggleTrigger:active .chevronToggleIcon span:last-of-type,
  .chevronToggleState:is(.is-open, [open]).chevronToggleTrigger:active .chevronToggleIcon span:last-of-type {
    transform: scale(0.85) rotate(45deg);
  }
}

/* src/main/frontdev/css/components/list.css */
@layer components {
  [data-list] {
    [data-list-item].hidden {
      display: none;
    }
    [data-list-item] {
      opacity: 0;
      transform: translateY(1rem);
      transition: opacity 240ms ease, transform 240ms ease;
    }
    [data-list-item].is-visible {
      opacity: 1;
      transform: translateY(0);
    }
    .cmp-list__extended-buttons.hidden {
      display: none;
    }
  }
  .list {
    .cmp-list li > .cmp-list__inner > .list__link {
      flex: 1 1 100%;
      max-width: 100%;
    }
    .list__link {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-3xs);
      min-width: 0;
      color: inherit;
      text-decoration: none;
      &:hover .cmp-list__title {
        color: var(--surface-link-hover-color);
      }
      .cmp-list__title {
        font-size: var(--typo-size-md);
        font-weight: var(--typo-weight-light);
      }
      &[aria-disabled=true] {
        color: var(--surface-btn-disabled-text);
        &:hover .cmp-list__title,
        .list__text {
          color: inherit;
        }
      }
    }
    .list__text {
      color: var(--surface-text-color);
      font-weight: var(--typo-weight-light);
      font-size: var(--typo-size-sm);
      font-style: italic;
    }
    .cmp-list__text {
      flex: 1 1 0;
      min-width: 0;
      max-width: 100%;
      display: flex;
      flex-direction: column;
    }
    .cmp-list__text > .cmp-list__title {
      margin: 0;
      font-size: var(--typo-size-md);
      font-weight: var(--typo-weight-light);
    }
    .cmp-list__description {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-sm);
      font-size: 1rem;
      > :last-child {
        margin-bottom: 0;
      }
    }
  }
  .cmp-search__group .list__link .cmp-list__title {
    text-decoration: underline;
    text-underline-offset: 0.16em;
    text-decoration-thickness: from-font;
  }
  .cmp-search__group .list__link .list__text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

/* src/main/frontdev/css/components/grid.css */
@layer components {
  .cmp-grid {
    .cmp-grid__content {
      display: grid;
      column-gap: var(--spacing-md);
    }
    .cmp-grid__col {
      min-width: 0;
      display: flex;
      flex-direction: column;
    }
    .cmp-grid__item {
      min-width: 0;
    }
    .cmp-grid__content--1 {
      grid-template-columns: 1fr;
    }
    .cmp-grid__content--1-1 {
      grid-template-columns: 1fr 1fr;
    }
    .cmp-grid__content--1-2 {
      grid-template-columns: 1fr 2fr;
    }
    .cmp-grid__content--2-1 {
      grid-template-columns: 2fr 1fr;
    }
    @media (min-width: 1025px) {
      .cmp-grid__content--align-headings {
        grid-template-rows: auto auto;
        row-gap: var(--spacing-sm);
        > .cmp-grid__col {
          display: contents;
        }
        > .cmp-grid__col1 > .cmp-grid__item {
          grid-column: 1;
        }
        > .cmp-grid__col2 > .cmp-grid__item {
          grid-column: 2;
        }
        > .cmp-grid__col > .cmp-grid__item {
          &,
          > .content-wrapper,
          > .content-wrapper > .content-wrapper-inner {
            display: grid;
            grid-row: 1 / span 2;
            grid-template-rows: subgrid;
          }
          > .content-wrapper > .content-wrapper-inner {
            justify-content: normal;
            > .content-wrapper-inner__head {
              grid-row: 1;
              align-self: end;
            }
            > :not(.content-wrapper-inner__head) {
              grid-row: 2;
            }
          }
        }
      }
    }
    @media (max-width: 1024px) {
      .cmp-grid__content {
        grid-template-columns: 1fr;
        row-gap: var(--spacing-md);
      }
    }
  }
}

/* src/main/frontdev/css/components/card-list.css */
@layer components {
  .cmp-card-list {
    --card-list-configured-column-count: 3;
    --card-list-effective-column-count: var(--card-list-configured-column-count);
    --card-list-column-count: var(--card-list-effective-column-count);
    --card-list-gap: var(--content-edge);
    --card-list-grid-width: 100%;
    --card-list-item-width: calc( (100% + var(--card-list-gap)) / var(--card-list-column-count) - var(--card-list-gap) );
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    ul.cmp-card-list__grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      gap: var(--card-list-gap);
      align-items: stretch;
      width: var(--card-list-grid-width);
      max-width: 100%;
      margin: 0;
      padding: 0;
    }
    li.cmp-card-list__item {
      --card-list-item-z-index: 0;
      list-style: none;
      display: flex;
      position: relative;
      z-index: var(--card-list-item-z-index);
      flex: 0 0 var(--card-list-item-width);
      margin: 0;
    }
    li.cmp-card-list__item > .cmp-card {
      flex: 1;
    }
  }
  .cmp-card-list[data-cards-variant=teaser] {
    --card-list-grid-column-count: min(var(--card-list-configured-column-count), 3);
    --card-list-grid-width: calc( (100% + var(--card-list-gap)) / 3 * var(--card-list-grid-column-count) - var(--card-list-gap) );
  }
  .cmp-card-list[data-cards-variant=media] {
    --card-list-effective-column-count: min(var(--card-list-configured-column-count), 2);
  }
  .cmp-card-list[data-is-single-item=true] {
    --card-list-effective-column-count: 1;
    --card-list-grid-width: 100%;
  }
  .cmp-card-list__empty-state {
    max-width: none;
    font-style: italic;
  }
  @media (max-width: 1280px) {
    .cmp-card-list {
      --card-list-effective-column-count: max( min(var(--card-list-configured-column-count), 2), calc(var(--card-list-configured-column-count) - 1) );
    }
    .cmp-card-list[data-cards-variant=media] {
      --card-list-effective-column-count: 1;
      --card-list-grid-width: 100%;
    }
  }
  @media (max-width: 1024px) {
    .cmp-card-list {
      --card-list-effective-column-count: min(var(--card-list-configured-column-count), 2);
    }
    .cmp-card-list[data-cards-variant=media] {
      --card-list-effective-column-count: 1;
    }
  }
  @media (max-width: 768px) {
    .cmp-card-list {
      --card-list-effective-column-count: 1;
      --card-list-grid-width: 100%;
    }
  }
}

/* src/main/frontdev/css/components/cart-list.css */
@layer components {
  .cart-list {
    width: 100%;
    min-width: 0;
    .cart-list__items {
      display: grid;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .cart-list__stream {
      margin: 0 0 var(--spacing-xs);
    }
    .cart-list__stream:not(:first-child) {
      margin-top: var(--spacing-md);
    }
    .cart-list__item {
      min-width: 0;
      width: 100%;
    }
    .cart-list__item:not(:first-child) {
      margin-top: -1px;
    }
    .cart-list__item-inner {
      border-top: 1px solid var(--rahn-blue-30);
      border-bottom: 1px solid var(--rahn-blue-30);
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 4.8rem;
      padding: 0.75rem var(--border-edge);
      gap: var(--spacing-xs);
    }
    .cart-list__item-inner > * {
      margin: 0;
    }
    .cart-list__item-summary {
      display: flex;
      flex: 1 1 auto;
      min-width: 50%;
      gap: var(--spacing-xs);
      font-size: var(--typo-size-sm);
    }
    .cart-list__item-quantity {
      flex: 0 0 auto;
    }
    .cart-list__item-title {
      min-width: 0;
      color: var(--surface-heading-color);
      font-weight: var(--typo-weight-semibold);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .cart-list__remove {
      flex: 0 0 auto;
    }
    .cart-list__empty {
      border-top: 1px solid var(--rahn-blue-30);
      border-bottom: 1px solid var(--rahn-blue-30);
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 4.8rem;
      padding: 0.75rem var(--border-edge);
      text-align: center;
    }
    &.cart-list--dense {
      .cart-list__item-inner {
        height: auto;
        min-height: 0;
        padding: var(--spacing-2xs);
        gap: var(--spacing-2xs);
      }
      .cart-list__item-summary {
        min-width: 0;
        gap: var(--spacing-2xs);
      }
      .cart-list__item-summary span {
        font-size: var(--typo-size-2xs);
      }
      .cart-list__empty {
        min-height: 0;
      }
    }
  }
}

/* src/main/frontdev/css/components/card.css */
@layer components {
  .cmp-card {
    --card-image-ratio: 6 / 5;
    --card-elevation: 0;
    --card-hover-backdrop: rgba(0, 0, 0, 0.04);
    --card-hover-backdrop-opacity: 1;
    --card-title-size: var(--typo-size-md);
    --card-title-weight: var(--typo-weight-regular);
    display: flex;
    flex-direction: column;
    position: relative;
    height: auto;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--color-white);
    overflow: hidden;
    box-shadow: 0 calc(var(--card-elevation) * 2px) calc(var(--card-elevation) * 8px) rgba(0, 0, 0, calc(var(--card-elevation) * 0.08));
    color: var(--surface-text-color, var(--color-black));
    &::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 250;
      background: var(--card-hover-backdrop);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease-in-out;
    }
    &[data-card-clickable=true]:hover {
      &::before {
        opacity: var(--card-hover-backdrop-opacity);
      }
      .cmp-card__image img {
        opacity: 0.8;
      }
    }
    &:hover {
      .mgnlLikeBtn.abs {
        display: block !important;
      }
    }
    .mgnlLikeBtn.abs {
      display: none !important;
      right: var(--spacing-2xs) !important;
      top: var(--spacing-2xs) !important;
    }
    .cmp-card__inner {
      flex: 1;
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: 1fr;
      grid-template-areas: "content";
      height: 100%;
    }
    .cmp-card__inner:has(.cmp-card__image) {
      grid-template-rows: auto 1fr;
      grid-template-areas: "image" "content";
    }
    .cmp-card__content {
      grid-area: content;
      position: relative;
      z-index: 300;
      display: flex;
      flex-direction: column;
      padding: var(--spacing-sm);
      pointer-events: none;
    }
    .cmp-card__content > *:not(:last-child) {
      margin-bottom: var(--spacing-2xs);
    }
    .cmp-card__image {
      grid-area: image;
      aspect-ratio: var(--card-image-ratio);
      overflow: hidden;
    }
    .cmp-card__image img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: opacity 0.2s ease-in-out;
    }
    .cmp-card__date {
      margin: 0;
    }
    .cmp-card__content .cmp-card__title {
      font-family: var(--font-heading), sans-serif;
      font-size: var(--card-title-size);
      color: var(--surface-heading-color, var(--rahn-blue));
      font-weight: var(--card-title-weight);
      &:not(:last-child) {
        margin-bottom: 0.5em;
      }
    }
    .cmp-card__text {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
      white-space: pre-line;
    }
    .cmp-card__text:has(+ .cmp-card__actions) {
      margin-bottom: 0.75rem;
    }
    .cmp-card__text > * {
      margin-bottom: 0;
    }
    .cmp-card__text,
    .cmp-card__date,
    .cmp-card__info {
      font-size: 1rem;
    }
    .cmp-card__actions {
      position: relative;
      z-index: 500;
      pointer-events: auto;
      margin-right: calc(var(--spacing-2xs) * -1);
      margin-bottom: calc(0.4rem * -1);
    }
    &[data-card-clickable=true] .cmp-card__actions {
      pointer-events: none;
    }
    .cmp-card__actions > .btn--text:first-child {
      margin-left: calc(var(--btn-padding) / -1);
    }
    .cmp-card__stretched-link {
      position: absolute;
      inset: 0;
      z-index: 100;
    }
    .cmp-card__overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: auto;
      z-index: 400;
      border-radius: var(--border-radius-md);
      min-height: 100%;
      display: none;
      padding: var(--spacing-md) var(--spacing-sm) var(--spacing-sm);
      opacity: 0.9;
      font-weight: var(--typo-weight-semibold);
    }
    &[data-card-clickable=true] .cmp-card__overlay {
      pointer-events: none;
    }
    .cmp-card__overlay-title {
      margin-bottom: 0.5em;
    }
    .cmp-card__overlay[data-tone=light] {
      --surface-text-color: var(--color-white);
      --surface-heading-color: var(--color-white);
      --surface-link-color: var(--color-white);
    }
  }
  .cmp-card__modal {
    --card-modal-gap: var(--content-edge);
    --card-modal-panel-width: min(55rem, calc(100vw - (var(--card-modal-gap) * 2)));
    --card-modal-panel-height: min(80dvh, calc(100dvh - (var(--card-modal-gap) * 2)));
    width: var(--card-modal-panel-width);
    max-width: var(--card-modal-panel-width);
    max-height: var(--card-modal-panel-height);
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: var(--border-radius-md);
    box-shadow: var(--elevation-2);
    overflow: hidden;
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity 180ms ease, transform 180ms ease;
    &::backdrop {
      background: rgba(0, 0, 0, 0.64);
      opacity: 1;
      transition: opacity 180ms ease;
    }
    &:has(.text-image__body[data-media-position=left]),
    &:has(.text-image__body[data-media-position=right]) {
      --card-modal-panel-width: min( var(--content-max-width), calc(100vw - (var(--card-modal-gap) * 2)) );
    }
    .cmp-card__modal-inner {
      max-height: var(--card-modal-panel-height);
      overflow: auto;
    }
    .cmp-card__modal-close {
      position: absolute;
      top: var(--spacing-xs);
      right: var(--spacing-sm);
      z-index: 2;
    }
    .cmp-card__modal-content {
      padding: clamp(var(--spacing-sm), 4vw, var(--spacing-lg));
    }
    .text-image__media-inner {
      height: 100%;
    }
    @media (max-width: 768px) {
      --card-modal-gap: var(--spacing-xs);
      --card-modal-panel-height: calc(100dvh - (var(--card-modal-gap) * 2));
    }
  }
  @starting-style {
    .cmp-card__modal[open] {
      opacity: 0;
      transform: translateY(var(--spacing-2xs)) scale(0.5);
    }
    .cmp-card__modal[open]::backdrop {
      opacity: 0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .cmp-card__modal,
    .cmp-card__modal::backdrop {
      transition: none;
    }
  }
  @media (hover: hover) and (pointer: fine) {
    .cmp-card:hover {
      overflow: visible;
      .cmp-card__overlay {
        display: flex;
        flex-direction: column;
      }
    }
  }
  .cmp-card[data-surface-variant=outlined] {
    background: transparent;
    border: 1px solid var(--surface-border, var(--rahn-blue));
  }
  .cmp-card[data-surface-variant=blank] {
    background: var(--color-white);
  }
  .cmp-card[data-surface-variant=rahnGrey] {
    background: var(--rahn-grey-30);
  }
  .cmp-card[data-variant=teaser] {
    .cmp-card__image {
      border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
    }
    .cmp-card__content {
      justify-content: start;
    }
    .cmp-card__inner:has(.cmp-card__image) .cmp-card__content {
      justify-content: center;
    }
  }
  .cmp-card[data-variant=bigTeaser] {
    --card-title-size: var(--typo-size-xl);
    --card-title-weight: var(--typo-size-xl);
    --card-image-ratio: 5 / 4;
    --card-big-teaser-min-height-ratio: 80%;
    --card-content-gradient:
      linear-gradient(
        
        180deg,
        rgba(255, 255, 255, 0.64) 0%,
        rgba(255, 255, 255, 0.4) 42%,
        rgba(255, 255, 255, 0) 100% );
    .cmp-card__inner {
      grid-template-areas: "content";
      grid-template-rows: 1fr;
      min-height: 18rem;
    }
    .cmp-card__inner::before {
      content: "";
      grid-area: content;
      display: block;
      padding-top: var(--card-big-teaser-min-height-ratio);
      pointer-events: none;
    }
    .cmp-card__image {
      aspect-ratio: auto;
      position: absolute;
      inset: 0;
      z-index: 100;
      border-radius: var(--border-radius-md);
      pointer-events: none;
    }
    .cmp-card__image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .cmp-card__content {
      grid-area: content;
      position: relative;
      z-index: 200;
      padding: var(--spacing-md);
    }
    .cmp-card__content::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: var(--card-content-gradient);
      border-radius: var(--border-radius-md);
    }
    .cmp-card__inner:has(.cmp-card__image) .cmp-card__content {
      justify-content: start;
    }
    .cmp-card__title {
      font-weight: var(--typo-weight-light);
    }
    .cmp-card__actions {
      margin: 0;
    }
    .cmp-card__text {
      font-size: var(--typo-size-sm);
    }
  }
  .cmp-card[data-variant=bigTeaser][data-surface-variant=outlined] {
    .cmp-card__content::before {
      background: none;
    }
  }
  .cmp-card[data-variant=media] {
    --card-media-image-width: 12rem;
    .cmp-card__inner {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: 1fr;
      grid-template-areas: "content";
      align-items: stretch;
    }
    .cmp-card__inner:has(.cmp-card__image) {
      grid-template-columns: var(--card-media-image-width) minmax(0, 1fr);
      grid-template-areas: "image content";
    }
    .cmp-card__image {
      position: relative;
      aspect-ratio: 210 / 297;
      align-self: start;
      width: 100%;
      height: auto;
      min-width: 0;
      border-radius: var(--border-radius-md) 0 0 var(--border-radius-md);
    }
    .cmp-card__content {
      justify-content: start;
      padding: var(--spacing-xs);
    }
    .cmp-card__image img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .cmp-card__actions {
      margin-bottom: 0;
    }
    @media (max-width: 1280px) {
      --card-media-image-width: 11rem;
    }
    @media (max-width: 768px) {
      .cmp-card__inner:has(.cmp-card__image) {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "content";
      }
      .cmp-card__image {
        display: none;
      }
    }
  }
}

/* src/main/frontdev/css/components/breadcrumbs.css */
@layer components {
  .breadcrumbs-nav {
    .breadcrumbs-nav-list {
      display: flex;
      flex-wrap: wrap;
      list-style: none;
      padding: 0;
      font-size: var(--typo-size-2xs);
    }
    .breadcrumbs-nav-list li + li::before {
      content: ">";
      margin: 0 var(--spacing-2xs);
      color: var(--rahn-blue-60);
    }
    .breadcrumbs-nav-list .ancestor a {
      font-weight: var(--typo-weight-regular);
      color: var(--rahn-blue-60);
      text-decoration: none;
      &:hover {
        color: var(--rahn-blue);
      }
    }
    .breadcrumbs-nav-list .current {
      pointer-events: none;
    }
    .breadcrumbs-nav-list .current span {
      font-weight: var(--typo-weight-semibold);
      color: var(--rahn-blue);
    }
  }
}

/* src/main/frontdev/css/components/hero.css */
@layer components {
  .cmp-hero {
    --hero-min-height: 23.5rem;
    --hero-mobile-image-height: 18rem;
    --hero-image-ratio: 1.7778;
    --hero-content-desktop-width: 56%;
    border-radius: var(--border-radius-backgrounds);
    overflow: visible;
    &:has(.hero__image),
    &[data-background]:not([data-background=transparent]) {
      overflow: hidden;
    }
    &[data-background] .hero__image {
      --gradient-color-1: "";
      --gradient-color-2: "";
    }
    &[data-background] .hero__image-slot::before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      z-index: 1;
      pointer-events: none;
    }
    &[data-background] .hero__image-slot::before {
      right: 0;
      width: 100%;
      background:
        radial-gradient(
          ellipse 600px 120% at 600px center,
          transparent 0,
          transparent 376px,
          color-mix(in srgb, var(--gradient-color-1) 88%, transparent) 512px,
          var(--gradient-color-1) 600px);
    }
    &[data-background] .hero__visual::before,
    &[data-background] .hero__visual::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      z-index: 1;
      pointer-events: none;
    }
    &[data-background] .hero__visual::before {
      left: 0;
      width: 660px;
      background:
        radial-gradient(
          ellipse 660px 150% at 660px center,
          transparent 0,
          transparent 410px,
          color-mix(in srgb, var(--gradient-color-1) 32%, transparent) 455px,
          color-mix(in srgb, var(--gradient-color-1) 72%, transparent) 535px,
          var(--gradient-color-1) 660px);
    }
    &[data-background] .hero__visual::after {
      right: 0;
      width: 660px;
      background:
        radial-gradient(
          ellipse 660px 150% at 0 center,
          transparent 0,
          transparent 410px,
          color-mix(in srgb, var(--gradient-color-1) 32%, transparent) 455px,
          color-mix(in srgb, var(--gradient-color-1) 72%, transparent) 535px,
          var(--gradient-color-1) 660px);
    }
    &[data-background=rahnGrey30] .hero__image {
      --gradient-color-1: rgba(246, 247, 246, 1);
      --gradient-color-2: rgba(246, 247, 246, 0);
    }
    &:has(.hero__image) > .content-wrapper-inner,
    &[data-background]:not([data-background=transparent]) > .content-wrapper-inner {
      position: relative;
      z-index: 2;
      min-height: var(--hero-min-height);
      margin: clamp(var(--spacing-md), 8vw, var(--spacing-xl)) auto;
    }
    &:not(:has(.hero__image))[data-background]:not([data-background=transparent]) > .content-wrapper-inner {
      position: relative;
      z-index: 2;
      margin: clamp(var(--spacing-sm), 8vw, var(--spacing-lg)) auto;
    }
    > .content-wrapper-inner {
      max-width: calc(100vw - 2 * var(--content-edge));
      width: var(--content-max-width);
    }
    .hero__wrapper {
      container-type: inline-size;
    }
    .hero__content {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: start;
      text-align: start;
      width: 100%;
      padding-right: var(--spacing-md);
    }
    .hero__content .btn {
      margin-top: var(--spacing-sm);
    }
    &:not(:has(.hero__image)) .hero__content {
      padding-right: 0;
    }
    .hero__heading {
      width: fit-content;
      max-width: 100%;
    }
    .hero__title,
    .hero__subline {
      pointer-events: none;
    }
    .hero__title {
      display: block;
    }
    .hero__title--heading {
      display: flex;
      flex-direction: column;
      align-items: start;
    }
    .hero__title-text:not(:last-child) {
      margin-bottom: 0.75rem;
    }
    .hero__subline {
      display: block;
      font-size: clamp(1.75rem, 4vw, 2.25rem);
      color: var(--surface-heading-color);
      width: 100%;
      margin-left: clamp(0%, var(--hero-subline-indent, 0%), calc(100cqw - 100%));
    }
    .hero__image {
      position: absolute;
      inset: 0;
      display: flex;
      justify-content: flex-end;
      max-width: calc(var(--content-max-width) + 15%);
      margin: auto;
    }
    .hero__image-slot {
      position: relative;
      width: calc(var(--content-max-width) / 1.25);
      max-width: 65%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      container-type: size;
    }
    .hero__visual {
      position: relative;
      width: min(100cqw, calc(100cqh * var(--hero-image-ratio)));
      height: 100cqh;
      overflow: hidden;
    }
    .hero__visual img {
      display: block;
      position: relative;
      z-index: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 0;
    }
    .hero__visual--cover {
      width: 100%;
      height: 100%;
    }
  }
  @media (min-width: 1025px) {
    .cmp-hero:has(.hero__image) .hero__content {
      width: var(--hero-content-desktop-width);
    }
  }
  @media (max-width: 1024px) {
    .cmp-hero {
      &:has(.hero__image) {
        min-height: 20rem;
      }
      &:has(.hero__image) > .content-wrapper-inner {
        padding-top: calc(var(--hero-mobile-image-height) + clamp(var(--spacing-xs), 8vw, var(--spacing-sm)));
        padding-bottom: clamp(var(--spacing-md), 8vw, var(--spacing-lg));
      }
      &:has(.hero__image) > .content-wrapper-inner,
      &[data-background]:not([data-background=transparent]) > .content-wrapper-inner {
        margin: 0 auto;
      }
      .hero__image {
        position: absolute;
        inset: 0 0 auto 0;
        max-width: none;
        width: 100%;
        height: var(--hero-mobile-image-height);
        margin: 0;
        justify-content: stretch;
      }
      &[data-background] .hero__image-slot::before {
        right: 0;
        width: 100%;
        background:
          radial-gradient(
            ellipse 125% 100% at 50% 0%,
            var(--gradient-color-2) 56%,
            color-mix(in srgb, var(--gradient-color-1) 78%, transparent) 86%,
            var(--gradient-color-1) 100%);
      }
      .hero__image-slot {
        width: 100%;
        max-width: none;
        height: 100%;
      }
      .hero__visual {
        width: 100%;
        height: 100%;
      }
      &[data-background] .hero__visual::before,
      &[data-background] .hero__visual::after {
        content: none;
      }
    }
  }
  @media (max-width: 768px) {
    .cmp-hero .hero__content {
      padding-right: 0;
    }
  }
  .brand-scope-rca .cmp-hero[data-background] .hero__image-slot::before,
  .brand-scope-rca .cmp-hero[data-background] .hero__visual::before,
  .brand-scope-rca .cmp-hero[data-background] .hero__visual::after {
    content: none;
  }
}

/* src/main/frontdev/css/components/text-image.css */
@layer components {
  .cmp-text-image {
    > .content-wrapper-inner {
      row-gap: var(--spacing-sm);
    }
    .text-image__body {
      display: grid;
      column-gap: var(--spacing-md);
      grid-template-areas: "text" "actions";
    }
    .text-image__body:has(> :nth-child(2)) {
      row-gap: var(--spacing-sm);
    }
    .text-image__text {
      grid-area: text;
    }
    .text-image__cta-section {
      grid-area: actions;
    }
    .text-image__media {
      grid-area: media;
    }
    .text-image__caption {
      margin-top: var(--spacing-2xs);
    }
    .text-image__body:has(.text-image__media):not(:has(.text-image__text)) {
      grid-template-areas: "actions" "media";
      gap: 0;
    }
    .text-image__body:has(.text-image__media)[data-media-position=left],
    .text-image__body:has(.text-image__media)[data-media-position=right] {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    .text-image__body:has(.text-image__media)[data-media-position=top] {
      grid-template-areas: "media" "text" "actions";
    }
    .text-image__body:has(.text-image__media)[data-media-position=right] {
      grid-template-areas: "text media" "actions actions";
    }
    .text-image__body:has(.text-image__media)[data-media-position=bottom] {
      grid-template-areas: "text" "actions" "media";
    }
    .text-image__body:has(.text-image__media):not(:has(.text-image__cta-section))[data-media-position=bottom] {
      grid-template-areas: "text" "media";
    }
    .text-image__body:has(.text-image__media)[data-media-position=left] {
      grid-template-areas: "media text" "actions actions";
    }
    .text-image__video {
      width: 100%;
      height: 100%;
      display: block;
    }
    @media (max-width: 1024px) {
      .text-image__body:has(.text-image__media)[data-media-position=left] {
        grid-template-columns: 1fr;
        grid-template-areas: "media" "text" "actions";
      }
      .text-image__body:has(.text-image__media)[data-media-position=right] {
        grid-template-columns: 1fr;
        grid-template-areas: "text" "actions" "media";
      }
      .text-image__body:has(.text-image__media):not(:has(.text-image__cta-section))[data-media-position=right] {
        grid-template-areas: "text" "media";
      }
    }
  }
}

/* src/main/frontdev/css/components/person-list.css */
@layer components {
  .cmp-person-list-wrapper:has(.cmp-person-list[data-output-option=personalContact]) {
    border-radius: var(--border-radius-backgrounds);
    position: relative;
    width: calc(100% - 2 * (var(--content-edge) + var(--page-edge)));
    margin-inline: auto;
    max-width: calc(var(--content-max-width) - 2 * var(--page-edge) - 2 * var(--border-edge));
  }
  .cmp-person-list {
    --person-list-spacing: var(--spacing-md);
    --person-list-min-column-size: calc((100% - var(--person-list-spacing)) / 2);
    --person-card-img-max-width: 10rem;
    --person-card-img-ratio: 1 / 1;
    --person-card-img-radius: 50%;
    --person-card-body-spacing: var(--spacing-xs);
    --person-card-body-padding: var(--spacing-sm);
    container-type: inline-size;
    .cmp-person-list__list {
      display: flex;
      flex-wrap: wrap;
      padding: 0;
      list-style: none;
      gap: var(--person-list-spacing);
    }
    .cmp-person-list__item {
      display: flex;
      margin: 0;
      flex: 1 1 var(--person-list-min-column-size);
      max-width: var(--person-list-min-column-size);
    }
  }
  .cmp-person-list__card {
    display: grid;
    position: relative;
    justify-items: center;
    align-items: center;
    grid-template-rows: auto 1fr;
    grid-template-areas: "image" "content";
    width: 100%;
    overflow: hidden;
    border-radius: var(--border-radius-md);
    color: var(--surface-text-color);
    &:hover .mgnlLikeBtn.abs {
      display: block !important;
    }
    .mgnlLikeBtn.abs {
      display: none !important;
      right: var(--spacing-2xs) !important;
      top: var(--spacing-2xs) !important;
    }
    .cmp-person-list__image {
      grid-area: image;
      aspect-ratio: var(--person-card-img-ratio);
      margin: 0;
      max-width: var(--person-card-img-max-width);
      width: 100%;
      background: var(--rahn-grey);
      border-radius: var(--person-card-img-radius);
    }
    .cmp-person-list__image img {
      object-fit: cover;
      width: 100%;
      height: 100%;
      border-radius: var(--person-card-img-radius);
    }
    .cmp-person-list__body {
      grid-area: content;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: var(--person-card-body-spacing);
      padding: var(--person-card-body-padding);
      min-inline-size: 0;
      width: 100%;
      height: 100%;
    }
    .cmp-person-list__body-group {
      display: flex;
      flex-direction: column;
    }
    .cmp-person-list__body-group--0 {
      flex: 1;
      display: flex;
      justify-content: center;
    }
    .cmp-person-list__body-group--2 {
      inline-size: fit-content;
      max-inline-size: 100%;
      display: flex;
      flex-direction: column;
      gap: var(--spacing-2xs);
      font-size: var(--typo-size-sm);
    }
    .cmp-person-list__slogan {
      font-size: var(--typo-size-md);
      position: relative;
      text-wrap: balance;
    }
    .cmp-person-list__slogan::before,
    .cmp-person-list__slogan::after {
      content: "";
      inline-size: 0.5em;
      block-size: 0.5em;
      background-size: contain;
      background-position: initial;
      background-image: url("data:image/svg+xml,%3Csvg width='11' height='8' viewBox='0 0 11 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.4375 1.33333L4.125 0H2.75C1.23062 0 0 1.86 0 3.33333V8H4.8125V3.33333H2.0625C2.0625 1.33333 3.4375 1.33333 3.4375 1.33333ZM8.25 3.33333C8.25 1.33333 9.625 1.33333 9.625 1.33333L10.3125 0H8.9375C7.41812 0 6.1875 1.86 6.1875 3.33333V8H11V3.33333H8.25Z' fill='%23153D6B'/%3E%3C/svg%3E");
    }
    .cmp-person-list__slogan::before {
      position: absolute;
      inset-block-start: 0.2em;
      inset-inline-start: -0.65em;
    }
    .cmp-person-list__slogan::after {
      display: inline-block;
      transform: translate(0.25em, -0.4em) rotate(180deg);
    }
    .cmp-person-list__phone-numbers {
      display: flex;
      column-gap: var(--spacing-sm);
      row-gap: var(--spacing-2xs);
      flex-wrap: wrap;
    }
    .cmp-person-list__contact-item {
      display: flex;
    }
    .cmp-person-list__contact-item > a {
      display: flex;
      align-items: center;
      gap: 0.35rem;
    }
    .cmp-person-list__icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      inline-size: 1.25rem;
      block-size: 1.25rem;
      margin-right: 0;
      line-height: 0;
    }
    .cmp-person-list__contact-text {
      text-align: left;
      min-width: 0;
      overflow-wrap: anywhere;
    }
    .cmp-person-list__icon svg {
      display: block;
      inline-size: 100%;
      block-size: 100%;
    }
    .cmp-person-list__name {
      max-width: none;
      margin-bottom: var(--spacing-2xs);
    }
    .cmp-person-list__function {
      max-width: 34rem;
    }
  }
  .cmp-person-list[data-output-option=workplace] {
    --person-list-spacing: var(--content-edge);
    --person-list-min-column-size: calc((100% - var(--person-list-spacing)) / 2);
    --person-card-img-ratio: 2 / 1;
    --person-card-img-max-width: unset;
    --person-card-img-radius: unset;
    --person-card-body-spacing: var(--spacing-sm);
    --person-card-body-padding: 2rem 2.5rem;
    .cmp-person-list__card {
      background: var(--color-white);
      border-radius: var(--border-radius-md);
      box-shadow: var(--elevation-2);
      .cmp-person-list__body-group--2 {
        margin-top: calc(var(--spacing-2xs) * -1);
      }
    }
    @media (max-width: 768px) {
      --person-list-min-column-size: 100%;
    }
  }
  .cmp-person-list[data-card-variant=portrait] {
    --person-list-min-column-size: calc((100% - var(--person-list-spacing)) / 2);
    --person-card-img-width: clamp(4rem, 25cqi, var(--person-card-img-max-width));
    --person-card-body-padding: 0 0 0 var(--content-edge);
    --person-card-body-spacing: var(--spacing-2xs);
    @media (max-width: 1024px) {
      --person-list-min-column-size: 100%;
    }
  }
  .cmp-person-list[data-card-variant=portrait][data-is-single-item=true] {
    --person-list-min-column-size: 100%;
  }
  .cmp-person-list[data-card-variant=portrait] .cmp-person-list__card {
    position: relative;
    border-radius: var(--border-radius-md);
    grid-template-columns: var(--person-card-img-width) minmax(0, 1fr);
    grid-template-rows: 1fr;
    grid-template-areas: "image content";
    align-items: stretch;
    &:not(:has(.cmp-person-list__image)) {
      --person-card-body-padding: 0;
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas: "content";
    }
    &:has(.cmp-person-list__image)::after {
      content: "";
      position: absolute;
      inset-block-start: calc(var(--spacing-sm) * 0.5);
      block-size: calc(100% - var(--spacing-sm));
      inset-inline-start: calc(var(--person-card-img-width) + var(--content-edge) * 0.5);
      inline-size: 1px;
      background: var(--surface-border);
    }
    .cmp-person-list__image {
      align-self: center;
      justify-self: center;
      max-inline-size: 100%;
    }
    .cmp-person-list__slogan {
      margin-left: 0.75rem;
    }
    .cmp-person-list__body {
      align-self: stretch;
    }
    .cmp-person-list__name {
      margin-bottom: var(--spacing-2xs);
    }
  }
}

/* src/main/frontdev/css/components/collapsible-list.css */
@layer components {
  .cmp-collapsible-list {
    container-name: collapsible-list;
    container-type: inline-size;
    .cmp-collapsible-list__list {
      display: grid;
    }
    .cmp-collapsible-list__item {
      max-width: 100%;
      scroll-margin-top: 8rem;
    }
    .cmp-collapsible-list__details {
      overflow: clip;
    }
    .cmp-collapsible-list__summary {
      cursor: pointer;
      min-height: 5.175rem;
      position: relative;
      &:hover {
        background: var(--surface-collapsible-hover-bg);
      }
    }
    .cmp-collapsible-list__summary-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      padding: 0;
      border: 0;
      background: transparent;
      color: inherit;
      cursor: pointer;
    }
    .cmp-collapsible-list__summary-main {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: center;
      min-width: 0;
    }
    .cmp-collapsible-list__summary-main .mgnlLikeBtn {
      display: none !important;
    }
    .cmp-collapsible-list__summary-edit {
      grid-column: 1;
      grid-row: 1;
      display: inline-flex;
      align-items: center;
      width: 37px;
      opacity: 0;
      pointer-events: none;
      flex-shrink: 0;
    }
    .cmp-collapsible-list__summary-text {
      grid-column: 2;
      grid-row: 1;
      display: flex;
      flex-direction: column;
      min-width: 0;
    }
    .cmp-collapsible-list__summary-link {
      font-weight: inherit;
    }
    .cmp-collapsible-list__summary-link .cmp-collapsible-list__summary-title {
      color: inherit;
    }
    .cmp-collapsible-list__summary-title {
      color: var(--surface-heading-color);
      font-size: var(--typo-size-md);
      transition: font-variation-settings var(--expand-collapse-animation-duration) ease, font-weight var(--expand-collapse-animation-duration) ease;
    }
    .cmp-collapsible-list__summary-subtitle {
      font-size: 1rem;
    }
    .cmp-collapsible-list__summary-icon {
      display: inline-flex;
      flex-shrink: 0;
    }
    .cmp-collapsible-list__summary-icon svg {
      width: 2rem;
      height: 2rem;
      stroke: var(--surface-icon-color, var(--rahn-blue));
    }
    .cmp-collapsible-list__summary-icon svg,
    .cmp-collapsible-list__summary-icon svg path {
      transition: transform 180ms ease;
      transform-origin: center;
    }
    .cmp-collapsible-list__content {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows var(--expand-collapse-animation-duration) ease, padding var(--expand-collapse-animation-duration) ease;
    }
    .cmp-collapsible-list__content-wrap {
      display: grid;
      gap: var(--spacing-xs);
      grid-template-areas: "content" "actions";
      min-height: 0;
      overflow: clip;
      opacity: 0;
      padding: 0 calc(2 * var(--content-edge)) 0 var(--content-edge);
      transition: opacity var(--expand-collapse-animation-duration) ease, padding var(--expand-collapse-animation-duration) ease;
    }
    .cmp-collapsible-list__content-inner {
      grid-area: content;
      display: flex;
      flex-direction: column;
      gap: var(--spacing-sm);
    }
    .cmp-collapsible-list__actions {
      grid-area: actions;
      display: flex;
      column-gap: var(--spacing-xs);
      row-gap: var(--spacing-2xs);
      justify-content: start;
      margin-top: var(--spacing-xs);
    }
    @supports (font-variation-settings: "wght" 500) {
      .cmp-collapsible-list__summary-title {
        font-variation-settings: "wght" 400;
      }
    }
  }
  @media (hover: hover) and (pointer: fine) {
    .cmp-collapsible-list {
      .cmp-collapsible-list__summary:hover .cmp-collapsible-list__summary-main .mgnlLikeBtn {
        display: block !important;
      }
      .cmp-collapsible-list__summary:hover .cmp-collapsible-list__summary-edit {
        display: inline-flex;
        opacity: 1;
        pointer-events: auto;
        margin-right: var(--spacing-2xs);
      }
    }
  }
  .cmp-collapsible-list.cmp-collapsible-list--products {
    .cmp-collapsible-list__content-wrap {
      grid-template-areas: "actions" "content";
    }
    .cmp-collapsible-list__actions {
      justify-content: end;
      margin-right: calc(var(--content-edge) * -1);
      margin-top: 0;
    }
    .cmp-collapsible-list__content-inner h4 {
      margin-bottom: var(--spacing-2xs);
    }
  }
  .cmp-collapsible-list.dense {
    .cmp-collapsible-list__summary {
      min-height: auto;
    }
  }
  .cmp-collapsible-list .cmp-collapsible-list__item.is-open {
    &:has(.btn--select.is-open) {
      .cmp-collapsible-list__details,
      .cmp-collapsible-list__content-wrap {
        overflow: visible;
      }
    }
    .cmp-collapsible-list__details {
      background: var(--surface-collapsible-bg);
    }
    .cmp-collapsible-list__content {
      grid-template-rows: 1fr;
    }
    .cmp-collapsible-list__content-wrap {
      opacity: 1;
      padding-top: var(--spacing-xs);
      padding-bottom: var(--content-edge);
    }
    .cmp-collapsible-list__summary-title {
      font-weight: var(--typo-weight-semibold);
    }
    .cmp-collapsible-list__summary-icon svg.plus-icon,
    .cmp-collapsible-list__summary-icon svg.plus-icon .horizontal {
      transform: rotate(90deg);
    }
    .cmp-collapsible-list__summary {
      &:hover {
        background: inherit;
      }
    }
    @supports (font-variation-settings: "wght" 500) {
      .cmp-collapsible-list__summary-title {
        font-variation-settings: "wght" 600;
      }
    }
  }
  .cmp-collapsible-list.cmp-guide-formulation-collapsible-list {
    .guide-formulation-specs {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-sm);
    }
    .guide-formulations-specs__group-title {
      margin-bottom: var(--spacing-2xs);
    }
  }
}

/* src/main/frontdev/css/components/checkout-form.css */
@layer components {
  .cmp-checkout-form {
    .cmp-checkout-form__cart {
      display: grid;
      align-content: start;
      margin-top: calc(var(--typo-size-sm) + var(--spacing-2xs) + 0.4rem);
      gap: var(--spacing-md);
      &:has(> .cmp-checkout-form__cart-items > .cart-list > h3:first-child) {
        margin-top: calc(var(--typo-size-sm) + var(--spacing-2xs) - 0.1rem);
      }
    }
    .cmp-checkout-form__message textarea.form-control {
      height: 8rem;
      min-height: 8rem;
      resize: none;
    }
    .cmp-checkout-form__submit-container {
      display: flex;
      flex-direction: column;
      row-gap: var(--spacing-xs);
    }
  }
}

/* src/main/frontdev/css/components/cos-enc-specs-list.css */
@layer components {
  .cmp-cos-enc-specs-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: fit-content(50%) minmax(0, 1fr);
    column-gap: var(--content-edge);
    row-gap: 0.4rem;
  }
  .cmp-cos-enc-specs-list__row {
    display: contents;
  }
  .cmp-cos-enc-specs-list__key {
    font-weight: var(--typo-weight-semibold);
    font-size: 1rem;
    overflow-wrap: anywhere;
    color: var(--rahn-blue);
  }
  .cmp-cos-enc-specs-list__value {
    font-size: 1rem;
    overflow-wrap: anywhere;
  }
  @media (width <= 767px) {
    .cmp-cos-enc-specs-list {
      grid-template-columns: minmax(0, 1fr);
      row-gap: var(--spacing-3xs);
    }
    .cmp-cos-enc-specs-list__row {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      row-gap: 0;
    }
  }
}

/* src/main/frontdev/css/components/enc-cat-app-detail.css */
@layer components {
  .cmp-enc-detail {
    margin-bottom: var(--spacing-xl);
    > .content-wrapper-inner {
      row-gap: var(--spacing-xl);
    }
  }
}

/* src/main/frontdev/css/components/nav.css */
@layer components {
  .page-header__row--top.expanded-nav nav.main-nav {
    --nav-font-size-current: calc( var(--typo-size-xs) - ((var(--typo-size-xs) - var(--typo-size-2xs)) * var(--logo-shrink-progress, 0)) );
    .nav-page-links__list-item--back {
      display: none;
    }
    .main-nav__page-links:not(:last-child) {
      margin-right: var(--spacing-2xs);
    }
    .btn--nav-outlined {
      --btn-border: var(--surface-btn-outlined-border);
      --btn-border-hover: var(--surface-btn-outlined-border-hover);
      --btn-bg-hover: var(--surface-btn-outlined-bg-hover);
      --btn-text-hover: var(--surface-btn-text-text-hover);
    }
    .nav-page-links__lvl-3 {
      padding-right: var(--spacing-sm);
      border-right: 1px solid var(--rahn-grey-70);
    }
    .nav-page-links__lvl-4 {
      padding-left: var(--spacing-sm);
    }
    .nav-page-links__list--lvl-3 .btn,
    .nav-page-links__list--lvl-4 .btn {
      --btn-height: 2.5rem;
    }
    .nav-page-links__list-item--lvl-1 .btn {
      --btn-height: calc(3rem - (0.75rem * var(--logo-shrink-progress, 0)));
      --btn-padding: calc(1rem - (0.5rem * var(--logo-shrink-progress, 0)));
      --btn-radius: calc(8px - (2px * var(--logo-shrink-progress, 0)));
      font-size: var(--nav-font-size-current);
      transition:
        background-color 160ms ease,
        border-color 160ms ease,
        color 160ms ease,
        font-size var(--animation-duration) ease,
        min-height var(--animation-duration) ease,
        padding-inline var(--animation-duration) ease,
        border-radius var(--animation-duration) ease;
      &.is-active {
        text-decoration: none;
      }
    }
    .nav-page-links__list-item--lvl-1:not(:has(.btn--nav-area)) .btn {
      --btn-padding: calc(0.75rem - (0.35rem * var(--logo-shrink-progress, 0)));
    }
  }
  nav.main-nav.main-nav--pending {
    visibility: hidden;
  }
  nav.main-nav {
    --column-gap: var(--spacing-2xs);
    display: contents;
    .main-nav__page-links {
      grid-column: 2;
      grid-row: 1;
    }
    .main-nav__buttons {
      grid-column: 3;
      grid-row: 1;
    }
    ul {
      list-style: none;
    }
    .main-nav__page-links,
    .main-nav__buttons {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
    .nav-page-links__main-menu {
      width: max-content;
    }
    .nav-page-links__sub-menu {
      display: none;
      top: calc(100% + var(--spacing-2xs) + (0.5 * var(--logo-current-height) * var(--logo-shrink-progress)));
      left: 50%;
      width: calc(100% + ((2 * var(--border-edge) - 0.5rem) * var(--nav-inset-progress)) + 0.5rem);
      transform: translateX(-50%);
    }
    .nav-page-links__sub-menu.menu-popover--hitbox {
      padding-top: 0;
    }
    .nav-page-links__sub-menu.is-open {
      display: block;
    }
    .nav-page-links__sub-menu--inner {
      display: grid;
      grid-template-areas: "lvl-2 lvl-2 lvl-2" "lvl-3 lvl-4 spacer";
      grid-template-columns: repeat(3, minmax(0, 1fr));
      grid-template-rows: auto auto;
      padding: var(--border-edge);
      column-gap: var(--column-gap);
      border-radius: var(--border-radius-md);
      ul,
      li {
        padding: 0;
        margin: 0;
      }
    }
    ul.nav-page-links__list {
      display: none;
    }
    ul.nav-page-links__list--lvl-1 {
      display: flex;
      align-items: stretch;
      li:has(.btn--nav-area) {
        margin-right: var(--column-gap);
      }
    }
    ul.nav-page-links__list.is-open {
      display: flex;
    }
    .nav-page-links__list-item {
      display: flex;
      align-items: center;
      white-space: nowrap;
      flex: 1;
    }
    .nav-page-links__lvl-2 {
      grid-area: lvl-2;
    }
    .nav-page-links__lvl-3 {
      grid-area: lvl-3;
      &:has(.nav-page-links__list.is-open) {
        margin-top: var(--spacing-xs);
      }
    }
    .nav-page-links__lvl-4 {
      grid-area: lvl-4;
      &:has(.nav-page-links__list.is-open) {
        margin-top: var(--spacing-xs);
      }
    }
    .nav-page-links__list--lvl-2 {
      align-items: stretch;
      column-gap: var(--column-gap);
    }
    .nav-page-links__list--lvl-3,
    .nav-page-links__list--lvl-4 {
      display: flex;
      flex-direction: column;
      column-gap: var(--column-gap);
    }
    .nav-page-links__list-item--lvl-2 {
      max-width: unset;
    }
    .nav-page-links__link {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex: 1;
    }
    .nav-page-links__list-item--lvl-2 .nav-page-links__link {
      justify-content: center;
    }
    .nav-page-links__lvl-4 {
      grid-area: lvl-4;
    }
    .main-nav__buttons {
      z-index: 1000;
      gap: var(--spacing-2xs);
    }
    .main-nav__buttons button[data-name=menu] {
      display: none;
    }
    .main-nav__buttons button .main-nav__menu-icon {
      display: contents;
    }
    .main-nav__buttons .btn,
    .nav-page-links__list .btn {
      font-weight: var(--typo-weight-regular);
    }
    .nav-page-links__list-item.is-open > .nav-page-links__link {
      background-color: var(--btn-bg-hover);
      border-color: var(--btn-border-hover);
      color: var(--btn-text-hover);
    }
    .main-nav__icon-menu-popover {
      right: 0;
      width: max-content;
      min-width: 18rem;
      max-width: min(24rem, calc(100vw - (2 * var(--border-edge))));
    }
    .main-nav__cart-menu {
      .cart-list {
        margin-bottom: var(--spacing-sm);
      }
      .main-nav__cart-menu-action {
        width: 100%;
        justify-content: space-between;
      }
    }
    .nav-page-links__list .btn.is-active {
      font-weight: var(--typo-weight-semibold);
    }
    .nav-page-links__list .nav-page-links__link .nav-page-links__label[data-nav-label] {
      display: inline-grid;
    }
    .nav-page-links__list .nav-page-links__link .nav-page-links__label[data-nav-label]::before {
      content: attr(data-nav-label);
      grid-area: 1 / 1;
      font-weight: var(--typo-weight-semibold);
      visibility: hidden;
      pointer-events: none;
    }
    .nav-page-links__list .nav-page-links__link .nav-page-links__label-text {
      grid-area: 1 / 1;
    }
    .nav-page-links__list--lvl-3 .btn,
    .nav-page-links__list--lvl-4 .btn {
      --btn-padding: 0;
      font-size: 1rem;
      &.is-active {
        text-decoration: underline;
      }
      &.is-active:hover {
        text-decoration: none;
      }
    }
    .nav-page-links__icon--toggle,
    .nav-page-links__icon--arrow-right {
      display: none;
    }
    .nav-page-links__list-item--lvl-1 .nav-page-links__link .nav-page-links__icon--toggle,
    .nav-page-links__list-item--lvl-2 .nav-page-links__link .nav-page-links__icon--toggle {
      display: inline-flex;
    }
    .nav-page-links__list-item--lvl-3 .nav-page-links__link .nav-page-links__icon--arrow-right,
    .nav-page-links__list-item--lvl-4 .nav-page-links__link .nav-page-links__icon--arrow-right {
      display: inline-flex;
    }
    .btn--nav-area,
    .btn--nav-outlined,
    .btn--nav {
      --btn-text: var(--surface-btn-text-text);
      --btn-text-hover: var(--rahn-orange);
      --btn-bg: transparent;
      --btn-bg-hover: transparent;
      --btn-border: transparent;
      --btn-border-hover: transparent;
      &.is-active {
        --btn-text: var(--rahn-orange);
        --btn-text-hover: var(--rahn-orange);
      }
    }
    .btn--nav {
      --btn-padding: var(--spacing-2xs);
    }
    .btn--nav-area {
      --btn-border: var(--surface-btn-outlined-border);
      --btn-border-hover: var(--surface-btn-outlined-border-hover);
      --btn-bg-hover: var(--surface-btn-outlined-bg-hover);
      --btn-text-hover: var(--surface-btn-text-text-hover);
      &.is-active {
        --btn-bg: var(--surface-btn-primary-bg);
        --btn-bg-hover: var(--surface-btn-primary-bg-hover);
        --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);
      }
    }
    .main-nav__icon-menu[data-name=shopping-cart] {
      .main-nav__cart-icon-stack {
        position: relative;
      }
      .main-nav__cart-icon {
        position: absolute;
        inset: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transform: scale(0.85);
        transition: opacity 160ms ease, transform 160ms ease;
      }
      .main-nav__cart-icon--empty {
        opacity: 1;
        transform: scale(1);
      }
      .btn--nav-area.is-active {
        --btn-bg: var(--surface-btn-highlight-bg);
        --btn-bg-hover: var(--surface-btn-highlight-bg-hover);
        --btn-border: var(--surface-btn-highlight-border);
        --btn-border-hover: var(--surface-btn-highlight-border-hover);
        --btn-text: var(--surface-btn-highlight-text);
        --btn-text-hover: var(--surface-btn-highlight-text-hover);
        .main-nav__cart-icon--empty {
          opacity: 0;
          transform: scale(0.85);
        }
        .main-nav__cart-icon--full {
          opacity: 1;
          transform: scale(1);
        }
      }
      .btn--nav-area.is-cart-added {
        animation: nav-cart-added-twist 420ms ease;
      }
    }
  }
  @keyframes nav-cart-added-twist {
    0% {
      transform: rotate(0deg);
    }
    25% {
      transform: rotate(-8deg);
    }
    55% {
      transform: rotate(7deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }
}

/* src/main/frontdev/css/components/nav-compact.css */
@layer components {
  .page-header__row--top.compact-nav.open-nav nav.main-nav {
    height: 100vh;
    .main-nav__page-links {
      display: block;
      height: auto;
      padding: var(--spacing-sm);
      position: absolute;
      top: 0;
      right: 0;
      left: unset;
      width: 100%;
      max-width: 24rem;
      transform: none;
      min-height: auto;
      align-content: start;
      overflow: visible;
      background-color: var(--color-white);
      z-index: 1000;
      box-shadow: var(--elevation-2);
    }
    .nav-page-links__list {
      align-items: stretch;
      padding: 0;
      row-gap: var(--spacing-2xs);
    }
    .nav-page-links__list-item {
      margin: 0;
    }
    .nav-page-links__list-item .btn {
      --btn-padding: calc(1rem - (0.5rem * var(--logo-shrink-progress, 0)));
      margin: 0;
      font-size: var(--typo-size-sm);
    }
    .nav-page-links__lvl {
      margin: 0;
    }
    .nav-page-links__back-button {
      --surface-btn-outlined-bg: var(--rahn-light-blue);
      --surface-btn-outlined-border: transparent;
      --surface-btn-outlined-border-hover: transparent;
      width: 100%;
      justify-content: start;
    }
    .nav-page-links__back-button svg {
      transform: rotate(180deg);
    }
    .menu-popover {
      box-shadow: none;
      margin-top: 0;
    }
  }
  @media (max-width: 768px) {
    body:has(.page-header__row--top.compact-nav.open-nav) {
      overflow: hidden;
    }
    .page-header__row--top.compact-nav.open-nav nav.main-nav {
      height: 100vh;
      .main-nav__buttons button,
      .main-nav__buttons .main-nav__icon-menu,
      .main-nav__buttons button[data-name=menu] .main-nav__menu-icon--menu {
        display: none;
      }
      .main-nav__buttons button[data-name=menu] .main-nav__menu-icon--close {
        display: contents;
      }
      .main-nav__buttons .main-nav__language-select,
      .main-nav__buttons .main-nav__language-select .btn--select__summary,
      .main-nav__buttons button[data-name=menu] {
        display: inline-flex;
      }
      .main-nav__page-links {
        right: unset;
        left: 50%;
        width: calc(100% + 2 * var(--border-edge));
        max-width: none;
        transform: translateX(-50%);
        min-height: 100vh;
        overflow: hidden;
        clip-path: inset(0 -9999px -9999px -9999px);
      }
    }
  }
  .page-header__row--top.compact-nav nav.main-nav {
    .main-nav__page-links {
      display: none;
      grid-column: 1 / -1;
      grid-row: 2;
      align-items: flex-start;
      overflow: hidden;
    }
    .nav-page-links__main-menu,
    .nav-page-links__sub-menu--inner,
    .nav-page-links__sub-menu {
      display: contents;
    }
    .nav-page-links__list {
      flex-direction: column;
    }
    .nav-page-links__list[data-level] {
      display: none;
    }
    .nav-page-links__list[data-level].is-open {
      display: flex;
    }
    .nav-page-links__link {
      flex: 1;
      display: flex;
      justify-content: space-between;
      position: relative;
    }
    .btn--nav,
    .btn--nav-outlined {
      --btn-border-hover: var(--surface-btn-text-border-hover);
    }
    .nav-page-links__link.btn {
      padding-right: 0;
    }
    .nav-page-links__link.btn .nav-page-links__icon {
      height: var(--btn-height);
      justify-content: end;
      align-items: center;
      padding-right: var(--btn-padding);
      max-width: 35%;
      position: absolute;
      right: 0;
      width: 100%;
    }
    .nav-page-links__link.btn .nav-page-links__icon svg {
      width: 1.1rem;
      height: 1.1rem;
    }
    .main-nav__buttons [data-name=menu] {
      display: inline-flex;
    }
    .main-nav__buttons [data-name=menu] .main-nav__menu-icon--close {
      display: none;
    }
    .nav-page-links__list-item > .nav-page-links__link .nav-page-links__icon--arrow-right {
      display: inline-flex;
    }
    .nav-page-links__list-item > .nav-page-links__link .nav-page-links__icon--toggle {
      display: none;
    }
  }
  @media (max-width: 768px) {
    .page-header__row--top.compact-nav nav.main-nav {
      .main-nav__buttons .main-nav__language-select {
        display: none;
      }
    }
  }
}

/* src/main/frontdev/css/components/cos-supplier-detail.css */
@layer components {
  .cmp-cos-detail {
    --column-max-width: 18rem;
    margin-bottom: var(--spacing-xl);
    > .content-wrapper-inner {
      display: grid;
      grid-template-areas: "content sidePanel" "products sidePanel";
      grid-template-columns: minmax(0, 1fr) minmax(12rem, clamp(12rem, 30%, var(--column-max-width)));
    }
    .cmp-cos-detail__content {
      grid-area: content;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: var(--spacing-lg);
    }
    .cmp-cos-detail__video {
      aspect-ratio: 21 / 9;
    }
    .cmp-cos-detail__products {
      grid-area: products;
    }
    .cmp-person-list-wrapper:has(.cmp-person-list[data-output-option=personalContact]) {
      width: 100%;
    }
  }
  .cmp-cos-detail .cmp-cos-detail__sidePanel {
    grid-area: sidePanel;
    min-width: 0;
    .cmp-cos-detail__sidePanel-inner {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: var(--spacing-sm);
    }
    .cmp-cos-detail__logo {
      max-width: var(--column-max-width);
    }
    .cmp-cos-detail__countries {
      li:not(:last-child) {
        margin-bottom: 0.4rem;
      }
    }
    .cmp-cos-detail__documents ul {
      padding: 0;
    }
    .cmp-cos-detail__documents li {
      list-style: none;
    }
    .cmp-cos-detail__documents .btn {
      width: 100%;
    }
    .cmp-cos-detail__documents .btn--select {
      width: 100%;
    }
  }
  @media (max-width: 1024px) {
    .cmp-cos-detail {
      .content-wrapper-inner {
        grid-template-areas: "content" "sidePanel" "products";
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
      }
      .cmp-cos-detail__video {
        aspect-ratio: 16 / 9;
      }
    }
    .cmp-cos-detail .cmp-cos-detail__sidePanel {
      .cmp-cos-detail__documents .btn {
        width: initial;
      }
      .cmp-cos-detail__documents .btn--select {
        display: inline-block;
        max-width: 100%;
      }
      .cmp-cos-detail__documents .btn--select > .btn--select__summary {
        width: auto;
      }
    }
  }
}

/* src/main/frontdev/css/components/search-bar.css */
@layer components {
  .page-header {
    --search-bar-control-height: var(--btn-height, 3rem);
    --search-bar-height: var(--search-bar-control-height);
    --search-bar-transition-duration: 400ms;
    --btn-height: 3rem;
    .cmp-search-bar__container {
      height: 0;
      opacity: 0;
      transform: translateY(calc(var(--search-bar-height) / -1));
      transition:
        height var(--search-bar-transition-duration) ease,
        transform var(--search-bar-transition-duration) ease,
        margin-top var(--search-bar-transition-duration) ease,
        opacity calc(var(--search-bar-transition-duration) / 2) ease;
    }
    .cmp-search-bar {
      --surface-border: var(--rahn-blue-30);
      position: relative;
      display: flex;
      align-items: center;
      width: 100%;
      min-height: var(--search-bar-control-height);
      overflow: hidden;
      padding-inline: var(--btn-height);
      border: 1px solid var(--rahn-blue-30);
      border-radius: var(--border-radius-md);
      background: var(--surface-form-control-bg, var(--color-white));
      color: var(--surface-text-color, var(--color-black));
      transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        background-color 160ms ease,
        color 160ms ease;
      &:focus-within {
        border-color: var(--surface-form-control-focus-border, var(--rahn-blue));
        box-shadow: var(--surface-form-control-focus-ring, 0 0 0 3px var(--rahn-blue-10));
        outline: none;
      }
    }
    .cmp-search-bar__input-container {
      flex: 1;
      min-width: 4rem;
      width: 100%;
      height: var(--search-bar-control-height);
    }
    .cmp-search-bar__input {
      width: 100%;
      height: 100%;
      border: 0;
      background: transparent;
      color: inherit;
      font-size: var(--typo-size-sm);
      font-weight: var(--typo-weight-light);
      &::placeholder {
        color: var(--surface-form-placeholder, var(--rahn-blue-60));
      }
      &:focus,
      &:focus-visible {
        outline: none;
      }
      &::-webkit-search-cancel-button,
      &::-webkit-search-decoration,
      &::-webkit-search-results-button,
      &::-webkit-search-results-decoration {
        appearance: none;
      }
    }
    .cmp-search-bar__adornment {
      position: absolute;
    }
    .cmp-search-bar__adornment--left {
      left: 0;
      top: 0;
      height: var(--search-bar-control-height);
      cursor: default;
    }
    .cmp-search-bar__adornment--left.btn {
      border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
      border: none;
    }
    .cmp-search-bar__adornment--right {
      right: 0;
      top: 0;
      height: var(--search-bar-control-height);
      display: flex;
    }
    .cmp-search-bar__filters {
      display: flex;
      flex: 0 0 auto;
      align-items: center;
      column-gap: var(--spacing-xs);
      row-gap: var(--spacing-2xs);
      padding-left: var(--spacing-2xs);
      padding-right: var(--spacing-xs);
      white-space: nowrap;
    }
    .cmp-search-bar__filter {
      font-size: var(--typo-size-xs);
    }
    .cmp-search-bar__clear {
      display: none;
      flex: 0 0 calc(var(--btn-height) / 1.5);
      align-items: center;
      justify-content: center;
      width: calc(var(--btn-height) / 1.5);
      height: var(--search-bar-control-height);
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--surface-btn-text-text);
      cursor: pointer;
    }
    .cmp-search-bar.has-value .cmp-search-bar__clear {
      display: inline-flex;
    }
    .cmp-search-bar__clear .btn__icon {
      width: 1rem;
      height: 1rem;
    }
    .cmp-search-bar__adornment--right .cmp-search-bar__submit {
      border-top: 0;
      border-right: 0;
      border-bottom: 0;
      border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
      &:disabled {
        --btn-bg: var(--surface-btn-outlined-bg);
        --btn-bg-hover: var(--surface-btn-outlined-bg-hover);
        --btn-border: var(--surface-btn-outlined-border);
        --btn-border-hover: var(--surface-btn-outlined-border);
      }
    }
    .cmp-search-bar__loader {
      display: none;
    }
    .cmp-search-bar.is-searching .cmp-search-bar__submit-icon {
      display: none;
    }
    .cmp-search-bar.is-searching .cmp-search-bar__loader {
      display: inline-flex;
      color: var(--rahn-blue-60);
    }
    .cmp-search-bar.is-searching .cmp-search-bar__loader svg {
      animation: searchBarLoaderSpin 700ms linear infinite;
    }
  }
  @keyframes searchBarLoaderSpin {
    to {
      transform: rotate(360deg);
    }
  }
  @media (max-width: 1024px) {
    .page-header .cmp-search-bar {
      align-content: flex-start;
      flex-wrap: wrap;
      padding-inline: 0;
      min-height: 0;
    }
    .page-header .cmp-search-bar .cmp-search-bar__input-container {
      flex-basis: 100%;
      padding-inline: var(--btn-height);
    }
    .page-header .cmp-search-bar .cmp-search-bar__filters {
      flex: 1 1 0;
      min-height: var(--btn-height);
      padding: var(--spacing-2xs) var(--spacing-xs);
      border-top: 1px solid var(--rahn-blue-30);
      flex-wrap: wrap;
    }
  }
  .page-header:has(.page-header__row--top.is-search-open) {
    --header-extra-height: calc(var(--spacing-sm) + var(--search-bar-height));
    .cmp-search-bar__container {
      margin-top: var(--spacing-sm);
      height: var(--search-bar-height);
      opacity: 1;
      transform: translateY(0);
      transition:
        height var(--search-bar-transition-duration) ease,
        transform var(--search-bar-transition-duration) ease,
        margin-top var(--search-bar-transition-duration) ease,
        opacity calc(var(--search-bar-transition-duration) / 2) ease calc(var(--search-bar-transition-duration) / 4);
    }
  }
}

/* src/main/frontdev/css/components/beforeAfterSlider.css */
@layer components {
  .cmp-before-after-slider {
    --before-after-position: 50%;
    --card-elevation: 1;
    .before-after-slider {
      width: 100%;
      border-radius: var(--border-radius-md);
    }
    .before-after-slider__media {
      position: relative;
      overflow: hidden;
      border-radius: var(--border-radius-md);
    }
    .before-after-slider__image {
      display: block;
      width: 100%;
      height: auto;
      user-select: none;
      pointer-events: none;
    }
    .before-after-slider__image--after {
      position: relative;
      z-index: 1;
    }
    .before-after-slider__after-label-layer {
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      clip-path: inset(0 0 0 var(--before-after-position));
    }
    .before-after-slider__before {
      position: absolute;
      inset: 0;
      z-index: 3;
      width: 100%;
      overflow: hidden;
      clip-path: inset(0 calc(100% - var(--before-after-position)) 0 0);
    }
    .before-after-slider__image--before {
      width: 100%;
      height: 100%;
      object-fit: cover;
      max-width: none;
    }
    .before-after-slider__divider {
      position: absolute;
      top: 0;
      bottom: 0;
      left: var(--before-after-position);
      z-index: 3;
      width: 2px;
      background: var(--color-white);
      transform: translateX(-50%);
      pointer-events: none;
    }
    .before-after-slider__handle {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: var(--color-white);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: transform 120ms ease;
      .before-after-slider__chevron {
        display: none;
      }
      &::before,
      &::after {
        content: "";
        position: absolute;
        top: 50%;
        width: 0.45rem;
        height: 0.45rem;
        border-block-start: 2px solid currentColor;
        border-inline-start: 2px solid currentColor;
        transform-origin: center;
      }
      &::before {
        left: calc(50% - 0.35rem);
        transform: translate(-50%, -50%) rotate(-45deg);
      }
      &::after {
        left: calc(50% + 0.35rem);
        transform: translate(-50%, -50%) rotate(135deg);
      }
    }
    .before-after-slider.is-dragging .before-after-slider__handle {
      transform: translate(-50%, -50%) scale(0.9);
    }
    .before-after-slider__range {
      position: absolute;
      inset: 0;
      z-index: 5;
      width: 100%;
      height: 100%;
      margin: 0;
      opacity: 0;
      cursor: ew-resize;
    }
    .before-after-slider__label {
      position: absolute;
      bottom: var(--spacing-2xs);
      color: var(--color-white);
      font-size: var(--typo-size-sm);
      line-height: 1.2;
      pointer-events: none;
      height: 2.25rem;
      padding: var(--spacing-2xs);
      background: rgba(0, 0, 0, 0.7);
      border-radius: var(--border-radius-sm);
    }
    .before-after-slider__label--before {
      left: var(--spacing-2xs);
    }
    .before-after-slider__label--after {
      right: var(--spacing-2xs);
    }
  }
}

/* src/main/frontdev/css/components/filterable-content.css */
@layer components {
  .cmp-filterable-content {
    display: flex;
    flex-direction: column;
    gap: var(--content-edge);
    .cmp-filterable-content__placeholder,
    .cmp-filterable-content__initial {
      text-align: center;
      margin: auto;
    }
  }
  .cmp-filterable-content__filters {
    --filter-panel-bg: var(--rahn-light-blue);
    --filter-panel-border-color: var(--color-white);
    --filter-panel-border-width: 1px;
    --filter-panel-radius: var(--border-radius-md);
    --filter-panel-spike-width: 40px;
    --filter-panel-spike-height: 20px;
    --filter-panel-spike-radius: calc(var(--border-radius-md) / 3);
    --filter-panel-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --filter-panel-padding: clamp(var(--spacing-sm), 5cqw, var(--spacing-md));
    position: relative;
    z-index: 2;
    padding-top: clamp(var(--spacing-sm), 5cqw, var(--spacing-lg));
    padding-bottom: calc(var(--filter-panel-padding) + var(--filter-panel-spike-height));
    padding-inline: clamp(var(--spacing-sm), 5cqw, var(--spacing-lg));
    color: var(--surface-text-color);
    > *:not(.cmp-filterable-content__panel-bg) {
      position: relative;
      z-index: 1;
    }
    .cmp-filterable-content__panel-bg {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
    }
    .cmp-filterable-content__panel-svg {
      display: block;
      width: 100%;
      height: 100%;
      filter: drop-shadow(var(--filter-panel-shadow));
    }
    .cmp-filterable-content__panel-shape {
      fill: var(--filter-panel-bg);
      stroke: var(--filter-panel-border-color);
      stroke-width: var(--filter-panel-border-width);
      vector-effect: non-scaling-stroke;
    }
    .cmp-filterable-content__description {
      margin-bottom: var(--spacing-md);
    }
    .cmp-filterable-content__form {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-xs);
    }
    .cmp-filterable-content__reset {
      visibility: hidden;
      pointer-events: none;
      &.is-visible {
        visibility: visible;
        pointer-events: auto;
      }
    }
    .cmp-filterable-content__reset .btn {
      font-size: 0.875rem;
    }
  }
  .cmp-filterable-content__count {
    text-align: center;
    font-size: var(--typo-size-2xs);
  }
  .cmp-filterable-content__results {
    display: flex;
    flex-direction: column;
  }
}

/* src/main/frontdev/css/components/login.css */
@layer components {
  .cmp-login.form-login {
    .text {
      padding-bottom: 1rem;
    }
  }
}

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