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

@font-face {font-family: 'Syne';font-display:auto;src: url('../fonts/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(../images/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(../images/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{border-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(../images/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', sans-serif;
  font-size: 1.2rem;
}

/* Hero-CTA: funktioniert für <a class="cta"> und <button class="cta"> */
a.cta,
button.cta {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 10px;
  padding: 10px 20px;
  border: 2px solid #c10633;
  border-radius: 16px;
  background: #c10633;
  color: #fff;
  font-family: 'Syne', sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

a.cta:link,
a.cta:visited {
  color: #fff;
  text-decoration: none;
}

a.cta:hover,
button.cta:hover {
  border-color: #98092f;
  background: #98092f;
  color: #fff;
  text-decoration: none;
}

a.cta:focus-visible,
button.cta:focus-visible {
  outline: 3px solid rgba(193, 6, 51, 0.25);
  outline-offset: 3px;
}
/* Kontaktbereich – Grundlayout */
.contact-section {
  padding: 48px 24px 64px;
  background: #fff;
  scroll-margin-top: 1rem;
}

.contact-inner,
.cpa-contact-wrapper,
.cpa-contact-form {
  box-sizing: border-box;
  width: 100%;
  max-width: 1065px;
  margin-right: auto;
  margin-left: auto;
}

/* 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(../images/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(../images/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(../images/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-height:1em;}
	.first-touch h2{font-size:1.3em;}
	button{font-size:0.8em;}
	.first-touch{
	width: 100%;
    background-image: url(../images/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%;}
}
/* Joomla module integration */
.top-right .mod-menu { display:flex; gap:1rem; margin:0; padding:0; }
.top-right .mod-menu li { list-style:none; }
.references-track { display:flex; width:max-content; animation:cpa-scroll 35s linear infinite; }
.references-group { display:flex; align-items:center; gap:3rem; padding-right:3rem; }
.reference-item img { width:auto; max-width:180px; height:80px; object-fit:contain; }
.references-viewport { overflow:hidden; }
.references-viewport:hover .references-track { animation-play-state:paused; }
@keyframes cpa-scroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }

@media only screen and (max-width:500px) {
  a.cta,
  button.cta {
    min-height: 42px;
    padding: 9px 16px;
    font-size: 0.9rem;
    border-radius: 14px;
  }
}