.kanon-card {
  box-sizing: border-box;

  position: relative;
  padding: var(--card-padding-xl);
  overflow: clip;
  color: var(--color-foreground);
  background: var(--color-card);
  border-radius: var(--radius);
}

.kanon-card--sm {
  padding: var(--card-padding-sm);
}

.kanon-card--xs {
  padding: var(--card-padding-xs);
}

.kanon-card--glass {
  background: var(--color-card-glass);

  box-shadow: inset 0 0 0 var(--border-width) color-mix(in srgb, var(--color-white) 45%, transparent);
}

.kanon-card__link {
  color: inherit;
  text-decoration: none;
}

.kanon-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.kanon-card:has(.kanon-card__link:focus-visible) {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}

.kanon-card:has(.kanon-card__link:focus-visible) .kanon-card__link:focus-visible {
  outline: none;
}

.kanon-heading {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-synthesis-weight: none;

  letter-spacing: normal;
  color: var(--color-foreground);
}

.kanon-heading--h1 {
  margin-block-end: var(--margin-h1);
  font-size: var(--text-h1);
  line-height: var(--leading-h1);
  letter-spacing: var(--tracking-h1);
}

.kanon-heading--h2 {
  margin-block-end: var(--margin-h2);
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
  letter-spacing: var(--tracking-h2);
}

.kanon-heading--h3 {
  margin-block-end: var(--margin-h3);
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
}

.kanon-heading--h4 {
  margin-block-end: var(--margin-h4);
  font-size: var(--text-h4);
  line-height: var(--leading-h4);
}

.kanon-heading--h5 {
  margin-block-end: var(--margin-h5);
  font-size: var(--text-h5);
  line-height: var(--leading-h5);
}

.kanon-heading--h6 {
  margin-block-end: var(--margin-h6);
  font-size: var(--text-h6);
  line-height: var(--leading-h6);
}

.kanon-eyebrow {
  margin: 0 0 var(--margin-eyebrow);
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  line-height: var(--leading-eyebrow);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-eyebrow);
}

.kanon-eyebrow--badge {
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;

  padding: var(--spacing) calc(var(--spacing) * 1.5 - var(--tracking-label)) var(--spacing) calc(var(--spacing) * 1.5);
  background: var(--color-eyebrow-background);
  border-radius: var(--radius-sm);
  -webkit-backdrop-filter: blur(calc(var(--spacing) / 2));
  backdrop-filter: blur(calc(var(--spacing) / 2));
}

:where(h1, h2, h3).kanon-eyebrow {
  font-weight: var(--font-body-weight);
}

.kanon-text {
  margin: 0 0 var(--margin-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);

  max-width: var(--measure);
  color: var(--color-muted-foreground);
}

.kanon-small {
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  color: var(--color-muted-foreground);
}

.kanon-muted {
  color: var(--color-muted-foreground);
}

:is(.kanon-stack, .kanon-cluster, .kanon-grid, .kanon-split) > :is(.kanon-heading, .kanon-eyebrow, .kanon-text) {
  margin-block-end: 0;
}

.kanon-highlight {
  color: var(--color-heading-muted);
}

.kanon-button {

  --kanon-button-arrow: calc(var(--spacing) * 3);
  --kanon-button-arrow-gap: var(--spacing);
  --kanon-button-padding-inline: max(0px, calc(var(--button-padding-inline) - var(--border-width)));
  --kanon-button-shift: min(var(--kanon-button-padding-inline), calc((var(--kanon-button-arrow) + var(--kanon-button-arrow-gap)) / 2));
  box-sizing: border-box;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: 100%;

  min-height: 0;
  margin: 0;

  padding: calc(var(--button-padding-block) - var(--border-width)) var(--kanon-button-padding-inline);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: calc(var(--spacing) * 4.5);
  color: var(--color-button-foreground);
  background: var(--color-button);
  border: var(--border-width) solid var(--color-button-border);
  border-radius: var(--radius-button);
  text-decoration: none;
  cursor: pointer;
}

.kanon-button[hidden] {
  display: none;
}

.kanon-button::after {
  content: "";
  position: absolute;
  inset: calc(var(--spacing) * -0.75 - var(--border-width)) 0;
}

.kanon-button::before {
  content: "";
  flex: none;
  width: var(--kanon-button-arrow);
  height: var(--kanon-button-arrow);
  margin-inline-start: calc(-1 * (var(--kanon-button-arrow) + var(--kanon-button-arrow-gap)));
  margin-inline-end: var(--kanon-button-arrow-gap);
  background: currentcolor;
  opacity: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") left center / var(--kanon-button-arrow) var(--kanon-button-arrow) no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") left center / var(--kanon-button-arrow) var(--kanon-button-arrow) no-repeat;
}

.kanon-button__label {
  min-width: 0;
  translate: 0;
}

.kanon-button:hover,
.kanon-button:focus-visible,
.kanon-text-card:hover .kanon-button {
  background: var(--color-button-hover);
}

.kanon-button:hover > .kanon-button__label,
.kanon-button:focus-visible > .kanon-button__label,
.kanon-text-card:hover .kanon-button > .kanon-button__label,
.kanon-button:has(> .kanon-button__label):hover::before,
.kanon-button:has(> .kanon-button__label):focus-visible::before,
.kanon-text-card:hover .kanon-button:has(> .kanon-button__label)::before {
  translate: var(--kanon-button-shift) 0;
}

.kanon-button:hover::before,
.kanon-button:focus-visible::before,
.kanon-text-card:hover .kanon-button::before {
  opacity: 1;
}

.kanon-button:disabled,
.kanon-button[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .kanon-button {
    transition: background-color var(--duration) var(--ease);
  }

  .kanon-button::before {
    transition: opacity var(--duration) var(--ease), translate var(--duration) var(--ease);
  }

  .kanon-button__label {
    transition: translate var(--duration) var(--ease);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kanon-button,
  .kanon-button::before,
  .kanon-button__label {
    transition: none;
  }
}

.kanon-contact-button {
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  gap: var(--card-gap);
  width: 100%;
  min-height: var(--kanon-contact-button-min-height, calc(var(--spacing) * 44.75));
  padding: var(--card-padding-xl);
  color: var(--color-contact-foreground);
  text-decoration: none;
  background: var(--color-contact);
  border-radius: var(--radius-image);
}

.kanon-contact-button:hover {
  color: var(--color-contact-foreground-hover);
  background: var(--color-contact-hover);
}

.kanon-contact-button .kanon-contact-button__label {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  color: inherit;

  text-wrap: balance;
}

.kanon-contact-button .kanon-contact-button__icon {
  width: calc(var(--spacing) * 10);
  height: calc(var(--spacing) * 10);
  stroke-width: 1.2;
}

@media (hover: hover) and (pointer: fine) {
  .kanon-contact-button {
    transition: color var(--duration) var(--ease), background-color var(--duration) var(--ease);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kanon-contact-button {
    transition: none;
  }
}

.kanon-arrow-button {
  box-sizing: border-box;
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--spacing) * 7);
  min-width: 0;
  height: calc(var(--spacing) * 7);
  min-height: 0;
  margin: 0;
  padding: 0;
  color: var(--color-inverse-foreground);
  background: var(--color-inverse);
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.kanon-arrow-button::after {
  content: "";
  position: absolute;
  inset: calc(var(--spacing) * -2);
}

.kanon-arrow-button > .kanon-icon {
  width: calc(var(--spacing) * 4);
  height: calc(var(--spacing) * 4);
}

.kanon-arrow-button:hover {
  background: color-mix(in srgb, var(--color-inverse), var(--color-inverse-foreground) 20%);
}

.kanon-arrow-button:disabled,
.kanon-arrow-button[aria-disabled="true"] {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .kanon-arrow-button {
    transition: background-color var(--duration) var(--ease), opacity var(--duration) var(--ease);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kanon-arrow-button {
    transition: none;
  }
}

.kanon-arrow-pair {
  display: flex;
  justify-content: center;
  gap: var(--gap-sm);
}

.kanon-arrow-pair > .kanon-arrow-button:first-child::after {
  inset-inline: calc(var(--spacing) * -2 - var(--gap-sm) / 2) calc(var(--gap-sm) / -2);
}

.kanon-arrow-pair > .kanon-arrow-button:last-child::after {
  inset-inline: calc(var(--gap-sm) / -2) calc(var(--spacing) * -2 - var(--gap-sm) / 2);
}

.kanon-icon {
  flex: none;
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kanon-stack {
  display: flex;
  flex-direction: column;
  gap: var(--kanon-gap, var(--gap-md));
}

.kanon-stack--sm {
  --kanon-gap: var(--gap-sm);
}

.kanon-stack--md {
  --kanon-gap: var(--gap-md);
}

.kanon-stack--lg {
  --kanon-gap: var(--gap-lg);
}

.kanon-stack--xl {
  --kanon-gap: calc(var(--spacing) * 10);
}

.kanon-stack--center {
  align-items: center;
  text-align: center;
}

.kanon-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kanon-gap, var(--gap-sm));
}

.kanon-cluster--sm {
  --kanon-gap: var(--gap-sm);
}

.kanon-cluster--md {
  --kanon-gap: var(--gap-md);
}

.kanon-cluster--lg {
  --kanon-gap: var(--gap-lg);
}

.kanon-cluster--xl {
  --kanon-gap: calc(var(--spacing) * 10);
}

.kanon-cluster > * {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.kanon-grid {
  --kanon-col-min: calc(var(--container) / max(4, var(--kanon-columns, 3) + 1));
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(
      max(
        min(100%, var(--kanon-col-min)),
        calc((100% - (var(--kanon-columns, 99) - 1) * var(--kanon-gap, var(--gap-md))) / var(--kanon-columns, 99))
      ),
      1fr
    )
  );
  gap: var(--kanon-gap, var(--gap-md));
}

.kanon-grid--cols-2 {
  --kanon-columns: 2;
}

.kanon-grid--cols-3 {
  --kanon-columns: 3;
}

.kanon-grid--cols-4 {
  --kanon-columns: 4;
}

.kanon-grid--sm {
  --kanon-gap: var(--gap-sm);
}

.kanon-grid--md {
  --kanon-gap: var(--gap-md);
}

.kanon-grid--lg {
  --kanon-gap: var(--gap-lg);
}

.kanon-grid--featured {
  --kanon-columns: 2;
}

.kanon-grid--featured > :first-child {
  grid-row: span 2;
}

.kanon-grid--featured-top {
  --kanon-columns: 2;
}

.kanon-grid--featured-top > :first-child {
  grid-column: 1 / -1;
}

.kanon-grid--masonry {

  --kanon-masonry-gap: var(--kanon-gap, var(--gap-md));
  display: block;
  columns: 3 var(--kanon-col-min);
  column-gap: var(--kanon-masonry-gap);
}

.kanon-grid--masonry > * {
  break-inside: avoid;
  margin-block-end: var(--kanon-masonry-gap);
}

.kanon-grid.kanon-grid--masonry > :where(img) {
  aspect-ratio: 16 / 9;
}

.kanon-grid.kanon-grid--masonry > :where(img):is(:nth-child(4n + 1), :nth-child(4n)) {
  aspect-ratio: 1 / 1;
}

.kanon-split {
  --kanon-threshold: calc(var(--container) / 2);
  display: flex;
  flex-wrap: wrap;

  align-items: flex-start;
  gap: var(--kanon-gap, var(--gap-md));
}

.kanon-split > * {
  flex: 1 1 calc((var(--kanon-threshold) - 100%) * 999);
  min-width: 0;
}

.kanon-split--stretch {
  align-items: stretch;
}

.kanon-split--center {
  align-items: center;
}

.kanon-split--wide-narrow > :first-child {
  flex-grow: 2;
}

.kanon-split--narrow-wide > :last-child {
  flex-grow: 2;
}

.kanon-split--2-3 > :first-child {
  flex-grow: 2;
}

.kanon-split--2-3 > :last-child {
  flex-grow: 3;
}

.kanon-split--none {
  --kanon-gap: var(--gap-none);
}

.kanon-split--sm {
  --kanon-gap: var(--gap-sm);
}

.kanon-split--lg {
  --kanon-gap: var(--gap-lg);
}

.kanon-split--xl {
  --kanon-gap: var(--gap-xl);
}

.kanon-split--2xl {
  --kanon-gap: var(--gap-2xl);
}

.kanon-split--reverse {
  flex-direction: row-reverse;
}

.kanon-section {
  box-sizing: border-box;
  padding-block: var(--section-padding-md);
}

.kanon-section--sm {
  padding-block: var(--section-padding-sm);
}

.kanon-section--lg {
  padding-block: var(--section-padding-lg);
}

.kanon-section--none {
  padding-block: 0;
}

.kanon-container {
  box-sizing: border-box;

  width: 100%;
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 6);
  padding-inline: var(--section-padding-inline);

  max-width: calc(var(--container) + var(--section-padding-inline) * 2);
  margin-inline: auto;
}

.kanon-container--flush {
  gap: 0;
}

.kanon-container--narrow {
  max-width: calc(var(--container-narrow) + var(--section-padding-inline) * 2);
}

.kanon-section-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  margin: 0;
}

.kanon-section-header--center {
  align-items: center;
  text-align: center;
}

.kanon-section-header > * {
  max-width: 100%;
}

.kanon-section-header > .kanon-heading {
  align-self: stretch;
}

.kanon-section-header > .kanon-text {
  max-width: min(100%, var(--measure));
}

.kanon-container:not(.kanon-container--flush) > .kanon-section-header:not(.kanon-section-header--split) > :last-child {
  margin-block-end: 0;
}

.kanon-section-header--split {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--gap-lg);
}

.kanon-section-header--split > .kanon-heading {
  flex: 1 1 auto;
  align-self: auto;
  min-width: 0;
  max-width: none;
}

.kanon-section-header--split > .kanon-text {
  flex: 0 1 var(--measure);
  max-width: var(--measure);
}

.kanon-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--kanon-bildformat, 3 / 2);
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-image);
}

.kanon-image--top {
  object-position: top;
}

.kanon-image--bottom {
  object-position: bottom;
}

.kanon-image--left {
  object-position: left;
}

.kanon-image--right {
  object-position: right;
}

.kanon-figure {
  display: block;
  margin: 0;
}

.kanon-image,
.kanon-figure {

  --kanon-image-max-height: 30rem;
  max-width: min(var(--measure), calc(var(--kanon-image-max-height) * var(--kanon-bildformat, 3 / 2)));
}

.kanon-image--full {
  max-width: none;
}

.kanon-image--fill {
  width: 100%;
  max-width: none;
  height: 0;
  min-height: 100%;
  aspect-ratio: auto;
}

.kanon-image--cover {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
}

.kanon-figure--full {
  max-width: none;
}

:is(.kanon-grid, .kanon-split, .kanon-carousel__track, .kanon-card, .kanon-figure) > .kanon-image,
:is(.kanon-grid, .kanon-split, .kanon-carousel__track, .kanon-card) > .kanon-figure {
  max-width: none;
}

.kanon-figure > figcaption {
  margin-top: calc(var(--spacing) * 2);
}

.kanon-rating {

  --kanon-star: calc(var(--spacing) * 4.5);
  --kanon-star-gap: var(--spacing);
  flex: none;
  display: inline-block;
  width: calc(var(--kanon-star) * 5 + var(--kanon-star-gap) * 4);
  height: calc(var(--kanon-star) * 0.9583);

  background: linear-gradient(to right, var(--color-star) var(--kanon-rating-fill, 100%), var(--color-star-empty) var(--kanon-rating-fill, 100%));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3.443 3.5725 17.114 16.356' preserveAspectRatio='none'%3E%3Cpath d='M12 17.27l4.15 2.51c.76.46 1.69-.22 1.49-1.08l-1.1-4.72 3.67-3.18c.67-.58.31-1.68-.57-1.75l-4.83-.41-1.89-4.46c-.34-.81-1.5-.81-1.84 0L9.19 8.63l-4.83.41c-.88.07-1.24 1.17-.57 1.75l3.67 3.18-1.1 4.72c-.2.86.73 1.54 1.49 1.08l4.15-2.5z'/%3E%3C/svg%3E") left center / var(--kanon-star) 100% space no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3.443 3.5725 17.114 16.356' preserveAspectRatio='none'%3E%3Cpath d='M12 17.27l4.15 2.51c.76.46 1.69-.22 1.49-1.08l-1.1-4.72 3.67-3.18c.67-.58.31-1.68-.57-1.75l-4.83-.41-1.89-4.46c-.34-.81-1.5-.81-1.84 0L9.19 8.63l-4.83.41c-.88.07-1.24 1.17-.57 1.75l3.67 3.18-1.1 4.72c-.2.86.73 1.54 1.49 1.08l4.15-2.5z'/%3E%3C/svg%3E") left center / var(--kanon-star) 100% space no-repeat;
  vertical-align: middle;
}

.kanon-rating--0 {
  --kanon-rating-fill: 0;
}

.kanon-rating--0-5 {
  --kanon-rating-fill: calc(var(--kanon-star) * 0.5 + var(--kanon-star-gap) * 0);
}

.kanon-rating--1 {
  --kanon-rating-fill: calc(var(--kanon-star) * 1 + var(--kanon-star-gap) * 1);
}

.kanon-rating--1-5 {
  --kanon-rating-fill: calc(var(--kanon-star) * 1.5 + var(--kanon-star-gap) * 1);
}

.kanon-rating--2 {
  --kanon-rating-fill: calc(var(--kanon-star) * 2 + var(--kanon-star-gap) * 2);
}

.kanon-rating--2-5 {
  --kanon-rating-fill: calc(var(--kanon-star) * 2.5 + var(--kanon-star-gap) * 2);
}

.kanon-rating--3 {
  --kanon-rating-fill: calc(var(--kanon-star) * 3 + var(--kanon-star-gap) * 3);
}

.kanon-rating--3-5 {
  --kanon-rating-fill: calc(var(--kanon-star) * 3.5 + var(--kanon-star-gap) * 3);
}

.kanon-rating--4 {
  --kanon-rating-fill: calc(var(--kanon-star) * 4 + var(--kanon-star-gap) * 4);
}

.kanon-rating--4-5 {
  --kanon-rating-fill: calc(var(--kanon-star) * 4.5 + var(--kanon-star-gap) * 4);
}

.kanon-rating--5 {
  --kanon-rating-fill: calc(var(--kanon-star) * 5 + var(--kanon-star-gap) * 5);
}

.kanon-rating-line {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
  max-width: 100%;
  margin: 0;
  padding: calc(var(--spacing) * 2);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-muted-foreground);
  text-decoration: none;
}

a.kanon-rating-line:hover .kanon-rating-line__text {
  text-decoration: underline;
}

.kanon-rating-line--stacked {
  flex-direction: column;
  gap: calc(var(--spacing) * 2);
  text-align: center;
}

.kanon-rating-line--on-image {
  color: var(--color-white);
}

.kanon-rating-line__text {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
}

.kanon-rating-line__text > .kanon-icon {
  width: calc(var(--spacing) * 4);
  height: calc(var(--spacing) * 4);
}

.kanon-icon-tile {
  box-sizing: border-box;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--spacing) * 12);
  height: calc(var(--spacing) * 12);
  padding: calc(var(--spacing) * 2);
  color: var(--color-inverse-foreground);
  background: var(--color-inverse);
  border-radius: var(--radius-image);
}

.kanon-icon-tile > .kanon-icon {
  width: 100%;
  height: 100%;
  stroke-width: 1;
}

.kanon-avatar {
  box-sizing: border-box;
  flex: none;
  display: inline-grid;
  place-items: center;
  width: calc(var(--spacing) * 9.5);
  height: calc(var(--spacing) * 9.5);
  overflow: hidden;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: 1;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--color-button-foreground);
  background: var(--color-button);
  border-radius: var(--radius-full);
}

.kanon-separator {
  flex: none;
  width: 100%;
  height: 1px;
  margin: 0;
  background: var(--color-border);
  border: 0;
}

.kanon-separator--vertical {
  align-self: stretch;
  width: 1px;
  height: auto;
}

.kanon-skip-link {
  position: absolute;
  inset-block-start: calc(var(--spacing) * 2 + var(--kanon-kopf-versatz, 0px));
  inset-inline-start: calc(var(--spacing) * 2);
  z-index: 30;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 calc(var(--spacing) * 4);
  color: var(--color-foreground);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  box-shadow: var(--shadow);
  transform: translateY(calc(-100% - calc(var(--spacing) * 4)));
}

.kanon-skip-link:focus {
  transform: none;
}

.kanon-stats-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--card-gap);
  margin: 0;
  border-radius: var(--radius-image);
}

.kanon-stats-card > :is(.kanon-heading, .kanon-eyebrow) {
  margin: 0;
}

.kanon-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacing) * 6);
  margin: 0;

  padding: var(--card-padding-xs) var(--card-padding-xs) calc(var(--card-padding-xs) - var(--border-width));
  border-bottom: var(--border-width) solid var(--color-border);
}

.kanon-stat > :is(.kanon-heading, .kanon-eyebrow) {
  margin: 0;
}

:is(.kanon-stat, .kanon-stats-card) > .kanon-eyebrow {
  overflow-wrap: normal;
}

.kanon-stat__count {
  font-variant-numeric: tabular-nums;
}

.kanon-image-card {

  --kanon-image-card-zoom: 1.04;
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.kanon-image-card__media {
  flex: 1 0 auto;

  width: 100%;
  aspect-ratio: var(--kanon-bildformat, 1 / 1);
  overflow: clip;
  border-radius: var(--radius);
}

.kanon-image-card:hover .kanon-image-card__media > .kanon-image {
  transform: scale(var(--kanon-image-card-zoom));
}

.kanon-image-card__body {
  box-sizing: border-box;
  min-width: 0;
  padding: var(--card-padding-sm) var(--card-padding-xs) var(--card-padding-xs);
}

.kanon-image-card__body > .kanon-text {
  max-width: none;
}

.kanon-image-card--horizontal {
  flex-direction: row;
  padding: calc(var(--spacing) * 2);
}

.kanon-image-card--horizontal > .kanon-image-card__media {
  flex: 1 1 50%;
  width: auto;

  min-height: var(--kanon-image-card-media-min, calc(var(--spacing) * 58.5));
  aspect-ratio: auto;
}

.kanon-image-card--horizontal > .kanon-image-card__body {
  flex: 1 1 50%;

  min-width: var(--kanon-image-card-body-min, min(100%, calc(var(--spacing) * 52)));
}

.kanon-image-card--fill {
  min-height: var(--kanon-image-card-min-height, calc(var(--spacing) * 87.5));
}

.kanon-image-card--fill > .kanon-image-card__media {
  flex: 1 1 calc(var(--spacing) * 35);
  aspect-ratio: auto;
}

@media (max-width: 47.999rem) {

  .kanon-image-card--fill-narrow {
    min-height: var(--kanon-image-card-min-height, calc(var(--spacing) * 87.5));
  }

  .kanon-image-card--fill-narrow > .kanon-image-card__media {
    flex: 1 1 calc(var(--spacing) * 35);
    aspect-ratio: auto;
  }

  .kanon-image-card--stack-narrow {
    flex-direction: column;
    min-height: var(--kanon-image-card-min-height, calc(var(--spacing) * 87.5));
    padding: 0;
  }

  .kanon-image-card--stack-narrow > .kanon-image-card__media {
    flex: 1 1 calc(var(--spacing) * 35);
    width: 100%;
    min-height: 0;
  }

  .kanon-image-card--stack-narrow > .kanon-image-card__body {
    flex: 0 0 auto;
  }
}

@media (hover: hover) and (pointer: fine) {
  .kanon-image-card__media > .kanon-image {
    transition: transform var(--duration) var(--ease);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kanon-image-card__media > .kanon-image {
    transition: none;
  }
}

.kanon-icon-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--card-gap);
  min-width: 0;
}

.kanon-icon-card__body {
  width: 100%;
  min-width: 0;
}

.kanon-icon-card__body > .kanon-text {
  max-width: none;
}

.kanon-icon-card:hover {
  background: var(--color-card-hover);
}

@media (hover: hover) and (pointer: fine) {
  .kanon-icon-card {
    transition: background-color var(--duration) var(--ease);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kanon-icon-card {
    transition: none;
  }
}

.kanon-text-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.kanon-text-card > * {
  max-width: 100%;
}

.kanon-text-card:hover {
  background: var(--color-card-hover);
}

.kanon-text-card--outline,
.kanon-text-card--outline:hover {
  background: transparent;
  border: var(--border-width-strong) solid var(--color-border);
}

.kanon-text-card--outline > .kanon-eyebrow {
  color: var(--color-heading-muted);
}

@media (hover: hover) and (pointer: fine) {
  .kanon-text-card {
    transition: background-color var(--duration) var(--ease);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kanon-text-card {
    transition: none;
  }
}

.kanon-quote-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--card-gap);
  min-width: 0;
  margin: 0;
  padding: var(--card-padding-sm);
}

.kanon-quote-card__mark {
  width: calc(var(--spacing) * 5.85);
  height: calc(var(--spacing) * 5.125);
  fill: currentcolor;
  stroke: none;
}

.kanon-quote-card__rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 4);
  margin: 0;
}

.kanon-quote-card__rating > .kanon-heading {
  margin: 0;
  white-space: nowrap;
}

.kanon-quote-card__quote {
  width: 100%;
  margin: 0;
}

.kanon-quote-card[data-kanon-clamped]:not([data-kanon-open]) [data-kanon="zitattext"] {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--kanon-quote-lines, 5);
  line-clamp: var(--kanon-quote-lines, 5);
  overflow: hidden;
}

.kanon-quote-card .kanon-quote-card__more {
  position: relative;

  margin: calc(var(--card-gap) * -1) 0 0;
  min-height: 0;
  padding-inline: 0;
  padding-block-start: 0;
  font-family: var(--font-body);
  border: 0;
  background-color: transparent;
  background-size: 100% var(--kanon-link-line);
  cursor: pointer;
}

.kanon-quote-card .kanon-quote-card__more:disabled {
  cursor: default;
}

.kanon-quote-card .kanon-quote-card__more::after {
  content: "";
  position: absolute;
  inset: calc(var(--spacing) * -3.25) calc(var(--spacing) * -2);
}

.kanon-quote-card__footer {
  display: flex;
  align-items: flex-start;
  gap: var(--card-gap);
  width: 100%;
  margin-top: auto;
}

.kanon-quote-card__who {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) / 2);
  min-width: 0;
}

.kanon-quote-card__who > .kanon-small {
  color: var(--color-foreground);
}

a.kanon-quote-card__author {
  display: inline-flex;

  align-self: flex-start;
  align-items: center;
  gap: var(--spacing);
  text-decoration: none;
}

a.kanon-quote-card__author:hover > [data-kanon="autor"] {
  text-decoration: underline;
}

.kanon-quote-card__external {
  flex: none;
  width: 1em;
  height: 1em;
}

.kanon-fact-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: var(--kanon-fact-card-width, calc(var(--spacing) * 43.75));
  max-width: 100%;
  margin: 0;
  padding: var(--card-padding-xs);
}

.kanon-fact-card::after {
  content: "";
  position: absolute;
  inset-block-start: calc(var(--spacing) * 2);
  inset-inline-end: calc(var(--spacing) * 2);
  width: calc(var(--spacing) * 4);
  height: calc(var(--spacing) * 4);
  background: var(--color-primary-400);
  border-radius: var(--radius-sm);
}

.kanon-fact-card > .kanon-heading {
  white-space: nowrap;
}

.kanon-fact-card > .kanon-text {
  margin: 0;
}

.kanon-contact-item {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--spacing) * 4);
  min-width: 0;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-muted-foreground);
  text-decoration: none;
}

.kanon-contact-item > .kanon-icon {
  width: calc(var(--spacing) * 4);
  height: calc(1em * var(--leading-body));
  color: var(--color-icon);
}

a.kanon-contact-item:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

.kanon-contact-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: var(--card-padding-sm);
  border-radius: var(--radius-image);
}

.kanon-contact-card--dark {
  background: var(--color-background);
}

.kanon-contact-card--light {
  background: var(--color-card-hover);
}

.kanon-contact-card--tonal.kanon-contact-card--light {
  background: var(--color-background-white);
}

.kanon-contact-card--tonal.kanon-contact-card--dark {
  background: var(--color-card);
}

.kanon-contact-card__items {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 1.5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.kanon-contact-card__lines {
  font-style: normal;
}

.kanon-contact-card__lines > span {
  display: block;
}

.kanon-check-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.kanon-check-list--pill {
  flex-flow: row wrap;
  justify-content: center;
}

.kanon-check {
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: calc(var(--spacing) * 4);
  max-width: 100%;
  padding: calc(var(--spacing) * 2);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-eyebrow);
  background: var(--color-eyebrow-background);
  border-radius: var(--radius-sm);
}

.kanon-check-list--pill > .kanon-check {
  padding-inline: calc(var(--spacing) * 3);
  border-radius: var(--radius-full);
}

.kanon-check > .kanon-icon {
  width: calc(var(--spacing) * 4);
  height: calc(1em * var(--leading-body));
}

.kanon-accordion-item {

  --kanon-accordion-tile: calc(var(--spacing) * 6);
  --kanon-accordion-gap: calc(var(--spacing) * 6);
  box-sizing: border-box;

  padding: var(--card-padding-xs) var(--card-padding-xs) calc(var(--card-padding-xs) - var(--border-width));
  border-bottom: var(--border-width) solid var(--color-border);
}

.kanon-accordion-item__summary {
  box-sizing: border-box;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--kanon-accordion-tile);
  align-items: start;
  column-gap: var(--kanon-accordion-gap);
  cursor: pointer;
  list-style: none;
}

.kanon-accordion-item__summary::-webkit-details-marker {
  display: none;
}

.kanon-accordion-item__summary::before {
  content: "";
  position: absolute;
  inset: calc(var(--card-padding-xs) * -1);
  min-height: 44px;
}

.kanon-accordion-item__summary::after {
  content: "";
  grid-area: 1 / 2 / 2 / 3;
  justify-self: end;
  width: var(--kanon-accordion-tile);
  height: var(--kanon-accordion-tile);
  background: var(--color-foreground);
  border-radius: var(--radius-sm);
}

.kanon-accordion-item[open] > .kanon-accordion-item__summary::after {
  background: var(--color-link);
}

.kanon-accordion-item__icon {
  grid-area: 1 / 2 / 2 / 3;
  justify-self: end;
  z-index: 1;
  width: calc(var(--spacing) * 4);
  height: calc(var(--spacing) * 4);
  margin: var(--spacing);
  color: var(--color-inverse-foreground);
}

.kanon-accordion-item[open] .kanon-accordion-item__icon {
  transform: rotate(45deg);
}

.kanon-accordion-item__content {
  max-width: none;
  margin: 0;
  padding: 0 0 calc(var(--spacing) * 3);
}

.kanon-accordion-item__content > :where(p):last-child {
  margin-block-end: 0;
}

@container (min-width: 40rem) {
  .kanon-accordion-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--kanon-accordion-tile);
    column-gap: var(--kanon-accordion-gap);
  }

  .kanon-accordion-item > .kanon-accordion-item__summary {
    grid-area: 1 / 1 / 2 / -1;
    grid-template-columns: subgrid;
  }

  .kanon-accordion-item > .kanon-accordion-item__summary::after,
  .kanon-accordion-item > .kanon-accordion-item__summary > .kanon-accordion-item__icon {
    grid-area: 1 / 3 / 2 / 4;
  }

  .kanon-accordion-item::details-content {
    grid-area: 1 / 2 / 2 / 3;
  }

  .kanon-accordion-item > .kanon-accordion-item__content {
    padding-top: var(--card-gap);
  }
}

@media (hover: hover) and (pointer: fine) {
  .kanon-accordion-item__summary::after {
    transition: background-color var(--duration) var(--ease);
  }

  .kanon-accordion-item__icon {
    transition: transform var(--duration) var(--ease);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kanon-accordion-item__summary::after,
  .kanon-accordion-item__icon {
    transition: none;
  }
}

.kanon-text-with-image {

  --kanon-threshold: calc(var(--container) / 4);

  --kanon-text-with-image-height: calc(var(--spacing) * 150);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--kanon-threshold)), 1fr));
  gap: var(--gap-lg);

  container-type: inline-size;
}

.kanon-text-with-image__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.kanon-text-with-image__media {
  position: relative;

  width: 100%;
  min-width: 0;
  min-height: clamp(calc(var(--spacing) * 57.5), calc((100cqi - var(--kanon-threshold) * 2 - var(--gap-lg)) * 999), var(--kanon-text-with-image-height));
}

.kanon-text-with-image--left > .kanon-text-with-image__media {
  order: -1;
}

.kanon-text-with-image {
  grid-auto-rows: max-content auto;
}

.kanon-text-with-image--left {
  grid-auto-rows: auto max-content;
}

.kanon-text-with-image--bottom {
  grid-template-columns: minmax(0, 1fr);
}

.kanon-text-with-image--bottom > .kanon-text-with-image__media {
  --kanon-text-with-image-height: calc(var(--spacing) * 123.5);
}

.kanon-carousel {
  display: flex;
  flex-direction: column;

  gap: calc(var(--spacing) * 6);
  min-width: 0;

  container-type: inline-size;
}

.kanon-carousel--single {
  --kanon-carousel-item: 100cqi;
}

.kanon-carousel--multi {
  --kanon-carousel-item: max(min(100cqi, calc(var(--container) / 4)), calc((100cqi - var(--gap-md) * 2) / 3));
}

.kanon-carousel--stage {

  --kanon-carousel-item: min(82cqi, calc(var(--spacing) * 112));
  --kanon-carousel-item-rest: min(var(--kanon-carousel-item), calc(var(--spacing) * 65));
  --kanon-carousel-gap: var(--gap-lg);
}

.kanon-carousel--uniform {
  --kanon-carousel-item-rest: var(--kanon-carousel-item);
}

.kanon-carousel__track {

  position: relative;
  box-sizing: border-box;
  display: flex;

  justify-content: safe center;
  gap: var(--kanon-carousel-gap, var(--gap-md));
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
}

.kanon-carousel__track > * {
  flex: none;
  box-sizing: border-box;
  width: var(--kanon-carousel-item);
  scroll-snap-align: start;
}

.kanon-carousel--stage > .kanon-carousel__track {
  align-items: center;
  justify-content: flex-start;
  padding-inline: calc(50cqi - var(--kanon-carousel-item) / 2);
}

.kanon-carousel--stage > .kanon-carousel__track > * {
  --kanon-stage-away: max(var(--kanon-stage-distance, 0), var(--kanon-stage-distance, 0) * -1);
  --kanon-stage-ratio: tan(atan2(var(--kanon-carousel-item-rest), var(--kanon-carousel-item)));
  width: var(--kanon-carousel-item);
  scroll-snap-align: center;
  scale: max(0.4, var(--kanon-stage-ratio) + (1 - var(--kanon-stage-ratio)) * var(--kanon-stage-focus, 0) - var(--kanon-stage-shrink, 0) * var(--kanon-stage-away));
  translate:
    calc(
      (var(--kanon-carousel-item) - var(--kanon-carousel-item-rest)) * (clamp(-1, var(--kanon-stage-distance, 0), 1) / 2 - var(--kanon-stage-distance, 0))
      - var(--kanon-carousel-item) * var(--kanon-stage-shrink, 0) * var(--kanon-stage-distance, 0) * var(--kanon-stage-away) / 2
    )
    0;
}

.kanon-carousel--stage[data-kanon-looping] > .kanon-carousel__track {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-items: center;
  padding-inline: 0;
  overflow-x: clip;
  scroll-snap-type: none;

  touch-action: pan-y;
}

.kanon-carousel--stage[data-kanon-looping] > .kanon-carousel__track > * {
  grid-area: 1 / 1;
  opacity: var(--kanon-stage-opacity, 0);
  translate:
    calc(
      (var(--kanon-carousel-item) + var(--kanon-carousel-gap, var(--gap-md))) * var(--kanon-stage-distance, 0)
      + (var(--kanon-carousel-item) - var(--kanon-carousel-item-rest)) * (clamp(-1, var(--kanon-stage-distance, 0), 1) / 2 - var(--kanon-stage-distance, 0))
      - var(--kanon-carousel-item) * var(--kanon-stage-shrink, 0) * var(--kanon-stage-distance, 0) * var(--kanon-stage-away) / 2
    )
    0;
}

.kanon-carousel--stage[data-kanon-bereit="true"]:not(.kanon-carousel--static) > .kanon-carousel__track {
  scroll-snap-type: none;
}

.kanon-carousel--static > .kanon-carousel__track {
  justify-content: safe center;
  padding-inline: 0;
}

.kanon-carousel--static > .kanon-carousel__track > * {
  width: var(--kanon-carousel-item);
  scale: none;
  translate: none;
}

.kanon-carousel[data-kanon-bereit="true"] .kanon-carousel__track {
  scrollbar-width: none;
}

.kanon-carousel[data-kanon-bereit="true"] .kanon-carousel__track::-webkit-scrollbar {
  display: none;
}

.kanon-carousel__track[data-kanon-gleitet] {
  scroll-snap-type: none;
}

.kanon-carousel--stage[data-kanon-highlight] .kanon-carousel__track :is(*, ::before, ::after) {
  transition: color calc(var(--duration-slide) / 2) ease-in-out, background-color calc(var(--duration-slide) / 2) ease-in-out;
}

.kanon-carousel__nav[hidden] {
  display: none;
}

.kanon-carousel__status {
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .kanon-carousel--stage[data-kanon-highlight] .kanon-carousel__track :is(*, ::before, ::after) {
    transition: none;
  }
}

.kanon-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.kanon-link {

  --kanon-link-line: calc(var(--border-width) * 1.5);
  padding-block-end: calc(var(--spacing) / 2 + var(--kanon-link-line));

  font-size: var(--text-body);
  line-height: calc(var(--spacing) * 4.5);
  color: var(--color-link);
  text-decoration: none;
  background: linear-gradient(currentcolor, currentcolor) left bottom / var(--border-width) var(--kanon-link-line) no-repeat;
}

.kanon-link:hover {
  color: var(--color-link-hover);
  background-size: 100% var(--kanon-link-line);
}

.kanon-link--plain {
  padding-block-end: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  background: none;
}

.kanon-link--plain:hover {
  text-decoration: underline;
}

.kanon-link--underline {
  background-size: 100% var(--kanon-link-line);
}

:is(p, .kanon-text, .kanon-small, .kanon-muted) .kanon-link {
  font-size: inherit;
  line-height: inherit;
  background-size: 100% var(--kanon-link-line);
}

:is(h1, h2, h3, h4, h5, h6, .kanon-heading) > .kanon-link {
  font-size: inherit;
  line-height: inherit;
}

@media (hover: hover) and (pointer: fine) {
  .kanon-link {
    transition: color var(--duration) var(--ease), background-size var(--duration) var(--ease);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kanon-link {
    transition: none;
  }
}

:where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight, bold);
  font-synthesis-weight: none;
  margin-block: 0 calc(var(--spacing) * 2);
}

:where(h1) {
  font-size: var(--text-h1);
  line-height: var(--leading-h1);
  letter-spacing: var(--tracking-h1);
}

:where(h2) {
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
  letter-spacing: var(--tracking-h2);
}

:where(h3) {
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
}

:where(h4) {
  font-size: var(--text-h4);
  line-height: var(--leading-h4);
}

:where(h5) {
  font-size: var(--text-h5);
  line-height: var(--leading-h5);
}

:where(h6) {
  font-size: var(--text-h6);
  line-height: var(--leading-h6);
}

:where(p) {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  margin-block: 0 calc(var(--spacing) * 2);
}

:where(small) {
  font-size: var(--text-eyebrow);
}

:where(ul, ol) {
  margin-block: 0 calc(var(--spacing) * 2);
  padding-inline-start: calc(var(--spacing) * 6);
}

:where(a) {
  color: inherit;
  text-decoration-line: underline;
}

:where(a:not([class]):hover) {
  text-decoration-thickness: 2px;
}

:where(button) {
  box-sizing: border-box;
  min-height: 44px;
  padding: 0 calc(var(--spacing) * 4);

  font-family: var(--font-body);
  font-size: inherit;
  font-style: inherit;
  line-height: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  cursor: pointer;
}

:where(button:focus-visible, a:focus-visible) {
  outline: 2px solid;

  outline-color: var(--color-ring, currentcolor);
  outline-offset: 2px;
}

:where([data-theme=dark], [data-theme=light]) {
  color: var(--color-foreground);
  background-color: var(--color-background);
}

:where(.kanon-section, .kanon-header, .kanon-mobilnav, .kanon-footer)
  :where(h2, h3, h4, p, ul, ol, dl, dd, dt, figure, figcaption, blockquote, address) {
  margin: 0;
  padding: 0;
}

:where(.kanon-section, .kanon-header, .kanon-mobilnav, .kanon-footer) :where(ul, ol) {
  list-style: none;
}

:where(.kanon-stack, .kanon-cluster, .kanon-grid, .kanon-split) > :where(h1, h2, h3, h4, p, ul, ol, dl, figure, blockquote) {
  margin: 0;
}

:where(.kanon-stack, .kanon-cluster, .kanon-grid, .kanon-split) > * {
  --kanon-gap: initial;
  --kanon-columns: initial;
}

:where(
  ul.kanon-stack, ol.kanon-stack,
  ul.kanon-cluster, ol.kanon-cluster,
  ul.kanon-grid, ol.kanon-grid,
  ul.kanon-split, ol.kanon-split
) {
  margin: 0;
  padding: 0;
  list-style: none;
}

:where(body) {
  margin: 0;
  background: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-body);

  font-weight: var(--font-body-weight);

  overflow-wrap: break-word;
}

:is(.kanon-section, .kanon-header, .kanon-mobilnav, .kanon-footer, .kanon-hero) :focus-visible,
.kanon-button:focus-visible,
.kanon-link:focus-visible,
.kanon-contact-button:focus-visible,
.kanon-contact-item:focus-visible,
.kanon-contact-card :focus-visible,
.kanon-arrow-button:focus-visible,
.kanon-skip-link:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}

.kanon-logo__mark,
.kanon-logo__name {
  pointer-events: auto;
}

.kanon-logo__mark {

  flex: none;
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;

  max-height: var(--kanon-logo-height);
}

.kanon-logo__name {
  min-width: 0;
  font-family: var(--font-heading);
  font-synthesis-weight: none;
  color: var(--color-foreground);

  overflow-wrap: break-word;
}

.kanon-logo__name .kanon-highlight,
.kanon-footer__wortmarke .kanon-highlight {
  color: var(--wordmark-highlight);
}

.kanon-logo__mark--on-dark,
[data-theme="dark"] .kanon-logo__mark--on-light {
  display: none;
}

[data-theme="dark"] .kanon-logo__mark--on-dark {
  display: block;
}

[data-kanon-marke] {
  --kanon-logo-height: 2.25rem;
  --kanon-logo-max-width: 15rem;
}

[data-kanon-marke="logo"] {
  --kanon-logo-height: 3rem;
}

@media (min-width: 64rem) {
  [data-kanon-marke] {
    --kanon-logo-height: 2.5rem;
  }

  [data-kanon-marke="logo"] {
    --kanon-logo-height: 3.5rem;
  }
}

html:has(.kanon-header) {
  --kanon-kopfhoehe: calc(2.5rem + var(--spacing) * 8);
  --kanon-kopf-versatz: 0px;
  scroll-padding-top: calc(var(--kanon-kopfhoehe) + var(--kanon-kopf-versatz));
}

.kanon-header,
.kanon-header * {
  box-sizing: border-box;
}

.kanon-header {

  --kanon-header-inset: var(--spacing);
  position: sticky;
  top: 0;
  z-index: 20;
  padding: var(--kanon-header-inset);
  color: var(--color-foreground);

}

.kanon-header__innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 4);
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4) calc(var(--spacing) * 2) calc(var(--spacing) * 2);
  background: var(--color-header);
  border-radius: calc(var(--radius-sm) * 1.5);
}

[data-theme="dark"] .kanon-header__innen {
  box-shadow: inset 0 0 0 var(--border-width) var(--color-border);
}

.kanon-header__marke {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  overflow: hidden;
}

.kanon-header__markenlink {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  width: 100%;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  pointer-events: none;
}

[data-kanon-marke="logo"] .kanon-logo__mark {
  max-width: min(100%, var(--kanon-logo-max-width));
}

.kanon-mobilnav__marke .kanon-logo__mark {
  height: var(--kanon-logo-height);
  max-width: var(--kanon-logo-max-width);
  object-fit: contain;
}

.kanon-header__liste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 6);
}

.kanon-header__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: var(--spacing) calc(var(--spacing) * 2);
  font-size: var(--text-body);
  line-height: calc(var(--spacing) * 4.5);
  border-radius: var(--radius-button);
}

.kanon-header__item::after {
  content: "";
  position: absolute;
  inset: calc(var(--spacing) * -2.25) 0;
}

.kanon-header__item:hover,
.kanon-header__item[aria-current="page"] {
  background: var(--color-accent);
  text-decoration: none;
}

.kanon-header__rechts {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 4);
}

.kanon-header .kanon-header__cta {
  white-space: nowrap;
}

.kanon-header__menu-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  margin: calc(var(--spacing) * -1) calc(var(--spacing) * -2.5);
  padding: 0;
  font-family: var(--font-body);
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: var(--radius-button);
  cursor: pointer;
}

.kanon-header__menu-button > .kanon-icon {
  width: calc(var(--spacing) * 9);
  height: calc(var(--spacing) * 9);
  stroke-width: 0.67;
}

.kanon-header button[data-kanon="menu-toggle"] {

  display: none;
}

@media (max-width: 63.999rem) {
  .kanon-header[data-kanon-js] button[data-kanon="menu-toggle"] {
    display: inline-flex;
  }

  .kanon-header[data-kanon-js] .kanon-header__nav {
    display: none;
  }

  .kanon-header[data-kanon-js][data-kanon-schmal="cta-weicht"] .kanon-header__cta {
    display: none;
  }
}

.kanon-header[data-kanon-collapsed] button[data-kanon="menu-toggle"] {
  display: inline-flex;
}

.kanon-header[data-kanon-collapsed] .kanon-header__nav {
  display: none;
}

.kanon-header[data-kanon-collapsed][data-kanon-schmal="cta-weicht"] .kanon-header__cta {
  display: none;
}

@media (min-width: 64rem) {
  .kanon-header {
    --kanon-header-inset: calc(var(--spacing) * 2);
  }

  .kanon-header__innen {
    padding-inline: calc(var(--spacing) * 4) calc(var(--spacing) * 2);
  }

  .kanon-header__nav {
    margin-inline-end: calc(var(--gap-xl) - var(--spacing) * 4);
  }

  .kanon-header[data-kanon-js]:not([data-kanon-collapsed]) .kanon-header__marke {
    flex-shrink: 0;
    overflow: visible;
  }

  .kanon-header[data-kanon-js]:not([data-kanon-collapsed]) .kanon-header__liste {
    flex-wrap: nowrap;
    white-space: nowrap;
  }
}

[data-kanon-marke="logo"] .kanon-header__markenlink {
  pointer-events: auto;
}

@media (max-width: 29.999rem) {
  .kanon-header[data-kanon-schmal="name-weicht"]:has(.kanon-logo__mark)
    .kanon-logo__name {

    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .kanon-header[data-kanon-schmal="name-weicht"]:has(.kanon-logo__mark)
    .kanon-header__markenlink {
    pointer-events: auto;
  }

  .kanon-header[data-kanon-schmal="cta-weicht"]:has(.kanon-logo__mark)
    .kanon-header__cta {
    display: none;
  }

  .kanon-header:not(:has(.kanon-logo__mark)) .kanon-header__cta {
    display: none;
  }
}

.kanon-header[data-kanon-eng] .kanon-header__cta {
  display: none;
}

.kanon-header,
.kanon-mobilnav {
  --kanon-logo-height: 2.75rem;
  --kanon-logo-padding: var(--spacing);
  --kanon-logo-max-width: 15rem;
}

.kanon-header[data-kanon-height="tall"],
.kanon-mobilnav[data-kanon-height="tall"] {
  --kanon-logo-height: 3rem;
  --kanon-logo-padding: calc(var(--spacing) * 1.25);
  --kanon-logo-max-width: 20rem;
}

.kanon-header[data-kanon-height="extra-tall"],
.kanon-mobilnav[data-kanon-height="extra-tall"] {
  --kanon-logo-height: 3.75rem;
  --kanon-logo-padding: calc(var(--spacing) * 1.5);
  --kanon-logo-max-width: 20rem;
}

@media (min-width: 64rem) {
  .kanon-header { --kanon-logo-height: 2.875rem; }
  .kanon-header[data-kanon-height="tall"] { --kanon-logo-height: 3.5rem; }
  .kanon-header[data-kanon-height="extra-tall"] { --kanon-logo-height: 5rem; }
}

.kanon-header .kanon-header__innen,
.kanon-mobilnav .kanon-mobilnav__kopf {
  padding-inline-start: var(--kanon-logo-padding);
}

.kanon-header__marke,
.kanon-mobilnav .kanon-mobilnav__marke {
  min-height: var(--kanon-logo-height);
  margin-block: calc(var(--kanon-logo-padding) - var(--spacing) * 2);
}

.kanon-mobilnav .kanon-mobilnav__marke {
  --kanon-logo-height: inherit;
  --kanon-logo-max-width: inherit;
}

:root:not([data-theme="dark"]) :is(.kanon-header[data-kanon] .kanon-header__markenlink, .kanon-mobilnav[data-kanon] .kanon-mobilnav__marke):not(:has(.kanon-logo__mark--on-light)) .kanon-logo__name,
[data-theme="dark"] :is(.kanon-header[data-kanon] .kanon-header__markenlink, .kanon-mobilnav[data-kanon] .kanon-mobilnav__marke):not(:has(.kanon-logo__mark--on-dark)) .kanon-logo__name {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
}

.kanon-mobilnav,
.kanon-mobilnav * {
  box-sizing: border-box;
}

.kanon-mobilnav {
  --kanon-header-inset: var(--spacing);
  inset: var(--kanon-header-inset) var(--kanon-header-inset) auto;
  width: auto;
  max-width: none;
  height: auto;
  max-height: calc(100dvh - var(--kanon-header-inset) * 2);
  margin: 0;
  padding: 0;
  border: 0;
  overflow-y: auto;
  color: var(--color-foreground);
  background: var(--color-header);
  border-radius: calc(var(--radius-sm) * 1.5);
  box-shadow: 0 0 0 var(--border-width) var(--color-border);

}

.kanon-mobilnav::backdrop {
  background: color-mix(in srgb, var(--color-black) 40%, transparent);
}

.kanon-mobilnav__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 4);
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4) calc(var(--spacing) * 2) calc(var(--spacing) * 2);
}

.kanon-mobilnav__marke {
  min-width: 0;
  min-height: calc(var(--spacing) * 9);
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  font-family: var(--font-heading);
  font-synthesis-weight: none;
  overflow-wrap: break-word;
}

.kanon-mobilnav__nav {
  padding: calc(var(--spacing) * 4);
  color: inherit;
  background: none;
}

.kanon-mobilnav__liste {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kanon-mobilnav__item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--spacing) * 4);
  font-size: var(--text-body);
  line-height: calc(var(--spacing) * 4.5);
  color: inherit;
  text-align: center;
  text-decoration: none;
}

.kanon-mobilnav__item:hover,
.kanon-mobilnav__item[aria-current="page"] {
  background: var(--color-accent);
  border-radius: var(--radius-button);
}

.kanon-mobilnav__action {
  display: flex;
  flex-direction: column;
  margin-block-start: calc(var(--spacing) * 6);
}

.kanon-mobilnav__action > .kanon-button {
  width: 100%;
}

.kanon-services {

  --kanon-services-tilt: -4.3deg;

  --kanon-services-tilt-block: calc(var(--spacing) * 4.1);
  --kanon-services-tilt-inline: 2.2484%;
}

.kanon-services__container {
  gap: var(--card-gap);
}

.kanon-services .kanon-section-header--center > .kanon-text {
  text-align: start;
}

.kanon-services__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.kanon-services__list > li {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.kanon-services__list > li > * {
  flex: 1 0 auto;
}

.kanon-services__tilt {
  box-sizing: border-box;
  padding: var(--kanon-services-tilt-block) var(--kanon-services-tilt-inline);
  background: none;
  transform: rotate(var(--kanon-services-tilt));
}

.kanon-services__row {
  display: grid;
  gap: var(--gap-md);
}

.kanon-services--icon-card-horizontal .kanon-services__tilt,
.kanon-services--icon-card-grid .kanon-services__tilt {
  --kanon-services-tilt-block: calc(var(--spacing) * 2.85);
  --kanon-services-tilt-inline: 2.9%;
  align-self: center;
  justify-self: center;
  width: 97.5%;
}

.kanon-services__split {
  --kanon-gap: var(--card-gap);
}

.kanon-services__split > .kanon-services__list {
  --kanon-col-min: calc(var(--container) / 6);
}

.kanon-services--icon-card-grid .kanon-services__split > :first-child {
  flex-grow: 548;
}

.kanon-services--icon-card-grid .kanon-services__split > :last-child {
  flex-grow: 804;
}

.kanon-services--icon-card-grid .kanon-services__tilt > .kanon-icon-card {
  min-height: calc(var(--spacing) * 85.75);
}

.kanon-services--image-card-grid {
  --kanon-image-card-media-min: calc(var(--spacing) * 57);
  --kanon-image-card-body-min: 0px;
}

.kanon-services--image-card-vertical {
  --kanon-image-card-media-min: calc(var(--spacing) * 55.5);
}

.kanon-services--image-card-horizontal .kanon-image-card__media {
  flex: 0 0 auto;
}

.kanon-services--text-card-horizontal > .kanon-services__container,
.kanon-services--image-card-horizontal > .kanon-services__container {
  gap: calc(var(--spacing) * 6);
}

.kanon-services__action {
  display: flex;
  justify-content: center;
  margin: 0;
}

.kanon-services:is(.kanon-services--icon-card-grid, .kanon-services--icon-card-grid-ordered) > .kanon-services__container {
  container-type: inline-size;
}

@container (min-width: 62.5rem) {
  .kanon-services:is(.kanon-services--icon-card-grid, .kanon-services--icon-card-grid-ordered) .kanon-services__split {
    --kanon-threshold: 0px;
  }

  .kanon-services:is(.kanon-services--icon-card-grid, .kanon-services--icon-card-grid-ordered) .kanon-services__split > .kanon-services__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kanon-services--icon-card-grid .kanon-services__tilt {
    --kanon-services-tilt-block: calc(var(--spacing) * 4.573);
    --kanon-services-tilt-inline: 1.5125%;
    width: 65.284%;
  }
}

@container (max-width: 62.499rem) {
  .kanon-services:is(.kanon-services--icon-card-grid, .kanon-services--icon-card-grid-ordered) .kanon-services__split {
    --kanon-threshold: 999rem;
  }

  .kanon-services:is(.kanon-services--icon-card-grid, .kanon-services--icon-card-grid-ordered) .kanon-services__split > .kanon-services__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .kanon-services--icon-card-grid-ordered .kanon-section-header {
    align-items: center;
    text-align: center;
  }

  .kanon-services--icon-card-grid-ordered .kanon-section-header > .kanon-text {
    text-align: start;
  }
}

@media (max-width: 47.999rem) {

  .kanon-services--image-card-horizontal .kanon-image-card__media {
    aspect-ratio: 5 / 3;
  }
}

@media (min-width: 48rem) {

  .kanon-services--image-card-horizontal .kanon-services__list,
  .kanon-services--text-card-horizontal .kanon-services__list {
    --kanon-col-min: calc(var(--container) / 7);
    grid-auto-rows: 1fr;
  }
}

@media (min-width: 64rem) {
  .kanon-services__row {
    grid-template-columns: minmax(0, 469.094fr) minmax(0, 448fr) minmax(0, 448fr);
    align-items: start;
  }

  .kanon-services--icon-card-horizontal .kanon-services__tilt {
    --kanon-services-tilt-block: calc(var(--spacing) * 4.1);
    --kanon-services-tilt-inline: 2.2484%;
    align-self: start;
    justify-self: stretch;
    width: auto;
  }

  .kanon-services__row > li:not(.kanon-services__tilt) {
    align-self: stretch;
  }

  .kanon-services__row > li:not(.kanon-services__tilt):nth-child(-n + 3) {
    margin-block-end: calc(var(--kanon-services-tilt-block) * 2);
  }
}

.kanon-services--icon-card-grid-ordered .kanon-services__list > :last-child:nth-child(odd),
.kanon-services--icon-card-grid .kanon-services__list > :last-child:nth-child(even),
.kanon-services--image-card-grid .kanon-services__list > :last-child:nth-child(even) {
  grid-column: 1 / -1;
}

@media (min-width: 48rem) {
  .kanon-services:is(.kanon-services--image-card-horizontal, .kanon-services--text-card-horizontal) .kanon-services__list:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kanon-services:is(.kanon-services--image-card-horizontal, .kanon-services--text-card-horizontal) .kanon-services__list:has(> :nth-child(5):last-child) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .kanon-services:is(.kanon-services--image-card-horizontal, .kanon-services--text-card-horizontal) .kanon-services__list:has(> :nth-child(5):last-child) > li {
    grid-column: span 2;
  }

  .kanon-services:is(.kanon-services--image-card-horizontal, .kanon-services--text-card-horizontal) .kanon-services__list:has(> :nth-child(5):last-child) > li:nth-child(4) {
    grid-column: 2 / span 2;
  }

  .kanon-services--image-card-horizontal .kanon-services__list:has(> :nth-child(4):last-child) {
    width: calc((100% - var(--kanon-gap, var(--gap-md))) * 2 / 3);
    margin-inline: auto;
  }
}

@media (min-width: 64rem) {

  .kanon-services__row:has(> :nth-child(4)) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .kanon-services__row:has(> :nth-child(4)) > .kanon-services__tilt {
    margin-inline: calc(100% * (1 - 1 / (1 - 2 * 0.022484)) / 2);
  }

  .kanon-services__row:has(> :nth-child(4):last-child) > li:nth-child(3) {
    margin-block-end: 0;
  }

  .kanon-services__row:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: calc((100% - var(--gap-md)) * 2 / 3);
    margin-inline: auto;
  }

  .kanon-services__row:has(> :nth-child(5):last-child) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .kanon-services__row:has(> :nth-child(5):last-child) > li {
    grid-column: span 2;
  }

  .kanon-services__row:has(> :nth-child(5):last-child) > li:nth-child(4) {
    grid-column: 2 / span 2;
  }
}

.kanon-reviews,
.kanon-reviews * {
  box-sizing: border-box;
}

.kanon-reviews {
  min-width: 0;
}

.kanon-reviews__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0 var(--gap-lg);
  min-width: 0;
}

.kanon-reviews__head > .kanon-section-header {
  flex: 1 1 calc(var(--spacing) * 70);
}

.kanon-reviews__rating {
  flex: none;
}

.kanon-reviews--slider .kanon-reviews__stage {

  --kanon-carousel-item: min(calc(100cqi - var(--spacing) * 23), calc(var(--spacing) * 112));

  --kanon-reviews-neighbor: calc(var(--spacing) * 65);
  --kanon-carousel-item-rest: min(var(--kanon-reviews-neighbor), calc(var(--kanon-carousel-item) * 260 / 283));

  width: 100%;
  max-width: calc(var(--spacing) * 112 + var(--kanon-reviews-neighbor) * 2 + var(--kanon-carousel-gap) * 2);
  margin-block-start: var(--card-padding-xl);
  margin-inline: auto;
}

.kanon-reviews__pair {
  display: grid;
  --kanon-reviews-card: calc(var(--spacing) * 112);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--spacing) * 80)), 1fr));
  gap: var(--gap-lg);
  max-width: calc(var(--kanon-reviews-card) * 2 + var(--gap-lg));
  margin-block-start: var(--card-padding-xl);
}

.kanon-reviews__pair > * {
  max-width: var(--kanon-reviews-card);
}

.kanon-reviews__pair:has([data-kanon-open]) {
  align-items: start;
}

.kanon-reviews__pair > :only-child {
  width: min(100%, calc(var(--spacing) * 140));
  max-width: none;
}

.kanon-reviews__pair:has(> :only-child) {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 48rem) {
  .kanon-reviews--single > .kanon-container {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: center;
    gap: var(--gap-lg);
  }

  .kanon-reviews--single .kanon-reviews__head {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: var(--gap-md);
  }

  .kanon-reviews--single .kanon-reviews__head > .kanon-section-header {
    flex: none;
  }

  .kanon-reviews--single .kanon-reviews__pair {
    justify-items: end;
    margin-block-start: 0;
  }
}

@media (max-width: 47.999rem) {

  .kanon-reviews--slider .kanon-reviews__head {
    flex-direction: column;

    flex-wrap: nowrap;
    align-items: stretch;
  }

  .kanon-reviews--slider .kanon-reviews__head > .kanon-section-header {
    flex: none;
  }

  .kanon-reviews--slider .kanon-reviews__rating {
    flex-direction: column;
    align-self: center;
    gap: calc(var(--spacing) * 4);
  }

  .kanon-reviews--slider .kanon-reviews__stage {
    --kanon-carousel-gap: var(--gap-sm);
    width: auto;
    max-width: none;
    margin-block-start: var(--gap-md);
    margin-inline: calc(var(--section-padding-inline) * -1);
  }

  .kanon-reviews__pair {
    margin-block-start: var(--gap-md);
  }
}

.kanon-reviews--sticky {

  --kanon-on-image-cap: color-mix(in srgb, var(--color-neutral-500) 50%, var(--color-neutral-400));

  --kanon-reviews-gap: var(--section-padding-sm);

  --kanon-reviews-stage: clamp(calc(var(--spacing) * 30), calc(var(--kanon-screen-room) - var(--kanon-reviews-gap) * 2), calc(var(--spacing) * 224));

  --kanon-reviews-top: calc(var(--kanon-kopfhoehe, 0px) + var(--kanon-kopf-versatz, 0px) + (var(--kanon-screen-room) - var(--kanon-reviews-stage)) / 2);

  --kanon-reviews-inset: calc(var(--spacing) * 10);
}

.kanon-reviews__panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-radius: var(--radius);

  clip-path: inset(0);
}

.kanon-reviews__panel > *,
.kanon-reviews__panel::after {
  grid-area: 1 / 1;
}

.kanon-reviews__backdrop {
  position: sticky;
  inset-block-start: var(--kanon-reviews-top);
  align-self: start;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: var(--kanon-reviews-stage);
  padding: calc(var(--spacing) * 10) var(--card-padding-sm);
  overflow: clip;
  border-radius: var(--radius);
}

.kanon-reviews__panel::after {
  content: "";
  position: sticky;
  inset-block-start: var(--kanon-reviews-top);
  z-index: 2;
  align-self: start;
  height: var(--kanon-reviews-stage);
  border-radius: var(--radius);
  box-shadow: 0 0 0 100vmax var(--color-background);
  pointer-events: none;
}

.kanon-reviews__image {
  z-index: -2;
  border-radius: 0;
}

.kanon-reviews__backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--color-neutral-900) 20%, transparent);
}

.kanon-reviews__caption {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
}

.kanon-reviews__caption::before {
  content: "";
  position: absolute;
  inset: calc(var(--spacing) * -12) calc(var(--spacing) * -18);
  z-index: -1;
  background: var(--kanon-on-image-cap);
  filter: blur(calc(var(--spacing) * 14));
  mix-blend-mode: darken;
  pointer-events: none;
}

.kanon-reviews__title {

  max-width: 6em;
  margin-block-end: calc(var(--spacing) * 6);
  font-size: var(--text-h1);
  line-height: 1;
  text-align: center;
  text-wrap: balance;
  color: var(--color-white);
}

.kanon-reviews--sticky .kanon-reviews__cards {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto;
  grid-auto-rows: minmax(var(--kanon-reviews-stage), auto);
  align-items: end;
  padding: var(--kanon-reviews-stage) calc(var(--spacing) * 1.75) calc(var(--kanon-reviews-stage) * 1.15);

  pointer-events: none;
}

.kanon-reviews--sticky .kanon-reviews__cards > .kanon-quote-card {
  margin-block-end: var(--kanon-reviews-inset);
  pointer-events: auto;
}

@media (max-width: 47.999rem) {

  .kanon-reviews--sticky {
    --kanon-reviews-inset: calc(var(--spacing) * 2.5);
  }

  .kanon-reviews--sticky .kanon-reviews__cards > .kanon-quote-card {
    -webkit-backdrop-filter: blur(calc(var(--spacing) * 3));
    backdrop-filter: blur(calc(var(--spacing) * 3));
  }
}

@media (min-width: 48rem) {

  .kanon-reviews__backdrop {
    justify-content: center;
  }

  .kanon-reviews__title {
    font-size: calc(var(--text-h1) * 1.1842);
  }

  .kanon-reviews--sticky .kanon-reviews__cards {
    padding-inline: 0;
  }

  .kanon-reviews--sticky .kanon-reviews__cards > .kanon-quote-card {
    width: calc(var(--spacing) * 93);
    max-width: 100%;
  }

  .kanon-reviews--sticky .kanon-reviews__cards > .kanon-quote-card:nth-child(odd) {
    position: relative;
    justify-self: end;
    inset-inline-end: 7.04%;
  }

  .kanon-reviews--sticky .kanon-reviews__cards > .kanon-quote-card:nth-child(1) {
    width: calc(var(--spacing) * 91.5);
  }

  .kanon-reviews--sticky .kanon-reviews__cards > .kanon-quote-card:nth-child(3) {
    inset-inline-end: 17.457%;
  }

  .kanon-reviews--sticky .kanon-reviews__cards > .kanon-quote-card:nth-child(even) {
    position: relative;
    justify-self: start;
    inset-inline-start: 3.736%;
  }

  .kanon-reviews--sticky .kanon-reviews__cards > .kanon-quote-card:nth-child(4) {
    inset-inline-start: 14.583%;
  }
}

@media (max-height: 30rem) {
  .kanon-reviews--sticky .kanon-reviews__cards {
    grid-auto-rows: auto;
  }

  .kanon-reviews--sticky .kanon-reviews__cards > .kanon-quote-card:not(:last-child) {
    margin-block-end: calc(var(--kanon-reviews-stage) * 1.5);
  }
}

.kanon-faq {
  --kanon-faq-padding: calc(var(--spacing) * 10 + (var(--section-padding-lg) - var(--spacing) * 16) * 0.3);
  padding-block: var(--kanon-faq-padding);
}

.kanon-faq > .kanon-container {
  gap: var(--margin-eyebrow);
  container-type: inline-size;
}

.kanon-faq__list {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  container-type: inline-size;
}

.kanon-faq--horizontal {
  --kanon-faq-padding: calc(var(--spacing) * 10 + (var(--section-padding-lg) - var(--spacing) * 16) * 1.3);
}

.kanon-faq__columns {
  --kanon-threshold: calc(var(--container) * 0.7);
  gap: clamp(var(--margin-eyebrow), calc((100cqi - var(--kanon-threshold)) * 999), var(--gap-2xl));
}

.kanon-faq__columns > :first-child {
  flex-grow: 600;
}

.kanon-faq__columns > .kanon-section-header > .kanon-text {
  max-width: min(100%, calc(var(--measure) * 0.692));
}

.kanon-faq__columns > :last-child {
  flex-grow: 712;
  padding-block-start: clamp(var(--gap-none), calc((100cqi - var(--kanon-threshold)) * 999), var(--gap-2xl));
}

.kanon-contact {

  --kanon-contact-card: calc(var(--spacing) * 71.5);
  --kanon-threshold: calc(var(--spacing) * 160);

  padding-block-start: max(var(--section-padding-md), calc(var(--spacing) * 16));
}

.kanon-contact--horizontal {
  padding-block-end: max(var(--section-padding-md), calc(var(--spacing) * 16));
}

.kanon-contact__head {
  min-width: 0;
}

.kanon-contact__head > .kanon-check-list {
  max-width: 100%;
}

@media (max-width: 47.999rem) {
  .kanon-contact--vertical .kanon-contact__head > .kanon-check-list {
    align-items: stretch;
    width: 100%;
  }
}

.kanon-contact .kanon-section-header > .kanon-text {
  white-space: pre-line;
}

.kanon-contact--horizontal .kanon-contact__head {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.kanon-contact--horizontal .kanon-contact__head > .kanon-check-list {
  max-width: min(100%, calc(var(--spacing) * 160));
  margin-block-end: calc(var(--spacing) * 6);
}

.kanon-contact__cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap-sm);
  margin-block-start: var(--card-gap);
}

.kanon-contact__cards > .kanon-contact-card {
  flex: 1 1 var(--kanon-contact-card);
  max-width: max(var(--kanon-contact-card), calc((var(--kanon-threshold) - 100%) * 999));
}

.kanon-contact--horizontal .kanon-contact__cards {
  justify-content: center;
  margin-block-start: clamp(calc(var(--spacing) * 0), calc((100% - var(--kanon-contact-card) * 2 - var(--gap-sm)) * 999), calc(var(--spacing) * 6));
}

.kanon-gallery {

  --kanon-gallery-stage: calc(var(--spacing) * 106.25);
}

.kanon-gallery__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.kanon-gallery__list .kanon-image {
  --kanon-bildformat: 12 / 7;
}

.kanon-gallery__masonry {
  --kanon-gap: calc(var(--spacing) * 4);

  margin-block-end: calc(var(--kanon-gap) * -1);
}

.kanon-gallery .kanon-gallery__masonry > .kanon-image {
  aspect-ratio: 14 / 9;
}

.kanon-gallery__stage {
  --kanon-carousel-item: min(81.6cqi, calc(var(--spacing) * 113.25));
  --kanon-carousel-gap: var(--gap-md);
  --kanon-stage-shrink: 0.1634;
}

.kanon-gallery__slide {
  height: var(--kanon-gallery-stage);
  margin: 0;
}

@media (min-width: 48rem) {

  .kanon-gallery__list {
    --kanon-col-min: calc(var(--container) / 7);
  }

  .kanon-gallery__list .kanon-image {
    --kanon-bildformat: 15 / 19;
  }

  .kanon-gallery .kanon-gallery__masonry > .kanon-image {
    aspect-ratio: 64 / 35;
  }

  .kanon-gallery .kanon-gallery__masonry > .kanon-image:is(:nth-child(4n + 1), :nth-child(4n)) {
    aspect-ratio: 136 / 135;
  }
}

.kanon-text-section .kanon-section-header > .kanon-heading {
  width: 100%;
}

.kanon-text-section--vertical-small > .kanon-container {
  padding-block: calc(var(--spacing) * 10 + (var(--section-padding-lg) - var(--spacing) * 16) * 0.25);
}

.kanon-text-with-image-section > .kanon-container {
  container-type: inline-size;
}

.kanon-text-with-image-section .kanon-text-with-image {
  min-height: clamp(var(--gap-none), calc((var(--kanon-threshold) * 2 + var(--gap-lg) - 100cqi) * 999), calc(var(--spacing) * 150));
}

.kanon-stats > .kanon-container {
  container-type: inline-size;
}

.kanon-stats__row {

  --kanon-stats-tile: calc(var(--spacing) * 71.5);
  --kanon-stats-card: calc(var(--container) / 6);

  --kanon-stats-half: calc(50% - var(--gap-sm) / 2);
  --kanon-stats-narrow: calc((var(--container) / 5 * 3 + var(--kanon-stats-tile) + var(--gap-sm) * 3 - 100cqi) * 999);

  --kanon-stats-single: min(100%, calc((var(--spacing) * 113 - 100cqi) * 999));
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
}

.kanon-stats__row > .kanon-stats-card {
  flex: 9999 1 max(var(--kanon-stats-single), clamp(min(var(--kanon-stats-card), var(--kanon-stats-half)), var(--kanon-stats-narrow), var(--kanon-stats-half)));
  width: auto;
  max-width: 100%;
}

.kanon-stats__row > .kanon-stats-card > .kanon-eyebrow {
  max-width: 100%;
  overflow-wrap: break-word;
}

.kanon-stats__row > .kanon-contact-button {
  flex: 1 1 max(var(--kanon-stats-single), clamp(min(var(--kanon-stats-tile), var(--kanon-stats-half)), var(--kanon-stats-narrow), var(--kanon-stats-half)));
  width: auto;
  min-width: 0;
}

.kanon-stats__columns {
  --kanon-threshold: calc(var(--container) / 4);
  --kanon-stats-tile: calc(var(--spacing) * 71.5);

  --kanon-stats-image: calc(var(--spacing) * 193);
  --kanon-stats-image-stacked: calc(var(--spacing) * 75);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--kanon-threshold)), 1fr));
  gap: var(--gap-md);
  container-type: inline-size;
}

.kanon-stats__side,
.kanon-stats__media {
  --kanon-stats-wide: calc((100cqi - var(--kanon-threshold) * 2 - var(--gap-md)) * 999);
  min-width: 0;
}

.kanon-stats__side {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  gap: var(--gap-lg);
  padding-block-start: calc(var(--spacing) * 10);
}

.kanon-stats__group {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}

.kanon-stats__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.kanon-stats__group > .kanon-contact-button {
  width: clamp(var(--kanon-stats-tile), calc(var(--kanon-stats-wide) * -1), 100%);
  max-width: 100%;
}

.kanon-stats__media {
  position: relative;
  min-height: clamp(var(--kanon-stats-image-stacked), var(--kanon-stats-wide), var(--kanon-stats-image));
}

.kanon-cta--boxed .kanon-cta__panel {
  --kanon-cta-tile: calc(var(--spacing) * 71.5);
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--card-padding-xl);
  padding: var(--card-padding-xl);
  color: var(--color-foreground);
  background: var(--color-background);
  border-radius: var(--radius);
}

[data-theme="dark"] .kanon-cta--boxed .kanon-cta__panel,
.kanon-cta--boxed[data-theme="dark"] .kanon-cta__panel {
  box-shadow: inset 0 0 0 var(--border-width) var(--color-border);
}

.kanon-cta--boxed .kanon-cta__panel > .kanon-section-header {
  flex: 9999 1 calc(var(--container) / 3);
  max-width: 100%;
}

.kanon-cta--boxed .kanon-cta__panel > .kanon-contact-button {
  --kanon-contact-button-min-height: calc(var(--spacing) * 30);
  flex: 1 1 var(--kanon-cta-tile);
  width: auto;
  min-width: 0;
}

.kanon-cta--fullwidth .kanon-cta__panel {
  --kanon-cta-padding: calc(var(--spacing) * 6 + (var(--section-padding-lg) - var(--spacing) * 16) * 0.7);
  box-sizing: border-box;
  padding: var(--kanon-cta-padding);
}

@media (max-width: 47.999rem) {
  .kanon-cta--fullwidth .kanon-cta__panel {
    padding-inline: max(var(--gap-none), calc(var(--kanon-cta-padding) - var(--section-padding-inline)));
  }
}

.kanon-footer {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(var(--spacing) * 6) var(--gap-lg);
  min-width: 0;
  padding: calc(var(--margin-lg) / 2) var(--margin-md);
  color: var(--color-muted-foreground);
  border-top: var(--border-width) solid var(--color-border);
}

.kanon-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacing) * 5);
  min-width: 0;
  max-width: 100%;
}

.kanon-footer__marke {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  min-width: 0;
  max-width: 100%;
  color: var(--color-foreground);
}

.kanon-footer__marke .kanon-logo__mark {
  height: var(--kanon-logo-height);
  max-width: var(--kanon-logo-max-width);
  object-fit: contain;
}

.kanon-footer__wortmarke {
  min-width: 0;
  max-width: 100%;
  font-family: var(--font-heading);

  font-weight: inherit;
  font-synthesis-weight: none;
  font-size: var(--text-h5);
  line-height: var(--leading-h5);
  color: var(--color-foreground);
  overflow-wrap: break-word;
}

.kanon-footer__social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.kanon-footer__social a {
  position: relative;
  display: block;
  color: var(--color-icon);
}

.kanon-footer__social a::after {
  content: "";
  position: absolute;
  inset: calc(var(--spacing) * -2.5);
}

.kanon-footer__social svg,
.kanon-footer__social img {
  display: block;
  width: calc(var(--spacing) * 6);
  height: calc(var(--spacing) * 6);
}

.kanon-footer__social img {
  object-fit: contain;
}

.kanon-footer__social a:hover {
  color: var(--color-link-hover);
}

.kanon-footer__recht {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 2) calc(var(--spacing) * 6);
}

.kanon-footer__recht a {
  position: relative;
}

.kanon-footer__recht a::after {
  content: "";
  position: absolute;
  inset: calc(var(--spacing) * -2.75) 0;
}

:root {

  --kanon-screen-room: calc(100vh - var(--kanon-kopfhoehe, 0px) - var(--kanon-kopf-versatz, 0px));
  --kanon-first-screen: clamp(24rem, calc(100vh - var(--kanon-kopfhoehe, 0px) - var(--kanon-kopf-versatz, 0px)), max(70rem, 75vw));
  --kanon-first-screen-columns: min(var(--kanon-first-screen), 85vw);
}

@supports (height: 100svh) {
  :root {
    --kanon-screen-room: calc(100svh - var(--kanon-kopfhoehe, 0px) - var(--kanon-kopf-versatz, 0px));
    --kanon-first-screen: clamp(24rem, calc(100svh - var(--kanon-kopfhoehe, 0px) - var(--kanon-kopf-versatz, 0px)), max(70rem, 75vw));
  }
}

.kanon-hero,
.kanon-hero * {
  box-sizing: border-box;
}

.kanon-hero {
  --kanon-hero-above: calc(var(--kanon-kopfhoehe, 0px) + var(--kanon-kopf-versatz, 0px));

  --kanon-hero-top: max(var(--section-padding-sm), calc(var(--spacing) * 22 - var(--kanon-hero-above)));
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: var(--kanon-first-screen);

  --kanon-hero-fan-ratio: 414 / 408;
  --kanon-hero-fan-visible: calc(341 / 482);

  --kanon-hero-fan-seen: calc(var(--kanon-hero-fan-card) / (var(--kanon-hero-fan-ratio)) * var(--kanon-hero-fan-visible) - var(--section-padding-sm));

  --kanon-hero-fan-skirt: calc(var(--spacing) * 6);

  --kanon-hero-fan-rest: 0.8475;
}

.kanon-hero > .kanon-container,
.kanon-hero > .kanon-container > * {
  flex: 1 0 auto;
}

.kanon-hero__copy {
  position: relative;
  z-index: 2;
  max-width: 100%;
}

.kanon-hero__copy > .kanon-heading {
  text-wrap: balance;
}

.kanon-hero__copy > .kanon-text {
  width: 100%;
}

.kanon-hero__media {
  position: relative;
}

.kanon-hero__rating {
  position: relative;
  z-index: 2;
  flex: none;
}

.kanon-hero__copy > .kanon-hero__rating {
  margin-block-start: calc(var(--spacing) * -2);
  margin-inline-start: calc(var(--spacing) * -2);
}

.kanon-hero--text-image,
.kanon-hero--text-two-image,
.kanon-hero--image-bottom,
.kanon-hero--bg-image {
  padding-block-start: var(--kanon-hero-top);
}

.kanon-hero__row {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}

.kanon-hero__row > .kanon-hero__media {
  flex: 1 0 auto;
  min-height: calc(var(--spacing) * 64);
}

.kanon-hero__notch {
  --kanon-hero-notch-ground: var(--kanon-hero-ground, var(--color-background));
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  z-index: 2;
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 3) 0 0;
  background: var(--kanon-hero-notch-ground);
  border-start-end-radius: var(--radius);
}

.kanon-hero__notch::before,
.kanon-hero__notch::after {
  content: "";
  position: absolute;
  width: var(--radius);
  height: var(--radius);
  background: radial-gradient(circle at 100% 0, transparent calc(var(--radius) - 0.5px), var(--kanon-hero-notch-ground) var(--radius));
}

.kanon-hero__notch::before {
  inset-block-end: 100%;
  inset-inline-start: 0;
}

.kanon-hero__notch::after {
  inset-block-end: 0;
  inset-inline-start: 100%;
}

.kanon-hero__notch > .kanon-fact-card {
  --kanon-fact-card-width: calc(var(--spacing) * 40.25);
}

.kanon-hero--text-image .kanon-hero__image {
  border-radius: var(--radius);
}

.kanon-hero--text-two-image .kanon-hero__media {
  min-height: calc(var(--spacing) * 60);
}

.kanon-hero--text-two-image .kanon-hero__image {
  inset: 0 0 auto auto;
  width: 79.233%;
  height: 91.3%;
}

.kanon-hero--text-two-image .kanon-hero__image--second {
  inset: auto auto 0 0;
  z-index: 1;
  width: 50.926%;
  height: 58.7%;
  border: var(--spacing) solid var(--kanon-hero-ground, var(--color-background));
}

@media (min-width: 64rem) {

  .kanon-hero--text-image,
  .kanon-hero--text-two-image {
    min-height: var(--kanon-first-screen-columns);
  }

  .kanon-hero--text-image .kanon-hero__row {
    display: grid;
    grid-template-columns: minmax(0, 652fr) minmax(0, 75fr) minmax(0, 665fr);
    gap: 0;
    align-items: center;
  }

  .kanon-hero--text-image .kanon-hero__copy > .kanon-text {
    max-width: calc(var(--spacing) * 93.75);
  }

  .kanon-hero--text-image .kanon-hero__media {
    grid-column: 3;
    align-self: stretch;
    min-height: calc(var(--spacing) * 120);
    margin-block: 1px;
  }

  .kanon-hero__notch {
    padding: calc(var(--spacing) * 7) calc(var(--spacing) * 8) 0 0;
  }

  .kanon-hero--text-two-image {
    padding-block-start: var(--section-padding-sm);
  }

  .kanon-hero--text-two-image .kanon-hero__row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0;
  }

  .kanon-hero--text-two-image .kanon-hero__copy {
    flex: 0 0 37.284%;
  }

  .kanon-hero--text-two-image .kanon-hero__copy > .kanon-text {
    max-width: none;
  }

  .kanon-hero--text-two-image .kanon-hero__media {
    flex: 0 0 54.31%;
    align-self: stretch;
    min-height: calc(var(--spacing) * 136);
  }

  .kanon-hero--text-two-image .kanon-hero__image {
    inset: 10.889% 0 auto auto;
    height: 78.222%;
  }

  .kanon-hero--text-two-image .kanon-hero__image--second {
    inset: 46.222% auto auto 0;
    height: 50.333%;
  }
}

.kanon-hero__card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  align-content: flex-end;
  justify-content: space-between;
  gap: calc(var(--spacing) * 2.5) var(--gap-lg);
  padding: var(--card-padding-xl);
  overflow: clip;
  border-radius: var(--radius);
}

.kanon-hero__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(-3.727deg, var(--color-neutral-950) 4.426%, transparent 65.858%);
  pointer-events: none;
}

.kanon-hero__card > .kanon-hero__image {
  z-index: 0;
  border-radius: 0;
}

.kanon-hero__card > .kanon-hero__copy {
  flex: 0 1 calc(var(--spacing) * 163);
  max-width: 100%;
}

.kanon-hero--bg-image-fullscreen > .kanon-hero__card {
  flex: 1 0 auto;
  padding: var(--card-padding-sm);
  border-radius: 0;
}

.kanon-hero--bg-image-fullscreen > .kanon-hero__card::after {
  background: linear-gradient(7.592deg, var(--color-neutral-950) 8.8207%, transparent 65.793%);
}

@media (max-width: 47.999rem) {
  .kanon-hero--bg-image .kanon-hero__card {
    padding: calc(var(--spacing) * 4);
  }
}

@media (min-width: 48rem) {

  .kanon-hero--bg-image {
    padding-block-start: var(--section-padding-sm);
  }

  .kanon-hero--bg-image-fullscreen > .kanon-hero__card {
    padding: calc(var(--spacing) * 15) calc(var(--spacing) * 20) calc(var(--spacing) * 21);
  }
}

.kanon-hero--image-bottom {

  --kanon-hero-fan-card: min(70.7vw, calc(var(--spacing) * 104));
  --kanon-hero-fan-below: calc(var(--kanon-hero-fan-card) / (var(--kanon-hero-fan-ratio)) - var(--kanon-hero-fan-seen) + var(--spacing) * 13 + var(--section-padding-sm));
  margin-block-end: var(--kanon-hero-fan-below);
}

.kanon-hero__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.kanon-hero__fan-slot {
  position: relative;
  flex: none;
  width: 100%;
  height: var(--kanon-hero-fan-seen);
  margin-block-start: auto;
}

.kanon-hero__fan {
  --kanon-carousel-item: var(--kanon-hero-fan-card);
  --kanon-carousel-item-rest: calc(var(--kanon-hero-fan-card) * var(--kanon-hero-fan-rest));
  --kanon-carousel-gap: var(--gap-sm);
  position: absolute;
  inset-block-start: 0;
  inset-inline: calc(var(--section-padding-inline) * -1);
}

.kanon-hero__fan > .kanon-carousel__track {
  padding-block-end: var(--kanon-hero-fan-skirt);
  margin-block-end: calc(var(--kanon-hero-fan-skirt) * -1);
}

.kanon-hero__fan-card {
  position: relative;
  aspect-ratio: var(--kanon-hero-fan-ratio);
  overflow: clip;
  border: 0 solid var(--kanon-hero-ground, var(--color-background));
  border-radius: var(--radius);
}

.kanon-hero__fan-card--middle {
  z-index: 3;
}

.kanon-hero__fan-card--left {
  z-index: 1;
}

.kanon-hero__fan-card--right {
  z-index: 2;
}

.kanon-hero__fan-card > .kanon-image {
  border-radius: 0;
}

.kanon-hero__fan[data-kanon-looping] .kanon-hero__fan-card--left {
  --kanon-hero-fan-slot: calc((var(--kanon-carousel-item) + var(--kanon-carousel-gap)) * -1);
}

.kanon-hero__fan[data-kanon-looping] .kanon-hero__fan-card--right {
  --kanon-hero-fan-slot: calc(var(--kanon-carousel-item) + var(--kanon-carousel-gap));
}

.kanon-hero .kanon-hero__fan[data-kanon-looping][data-kanon-moved] .kanon-hero__fan-card {
  animation-name: none;
}

@keyframes kanon-hero-fan-left {
  from {
    translate: calc(var(--kanon-hero-fan-slot, 0px) + 27.2%) 8.3%;
    rotate: -9.77deg;
    scale: var(--kanon-hero-fan-rest);
  }
}

@keyframes kanon-hero-fan-right {
  from {
    translate: calc(var(--kanon-hero-fan-slot, 0px) - 27.2%) 8.3%;
    rotate: 9.77deg;
    scale: var(--kanon-hero-fan-rest);
  }
}

@keyframes kanon-hero-fan-middle {
  from {
    border-width: calc(var(--spacing) / 2);
  }
}

@media (min-width: 64rem) {

  .kanon-hero {
    --kanon-hero-fan-seen: calc(var(--kanon-hero-fan-width) * 0.35201 / (var(--kanon-hero-fan-ratio)) * var(--kanon-hero-fan-visible) - var(--section-padding-sm));
    --kanon-hero-fan-skirt: 0px;
  }

  .kanon-hero--image-bottom {

    --kanon-hero-fan-width: min(100vw - var(--section-padding-inline) * 2, var(--container));
    --kanon-hero-fan-below: max(0px, calc((var(--kanon-hero-fan-width) - var(--gap-lg) * 2) / 3 / (var(--kanon-hero-fan-ratio)) - var(--kanon-hero-fan-seen)));
    padding-block-start: var(--section-padding-sm);
  }

  .kanon-hero__stage {
    padding-block-start: clamp(calc(var(--spacing) * 10), calc(var(--kanon-first-screen) - var(--spacing) * 175), calc(var(--spacing) * 50));
  }

  .kanon-hero--image-bottom .kanon-hero__copy {
    width: calc(var(--spacing) * 157.25);
    max-width: 100%;
  }

  .kanon-hero--image-bottom .kanon-hero__copy > .kanon-text {
    max-width: none;
  }

  .kanon-hero--image-bottom .kanon-hero__copy > .kanon-heading {
    margin-block-end: calc(var(--spacing) * 6);
  }

  .kanon-hero--image-bottom .kanon-hero__rating {
    position: absolute;
    inset-block-start: max(0px, calc(var(--spacing) * 12.5 - var(--kanon-hero-above)));
    inset-inline-start: 0;
  }

  .kanon-hero__fan {
    inset-inline: 0;
  }

  .kanon-hero__fan > .kanon-carousel__track {
    display: block;
    height: calc((100cqi - var(--gap-lg) * 2) / 3 / (var(--kanon-hero-fan-ratio)));
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .kanon-hero__fan > .kanon-carousel__nav {
    display: none;
  }

  .kanon-hero__fan {
    --kanon-carousel-loop: 0;
  }

  .kanon-hero__fan > .kanon-carousel__track > .kanon-hero__fan-card {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: calc((100% - var(--gap-lg) * 2) / 3);
    scale: none;
    translate: none;
  }

  .kanon-hero__fan > .kanon-carousel__track > .kanon-hero__fan-card--middle {
    inset-inline-start: calc((100% + var(--gap-lg)) / 3);
  }

  .kanon-hero__fan > .kanon-carousel__track > .kanon-hero__fan-card--right {
    inset-inline-start: calc((100% + var(--gap-lg)) / 3 * 2);
  }

  .kanon-hero__fan-card {
    --kanon-hero-fan-end: calc((100cqi - var(--gap-lg) * 2) / 3);
    --kanon-hero-fan-side-scale: tan(atan2(29.741cqi, var(--kanon-hero-fan-end)));
    --kanon-hero-fan-side-drop: calc(5.5316cqi - (var(--kanon-hero-fan-end) - 29.741cqi) / 2 / (var(--kanon-hero-fan-ratio)));
  }

  @keyframes kanon-hero-fan-left {
    from {
      translate: calc(24.5685cqi - var(--kanon-hero-fan-end) / 2) var(--kanon-hero-fan-side-drop);
      rotate: -9.77deg;
      scale: var(--kanon-hero-fan-side-scale);
      border-radius: calc(var(--radius) / var(--kanon-hero-fan-side-scale));
    }
  }

  @keyframes kanon-hero-fan-right {
    from {
      translate: calc(77.9455cqi - (100cqi + var(--gap-lg)) / 3 * 2 - var(--kanon-hero-fan-end) / 2) var(--kanon-hero-fan-side-drop);
      rotate: 9.77deg;
      scale: var(--kanon-hero-fan-side-scale);
      border-radius: calc(var(--radius) / var(--kanon-hero-fan-side-scale));
    }
  }

  @keyframes kanon-hero-fan-middle {
    from {
      inset-inline-start: 33.836%;
      width: 35.201%;
      border-width: var(--spacing);
    }
  }
}

@media (min-width: 64rem) and (max-height: 52rem) {
  .kanon-hero {
    --kanon-hero-fan-visible: 0.48;
  }

  .kanon-hero__stage {
    padding-block-start: calc(var(--spacing) * 4);
  }

  .kanon-hero--image-bottom .kanon-hero__rating {
    inset-block-start: 0;
  }

  .kanon-hero__stage:has(> .kanon-hero__rating) {
    padding-block-start: calc(var(--spacing) * 11);
  }
}

@media (max-width: 63.999rem) and (max-height: 37.499rem) {
  .kanon-hero {
    --kanon-hero-fan-visible: 0.4;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .kanon-hero__fan-card,
  .kanon-hero[data-kanon-fan="script"] .kanon-hero__fan-card {
    animation-duration: 1s;

    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-play-state: paused;
    animation-delay: calc(var(--kanon-hero-fan-progress, 0) * -1s);
    animation-timeline: auto;
    animation-range: normal;
  }

  .kanon-hero__fan-card--left,
  .kanon-hero[data-kanon-fan="script"] .kanon-hero__fan-card--left {
    animation-name: kanon-hero-fan-left;
  }

  .kanon-hero__fan-card--middle,
  .kanon-hero[data-kanon-fan="script"] .kanon-hero__fan-card--middle {
    animation-name: kanon-hero-fan-middle;
  }

  .kanon-hero__fan-card--right,
  .kanon-hero[data-kanon-fan="script"] .kanon-hero__fan-card--right {
    animation-name: kanon-hero-fan-right;
  }
}

:root {
  --aufi-band: #10B981;
  --aufi-band-ink: #ffffff;
}

.entwurf-banner {
  background: var(--aufi-band);
  color: var(--aufi-band-ink);
  text-align: center;
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  line-height: var(--leading-body);
}

.kanon-rechtstext {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: calc(var(--spacing) * 4);
  padding-block: var(--section-padding-md);
  line-height: var(--leading-body);
}

.kanon-rechtstext h1 {
  font-family: var(--font-heading);
  font-synthesis-weight: none;
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
  margin-block: 0 calc(var(--spacing) * 4);
}

.kanon-rechtstext h2 {
  font-family: var(--font-heading);
  font-synthesis-weight: none;
  font-size: var(--text-h5);
  line-height: var(--leading-h5);
  margin-block: calc(var(--spacing) * 6) calc(var(--spacing) * 2);
}

.kanon-rechtstext p,
.kanon-rechtstext ul {
  margin-block: 0 calc(var(--spacing) * 2);
}

.kanon-rechtstext a {

  color: var(--color-link);
}

.kanon-rechtstext .todo {
  background: var(--color-card-hover);
  border-bottom: 1px dashed var(--color-link);
  padding-inline: calc(var(--spacing) * 2);
  border-radius: var(--radius-button);
}