@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800&family=Playfair+Display:wght@700&display=swap');

 @font-face {
     font-family: 'Lacquer';
     src: url('../fonts/Lacquer-Regular.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
 }

 :root {
     --pink: #cb2a62;
     --yellow: #f0dd34;
     --light-yellow: #f6e8a4;
 }


 html {
     scroll-behavior: smooth;
 }

 .tail-container {
     font-family: 'Poppins', sans-serif;
 }

 .hero-bg {
     background:
         linear-gradient(rgba(0, 0, 0, 0.4),
             rgba(0, 0, 0, 0.4)),
         url('https://res.cloudinary.com/dlx6xe3gr/image/upload/q_auto/f_auto/v1781300842/background_tffo9r.png') center/cover no-repeat;
     min-height: 100dvh;
 }

 .logo-img {
     width: 100px;
     height: auto;
     margin-left: 20px;
 }

 @media (min-width: 640px) {
     .logo-img {
         width: 100px;
         margin-left: 10px;
     }
 }

 @media (min-width: 1024px) {
     .logo-img {
         width: 120px;
         margin-left: 10px;
     }
 }

 .hero-title {
     animation: popIn 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }

 @keyframes popIn {
     0% {
         opacity: 0;
         transform: translateY(40px) scale(0.9);
     }

     100% {
         opacity: 1;
         transform: translateY(0) scale(1);
     }
 }

 .nav-link {
     position: relative;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     letter-spacing: 0.5px;
 }

 .nav-link::after {
     content: "";
     position: absolute;
     bottom: 4px;
     left: 0;
     width: 0;
     height: 2px;
     background: linear-gradient(to right, var(--yellow), var(--pink));
     transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     border-radius: 2px;
 }

 @media (hover: hover) and (pointer: fine) {
     .nav-link:hover {
         color: white;
         transform: translateY(-2px);
         text-shadow: 0 0 12px rgba(240, 221, 52, 0.5);
     }

     .nav-link:hover::after {
         width: 100%;
     }
 }

 nav {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 50;

     background: rgba(9, 9, 11, 0.4);
     backdrop-filter: blur(16px);
     transition: opacity 0.5s ease, visibility 0.5s ease;
 }

 nav.nav-hidden {
     opacity: 0;
     visibility: hidden;
     pointer-events: none;
 }

 /* =========================
   PRELOADER BASE
========================= */

 #preloader {
     position: fixed;
     inset: 0;
     z-index: 99999;

     background: #01010f;

     overflow: hidden;

     display: flex;
     align-items: center;
     justify-content: center;

     transition:
         opacity 1.5s ease,
         visibility 1.5s ease;
 }

 #preloader.hide {
     opacity: 0;
     visibility: hidden;
     pointer-events: none;
 }

 /* =========================
   CENTER CONTENT
========================= */

 .preloader-content {
     position: relative;
     z-index: 10;

     height: 100%;
     width: 100%;

     display: flex;
     flex-direction: column;

     align-items: center;
     justify-content: center;

     text-align: center;
 }

 /* =========================
   TITLE
========================= */

 .preloader-title {
     font-size: clamp(70px, 12vw, 110px);
     line-height: .85;
     letter-spacing: -3px;
     margin: 0;
 }

 /* optional fallback spans */
 .preloader-line {
     display: inline-block;
 }

 /* COLORS */
 .preloader-line.pink {
     color: #cb2a62;
     text-shadow: 0 0 10px #f0dd34, 0 0 25px #f0dd34;
 }

 .preloader-line.white {
     color: #ffffff;
     text-shadow:
         0 0 6px #26225D,
         0 0 14px #26225D,
         0 0 28px #26225D,
         0 0 45px #26225D;
 }

 .preloader-line.yellow {
     color: #f0dd34;
     text-shadow: 0 0 10px #cb2a62, 0 0 25px #cb2a62;
 }

 .preloader-content {
     position: relative;
     z-index: 10;

     height: 100%;
     width: 100%;

     display: flex;
     flex-direction: column;

     align-items: center;
     justify-content: center;

     text-align: center;
 }

 /* =========================
   LOADING BAR
========================= */

 .loading-bar {
     width: 260px;
     height: 10px;

     margin-top: 40px;

     border-radius: 999px;
     background: rgba(255, 255, 255, 0.08);

     overflow: hidden;

     position: relative;
 }

 .loading-fill {
     height: 100%;
     width: 0%;

     border-radius: 999px;

     background: linear-gradient(90deg,
             #cb2a62,
             #f0dd34,
             #ffffff,
             #cb2a62);

     box-shadow:
         0 0 15px #cb2a62,
         0 0 30px #f0dd34;

     animation: loadBar 3s ease forwards;
 }

 /* shine effect */
 .loading-fill::after {
     content: '';
     position: absolute;
     inset: 0;

     background: linear-gradient(90deg,
             transparent,
             rgba(255, 255, 255, 0.4),
             transparent);

     animation: shine 1s linear infinite;
 }

 /* =========================
   EMOJIS BACKGROUND
========================= */

 .floating-emojis {
     position: absolute;
     inset: 0;

     overflow: hidden;
     pointer-events: none;

     z-index: 1;
 }

 .floating-emojis span {
     position: absolute;

     font-size: clamp(2rem, 4vw, 4rem);

     opacity: 1;

     filter:
         drop-shadow(0 0 10px #f0dd34) drop-shadow(0 0 20px #cb2a62);

     animation: floatEmoji linear infinite;
 }

 /* positions */
 .floating-emojis span:nth-child(1) {
     left: 5%;
     animation-duration: 12s;
 }

 .floating-emojis span:nth-child(2) {
     left: 15%;
     animation-duration: 15s;
     animation-delay: -4s;
 }

 .floating-emojis span:nth-child(3) {
     left: 25%;
     animation-duration: 10s;
     animation-delay: -2s;
 }

 .floating-emojis span:nth-child(4) {
     left: 35%;
     animation-duration: 13s;
     animation-delay: -6s;
 }

 .floating-emojis span:nth-child(5) {
     left: 45%;
     animation-duration: 11s;
 }

 .floating-emojis span:nth-child(6) {
     left: 55%;
     animation-duration: 14s;
     animation-delay: -5s;
 }

 .floating-emojis span:nth-child(7) {
     left: 65%;
     animation-duration: 12s;
 }

 .floating-emojis span:nth-child(8) {
     left: 75%;
     animation-duration: 16s;
     animation-delay: -8s;
 }

 .floating-emojis span:nth-child(9) {
     left: 85%;
     animation-duration: 11s;
 }

 .floating-emojis span:nth-child(10) {
     left: 95%;
     animation-duration: 15s;
     animation-delay: -3s;
 }

 .floating-emojis span:nth-child(11) {
     left: 60%;
     animation-duration: 9s;
 }

 .floating-emojis span:nth-child(12) {
     left: 20%;
     animation-duration: 17s;
 }

 /* animation */
 @keyframes floatEmoji {
     from {
         transform: translateY(110vh) rotate(0deg);
     }

     to {
         transform: translateY(-120vh) rotate(360deg);
     }
 }

 /* =========================
   KEYFRAMES LOADER
========================= */

 @keyframes loadBar {
     from {
         width: 0%;
     }

     to {
         width: 100%;
     }
 }

 @keyframes shine {
     from {
         transform: translateX(-100%);
     }

     to {
         transform: translateX(100%);
     }
 }

 .preloader-logo {
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .preloader-logo img {
     width: clamp(180px, 18vw, 220px);
     height: auto;

     opacity: 0;

     transform: scale(0.8);

     animation: logoIn 0.8s ease forwards;
 }

 /* smooth reveal */
 @keyframes logoIn {
     to {
         opacity: 1;
         transform: scale(1);
     }
 }

 /* =========================
   PAGE REVEAL CONTROL
========================= */

 /* Block scroll während Preloader */
 body.loading {
     overflow: hidden;
 }

 /* HERO hidden am Anfang */
 .hero-bg {
     opacity: 0;
     transform: scale(1.02);
     transition: opacity 1s ease, transform 1s ease;
 }

 /* HERO sichtbar */
 .hero-bg.show {
     opacity: 1;
     transform: scale(1);
 }

 /* LOGO smooth fade */
 .logo-img {
     opacity: 0;
     transition: opacity 0.8s ease;
 }

 .logo-img.loaded {
     opacity: 1;
 }

.gallery-hidden {
    opacity: 0;
    transform: translateY(30px);
    pointer-events: none;
    max-height: 0;
    overflow: hidden;
    transition: 
        opacity 0.5s ease,
        transform 0.5s ease,
        max-height 0.6s ease;
}

.gallery-hidden.gallery-show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    max-height: 1000px;
}






/* =========================================================
   VARIABLES
========================================================= */

.lr-menu {

  --lr-purple: #241044;
  --lr-pink: #ed1b5b;
  --lr-yellow: #ffe500;

  --lr-background: #fffdf9;
  --lr-light: #f5f3f5;
  --lr-grey: #77727a;
  --lr-border: #dedbe0;

  width: 100%;
  padding: 90px 20px;

  background: var(--lr-background);
  color: var(--lr-purple);

  font-family:
    Arial,
    Helvetica,
    sans-serif;

}

.lr-menu *,
.lr-menu *::before,
.lr-menu *::after {
  box-sizing: border-box;
}


/* =========================================================
   CONTAINER
========================================================= */

.lr-menu-inner {

  width: min(900px, 100%);
  margin: 0 auto;

}


/* =========================================================
   HEADER
========================================================= */

.lr-header {

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;

  gap: 30px;

  padding-bottom: 45px;

  border-bottom: 2px solid var(--lr-purple);

}

.lr-brand {

  align-self: start;

  font-size: 18px;
  font-weight: 1000;

  letter-spacing: -1px;

}

.lr-brand span {
  color: var(--lr-pink);
}

.lr-brand div {

  width: 45px;
  height: 5px;

  margin-top: 8px;

  border-radius: 10px;

  background: var(--lr-yellow);

}

.lr-header-main {
  text-align: center;
}

.lr-eyebrow {

  display: block;

  margin-bottom: 12px;

  font-size: 9px;
  font-weight: 900;

  letter-spacing: 2px;

  color: var(--lr-grey);

}

.lr-header h2 {

  margin: 0;

  font-size: clamp(58px, 8vw, 90px);

  line-height: .8;

  letter-spacing: -5px;

  font-weight: 1000;

}

.lr-header-side {

  display: flex;

  justify-content: flex-end;
  align-items: center;

  gap: 10px;

}

.lr-header-side span {

  display: grid;

  place-items: center;

  width: 36px;
  height: 36px;

  border-radius: 50%;

  background: var(--lr-yellow);

  font-size: 10px;

  font-weight: 1000;

}

.lr-header-side p {

  margin: 0;

  font-size: 11px;

  line-height: 1.3;

  font-weight: 700;

}


/* =========================================================
   MENU BLOCK
========================================================= */

.lr-menu-block {

  padding: 55px 0;

  border-bottom: 1px solid var(--lr-border);

}

.lr-title-row {

  display: grid;

  grid-template-columns: 42px 1fr;

  gap: 12px;

  align-items: start;

  margin-bottom: 28px;

}

.lr-number {

  display: grid;

  place-items: center;

  width: 32px;
  height: 32px;

  border-radius: 50%;

  background: var(--lr-purple);

  color: white;

  font-size: 10px;

  font-weight: 900;

}

.lr-mini-title {

  display: block;

  margin-bottom: 4px;

  color: var(--lr-pink);

  font-size: 9px;

  font-weight: 900;

  letter-spacing: 2px;

}

.lr-title-row h3 {

  margin: 0;

  font-size: clamp(38px, 5vw, 55px);

  line-height: .9;

  letter-spacing: -3px;

  font-weight: 1000;

}


/* =========================================================
   LIST
========================================================= */

.lr-items {

  border-top: 1px solid var(--lr-border);

}

.lr-item {

  display: grid;

  grid-template-columns: minmax(0, 1fr) auto;

  align-items: center;

  gap: 25px;

  padding: 21px 5px;

  border-bottom: 1px solid var(--lr-border);

  transition:
    padding .2s ease,
    background .2s ease;

}

.lr-item:hover {

  padding-left: 12px;
  padding-right: 12px;

  background: rgba(36,16,68,.025);

}

.lr-item-info {

  min-width: 0;

}

.lr-item h4 {

  margin: 0;

  font-size: 18px;

  line-height: 1.2;

  font-weight: 900;

}

.lr-item p {

  max-width: 580px;

  margin: 6px 0 0;

  color: var(--lr-grey);

  font-size: 13px;

  line-height: 1.5;

}

.lr-price {

  min-width: 65px;

  text-align: right;

  color: var(--lr-purple);

  font-size: 17px;

  font-weight: 1000;

  white-space: nowrap;

}


/* =========================================================
   HIGHLIGHTS
========================================================= */

.lr-highlight {

  position: relative;

}

.lr-highlight::before {

  content: "";

  width: 4px;
  height: 42px;

  position: absolute;

  left: -1px;
  top: 50%;

  transform: translateY(-50%);

  border-radius: 10px;

  background: var(--lr-yellow);

}

.lr-highlight .lr-item-info {

  padding-left: 15px;

}

.lr-name {

  display: flex;

  align-items: center;

  gap: 9px;

  flex-wrap: wrap;

}

.lr-best {

  display: inline-block;

  padding: 4px 8px;

  border-radius: 30px;

  background: var(--lr-pink);

  color: white;

  font-size: 7px;

  font-weight: 900;

  letter-spacing: 1px;

}

.lr-star {

  color: var(--lr-pink);

  font-size: 17px;

}


/* =========================================================
   FAMILY PACK
========================================================= */

.lr-subtitle {

  margin-top: 35px;
  margin-bottom: 0;

}

.lr-subtitle span {

  display: inline-block;

  padding: 7px 13px;

  border-radius: 50px;

  background: var(--lr-yellow);

  color: var(--lr-purple);

  font-size: 10px;

  font-weight: 1000;

  text-transform: uppercase;

}

.lr-family-items {

  margin-top: 10px;

}


/* =========================================================
   ADDONS
========================================================= */

.lr-addons {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-top: 15px;

}

.lr-addons div {

  display: flex;

  align-items: center;

  gap: 15px;

  padding: 10px 14px;

  border-radius: 8px;

  background: var(--lr-light);

  font-size: 11px;

}

.lr-addons strong {

  color: var(--lr-purple);

  font-size: 11px;

}


/* =========================================================
   INFO BOX
========================================================= */

.lr-info-box {

  display: flex;

  align-items: center;

  gap: 13px;

  margin-top: 18px;

  padding: 14px 16px;

  border-left: 3px solid var(--lr-yellow);

  background: var(--lr-light);

}

.lr-info-box > span {

  color: var(--lr-pink);

  font-size: 18px;

}

.lr-info-box strong {

  display: block;

  font-size: 11px;

}

.lr-info-box p {

  margin: 4px 0 0;

  color: var(--lr-grey);

  font-size: 11px;

}


/* =========================================================
   SLASHES
========================================================= */

.lr-slashes {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  border-top: 1px solid var(--lr-border);

}

.lr-slash-item {

  display: grid;

  grid-template-columns: auto 1fr auto;

  align-items: center;

  gap: 12px;

  min-height: 100px;

  padding: 18px 10px;

  border-bottom: 1px solid var(--lr-border);

}

.lr-slash-item + .lr-slash-item {

  border-left: 1px solid var(--lr-border);

}

.lr-colour-dot {

  width: 12px;
  height: 12px;

  border-radius: 50%;

}

.lr-red {
  background: var(--lr-pink);
}

.lr-blue {
  background: #347fcf;
}

.lr-orange {
  background: #ffae1b;
}

.lr-slash-item h4 {

  margin: 0;

  font-size: 14px;

  font-weight: 900;

}

.lr-slash-item p {

  margin: 4px 0 0;

  color: var(--lr-grey);

  font-size: 10px;

}

.lr-slash-item strong {

  color: var(--lr-purple);

  font-size: 14px;

  white-space: nowrap;

}


/* =========================================================
   FOOTER
========================================================= */

.lr-footer {

  display: flex;

  align-items: center;

  gap: 15px;

  padding-top: 35px;

}

.lr-footer-brand {

  color: var(--lr-pink);

  font-size: 17px;

  font-weight: 1000;

}

.lr-footer-line {

  flex: 1;

  height: 2px;

  background: var(--lr-yellow);

}

.lr-footer > span {

  font-size: 8px;

  font-weight: 900;

  letter-spacing: 1.5px;

  color: var(--lr-grey);

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 700px) {

  .lr-menu {

    padding: 60px 18px;

  }

  .lr-header {

    grid-template-columns: 1fr;

    text-align: center;

    gap: 20px;

    padding-bottom: 35px;

  }

  .lr-brand {

    text-align: left;

  }

  .lr-header-main {

    order: 2;

  }

  .lr-header-side {

    display: none;

  }

  .lr-header h2 {

    font-size: 60px;

    letter-spacing: -4px;

  }

  .lr-menu-block {

    padding: 42px 0;

  }

  .lr-title-row h3 {

    font-size: 40px;

  }

  .lr-item {

    gap: 15px;

    padding: 19px 3px;

  }

  .lr-item h4 {

    font-size: 16px;

  }

  .lr-item p {

    font-size: 12px;

  }

  .lr-price {

    font-size: 15px;

  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 480px) {

  .lr-menu {

    padding: 45px 15px;

  }

  .lr-header h2 {

    font-size: 52px;

  }

  .lr-eyebrow {

    font-size: 8px;

  }

  .lr-menu-block {

    padding: 35px 0;

  }

  .lr-title-row {

    grid-template-columns: 34px 1fr;

    gap: 9px;

    margin-bottom: 23px;

  }

  .lr-number {

    width: 28px;
    height: 28px;

    font-size: 9px;

  }

  .lr-title-row h3 {

    font-size: 34px;

    letter-spacing: -2px;

  }

  .lr-mini-title {

    font-size: 8px;

  }

  .lr-item {

    grid-template-columns: minmax(0, 1fr) auto;

    align-items: start;

    gap: 12px;

    padding: 17px 2px;

  }

  .lr-item h4 {

    font-size: 15px;

  }

  .lr-item p {

    margin-top: 5px;

    font-size: 11px;

    line-height: 1.45;

  }

  .lr-price {

    min-width: 55px;

    padding-top: 1px;

    font-size: 14px;

  }

  .lr-highlight::before {

    height: 35px;

  }

  .lr-highlight .lr-item-info {

    padding-left: 12px;

  }

  .lr-best {

    font-size: 6px;

    padding: 4px 6px;

  }

  .lr-addons {

    flex-direction: column;

  }

  .lr-addons div {

    justify-content: space-between;

  }

  .lr-slashes {

    grid-template-columns: 1fr;

  }

  .lr-slash-item {

    grid-template-columns: auto 1fr auto;

    min-height: 70px;

    padding: 14px 5px;

  }

  .lr-slash-item + .lr-slash-item {

    border-left: none;

  }

  .lr-footer {

    flex-wrap: wrap;

  }

  .lr-footer-line {

    display: none;

  }

  .lr-footer > span {

    width: 100%;

  }

}