/** --------------------------------------------------
*
*   COMPONENTS / UI
*   Card: layout holder for card components
*
*   TABLE OF CONTENTS
*   component properties
*   component spacing
*   component theming
*  component theming - testimonial
*  rating theming
*  paragraph cards theming (Numbers)
*
*   -------------------------------------------------- */
/** --------------------------------------------------
*
*   BASE / FUNCTIONS
*   clamped
*
*   Clamps an output value between a min & max value
*   and interpolates the "preferred" value based on the
*   slope between the breakpoints at which the min/max
*   value should be used as the cut-off.
*
*   -------------------------------------------------- */
/** --------------------------------------------------
*
*   BASE / FUNCTIONS
*   rem
*
*   Converts a pixel value to rems.
*
*   -------------------------------------------------- */
/** --------------------------------------------------
*   #rem
*  -------------------------------------------------- */
/** --------------------------------------------------
*
*   BASE / FUNCTIONS
*   rnd
*
*   Built-in Sass math:round (and ceil/floor) functions
*   result in whole numbers only.
*
*   -------------------------------------------------- */
/** --------------------------------------------------
*   #rnd
*  -------------------------------------------------- */
/** --------------------------------------------------
*   #clamped
*  -------------------------------------------------- */
/** --------------------------------------------------
*
*   BASE / FUNCTIONS
*   iff
*
*   Syntactic sugar around Sass' built-in `if` function that
*   does not require you to pass a value for `$if-false`.
*
*   -------------------------------------------------- */
/** --------------------------------------------------
*   #iff
*  -------------------------------------------------- */
/** --------------------------------------------------
*
*   BASE / FUNCTIONS
*   implode
*
*   Variant of PHP array implode to convert list items into a string
*
*   -------------------------------------------------- */
/** --------------------------------------------------
*   #implode
*  -------------------------------------------------- */
/** --------------------------------------------------
*
*   BASE / FUNCTIONS
*   internal media query helpers to help convert & interpret MQ's
*
*   TABLE OF CONTENTS
*   mq
*   interpret-features
*   breakpoint-lookup
*   media-concatenate
*   convert units
*
*  -------------------------------------------------- */
/** --------------------------------------------------
*
*   BASE / FUNCTIONS
*   strip-unit
*
*   Strips the unit of input and returns just the numerical value.
*
*   -------------------------------------------------- */
/** --------------------------------------------------
*   #strip-unit
*  -------------------------------------------------- */
/** --------------------------------------------------
*   #mq [internal function]
*   -------------------------------------------------- */
/** --------------------------------------------------
*   #interpret-features [internal function]
*   -------------------------------------------------- */
/** --------------------------------------------------
*   #breakpoint-lookup
*   -------------------------------------------------- */
/** --------------------------------------------------
*   #media-concatenate
*   -------------------------------------------------- */
/** --------------------------------------------------
*   #convert units
*   -------------------------------------------------- */
/** --------------------------------------------------
*
*   BASE / FUNCTIONS
*   space
*
*   Returns the min or max value for a given key on
*   the size scale. Defaults to min (mobile first).
*
*   -------------------------------------------------- */
/** --------------------------------------------------
*
*   BASE / FUNCTIONS
*   token
*
*   Checks the design token maps for a given entry
*   and returns the result.
*
*   -------------------------------------------------- */
/** --------------------------------------------------
*
*   COLOR DESIGN TOKENS
*   These should never be used directly for styling.
*   Use abstractions in /variables/colors or components instead.
*
*   TABLE OF CONTENTS
*   color tokens
*
*   -------------------------------------------------- */
/** --------------------------------------------------
*
*   SIZE SCALE DESIGN TOKENS
*   These represent the mobile & desktop device size scale
*   from the Figma file as a min/max value per scale entry.
*   We cannot simply override the properties at a certain
*   breakpoint as this clashes with the component (container)
*   implementation.
*   By adding these tokens, we can at least maintain the naming
*   and values from the Figma file for easier reference without
*   having to resort to manually entering unrelated spacing units
*   all throughout the project.
*
*   TABLE OF CONTENTS
*   size scale tokens
*
*   -------------------------------------------------- */
/** --------------------------------------------------
*
*   TYPOGRAPHY DESIGN TOKENS
*   These should never be used directly for styling.
*   Use abstractions in /variables/font-styles instead.
*
*   TABLE OF CONTENTS
*   typographic tokens
*
*   -------------------------------------------------- */
/** --------------------------------------------------
*   #token
*   -------------------------------------------------- */
/** --------------------------------------------------
*   #space
*  -------------------------------------------------- */
/** --------------------------------------------------
*
*   COMPONENTS / UI
*   Card: layout holder for card components
*
*   TABLE OF CONTENTS
*   component properties
*   component spacing
*   component theming
*  component theming - testimonial
*  rating theming
*  paragraph cards theming (Numbers)
*
*   -------------------------------------------------- */
/** --------------------------------------------------
*
*   VARIABLES
*   breakpoints
*
*   INFO
*   breakpoint configuration:
*   - $mq-breakpoints is a list of breakpoints which
*     can be entered in px (recommended), em or rem.
*     Output will always be in em units.
*     Order of the breakpoints in the list does not matter.
*   - $mq-presets is an (optional) list of frequent combos
*
*   SDC
*   Try to minimise the use of breakpoints inside SDC component
*   styles. Container Queries are preferred so the components
*   can adjust themselves without needing awareness of their context.
*   (For instance: on a page with sidebar vs full width)
*
*   TABLE OF CONTENTS
*   custom breakpoints
*   frequently used presets
*
*   -------------------------------------------------- */
/** --------------------------------------------------
*   #custom breakpoints
*   -------------------------------------------------- */
/** --------------------------------------------------
*   #frequently used presets
*   -------------------------------------------------- */
/** --------------------------------------------------
*
*   COMPONENTS / UI
*   Card: layout holder for card components
*
*   TABLE OF CONTENTS
*   component properties
*   component spacing
*   component theming
*  component theming - testimonial
*  rating theming
*  paragraph cards theming (Numbers)
*
*   -------------------------------------------------- */
/** --------------------------------------------------
*
*   BASE / UTILS
*   queries
*
*   INFO
*   Media query mixins to be called directly or with
*   predefined keys configured in [variables/breakpoints]
*   +
*   basic container query mixin (inline-size, width > x)
*   sharing the same breakpoints and conversion logic as our
*   media query mixin
*
*   TABLE OF CONTENTS
*   fallback defaults
*   mq
*   mqset
*   cq
*
*  -------------------------------------------------- */
/** --------------------------------------------------
*   #fallback defaults
*   -------------------------------------------------- */
/** --------------------------------------------------
*   #mq
*   -------------------------------------------------- */
/** --------------------------------------------------
*   #mqset
*   -------------------------------------------------- */
/** --------------------------------------------------
*   #cq
*   -------------------------------------------------- */
/** --------------------------------------------------
*
*   BASE / UTILS
*   create button variants
*
*   INFO
*   Mixin to generate all button variant & style combos.
*
*   TABLE OF CONTENTS
*   create-button-variants
*
*   -------------------------------------------------- */
/** --------------------------------------------------
*   #create-button-variants
*   -------------------------------------------------- */
/** --------------------------------------------------
*
*   BASE / UTILS
*   tokens to custom property
*
*   INFO
*   Mixin to include all typographic related rules
*   based on a given token. Includes fluid type scale.
*
*   TABLE OF CONTENTS
*   tokens-to-custom-property
*
*   -------------------------------------------------- */
/** --------------------------------------------------
*   #tokens-to-custom-property
*   -------------------------------------------------- */
/** --------------------------------------------------
*
*   COMPONENTS / UI
*   Card: layout holder for card components
*
*   TABLE OF CONTENTS
*   component properties
*   component spacing
*   component theming
*  component theming - testimonial
*  rating theming
*  paragraph cards theming (Numbers)
*
*   -------------------------------------------------- */
/** --------------------------------------------------
*
*   BASE / UTILS
*   typography
*
*   INFO
*   Mixin to include all typographic related rules
*   based on a given token. Includes fluid type scale.
*
*   TABLE OF CONTENTS
*   font-styles
*
*   -------------------------------------------------- */
/** --------------------------------------------------
*   #font
*   -------------------------------------------------- */
/** --------------------------------------------------
*
*   COMPONENTS / UI
*   Card: layout holder for card components
*
*   TABLE OF CONTENTS
*   component properties
*   component spacing
*   component theming
*  component theming - testimonial
*  rating theming
*  paragraph cards theming (Numbers)
*
*   -------------------------------------------------- */
/** --------------------------------------------------
*
*   BASE / UTILS
*   visually hidden
*
*   TABLE OF CONTENTS
*   visually hidden
*   visually hidden - focusable
*
*  -------------------------------------------------- */
/** --------------------------------------------------
*  #visually hidden
*  -------------------------------------------------- */
/** --------------------------------------------------
*  #visually hidden - focusable
*  -------------------------------------------------- */
/** --------------------------------------------------
*   #component properties
*   -------------------------------------------------- */
.sdc-ui-card {
  --background: var(--color-neutral-white);
  --content-padding: 1.25rem;
  --border-radius: var(--radius-card, 2rem);
  --content-space: 1rem;
  --text-top-space: 0.5rem;
  --info-top-space: 0.375rem;
  --arrow-cutout-size: 7rem;
  --arrow-background: var(--color-brand-accent4-source);
  --arrow-hover-background: var(--color-neutral-black);
  --arrow-color: var(--color-neutral-black);
  --border-color: var(--color-fills-brand-accent2-subtler);
  --tag-color: var(--color-neutral-white);
  --tag-background: var(--color-fills-feedback-information-base);
  --arrow-background-gradient: none;
  --arrow-background-gradient-hover: none;
  --location-color: var(--color-neutral-black);
  /* Init all the conversion and processing of input and config values */
  /* Use the media query strings from map above to output the CSS rules */
}
@media all and (min-width: 48em) {
  .sdc-ui-card {
    --content-padding: 2rem;
    --content-space: 1.5rem;
  }
}

/** --------------------------------------------------
*   #component spacing
*   -------------------------------------------------- */
.sdc-ui-card {
  display: flex;
  flex-flow: column nowrap;
  transition: box-shadow 0.6s cubic-bezier(0.5, 0, 0, 1);
  overflow: clip;
}
.sdc-ui-card__content {
  padding: var(--content-padding);
  flex-grow: 1;
  flex-shrink: 1;
}
.sdc-ui-card--media .sdc-ui-card__media {
  width: 100%;
}
.sdc-ui-card--media .sdc-ui-card__media img {
  width: 100%;
}
.sdc-ui-card--icon {
  --content-spacing: 1.5rem;
  padding: var(--content-padding);
}
.sdc-ui-card--icon .sdc-ui-card__content {
  padding: 0;
}
.sdc-ui-card--icon .sdc-ui-card__content:is(* + *) {
  margin-top: var(--content-space);
}
.sdc-ui-card--icon .sdc-ui-card__arrow::before {
  background-color: var(--color-neutral-white);
}
.sdc-ui-card--icon:has(.sdc-ui-card__link) .sdc-ui-card__content__text {
  padding-inline-end: calc(var(--arrow-cutout-size) - var(--content-padding));
}
.sdc-ui-card--icon .field--name-field-icon img {
  display: block;
  width: 3rem;
  aspect-ratio: 1/1;
  object-fit: contain;
}
.sdc-ui-card.sdc-ui-card--no-media .sdc-ui-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  display: block;
  background: var(--color-neutral-3);
}
.sdc-ui-card.card--template {
  width: 0;
  height: 0;
  overflow: clip;
  display: none;
  opacity: 0;
  pointer-events: none;
}

/** --------------------------------------------------
*   #component theming
*   -------------------------------------------------- */
.sdc-ui-card {
  position: relative;
  border-radius: var(--border-radius);
  border: 0.0625rem solid var(--border-color);
  background-color: var(--background);
  overflow: clip;
}
.sdc-ui-card h3 {
  font-size: clamp(1.25rem, 0.556vw + 1.08rem, 1.5rem);
  font-weight: 700;
  font-style: normal;
  line-height: 1.4;
  font-size: var(--txt-scale-main-300);
}
.sdc-ui-card__media {
  position: relative;
}
.sdc-ui-card__media picture {
  display: block;
  overflow: hidden;
  border-radius: var(--border-radius) var(--border-radius) 0 var(--border-radius);
}
.sdc-ui-card__media .vocabulary-offer-type {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  z-index: 0;
}
.sdc-ui-card__media .vocabulary-offer-type:nth-child(2) {
  left: 4.5rem;
}
.sdc-ui-card__media .vocabulary-offer-type:nth-child(3) {
  left: 7.5rem;
}
.sdc-ui-card__media .vocabulary-offer-type:nth-child(4) {
  left: 10.5rem;
}
.sdc-ui-card__media .vocabulary-offer-type .content {
  width: 100%;
  height: 100%;
  padding: 0;
  display: flex;
  align-items: center;
  background: var(--color-fills-brand-accent2-subtles);
  overflow: hidden;
  border-radius: 50%;
}
.sdc-ui-card__media .vocabulary-offer-type .content .field--name-field-icon-reference {
  width: max-content;
  margin-inline: auto;
}
.sdc-ui-card__media .vocabulary-offer-type .content img {
  width: 1.5rem;
  height: 1.5rem;
}
.sdc-ui-card__media .vocabulary-offer-type .content span {
  display: none;
}
@container overview (width > 48em) {
  .sdc-ui-card__media .vocabulary-offer-type {
    width: 3rem;
    height: 3rem;
    top: 2rem;
    left: 2rem;
  }
  .sdc-ui-card__media .vocabulary-offer-type:nth-child(2) {
    left: 6rem;
  }
  .sdc-ui-card__media .vocabulary-offer-type:nth-child(3) {
    left: 10rem;
  }
  .sdc-ui-card__media .vocabulary-offer-type:nth-child(4) {
    left: 14rem;
  }
  .sdc-ui-card__media .vocabulary-offer-type .content img {
    width: 2rem;
    height: 2rem;
  }
}
.sdc-ui-card__media .sdc-ui-card__icon-wrap {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  z-index: 3;
  border-radius: 50%;
}
.sdc-ui-card__media .sdc-ui-card__icon-wrap img {
  width: 1.5rem;
  height: 1.5rem;
}
.sdc-ui-card--media .sdc-ui-card__media {
  position: relative;
}
.sdc-ui-card__content {
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
}
.sdc-ui-card__content__text {
  margin-block-start: var(--text-top-space);
}
.sdc-ui-card__content__info {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block: var(--info-top-space);
  white-space: nowrap;
}
.sdc-ui-card__content__info .flex-wrap {
  display: flex;
  gap: 0.5rem 1rem;
  flex-wrap: wrap;
  margin-block-end: 0.75rem;
}
.sdc-ui-card__content__info .function {
  font-size: clamp(1rem, 0.278vw + 0.92rem, 1.125rem);
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
}
.sdc-ui-card__content__info .date,
.sdc-ui-card__content__info .location,
.sdc-ui-card__content__info .contract {
  font-size: clamp(0.875rem, 0.278vw + 0.79rem, 1rem);
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
  display: flex;
  gap: 0.5rem;
  color: var(--location-color);
}
.sdc-ui-card__content__info .date::before,
.sdc-ui-card__content__info .location::before,
.sdc-ui-card__content__info .contract::before {
  --size: 1.5rem;
  content: "";
  width: var(--size);
  height: var(--size);
  display: block;
  flex-shrink: 0;
  flex-grow: 0;
  background: var(--location-color);
}
.sdc-ui-card__content__info .date::before {
  mask-image: url("../../../img/icons/calendar.svg");
  mask-repeat: no-repeat;
  mask-position: center center;
}
.sdc-ui-card__content__info .location {
  flex-flow: row nowrap;
  white-space: normal;
}
.sdc-ui-card__content__info .location::before {
  mask-image: url("../../../img/icons/location.svg");
  mask-repeat: no-repeat;
  mask-position: center center;
}
.sdc-ui-card__content__info .contract {
  flex-flow: row nowrap;
  white-space: normal;
}
.sdc-ui-card__content__info .contract::before {
  mask-image: url("../../../img/icons/clock.svg");
  mask-repeat: no-repeat;
  mask-position: center center;
}
@container overview (width > 48em) {
  .sdc-ui-card__content__info {
    margin-block-start: 0.75rem;
    gap: 1rem;
  }
}
.sdc-ui-card__content__tags .field__items {
  display: flex;
  gap: 0.25rem;
}
.sdc-ui-card__content__tags .field__items a {
  font-size: clamp(0.625rem, 0.278vw + 0.54rem, 0.75rem);
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  display: block;
  padding: 0.25rem;
  background-color: var(--tag-background);
  color: var(--tag-color);
  text-decoration: none;
  border-radius: var(--radius-lozenge);
}
.sdc-ui-card__link {
  position: absolute;
  inset: 0;
  z-index: 3;
  text-indent: -999em;
  color: transparent;
}
.sdc-ui-card__arrow, .sdc-ui-card__number {
  position: absolute;
  bottom: -0.0625rem;
  right: 0;
}
.sdc-ui-card__arrow::before, .sdc-ui-card__arrow::after, .sdc-ui-card__number::before, .sdc-ui-card__number::after {
  content: "";
  position: absolute;
  z-index: 1;
}
.sdc-ui-card__arrow::before, .sdc-ui-card__number::before {
  width: var(--arrow-cutout-size);
  height: var(--arrow-cutout-size);
  display: block;
  background-color: var(--background);
  mask-image: url("../../../img/icons/cutout.svg");
  mask-repeat: no-repeat;
  mask-position: bottom right;
  mask-size: contain;
  bottom: 0;
  right: 0;
}
.sdc-ui-card__arrow svg {
  width: 1.5rem !important;
  height: 1.5rem !important;
  display: block;
  position: absolute;
  right: 1.75rem;
  bottom: 1.75rem;
  z-index: 2;
  transition: color 0.6s cubic-bezier(0.5, 0, 0, 1), rotate 0.6s cubic-bezier(0.5, 0, 0, 1);
  will-change: rotate;
  color: var(--arrow-color);
}
.sdc-ui-card__arrow::after {
  --arrow-size: 3rem;
  width: var(--arrow-size);
  height: var(--arrow-size);
  display: block;
  background-color: var(--arrow-background);
  background-image: var(--arrow-background-gradient);
  background-repeat: no-repeat;
  background-position: center center;
  border-radius: var(--radius-image);
  transition: background 0.3s ease;
  bottom: 1rem;
  right: 1rem;
}
.sdc-ui-card__number::after {
  --size: 2rem;
  content: counter(numbered-cards);
  font-size: clamp(1rem, 0.278vw + 0.92rem, 1.125rem);
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
  width: var(--size);
  height: var(--size);
  display: grid;
  place-items: center;
  background: var(--color-fills-brand-accent1-subtler, #D9D9D9);
  color: var(--color-fills-brand-accent1-base, #000);
  border-radius: var(--radius-image);
  transition: background 0.3s ease;
  overflow: clip;
  bottom: 1.5rem;
  right: 1.5rem;
}
.sdc-ui-card:hover {
  --arrow-background: var(--arrow-hover-background);
  --arrow-color: var(--color-neutral-white);
}
.sdc-ui-card:hover:has(.sdc-ui-card__link) {
  box-shadow: var(--elevation-300);
}
.sdc-ui-card:hover .sdc-ui-card__arrow svg {
  rotate: 45deg;
}
.sdc-ui-card:has(.sdc-ui-card__link:focus-visible) {
  outline: 0.2rem solid rgba(0, 0, 0, 0);
  outline-offset: 0.2rem;
  box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.4rem #000;
}
.sdc-ui-card.node--unpublished {
  background-color: var(--background);
  opacity: 0.75;
}
.sdc-ui-card.node--unpublished .sdc-ui-card__media::before {
  font-size: clamp(0.625rem, 0.278vw + 0.54rem, 0.75rem);
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  content: "Unpublished";
  position: absolute;
  top: var(--content-padding);
  left: var(--content-padding);
  padding: 0.25rem;
  border-radius: var(--radius-lozenge);
  background-color: var(--color-text-feedback-error-base);
  color: var(--color-neutral-white);
  z-index: 10;
}

/** --------------------------------------------------
*   #component theming - testimonial
*   -------------------------------------------------- */
.sdc-ui-card--testimonial h3.title {
  font-size: var(--txt-scale-main-200);
}
.sdc-ui-card--testimonial .sdc-ui-card__media {
  overflow: visible;
}
.sdc-ui-card--testimonial .sdc-ui-card__media img {
  border-radius: 0 0 var(--border-radius) var(--border-radius);
}
.sdc-ui-card--testimonial .sdc-ui-card__media::before {
  --size: 5rem;
  content: "";
  width: var(--size);
  height: var(--size);
  display: block;
  position: absolute;
  bottom: -2.5rem;
  left: 1.875rem;
  z-index: 1;
  background-color: var(--color-fills-brand-accent5-base);
  mask-image: url("../../../img/icons/quote-right.svg");
  mask-repeat: no-repeat;
  mask-position: center center;
  mask-size: var(--size) auto;
}
@container overview (width > 48em) {
  .sdc-ui-card--testimonial .sdc-ui-card__media::before {
    left: 2.5rem;
  }
}
@container overview (width > 48em) {
  .sdc-ui-card--testimonial .sdc-ui-card__content__info {
    margin-block-start: 0.375rem;
  }
}
.sdc-ui-card--testimonial .sdc-ui-card__content__text {
  order: -1;
  margin-block-start: 2rem;
}

/** --------------------------------------------------
*   # Rating theming
 -------------------------------------------------- */
.sdc-ui-card__content__rating {
  width: 100%;
  height: 1.5rem;
  margin-block: 1rem;
}
.sdc-ui-card__content__rating + .title {
  margin-block-start: 0;
}
.sdc-ui-card__content__rating .rating-wrapper {
  width: 10rem;
  height: 1.5rem;
  position: relative;
  background: transparent url("../../../img/icons/rating.svg") no-repeat left 0.25rem center;
  padding-inline: 0.25rem;
}
.sdc-ui-card__content__rating .rating-wrapper span {
  height: 1.5rem;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background: var(--color-brand-accent3-source);
  mask-image: url("../../../img/icons/rating.svg");
  mask-repeat: no-repeat;
  mask-position: 0.25rem center;
  z-index: 1;
}
@container overview (width > 48em) {
  .sdc-ui-card__content__rating {
    margin-block: 1.5rem;
  }
}

/** --------------------------------------------------
*   # Paragraph cards theming
 -------------------------------------------------- */
.sdc-ui-card.paragraph--type--card .sdc-ui-card__content__info {
  display: block;
  order: 3;
  padding-block: 2rem 0;
  margin-block-start: auto;
  margin-block-end: 0;
}
.sdc-ui-card.paragraph--type--card .sdc-ui-card__content__info .btn {
  width: 100%;
}
.sdc-ui-card.paragraph--type--card .sdc-ui-card__content__info .btn.btn--primary[data-style=fill] {
  width: 100%;
  color: var(--color-fills-brand-accent1-base);
  border-color: var(--color-fills-brand-accent1-base);
  background-color: transparent;
  padding-block: 0.625rem;
  text-transform: initial;
}
.sdc-ui-card.paragraph--type--card .sdc-ui-card__content__info .btn.btn--primary[data-style=fill]::after {
  content: "";
  mask-image: url("../../../img/theme/arrow-right.svg");
  mask-repeat: no-repeat;
  mask-position: left center;
  width: 1.5rem;
  aspect-ratio: 1/1;
  background-color: var(--color-fills-brand-accent1-base);
}
.sdc-ui-card.paragraph--type--card .sdc-ui-card__content__info .btn.btn--primary[data-style=fill]:hover {
  color: var(--color-fills-brand-accent1-hover);
  border-color: var(--color-fills-brand-accent1-hover);
  background-color: var(--color-fills-brand-accent2-subtler);
}
.sdc-ui-card.paragraph--type--card .sdc-ui-card__content__info .btn.btn--primary[data-style=fill]:hover::after {
  background-color: var(--color-fills-brand-accent1-hover);
}
.sdc-ui-card.paragraph--type--card .sdc-ui-card__content__info .btn.btn--primary[data-style=fill]:active, .sdc-ui-card.paragraph--type--card .sdc-ui-card__content__info .btn.btn--primary[data-style=fill]:focus, .sdc-ui-card.paragraph--type--card .sdc-ui-card__content__info .btn.btn--primary[data-style=fill]:focus-within {
  color: var(--color-fills-brand-accent1-pressed);
  border-color: var(--color-fills-brand-accent1-pressed);
  background-color: transparent;
}
.sdc-ui-card.paragraph--type--card .sdc-ui-card__content__info .btn.btn--primary[data-style=fill]:active::after, .sdc-ui-card.paragraph--type--card .sdc-ui-card__content__info .btn.btn--primary[data-style=fill]:focus::after, .sdc-ui-card.paragraph--type--card .sdc-ui-card__content__info .btn.btn--primary[data-style=fill]:focus-within::after {
  background-color: var(--color-fills-brand-accent1-pressed);
}
.sdc-ui-card.paragraph--type--card .sdc-ui-card__content__info .btn.btn--primary[data-style=fill]:disabled {
  color: var(--color-text-neutral-base);
  background-color: var(--color-fills-neutral-disabled);
  border-color: var(--color-fills-neutral-disabled);
}
.sdc-ui-card.paragraph--type--card .sdc-ui-card__content__info .btn.btn--primary[data-style=fill]:disabled::after {
  background-color: var(--color-text-neutral-base);
}
.sdc-ui-card.paragraph--type--card .sdc-ui-card__content__info .btn.btn--secondary::after {
  content: "";
  mask-image: url("../../../img/theme/arrow-right.svg");
  mask-repeat: no-repeat;
  mask-position: left center;
  width: 1.5rem;
  aspect-ratio: 1/1;
  background-color: var(--color-fills-brand-accent1-base);
}
.sdc-ui-card.paragraph--type--card.sdc-ui-card--no-media .sdc-ui-card__media {
  padding-block-end: 56.25%;
}

/** --------------------------------------------------
*   # Wide card theming
 -------------------------------------------------- */
.sdc-ui-card.node--view-mode-teaser-wide {
  --media-height: 17rem;
  container: card--wide/inline-size;
  position: relative;
  /* Init all the conversion and processing of input and config values */
  /* Use the media query strings from map above to output the CSS rules */
}
@media all and (min-width: 48em) {
  .sdc-ui-card.node--view-mode-teaser-wide {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "content media";
  }
}
.sdc-ui-card.node--view-mode-teaser-wide .sdc-ui-card__media {
  grid-area: media;
  width: auto;
  height: 0;
  position: static;
  aspect-ratio: 1/1;
  border-radius: var(--border-radius);
  /* Init all the conversion and processing of input and config values */
  /* Use the media query strings from map above to output the CSS rules */
}
.sdc-ui-card.node--view-mode-teaser-wide .sdc-ui-card__media img {
  display: none;
}
@media all and (min-width: 48em) {
  .sdc-ui-card.node--view-mode-teaser-wide .sdc-ui-card__media {
    height: var(--media-height);
    position: relative;
  }
  .sdc-ui-card.node--view-mode-teaser-wide .sdc-ui-card__media img {
    display: block;
  }
}
.sdc-ui-card.node--view-mode-teaser-wide .sdc-ui-card__arrow::before,
.sdc-ui-card.node--view-mode-teaser-wide .sdc-ui-card__number::before {
  width: var(--arrow-cutout-size);
  height: var(--arrow-cutout-size);
}
.sdc-ui-card.node--view-mode-teaser-wide .title {
  margin-block-start: 0.5rem;
  /* Init all the conversion and processing of input and config values */
  /* Use the media query strings from map above to output the CSS rules */
}
@media all and (min-width: 48em) {
  .sdc-ui-card.node--view-mode-teaser-wide .title {
    margin-block-start: 1rem;
  }
}
.sdc-ui-card.node--view-mode-teaser-wide .sdc-ui-card__content {
  grid-area: content;
  display: grid;
  width: auto;
  grid-template-rows: auto auto 1fr;
  min-height: 0;
  position: static;
  /* Init all the conversion and processing of input and config values */
  /* Use the media query strings from map above to output the CSS rules */
}
@media all and (min-width: 48em) {
  .sdc-ui-card.node--view-mode-teaser-wide .sdc-ui-card__content {
    max-height: var(--media-height);
    position: relative;
  }
}
.sdc-ui-card.node--view-mode-teaser-wide .sdc-ui-card__content__info {
  display: block;
  margin-block-start: 1rem;
  margin-block-end: 0;
  white-space: initial;
  /* Init all the conversion and processing of input and config values */
  /* Use the media query strings from map above to output the CSS rules */
}
@media all and (min-width: 48em) {
  .sdc-ui-card.node--view-mode-teaser-wide .sdc-ui-card__content__info {
    margin-block-start: 0.75rem;
  }
}
.sdc-ui-card.node--view-mode-teaser-wide .sdc-ui-card__content .intro-text {
  overflow: hidden;
  margin-block-start: var(--text-top-space);
  /* Init all the conversion and processing of input and config values */
  /* Use the media query strings from map above to output the CSS rules */
}
@media all and (min-width: 48em) {
  .sdc-ui-card.node--view-mode-teaser-wide .sdc-ui-card__content .intro-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
  }
}
.sdc-ui-card.node--view-mode-teaser-wide .sdc-ui-card__content br {
  display: none;
}
.sdc-ui-card.node--view-mode-teaser-wide .sdc-ui-card__content .intro-text {
  width: calc(100% - var(--arrow-cutout-size));
  margin-block-start: 1rem;
  /* Init all the conversion and processing of input and config values */
  /* Use the media query strings from map above to output the CSS rules */
}
@media all and (min-width: 48em) {
  .sdc-ui-card.node--view-mode-teaser-wide .sdc-ui-card__content .intro-text {
    width: 100%;
  }
}
.sdc-ui-card.node--view-mode-teaser-wide.node--unpublished .sdc-ui-card__media::before {
  left: auto;
  right: var(--content-padding);
}

/** --------------------------------------------------
*   # Wide card theming
 -------------------------------------------------- */
.sdc-ui-card.sdc-ui-card--icon .sdc-ui-card__media {
  border-radius: 0;
  position: static;
}