/* GLOBAL ------------------------------------------------------------------------------------------------------------- */
:root {
  box-sizing: border-box; /*Prevent overflow/vertical scroll bars*/
  scroll-behavior: smooth;

  /* COLORS */
  --white: #fafafa;
  --pink: #da007b;
  --blackberry: #690e42;
  --green: #00866d;

  /* OPACITY */
  --placeholderText: 0.5;

  /* LINES */
  --lineWidth: 2px;

  /* EDGES */
  --borderRadiusImages: 2vw;
  --borderRadiusButton: 10vw;

  /* GAPS */
  --xsGap: 2vh;
  --sGap: 4vh;
  --mGap: 10vh;
  --lGap: 15vh;
  --xlGap: 40vh;

  /* MARGIN AND GUTTER */
  --sideMargin: 15%;

  /* FONTS DESKTOP */
  --h1FontSize: 12rem;
  --h1LineHeight: 7rem;
  --h2FontSize: 6rem;
  --h2LineHeight: 5.25rem;
  --h3FontSize: 4rem;
  --h3LineHeight: 4.25rem;

  --quoteFontSize: 2.5rem;
  --quoteLineHeight: 2.75rem;

  --textFontSize: 1.75rem;
  --textLineHeight: 2.2rem;
  --detailsFontSize: 1.5rem;
  --detailsLineHeight: 2rem;

  --buttonFontSize: 1.75rem;
  --buttonLineHeight: 2rem;
  --priceFontSize: 1.75rem;
  --priceLineHeight: 2rem;
}

html {
  height: 100%; /* Force footer to end of page */
}

@font-face {
  font-family: "Bonny-Regular";
  src: url(/assets/fonts/Bonny_Complete/ttf/Bonny-Regular.ttf)
      format("truetype"),
    url(/assets/fonts/Bonny_Complete/woff2/Bonny-Regular.woff2) format("woff2"),
    url(/assets/fonts/Bonny_Complete/woff/Bonny-Regular.woff) format("woff");
}

@font-face {
  font-family: "Bonny-Light";
  src: url(/assets/fonts/Bonny_Complete/ttf/Bonny-Light.ttf) format("truetype"),
    url(/assets/fonts/Bonny_Complete/woff2/Bonny-Light.woff2) format("woff2"),
    url(/assets/fonts/Bonny_Complete/woff/Bonny-Light.woff) format("woff");
}

@font-face {
  font-family: "Bonny-Medium";
  src: url(/assets/fonts/Bonny_Complete/ttf/Bonny-Medium.ttf) format("truetype"),
    url(/assets/fonts/Bonny_Complete/woff2/Bonny-Medium.woff2) format("woff2"),
    url(/assets/fonts/Bonny_Complete/woff/Bonny-Medium.woff) format("woff");
}

@font-face {
  font-family: "Gwendolyn-Regular";
  src: url(/assets/fonts/Gwendolyn/ttf/Gwendolyn-Regular.ttf) format("truetype"),
    url(/assets/fonts/Gwendolyn/woff2/Gwendolyn-Regular.woff2) format("woff2"),
    url(/assets/fonts/Gwendolyn/woff/Gwendolyn-Regular.woff) format("woff");
}

* {
  margin: 0px; /* Default margins */
  padding: 0px; /* Default padding */
  font-family: "Bonny-Regular", sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  text-decoration: none;
  color: var(--blackberry);
  scroll-behavior: smooth; /* Smooth scrolling */
  word-break: break-word;
}

body {
  background-color: var(--white);

  /* Force footer to end of page */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

header {
  display: flex;
  flex-direction: row;
  width: auto;
  height: auto;
  border-bottom: var(--green) solid var(--lineWidth);
}

main {
  flex: 1;
}

footer {
  background-color: var(--green);
  padding: 0px var(--sideMargin);
}

/* FONTS -------------------------------------------------------------------------------------------------------------- */
h1 {
  font-family: "Gwendolyn-Regular", sans-serif;
  font-size: var(--h1FontSize);
  line-height: var(--h1LineHeight);
  letter-spacing: 0rem;
  text-decoration: none;
  color: var(--pink);

  text-align: center;
  margin-bottom: var(--mGap);
}

.quote {
  font-family: "Bonny-Light", sans-serif;
  font-size: var(--quoteFontSize);
  line-height: var(--quoteLineHeight);
  letter-spacing: 0rem;
  text-decoration: none;
  color: var(--pink);
}

h2 {
  font-family: "Gwendolyn-Regular", sans-serif;
  font-size: var(--h2FontSize);
  line-height: var(--h2LineHeight);
  letter-spacing: 0rem;
  text-decoration: none;
  color: var(--pink);

  margin-bottom: var(--xsGap);
}

h3 {
  font-family: "Gwendolyn-Regular", sans-serif;
  font-size: var(--h3FontSize);
  line-height: var(--h3LineHeight);
  letter-spacing: 0rem;
  text-decoration: none;
  color: var(--pink);
}

li,
a,
p {
  font-family: "Bonny-Regular", sans-serif;
  font-size: var(--textFontSize);
  line-height: var(--textLineHeight);
  letter-spacing: 0rem;
  text-decoration: none;
  color: var(--blackberry);
}

p a {
  font-family: "Bonny-Medium", sans-serif;
  font-size: var(--textFontSize);
  line-height: var(--textLineHeight);
  color: var(--pink);
}

.details {
  font-size: var(--detailsFontSize);
  line-height: var(--detailsLineHeight);
}

.details a {
  font-family: "Bonny-Medium", sans-serif;
  font-size: var(--detailsFontSize);
  line-height: var(--detailsLineHeight);
  color: var(--pink);
}

.menu-text {
  font-family: "Bonny-Regular", sans-serif;
  font-size: var(--textFontSize);
  line-height: var(--textLineHeight);
  letter-spacing: 0rem;
  text-decoration: none;
  color: var(--green);
}

button {
  font-family: "Bonny-Regular", sans-serif;
  font-size: var(--buttonFontSize);
  line-height: var(--buttonLineHeight);
  letter-spacing: 0rem;
  text-decoration: none;
  color: var(--white);
}

.price {
  font-family: "Bonny-Medium", sans-serif;
  font-size: var(--priceFontSize);
  line-height: var(--priceLineHeight);
  letter-spacing: 0rem;
  text-decoration: none;
  color: var(--pink);
}

.footerLink {
  font-family: "Bonny-Regular", sans-serif;
  font-size: var(--detailsFontSize);
  line-height: var(--detailsLineHeight);
  letter-spacing: 0rem;
  text-decoration: none;
  color: var(--white);
}

input,
textarea {
  font-family: "Bonny-Medium", sans-serif;
  font-size: var(--detailsFontSize);
  line-height: var(--detailsLineHeight);
  letter-spacing: 0rem;
  text-decoration: none;
  color: var(--white);
}

/* KTI ---------------------------------------------------------------------------------------------------------------- */
strong {
  font-family: "Bonny-Medium", sans-serif;
}

em {
  font-style: italic; /* Not supported by font */
}

li {
  list-style-type: disc;
}

/* BUTTONS ------------------------------------------------------------------------------------------------------------ */
button {
  background-color: var(--pink);
  border: none;
  border-radius: var(--borderRadiusButton);
  padding: 8px 20px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  cursor: pointer;

  transition: background-color 0.5s ease, transform 0.5s ease;
}

button:hover {
  background-color: var(--blackberry);
  transform: scale(1.05);
}

/* HEADER ------------------------------------------------------------------------------------------------------------- */
#headerContainer {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: space-between;
  margin: 0px var(--sideMargin);
  padding: var(--xsGap) 0px;
}

#logo {
  display: flex;
  min-height: 80px;
}

#menu {
  display: flex;
  width: 80%;
  height: auto;
  margin: 0px;
  justify-content: flex-end;
}

#menu ul {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}

#menu li {
  margin-left: 25px;
  list-style-type: none;
}

#burgerMenu,
#burgerLinks {
  display: none;
}

/* FOOTER --------------------------------------------------------------------------------------------------------------- */
footer {
  display: flex;
  height: 100px;
  justify-content: space-between;
  align-items: center;
  background-color: var(--green);
  padding: 0px var(--sideMargin);
}

.footerLink {
  margin-right: 2vw;
}

.footerSocials {
  display: flex;
  width: 20%;
  justify-content: flex-end;
}

.footerSocials a {
  display: flex;
  margin-left: var(--sGap);
  justify-content: flex-end;
}

.footerSocials a img {
  display: flex;
  width: 25px;
}

/* MULTIPLE PAGES ----------------------------------------------------------------------------------------------------------- */
.introContainer {
  display: flex;
  width: auto;
  height: auto;
  padding: var(--mGap) 0px var(--sGap) 0px;
  border-bottom: var(--pink) solid var(--lineWidth);
}

.introContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 0px var(--sideMargin);
}

.introContent p {
  text-align: center;
  margin-bottom: var(--sGap);
  width: 75%;
}

.outroContainer {
  display: flex;
  width: auto;
  height: auto;
  padding: var(--mGap) 0px var(--mGap) 0px;
}

.outroContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 0px var(--sideMargin);
}

/* FORMS --------------------------------------------------------------------------------------------------------------- */
.form {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.feld {
  background-color: var(--pink);
  border: none;
  border-radius: var(--borderRadiusButton);
  padding: 1vw 2vw;
  margin-bottom: var(--xsGap);
}

.oneLineForm {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.oneLineForm * {
  width: 37%;
}

#message {
  border-radius: 2.5vw;
  height: 20vh;
}

#submit {
  width: 50%;
  background-color: var(--pink);
  border: none;
  border-radius: var(--borderRadiusButton);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  padding: 1vw 2vw;
  cursor: pointer;
  margin-top: var(--xsGap);

  transition: background-color 0.5s ease, transform 0.5s ease;
}

#submit:hover {
  background-color: var(--blackberry);
  transform: scale(1.05);
}

::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: var(--white);
  opacity: var(--placeholderText); /* Firefox */
}

:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: var(--white);
  opacity: var(--placeholderText);
}

::-ms-input-placeholder {
  /* Microsoft Edge */
  color: var(--white);
  opacity: var(--placeholderText);
}

.honeypot {
  position: absolute;
  left: -9999px;
}

/* HOMEPAGE ----------------------------------------------------------------------------------------------------------- */
#homepageContainer {
  display: flex;
  width: auto;
  height: auto;
  padding: var(--sGap) 0px var(--mGap) 0px;
}

#homepageContent {
  display: flex;
  flex-direction: row;
  width: 100%;
  margin: 0px var(--sideMargin);
}

#homepageContentLeft {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 50%;
  height: auto;
  margin: 0px;
}

#homepageContentLeft button {
  width: 20vw;
  height: 120%;
}

#homepageContentLeft a {
  margin: var(--xsGap) 0px;
}

#homepageContentRight {
  display: flex;
  width: 50%;
  height: auto;
  margin: 0px;
}

#homepageContentRight picture img {
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}

/* PRODUCTS ----------------------------------------------------------------------------------------------------------- */
.productContainer {
  display: flex;
  width: auto;
  height: auto;
  padding: var(--mGap) 0px var(--mGap) 0px;
  border-bottom: var(--pink) solid var(--lineWidth);
}

.productContent {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  margin: 0px var(--sideMargin);
}

.productImages {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 45%;
  height: auto;
  margin: 0px;
}

.productImages picture img {
  position: relative;
  max-width: 100%;
  height: auto;
  border-radius: var(--borderRadiusImages);
}

.productText {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 45%;
  height: auto;
  margin: 0px;
}

.productText p {
  margin-bottom: var(--xsGap);
}

.productOrder {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

/* Slideshow */
.slideshowNavigation {
  display: flex;
  align-items: center;
  position: absolute;
  bottom: -50px;
  width: auto;
  height: auto;
  background-color: var(--white);
  border-radius: var(--borderRadiusButton);
  padding: 0 10px;
}

.back,
.next {
  cursor: pointer;
  padding: 0 10px;
  color: var(--pink);
  font-weight: bold;
  font-size: 20px;
  user-select: none;
}

.dot {
  cursor: pointer;
  height: 8px;
  width: 8px;
  margin: 1px 5px;
  border-radius: 50%;
  display: inline-block;
  background-color: var(--pink);
  opacity: 0.4;

  transition: opacity 0.5s ease;
}

.active,
.dot:hover {
  opacity: 1;
}

/* STORIES ----------------------------------------------------------------------------------------------------------- */
.storyContainer {
  display: flex;
  width: auto;
  height: auto;
  padding: 0px 0px var(--lGap) 0px;
}

.storyContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.storyContent *:not(:last-child):not(li) {
  padding: 0px 0px var(--xsGap) 0px;
}

.storyContent p {
  text-align: center;
  margin: 0px var(--sideMargin);
}

.storyContent picture {
  margin: var(--mGap) var(--sideMargin);
}

.storyContent img {
  width: 100%;
  display: flex;
  position: relative;
  border-radius: var(--borderRadiusImages);
}

/* Gallery */
.slideshow-container {
  width: 100%;
  padding: 0 !important;
}

/* CONTACT ----------------------------------------------------------------------------------------------------------- */
#contactContainer {
  display: flex;
  width: auto;
  height: auto;
  padding: var(--mGap) 0px;
}

#contactContent {
  display: flex;
  flex-direction: row;
  width: 100%;
  margin: 0px var(--sideMargin);
}

#contactContentLeft {
  display: flex;
  width: 50%;
  margin: 0px;
}

#contactContentRight {
  display: flex;
  flex-direction: column;
  width: 50%;
  margin: 0px;
}

/* PRESS ----------------------------------------------------------------------------------------------------------- */
#downloadContainer {
  display: flex;
  width: auto;
  height: auto;
  padding: var(--mGap) 0px var(--mGap) 0px;
}

#downloadContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 0px var(--sideMargin);
}

.downloadLink {
  text-align: center;
  margin: 0px 0px var(--sGap) 0px;
}

/* FOOTER PAGES ----------------------------------------------------------------------------------------------------------- */
.footerPagesContainer {
  display: flex;
  width: auto;
  height: auto;
  padding: var(--mGap) 0px var(--mGap) 0px;
}

.footerPagesContent {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0px var(--sideMargin);
}

/* ORDER ----------------------------------------------------------------------------------------------------------- */
#orderContainer {
  display: flex;
  width: auto;
  height: auto;
  padding: var(--sGap) 0px var(--mGap) 0px;
}

#orderContent {
  display: flex;
  flex-direction: row;
  width: 100%;
  margin: 0px var(--sideMargin);
}

#productList {
  display: flex;
  flex-direction: column;
  width: 50%;
  height: auto;
}

.orderProduct {
  display: flex;
  flex-direction: column;
  width: 75%;
  margin: 0px 0px var(--xsGap) 0px;
}

.orderProductItem {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
}

.orderForm {
  display: flex;
  flex-direction: column;
  width: 50%;
}

.orderInfos {
  margin-top: var(--mGap);
}

/* MEDIA QUERIES ------------------------------------------------------------------------------------------------------ */
/* Mobile Menu */
@media (max-width: 1500px) {
  /* HEADER ------------------------------------------------------------------------------------------------------------- */
  header {
    flex-direction: column;
  }

  #headerContainer {
    width: auto;
  }

  #logo {
    min-height: 40px;
  }

  #menu {
    display: none;
  }

  #burgerMenu {
    display: flex;
    width: 10%;
    align-items: center;
  }

  #burgerMenu a {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-end;
    height: 60%;
    width: 100%;
  }

  #burgerMenu span {
    width: 30px;
    height: 4px;
    background-color: var(--green);
    border-radius: var(--borderRadiusButton);
  }

  #burgerLinks {
    display: none;
    flex-direction: column;
    padding: var(--xsGap) 0px;
  }

  #burgerLinks a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding-bottom: var(--xsGap);
  }

  #burgerLinks li {
    list-style-type: none;
  }
}

/* Mobile */
@media (max-width: 900px) {
  /* GLOBAL ------------------------------------------------------------------------------------------------------------- */
  :root {
    /* EDGES */
    --borderRadiusImages: 5vw;

    /* GAPS */
    --xsGap: 2vh;
    --sGap: 4vh;
    --mGap: 8vh;
    --lGap: 10vh;
    --xlGap: 20vh;

    /* MARGIN AND GUTTER */
    --sideMargin: 10%;

    /* FONTS MOBILE */
    --h1FontSize: 5rem;
    --h1LineHeight: 4.5rem;
    --h2FontSize: 3rem;
    --h2LineHeight: 3rem;
    --h3FontSize: 2.5rem;
    --h3LineHeight: 2.75rem;

    --quoteFontSize: 1.8rem;
    --quoteLineHeight: 2rem;

    --textFontSize: 1.25rem;
    --textLineHeight: 1.55rem;
    --detailsFontSize: 1.25rem;
    --detailsLineHeight: 1.7rem;

    --buttonFontSize: 1.5rem;
    --buttonLineHeight: 1.75rem;
    --priceFontSize: 1.5rem;
    --priceLineHeight: 1.75rem;
  }

  /* FOOTER --------------------------------------------------------------------------------------------------------------- */
  footer {
    display: flex;
    flex-direction: column;
    height: auto;
    align-items: center;
  }

  .footerLinks {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--sGap) 0px;
  }

  .footerLink {
    margin-right: 0vw;
    margin-bottom: var(--xsGap);
  }

  .footerSocials {
    width: 50%;
    justify-content: center;
  }

  .footerSocials a {
    margin: 0 var(--xsGap);
    margin-bottom: var(--sGap);
  }

  /* FORMS --------------------------------------------------------------------------------------------------------------- */
  .feld {
    padding: 2.5vw 5vw;
    margin-bottom: var(--xsGap);
  }

  #message {
    border-radius: 5vw;
  }

  #submit {
    width: 50%;
    padding: 2.5vw 5vw;
    margin-top: var(--xsGap);
  }

  /* MULTIPLE PAGES ----------------------------------------------------------------------------------------------------------- */
  .introContent p {
    width: 100%;
  }

  /* HOMEPAGE ----------------------------------------------------------------------------------------------------------- */
  #homepageContainer {
    padding: var(--mGap) 0px;
  }

  #homepageContent {
    flex-direction: column;
  }

  #homepageContentLeft {
    align-items: center;
    justify-content: space-evenly;
    width: 100%;
  }

  #homepageContentLeft button {
    width: 50vw;
    height: 120%;
  }

  #homepageContentRight {
    width: 100%;
  }

  #homepageContentRight picture img {
    margin-top: var(--mGap);
  }

  /* PRODUCTS ----------------------------------------------------------------------------------------------------------- */
  .productContent {
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    margin: 0px var(--sideMargin);
  }

  .productImages {
    flex-direction: column;
    width: 100%;
    margin-bottom: var(--sGap);
  }

  .productImages picture {
    width: 100%;
    height: 100%;
  }

  .productImages picture img {
    max-width: none;
    width: 100%;
    height: 100%;
  }

  .productText {
    margin-top: var(--mGap);
    width: 100%;
  }

  .productOrder {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--mGap);
  }

  /* Slideshow */
  .slideshowNavigation {
    padding: 2px 2px;
    bottom: -45px;
  }

  .back,
  .next {
    padding: 0 15px;
    font-size: 15px;
  }

  .dot {
    height: 6px;
    width: 6px;
    margin: 1px 5px;
  }

  /* CONTACT ----------------------------------------------------------------------------------------------------------- */
  #contactContent {
    flex-direction: column;
  }

  #contactContentLeft {
    width: 100%;
    margin-bottom: var(--mGap);
  }

  #contactContentRight {
    width: 100%;
  }

  /* ORDER ----------------------------------------------------------------------------------------------------------- */
  #orderContainer {
    padding: var(--sGap) 0px;
  }

  #orderContent {
    flex-direction: column;
  }

  #productList {
    width: 100%;
    margin-bottom: var(--lGap);
  }

  .orderProduct {
    width: 100%;
    margin: 0px 0px var(--xsGap) 0px;
  }

  .orderProductItem {
    width: 100%;
  }

  .orderForm {
    width: 100%;
  }

  .orderInfos {
    margin-top: var(--mGap);
  }
}