/* FSP - Falling | in Love - CSS
------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------ */
/* Variables
--------------------------------------------- */
:root {
  --cBlack: #06252a;
  --cWhite: #ffffff;
  --cBlue: #a3dbf0;
}

/* Normalizer
--------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

/* Fonts
--------------------------------------------- */
html {
  font-size: 20px;
}

body,
button,
input,
select,
optgroup,
textarea {
  color: var(--cBlack);
  font-size: 1rem;
  line-height: 1.5;
  font-family: futura-pt, sans-serif;
  font-weight: 500;
  font-style: normal;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  clear: both;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  font-weight: 400;
  line-height: 1;
}

h2,
.h2 {
  font-size: 2rem;
}

.subHeader {
  line-height: 1.25;
}

.schrittWrapper p {
  line-height: 1.25;
}

h2.worldPremiere {
  font-size: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

h2.worldPremiere span {
  letter-spacing: 10px;
}

h2.worldPremiere span:first-of-type {
  font-size: 2rem;
}

/* h2.worldPremiere span:last-of-type {
  font-size: 1.25rem; */
/* } */

h2.worldPremiere img {
  width: 12.8rem;
  margin-bottom: 0.5rem;
  margin-top: 2rem;
  padding-right: 0.5rem;
}

.fontDate {
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: 5px;
}

.schritt1Wrapper h2 {
  font-size: 2.5rem;
}

.schritt1Wrapper .subHeader {
  font-size: 1.3rem;
}

.fontTrailer {
  font-size: 0.75rem;
}

.smallprint {
  font-size: 0.65rem;
}

@media (min-width: 768px) {
  .font2-5 {
    font-size: 2.5rem;
  }
}

/* Font Weights */
.fontLight {
  font-weight: 300;
}

.fontBook {
  font-weight: 400;
}

.fontMedium {
  font-weight: 500;
}

.fontDemi {
  font-weight: 600;
}

.fontHeavy {
  font-weight: 700;
}

/* Formatting
--------------------------------------------- */
body {
  background: url("https://fspmask.brotsalz.de/assets/imgs/fsp-body-background-marble.webp") no-repeat center/cover;
  max-width: 1920px;
  margin-inline: auto;
}

button {
  background: transparent;
  border: none;
  border-radius: 0;
}

img {
  height: auto;
  max-width: 100%;
}

a {
  text-decoration: none;
  color: var(--cBlack);
  transition: 0.3s all ease;
  border-radius: 0;
}

#stepsForm a {
  color: var(--cBlack);
}

#stepsForm a:focus,
#stepsForm a:visited {
  color: var(--cBlack);
}

#stepsForm a:hover,
.aMore:hover {
  color: var(--cBlack);
}

.btnLearnMore1,
.btnLearnMore2,
.btnForm {
  padding: 0.6rem 1.2rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.btnLearnMore1 img,
.btnLearnMore2 img,
.btnForm img {
  margin-left: 0.2rem;
  transform: translateX(0rem);
  transition: 0.3s all ease;
}

.btnLearnMore1 {
  background: var(--cWhite);
  color: var(--cBlack) !important;
}

.btnLearnMore1:focus,
.btnLearnMore1:visited {
  background: var(--cWhite);
  color: var(--cBlack);
}

.btnLearnMore2 {
  background: var(--cBlack);
  color: var(--cWhite) !important;
}

.btnLearnMore2:focus,
.btnLearnMore2:visited {
  background: var(--cBlack);
  color: var(--cWhite);
}

.btnForm {
  background: var(--cBlack);
  color: var(--cWhite);
}

.btnLearnMore1:hover img,
.btnLearnMore2:hover img,
.btnForm:hover img {
  transform: translateX(0.5rem);
}

.headerBtnArrow {
  display: none;
}

.headerBtnArrowBlack.active {
  display: block;
}

.headerBtnArrowPeach.active {
  display: block;
}

#schritt-1 #step1Code {
  min-width: 150px;
  width: 70.5%;
}

/* Colors
--------------------------------------------- */
.cRed {
  color: var(--cWhite);
}
.bgRed {
  background-color: var(--cWhite);
}

.cBrown {
  color: var(--cBlack);
}

.bgBrown {
  background-color: var(--cBlack);
}

.cGold {
  color: var(--cBlack);
}

.bgGold {
  background-color: var(--cBlack);
}

.cWhite {
  color: #fff;
}

.bgWhite {
  background-color: #fff;
}

/* Utility and custom classes
--------------------------------------------- */
/* Flex Shortcuts */
.fCenter {
  display: flex;
  display: -ms-flexbox; /* IE 10 */
  justify-content: center;
  -ms-flex-pack: center; /* IE 10 */
  align-items: center;
  -ms-flex-align: center; /* IE 10 */
}

.fCenterX {
  display: flex;
  display: -ms-flexbox; /* IE 10 */
  justify-content: center;
  -ms-flex-pack: center; /* IE 10 */
}

.fCenterY {
  display: flex;
  display: -ms-flexbox; /* IE 10 */
  align-items: center;
  -ms-flex-align: center; /* IE 10 */
}

/* Z-Index */
.zIndex1 {
  z-index: 1;
}

.zIndex2 {
  z-index: 2;
}

.zIndex3 {
  z-index: 3;
}

/* Gradient Backgrounds and Bars */
.bgGradient {
  background: rgb(255, 180, 74);
  background: linear-gradient(90deg, rgba(255, 180, 74, 1) 0%, rgba(255, 225, 129, 1) 50%, rgba(255, 180, 74, 1) 100%);
  width: 100%;
}

.bgGradient.borderGradient {
  height: 4px;
}

.yellowBar {
  background: var(--cBlack);
  height: 4px;
}

/* Width and Height */
.w75to100 {
  /* Goes from 75% to 100% if < 992px. */
  width: 75%;
}

/* Margins and Paddings */
.mt-min-3 {
  margin-top: -3rem;
}

/* Hero
--------------------------------------------- */
.heroSec {
  height: 100vh;
  min-height: 1000px;
}

.heroSec.active {
  background: url("https://fspmask.brotsalz.de/assets/imgs/fsp-video-preview-image.jpg");
  background-size: 1920px 750px;
  background-repeat: no-repeat;
  background-position: top center;
  height: 84vh;
  min-height: 970px;
}

.videoWrapper {
  display: none;
}

.videoWrapper.active {
  display: block;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
}

.videoWrapper video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.btnPlayWrapper {
  margin-top: -6.5rem;
}

#btnPlay {
  transform: scale(1);
  transition: 0.3s all ease;
  outline: none;
}

#btnPlay:hover {
  transform: scale(1.1);
}

.arrowDown {
  animation: arrowDown 2.5s infinite;
  opacity: 0;
}

@keyframes arrowDown {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  10% {
    opacity: 1;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(25px);
  }
}

.btnMute {
  bottom: 17rem;
  opacity: 1;
  transition: 0.3s all ease;
  transition-delay: 0.3s;
}

.btnMute.active {
  opacity: 0.25;
}

.btnMute.active:hover {
  opacity: 0.75;
}

.heroTransform {
  transform: translateY(-3rem);
}

/* Modal
--------------------------------------------- */
.modal-content {
  background-color: transparent;
  border: none;
  border-radius: 0;
}

.modal-header {
  border-bottom: none;
  border-top-left-radius: calc(0.3rem - 1px);
  border-top-right-radius: calc(0.3rem - 1px);
}

.modal-dialog {
  max-width: 90%;
}

.youtube-video-container {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.youtube-video-container::after {
  display: block;
  content: "";
  padding-top: 56.25%;
}

.youtube-video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modal-body video {
  width: 100%;
  border: 4px solid var(--cBlack);
  cursor: pointer;
}

.modal-backdrop.show {
  opacity: 1 !important;
}

.btn-close {
  right: -2rem;
  top: -1.5rem;
  background: url("https://fspmask.brotsalz.de/assets/icons/fsp-close-button.svg") no-repeat center/cover;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0 !important;
  outline: none;
  box-shadow: none !important;
}

/* Header
--------------------------------------------- */
.site-header {
  max-width: 1920px;
}

.site-header h1 {
  height: 48px;
}

.logoPeach,
.logoWhite {
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  opacity: 0;
  transition: 0.3s all ease;
}

.logoPeach.active {
  z-index: 2;
  opacity: 1;
}

.logoWhite.active {
  z-index: 2;
  opacity: 1;
}

.langSwitch {
  cursor: pointer;
  color: var(--cBlack);
  transition: 0.3s all ease;
}

.langSwitch:hover {
  color: #fff;
}

.langSwitch.active {
  color: #fff;
}

/* Footer
--------------------------------------------- */
#slogan {
  margin-top: -9rem;
}

.slogan {
  font-size: clamp(2rem, 10vw, 8rem);
  line-height: 0.9;
  color: var(--cBlack);
}

.footerCredits {
  font-size: 0.8rem;
}

.galleryImg1 {
  width: 60%;
}

.galleryImg2 {
  width: 85%;
}

.galleryImg3 {
  width: 65%;
}

.galleryImg4 {
  width: 50%;
}

.footerSec4 a {
  color: var(--cBlack);
}

.footerSec4 a:hover,
.footerSec4 a:focus,
.footerSec4 a:hover {
  color: var(--cBlack);
}

.footerBackground {
  bottom: 0;
  left: 0;
  min-height: 1560px;
}
.footerSec3 .zIndex2 {
  margin-bottom: -8rem;
}
.footerSec3 > .zIndex2 img.mb-5 {
  width: 960px;
}
.footerSec3 {
  min-height: 1421px;
}

.footerSec2 .row {
  margin-top: -10rem;
  margin-bottom: 10rem;
}

#footerEnd {
  position: relative;
}

#footerLeafs {
  background-image: url("https://fspmask.brotsalz.de/assets/imgs/fsp-leafs.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#footer {
  margin-top: -6rem;
}

.firstStepDone #footer {
  margin-top: -17rem;
}

@media (max-width: 992px) {
  #footer {
    margin-top: -3rem;
  }
}

@media (max-width: 576px) {
  #slogan {
    margin-top: -5rem;
  }
}

/* Form
--------------------------------------------- */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"] {
  background: var(--cWhite) !important;
  border: 2px solid var(--cBlack);
  outline: none;
  min-width: 300px;
  max-width: 450px;
  border-radius: 0;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus textarea:-webkit-autofill,
textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 2px solid var(--cBlack);
  -webkit-text-fill-color: var(--cBlack);
  -webkit-box-shadow: 0 0 0px 1000px var(--cWhite) inset;
  transition: background-color 5000s ease-in-out 0s;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

input[type="submit"] {
  border-radius: 0;
  border: none;
}

label {
  min-width: 300px;
  max-width: 450px;
}

/* Cusom Checkboxes */
label.checkboxContainer {
  min-width: auto;
  max-width: none;
}

/* Customize the label (the checkboxContainer) */
.checkboxContainer {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: 0.3s all ease;
}

/* Hide the browser's default checkbox */
.checkboxContainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 23%;
  left: 0;
  transform: translateY(-50%);
  height: 25px;
  width: 25px;
  background-color: transparent;
  border: 2px solid var(--cBlack);
  border-radius: 0;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.checkboxContainer input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.checkboxContainer .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid var(--cBlack);
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.checkboxContainer.locked {
  opacity: 0.3;
  pointer-events: none;
}

.schritt2Col {
  width: 50%;
  min-width: 300px;
  max-width: 450px;
}

.formSec {
  margin-top: -3rem;
}

.leaf {
  position: absolute;
}

.leaf-1 {
  top: 0;
  right: 0;
}

.leaf-2 {
  left: 0;
  bottom: -10rem;
}

.rueckmeldungPlakette {
  /* width: 35%;
    min-width: 300px; */
  height: 117px;
}

.formWrapper {
  transition: 1s all ease;
  /* min-height: 750px; */
  width: 100%;
  overflow: hidden;
}

.schrittWrapper {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(100%);
  transition: 1s all ease-in-out;
  opacity: 0;
}

.schrittWrapper.active {
  animation: fadeIn 1s ease forwards;
  animation-delay: 0.6s;
  transform: translateX(0);
}

.schrittWrapper.completed {
  transform: translateX(-100%);
  transition: all 1s ease-in-out;
  animation: fadeOut 0.6s ease forwards;
}

#step1Btn {
  opacity: 0.5;
  pointer-events: none;
}

#step1Btn.active {
  opacity: 1;
  pointer-events: all;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* #labelStep2addPerson {
    pointer-events: none;
}

#labelStep2addPerson.active {
    pointer-events: all;
}

#step2addPerson {
    opacity: 0.3;
    pointer-events: none;
    transition: 0.3s all ease;
    cursor: text !important;
}

#step2addPerson.active {
    opacity: 1;
} */

#labelStep2addPerson,
#labelStep2addPersonMail {
  opacity: 0;
  transform: translateY(-20px);
  pointer-events: none;
  transition: 0.3s all ease;
}

#labelStep2addPerson.active,
#labelStep2addPersonMail.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

#step2addPerson::placeholder,
#step2addPersonMail::placeholder {
  color: var(--cBlack);
  opacity: 0.5;
}

/* Media Queries
--------------------------------------------- */
@media all and (min-height: 1100px) {
  .heroSec.active {
    background-size: 1800px;
  }
}

/* Min-Height */
@media all and (min-height: 1200px) {
  .heroSec.active {
    background-size: 2000px;
  }
}

/* Min-Width */
@media all and (min-width: 2000px) {
  .footerSec3,
  .footerSec3 .footerBackground {
    min-height: 2400px;
  }
}

/* Max-Width */
@media all and (max-width: 992px) {
  .galleryImg1,
  .galleryImg2,
  .galleryImg3,
  .galleryImg4 {
    width: 100%;
  }

  .formSec {
    margin-top: -2.25rem;
  }
}

@media all and (max-width: 768px) {
  .w75to100 {
    width: 100%;
  }

  .footerBackground {
    bottom: 379px;
  }

  .footerSec3 {
    min-height: 1800px;
  }

  .slogan {
    line-height: 1;
  }

  .btn-close {
    right: -1rem;
    top: -2.5rem;
  }
}

@media all and (max-width: 576px) {
  .formSec {
    margin-top: -2rem;
  }

  .modal-dialog {
    margin: 0.5rem auto;
  }

  .optionsGroup {
    padding-left: 0.4rem;
  }

  h2,
  .h2 {
    font-size: 1.5rem !important;
  }

  h2 span,
  .h2 span {
    font-size: 1rem !important;
  }

  .langSwitchWrapper {
    position: absolute;
    bottom: -1rem;
  }

  .site-header .btnLearnMore1 {
    font-size: 0.6rem;
    padding: 0.2rem 0.8rem;
  }

  .heroSec {
    min-height: 500px;
  }

  .fontTrailer {
    font-size: 1.5rem;
  }

  .heroSec.active {
    background-size: auto 850px;
    background-position: top center;
  }
}

/** To Add */
@media (max-width: 576px) {
  .heroTransform {
    transform: translateY(-1rem);
  }
  .footerBackground {
    min-height: 550px;
    bottom: 550px;
  }
  .footerSec3 {
    min-height: 900px;
  }
  .btnMute {
    bottom: 12.5rem;
    transform: scale(0.75);
  }
}

@media (max-width: 576px) {
  .firstStepDone #footer {
    margin-top: -11rem;
  }
}
.schritt3Wrapper .fontDate .fontDemi,
.schritt2Wrapper .fontDate .fontDemi {
  text-transform: uppercase;
}