/* CSS Document */


@font-face {
    font-family: 'SuisseIntl';
    src: url('../fonts/SuisseIntl-Regular-WebS.eot');
    src: url('../fonts/SuisseIntl-Regular-WebS.eot?#iefix') format('embedded-opentype'),
         url('../fonts/SuisseIntl-Regular-WebS.woff2') format('woff'),
         url('../fonts/SuisseIntl-Regular-WebS.woff') format('woff'),
         url('../fonts/SuisseIntl-Regular-WebS.ttf') format('truetype'),
         url('../fonts/SuisseIntl-Regular-WebS.svg#web') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'SuisseIntl';
    src: url('../fonts/SuisseIntl-SemiBold-WebS.eot');
    src: url('../fonts/SuisseIntl-SemiBold-WebS.eot?#iefix') format('embedded-opentype'),
         url('../fonts/SuisseIntl-SemiBold-WebS.woff') format('woff'),
         url('../fonts/SuisseIntl-SemiBold-WebS.ttf') format('truetype'),
         url('../fonts/SuisseIntl-SemiBold-WebS.svg#web') format('svg');
    font-weight: bold;
    font-style: normal;
}

b, strong, .b{font-weight: bold;}

:root {
    
	--blue: #0099DA;
	--dark-blue:#003369;
	--soft-grey:#F7F7F7;
	--grey:#919191;
	--dark-grey:#707070;
	--darkest-grey:#212529;
    --sand:#FFFAE5;
    --soft-green:#08C792;
    
    --red:#ed2939;
}

.logo {color:var(--blue)}
.logo.invers{color:#fff;}

.bg-dark-blue{background:var(--dark-blue); color:#fff}
.bg-blue{background:var(--blue);color:#fff;}
.bg-sand{background:var(--sand);}
.bg-soft-green{background:var(--soft-green); color:#fff;}
.dark-blue{color:var(--dark-blue)}
.blue{color:var(--blue)}
.soft-green{color:var(--soft-green)}
a{color:inherit}
.relative{position:relative;}

.bigger{font-size:1.2em; line-height: 1;}
.gradiant-text{
    background-image: linear-gradient(84deg,#ED9F3F,#DF4129,#B02498);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight:bold;
}

body,html{padding:0;margin:0 auto;font-family: SuisseIntl,Arial,Sans;color:var(--darkest-grey);font-size:16px;line-height: 20px;overflow-x: hidden;max-width:500px;}
#wrapper{position: relative;height: 100vh;overflow-y: auto;overflow-x: hidden;}

h1{font-weight: bold; color:#fff;font-size:74px;line-height: 101px;margin:0;}
h2{font-size: 22px;line-height: 30px;font-weight: bold;}
h3{font-weight:bold;}

ul.nostyle{padding:0; margin:0; list-style-type: none}
ul.zebra li:nth-child(odd){background:var(--soft-grey)}
ul.zebra li{display:flex;align-items: center}
ul.zebra li svg{width: 100px;height:30px;flex:0 0 100px; color:var(--dark-blue)}
ul.zebra li > div{padding:15px}

ul.col3 {display: flex; gap:20px;}
ul.col3 li{display:flex;align-items: center;flex:1 1 33.33%}
ul.col3 li svg{width: 60px;height:30px;flex: 0 0 60px; color:var(--dark-blue)}
ul.col3 li > div{padding:15px}
ul.col3 li a{color:var(--blue); display:block}

.container, ul.container {width:1244px; margin:0 auto;}
.container.small, ul.container.small {width:850px;}
.container.large, ul.container.large {max-width: 1500px;width: 100%;}

section{padding:20px;}
section.np{padding:0;}

.legaltext{font-size:0.8em;}

.padding{padding:75px 45px}

#carouselQuestions{height:300px;}

.question-block{margin-bottom:20px;font-size: 1.1em;display: flex;flex-direction: column;height: 100%;}
.question-block .question{margin-bottom:10px;flex: 1 1 auto;}
.question-block .answer{
    flex: 1 1 auto;
    padding: 0;
}

.answer-block{
    display: flex;
    gap: 40px;
    align-items: center;
    height: 100%;
}

.answer-block .answers{
    display: flex;
    gap: 8px;
    flex-direction: column;
}
.answer-block .answers.row{
    flex-direction: row;
    flex-wrap: nowrap;
    margin: 0;
}


.answer-block .image{width:35%;max-height:150px;flex: 1 0 auto;}
.answer-block .image img,
.answer-block .image svg{display:block; max-height:150px; width:100%;}

.answer-block.img-bottom{flex-direction: column-reverse;gap:20px}
.answer-block.img-bottom .answers{width: 100%}
.answer-block.img-bottom .image{width:80%}

.answer-block.img-right{flex-direction: row-reverse;}
.answer-block.img-right .answers{width: 100%}


form input[type="checkbox"],
form input[type="radio"]{
    position: absolute;
    visibility: hidden;
    z-index: -1000;
    left: -5000px;
}
form .answers.text input[type="checkbox"] + label,
form .answers.text input[type="radio"] + label{
    padding: 10px 0 10px 40px;
    /* line-height:40px; */
    position: relative;
    display: block;
    cursor: pointer;
}
form .answers.text input[type="checkbox"] + label:before,
form .answers.text input[type="radio"] + label:before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    background: #fff;
    width: 22px;
    height: 22px;
    border: 3px solid var(--dark-blue);
    border-radius: 4px;
    box-sizing: content-box;
}
form .answers.text input[type="radio"] + label:before {
    border-radius: 16px;
}
form .answers.text input[type="checkbox"]:checked + label:after,
form .answers.text input[type="radio"]:checked + label:after {
    content: "";
    position: absolute;
    left: 7px;
    top: 12px;
    background: var(--soft-green);
    width: 14px;
    height: 14px;
    border-radius: 2px;
    box-sizing: content-box;
}
form .answers.text input[type="radio"]:checked + label:after {
    border-radius: 12px;
}

form .answers.button_with_text input[type="checkbox"] + label,
form .answers.button_with_text input[type="radio"] + label{
    padding: 12px 15px;display:block;border-radius:5px;
    background:var(--blue); color:#fff;
}

form .answers.button_with_icon input[type="checkbox"] + label,
form .answers.button_with_icon input[type="radio"] + label{
    background:var(--blue);display:block;border-radius:5px;
}
form .answers.button_with_icon input[type="checkbox"]:checked + label,
form .answers.button_with_icon input[type="radio"]:checked + label,
form .answers.button_with_text input[type="checkbox"]:checked + label,
form .answers.button_with_text input[type="radio"]:checked + label{
    background: var(--soft-green);
}
form .answers.button_with_icon .image{width: 100%;max-height: unset}

input.error{border-color:red;}
input.error + label:before{border-color:red !important;}

button,a.btn{padding: 12px 15px;background:var(--blue);color:#fff;border:0;font-weight: bold;font-size: 0.9em;cursor:pointer;transition:all 0.5s;box-sizing: border-box;}
button:hover,a.btn:hover{background:var(--dark-blue);color: #fff;}
button.inverse, a.btn.inverse{background:#fff;border:1px solid #707070;color:#707070}
button.inverse:hover, a.btn.inverse:hover{background:#006FCF;color:#fff;}
button.inactive, a.btn.inactive{background:#707070;}
button.inactive:hover,
a.btn.inactive:hover{
  background:#707070;
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  perspective: 1000px;
}

button.outlined, a.btn.outlined{background: #fff; border:1px solid #006FCF; color:#00175A}

nav .inner button{width: 44px;}
nav .inner button.active{background:var(--dark-blue)}

.slider{background:#fff;padding:30px 20px 30px;position: relative;}

nav{display:flex;justify-content: space-between;}

#danke{display:none}

.spacer{height:100px}

header{padding:20px;background:#fff;width:100%;display:flex;justify-content: space-between;box-sizing: border-box;align-items: center;font-size: 1.1em;}
header svg.logo{height: 40px;width: 198px;color:var(--dark-blue)}

svg.block{display:block;}

#page2 .header{display:flex;gap: 40px;justify-content: space-between;align-items: center;flex-wrap: nowrap}
#page2 .header svg{display:block;width:150px;flex: 0 1 auto;}
#page2 #result {display:flex; justify-content: center; align-items: center; width:100%}
#page2 .header .prozent{font-size:1.4em;color:var(--soft-green);line-height: 1;}
#page2 .header .prozent .number{font-size: 2.5em;line-height: 1;}

#page2 .los{background: var(--blue);color:#fff;padding:20px;margin: 40px 0 20px; display:none;}
#page2 .los #code{font-size: 2.5em;line-height: 1;text-align: center;margin:20px 0 0}

#page2 .instagram {display: flex;padding: 20px 40px;gap: 20px;justify-content: center;}

#page2 nav{margin-bottom:1em;}

hr{border:0;height:1px;background:#fff;margin:30px 0 }

p.hl{font-size:1.1em;font-weight:bold;margin-top: 1rem;}



footer{background:var(--dark-blue);padding:60px 20px 65px;color:#fff;font-size:14px;line-height:22px;font-weight:lighter;text-align: center}
footer svg.logo{height:37px;width: 188px;color:#fff;margin-bottom:1rem}
footer nav{justify-content: center; gap: 10px;}