/* inter */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url(../font/Inter-VariableFont_slnt,wght.ttf) format('ttf');
  }
/* Syne*/

@font-face {font-family: 'Syne';font-display:auto;src: url('../font/Syne.ttf') format('truetype');font-display: swap; }


html {font-family: 'Inter';min-width:100%;}

body {font-size: 16px;font-weight: 400;color: #171324;text-align: left;background-color: #fff;overflow-x: hidden;font-family:'Inter', sans-serif;margin:0;padding:0;}

h1{font-family: 'Syne', sans-serif;font-size:3em;margin:2em 0 0 0;}


h1 span, h2 span{position:relative;white-space:nowrap;transform: rotateX(180deg);}
h1 span::after, h2 span::after {content: "";
  position: absolute;
  bottom: -7px;
  left: 0;
  background-image: url(../image/home-hero-stroke.png);
  background-size: 100% 100%;
  background-position: 50%;
  background-repeat: no-repeat;
  height: 10px;
  width: 100%;
}
h2{font-family:'Syne', sans-serif;font-size:2em;color:rgba(23,19,36,.56);margin: 2em 0 0.5em 0;}
.slider h2{margin:0;}
.grid-left h2 span::after{bottom: -8px;}
h3{color:#98092f;}

h5 {
  position: relative;
  font-weight: 700;
  font-size: 1em;
  font-family: 'Syne', sans-serif;
}


p{line-height: 1.375rem;margin-top: .375rem;font-size:1.2rem;}
p.fussnote { font-size: 0.9em; color: #a2a2a2; margin: 0 0 2em 0;}
p span, li span{color:#98092f;}

.first-touch{width:100%;background-image: url(../image/cost-per-application.jpg); background-size: auto 100%; background-position: 100% 0; background-repeat: no-repeat;height:80vh;}
header{margin:0 auto;padding:0;max-width:1440px;}

.top{display:grid; grid-template-columns: 20% 80%;padding: 24px 0;}
.top ul{text-align:right;padding:21px 0 0 0;margin: 0;}
.top ul li{list-style:none;display:inline;margin:0 0 0 5%;}
.top ul li a{text-decoration:none;text-decoration:none;color:#171324;font-weight:500;font-size:1rem;}
.top ul li a:hover{borde-top:1px solid #171324;}

header nav.navbar{margin: 0 40px;}
.top-left{height: 107px; width:100px;text-align:center;}
.top-left img{height:59px;}

ul.cpa li{font-size: 1.2rem;line-height: 2rem;max-width: 1000px;margin: 0 auto;}

li { list-style-image: url(../image/check.png);}

.slider{max-width:1440px;margin:0 auto;padding:0;}
.aws .slider{min-height: 50vh;}
.slider .intro{margin:0 40px;}	
.grid-2{display:grid; grid-template-columns: 55% 45%;min-height:315px;}

.grid-2 .grid-left{/*padding: 0 5% 0 7%;*/}
.grid-2 .grid-left img{width: 100%;height: auto;}
.grid-2 .grid-right{padding: 0 5%;}
.grid-2 .grid-5-item{grid-area: 3/ 1 / 3 /3 ;}

	

.main{max-width:1440px;margin:2em auto 0;}
.article{padding:0 40px;}



button {
  cursor: pointer;
  padding: 10px 20px;
  margin-top: 10px;
  font-family: 'Syne';
  font-size:1.2rem;
  transform:0.8s;
}
button.cta {
  border: 2px solid #c10633;
  color: #fff;
  border-radius:16px;
  background: #c10633;
}
button.cta:hover {
  background: #98092f;
  border: 2px solid #98092f;
  color: #ffffff;
  transform:0.8s;
}
button.cta a {
  color: #ffffff;
}
/*Kontaktformular*/
.kontakt{width:80%;margin: 0 auto 3em;text-align:center;}
.kontakt h2{text-align:left;color:#98092f;}
.kontakt .grid-2{grid-template-columns: 50% 50%;min-height:315px;text-align:left;}
.kontakt .grid-2 input{font-size: 1.2rem;height: 2rem;width:80%;padding: 0 2%;}
.kontakt .submit {width:50%; margin: 2em 0 0 0;font-size:1.2rem;}
.kontakt textarea {width:88%;padding: 0 2%; margin: 0 0 2em 0;font-size:1.2rem;}
.kontakt .field{display: inline;}
 input{border-radius:5px;}

.submit {
  cursor: pointer;
  padding: 10px 20px;
  margin-top: 10px;
  font-family: 'Syne';
  font-size:1.2rem;
  transform:0.8s;
}
.submit {
  border: 2px solid #c10633;
  color: #fff;
  border-radius:16px;
  background: #c10633;
}
.submit:hover {
  background: #98092f;
  border: 2px solid #98092f;
  color: #ffffff;
  transform:0.8s;
}
.submit a{
  color: #ffffff;
}

/* Footer */ 
footer{position:relative;background: #98092f;margin:0 auto;color:#ffffff;z-index:400;}
.footer-grid-outer{width:90%;max-width:1440px;margin:0 auto;}
.footer-grid{padding:70px 0;}
.footer-grid{display:grid;grid-template-columns: 23.5% 23.5% 23.5% 23.5%;grid-column-gap: 2%;}

footer p{}
footer h2{margin:1.5rem 0; color: #ffffff;}
footer h5{margin:1.5rem 0;}

footer h4{}
footer a{color:hsla(0,0%,100%,.72);text-decoration:none;font-weight:400;font-size:1em;}
footer li{color:hsla(0,0%,100%,.72);font-weight:400;font-size:1em;margin: 0 0 20px 0;}
footer a:hover, footer li:hover{color:#ffffff;}
footer li img {height: 1em;width: auto;margin: 0 10px 0 0;}

footer ul{margin:0;padding: 0;}
footer li{list-style:none;}

.footer-grid{padding:70px 40px;}

.info{ margin: 3em auto;}
.carousel {
  --blur: 6px;
  --contrast: 105%;
  --speed: 13s;
  height: 100px;
  width: 100%;
  position: relative;
  .mask {
    position: absolute;
    inset: 0;
    background: #0000;
    backdrop-filter: blur(var(--blur)) contrast(var(--contrast));
    -webkit-backdrop-filter: blur(var(--blur)) contrast(var(--contrast)); /* so it works on Safari */
    -webkit-mask: linear-gradient(90deg, #000 50px, #0000 175px calc(100% - 175px), #fff calc(100% - 50px));
    pointer-events: none;
  }
  .logos {
	 
    animation: moveBg var(--speed) linear infinite;
    position: absolute;
    inset: 0;
    background: url(../image/company/logo.webp) 0 50% / 2400px 100px repeat-x;
    -webkit-mask: linear-gradient(90deg, #0000 5px, #000 50px calc(100% - 50px), #0000 calc(100% - 5px));
  }
}
@keyframes moveBg {
  from { background-position: 0 50%; }
  to { background-position:  -1134px 50%; }
}

@media only screen and (min-width:800px) {
.first-touch{width:100%;background-image: url(../image/cost-per-application.jpg); background-size: auto 100%; background-position: 100% 0; background-repeat: no-repeat;height:80vh;}
}



@media only screen and (max-width:800px) {
.first-touch h1{margin-top:0;}	
.first-touch{
width: 100%;
  background-image: url(../image/cost-per-application.jpg);
  background-size: auto 65%;
  background-position: 100% 80%;
  background-repeat: no-repeat;
height: 40vh;}
}
@media only screen and (max-width:500px) {
	h2{font-size:1.3em;}
	h2 span::after{height:5px;bottom:-5px;}
	h3{font-size:1em;}
	ul.cpa li{font-size:1em;line-height:1.2em;}
	p {line-height: 1em;margin-top: 0;font-size: 1em;}
	.first-touch h1{margin-top:0;font-size:1.5em;line-heigt:1em;}
	.first-touch h2{font-size:1.3em;}
	button{font-size:0.8em;}
	.first-touch{
	width: 100%;
    background-image: url(../image/cost-per-application.jpg);
    background-size: 80% auto;
    background-position: 100% 103%;
    background-repeat: no-repeat;
    height: 45vh;
	}
	ul.cpa li{margin:1em 0 0 0;}
	.top{height:60px;}
	.top ul{padding:0;}
	.top ul li{display:block;}
	.kontakt{width:100%;}
	grid-2, .kontakt .grid-2 {display: block;grid-template-columns: 100%;min-height: 315px;}
	.kontakt .grid-2 input {font-size: 1.2rem;height: 2rem;width: 100%;padding: 0;}
	.kontakt textarea {width: 100%;padding: 0;}
	.footer-grid{grid-template-columns: 100%;}
}