* { box-sizing: border-box; }

html, body 
{ 
  background-color: #000000;
  margin: 0;
  padding: 0; 
  scroll-behavior: smooth;
}
h1 { margin: 0; padding: 0; color: #ffffff; font-family: sans-serif; }
p,h3,h2,label { font-family: sans-serif; color: #ffffff;}

.main p { max-width: 900px; padding: 0 1em;}
.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #000000;
  background: -webkit-linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(158, 109, 41, 1) 62%, rgba(0, 0, 0, 1) 100%);
  background: -moz-linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(158, 109, 41, 1) 62%, rgba(0, 0, 0, 1) 100%);
  background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(158, 109, 41, 1) 62%, rgba(0, 0, 0, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000", endColorstr="#000000", GradientType=0);
}

/* Hero */
.hero p { max-width: 700px; color: #ffffff; font-size: 0.9rem; padding: 0; margin: 0;}

.hero 
{
  height: 80vh;
  padding: 0;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%), url("img/hero.jpeg");
  background-position: center, center;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
  display: flex;
  justify-content: center;
}

#hero-container 
{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1em;
  padding: 0 3vw;
  width: 100%;
  max-width: 1600px;
  height: 100%;
}

.small-hero-box-container 
{
  display: flex; 
  align-items: center; 
  gap: 0.5em;
}

.small-hero-box 
{
  display: flex; 
  align-items: center; 
  gap: 0.5em; 
  background: rgba(255, 255, 255, 0.1); 
  border-radius: 10px;
  padding: 0.4em;
}

/* BOOKING */

#booking-overlay 
{
  background-color: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(5px);
}

#booking-container
{
  background: rgba(31, 31, 31, 0.95);
  border-radius: 20px;
  padding: 2em;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: auto;
  scrollbar-color: rgb(77, 77, 77) transparent;
}

#booking-container::-webkit-scrollbar 
{
  width: 8px;
}

#booking-container::-webkit-scrollbar-track 
{
  background: transparent;
}

#booking-container::-webkit-scrollbar-thumb 
{
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 4px;
}

#booking-container::-webkit-scrollbar-thumb:hover 
{
  background-color: rgba(255, 255, 255, 0.7);
}

#booking-closer 
{
  position: absolute;
  top: 1.5em;
  right: 1.5em;
  font-size: 0.9rem;
  transition: opacity 0.3s ease;
}

#booking-closer:hover 
{
  opacity: 0.7;
}

#booking-container h2 
{
  margin: 0 0 1.5em 0;
  font-size: 2rem;
  color: white;
  font-weight: 600;
}

#booking-container form 
{
  display: flex;
  flex-direction: column;
}

.label-input-div
{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1em;
  padding-bottom: 0;
}

.label-input-div label 
{
  display: block;
  margin-bottom: 0.5em;
  font-size: 0.95rem;
  color: white;
  font-weight: 500;
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
select,
textarea
{
  width: 100%;
  padding: 0.8em 1em;
  background-color: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  color: #ffffff;
  font-family: sans-serif;
  font-size: 1rem;
  transition: all 0.3s ease;
  outline: none;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus
{
  background-color: rgba(255, 255, 255, 0.15);
  border-color: white;
  box-shadow: 0 0 0 3px rgba(231, 189, 150, 0.1);
}

input[type="text"]::placeholder,
input[type="email"]::placeholder 
{
  color: rgba(255, 255, 255, 0.5);
}

textarea 
{
  resize: vertical;
  min-height: 100px;
}

textarea::placeholder 
{
  color: rgba(255, 255, 255, 0.5);
}

input.small-input 
{
  width: 100%;
}

/* Select dropdown styling */
select 
{
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1em center;
  padding-right: 2.5em;
}

select option 
{
  background-color: #1f1f1f;
  color: #ffffff;
  padding: 0.5em;
}

/* Date input styling for better visibility */
input[type="date"] 
{
  color-scheme: dark;
}

input[type="date"]::-webkit-calendar-picker-indicator 
{
  filter: brightness(0) invert(1);
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.3s ease;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover 
{
  opacity: 1;
}

/* Number input styling */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button 
{
  opacity: 1;
}

#booking-container .animated-button 
{
  margin-top: 1em;
  align-self: center;
}

/* Responsive adjustments for booking form */
@media (max-width: 768px) 
{
  .label-input-div 
  {
    grid-template-columns: 1fr;
    gap: 0.8em;
  }

  #booking-container 
  {
    padding: 1.5em;
  }

  #booking-container h2 
  {
    font-size: 1.5rem;
  }

  #booking-closer 
  {
    top: 1em;
    right: 1em;
  }
}

/* Gallery */

#gallery 
{
  display: grid;
  gap: 0.8em;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 2em 2em;
  max-width: 1500px;
}

#gallery img 
{
  width: 100%;
  object-fit: contain;
  height: auto;
  border-radius: 12px;
}

@media (max-width: 1200px) 
{
  #gallery 
  {
    grid-template-columns: 1fr 1fr;
    gap: 0.7em;
  }
  #gallery img 
  {
    border-radius: 10px;
  }
}

@media (max-width: 800px) 
{
  #gallery 
  {
    grid-template-columns: 1fr;
    gap: 0.5em;
  }
  #gallery img 
  {
    border-radius: 5px;
  }
}

/* Amenities */

.amenities 
{
  width: calc(100% - 4em);
  max-width: calc(1500px - 3em);
  padding: 2em 2em;
  border-radius: 20px;
  background-color: rgba(83, 82, 82, 0.4);
  margin: 2em;
}


.small-amenities-list 
{
  display: none;
  flex-wrap: wrap;
  gap: 10px;
}

.small-amenities-list span 
{
  padding: 5px 10px;
  border-radius: 20px;
  background-color: #ffa76d;
  font-family: sans-serif;
}

.material-symbols-outlined 
{ 
  color: #ffffff;
}

.material-symbols-outlined:hover 
{
  cursor: pointer;
}

/* Map */

#map 
{ 
  width: 100%;
  max-width: 1500px;
  height: 50vh; 
}


/* BOTTOM */

.bottom-box p,h4,li { padding: 0; color: #ffffff; font-family: sans-serif;}
.bottom-box a { color: #ffffff; text-decoration: none; font-family: sans-serif; font-weight: bold; padding: 1em 0;}

.bottom-box a:hover 
{ 
  color: #ffffff; 
  text-decoration: underline; 
  font-family: sans-serif; 
  cursor: pointer;
}

.bottom-box 
{
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 1em;
}

.section-box 
{
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(100% - 4em);
  max-width: calc(1500px - 3em);
  padding: 1em 2em;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.1);
  margin: 2em;
  flex-direction: column;
}


@media (max-width: 430px) 
{
  .bottom-box 
  {
    flex-direction: column;
  }
}

ul 
{
  list-style-type: none;
  padding: 0;
}

.bottom-box li, .bottom-box p 
{
  padding: 0.2em 0;
}

.bottom-box div 
{
  display: flex;
  flex-direction: column;
}

/* Impressum */
#impressum 
{
  line-height: 1.3;
  visibility: hidden;
}

/* Abstracts */
.overlay 
{
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.5s ease-in, visibility 0.5s;
}

.overlay.active 
{
  opacity: 1;
  visibility: visible;
}

.overlay-window 
{
  max-width: 1000px;
  max-height: 90vh;
  padding: 1em;
  margin: 0 1em;
  display: flex;
  flex-direction: column;
}

.overlay-window a
{
  text-decoration: underline;
  font-family: sans-serif;
  color: #ffffff;
}

.overlay-window a:hover 
{
  cursor: pointer;
}

.label-input-div
{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1em;
}

/* Success/Failure Overlays */
#success-container,
#failure-container
{
  background: rgba(31, 31, 31, 0.95);
  border-radius: 20px;
  padding: 2em;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  position: relative;
  text-align: center;
}

.success-content,
.failure-content
{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5em;
}

.success-checkmark,
.failure-cross
{
  width: 80px;
  height: 80px;
  animation: scaleInAnimation 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.success-checkmark
{
  animation: scaleInAnimation 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.failure-cross
{
  animation: scaleInAnimation 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

#success-container h2
{
  color: #4ade80;
  font-size: 1.8rem;
  margin: 0;
}

#failure-container h2
{
  color: #ef4444;
  font-size: 1.8rem;
  margin: 0;
}

.success-content p,
.failure-content p
{
  margin: 0.5em 0;
  font-size: 0.95rem;
  color: #ffffff;
  max-width: 500px;
}

.success-content button,
.failure-content button
{
  margin-top: 0.5em;
}

@keyframes scaleInAnimation
{
  0%
  {
    transform: scale(0);
    opacity: 0;
  }
  50%
  {
    transform: scale(1.1);
  }
  100%
  {
    transform: scale(1);
    opacity: 1;
  }
}

@media (max-width: 768px)
{
  #success-container,
  #failure-container
  {
    padding: 1.5em;
  }

  #success-container h2,
  #failure-container h2
  {
    font-size: 1.5rem;
  }

  .success-checkmark,
  .failure-cross
  {
    width: 60px;
    height: 60px;
  }
}

/* AGB */
#agb-overlay-window
{
  background-color: rgba(0, 0, 0, 0.9);
  border-radius: 20px;
  overflow: hidden;
}

.agb-header 
{
  display: flex;
  justify-content: space-between;
}

.agb-body 
{
  overflow: auto;
  scrollbar-color: rgb(77, 77, 77) transparent;
}

.agb-body::-webkit-scrollbar 
{
  width: 8px;
}

.agb-body::-webkit-scrollbar-track 
{
  background: transparent;
}

.agb-body::-webkit-scrollbar-thumb 
{
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 4px;
}

.agb-body::-webkit-scrollbar-thumb:hover 
{
  background-color: rgba(255, 255, 255, 0.7);
}

.agb-body h2 
{
  font-style: italic;
}

/* From Uiverse.io by gharsh11032000 */ 
.animated-button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 16px 36px;
  border: 4px solid;
  border-color: transparent;
  font-size: 16px;
  background-color: inherit;
  border-radius: 100px;
  font-weight: 600;
  color: #ffffff;
  box-shadow: 0 0 0 2px #ffffff;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  width: fit-content;
}

.animated-button svg {
  position: absolute;
  width: 24px;
  fill: #ffffff;
  z-index: 9;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button .arr-1 {
  right: 16px;
}

.animated-button .arr-2 {
  left: -25%;
}

.animated-button .circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background-color: #ffffff;
  border-radius: 50%;
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button .text {
  position: relative;
  z-index: 1;
  transform: translateX(-12px);
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button:hover {
  box-shadow: 0 0 0 12px transparent;
  color: #212121;
  border-radius: 12px;
}

.animated-button:hover .arr-1 {
  right: -25%;
}

.animated-button:hover .arr-2 {
  left: 16px;
}

.animated-button:hover .text {
  transform: translateX(12px);
}

.animated-button:hover svg {
  fill: #212121;
}

.animated-button:active {
  scale: 0.95;
  box-shadow: 0 0 0 4px #ffffff;
}

.animated-button:hover .circle {
  width: 220px;
  height: 220px;
  opacity: 1;
}
/* End of Uiverse.io code */