@charset "UTF-8";
:root {
  --primary-color: #ca3730;
  --secondary-color: #9e3462;
  --tertiary-color: #3095aa11;
  --quaternary-color: #9e346211;
  --extra-color: #093a3dbd;
  --extra-color-two: #79435c;
  --box-dark-color: #383838;
  --box-grey-color: #f8f9fa;
  --bg-dark-color: #262626;
  --bs-light-rgb: 245, 245, 245
}

#klaro .cm-modal {
  border-radius: 12px;
  max-width: 560px;
  width: calc(100% - 2rem)
}

@media (max-width:768px) {
  #klaro .cm-modal {
    left: 50% !important;
    margin: 0 !important;
    max-width: none;
    right: auto !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: calc(100% - 2rem)
  }
}

.fm-padding {
  padding: clamp(.5rem, 5vw, 2.5rem) !important
}

.bg-dark {
  background-color: #262626 !important;
  color: #fff
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url(../fonts/inter/inter.woff2) format("woff2")
}

.underlined {
  text-decoration-thickness: from-font
}

.borderline {
  border: 2px solid #efefef
}

.bg-light-grey .borderline {
  border: 2px solid #ddd
}

.client-box {
  align-items: center;
  background-color: #f2f2f2;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  min-width: 120px
}

.client-box img {
  height: auto;
  object-fit: contain
}

@media (max-width:1199px) {
  .client-box {
    min-height: 80px
  }
  .client-box img {
    max-width: 100%
  }
}

@media (min-width:1200px) {
  .client-box {
    min-height: 150px
  }
  .client-box img {
    max-width: 70%
  }
}

.client-swiper {
  display: none
}

.client-swiper .swiper-wrapper {
  transition-timing-function: ease !important;
  will-change: transform
}

.icon-box {
  align-items: center;
  background-color: var(--bg-dark-color);
  border-radius: 8px;
  display: flex;
  height: 60px;
  justify-content: center;
  width: 60px
}

.icon {
  display: inline-block;
  fill: currentColor;
  height: 1em;
  vertical-align: -.125em;
  width: 1em
}

.icon--2x {
  height: 3em;
  width: 3em
}

.icon-15x {
  height: 1.25em;
  width: 1.25em
}

.icon svg {
  height: 100%;
  width: 100%
}

.icon-fa {
  fill: currentColor
}

.clients-static-fallback .swiper-wrapper {
  display: flex;
  flex-wrap: nowrap;
  gap: 25px;
  overflow-x: auto;
  scrollbar-width: none
}

.clients-static-fallback .swiper-wrapper::-webkit-scrollbar {
  display: none
}

.clients-static-fallback .swiper-slide {
  flex: 0 0 auto;
  width: calc(11.11111% - 25px)
}

@media (max-width:1024px) {
  .clients-static-fallback .swiper-slide {
    width: calc(16.66667% - 10px)
  }
}

@media (max-width:768px) {
  .clients-static-fallback .swiper-slide {
    width: calc(25% - 10px)
  }
}

.animate-fade-left,
.animate-fade-right {
  opacity: 0;
  transition: opacity .6s ease-out, transform .6s ease-out;
  will-change: opacity, transform
}

.animate-fade-right {
  transform: translateX(40px)
}

.animate-fade-left {
  transform: translateX(-40px)
}

.animate-fade-left.visible,
.animate-fade-right.visible {
  opacity: 1;
  transform: translateX(0)
}

.animate-fade-left-fast,
.animate-fade-right-fast {
  opacity: 0;
  transition: opacity .3s ease-out, transform .3s ease-out;
  will-change: opacity, transform
}

.animate-fade-right-fast {
  transform: translateX(40px)
}

.animate-fade-left-fast {
  transform: translateX(-40px)
}

.animate-fade-left-fast.visible,
.animate-fade-right-fast.visible {
  opacity: 1;
  transform: translateX(0)
}

.animate-fade-up-fast {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .3s ease-out, transform .3s ease-out;
  will-change: opacity, transform
}

.animate-fade-up-fast.visible {
  opacity: 1;
  transform: translateY(0)
}

.category-filter-project-inner img,
.intention-filter-project-inner img {
  border-radius: 12px;
  height: 174px;
  width: 320px
}

.intention-filter-project {
  border: 0;
  display: inline-block;
  margin: 10px;
  position: relative;
  vertical-align: top;
  width: 320px
}

a.category-filter-project-inner,
a.intention-filter-project-inner {
  display: inline-grid
}

.category-filter-title-container {
  height: 70px
}

a:hover .category-filter-subtitle,
a:hover .category-filter-title {
  color: #000;
  text-decoration: none
}

.category-filter-subtitle,
.category-filter-title {
  color: #000;
  font-size: 15px;
  line-height: 23px;
  text-align: left
}

.category-filter-title {
  color: #000
}

.category-filter-subtitle {
  color: #919191
}

.intention-filter-project:hover {
  cursor: pointer
}

.intention-filter-background {
  xbackground: #2d2d2d
}

.contact-container {
  align-items: center;
  display: grid;
  gap: 50px;
  grid-template-columns: auto auto;
  justify-content: center
}

.contact-left {
  display: grid;
  gap: 5px;
  justify-items: end;
  text-align: right
}

.contact-right {
  display: grid;
  gap: 5px;
  justify-items: start
}

.contact-row {
  align-items: center;
  display: flex;
  gap: 10px;
  height: 50px
}

.arrow {
  font-size: 40px;
  transform: rotate(0deg)
}

.arrow,
.footer-arrow {
  animation: slide-in .5s forwards;
  opacity: 0
}

.footer-arrow {
  font-size: 20px;
  transform: rotate(90deg)
}

.text {
  animation: slide-in 1s forwards;
  opacity: 0
}

@keyframes slide-in {
  0% {
    opacity: 0;
    transform: translateX(-30px)
  }
  to {
    opacity: 1;
    transform: translateX(0)
  }
}

@keyframes fade-in {
  0% {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

.callus {
  color: blue;
  font-size: 20px;
  font-weight: 700;
  text-decoration: none
}

@media (max-width:768px) {
  .contact-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 0
  }
  @keyframes slide-in-mobile {
    0% {
      opacity: 0;
      transform: translateY(-20px) rotate(90deg)
    }
    to {
      opacity: 1;
      transform: translateY(0) rotate(90deg)
    }
  }
  .contact-left,
  .contact-right {
    display: contents
  }
  .contact-row:first-child {
    order: 1
  }
  .phone-link {
    order: 2
  }
  .contact-row:nth-child(2) {
    order: 3
  }
  .email-link {
    order: 4
  }
  .arrow,
  .email-arrow {
    animation: slide-in-mobile .5s forwards;
    font-size: 25px
  }
}

.contact-button-container {
  margin: 0 0 5px
}

.contact-button-container .btn,
.contact-button-container-above .btn {
  border: 0;
  padding: 10px 25px;
  white-space: normal
}

.contact-button-container-above .btn {
  background-color: #666;
  color: #fff;
  font-size: 1.25rem;
  font-style: normal
}

@media (max-width:767px) {
  .contact-button-container .btn {
    font-size: 26px
  }
}

.category-content {
  margin-bottom: 20px;
  margin-top: 20px
}

.category-header {
  background: #ccc;
  margin: -2px;
  position: relative
}

.category-header video {
  max-height: calc(100vh - 60px);
  object-fit: cover;
  object-position: center;
  position: static;
  width: 100%
}

@media (min-width:768px) {
  .category-header video {
    max-height: calc(100vh - 150px)
  }
}

/* ===== BTS Bento Grid ===== */

.bts-tile-container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 130px;
  grid-auto-flow: dense;
  gap: 10px;
  margin: 2.5rem 0;
}

.tile {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background-color: #111;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.45s ease;
}

.tile::after {
  /* dezenter Verlauf oben drüber, damit spätere Overlays/Icons lesbar bleiben */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.25), transparent 40%);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.tile:hover {
  transform: scale(1.03);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  z-index: 2;
}

.tile:hover::after {
  opacity: 1;
}

/* Kachelgrößen für das unregelmäßige Bento-Muster */
.size-s { grid-column: span 2; grid-row: span 1; }
.size-m { grid-column: span 2; grid-row: span 2; }
.size-l { grid-column: span 3; grid-row: span 2; }

/* Foto- & Video-Kacheln: Klick-Vergrößerung ohne Overlay */
.tile-photo,
.tile-video {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.5s ease;
  cursor: zoom-in;
}

.tile-photo.is-expanded,
.tile-video.is-expanded {
  z-index: 30;
  cursor: zoom-out;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.45);
  /* transform (scale + Wachstumsrichtung) wird per JS inline gesetzt,
     da die passende Zoomstufe von der Position im Viewport abhängt */
}

/* Foto-Kacheln */
.tile-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Video-Kacheln */
.bts-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tile-video-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25);
  opacity: 0.85;
}

/* Responsive: weniger Spalten auf kleineren Screens */
@media (max-width: 900px) {
  .bts-tile-container {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 110px;
  }
  .size-l { grid-column: span 2; }
}

@media (max-width: 560px) {
  .bts-tile-container {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 150px;
    gap: 8px;
  }
  /* Statt alles gleich groß zu machen, bleibt die Bento-Varianz erhalten:
     size-s = kleine quadratische Kachel, size-m = hohe Kachel,
     size-l = große, volle Breite */
  .size-s { grid-column: span 1; grid-row: span 1; }
  .size-m { grid-column: span 1; grid-row: span 2; }
  .size-l { grid-column: span 2; grid-row: span 2; }
}

/* Responsive: weniger Spalten auf kleineren Screens */
@media (max-width: 900px) {
  .bts-tile-container {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 110px;
  }
  .size-l { grid-column: span 2; }
}
 
@media (max-width: 560px) {
  .bts-tile-container {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 150px;
    gap: 8px;
  }
  /* Statt alles gleich groß zu machen, bleibt die Bento-Varianz erhalten:
     size-s = kleine quadratische Kachel, size-m = hohe Kachel,
     size-l = große, volle Breite */
  .size-s { grid-column: span 1; grid-row: span 1; }
  .size-m { grid-column: span 1; grid-row: span 2; }
  .size-l { grid-column: span 2; grid-row: span 2; }
}

.fm-project-scroller {
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 100vw;
  z-index: 1
}

@keyframes scrollText {
  0% {
    transform: translateX(0)
  }
  to {
    transform: translateX(-100%)
  }
}

.m-scroll {
  animation-duration: 100s;
  animation-iteration-count: infinite;
  animation-name: scrollText;
  animation-timing-function: linear;
  display: flex;
  height: 100%;
  justify-content: space-between;
  margin: 0;
  overflow: hidden;
  padding: 10px;
  white-space: nowrap;
  width: fit-content
}

.m-scroll-start-when-visible,
.m-scroll:hover {
  animation-play-state: paused
}

.fm-pagination-projects {
  background: rgba(0, 0, 0, .1);
  bottom: 0 !important;
  height: 2px;
  position: relative !important;
  width: 50% !important;
  z-index: 10
}

.swiper-pagination-bullet-active {
  background-color: var(--primary-color) !important
}

.swiper-container {
  margin: auto;
  max-width: 100%;
  overflow: hidden;
  width: 100%
}

.swiper-slide img {
  border-radius: 10px;
  height: auto;
  width: 100%
}

.swiper-clients-center {
  align-items: center !important;
  display: flex
}

.invertclients {
  filter: invert(1)
}

.swiper-wrapper {
  transition-timing-function: linear !important;
  will-change: transform
}

.ratings-swiper .swiper-wrapper {
  transition-timing-function: ease !important;
  will-change: transform
}

.ratings-area .swiper-pagination {
  margin: 0 auto;
  position: static !important
}

.ratings-area .swiper-nav-buttons {
  position: static !important
}

.film-stills-swiper .swiper-slide {
  align-items: center;
  display: flex;
  justify-content: center
}

.film-stills-swiper .swiper-slide img {
  display: block;
  height: auto;
  max-width: 70%;
  object-fit: contain;
  width: auto
}

.film-stills-swiper .swiper-wrapper {
  backface-visibility: hidden;
  transition-timing-function: ease !important;
  will-change: transform
}

.ratings-swiper {
  width: 100%
}

.projects-swiper .swiper-wrapper,
.project-videos-swiper .swiper-wrapper,
.social-media-videos-swiper .swiper-wrapper,
.all-social-media-videos-swiper .swiper-wrapper {
  transition-timing-function: ease !important;
  will-change: transform;
  height: 100%
}

.projects-swiper {
  padding-bottom: 30px;
  position: relative;
  width: 95%
}

.scenario-swiper-wrapper {
  transition-timing-function: ease !important;
  will-change: transform
}

.scenario-image-box {
  align-items: center;
  aspect-ratio: 16/9;
  border-radius: 16px;
  display: flex;
  justify-content: center;
  overflow: hidden;
  width: 100%
}

.scenario-image-box img {
  border-radius: 10px;
  height: 100%;
  object-fit: contain;
  width: 100%
}

.swiper-button-prev {
  border-radius: 50%;
  color: #000 !important;
  font-size: 20px;
  padding: 10px
}

.swiper-button-prev:hover {
  color: var(--primary-color) !important;
  transform: scale(1.1);
  transition: all .3s ease
}

.swiper-button-next {
  border-radius: 50%;
  color: #000 !important;
  font-size: 20px;
  padding: 10px
}

.swiper-button-next:hover {
  color: var(--primary-color) !important;
  transform: scale(1.1);
  transition: all .3s ease
}

.swiper-pagination-bullet {
  color: #000
}

.swipe-scroller-container {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  overflow-y: hidden;
  scrollbar-width: none
}

.swipe-scroller-container::-webkit-scrollbar {
  display: none
}

.swipe-scroller {
  animation: none;
  display: flex;
  height: 100%;
  justify-content: center;
  margin: 0;
  min-width: 100%;
  transition-duration: .5s;
  transition-property: transform;
  white-space: nowrap;
  width: fit-content
}

.swipe-scroller-item {
  display: inline-block
}

.swipe-scroller-center-snap {
  scroll-snap-align: center
}

.swiper-videocarousel-wrapper {
  transition-timing-function: cubic-bezier(.87, 0, .13, 1)
}

@media (min-width:768px) {
  .swipe-scroller-center-nosnap-desktop {
    scroll-snap-align: none
  }
}

@media (max-width:767px) {
  .swipe-scroller {
    padding: 0
  }
}

.project-videos-item {
  aspect-ratio: 16/9;
  width: 70vw
}

.project-videos-item:first-child {
  margin-left: 15vw
}

.project-videos-item:last-child {
  margin-right: 15vw
}

@media (max-width:767px) {
  .project-videos-item {
    width: 90vw
  }
  .project-videos-item:first-child {
    margin-left: 5vw
  }
  .project-videos-item:last-child {
    margin-right: 5vw
  }
}

.project-videos-item {
  padding: 4px
}

.project-videos-item iframe {
  height: 100%;
  width: 100%
}

.fm-project-scroller-swiper {
  max-width: 1350px;
  padding-bottom: 50px;
  position: relative;
  width: 100%
}

.fm-project-scroller-swiper .swiper-slide {
  display: flex;
  justify-content: center
}

.fm-project-scroller-swiper .item {
  align-items: flex-start;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  width: 100%
}

.fm-project-scroller-swiper .item a {
  aspect-ratio: 16/9;
  background-position: 50%;
  background-size: cover;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .3);
  display: block;
  overflow: hidden;
  position: relative;
  transition: box-shadow .2s;
  width: 100%
}

.fm-project-scroller-swiper .item a:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, .35);
  cursor: pointer
}

.fm-project-scroller-swiper .item a:after {
  align-items: center;
  background: rgba(0, 0, 0, .7);
  border-radius: 12px;
  color: hsla(0, 0%, 100%, .95);
  content: "Jetzt ansehen";
  display: flex;
  font-size: 30px;
  font-weight: 700;
  inset: 0;
  justify-content: center;
  opacity: 0;
  position: absolute;
  text-align: center;
  transition: opacity .2s
}

.fm-project-scroller-swiper .item a:hover:after {
  opacity: 1
}

.fm-project-scroller-swiper .below-title {
  margin-top: 6px;
  width: 100%
}

.fm-project-scroller-swiper .below-title .title {
  color: #000;
  font-size: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.fm-project-scroller-swiper .below-title .subtitle {
  color: #919191;
  font-size: 16px
}

.fm-pagination-projects {
  background: rgba(1, 0, 0, 0) !important;
  height: 4px;
  margin: 20px auto 0;
  position: relative;
  width: 50%
}

.swiper-pagination-progressbar-fill {
  background: rgba(0, 0, 0, .1) !important;
  height: 50% !important
}

@media (max-width:767px) {
  .fm-project-scroller-swiper .item {
    width: 100%
  }
  .fm-project-scroller-swiper .below-title .subtitle,
  .fm-project-scroller-swiper .below-title .title {
    font-size: 15px
  }
  .fm-project-scroller-swiper .item a:after {
    font-size: 24px
  }
}

.fm-project-scroller .item {
  color: #fff;
  display: inline-block;
  float: left;
  height: 234px;
  margin: 0 20px 0 0;
  padding: 0;
  width: 320px
}

@media (max-width:767px) {
  .fm-project-scroller .item {
    height: 200px;
    width: 250px
  }
}

.fm-project-scroller.projects-scroller-social-media .item {
  width: 300px
}

.fm-project-scroller.projects-alternating .item {
  margin-left: -150px
}

.fm-project-scroller.projects-alternating .item.upper {
  margin-top: 0
}

.fm-project-scroller.projects-alternating .item.lower {
  margin-top: 250px
}

.fm-project-scroller.projects-scroller-social-media .item {
  height: 533px
}

.fm-project-scroller .item a {
  background-position: center 20%;
  background-size: cover;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .3);
  display: block;
  height: 100%;
  margin-left: 20px;
  position: relative;
  transition: box-shadow .2s;
  width: 100%
}

.fm-project-scroller .item .below-title {
  margin-left: 20px;
  margin-top: 6px;
  width: 300px
}

.fm-project-scroller .item .below-title .title {
  color: #000;
  font-size: 18px;
  overflow: hidden;
  text-overflow: fade
}

.fm-project-scroller .item .below-title .subtitle {
  color: #919191;
  font-size: 16px
}

@media (max-width:767px) {
  .fm-project-scroller .item .below-title .subtitle,
  .fm-project-scroller .item .below-title .title {
    font-size: 15px
  }
}

.fm-project-scroller.with-title-below .item a {
  height: calc(100% - 52px)
}

.fm-project-scroller .item a:hover {
  cursor: pointer;
  transition: box-shadow .2s
}

@media (max-width:767px) {
  .intention-projects {
    text-align: center
  }
}

.fm-project-scroller .item,
.intention-projects .intention-filter-project a {
  position: relative
}

.fm-project-scroller .item a:after,
.intention-projects .intention-filter-project a:after {
  background: rgba(0, 0, 0, .7);
  border-radius: 12px;
  bottom: 0;
  color: hsla(0, 0%, 100%, .95);
  content: "Jetzt ansehen";
  font-size: 30px;
  font-weight: 700;
  height: 100%;
  left: 0;
  line-height: 174px;
  opacity: 0;
  position: absolute;
  text-align: center;
  width: 100%
}

@media (max-width:767px) {
  .fm-project-scroller .item a:after,
  .intention-projects .intention-filter-project a:after {
    font-size: 24px;
    line-height: 165px
  }
}

.fm-project-scroller .item a:hover:after,
.intention-projects .intention-filter-project a:hover:after {
  opacity: 1;
  transition: opacity .2s
}

.below-title .title {
  font-size: 15px;
  margin-top: 6px
}

.below-title .subtitle {
  color: #919191;
  font-size: 16px
}

@media (max-width:767px) {
  .below-title .title {
    font-size: 15px
  }
}

.team-img {
  border-radius: 10%;
  display: block;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  max-width: 70%;
  object-fit: contain
}

.fm-carousel-page {
  display: inline-block;
  position: relative
}

.fm-carousel-page:first-child {
  animation-duration: 30s;
  animation-iteration-count: infinite;
  animation-name: scrollCarouselFade1;
  animation-timing-function: linear
}

.fm-carousel-page:nth-child(2) {
  animation-duration: 30s;
  animation-iteration-count: infinite;
  animation-name: scrollCarouselFade2;
  animation-timing-function: linear
}

.fm-carousel-page:nth-child(3) {
  animation-duration: 30s;
  animation-iteration-count: infinite;
  animation-name: scrollCarouselFade3;
  animation-timing-function: linear
}

.fm-carousel-page:nth-child(4) {
  animation-duration: 30s;
  animation-iteration-count: infinite;
  animation-name: scrollCarouselFade1;
  animation-timing-function: linear
}

.fm-carousel-page:nth-child(5) {
  animation-duration: 30s;
  animation-iteration-count: infinite;
  animation-name: scrollCarouselFade2;
  animation-timing-function: linear
}

.fm-carousel-page:nth-child(6) {
  animation-duration: 30s;
  animation-iteration-count: infinite;
  animation-name: scrollCarouselFade3;
  animation-timing-function: linear
}

a.fm-carousel-play-video {
  background: #505050;
  border: 2px solid #ddd;
  border-radius: 6px;
  color: #ddd;
  font-size: 20px;
  padding: 8px 14px;
  text-decoration: none
}

a.fm-carousel-play-video:hover {
  background: rgba(80, 80, 80, .5)
}

@media (min-width:768px) {
  .fm-carousel-page {
    width: 750px
  }
}

@media (min-width:992px) {
  .fm-carousel-page {
    width: 970px
  }
}

@media (min-width:1200px) {
  .fm-carousel-page {
    width: 1170px
  }
}

@keyframes scrollCarousel {
  0% {
    transform: translateX(0)
  }
  32% {
    transform: translateX(0)
  }
  34% {
    transform: translateX(-16.5%)
  }
  65% {
    transform: translateX(-16.5%)
  }
  67% {
    transform: translateX(-33%)
  }
  99% {
    transform: translateX(-33%)
  }
  to {
    transform: translateX(-50%)
  }
}

@keyframes scrollCarouselFade1 {
  0% {
    opacity: .2
  }
  32% {
    opacity: .2
  }
  65% {
    opacity: .2
  }
  67% {
    opacity: 1
  }
  98% {
    opacity: 1
  }
}

@keyframes scrollCarouselFade2 {
  0% {
    opacity: 1
  }
  32% {
    opacity: 1
  }
  34% {
    opacity: .2
  }
  98% {
    opacity: .2
  }
  to {
    opacity: 1
  }
}

@keyframes scrollCarouselFade3 {
  0% {
    opacity: .2
  }
  32% {
    opacity: .2
  }
  34% {
    opacity: 1
  }
  65% {
    opacity: 1
  }
  67% {
    opacity: .2
  }
  to {
    opacity: .2
  }
}

.rating-slide {
  align-items: stretch;
  display: flex !important
}

.rating-card {
  background: #f8f8f8;
  background: #fff;
  border: 2px solid #efefef;
  border-radius: 12px;
  flex: 1 1 auto;
  padding: 15px 15px 75px;
  position: relative;
  width: 100%
}

.rating-card.first-card {
  background: #f8f9fa;
  border: none
}

.rating-card .rating-title {
  margin-top: 0
}

.rating-icon {
  border: 4px solid #f2f2f2;
  height: 64px !important;
  width: 64px !important
}

.stars-rating {
  color: #d2b395
}

.rating-card img {
  border-radius: 50%
}

.custom-ablauf {
  max-width: 1000px
}

.ablauf {
  position: relative
}

.black-box {
  background: linear-gradient(0deg, #262626 0, #262626 calc(100% - 10px), rgba(38, 38, 38, 0));
  height: 70vh;
  left: 0;
  pointer-events: none;
  top: 0;
  visibility: visible;
  width: 100%;
  z-index: 9
}

.glow-line {
  background: #fff;
  border-radius: 2px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 2px;
  z-index: 1
}

.step-icon {
  background: #fff;
  border-radius: 4px;
  color: var(--bg-dark-color);
  display: block;
  padding: 6px;
  position: relative;
  transform-origin: center;
  will-change: transform, filter, opacity;
  z-index: 999
}

.glow-icon-wrapper {
  height: 80px;
  z-index: 2
}

@keyframes neonPulseFade {
  0% {
    filter: drop-shadow(0 0 6px rgb(202, 55, 48)) drop-shadow(0 0 18px rgba(255, 80, 70, .8))
  }
  50% {
    filter: drop-shadow(0 0 14px rgb(202, 55, 48)) drop-shadow(0 0 30px rgba(255, 80, 70, .9))
  }
  to {
    filter: drop-shadow(0 0 14px rgba(202, 55, 48, 0)) drop-shadow(0 0 30px rgba(255, 80, 70, 0))
  }
}

@keyframes neonScale {
  0% {
    opacity: 1;
    transform: scale(1)
  }
  50% {
    opacity: 1;
    transform: scale(1.2)
  }
  to {
    opacity: 1;
    transform: scale(1)
  }
}

.step-icon.glow-animate {
  animation: neonPulseFade .5s ease-out forwards, neonScale .5s ease-out forwards
}

.flex-fill {
  flex: 1
}

.glow-icon-wrapper,
.row.align-items-stretch>.col-auto {
  align-items: center;
  display: flex
}

.glow-icon-wrapper {
  height: 100%;
  justify-content: center;
  position: relative;
  width: 80px
}

#target-container,
.zindex-10 {
  position: relative
}

.zindex-10 {
  z-index: 10
}

.zindex-20 {
  position: relative;
  z-index: 20
}

.leistungen .bg-light-grey {
  padding-top: 50px
}

.service-box {
  background: #fff;
  border: 2px solid #efefef;
  border-radius: 16px;
  display: flex;
  flex: 1;
  flex-direction: column;
  height: 100%;
  justify-content: flex-start;
  padding: 0 30px 75px
}

.service-row {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px
}

.service-col {
  display: flex;
  flex-direction: column;
  margin-bottom: 30px
}

.shiny-box {
  align-items: center;
  background: var(--box-dark-color);
  border-radius: 12px;
  box-shadow: 0 4px 50px rgba(0, 0, 0, .3);
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  margin: 20px auto;
  max-width: 1000px;
  padding: 40px;
  width: 100%
}

.shiny-box strong {
  font-weight: 700
}

.shiny-box-2 {
  box-shadow: 0 4px 50px rgba(0, 0, 0, .3);
  max-width: 1300px
}

.shiny-box-2,
.shiny-box-3 {
  align-items: center;
  border-radius: 12px;
  display: flex;
  flex-wrap: wrap;
  margin: 20px auto;
  padding: 40px;
  width: 100%
}

.shiny-box-3 {
  max-width: 1000px
}

.max-width-1000 {
  max-width: 1000px !important;
  width: 100%
}

.max-width-1175 {
  max-width: 1175px !important;
  width: 100%
}

.shiny-box-4 {
  align-items: center;
  background: var(--box-dark-color);
  border-radius: 12px;
  box-shadow: 0 4px 50px rgba(0, 0, 0, .3);
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  margin: 20px auto;
  max-width: 1000px;
  padding: 2rem;
  width: 100%
}

.shiny-box.withglowline {
  display: block;
  margin: 0;
  width: 100%
}

.marker-shadow {
  box-shadow: inset 0 -.1em 0 var(--secondary-color);
  padding: 0 2px
}

.faq-question-box {
  border-radius: 12px;
  cursor: pointer;
  margin: 4px auto;
  max-width: 800px;
  padding: 16px;
  transition: background .5s ease
}

a.faq-link {
  font-weight: 500
}

a.faq-link:after {
  content: "\f35d";
  font-family: Font Awesome\ 6 Free;
  font-size: .85em;
  font-weight: 900;
  margin-left: 6px
}

.faq-header {
  align-items: center;
  display: flex;
  justify-content: space-between
}

.faq-toggle-icon {
  font-size: 24px;
  transition: transform .5s ease
}

.answer {
  height: 0;
  overflow: hidden;
  transition: height .5s ease
}

.answer-inner {
  padding-top: 10px
}

.fm-button {
  border: 1px solid;
  color: #262626;
  overflow: hidden;
  padding: .4rem 1.25rem;
  position: relative;
  text-decoration: none;
  transition: transform .2s ease-in-out;
  z-index: 0
}

.fm-button,
.fm-button:after {
  border-radius: 3rem;
  will-change: transform
}

.fm-button:after {
  background-color: #262626;
  content: "";
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transform: translate(-100%) rotate(10deg);
  transform-origin: top left;
  transition: transform .2s ease-out;
  width: 100%;
  z-index: -1
}

.fm-button:hover:after {
  transform: translate(0)
}

.fm-button:hover {
  border: 1px solid transparent;
  color: #fff;
  transform: scale(1.05);
  will-change: transform
}

.fm-button-lg {
  font-size: 1.25rem;
  padding: .6rem 1.75rem;
}

.fm-button-xl {
  font-size: 1.5rem;
  padding: .75rem 2rem;
}

.logo-footer {
  margin-left: -.55rem
}

@media (max-width:991px) {
  .footer-contact {
    text-align: left
  }
}

body,
html {
  overflow-x: hidden
}

.fm-startpage-category-item {
  align-items: center;
  max-height: calc(86vh - 50px);
  overflow: hidden;
  position: relative;
  scroll-snap-align: end
}

.fm-startpage-category-item video {
  aspect-ratio: 16/9;
  display: block;
  height: calc(100vh - 50px);
  height: auto;
  max-height: calc(100vh - 150px);
  object-fit: cover;
  object-position: center;
  position: inherit;
  width: 100%
}

@media (max-width:767px) {
  .fm-startpage-category-item {
    height: fit-content
  }
  .fm-startpage-category-item video {
    aspect-ratio: 4/5;
    height: auto;
    max-height: calc(100vh - 50px);
    object-fit: cover;
    object-position: center;
    width: 100%
  }
  h1,
  h2 {
    font-size: 2rem
  }
  h3 {
    font-size: 1.5rem
  }
}

.abovethefold-b5 {
  overflow: hidden;
  scroll-snap-align: end
}

.abovethefold-b5 video {
  aspect-ratio: 16/9;
  display: block;
  height: calc(100vh - 50px);
  height: auto;
  max-height: calc(100vh - 150px);
  object-fit: cover;
  object-position: center;
  position: inherit;
  width: 100%
}

.abovethefold {
  color: #fff;
  scroll-snap-align: end
}

.abovethefold video {
  aspect-ratio: 16/9;
  display: block;
  height: calc(100vh - 50px);
  height: auto;
  max-height: calc(100vh - 150px);
  object-fit: cover;
  object-position: center;
  position: inherit;
  width: 100%
}

@media (max-width:767px) {
  .abovethefold {
    height: fit-content
  }
  .abovethefold video {
    aspect-ratio: 4/5;
    height: auto;
    max-height: calc(100vh - 50px);
    object-fit: cover;
    object-position: center;
    width: 100%
  }
  .movevideo {
    margin-left: 0 !important
  }
}

.abovethefold {
  overflow: hidden;
  position: relative;
  width: 100%
}

@media (max-width:767.98px) {
  .abovethefold {
    flex-direction: column
  }
}

.more-text {
  display: none;
  margin-top: 10px
}

.toggle-btn {
  background-color: var(--primary-color);
  border: none;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  margin-top: 10px;
  padding: 8px 15px
}

.toggle-btn:hover {
  background-color: var(--secondary-color)
}

.dots {
  display: inline
}

.movevideo {
  margin-left: 35%
}

.header-video-overlay-transition {
  background: linear-gradient(90deg, #000 40%, rgba(0, 0, 0, .5) 55%, transparent 70%);
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%
}

@media (max-width:768px) {
  .header-video-overlay-transition {
    background: linear-gradient(180deg, rgba(0, 0, 0, .7) 40%, rgba(0, 0, 0, .7) 90%, rgba(0, 0, 0, .7))
  }
}

.elements-container-category {
  height: auto;
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  z-index: 2
}

@media (min-width:992px) {
  .elements-container-category {
    left: 50%;
    margin-left: -475px;
    max-width: 970px
  }
}

@media (min-width:1200px) {
  .elements-container-category {
    left: 50%;
    margin-left: -575px;
    max-width: 1170px
  }
}

.fm-startpage-category {
  margin: 0;
  overflow: hidden;
  padding: 0;
  width: 100vw;
  z-index: 1
}

.benefits {
  color: #fff;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  list-style: none;
  margin-top: 30px;
  text-shadow: 0 0 4px rgba(0, 0, 0, .3)
}

.abovethefold-caption {
  bottom: 120px;
  left: 10%
}

.abovethefold-caption .lead {
  text-wrap: balance
}

@media (min-width:768px) {
  .abovethefold-caption {
    margin-bottom: 10px
  }
}

a.fm-startpage-category-play-video {
  background: #505050;
  border: 2px solid #ddd;
  border-radius: 6px;
  color: #ddd;
  font-size: 20px;
  padding: 8px 14px;
  text-decoration: none
}

a.fm-startpage-category-play-video:hover {
  background: rgba(80, 80, 80, .5)
}

.social-container img {
  height: 48px;
  width: 48px
}

button.btn-primary {
  border: none !important
}

.btn.btn-primary {
  align-items: center;
  background: var(--primary-color);
  border-radius: 30px;
  display: inline-flex;
  overflow: hidden;
  padding: .4rem 1.25rem;
  position: relative;
  transition: all .3s ease
}

.btn.btn-primary:after {
  border-bottom: 6px solid transparent;
  border-left: 8px solid #fff;
  border-top: 6px solid transparent;
  content: "";
  display: inline-block;
  height: 0;
  opacity: 0;
  transform: translateX(-5px);
  transition: all .3s ease;
  width: 0
}

.btn.btn-primary:hover {
  background: var(--secondary-color);
  gap: .5rem;
  padding-left: 2rem;
  padding-right: 2rem
}

.btn.btn-primary:hover:after {
  opacity: 1;
  transform: translateX(0)
}

#klaro .klaro .cm-btn,
#klaro .klaro .cm-btn.cm-btn-danger,
#klaro .klaro .cm-btn.cm-btn-success {
  align-items: center;
  background: var(--primary-color) !important;
  border: none !important;
  border-radius: 30px !important;
  color: #fff !important;
  display: inline-flex;
  gap: 0;
  overflow: hidden;
  padding: .4rem 1.25rem !important;
  position: relative;
  transition: all .3s ease
}

#klaro .klaro .cm-btn:after {
  border-bottom: 6px solid transparent;
  border-left: 8px solid #fff;
  border-top: 6px solid transparent;
  content: "";
  display: inline-block;
  height: 0;
  opacity: 0;
  transform: translateX(-5px);
  transition: all .3s ease;
  width: 0
}

#klaro .klaro .cm-btn:hover {
  background: var(--secondary-color) !important;
  gap: .5rem;
  padding-left: 2rem !important;
  padding-right: 2rem !important
}

#klaro .klaro .cm-btn:hover:after {
  opacity: 1;
  transform: translateX(0)
}

#klaro .klaro .cm-btn.cm-btn-danger {
  background: #6c757d !important;
  border: none !important;
  border-radius: 30px !important;
  color: #fff !important;
  padding: .4rem 1.25rem !important
}

#klaro .klaro .cm-btn.cm-btn-danger:after {
  display: none !important
}

#klaro .klaro .cm-btn.cm-btn-danger:hover {
  background: #5a6268 !important
}

#klaro .cookie-modal .cm-footer-buttons {
  display: flex !important;
  flex-direction: column !important;
  gap: .75rem !important
}

#klaro .cookie-modal .cm-footer-buttons .cm-btn {
  justify-content: center !important;
  width: 100% !important
}

#klaro .cm-btn-accept-all {
  order: 1
}

#klaro .cm-btn-accept {
  order: 2
}

#klaro .cm-btn-decline {
  order: 3
}

#klaro .cm-header p,
#klaro .cm-list-description,
#klaro .cm-service p,
#klaro .purposes,
#klaro p.purposes {
  font-size: clamp(.85rem, 1.3vw, .95rem) !important;
  font-weight: 350 !important;
  line-height: 1.3 !important
}

#klaro .cm-content,
#klaro .cm-footer,
#klaro .cm-list-description,
#klaro .cm-list-label,
#klaro .cm-purpose,
#klaro .cm-service {
  border: none !important
}

#klaro .cm-toggle-all {
  display: none
}

#klaro .cm-list-input:checked+.cm-list-label .slider.round {
  background: #262626 !important;
  background-color: #262626 !important
}

.borderino {
  border-radius: 16px;
  overflow: hidden
}

.addborder {
  border: 2px solid #efefef;
  border-radius: 16px;
  overflow: hidden
}

.bg-dark-grey {
  background-color: #262626;
  color: #fff
}

.bg-light-grey {
  background-color: #f2f2f2;
  color: #262626
}

.bg-white {
  background-color: #fff;
  color: #262626
}

.aspect-ratio {
  max-width: none
}

.navbar {
  background-color: #262626;
  transition: top .3s ease
}

.navbar .navbar-brand,
.navbar .navbar-nav>li>a {
  color: #fff
}

.navbar .navbar-brand:hover,
.navbar .navbar-nav>li>a:hover {
  color: #ddd
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E")
}

.navbar-nav .nav-item.active>a {
  color: #f8f9fa
}

.nav-link.navbar-btn-custom {
  align-items: center;
  background: var(--primary-color) !important;
  border: none !important;
  border-radius: 20px !important;
  color: #fff !important;
  display: inline-flex;
  justify-content: center;
  line-height: 1 !important;
  min-height: 0 !important;
  overflow: hidden;
  padding: 8px 12px !important;
  position: relative;
  text-decoration: none !important;
  transition: all .3s ease !important
}

.nav-link.navbar-btn-custom:after {
  border-bottom: 6px solid transparent;
  border-left: 8px solid #fff;
  border-top: 6px solid transparent;
  content: "";
  height: 0;
  opacity: 0;
  transform: translateX(-5px);
  transition: all .3s ease;
  width: 0
}

.nav-link.navbar-btn-custom:focus,
.nav-link.navbar-btn-custom:hover {
  background: #267a8e !important;
  color: #fff !important;
  gap: .5rem;
  padding-left: 16px !important;
  padding-right: 16px !important
}

.nav-link.navbar-btn-custom:hover:after {
  opacity: 1;
  transform: translateX(0)
}

.navbar.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1030
}

.navbar-placeholder {
  height: 56px
}

.dropdown-menu {
  border: none !important
}

.fm-icon {
  color: #fff !important
}

.category-content {
  hyphens: auto
}

.showreel-video-container {
  position: relative
}

.start-video-button {
  cursor: pointer;
  text-align: center
}

.carousel-indicators .active,
.carousel-indicators li {
  height: 17px;
  margin: 2px;
  width: 17px
}

.multistep-form {
  width: 100%
}

.multistep-form .form-step {
  display: none;
  width: 100%
}

.multistep-form .form-step.current {
  display: block
}

.project-sm-videos-container {
  padding: 0 80px;
  position: relative
}

.project-sm-videos-scroller {
  margin: 40px 0;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none
}

.project-sm-videos-scrolling {
  text-align: center;
  white-space: nowrap
}

.project-sm-videos-scrolling .item {
  display: inline-block;
  margin-left: 90px;
  width: 360px
}

iframe.vimeo-sm {
  height: 640px;
  width: 360px
}

@media (max-width:480px) {
  iframe.vimeo-sm {
    height: 427px;
    width: 240px
  }
}

.project-sm-videos-container .carousel-control {
  background: none;
  width: 80px;
  z-index: 10
}

a:focus,
a:hover {
  color: var(--primary-color)
}

.intention-projects a:focus,
.intention-projects a:hover {
  text-decoration: none
}

.social-media-videos-item {
  margin-left: 20px
}

.intention-filter-widget {
  margin: auto;
  max-width: 1720px
}

@media (max-width:1740px) {
  .intention-filter-widget {
    max-width: 1380px
  }
}

@media (max-width:1400px) {
  .intention-filter-widget {
    max-width: 1040px
  }
}

.callus {
  background: #f8f8f8;
  border-radius: 8px;
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-weight: 500;
  margin-top: 5px;
  padding: 12px 20px;
  text-align: center;
  user-select: none;
  width: 300px
}

.callus:hover {
  background: var(--primary-color);
  color: #fff;
  text-decoration: none
}

.intention-filter-btn {
  border: 1px solid;
  border-radius: 3rem;
  color: #262626;
  overflow: hidden;
  padding: .4rem 1.25rem;
  position: relative;
  text-decoration: none;
  transition: transform .2s ease-in-out, color .2s ease, background-color .2s ease;
  user-select: none;
  will-change: transform;
  z-index: 0
}

.intention-filter-btn:after {
  background-color: #262626;
  border-radius: 3rem;
  content: "";
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transform: translate(-100%) rotate(10deg);
  transform-origin: top left;
  transition: transform .2s ease-out;
  width: 100%;
  will-change: transform;
  z-index: -1
}

.intention-filter-btn:hover:after {
  transform: translate(0)
}

.intention-filter-btn:hover {
  border: 1px solid transparent;
  color: #fff;
  transform: scale(1.05);
  will-change: transform
}

.intention-filter-btn.active,
.intention-filter-btn:active {
  background: var(--secondary-color);
  color: #fff
}

.intention-filter-picker {
  justify-content: center;
  padding-left: 10px;
  text-align: center
}

.social-icon {
  height: 24px;
  width: 24px
}

.category-shortdesc {
  display: none;
  margin-top: 10px
}

.category-shortdesc.active {
  display: block
}

@media (max-width:1060px) {
  .intention-filter-widget {
    max-width: 700px
  }
  .intention-filter-btn {
    width: 150px
  }
}

.section .container {
  position: relative
}

.dynamic-connector {
  background: #fff;
  height: 2px;
  pointer-events: none;
  position: absolute;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1s ease-out;
  z-index: 5
}

.zoom-image {
  transform-origin: center center;
  transition: transform .3s ease-in-out
}

.zoom-image:hover {
  transform: scale(1.1)
}

.hidden-animation {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity .4s ease-out, transform .4s ease-out
}

.visible-animation {
  opacity: 1;
  transform: translateY(0)
}

.wobble {
  animation: wobble .6s ease-in-out
}

@keyframes wobble {
  0% {
    transform: translateX(0)
  }
  25% {
    transform: translateX(-8px)
  }
  50% {
    transform: translateX(8px)
  }
  75% {
    transform: translateX(-4px)
  }
  to {
    transform: translateX(0)
  }
}

.google-trust-wrapper {
  align-items: center;
  display: flex;
  gap: 15px;
  height: auto;
  padding-left: 10px
}

.trust-images {
  display: flex;
  margin-left: 20px;
  position: relative
}

.trust-image-wrapper {
  background: #fff;
  border: 3px solid #fff;
  border-radius: 50%;
  height: 40px;
  margin-left: -20px;
  overflow: hidden;
  position: relative;
  width: 40px;
  z-index: 1
}

.trustvert.trust-image-wrapper {
  height: 45px;
  width: 45px
}

.trust-image:first-child {
  margin-left: 0;
  width: 100%
}

.trust-image img {
  height: 100%;
  object-fit: cover;
  width: 100%
}

.trust-info {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 10px
}

.trust-stars {
  color: #d2b395;
  font-size: 1.4rem;
  letter-spacing: 1px;
  line-height: 1;
  margin-bottom: 4px;
  text-align: left;
  width: 100%
}

.trust-text {
  color: #fff;
  text-align: left
}

.trust-text a {
  color: #d2b395 !important;
  text-decoration: none
}

.trust-text a:hover {
  text-decoration: underline
}

.video-wrapper {
  background-color: #000;
  padding-top: 56.25%;
  position: relative;
  width: 100%
}

.video-wrapper.aspect-16-9 {
  aspect-ratio: 16/9
}

.video-wrapper.aspect-9-16 {
  aspect-ratio: 9/16;
  max-width: 280px;
  margin: 0 auto
}

.video-wrapper.aspect-2-3 {
  aspect-ratio: 2/3;
  max-width: 340px;
  margin: 0 auto
}

.video-preview,
.video-wrapper iframe {
  background-position: 50%;
  background-size: cover;
  border: none;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%
}

.video-preview .play-button,
.video-preview .play-button-big {
  color: #fff;
  left: 50%;
  opacity: .8;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: opacity .3s ease, transform .3s ease
}

.video-preview .play-button {
  font-size: 3rem
}

.video-preview .play-button-big {
  font-size: 5rem
}

.video-preview:hover .play-button,
.video-preview:hover .play-button-big {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.15)
}

/* Projekt-Scroller-Swiper: img statt background-image */
/* .swiper-slide-Praefix erhoeht die Spezifitaet bewusst ueber ".swiper-slide img"
   (Zeile ~641), da dessen "height: auto" sonst unser height: 100% ueberschreibt */
.swiper-slide .fm-project-scroller-swiper-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.bunny-hero-embed {
  aspect-ratio: 2/1;
  overflow: hidden !important;
  position: relative;
  width: 100%
}

.bunny-hero-embed iframe {
  border: 0;
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%
}

.bunny-click-overlay {
  align-items: center;
  background: transparent;
  cursor: pointer;
  display: flex;
  inset: 0;
  justify-content: center;
  position: absolute;
  touch-action: pan-y pinch-zoom;
  transition: background .2s ease;
  z-index: 2
}

@media (orientation:portrait) {
  .bunny-click-overlay {
    align-items: flex-end;
    padding-bottom: 75px
  }
}

.bunny-hint {
  background: rgba(0, 0, 0, .55);
  border-radius: 999px;
  color: #fff;
  font-weight: 600;
  line-height: 1;
  opacity: 0;
  padding: .6rem .9rem;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease
}

.bunny-hero-embed:hover .bunny-click-overlay {
  background: rgba(0, 0, 0, .15)
}

.bunny-hero-embed:hover .bunny-hint {
  opacity: 1;
  transform: translateY(0)
}

@media (hover:none) {
  .bunny-click-overlay {
    background: rgba(0, 0, 0, .1)
  }
  .bunny-hint {
    opacity: 1;
    transform: none
  }
}

@media (hover:hover) and (pointer:fine) {
  .bunny-click-overlay:after {
    align-items: center;
    background: rgba(0, 0, 0, .55);
    border-radius: 999px;
    display: flex;
    justify-content: center;
    transition: opacity .2s ease, transform .2s ease;
    z-index: 1
  }
  .bunny-click-overlay:after,
  .bunny-click-overlay:before {
    content: "";
    height: 44px;
    pointer-events: none;
    position: absolute;
    right: 12px;
    top: 12px;
    width: 44px
  }
  .bunny-click-overlay:before {
    background: #fff;
    mask: url(/images/fa/solid/volume-xmark.svg) center/18px no-repeat;
    -webkit-mask: url(/images/fa/solid/volume-xmark.svg) center/18px no-repeat;
    z-index: 2
  }
  .bunny-hero-embed:hover .bunny-click-overlay:after {
    opacity: 1;
    transform: scale(1.1)
  }
}

.featured-video-embed .bunny-click-overlay:after,
.featured-video-embed .bunny-click-overlay:before {
  display: none
}

.col-align-center-left {
  left: 50%;
  position: relative;
  transform: translateX(-42%)
}

.spacer-10 {
  margin-top: 10px
}

.spacer-20 {
  margin-top: 20px
}

.spacer-25 {
  margin-top: 25px
}

.spacer-40 {
  margin-top: 40px
}

.spacer-50 {
  margin-top: 50px
}

.spacer-60 {
  margin-top: 60px
}

.spacer-100 {
  margin-top: 100px
}

.spacer-75 {
  margin-top: 75px
}

.clear {
  clear: both
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.lead,
body,
p {
  font-family: Inter, sans-serif;
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  font-weight: 300;
  letter-spacing: -.015rem;
  line-height: 1.6
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  letter-spacing: -.035em
}

.h1,
h1 {
  font-size: clamp(2rem, 5vw, 3rem)
}

.h1,
.h2,
h1,
h2 {
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: .5em
}

.h2,
h2 {
  font-size: clamp(1.5rem, 3vw, 3rem)
}

.h3,
.h4,
h3,
h4 {
  font-size: clamp(1.25rem, 2.2vw, 2rem);
  font-weight: 600;
  letter-spacing: -.01rem;
  line-height: 1.2;
  margin-bottom: .5em
}

p {
  margin-bottom: 1em
}

.lead {
  font-size: clamp(1.125rem, 1.8vw, 2rem);
  font-weight: 500
}

.ai-shine {
  background: linear-gradient(90deg, #7c3aed 0%, #7c3aed 35%, #ec4899 50%, #7c3aed 65%, #7c3aed 100%);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: ai-shine-move 9.5s linear infinite
}

@keyframes ai-shine-move {
  0% {
    background-position: 200% center
  }
  100% {
    background-position: -200% center
  }
}


a,
a:visited {
  color: inherit;
  text-decoration: none
}

a:focus,
a:hover {
  color: #ca3730;
  text-decoration: none
}

.trust-text a {
  color: #fff
}

.tpsz-3 {
  font-size: clamp(.85rem, 1.3vw, .95rem) !important
}

.tpsz-4 {
  font-size: clamp(.95rem, 1.4vw, 1.05rem) !important
}

.tpsz-6 {
  font-size: clamp(1.1rem, 1.7vw, 1.25rem) !important
}

.tpsz-7 {
  font-size: clamp(1.25rem, 2vw, 1.4rem) !important
}

.tpsz-8 {
  font-size: clamp(1.4rem, 2.3vw, 1.6rem) !important
}

.tpsz-11 {
  font-size: clamp(1.75rem, 4vw, 4.5rem) !important
}

.tpsz-12 {
  font-size: clamp(1.5rem, 3vw, 3rem) !important;
  font-weight: 700 !important;
  letter-spacing: -.035em;
  line-height: 1.2 !important
}

.tpsz-navbar {
  font-size: clamp(1rem, 1.5vw, 1.125rem)
}

.tplh-0 {
  line-height: 0.9 !important
}

.tplh-1 {
  line-height: 1.1 !important
}

.tplh-2 {
  line-height: 1.3 !important
}

/* !important für Bootstrap-Überschreibung */

.tpwd-1 {
  font-weight: 200 !important
}

.tpwd-2 {
  font-weight: 300 !important
}

.tpwd-2-5 {
  font-weight: 350 !important
}

.tpwd-4 {
  font-weight: 500 !important
}

.tpwd-5 {
  font-weight: 600 !important
}

.tpwd-6 {
  font-weight: 700 !important
}

.tpcol-3 {
  color: #333 !important
}

.tpcol-5 {
  color: #666 !important
}