@font-face {
    font-family: 'Barlow-Light';
    src: url('/code/fonts/Barlow-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Barlow-Regular';
    src: url('/code/fonts/Barlow-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Barlow-Medium';
    src: url('/code/fonts/Barlow-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Barlow-Bold';
    src: url('/code/fonts/Barlow-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

:root{
    --max-body:1200px;
    --farbe-bg:#000;
}

*{
	padding:0px;
	margin:0px;
	font-family:'Barlow-Regular',Helvetica,Ariel,'sans-serif';
	font-weight:400;
	font-style:normal;
    border:0px;
    font-size:inherit;
	line-height:inherit;
    color:inherit;
    outline:none;
	text-decoration:none;
	border-collapse:collapse;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-text-size-adjust: none;
	/*-webkit-transform: translate3d(0,0,0);*/
    color-scheme: light only;
    /*outline:1px dotted #f00;*/
}
h1{
    font-size:60px;
    line-height: 70px;
    margin-bottom: 20px;
    font-family:'Barlow-Bold',Helvetica,Ariel,'sans-serif';
    letter-spacing: -0.2rem;
}

h2{
    font-size:40px;
    line-height: 45px;
    margin-bottom: 10px;
    font-family:'Barlow-Light',Helvetica,Ariel,'sans-serif';
    font-weight: 300;
}
h3{
    font-size:25px;
    line-height: 27px;
    margin-bottom: 10px;
    font-family:'Barlow-Light',Helvetica,Ariel,'sans-serif';
    font-weight: 300;
}
h4{
    font-size:20px;
    line-height: 22px;
    margin-bottom: 10px;
    font-family:'Barlow-Medium',Helvetica,Ariel,'sans-serif';
    font-weight: 500;
}
img{
    vertical-align: top;
}
small{
    font-family:'Barlow-Medium',Helvetica,Ariel,'sans-serif';
    font-size:14px;
    line-height: 16px;
    border-radius: 100px;
    border:0.5px solid rgba(0,0,0,0.5);
    padding:3px 10px;
}
.bt_icon{
    height: 16px;
    margin-left: 3px;
    stroke:currentColor;
    stroke-width:0.5;
}
.mehr{
    padding:10px 20px;
    background: #fff;
    outline:1px solid #fff;
    color:#000;
    border-radius: 100px;
    font-family:'Barlow-Bold',Helvetica,Ariel,'sans-serif';
    letter-spacing: -0.05rem;
    margin-right: 20px;
}
.mehr.rand{
    padding:10px 20px;
    background: none;

    color:#fff;
    border-radius: 100px;
    font-family:'Barlow-Bold',Helvetica,Ariel,'sans-serif';
    letter-spacing: -0.05rem;
    margin-right: 10px;
    backdrop-filter: blur(1px);
}
.mitteXY{
	position:absolute !important;
	left:50%;
	top:50%;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
.mitteX{
	position:absolute;
	left:50%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
}
.mitteY{
	position:absolute;
	top:50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
.center{
    text-align: center;
}

html {
	width:100%;
	height:100%;
	background:var(--farbe-bg);
    font-size:17px;
	line-height:22px;
	color:var(--farbe-txt);
}
body {
    width:100%;
	height:100%;
    overflow-x: hidden;
}


header,main,footer{
    display:block;
    position: relative;
    width:100%;
}



header{
    position: fixed;
    height: 80px;
    width:calc(100% - 40px);
    padding:0px 20px;
    z-index: 100;
}
header .bg{
    position: absolute;
    top:0px;
    left:0px;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,0);
    backdrop-filter: blur(10px);
    z-index: 1;
    transition: all 0.5s;
}
header.scrolled .bg{
    background: rgba(0,0,0,0.2);
    box-shadow: 0 1px 10px rgba(0,0,0,0.1);
}
header nav{
    position: relative;
    display: flex;
    align-items: center;
    max-width: var(--max-body);
    margin:auto;
    height: 80px;
    z-index: 2;
    color:#fff;
}
header nav .logo{
    margin-right: 50px;
}
header nav .logo_icon{
    height: 20px;
    margin-right: 5px;
}
header nav .logo_txt{
    font-family:'Barlow-Bold',Helvetica,Ariel,'sans-serif';
    /*text-transform: uppercase;*/
    font-size:24px;
    letter-spacing: -0.05em;
}

header nav menu {
	display: flex;
	gap: 1rem;
	flex: 1;
}
header nav menu .push_right {
	margin-left: auto;
}
header nav menu a{
    font-family:'Barlow-Bold',Helvetica,Ariel,'sans-serif';
    padding:5px 0px;
}
header nav menu a.highlight{
    background: #fff;
    color:#000;
    font-size: 16px;
    padding:5px 15px;
    border-radius: 100px;
    font-family:'Barlow-Medium',Helvetica,Ariel,'sans-serif';
}


main{
}
main .mitte{
    position: relative;
    width:calc(100% - 40px);
    padding:0px 20px;
    max-width: var(--max-body);
    margin: auto;
    z-index: 2;
}

main .banner{
    display: block;
    position: relative;
    background: #000;
    padding-top:100px;
    padding-bottom: 50px;
    width:100%;
    color:#fff;
}
main .banner small{
    display: inline-block;
    margin-bottom: 10px;
    border:0.5px solid rgba(255,255,255,0.5);
}
main .banner h1{
    margin-bottom: 30px;
}
main .banner .text,
main .banner .fx{
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 50%;
    height: 400px;
    padding-top:100px;
}
main .banner .fx{
    padding-top: 40px;
}
main .banner .fx .smartphone{
    --phone-width: 260px;
    --radius: calc(var(--phone-width) * 0.11);
    --pad: calc(var(--phone-width) * 0.025);

    width: var(--phone-width);
    aspect-ratio: 1 / 2;

    padding: var(--pad);
    box-sizing: border-box;

    border-radius: var(--radius);
    overflow: hidden;

    background: rgba(0,0,0,0.5);

    box-shadow: 0px 0px 200px rgba(0,55,255,0.6), 0 10px 50px rgba(0,0,0,1), 0 0 1px rgba(255,255,255,1);
    box-shadow: 0px 0px 200px rgba(0,100,250,0.5), 0 10px 50px rgba(0,0,0,1), 0 0 1px rgba(255,255,255,1);
    backdrop-filter: blur(2px);
}

main .banner .fx .smartphone img{

    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    border-radius: calc(var(--radius) - var(--pad));
}






.animated-bg {
    position: absolute;
    top:0px;
    left:0px;

    opacity: 0.5;

    width: 100%;

    height: 100%;
    z-index: 1;

    overflow: hidden;

    background: linear-gradient(

      135deg,

      rgb(0, 50, 100),
      rgb(0, 20, 55)


    );
    /* rgb(0, 120, 255),
    rgb(170, 0, 255)*/

    background-size: 400% 400%;

    animation: flow 12s ease infinite;

  }

 @keyframes flow {

    0% {

      background-position: 0% 50%;

      filter: hue-rotate(0deg);

    }

    25% {

      background-position: 50% 100%;

    }

    50% {

      background-position: 100% 50%;

      filter: hue-rotate(20deg);

    }

    75% {

      background-position: 50% 0%;

    }

    100% {

      background-position: 0% 50%;

      filter: hue-rotate(0deg);

    }

  }

.hero-bg {
    position: absolute;
    top:0px;
    left:0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}
canvas {
    width: 100%;
    height: 100%;
    display: block;
}


main .facts{
    display: flex;
    gap: 20px;
    margin-top: 100px;
}
main .facts .fact{
    flex:1;
    padding:20px;
    border-radius: 20px;
    box-shadow: 0 0 0.5px rgba(255,255,255,0.5);
    font-size:20px;
    line-height: 20px;
    background: rgba(0,0,0,0);
    backdrop-filter: blur(5px);

}
main .facts span{
    display:block;
    font-size:40px;
    line-height: 50px;
    font-family:'Barlow-Bold',Helvetica,Ariel,'sans-serif';
    letter-spacing: -0.1rem;
}
main .facts .fact_icon{
    display: block;
    height: 40px;
}
main .facts .fact_icon path{
    stroke:#fff;
    stroke-width:0.5;
}

main .kunden{
    display: block;
    position: relative;
    background: #fff;
    padding-top:50px;
    padding-bottom: 50px;
    width:100%;
    color:#000;
}
main .kunden .mitte{
    display: flex;
    justify-content: center;
    gap: 20px;
}
main .kunden .kunde{
    flex:1;
}
main .kunden .kunde img{
    width:100%;
    height: 100%;
}


footer{
    padding-top:50px;
    padding-bottom:100px;
    color:#fff;
    font-size:14px;
    line-height: 16px;
}
footer .mitte{
    display: block;
    position: relative;
    width:calc(100% - 40px);
    padding:0px 20px;
    max-width: var(--max-body);
    margin: auto;
    z-index: 2;
}
footer section{
    display: inline-block;
    vertical-align: top;
    margin-right: 50px;
    max-width: 300px;
}
footer .logo{
    display: block;
    margin-right: 50px;
    margin-bottom: 20px;
}
footer .logo_icon{
    height: 20px;
    margin-right: 5px;
}
footer .logo_txt{
    font-family:'Barlow-Bold',Helvetica,Ariel,'sans-serif';
    /*text-transform: uppercase;*/
    font-size:24px;
    letter-spacing: -0.05em;
}
footer section b{
    font-family:'Barlow-Bold',Helvetica,Ariel,'sans-serif';
    display: block;
    line-height: 22px;
    margin-bottom: 20px;
}
footer section a{
    display: block;
    line-height: 22px;
}
footer section .social{
    display: inline-block;
    margin-right: 20px;
    margin-top: 30px;
    height: 25px;
}
footer .sicherheit{
    display: flex;
    gap:20px;
    border-top:1px solid rgba(255,255,255,0.2);
    border-bottom:1px solid rgba(255,255,255,0.2);
    padding:20px 0;
    margin:30px 0;
}
footer .sicherheit .box{
    flex:1;
    position: relative;
    padding-left:35px;
    padding-top:0px;
    color:rgba(255,255,255,0.5);
}
footer .sicherheit .box strong{
    font-family:'Barlow-Bold',Helvetica,Ariel,'sans-serif';
    display: block;
    margin-bottom: 5px;
    color:#fff;
}
footer .sicherheit .box .box_icon{
    position: absolute;
    left:0px;
    top:0px;
    height: 25px;
}
footer .sicherheit .box .box_icon path{
    fill:#fff;
}

footer .bg{
    position: absolute;
    top:0px;
    left:0px;
    display: block;
    width: 100%;
    height: 100%;

    z-index:1;

}



.animated-footer {

    height: 320px;

    /* Zwei Hauptfarben */

    --color-1: rgb(10, 35, 90);

    --color-2: rgb(65, 105, 225);

    --color-1: #020617;
    --color-2: #071a3a;



    background:

      radial-gradient(

        circle at 20% 30%,

        var(--color-2),

        transparent 45%

      ),

      radial-gradient(

        circle at 80% 70%,

        var(--color-1),

        transparent 50%

      ),

      linear-gradient(

        135deg,

        #020617,

        #06142c,

        #020617

      );

    background-size:

      180% 180%,

      160% 160%,

      100% 100%;

    animation: fluidGradient 18s ease-in-out infinite;

  }

  @keyframes fluidGradient {

    0% {

      background-position:

        0% 0%,

        100% 100%,

        50% 50%;

    }

    25% {

      background-position:

        30% 20%,

        70% 80%,

        50% 50%;

    }

    50% {

      background-position:

        100% 40%,

        0% 60%,

        50% 50%;

    }

    75% {

      background-position:

        60% 100%,

        40% 0%,

        50% 50%;

    }

    100% {

      background-position:

        0% 0%,

        100% 100%,

        50% 50%;

    }

  }