/* component.cards */
/* mixins.color    */
/* vars.ci */
/* mixins.space */
/* utilities.hacks */
/* mixins.fallbacks */
/* mixins.numbers */
/* mixins.fallbacks */
/* component.card-deck */
:root {
  --card-background: var(--panel-background-color);
  --card-border: 1px solid #ebebeb;
  --card-shadow: var(--shadow-dark), var(--shadow-dark);
  --card-footer: var(--surface-9);
}

.c_card-deck[class] {
  --col-item: calc(var(--deck-width, var(--max-content-width)) / var(--deck-items, 1) - var(--deck-items, 1) * var(--spacing));
  --grid-spacing-block: var(--spacing);
  --grid-spacing-inline: var(--spacing);
  padding-left: 0;
  padding-right: 0;
  grid-template-columns: var(--grid-ram);
  background-color: var(--card-background-color, transparent);
}

html.no-flex-gap .c_card-deck {
  margin: calc(-1 * var(--grid-spacing-inline) / 2);
}

html.no-flex-gap .c_card-deck .m_card {
  margin: calc(var(--grid-spacing-inline) / 2);
}

/* GRID SPALTENBREITEN */
.-deck-slim {
  --deck-items: 2;
}
@media (max-width: 49.999em) {
  .-deck-slim {
    --deck-items: 1;
  }
}

.-deck-duo {
  --deck-items: 2;
}

.-deck-trio {
  --deck-items: 3;
}

.-deck-quart {
  --deck-items: 4;
}

/* component.cards */
/* components.card.card */
.m_card {
  --card-columns: [L] 1fr [R];
  --card-layout: "h" "b" "f";
  --card-rows: [T] auto [M] 1fr auto [B];
  --block-spacing-block: 0;
  --block-spacing-inline: 0;
  --_tf: 350ms ease-out;
  position: relative !important;
  flex-basis: calc((var(--grid-ram-item) - (100% - var(--grid-spacing-inline, 0px))) * 999);
  display: grid;
  grid-template-areas: var(--card-layout, initial);
  grid-template-columns: var(--card-columns, auto);
  grid-template-rows: var(--card-rows, auto);
  transition: transform var(--_tf);
}
@media (min-width: 36em) and (max-width: 44.999em) {
  .m_card {
    --card-columns: [L] 1fr [C] 1fr [R];
    --card-layout: "h b" "h f";
    --card-rows: [T] 1fr [M] auto [B];
    flex-basis: 100%;
  }
}
.m_card {
  --outline-focus: var(--outline-width, calc(var(--border-width) * 2)) solid var(--outline-color, var(--form-element-focus-color, #2c90a8));
  --outline-focus-offset: 3px;
  --outline-shadow: 0 0 0 var(--outline-width) var(--form-element-active-background-color, var(--surface-9)),
  0 0 0 calc(var(--outline-focus-offset) + var(--outline-width)) var(--outline-color);
  outline: var(--card-border);
  box-shadow: var(--card-shadow);
  contain: paint;
}
.m_card img,
.m_card svg,
.m_card video,
.m_card canvas {
  object-fit: cover;
}
.m_card:focus-within {
  outline: var(--outline-focus);
  outline-offset: var(--outline-focus-offset);
}
@media (prefers-contrast: more) {
  .m_card:focus-within {
    outline-color: transparent;
  }
}

.card-head {
  grid-area: h;
  position: unset !important;
}

.card-link {
  display: inline-block;
}

.card-body {
  grid-area: b;
  position: unset;
}

.card-foot {
  grid-area: f;
  position: unset !important;
}

.card-body:focus-within :any-link:not(.card-link) {
  position: relative;
}
.card-body:focus-within :any-link:not(.card-link):focus {
  outline: var(--outline-focus, var(--outline-width, var(--border-width)) solid var(--outline-color, currentColor));
  outline-offset: var(--outline-focus-offset);
}
.card-body:focus-within :any-link:not(.card-link):focus:focus:not(:focus-visible) {
  outline: none;
}
@supports (-apple-pay-button-style: inherit) {
  @supports (image-orientation: none) and (scale: 2) {
    .card-body:focus-within :any-link:not(.card-link):focus {
      outline: none;
      box-shadow: var(--outline-shadow);
    }
  }
}
.card-body:focus-within :any-link:not(.card-link):hover {
  color: #2c90a8 !important;
}

.card-foot {
  display: grid;
  place-items: center;
}
.card-foot :any-link.card-link {
  color: #eb6a0a;
}

.card-title {
  color: var(--color-title, #2c90a8);
  display: block;
  -webkit-hyphens: none;
  hyphens: none;
}
.card-title .card-link {
  -webkit-text-decoration: none;
  text-decoration: none;
}

.card-body p, .card-body li {
  -webkit-hyphens: auto;
  hyphens: auto;
}

.card-link {
  position: var(--parent-position, unset);
}
.card-link::after {
  position: absolute;
  content: "";
  cursor: pointer;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

.m_card {
  background-color: var(--card-background, var(--panel-background-color));
}

/*! GRID AREA LAYOUTS */
.m_card.-h-b {
  --card-columns: 1fr;
  --card-rows: auto 1fr;
  --card-layout: "h" "b";
}
.m_card.-h-bf {
  --card-columns: auto 1fr;
  --card-rows: 1fr auto;
  --card-layout: "h b" "h f";
}
.m_card.-b-f {
  --card-columns: 1fr;
  --card-rows: 1fr auto;
  --card-layout: "b" "f";
}
.m_card.-h2-b2 {
  --card-columns: 1fr 1fr;
  --card-rows: auto 1fr;
  --card-layout: "h h" "b b";
}
.m_card.-b2-f2 {
  --card-columns: 1fr 1fr;
  --card-rows: auto 1fr;
  --card-layout: "b b" "f f";
}
.m_card.-hbf {
  --card-columns: 1fr 1fr 1fr;
  --card-rows: 5rem 10rem 5rem;
  --card-layout: "h h h" "b b b" "f f f";
}
.m_card.-h2b-f {
  --card-columns: 2fr 3fr 3fr;
  --card-rows: 6rem 10rem 4rem;
  --card-layout: "h h b" "h h b" "f f f";
}
.m_card.-h2b-fb {
  --card-columns: 1fr 1fr 2fr;
  --card-rows: 6rem 10rem 4rem;
  --card-layout: "h h b" "h h b" "f f b";
}
.m_card.-hf-b2 {
  --card-columns: 1fr 1fr 1fr;
  --card-rows: 8rem 6rem 6rem;
  --card-layout: "h h f" "b b b" "b b b";
}
.m_card.-fh-b2 {
  --card-columns: 1fr 1fr 1fr;
  --card-rows: 8rem 6rem 6rem;
  --card-layout: "f h h" "b b b" "b b b";
}

.m_card.-h2b-fb .card-head {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--gutter, var(--gap, 1rem));
}
.m_card.-h2b-fb .card-body {
  display: flex;
  flex-direction: column;
}
.m_card.-h2b-fb .card-body :last-child {
  margin-top: auto;
}
.m_card.-hf-b2 .card-head, 
.m_card.-fh-b2 .card-head {
  display: grid;
  place-content: center;
}

/* card-deck modifier: -deck-duo */
.-deck-duo .card-title {
  text-align: center;
}
.-deck-duo .card-foot {
  padding-top: 1em;
  padding-bottom: 1em;
}

/* card-deck modifier: -deck-trio */
.-deck-trio {
  display: flex;
  flex-wrap: wrap;
}
.-deck-trio .m_card {
  flex: auto;
}
.-deck-trio .card-foot {
  padding-top: 1em;
  padding-bottom: 1em;
}
.-deck-trio .card-title {
  text-align: center;
  text-wrap: unset;
}

@media (min-width: 40em) and (max-width: 49.999em), (min-width: 50em) and (max-width: 63.999em) {
  .-deck-trio .m_card {
    flex-basis: var(--col-item);
  }
  .-deck-trio li.m_card:last-of-type {
    --card-columns: 1fr 1fr;
    --card-layout: "h b" "h f";
    --card-rows: 1fr auto;
    flex-basis: var(--max-content-width);
  }
}
@media (min-width: 64em) {
  .-deck-trio {
    flex-wrap: nowrap;
  }
  .-deck-trio .m_card {
    flex: 1;
  }
}
/* component.cards */
/* card-deck modifier: -deck-quart */
.-deck-quart > .m_card {
  --card-rows: 1fr auto;
}
.-deck-quart .card-body {
  display: grid;
  grid-template-rows: calc(var(--h3-width) * 3 + var(--font-lineheight-1) * 3) auto;
  height: 100%;
}
.-deck-quart .card-foot {
  padding-top: 1em;
  padding-bottom: 1em;
  place-content: start;
  align-self: end;
  padding: 0 var(--space-inside) var(--space-inside) var(--space-inside);
}
@media (min-width: 36em) {
  .-deck-quart > .m_card {
    --card-columns: 1fr 3fr;
    --card-layout: "h b" "h f";
  }
  .-deck-quart > .m_card.-reverse {
    --card-columns: 3fr 1fr;
    --card-layout: "b h" "f h";
  }
}
.-deck-quart .card-body {
  --font-lineheight-3: var(--font-lineheight-2);
}
.-deck-quart .card-body .h3 {
  color: var(--h3-color);
}
.-deck-quart .card-body :is(h4,.h4, h5,.h5, h6,.h6) {
  color: var(--color-title, #2c90a8);
}

@media (max-width: 79.999em) {
  .-deck-quart[class] {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 35.999em) {
  .-deck-quart[class] {
    grid-template-columns: 1fr;
  }
}

@supports not (-moz-appearance: normal) {
  html.css-backdrop .-deck-quart .card-body {
    -webkit-backdrop-filter: saturate(0.4) blur(1em);
    backdrop-filter: saturate(0.4) blur(1em);
  }
}
/* component.cards */
/* card-deck modifier: -deck-slim */

.-deck-slim .card-foot {
  --space-inside: var(--size-3);
  padding: var(--space-inside);
  margin: var(--body-inset, 1ex);
  place-items: start;
  max-width: 100%;
  overflow-x: auto;
}
.-deck-slim .btn,
.-deck-slim :is(button, [type=button], [type=submit], [type=reset]) {
  display: none !important;
}
@media (max-width: 35.999em) {
  .-deck-slim > .m_card,
  .-deck-slim > .m_card.-reverse {
    --card-columns: 1fr;
    --card-rows: auto auto;
    --card-layout: "h" "f";
  }
  .-deck-slim .m_card {
    --body-inset: 1ex;
  }
  .-deck-slim .card-head {
    grid-area: h;
  }
  .-deck-slim .card-body {
    grid-area: h;
    align-self: end;
    justify-self: center;
    box-sizing: content-box;
    background-color: var(--surface-9);
    outline: var(--size-2) solid rgba(249, 249, 249, 0.35);
    margin: calc(var(--body-inset, 1ex) + var(--size-2));
    margin-top: 32cqw;
  }
  .-deck-slim.-square [data-aspect] :is(img, svg, video, canvas) {
    aspect-ratio: 2/1;
  }
  .-deck-slim.-portrait [data-aspect] :is(img, svg, video, canvas) {
    aspect-ratio: 1/1;
  }
}
@media (min-width: 36em) {
  .-deck-slim > .m_card {
    --card-columns: 1fr 3fr;
    --card-layout: "h b" "h f";
  }
  .-deck-slim > .m_card.-reverse {
    --card-columns: 3fr 1fr;
    --card-layout: "b h" "f h";
  }
  .-deck-slim [data-aspect] {
    outline: var(--size-2) solid var(--card-sectioning-background-color, inherit);
    outline-offset: calc(-1 * var(--size-2));
  }
}
.-deck-slim .card-body {
  --font-lineheight-3: var(--font-lineheight-2);
}
.-deck-slim .card-body h3, .-deck-slim .card-body .h3 {
  color: var(--h3-color);
}
.-deck-slim .card-body :is(h4,.h4, h5,.h5, h6,.h6) {
  color: var(--color-title, #2c90a8);
}

@supports not (-moz-appearance: normal) {
  html.css-backdrop .-deck-slim .card-body {
    background-color: rgba(249, 249, 249, 0.65);
    -webkit-backdrop-filter: saturate(0.4) blur(1em);
    backdrop-filter: saturate(0.4) blur(1em);
  }
}
/* Modifier Bildformat AspectRatio Galore */
@supports (aspect-ratio: 1/1) {
  .-square {
    --aspect: 1/1;
    --ratio: 100;
    --factor: 1;
  }
  .-square [data-aspect] :is(img, svg, picture, video) {
    aspect-ratio: var(--aspect);
    height: 100%;
    max-height: 100%;
  }
  .-landscape {
    --aspect: 4/3;
    --ratio: 75;
    --factor: 1.3333333333;
  }
  .-landscape [data-aspect] :is(img, svg, picture, video) {
    aspect-ratio: var(--aspect);
    height: 100%;
    max-height: 100%;
  }
  .-portrait {
    --aspect: 3/4;
    --ratio: 133.3333333333;
    --factor: 0.75;
  }
  .-portrait [data-aspect] :is(img, svg, picture, video) {
    aspect-ratio: var(--aspect);
    height: 100%;
    max-height: 100%;
  }
  .-widescreen {
    --aspect: 16/9;
    --ratio: 56.25;
    --factor: 1.7777777778;
  }
  .-widescreen [data-aspect] :is(img, svg, picture, video) {
    aspect-ratio: var(--aspect);
    height: 100%;
    max-height: 100%;
  }
  .-ultrawide {
    --aspect: 1.85/1;
    --ratio: 54.0540540541;
    --factor: 1.85;
  }
  .-ultrawide [data-aspect] :is(img, svg, picture, video) {
    aspect-ratio: var(--aspect);
    height: 100%;
    max-height: 100%;
  }
  .-golden {
    --aspect: 1.6180339887/1;
    --ratio: 61.803398875;
    --factor: 1.6180339887;
  }
  .-golden [data-aspect] :is(img, svg, picture, video) {
    aspect-ratio: var(--aspect);
    height: 100%;
    max-height: 100%;
  }
  .-double {
    --aspect: 2/1;
    --ratio: 50;
    --factor: 2;
  }
  .-double [data-aspect] :is(img, svg, picture, video) {
    aspect-ratio: var(--aspect);
    height: 100%;
    max-height: 100%;
  }
}
/* Modifier Bildformat Padding Hack */
@supports not (aspect-ratio: 1/1) {
  .square::before {
    content: "";
    display: table;
    clear: both;
    width: 1px;
    margin-left: -1px;
  }
  .square::before {
    float: left;
    padding-bottom: calc(var(--ratio) * 1%);
    background-color: paleturquoise;
  }
  .landscape::before {
    content: "";
    display: table;
    clear: both;
    width: 1px;
    margin-left: -1px;
  }
  .landscape::before {
    float: left;
    padding-bottom: calc(var(--ratio) * 1%);
    background-color: paleturquoise;
  }
  .portrait::before {
    content: "";
    display: table;
    clear: both;
    width: 1px;
    margin-left: -1px;
  }
  .portrait::before {
    float: left;
    padding-bottom: calc(var(--ratio) * 1%);
    background-color: paleturquoise;
  }
  .widescreen::before {
    content: "";
    display: table;
    clear: both;
    width: 1px;
    margin-left: -1px;
  }
  .widescreen::before {
    float: left;
    padding-bottom: calc(var(--ratio) * 1%);
    background-color: paleturquoise;
  }
  .ultrawide::before {
    content: "";
    display: table;
    clear: both;
    width: 1px;
    margin-left: -1px;
  }
  .ultrawide::before {
    float: left;
    padding-bottom: calc(var(--ratio) * 1%);
    background-color: paleturquoise;
  }
  .golden::before {
    content: "";
    display: table;
    clear: both;
    width: 1px;
    margin-left: -1px;
  }
  .golden::before {
    float: left;
    padding-bottom: calc(var(--ratio) * 1%);
    background-color: paleturquoise;
  }
  .double::before {
    content: "";
    display: table;
    clear: both;
    width: 1px;
    margin-left: -1px;
  }
  .double::before {
    float: left;
    padding-bottom: calc(var(--ratio) * 1%);
    background-color: paleturquoise;
  }
}
/* Aspect Ratio Padding Hack */
