:root {
  --white: #ffffff;
  --red: #991123;
  --blue: #002956;
  --black: #000000;
  --yellow: #fff78f;
}

@font-face {
  font-family: 'CodecPro';
  src: url('/fonts/Codec-Pro-Variable-Regular.woff2') format('woff2-variations'),
       url('/fonts/Codec-Pro-Variable-Regular.woff2') format('woff2'); 
  font-weight: 100 900; 
  font-style: normal;
  font-display: swap;
}

@font-face {
    font-family: 'PF-AkzidenzCond';
    src: url('../fonts/PF-AkzidenzCond-Bold.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}


html,
body { padding: 0; margin: 0; }
body { background:  var(--yellow); color: var(--blue); font-family: 'CodecPro', sans-serif; font-size: clamp(16px,1.8vw,22px); }
a { transition: color 0.4s; border: none; outline: 0; text-decoration: none; color: var(--blue); }
p { line-height: 1.6em; margin: 0; }
h1,h2 { font-size: 2em; font-weight: bold; }
h3 { font-size: 1.6em; font-weight: bold;  }
img { width: auto; height: auto; max-width: 100%; display: block; line-height: 1; }

.logo { width: 30%; position: absolute; top: 10%; left: 35%; }
.copyright { width: 0.65em; position: absolute; top: 45%; right: 0; }

.mainWrapper { text-align: center; position: relative; }
.contentWrapper { display: flex; align-items: stretch; width: 100%; position: relative; }

.intro { display: flex; align-items: stretch; justify-content: space-between; }
.introImg { width: auto; height: 100vh; }
.intro-text { display: flex; align-items: center; justify-content: center; flex: 1; }
.intro-text img { max-height: 100vh; }

.stepsZone { padding: 0; margin-bottom: 0; }
.steps { padding: 1em; max-width: 1150px; margin: 0 auto ; }

.formZone h3 { display: inline-block; margin-bottom: 1em; }
.formWrapper { margin: 0 auto; box-sizing: border-box; padding: 0 2em; }
.formActive .formWrapper { display: block; }

.formWrapper > * { width: 100%; }
.seperator { display: block; width: 100%; height: 0.1em; background: var(--purple); }
.inputWrapper { margin-bottom: 1em; text-align: left; }
.inputWrapper label { font-weight: 300; margin-bottom: 0.25em; display: inline-block; font-size: 1.4em; }
input { color: var(--yellow); background: var(--blue); border: 2px solid var(--blue); width: 100%; font-size: 1.2em; padding: 0.8em; display: block; margin: 0 auto; text-align: left; outline: 0; box-sizing: border-box; transition: 0.4s; font-family: 'CodecPro', sans-serif; border-radius: 0; font-weight: normal; }

.buttonWrapper { margin: 1em auto; }
input[type="submit"],
.cta{ display: inline-block; font-size: 2em; font-weight: bold; font-family: 'PF-AkzidenzCond', sans-serif; cursor: pointer; color: var(--yellow); background: var(--blue); padding: 0.2em 2em; border-radius: 0; margin-bottom: 0.5em; transition: 0.4s ease-out; width: auto; border: 0.3em solid var(--blue); }
input[type="submit"]:hover,
.cta:hover { background: var(--yellow); color: var(--blue); border-color: var(--blue); }
.formWrapper .buttonWrapper { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
.formWrapper .buttonWrapper svg { fill: var(--blue); opacity: 0; visibility: hidden; }
.loading .formWrapper .buttonWrapper svg { opacity: 1; visibility: visible; }
.loading #submit,
.loading .fileWrapper { opacity: 0.5; pointer-events: none; cursor: default; }

.cols { display: flex; align-items: flex-start; justify-content: flex-start; }
.cols .col:nth-child(1) { width: 35.5%; }
.cols .col:nth-child(2) { width: 55.5%; max-width: 800px; margin-left: 9%; }
.inputWrapper.hidden { display: none; }

.formZone { padding: 4em; }
.formWrapper span.error { color: #c30000; text-align: center; display: block; margin: 3px 0; font-size: 12px; background: white; display: inline-block; padding: 0.2em 0.5em; }
.inputWrapper p { font-size: 0.65em; line-height: 1; margin-bottom: 0.5em; }

.checkboxWrapper { position: relative; display: flex; flex-direction: column; padding: 10px 0; align-items: center; overflow: hidden; min-height: 2em; }
.checkboxWrapper .error { order: 2; }
.checkboxWrapper input { visibility: hidden; opacity: 0; width: 0; height: 0; top: -100px; left: -100px; position: absolute; }
.checkboxWrapper label { display: inline-block; padding-left: 3em; position: relative; cursor: pointer; font-family: 'CodecPro', sans-serif; font-size: clamp(14px, 0.7em, 2rem); line-height: 1.8em; text-align: left; }
.checkboxWrapper label::before { content: ''; position: absolute; top: 0; left: 0; width: 2em; height: 2em; border: 3px solid var(--blue); border-radius: 50%; box-sizing: border-box; }
.checkboxWrapper a { text-decoration: underline; color: var(--purple); }
.checkboxWrapper a:hover { color: var(--yellow); }
.checkboxWrapper label .close { position: absolute;transform: scale(0);left: 0;top: 0;margin: 0; fill: var(--blue);transition: 0.2s;backface-visibility: hidden;display: flex;width: 2em;height: 2em;}
.checkboxWrapper label .close svg { width: 55%; height: auto; margin: 0 auto; display: block; }
.checkboxWrapper input:checked~label .close { transform: scale(0.8); }

.radioWrapper { display: block; width: auto; text-align: left; margin: 0 auto; }
.radioWrapper label { padding: 0 0.3em; border-right: 2px solid var(--white); cursor: pointer; }
.radioWrapper label:last-child { border: none; }
.radioWrapper input { width: 1em; height: 1em; margin: 0; }
.radioWrapper input:checked + label { font-weight: bold; text-decoration: underline; }
.radioWrapper .fieldWrapper { display: flex; margin: 0.5em auto; max-width: 21rem; }
textarea { color: var(--white); background: transparent; width: 100%; height: 8em; font-size: 1em; padding: 0.5em 2em; display: block; margin: 0 auto; text-align: left; outline: 0; box-sizing: border-box; transition: 0.4s; font-family: 'CodecPro', serif; border: 2px solid var(--white); border-radius: 100rem; }
.textareaWrapper { box-sizing: border-box; max-width: 1000px; margin: 0 auto; }

.fileWrapper { position: relative; }
.fileWrapper input { opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; }
.fileWrapper svg { width: 100%; height: auto; }

::placeholder { color: rgba(255,247,143,1); opacity: 0.7; }
.successMsg { display: none; width: 100%; height: 100%; flex-wrap: wrap; align-items: center; justify-content: center; box-sizing: border-box; padding: 15vw 25vw 8vw; position: relative; }
.successMsg h2 { margin: 0; font-weight: bold; line-height: 1; font-size: 1.85em; position: relative; z-index: 2; }
.successMsg h2 span { font-size: .75em; }
.successActive .formZone { padding: 0; }
.successActive .formZone h3:first-child { display: none; }

.successMsg p { align-self: flex-end; line-height: 1.4em; position: relative; z-index: 2; }
.successMsg p.date { margin: 1.5em 0; color: var(--purple); }
.successMsg .diamond p { color: var(--white); }
.successMsg p span { font-weight: bold; }
.successActive .successMsg { display: block; }
.successActive .formWrapper,
.formZone h3.questionSuccessMsg { display: none; }
.successActive #questions.formWrapper { display: block; }
.success-left { position: absolute; left: 0; bottom: 0; width: 40%; }
.success-right { position: absolute; right: 0; top: 0; width: 40%; }    

.successMsg .title { padding: 1em 2rem; background: var(--blue); color: var(--light-blue); border-radius: 100rem; display: inline-block; width: auto; }

.endMsg { width: 100%; height: 100%; flex-wrap: wrap; align-items: center; justify-content: center; box-sizing: border-box; padding: 20vw 25vw 15vw; position: relative; }
.endMsg h2 { margin: 0; font-weight: bold; line-height: 1; font-size: 1.85em; position: relative; z-index: 2; }
.endMsg p { align-self: flex-end; line-height: 1.4em; position: relative; z-index: 2; }


.termsWrapper,
.winnersWrapper { overflow: hidden; overflow-y: auto; height: 100%; }
.winnersWrapper { text-align: center; }
.termsWrapper p a { color: var(--black); font-weight: bold; }
.termsWrapper p,
.termsWrapper ul { line-height: 1.5em; }
.termsWrapper li { margin-bottom: 1.2em; text-align: left; }
.winners { display: inline-block; text-align: center; text-transform: uppercase; padding-bottom: 4em; }
.winner { margin-bottom: 2em; text-align: center; }
.winners table { width: 100%; table-layout: auto; font-size: 0.7em; }
.winners td,
.winners th { padding: 0.5em 0.2em; text-align: left; }
.winnersWrapper .cookie { display: none; }

.productsZone { padding: 4em 2em; }
.productsZone h3 { font-weight: 500; }
.products { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-around; padding: 4em 4em 0; margin: 0 auto; list-style: none; }
.products li {flex: 1 1 20%;margin: 0;box-sizing: border-box;padding: 0 2rem;}
.products img { height: auto; width: 100%; }
.products h4 { font-family: 'PF-AkzidenzCond',sans-serif; font-size: 1.5rem; }

.bottom { padding: 4em; display: flex; align-items: center; justify-content: center; color: var(--light-blue); }
.bottom a { display: inline-block; padding: 0 2em; color: var(--blue); font-size: 0.8em; font-weight: bold; }
.bottom a:hover { color: var(--black); }


.page { display: none; }
.termsContent a { text-decoration: underline; }

.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--blue); color: var(--yellow); box-sizing: border-box; padding: 1em; z-index: 9; }
.winnersActive .winnersWrapper,
.termspageActive .termsWrapper { display: block; }
.closeModal { display: block;
    width: 3em;
    height: 3em;
    background:  var(--blue);
    fill: var(--white);
    position: fixed;
    top: 0;
    right: 0; }
.closeModal svg { width: 76%; height: auto; margin: 0 auto; display: block; }

.ageNotice { background: #2261ae99; align-items: center; justify-content: center; font-weight: bold; }
.ageNotice .modalWrapper { background: #7ed2f6; width: auto; display: block; padding: 1em; text-align: center; color: var(--white); border-radius: 1.5em; }
.ageNotice .buttonWrapper { display: flex; margin-top: 1em; align-items: center; justify-content: center; }
.ageNotice .buttonWrapper span { width: display; width: 2em; height: 2em; display: inline-block; cursor: pointer; transition: 0.4s ease-out; transform: scale(1); margin: 0 2em; }
.ageNotice .buttonWrapper span svg { width: 2em; height: 2em; }
.ageNotice .buttonWrapper span:hover { transform: scale(1.05); }
.ageNoticeActive .ageNotice { display: flex; }

.cow { padding: 0; text-align: center; }
.cow img { width: 100px; height: auto; }

@media screen and (max-width: 1600px) {

}

@media(orientation:portrait){
    .intro { display: block; width: 100%; }
    .introImg { width: 100%; height: auto; }
    .intro-text { display: block; }
    .intro-text img { height: auto; width: 100%; }

    .cols { display: block; width: 100%; }
    .cols .col:nth-child(1) { width: 100%; }
    .cols .col:nth-child(2) { width: 100%; max-width: 600px; margin: 1em auto; }

    .products { display: block; }

}

@media only screen and (max-width: 600px) {
    .products li { margin-bottom: 2em; flex-basis: 50%; }
    input[type="submit"], .cta { font-size: 1.2em; }
    .formZone { padding: 4em 0; }
}

@media screen and (max-width: 700px) {

}