/* Style for the booking banner */
.booking-banner {
    position: relative;
    width: 100%;
    height: 400px; /* Set the height of the banner */
    overflow: hidden;
    margin-bottom: 20px; /* Add some space between the banner and the content */
}

.booking-banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the entire area without distortion */
    display: block;
}

.contact-banner {
    position: relative;
    width: 100%;
    height: 600px; /* Set the height of the banner */
    overflow: hidden;
}

.contact-banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the entire area without distortion */
    display: block;
}

.contact-banner-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center the text horizontally and vertically */
    color: var(--primary-color);
    text-align: center;
    padding: 20px;
}

.contact-banner-text h1 {
    font-size: var(--font-size-title);
    font-weight: var(--font-weight-thin);
    margin: 0;
    line-height: 1.2;
}

.banner-text {
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center the text horizontally and vertically */
    color: var(--primary-color);
    text-align: center;
    padding: 20px;
}
.banner-text h1 {
    font-size: var(--font-size-title);
    font-weight: var(--font-weight-thin);
    margin: 0;
    line-height: 1.2;
}



.booking-banner {
  position: relative;
}

.booking-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45); /* dunkles Overlay */
}

.banner-text h1 {
  color: #fff;                 /* heller Text */
  font-weight: 500;
  text-shadow: 0 2px 6px rgba(0,0,0,0.7); /* weiche Kontur */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 1; /* über dem Overlay */
}