body {
  background-image: none;
}
.header {
  padding-top: 38px;
}
.hero .f50 {
  font-size: 45px;
  line-height: 60px;
  color: #1e2c5d !important;
  font-family: "HaufeMerriwetherSans", sans-serif;
}
.hero .c1 {
  max-width: fit-content;
  margin: 0 0 0 auto;
}
.hero .gif svg {
  position: absolute;
  top: 111%;
  left: 53%;
}
.hero {
  padding-bottom: 29px;
}
.hero .container-xl {
  max-width: 1380px;
}
.header .container-xl {
  max-width: 1519px; 
  background: none;
  box-shadow: none;
}
.header.sticky .container-xl {
      background: #fff;
    box-shadow: 0 0 15px rgba(79, 79, 79, 0.16);
}
.hero-logos {
  background: #fff;
}
.sticky-header-nav {
  background: #fff !important;
}
.sticky-header-nav .cta-button {
  background: #03acf4 !important;
}
.hero,
.hero .f45 {
  color: #1e2c5d;
}
.hero strong {
  color: inherit;
}
.hero .btn,
.btn {
  background: #03acf4;
}
.tip-white-box-short svg path {
  stroke: #03acf4;
}
ul.check-red li:before {
  background: url(../images/check-cyan.svg) center center no-repeat;
}
.visa-karten .fly457-1 {
  top: -99px;
}
.btn-listing:before {
  background: #03acf4;
}
.btn-listing .active a {
  color: #03acf4;
}
#typewriter {
  min-width: 129px;
  display: inline-block;
}
.hero {
  position: relative;
  background: url(../images/hero-arrow.png) 0 center no-repeat var(--cl-bege);
  background-size: contain;
  background-position-x: 80px;
}
.hero #hero-arrow {
  position: absolute;
  bottom: 21%;
  left: -10%;
}
.v2 .hero #hero-arrow {
 left: -20%; 
}
.hero .container-xl {
  display: flex;
  justify-content: space-between;
  padding-bottom: 17px;
  flex-direction: unset;
  max-width: 1517px;
}
.hero .content {
  background: #ECEDF0;
  border-radius: 30px;
  margin-top: 77px; 
  padding: 54px 44px 30px 44px;
  margin-bottom: 31px;
  position: relative;
}
.hero .logos-icons {
  display: flex;
  position: relative;
  left: unset;
  bottom: unset;
  align-items: flex-end;
  padding-right: 30px;
}
.hero .bg {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: unset;
  background: none;
}
.hero .bg > .relative {
  padding-top: 176px;
  width: 100%;
  text-align: center;
}
.hero .gif {
  position: absolute;
  top: 15%;
  left: 0px;
  border-radius: 20px;
  border: 14px solid #fff;
  background: #fff;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.16);
  width: 271px;
}
.hero .gif svg {
  position: absolute;
  top: 135%;
  left: 30%;
}
.hero .gif svg.mobile {
  display: none;
}
.hero .gif img {
  display: block;
  border-radius: 10px;
  width: 100%;
}
.hero .plashka {
  margin-left: -44px;
  margin-right: -44px;
  color: #fff;
  padding: 11px;
  text-align: center;
  margin-bottom: 40px;
  font-size: 20px;
  font-weight: 600;
  background: #03acf4;
}
.hero .c1 {
  max-width: fit-content;
  margin: 0 auto;
}
.hero .plashka strong {
  color: #fff;
  /*background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='305.696' height='4.879' viewBox='0 0 305.696 4.879'%3E%3Cpath d='M1205.579,1631.181s220.4-6.286,303.6,0' transform='translate(-1204.551 -1627.374)' fill='none' stroke='%23fe4554' stroke-linecap='round' stroke-width='2'/%3E%3C/svg%3E%0A") center 102%  no-repeat;*/
}
.hero .btn {
  padding: 19px 32px;
}
.hero .btn {
  padding: 19px 32px;
}
.hero .btn:hover {
    background: #fff;
    color: var(--cl-blue);
    transform: scale(1.02);
    box-shadow: 0 5px 20px rgba(79, 79, 79, 0.16);
}
.hero .btn:hover svg * {
    stroke: var(--cl-blue);
}
@media (max-width: 1600px) {
    .f45 { font-size: 35px; line-height: 45px; }
    .section-block { padding-block: 50px; }
    .eroffnen {padding-block: 5px }
    .eroffnen .mb50 { margin-bottom: 20px; }
    .hero .f50 { font-size: 35px; line-height: 45px; }
    #typewriter { min-width: 100px }
    .v2 .hero #hero-arrow { 
     width: 9.739583333vw;
     right: calc(100% - 30px);
    left: unset!important;
   }
}
@media (max-width: 1300px) {
  .hero .gif { width: 220px; border-width: 8px }
}
@media (max-width: 1400px) {
  .bg > .relative {
    padding-top: 180px;
  }
  .hero .gif {
    left: 20px;
  }
  .hero {
    background-size: cover;
    padding-bottom: 70px;
  }
  #hero-arrow {
    display: block!important;
  }
  .hero .bg {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
}
@media (max-width: 1245px) {
  .hero #hero-arrow { width: 11vw; left: -3%;
        bottom: 17%; }
  .v2 .hero #hero-arrow { left: -10% }         
}
@media (max-width: 1200px) {
  .gehts .row {
    flex-direction: column;
  }
  .gehts .row .col {
    max-width: 100%;
  }
  .gehts .row .col:first-child {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 30px;
  }
}

@media (max-width: 1173px) {
  .hero-arrow2 {
    position: absolute;
    left: 49px !important;
    top: calc(100% + 20px) !important;
    margin-top: 16px;
    display: block !important;
  }
  .hero .check-red li { margin-bottom: 8px; }
  .hero .check-red li:before { width:25px; }
  .banner22-logobar .imgcontainer {
    width: 100%        
  }
}
@media (max-width: 1100px) {
  .hero .f50 {
    font-size: 40px;
  }
  .hero .content {
    padding: 30px 24px;
  }
  .hero .plashka {
    margin-inline: -24px;
  }
  #typewriter {
    min-width: 116px;
  }
  #zahlung {
    height: 1px !important;
  }
  .logos-arrow {
    width: 43px;
  }
}
@media (max-width: 1000px) {
  .banken .row .col.relative {
        margin-top: 123px !important;
        text-align: center;
  }
  .banken .gif svg { top:24%; }
}
@media (max-width: 900px) {
  .hero .f50  { 
      font-size: 33px;
      line-height: 43px;
  }
      #typewriter {
        min-width: 94px;
    }
  .f45 { font-size: 35px; line-height: 45px; }
  .pagination-ekomi { margin-top: 20px }
  .section-block { padding-block: 50px; }
  .sofort .btn { font-size: 18px}
}
@media (max-width: 840px) {
  .hero .container-xl { padding-inline: 10px }
  .gehts .row .col:first-child {
    flex-direction: column;
  }
  .gehts .f45 {
    text-align: center;
  }
  .gehts .row .col:first-child {
    align-items: center;
  }
  .hero .gif { width: 306px }
}
@media (max-width: 800px) { 
    .hero .content {margin-bottom: 0;}
}
.hero-mobile { display: none; }
.btmArrowMob, .topArrowMob { display: none }
@media (max-width: 767px) { 
  .hero {display: none}
  .hero-mobile ul li { align-items: flex-start;}
  .hero-mobile ul.check-red li:before { margin-top: 5px; }
  .hero-mobile .hl-effect2::before { height: 103% }
  .header .right { display: none }
  .header .container-xl { justify-content: center; background: none; box-shadow: none}
  .header { background: #FDF8F2 }
  .banken .row .col.relative { margin-bottom: 0 }
  #sticky-header { position: relative; }
  #typewriter2 {
    min-width: 94px;
    display: inline-block;
  }
  .hero-mobile { display: block; background: #FDF8F2; padding-top: 42px}
  .hero-mobile .container-xl { display: flex; flex-direction:column; align-items: center; padding: 0 }
  .hero-mobile .f50 {
        font-size: 30px;
        line-height: 43px;
        text-align: center;
  }
  .hero-mobile .plashka {
        background: #03acf4;
        color: #FFF;
        padding: 10px;
        font-size: 16px;
        width: 100%;
  }
  .hero-mobile .plashka strong {
    /*background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='305.696' height='4.879' viewBox='0 0 305.696 4.879'%3E%3Cpath d='M1205.579,1631.181s220.4-6.286,303.6,0' transform='translate(-1204.551 -1627.374)' fill='none' stroke='%23fe4554' stroke-linecap='round' stroke-width='2'/%3E%3C/svg%3E%0A") center 102%  no-repeat;     */
    color:#FFF;
  }
  .hero-mobile .btn { width:251px; }
  .v2 .hero-mobile .btn { width:auto; font-size: 16px; }
  .sofort .btn {
        font-size: 16px;
  }

  .hero-mobile .bg { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='446.997' height='467.317' viewBox='0 0 446.997 467.317'%3E%3Cg transform='translate(446.997 -81) rotate(90)'%3E%3Cpath d='M731.842,114.058,672.6,4.685H326.4l59.207,109.372,61.83,114.15-61.783,114.1L326.45,451.682h346.2L731.89,342.31l61.83-114.1Z' transform='translate(-245.402 -4.685)' fill='%23fbebd8'/%3E%3C/g%3E%3C/svg%3E%0A") center bottom  no-repeat; 
          background-size: cover;
    width: 100%; 
    text-align: center;
    margin-bottom: 71px;
  }
  .hero-mobile .bg svg { transform:  translate(-12px, 50px); }
  .hero-mobile .bg > .relative { padding-top: 48px; overflow: hidden; }
  .hero-mobile .bg > .relative video { margin-bottom: -11%!important }
  .hero-mobile .logos-icons { margin-block: 30px 20px; }
  .hero-mobile .content { padding: 0 20px; max-width: 372px; margin-bottom: 40px }
  .hero-mobile .gif { border-radius: 10px; border:5px solid #FFF; }
  .hero-mobile .gif .gif-video-img { border-radius: 8px; width: 100% }
  .eroffnen {  background-size: cover; }
  .banken .gif { width: 46%;  }
  .banken .gif svg { left: -128px }
  .logos .buttons img.logos-ohne-21 { margin-bottom: -107px; margin-top: -20px }
  .freelancer-slider .svgmarker:after {     width: 142%;
    top: -20px;
    right: -13px;
    background-size: contain; }
  .sofort .kartentransaktion-erfolgreich .btmArrow, .sofort .kartentransaktion-erfolgreich .topArrow { display: none }
  .sofort .kartentransaktion-erfolgreich .btmArrowMob { display:block; margin: 0px auto 13px; transform: translateX(40px);}  
  .sofort .kartentransaktion-erfolgreich .topArrowMob { display:block; margin: 13px auto 20px; transform: translateX(-40px);}  
  .sofort .kartentransaktion-erfolgreich { margin-top: 0; margin-bottom: 0 }
  .visa-karten .row:first-child .col.relative { margin-top: 50px; padding-top: 20px }
  .visa-karten .fly457-1 { top: -44px; }
  .app .row .col:first-child { width: 100%; }
  .app { padding-bottom: 0; padding-top: 30px }
  .dieses .row .col50 {  display: flex; align-items: center;  justify-content: center;   flex-direction: column; }
  .zahlungen .roundtext { font-size: 16px }
  .system { padding-bottom: 100px }
  .video-block .title { padding-inline: 10px;  }
  .video-block .title br { display: none; text-wrap: balance; }
  section.video .video-block-thumb .slider-arrow { display: none }
  section.logos { padding-bottom: 0 }
  .tuev-container-new .tuev-container-new-row {
        flex-direction: row;
        gap: 0;
        flex-wrap: nowrap;
        padding: 0
  }
  .tuev-container-new-txt {
        margin: 10px;
    }
  .tuev-container-new { margin-bottom: 20px; margin-top: 0 }
  section.tuv { padding-block: 40px; }
  .preise .price-list {
        gap: 15px;
        margin-right: 0px;
  }
  .f26 { font-size: 20px; line-height: 30px }
  .f24 { font-size: 20px; line-height: 26px }
  .price-list > .titles {display: none }
  #price-block-mobile { display: flex!important; margin-top: 47px; gap:10px; font-size: 14px;}
  #price-block-mobile .f16 { font-size: 14px; }
  #price-block-mobile .f24 { font-size: 18px; line-height: 26px }
  #price-block-mobile > div { width: 0; display: none }
  #price-block-mobile[data-pack="solo"] #titles, #price-block-mobile[data-pack="solo"] #solo { height: auto!important; width: auto;  display: block}
  #price-block-mobile[data-pack="standard"] #titles, #price-block-mobile[data-pack="standard"] #standard { height: auto!important; width: auto; display: block }
  #price-block-mobile[data-pack="standard"] #standard, #price-block-mobile[data-pack="solo"] #solo { box-shadow: var(--bs-shadow); padding: 17px; max-width: 55%; border-radius: 10px; display: block }
  #price-block-mobile .content-center img { width: 27px; }
  #price-block-mobile #titles { padding: 17px 5px; }
  .preise .price-item { padding: 0 }
  .preise .setTrtoggle span { display: none!important }
  .preise .price-item .price-weiter svg{ transform: scaleY(-1);  transition: all 0.5s;}
  .preise .price-item.show .price-weiter svg { transform: unset; }
} 

@media (max-width: 360px) {
    .sofort .btn {
       padding: 18px 15px
    }
    .zahlungen .milliarden { right: 5px }
    .hero-logos .logos3 div img {
        width: 77px !important;
    }
    .banner22-logo {
        width: 93px!important
    }
    .hero-logos .logos3 div {
        max-width: 182px;
        flex-shrink: 0;
    }
        .hero-mobile .f50 {
        font-size: 24px;
        line-height: 27px;
        text-align: center;
    }
}