@import url('https://fonts.googleapis.com/css2?family=Arvo:wght@300;400;500;700&display=swap'); 
:root{--website-fontfamily:'Arvo', serif;}
:root{--roundedbordersradius:0.3em;}
body{font-size:16px;}

/* Template Startlanding/Custom Clientlogin */
/* Font Family */
body header{font-family:var(--website-fontfamily);}

/* Title Font */
body header .website-title{line-height:1.2;font-weight:400;}
body header .website-title{font-size:3rem;}

/* Tagline Font */
body header .tagline{line-height:1;font-weight:400;display:block;}
body header .tagline{margin-top:1.25rem;font-size:1.5rem;}


@media (max-width: 600px) {
  /* header {--scale:  0.8; transform: scale(var(--scale));transform-origin: top center;} */
  body header .website-title{font-size:12vw;font-size:9.4vw;}
  body header .tagline{font-size:6vw;font-size:4.7vw;}
} 


/* Navigation Background */
body header nav ul{background:rgba(0,0,0,0.2);}

/* Navigation Font */
body header nav ul li a{padding:0.875rem 1em;font-size:1.25em;line-height:1;}
body header nav ul li a{color:#fff;}
body header nav ul li a:hover{color:#fff;background:rgb(0,0,0,0.4);}
body header nav ul {padding:0;}
@media (max-width:999px){
    body header nav ul {width:auto;}
}

/* Header/Navigation Position */
body header{position:absolute;top:10rem;right:0;left:0;z-index:100;}
body header div.title-container{position:relative;top:0;}
body header nav{position:relative;margin-top:2.5em;top:0;}
@media (max-width:999px){
    body header{top:calc(10rem - 4rem);}
}

/* Navigation Rounded */
body header nav ul{border-radius:var(--website-formradius);}
body header nav ul li:first-child a{border-radius:var(--website-formradius) 0 0 var(--website-formradius);}
body header nav ul li:last-child a{border-radius:0 var(--website-formradius) var(--website-formradius) 0;}

/* Navigation Link Same Width */
html[lang=en] body header nav ul li{min-width:9em;}
html[lang=de] body header nav ul li{min-width:12em;}

/* template-clientlogin*/
body.template-clientlogin nav{display:none;}
body.template-clientlogin div.indexbanner-image::before{opacity:1;-webkit-backdrop-filter:blur(2em);backdrop-filter:blur(2em);content:"";z-index:1;width:100%;height:100%;position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:none;}

/*form*/
.indexbanner-form{position:absolute;top:21.25rem;left:50%;z-index:2;transform:translate(-50%, -50%);}
@media (max-width:999px){
    .indexbanner-form{top:calc(21.25rem - 4rem);}
}
.indexbanner-form form{width:12.5rem;display:flex;flex-direction:column;flex-wrap:wrap;gap:1rem;align-items:center;}
.indexbanner-form form *{font-family:var(--website-fontfamily);letter-spacing:0.025em;width:100%;box-sizing:border-box;}
:root{--website-formradius:0.5em;}
.indexbanner-form p:has(input):has(label:not(.optionlabel)) {display:flex;align-items:stretch;align-content:stretch;}
.indexbanner-form p:has(input):has(label:not(.optionlabel)) * {height:100%;}
.indexbanner-form p:has(input) {background:#fff;border-radius:var(--website-formradius);}
.indexbanner-form p:has(input) > *:not(.optionlabel) {background:#fff;border:0;}
.indexbanner-form p:has(input) > label:not(.optionlabel){border-radius:var(--website-formradius) 0 0 var(--website-formradius);}
.indexbanner-form p:has(input) > input{border-radius:0 var(--website-formradius) var(--website-formradius) 0;}
.indexbanner-form form label{font-size:1rem;padding:0.625rem;padding-right:0.25em;flex:1;border:0;border-radius:calc(var(--roundedbordersradius));}
.indexbanner-form form input{font-size:1rem;padding:0.625rem;padding-left:0;border:0;border-radius:calc(var(--roundedbordersradius));}
.indexbanner-form form .button{font-size:1rem;padding:0.625rem;line-height:normal;text-transform:uppercase;border-radius:calc(var(--roundedbordersradius));}
.button-primary{color:#fff;background:rgb(0,0,0, 0.4);border:0;}
.indexbanner-form form .button:hover:not(:disabled){background:rgb(0,0,0, 0.8);cursor:pointer;}
.indexbanner-form form p:has(span){text-align:center;}
.indexbanner-form form p span{color:#e40000;}

.indexbanner-form form label, 
.indexbanner-form form input::placeholder {color:rgb(0,0,0, 0.4);}
.indexbanner-form form p input,
.indexbanner-form form p label{color:rgb(0,0,0, 1);}