/* FSP - Falling | in Love - CSS
------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------ */
/* Variables
--------------------------------------------- */
:root {
  --cBlack: #000;
  --cWhite: #ffffff;
  --cBlue: #a3dbf0;
  --cYellow: #F8DA8E;
  --gradYellow: #F8DA8E;
  --cPink: #F8DA8E;
}

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

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

html {
  box-sizing: border-box;
  background-color: var(--cBlack);
}

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

body,
button,
input,
select,
optgroup,
textarea {
  color: var(--cWhite);
  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;
  background-color: var(--cBlack);
}

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 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: 3.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;
}
.fontPremiere {
  font-size: clamp(1.25rem, 5vw, 2rem);
  line-height: 1;
  letter-spacing: 8px;
}
/* Utility */
.mw-md {
  max-width: 768px;
}

/* Formatting
  --------------------------------------------- */
body {
  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(--cWhite);
  transition: 0.3s all ease;
  border-radius: 0;
}

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

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

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

.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(--gradYellow);
  color: var(--cBlack);
}

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

.btnLearnMore2 {
  background: var(--gradYellow);
  color: #000;
}

.btnLearnMore2:focus,
.btnLearnMore2:visited,
.btnLearnMore2:hover {
  background: var(--gradYellow);
  color: var(--cBlack);
}
.btnForm {
  background: var(--cBlack);
  color: var(--cWhite);
}
.btnBig {
  background: var(--cPink);
  color: var(--cBlack);
  font-size: 1rem;
}

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

.headerBtnArrow {
  display: none;
}

.headerBtnArrowBlack.active {
  display: block;
}

.headerBtnArrowPeach.active {
  display: block;
}

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

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

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

.cGold {
  color: var(--cBlack);
}
.cPink {
  color: var(--cPink);
}
.bgGold {
  background-color: var(--cBlack);
}
.stepInd {
  background-color: var(--cPink);
  color: var(--cBlack);
}
.cWhite {
  color: #fff;
}

.bgWhite {
  background-color: #fff;
}

.cPink-force {
  color: var(--cPink) !important;
}

/* 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 */
}
.fyEnd {
  display: flex;
  align-items: flex-end;
}
.fxCenter {
  display: flex;
  justify-content: center;
}
/* 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: #F8DA8E;
  height: 3px;
}

/* 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;
  } */

.heroSecBg {
  width: 100%;
  aspect-ratio: 16/9;
  height: auto;
  background: url('assets/frida/fridaHeaderDesk.webp');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}
@media (orientation: portrait) {
  .heroSecBg {
    background: url('assets/frida/fridaHeaderMobile.webp');
    aspect-ratio: 9/16;

    max-width: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
}
.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: -3rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  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('assets/icons/fsp-close-button.svg') no-repeat center/cover;
  width: 1.5rem;
  height: 2rem;
  padding: 0 !important;
  opacity: 1;
  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(--cWhite);
  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(--cWhite) ;
}

.footerSec4 a.btnLearnMore2 {
  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;
}

#footerEnd .footerSec4 {
  position: relative;
  background: url('assets/frida/fridaFooterDesk.webp');
  background-size: cover;
  width: 100%;
  aspect-ratio: 1656 / 932;
}

.footerSec4 .container-xxl {
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}


.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(--cBlack) !important;
  border: 2px solid var(--cWhite);
  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;
}
.schritt2Col label {
  color: var(--cPink);
}
/* 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: 50%;
  left: 0;
  transform: translateY(-50%);
  height: 25px;
  width: 25px;
  background-color: transparent;
  border: 2px solid var(--cWhite);
  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(--cPink);
  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 {
  max-height: 117px;
  width: auto;
  height: 100%;
}

.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,
#step1Decline {
  opacity: 0.5;
  pointer-events: none;
}
#schritt-1.active #step1Btn,
#schritt-1.active #step1Decline {
  opacity: 1;
  pointer-events: all;
}

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

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

#labelStep2addPerson,
#labelStep2addPersonMail {
  opacity: 0.5;
  pointer-events: none;
  transition: 0.3s all ease;
}
#step2addPerson {
  min-width: 460px;
}
@media (max-width: 573px) {
  #step2addPerson {
    min-width: 300px;
  }
}
#step2Btn {
  background: var(--cPink);
  color: var(--cBlack);
}

#labelStep2addPerson.active,
#labelStep2addPersonMail.active {
  opacity: 1;
  pointer-events: all;
}

#step2addPerson::placeholder,
#step2addPersonMail::placeholder {
  color: var(--cWhite);
  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: -2.75rem;
    transform: scale(0.75);
  }
}

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

#stepsForm .hInputBig {
  width: 190px;
  height: 50px;
  min-width: auto;
  padding: 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btnOutline {
  background: transparent;
  border: 2px solid var(--cPink);
  color: var(--cPink);
  padding: 0.2rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.rsvpBadgeCont {
  margin-top: -3rem;
  z-index: 5;
  position: relative;
  margin-bottom: 4rem;
}
.sponsorenRow {
  width: 100%;
}
.sponsorenRow .col-12 {
  justify-content: space-between;
  width: 100%;
}
/* .sponsorenRow img {
  max-height: 50px;
} */

.sponsWrap {
  height: 50px;
  width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: 30px;
  margin-block: 15px;
}

#confirmNoShow .modal-content {
  border: 2px solid var(--cPink);
  border-radius: 32px;
  padding: 0.25rem 0.5rem;
  max-width: 90%;
  width: 720px;
  margin-inline: auto;
}

@media (max-width: 576px) {
  html {
    font-size: 19px;
  }
  body {
    hyphens: none;
    -webkit-hyphens: none;
  }
  .sponsorenRow img {
    max-height: 30px;
  }
  #footerEnd .footerSec4 {
    background-size: contain;
    width: 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
    padding-bottom: 100px;
    aspect-ratio: auto;
  }

  .arrowDown {
    max-width: 30px;
  }
  .rsvpBadgeCont {
    margin-bottom: 1rem;
  }
    .sponsWrap {
    width: 80px;
    margin: 5px;
  }
  .stoerer_hero {
    top: 70%;
  }
}

#loader {
  position: fixed;
  left:0;
  right:0;
  bottom:0;
  top:0;
  width:100%;
  height:100%;
  background-color: rgba(0,0,0,.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: -1;
}

#loader.active {
  z-index: 9999;
}


.stoerer_hero {
  position: absolute;
  left:50%;
  top:60%;
  transform:translate(-50%,-50%);
}

.video-holder {
  position: absolute;
  left:0;
  right:0;
  bottom:0;
  top:0;
  width:100%;
  height:100%;
}

.video-holder video {
  position: absolute;
  left:0;
  right:0;
  bottom:0;
  top:0;
  width:100%;
  height:100%;
  object-fit: cover;
}
.videoTonWrapper {
  height: 80px;
  position: relative;
}

.footer-img {
  width: 33%;
}
.footer-img-4,
.footer-img-5 {
  width: 50%;
}

@media (min-width: 992px) {
  .footer-img {
    width: 20%;
  }

}