/** Shopify CDN: Minification failed

Line 10:0 Unexpected "{"
Line 10:1 Expected identifier but found "%"
Line 469:0 Unexpected "}"
Line 761:0 Unexpected "{"
Line 761:1 Expected identifier but found "%"

**/
{% style %}


/* 2) Haupt-Wrapper immer Viewport-Höhe + kein Scroll */
.password-main,
.custom-password-page {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 3) Dein Overlay-Content füllt nun 100% der Höhe und verteilt Logo/Footer */
.overlay-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}


.password-main {
  display: flex;
  flex-direction: column; /* Ordnet Header und Inhalte vertikal */
}

.custom-password-page {
  display: flex; /* Flexbox aktivieren */
  flex-direction: column; /* Inhalte vertikal anordnen */
  flex-grow: 1; /* Verbleibenden Platz ausfüllen */
    background-color: #fafafa !important;
  height: 100%;

}

.background-video .mobile-video {
  display: none !important;
  background-color: #f8f8f8 !important;
}


    .nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: 'sweet-sans-pro', sans-serif;
  text-transform: uppercase;
  font-size: 1rem;
}

.nav-links li a {
  text-decoration: none;
  color: #333;
}

.password-header {
  text-align: center;
  background: linear-gradient(90deg, #75c5ff 0%, #4792c9 100%);
  width: 100%;
  color: white;
  font-family: 'Georgia', serif;
  font-size: 2.5rem;
  font-weight: bold;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.frame-235, .password-header {
    max-height: calc(100vh - 28px); /* X ist die Höhe anderer Elemente */
}


.frame-211 {
  background: transparent;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
      width: 300px;
}

.your-password {
  color: #ffffff;
  text-align: center;
  font-family: "SweetSansPro-Regular", sans-serif;
  font-size: 10px;
  letter-spacing: 0.05em;
  font-weight: 400;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.password-input {
  width: 100%; /* Volle Breite des Containers */
  max-width: 300px; /* Optional: maximale Breite */
  padding: 1rem; /* Innenabstand */
  font-size: 1rem; /* Schriftgröße */
  outline: none; /* Entfernt den Standardrahmen beim Fokus */
  background: transparent;
  color: rgb(51, 51, 51,0.75);
  font-weight: 200;
  text-transform: uppercase;
  font-family: sans-serif;
  text-align: center;
  letter-spacing: 0.05em;
  border: 0px;
  font-family: proxima-nova;
}

@media screen and (max-width: 768px) {
.password-input {
  font-size: 16px !important;
}
}

.password-input::placeholder {
  color: rgb(51, 51, 51); /* Deine gewünschte Farbe */
  opacity: 1; /* Stelle sicher, dass die Deckkraft vollständig ist */
  font-family: sweet-sans-pro, sans-serif;
  font-size: 1rem;

}

.password-input:focus::placeholder {
  color: transparent; /* Placeholder wird unsichtbar */
  opacity: 0; /* Sicherstellen, dass er nicht sichtbar ist */
}

.input-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 300px;
}

.arrow-button {
  background-color: transparent;
  border: none;
  color: rgb(51, 51, 51);
  padding: 0px 0px 3px 0px;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arrow-button:hover {
  background-color: transparent;
}

.line-6 {
  margin-top: -0.5px;
  
  align-self: stretch;
  flex-shrink: 0;
  height: 1px;
  position: relative;
  border-bottom: 0.5px solid rgba(51, 51, 51, 0.25);
}

.frame-229 {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.frame-207 {
background: #31302a;
    display: flex;
    flex-direction: column;
    gap: 0px;
    align-items: flex-start;
    justify-content: flex-start;
    flex: 1;
    width: 100%;
    height: 100%;
    position: relative;
    box-shadow: inset 4px 4px 0px 0px rgba(0, 0, 0, 0.25);
}

.frame-2043 {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: flex-start;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  height: auto;
  position: relative;
  overflow: hidden;
}

.container111 {
  width: 32px; /* Breite des Containers */
  height: 100%; /* Füllt die gesamte Höhe */
  display: flex;
  justify-content: center; /* Zentriert die Linie horizontal */
  align-items: center; /* Zentriert die Linie vertikal */
  background-color: #31302A; /* Hintergrundfarbe des Containers */
  position: relative;
}


.frame-231 {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex: 1;
  position: relative;
}
.rectangle-48 {
  background: transparent;
  align-self: stretch;
  flex: 1;
  position: relative;
  backdrop-filter: blur(2px);
}

.frame-16 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  width: 100%;
}
#new-here {
  color: white;
  text-align: center;
  font-family: "SweetSansPro-Regular", sans-serif;
  font-size: 1rem;
  letter-spacing: 0.05em;
  font-weight: 400;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem;
}



.frame-194 {
  background: #bdbdbd;
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  max-width: 230px;
  position: relative;
}
.frame-1942 {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.frame-193 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 230px;
  position: relative;
}
.rectangle-35 {
  background: radial-gradient(
    closest-side,
    rgba(232, 232, 232, 1) 0%,
    rgba(195, 194, 194, 1) 46.00000083446503%,
    rgba(139, 139, 139, 1) 100%
  );
  align-self: stretch;
  flex-shrink: 0;
  height: 3px;
  position: relative;
}
.frame-191 {
  padding: 0px 6px 0px 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 230px;
  position: relative;
}
.rectangle-34 {
  background: linear-gradient(
    180deg,
    rgba(96, 96, 96, 1) 0%,
    rgba(141, 141, 141, 1) 40.00000059604645%,
    rgba(193, 193, 193, 1) 100%
  );
  align-self: stretch;
  flex-shrink: 0;
  height: 19px;
  position: relative;
}
.frame-1932 {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.frame-1912 {
  padding: 0px 3px 0px 3px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 230px;
  position: relative;
}
.frame-1913 {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.frame-1952 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 230px;
  position: relative;
}
.frame-1914 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 230px;
  position: relative;
}
.frame-1953 {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.frame-1915 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.rectangle-342 {
  background: linear-gradient(
    180deg,
    rgba(96, 96, 96, 1) 0%,
    rgba(141, 141, 141, 1) 40.00000059604645%,
    rgba(193, 193, 193, 1) 100%
  );
  flex-shrink: 0;
  width: 230px;
  height: 19px;
  position: relative;
}
.frame-221 {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.frame-2192 {
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.frame-1962 {
  background: #f8f8f8;
  padding: 18px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

.klaviyo-form-VajzSg form {
  display: flex;
  align-items: center;
  border: 0.5px solid rgb(51, 51, 51, 0.25) !important;
  padding-bottom: 4px;
  z-index: 5;

}

.klaviyo-form-VajzSg input:focus,
.klaviyo-form-VajzSg input:focus-visible,
.klaviyo-form-VajzSg input:focus-within {
  outline: none !important;
  box-shadow: none !important;
}

.klaviyo-form-VajzSg div:focus-within {
  outline: none !important;
  box-shadow: none !important;

}

}




.klaviyo-form-VajzSg input[type="email"]:hover,
.klaviyo-form-VajzSg input[type="email"]:focus {
  outline: none !important;
  box-shadow: none !important;
  border-bottom: 0.5px solid rgb(51, 51, 51, 0.25) !important;

}

/* ————————————————————————————————
   Klaviyo E-Mail-Input: Breite & Abstand
   ———————————————————————————————— */

.klaviyo-form-VajzSg input[type="email"]{
  border-bottom: 0.5px solid rgb(51, 51, 51, 0.25) !important;
}



.klaviyo-form-VajzSg input {
  flex:           1 1 auto !important;  /* wächst ins Leere */
  padding:        6px 8px !important;  /* innen mehr Platz für Text */
   outline: none !important;
  box-shadow: none !important;
      outline-width: 0px !important;


}

@media screen and (max-width: 768px) {
  .klaviyo-form-VajzSg input {
    font-size: 16px !important;
  }
}







.go405530110.go405530110.go405530110:focus-within {
    outline-width: 0px !important;
    outline-style: auto;
    outline-color: rgba(0, 0, 0, 0);
    outline-offset: 0;
}


/* backdrop filter für video */

.frame-234 {
  position: relative !important;
}
.frame-234::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;                            /* top:0;right:0;bottom:0;left:0 */
  background: rgba(255,255,255,0.01) !important;    /* 30 % Weiß */
  -webkit-backdrop-filter: blur(100px) !important;   /* iOS/Safari/Chrome */
  backdrop-filter: blur(100px) !important;           /* Standard */
  z-index: 0 !important;                           /* unter dem Content */
}
.overlay-content {
  position: relative !important;
  z-index: 1 !important;
  
}




/* Logo-Größe reduzieren */
.input-logo-link img {
    max-height: 40px;
  width: auto !important;
}


/* Footer über Video: transparent & im Vordergrund */
.password-footer {
  position: relative;       /* um z-index zu nutzen */
  z-index: 1;               /* über dem Video-Overlay */
  background: transparent;  /* kein Weiß */
  padding: 12px 0;
  text-align: center;
}

/* Links mit Punkten dazwischen */
.password-footer__menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.password-footer__item {
  display: inline-block;
  margin: 0 8px;
  text-transform: uppercase;
  font-size: 0.875rem;
}
.password-footer__item:not(:last-child)::after {
  content: "•";
  display: inline-block;
  margin-left: 8px;
  color: white;
}
.password-footer__link {
  color: white;
  text-decoration: none;
  opacity: 0.8;
}
.password-footer__link:hover {
  opacity: 1;
}

/* ———————————————————————————————
   Fullscreen About-Overlay
   ——————————————————————————————— */
.page-overlay {
  position: fixed;
  inset: 0;                     /* top:0;right:0;bottom:0;left:0 */
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(16px);
  display: none;                /* versteckt nach dem Laden */
  align-items: center;
  justify-content: center;
  padding: 4rem;
  color: black;
  z-index: 5;

}

.page-overlay.open {
  display: flex !important;     /* wird sichtbar, wenn .open gesetzt wird */

}

.overlay-inner {
  max-width: 400px;
  width: 100%;
  line-height: 1.6;
  text-align: left;
  letter-spacing: 0.02rem;
}

/* About-Modal: Heading mit eigener Schrift */
.page-overlay h2 {
  font-family: 'sweet-sans-pro', !important;
  font-weight: 700;           /* optional: Gewicht anpassen */
  font-size: 24px;             /* oder deine Wunsch-Größe */
  margin: 0 rem;            /* etwas Abstand unter der Überschrift */
  color: rgb(51, 51, 51);

}

.page-overlay p {
  font-family: 'proxima-nova', sans-serif;
  font-weight: 300;
  color: rgba(51, 51, 51, 0.75);
  font-size: 12px;
  letter-spacing: 0.02rem ;

}


.overlay-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  color: black;
  font-size: 1rem;
  cursor: pointer;
  font-family: 'sweet-sans-pro';
  color: rgb(51, 51, 51);

}

body.modal-open {
  overflow: hidden !important;

}

@media screen and (max-width: 989px) {
    .page-width--narrow {
        padding-left: 0rem !important;
        padding-right: 0rem !important;
    }
}


/* Einzeiler unter dem Logo */
.logo-subtext {

      margin-top: 1rem;
    font-size: 1rem;
    font-weight: 200;
    color: rgb(51, 51, 51, 0.75);
    text-align: center;
    font-family: proxima-nova;
    letter-spacing: 0.02rem;
}





/* Overlay-Header: Button neben Überschrift – gilt für alle Modals */
.overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.overlay-header .overlay-close {
  position: static !important;
  margin: 0;
  font-size: 0.875rem;
}

/* wenn du deinem Button-Wrapper die Klasse „password-trigger-wrapper“ gibst */
.frame-211.password-trigger-wrapper {
  width: 100% !important;       /* belegt die volle Breite */
  justify-content: center !important;  /* zentriert den Inhalt */
  z-index: 0;
}

/* styling für den reinen Text-Button */
.password-trigger {
  background: transparent;
  border: none;
  font-family: 'sweet-sans-pro';
  color: rgb(51, 51, 51);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  /* opt. padding */
  padding: 0.5em 0em;
  border-bottom: 0.5px solid rgba(51, 51, 51, 0.25);
}


#downshift-0-menu {
  position: absolute !important;
  background-color: rgb(245, 245, 245) !important;
  bottom: 100% !important; /* statt top: 100% */
  top: auto !important;
  margin-bottom: 0.5px;
  z-index: 9999;
}


/* — Passwort-Modal: Form auf 300px begrenzen, Input+Button richtig ausrichten — */
#overlay-password .overlay-inner form {
  width: 300px;        /* genau dieselbe Breite wie dein Input-Wrapper */
  margin: 0 auto;      /* zentriert das gesamte Formular */
  display: flex;
  flex-direction: column;
  align-items: center; /* horizontale Zentrierung aller Kinder */
}

#overlay-password .input-wrapper {
  display: flex;
  width: 100%;
  justify-content: space-between; /* Input links, Button rechts */
  align-items: center;
}

#overlay-password .password-input {
  flex: 1;              /* nimmt den verfügbaren Platz ein */
  width: auto;          /* überschreibt das width:100% */
  text-align: center;   /* placeholder & Texte mittig */
  font-size: 1rem;
}

#overlay-password .arrow-button {
  margin-left: 8px;     /* etwas Abstand zum Input */
}

#overlay-password .line-6 {
  width: 100%;          /* zieht sich über die 300px-Form */
  margin: 0 auto;       /* bleibt zentriert unter dem Formular */
}



{% endstyle %}