:root {
  --clr-neutral-900: rgba(0, 0, 0, 1);
  --clr-neutral-600: rgba(135, 135, 135, 1);
  --clr-neutral-500: rgba(153, 153, 153, 1);
  --clr-neutral-100: rgba(255, 255, 255, 1);
  --clr-brown-500: rgba(206, 192, 179, 1);
  --clr-blue-500: rgba(0, 135, 255, 1);
  --clr-orange-500: rgba(255, 78, 0, 1);
  --ff-big-font: "neue-haas-grotesk-text", sans-serif;
  --ff-small-font: "neue-haas-grotesk-text", sans-serif;
  --root-font-size: 100%;
  --txt-xs: clamp(0.75rem, calc(-0.1858782904vw + 0.7918226153rem), 0.6331290249rem);
  --txt-s: clamp(0.8125rem, calc(0.0500373602vw + 0.8012415939rem), 0.8439609902rem);
  --txt-m: clamp(1rem, calc(0.1988071571vw + 0.9552683897rem), 1.125rem);
  --txt-l: clamp(1.2rem, calc(0.4765407555vw + 1.09277833rem), 1.499625rem);
  --txt-xl: clamp(1.44rem, calc(0.8890658052vw + 1.2399601938rem), 1.999000125rem);
  --txt-xxl: clamp(1.728rem, calc(1.489729092vw + 1.3928109543rem), 2.6646671666rem);
  --h6: clamp(0.75rem, calc(-0.073993329vw + 0.766648499rem), 0.7034766944rem);
  --h5: clamp(0.8125rem, calc(0.1991800137vw + 0.7676844969rem), 0.9377344336rem);
  --h4: clamp(1.125rem, calc(0.1988071571vw + 1.0802683897rem), 1.25rem);
  --h3: clamp(1.35rem, calc(0.5029821074vw + 1.2368290258rem), 1.66625rem);
  --h2: clamp(1.62rem, calc(0.9560417495vw + 1.4048906064rem), 2.22111125rem);
  --h1: clamp(1.944rem, calc(1.6170835726vw + 1.5801561962rem), 2.9607412963rem);
  --heading-line-height: calc(4px + 2ex);
  --txt-line-height: calc(6px + 2ex);
  --space-xs: clamp(0.8441720333rem, calc(-0.0172384889vw + 0.8480506933rem), 0.8333333333rem);
  --space-s: clamp(1.1252813203rem, calc(0.1983597291vw + 1.0806503813rem), 1.25rem);
  --space-m: clamp(1.5rem, calc(0.5964214712vw + 1.365805169rem), 1.875rem);
  --space-l: clamp(1.9995rem, calc(1.2930417495vw + 1.7085656064rem), 2.8125rem);
  --space-xl: clamp(2.6653335rem, calc(2.4706425447vw + 2.1094389274rem), 4.21875rem);
  --space-xxl: clamp(3.5528895555rem, calc(4.4138933511vw + 2.5597635515rem), 6.328125rem);
  --section-space-xs: clamp(1.6883440665rem, calc(1.2909040692vw + 1.3978906509rem), 2.5rem);
  --section-space-s: clamp(2.2505626407rem, calc(2.3847910288vw + 1.7139846592rem), 3.75rem);
  --section-space-m: clamp(3rem, calc(4.1749502982vw + 2.0606361829rem), 5.625rem);
  --section-space-l: clamp(3.999rem, calc(7.0592445328vw + 2.4106699801rem), 8.4375rem);
  --section-space-xl: clamp(5.330667rem, calc(11.6510266402vw + 2.709186006rem), 12.65625rem);
  --section-space-xxl: clamp(7.105779111rem, calc(18.8923990282vw + 2.8549893296rem), 18.984375rem);
  --section-padding-x: clamp(1.25rem, calc(3.9761431412vw + 0.3553677932rem), 3.75rem);
  --paragraph-spacing: 1em;
  --heading-spacing: 1.2em;
  --list-spacing: var(--paragraph-spacing);
  --list-indent-spacing: 2em;
  --list-item-spacing: 0.5em;
  --nested-list-indent-spacing: 1em;
  --flow-spacing: var(--paragraph-spacing);
  --figure-spacing: var(--paragraph-spacing);
  --figcaption-spacing: 0.5em;
  --blockquote-spacing: var(--paragraph-spacing);
  --mapped-column-gap: var(--space-m); /* Fallback falls nichts anderes definiert ist */
  --grid-height: auto;
}

.m-t-xxs {
  margin-top: calc(calc(var(--space-xs) / 2) * 2);
}

.m-t-xs {
  margin-top: calc(var(--space-xs) * 2);
}

.m-t-s {
  margin-top: calc(var(--space-s) * 2);
}

.m-t-m {
  margin-top: calc(var(--space-m) * 2);
}

.m-t-l {
  margin-top: calc(var(--space-l) * 2);
}

.m-t-xl {
  margin-top: calc(var(--space-xl) * 2);
}

.m-t-xxl {
  margin-top: calc(var(--space-xxl) * 2);
}

@media (max-width: 768px) {
  .m-sm-t-xxs {
    margin-top: calc(calc(var(--space-xs) / 2) * 2);
  }
  .m-sm-t-xs {
    margin-top: calc(var(--space-xs) * 2);
  }
  .m-sm-t-s {
    margin-top: calc(var(--space-s) * 2);
  }
  .m-sm-t-m {
    margin-top: calc(var(--space-m) * 2);
  }
  .m-sm-t-l {
    margin-top: calc(var(--space-l) * 2);
  }
  .m-sm-t-xl {
    margin-top: calc(var(--space-xl) * 2);
  }
  .m-sm-t-xxl {
    margin-top: calc(var(--space-xxl) * 2);
  }
}
@media (min-width: 768px) {
  .m-mb-t-xxs {
    margin-top: calc(calc(var(--space-xs) / 2) * 2);
  }
  .m-mb-t-xs {
    margin-top: calc(var(--space-xs) * 2);
  }
  .m-mb-t-s {
    margin-top: calc(var(--space-s) * 2);
  }
  .m-mb-t-m {
    margin-top: calc(var(--space-m) * 2);
  }
  .m-mb-t-l {
    margin-top: calc(var(--space-l) * 2);
  }
  .m-mb-t-xl {
    margin-top: calc(var(--space-xl) * 2);
  }
  .m-mb-t-xxl {
    margin-top: calc(var(--space-xxl) * 2);
  }
}
.m-b-xxs {
  margin-bottom: calc(calc(var(--space-xs) / 2) * 2);
}

.m-b-xs {
  margin-bottom: calc(var(--space-xs) * 2);
}

.m-b-s {
  margin-bottom: calc(var(--space-s) * 2);
}

.m-b-m {
  margin-bottom: calc(var(--space-m) * 2);
}

.m-b-l {
  margin-bottom: calc(var(--space-l) * 2);
}

.m-b-xl {
  margin-bottom: calc(var(--space-xl) * 2);
}

.m-b-xxl {
  margin-bottom: calc(var(--space-xxl) * 2);
}

@media (max-width: 768px) {
  .m-sm-b-xxs {
    margin-bottom: calc(calc(var(--space-xs) / 2) * 2);
  }
  .m-sm-b-xs {
    margin-bottom: calc(var(--space-xs) * 2);
  }
  .m-sm-b-s {
    margin-bottom: calc(var(--space-s) * 2);
  }
  .m-sm-b-m {
    margin-bottom: calc(var(--space-m) * 2);
  }
  .m-sm-b-l {
    margin-bottom: calc(var(--space-l) * 2);
  }
  .m-sm-b-xl {
    margin-bottom: calc(var(--space-xl) * 2);
  }
  .m-sm-b-xxl {
    margin-bottom: calc(var(--space-xxl) * 2);
  }
}
@media (min-width: 768px) {
  .m-mb-b-xxs {
    margin-bottom: calc(calc(var(--space-xs) / 2) * 2);
  }
  .m-mb-b-xs {
    margin-bottom: calc(var(--space-xs) * 2);
  }
  .m-mb-b-s {
    margin-bottom: calc(var(--space-s) * 2);
  }
  .m-mb-b-m {
    margin-bottom: calc(var(--space-m) * 2);
  }
  .m-mb-b-l {
    margin-bottom: calc(var(--space-l) * 2);
  }
  .m-mb-b-xl {
    margin-bottom: calc(var(--space-xl) * 2);
  }
  .m-mb-b-xxl {
    margin-bottom: calc(var(--space-xxl) * 2);
  }
}
.m-l-xxs {
  margin-left: calc(calc(var(--space-xs) / 2) * 2);
}

.m-l-xs {
  margin-left: calc(var(--space-xs) * 2);
}

.m-l-s {
  margin-left: calc(var(--space-s) * 2);
}

.m-l-m {
  margin-left: calc(var(--space-m) * 2);
}

.m-l-l {
  margin-left: calc(var(--space-l) * 2);
}

.m-l-xl {
  margin-left: calc(var(--space-xl) * 2);
}

.m-l-xxl {
  margin-left: calc(var(--space-xxl) * 2);
}

@media (max-width: 768px) {
  .m-sm-l-xxs {
    margin-left: calc(calc(var(--space-xs) / 2) * 2);
  }
  .m-sm-l-xs {
    margin-left: calc(var(--space-xs) * 2);
  }
  .m-sm-l-s {
    margin-left: calc(var(--space-s) * 2);
  }
  .m-sm-l-m {
    margin-left: calc(var(--space-m) * 2);
  }
  .m-sm-l-l {
    margin-left: calc(var(--space-l) * 2);
  }
  .m-sm-l-xl {
    margin-left: calc(var(--space-xl) * 2);
  }
  .m-sm-l-xxl {
    margin-left: calc(var(--space-xxl) * 2);
  }
}
@media (min-width: 768px) {
  .m-mb-l-xxs {
    margin-left: calc(calc(var(--space-xs) / 2) * 2);
  }
  .m-mb-l-xs {
    margin-left: calc(var(--space-xs) * 2);
  }
  .m-mb-l-s {
    margin-left: calc(var(--space-s) * 2);
  }
  .m-mb-l-m {
    margin-left: calc(var(--space-m) * 2);
  }
  .m-mb-l-l {
    margin-left: calc(var(--space-l) * 2);
  }
  .m-mb-l-xl {
    margin-left: calc(var(--space-xl) * 2);
  }
  .m-mb-l-xxl {
    margin-left: calc(var(--space-xxl) * 2);
  }
}
.m-r-xxs {
  margin-right: calc(calc(var(--space-xs) / 2) * 2);
}

.m-r-xs {
  margin-right: calc(var(--space-xs) * 2);
}

.m-r-s {
  margin-right: calc(var(--space-s) * 2);
}

.m-r-m {
  margin-right: calc(var(--space-m) * 2);
}

.m-r-l {
  margin-right: calc(var(--space-l) * 2);
}

.m-r-xl {
  margin-right: calc(var(--space-xl) * 2);
}

.m-r-xxl {
  margin-right: calc(var(--space-xxl) * 2);
}

@media (max-width: 768px) {
  .m-sm-r-xxs {
    margin-right: calc(calc(var(--space-xs) / 2) * 2);
  }
  .m-sm-r-xs {
    margin-right: calc(var(--space-xs) * 2);
  }
  .m-sm-r-s {
    margin-right: calc(var(--space-s) * 2);
  }
  .m-sm-r-m {
    margin-right: calc(var(--space-m) * 2);
  }
  .m-sm-r-l {
    margin-right: calc(var(--space-l) * 2);
  }
  .m-sm-r-xl {
    margin-right: calc(var(--space-xl) * 2);
  }
  .m-sm-r-xxl {
    margin-right: calc(var(--space-xxl) * 2);
  }
}
@media (min-width: 768px) {
  .m-mb-r-xxs {
    margin-right: calc(calc(var(--space-xs) / 2) * 2);
  }
  .m-mb-r-xs {
    margin-right: calc(var(--space-xs) * 2);
  }
  .m-mb-r-s {
    margin-right: calc(var(--space-s) * 2);
  }
  .m-mb-r-m {
    margin-right: calc(var(--space-m) * 2);
  }
  .m-mb-r-l {
    margin-right: calc(var(--space-l) * 2);
  }
  .m-mb-r-xl {
    margin-right: calc(var(--space-xl) * 2);
  }
  .m-mb-r-xxl {
    margin-right: calc(var(--space-xxl) * 2);
  }
}
.p-t-xxs {
  padding-top: calc(calc(var(--space-xs) / 2) * 2);
}

.p-t-xs {
  padding-top: calc(var(--space-xs) * 2);
}

.p-t-s {
  padding-top: calc(var(--space-s) * 2);
}

.p-t-m {
  padding-top: calc(var(--space-m) * 2);
}

.p-t-l {
  padding-top: calc(var(--space-l) * 2);
}

.p-t-xl {
  padding-top: calc(var(--space-xl) * 2);
}

.p-t-xxl {
  padding-top: calc(var(--space-xxl) * 2);
}

.p-b-xxs {
  padding-bottom: calc(calc(var(--space-xs) / 2) * 2);
}

.p-b-xs {
  padding-bottom: calc(var(--space-xs) * 2);
}

.p-b-s {
  padding-bottom: calc(var(--space-s) * 2);
}

.p-b-m {
  padding-bottom: calc(var(--space-m) * 2);
}

.p-b-l {
  padding-bottom: calc(var(--space-l) * 2);
}

.p-b-xl {
  padding-bottom: calc(var(--space-xl) * 2);
}

.p-b-xxl {
  padding-bottom: calc(var(--space-xxl) * 2);
}

.p-l-xxs {
  padding-left: calc(calc(var(--space-xs) / 2) * 2);
}

.p-l-xs {
  padding-left: calc(var(--space-xs) * 2);
}

.p-l-s {
  padding-left: calc(var(--space-s) * 2);
}

.p-l-m {
  padding-left: calc(var(--space-m) * 2);
}

.p-l-l {
  padding-left: calc(var(--space-l) * 2);
}

.p-l-xl {
  padding-left: calc(var(--space-xl) * 2);
}

.p-l-xxl {
  padding-left: calc(var(--space-xxl) * 2);
}

.p-r-xxs {
  padding-right: calc(calc(var(--space-xs) / 2) * 2);
}

.p-r-xs {
  padding-right: calc(var(--space-xs) * 2);
}

.p-r-s {
  padding-right: calc(var(--space-s) * 2);
}

.p-r-m {
  padding-right: calc(var(--space-m) * 2);
}

.p-r-l {
  padding-right: calc(var(--space-l) * 2);
}

.p-r-xl {
  padding-right: calc(var(--space-xl) * 2);
}

.p-r-xxl {
  padding-right: calc(var(--space-xxl) * 2);
}

@media (max-width: 768px) {
  .order-sm-1 {
    order: 1;
  }
  .order-sm-2 {
    order: 2;
  }
  .order-sm-3 {
    order: 3;
  }
  .order-sm-4 {
    order: 4;
  }
  .order-sm-5 {
    order: 5;
  }
  .order-sm-6 {
    order: 6;
  }
}
@media (max-width: 960px) {
  .order-md-1 {
    order: 1;
  }
  .order-md-2 {
    order: 2;
  }
  .order-md-3 {
    order: 3;
  }
  .order-md-4 {
    order: 4;
  }
  .order-md-5 {
    order: 5;
  }
  .order-md-6 {
    order: 6;
  }
}
.txt-s {
  font-size: var(--txt-s);
}

.txt-m {
  font-size: var(--txt-m);
}

.txt-l {
  font-size: var(--txt-l);
}

.txt-xl {
  font-size: var(--txt-xl);
}

.txt-xxl {
  font-size: var(--txt-xxl);
}

@media (min-width: 768px) {
  main.case {
    padding-block-start: var(--space-s);
  }
}

.header {
  position: relative;
  padding-inline: var(--space-s);
}
@media (min-width: 768px) {
  .header {
    padding-inline: var(--space-xl);
  }
}
.header__image {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  z-index: -1;
  overflow: hidden;
}
@media (min-width: 768px) {
  .header__image {
    aspect-ratio: unset;
  }
}
.header__image video,
.header__image img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  object-fit: cover;
  height: 100%;
}
@media (min-width: 768px) {
  .header__image video,
  .header__image img {
    position: relative;
    width: 100%;
    height: auto;
  }
}
.header__logo {
  position: absolute;
  height: calc(var(--txt-xxl) * 2);
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.header__logo img {
  height: 100%;
  object-fit: contain;
}
@media (min-width: 768px) {
  .header__logo {
    height: calc(var(--txt-xxl) * 3);
  }
}

.grid:has(.block-type-text) {
  padding-block-start: var(--space-l);
  padding-block-end: var(--space-xxl);
}
.grid:has(.block-type-text) .column:nth-child(2) {
  margin-block-end: var(--space-xl);
}
@media (min-width: 768px) {
  .grid:has(.block-type-text) .column:nth-child(2) {
    margin-block-end: 0;
    padding-inline-start: var(--space-xl);
  }
}
.grid:has(.block-type-text) h1,
.grid:has(.block-type-text) p {
  font-size: var(--txt-xl);
}
.grid:has(.block-type-text) h2 {
  font-family: var(--ff-small-font);
  font-size: var(--txt-s);
  color: var(--clr-neutral-500);
}
.grid:has(.block-type-text) h1 {
  margin-block-end: var(--section-space-xs);
}
.grid:has(.block-type-text) h2 {
  margin-block-end: calc(var(--space-xs) / 2 * 2);
}
@media (min-width: 768px) {
  .grid:has(.block-type-text) h2 {
    margin-block-end: var(--section-space-xs);
  }
}
.grid:has(.block-type-text) .block-type-list {
  font-family: var(--ff-small-font);
  font-size: var(--txt-s);
}

.grid:has(.block-type-text):not(.block-type-heading) .block-type-text {
  margin-block-start: var(--space-l);
  margin-block-end: var(--space-xl);
}

@media (min-width: 768px) {
  .grid:has(.block-type-image) .column[style$="--span:12;"] {
    margin-block-end: var(--space-xs);
  }
}
@media (min-width: 768px) {
  .grid:has(.block-type-image) .column[style$="--span:6;"] {
    margin-block-end: var(--space-xs);
  }
  .grid:has(.block-type-image) .column[style$="--span:6;"]:first-child {
    padding-inline-end: var(--space-xs);
  }
  .grid:has(.block-type-image) .column[style$="--span:6;"]:last-child {
    padding-inline-start: var(--space-xs);
  }
}

.blocks:has(.block-type-heading + .block-type-list) {
  padding-block-start: var(--space-xs);
}

.case__navigation {
  margin-block-start: var(--section-space-l);
  margin-block-end: var(--section-space-m);
}
@media (min-width: 768px) {
  .case__navigation .column {
    grid-column-start: 8;
    padding-inline-start: var(--space-xs);
  }
}
.case__navigation a {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: var(--space-m);
  cursor: pointer;
  border: 1px solid transparent;
  transition: border 0.3s ease-in-out;
}
@media (min-width: 768px) {
  .case__navigation a {
    grid-template-columns: 1fr 1fr;
    grid-gap: var(--space-l);
  }
}
.case__navigation a picture {
  display: block;
  position: relative;
  aspect-ratio: 1;
  width: 50%;
}
@media (min-width: 768px) {
  .case__navigation a picture {
    width: 100%;
  }
}
.case__navigation a picture img {
  object-fit: cover;
  transition: opacity 0.3s ease-in-out;
}
.case__navigation a:hover {
  cursor: url(../../icons/punkt_braun_transparent.svg) 30 30, pointer;
}
.case__navigation a:hover img {
  opacity: 0.3;
  transition: opacity 0.3s ease-in-out;
}
.case__navigation a p {
  color: var(--clr-neutral-500);
}
.case__navigation a p span {
  color: var(--clr-neutral-900);
}
.case__navigation-label {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-xs);
}
@media (min-width: 768px) {
  .case__navigation-label {
    gap: 0;
    padding-block: var(--space-xs);
  }
}