*, *:before, *:after {
    box-sizing: inherit;
  }
  
html {
    font-family: "Montserrat", sans-serif;
    display: grid;
    background-color: white;
    box-sizing: border-box;
    margin: 0em;
    scroll-behavior: smooth;
    padding: 0em;
    width: 100vw;
    overflow-x: hidden;
}

body {
    position: relative;
    display: grid;
    height: 100%;
    margin: 0em;
    padding: 0em;
    width: 100vw;
    overflow-x: hidden !important;
}

header {
    display: flex;
    z-index: 2;
    justify-content: center;
    align-self: flex-start;
    background: linear-gradient(to bottom,#123150 -45%, #FFFFFF00 95%);
}

header nav {
    padding-top: 0.5em;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    text-align: center;
    width: 70%;
}

header nav a {
    color: white !important;
    text-decoration: none;
}

header nav a:hover {
    text-decoration: underline;
}

header img {
    width: 5em;
}

#img-home-top-container {
    width: 100%;
    height: 90vh;
    position: absolute;
    overflow: hidden;
    z-index: -1;
    display: grid;
    align-content: center;
    justify-items: center;
    align-items: center;
}

#img-home-top {
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    animation: zoomInOut 60s infinite alternate;
}

@keyframes zoomInOut {
    0% {
        transform: scale(1); 
    }
    
    50% {
        transform: scale(1.25); 
    }
    
    100% {
        transform: scale(1.0);
    }
}

#div-home-top {
    position: relative;
    width: 100%;
    height: 90vh;
    position: absolute;
    display: grid;
    justify-content: center;
    justify-items: center;
    align-content: center;
    color: white;
}

#img-home-logo {
    width: 10em;
    height: 10em;
    margin-bottom: -0.5em;
}

#div-home-top h2 {
    margin: 0;
    padding: 0;
    color: white !important;
    font-size: 3em;
}

#div-home-top h3 {
    margin: 0;
    padding: 0;
    font-weight: 200;
    margin-top: 0.5em;
    color: white;
    text-align: center;
}

button {font-family: "Montserrat", sans-serif;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    background-color: #123150;
    border-radius: 1em;
    color: white;
    height: 2em;
    font-size: 1em;
    width: fit-content;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    border: 0px;
    cursor: pointer;
    transition: all 0.3s;
    gap: 0.5em;
    padding: 0.2em 0.8em 0.2em 0.8em;
    min-width: 6.5em;
}

button:hover {
    background-color: #001E39;
}

.img-button img {
    height: 1em;
}

#home-booking-button {
    position: absolute;
    bottom: 3em;
    right: 3em;
    font-size: 1.3em;
}

#home-apartment-preview-container {
    margin-top: calc(90vh - 1.5em - 6em);
}

#apartment-selecter button.selected {
    cursor: default;
    font-weight: bold !important;
    pointer-events: none;
}

#apartment-selecter button.unselected {
    font-weight: 200 !important;
}


#apartment-selecter button.unselected:hover {
    background-color: #001E39;
}

#apartment-selecter {
    display: flex;
}

#apartment-selecter button {
    height: 3em;
    padding-right: 4em;
    padding-left: 2em;
    border-radius: 0;
    font-size: 1.3em;
}

#apartment-selecter-arkona {
    background-color: #374a6d;
}

#apartment-selecter-dornbusch {
    -webkit-clip-path: polygon(
        0 0,          /* Oben links */
        calc(100% - 2.5em) 0,       /* Oben rechts */
        100% 100%,    /* ACHTUNG: Nur Platzhalter, wird direkt ersetzt */
        100% 100%, /* Unten rechts: 15px nach links */
        100% 100%, /* Rechts unten: 15px nach oben */
        0 100%        /* Unten links */
    );
    clip-path: polygon(
        0 0,                  /* 1. Oben links */
        calc(100% - 2.5em) 0,               /* 2. Oben rechts */
        100% 100%, /* 3. Rechte Kante: Start der Abschrägung (15px vom unteren Rand) */
        100% 100%, /* 4. Untere Kante: Ende der Abschrägung (15px vom rechten Rand) */
        0 100%                /* 5. Unten links */
    );
}

#apartment-selecter-arkona {
    -webkit-clip-path: polygon(
        0 0,          /* Oben links */
        calc(100% - 2.5em) 0,       /* Oben rechts */
        100% 100%,    /* ACHTUNG: Nur Platzhalter, wird direkt ersetzt */
        100% 100%, /* Unten rechts: 15px nach links */
        100% 100%, /* Rechts unten: 15px nach oben */
        0 100%        /* Unten links */
    );
    clip-path: polygon(
        0 0,                  /* 1. Oben links */
        calc(100% - 2.5em) 0,               /* 2. Oben rechts */
        100% 100%, /* 3. Rechte Kante: Start der Abschrägung (15px vom unteren Rand) */
        100% 100%, /* 4. Untere Kante: Ende der Abschrägung (15px vom rechten Rand) */
        2.5em 100%                /* 5. Unten links */
    );
    margin-left: -3em;
    padding-left: 4em !important;
}

.apartment-preview-img-container {
    width: 28em;
    aspect-ratio: 4/3;
    background-color: #001E39;
    position: relative;
    overflow: hidden;
    display: grid;
}

.apartment-preview-img-helper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    align-content: center;
}

.apartment-preview-img-container img {
    width: 100%;
    object-fit: cover;
    background-color: #001E39;
    opacity: 0%;
    transition: all 0.3s;
}

.apartment-preview-img-container img.selected {
    opacity: 100%;
}




.apartment-preview {
    display: none;
}

.apartment-preview.selected {
    display: flex;
    gap: 8em;
    padding: 3em 5em 3em 5em;
}

.apartment-preview-details-price {
    font-weight: bold;
    font-size: 1.5em;
    margin-top: 1.5em;
}

.apartment-preview-details {
    color: #123150;
    align-content: center;
}

.apartment-preview-img-selecter-container {
    display: flex;
    gap: 0.5em;
    position: absolute;
    bottom: 1em;
    width: 100%;
    justify-content: center;
}

.apartment-preview-img-selecter-container div {
    width: 0.8em;
    height: 0.8em;
    background-color: #ffffffaa;
    border-radius: 0.5em;
}

.apartment-preview-img-selecter-container div.selected {
    background-color: #ffffff;
}


#home-features-container-bg {
    width: 120%;
    position: absolute;
    right: -40%;
    top: -5em;
    z-index: -1;
}

#home-features-container {
    position: relative;
    margin-top: 13em;
    padding-left: 20%;
    padding-right: 20%;
    padding-top: 2em;
    color: #123150;
    text-align: center;
    height: fit-content;
    display: grid;
    gap: 6em;
    grid-template-columns: 1fr 1fr 1fr;
}

#home-features-container div img {
    width: 100%;
    max-height: 10em;
}

#home-review-conatiner {
    position: relative;
    height: fit-content;
    margin-top: 5em;
    min-height: 20em;
    padding-left: 4em;
    padding-right: 4em;
}

#home-review-conatiner-bg-left {
    position: absolute;
    z-index: -1;
    left: -2em;
    bottom: -2em;
    height: 75%;
}

#home-review-conatiner-bg-right {
    position: absolute;
    z-index: -1;
    right: -1em;
    top: 3em;
    height: 50%;
}

h2 {
    color: #123150;
    font-weight: bold;
    font-size: 2em;
}

#review-slider-container {
    margin-left: -3em;
    margin-right: -3em;
    display: grid;
    grid-template-columns: 3.5em calc(100% - 7em) 3.5em;
}


#review-slider-container img, #img-slider-container .navigator {
    width: 1.5em;
    margin: 1em;
    filter: drop-shadow(0px 0px 10px gray);
    align-self: center;
    cursor: pointer;
    transition: all 0.3s;
}

#review-slider-container img:hover, #img-slider-container .navigator {
    width: 1.5em;
    margin: 1em;
    filter: drop-shadow(0px 0px 10px black);
    align-self: center;
}

footer {
    margin-top: 12em;
    padding-top: 8vw;
    background-image: url(../img/footer-bg.svg);
    background-size: cover;
    color: white;
    padding-left: 4em;
    padding-right: 4em;
}

footer h5 {
    text-transform: uppercase;
    font-size: 1em;
    color: white;
    margin: 0.5em 0em 0.5em 0em;
}

#footer-content div {
    display: grid;
    height: fit-content;
}

#footer-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    align-content: start;
    justify-content: start;
    font-size: 0.85em;
}

#footer-content div a {
    color: white;
    margin: 0.5em 0em 0em 0em;
    text-decoration: none;
}

#footer-content div p {
    margin: 0.5em 0em 0em 0em;
}

#footer-content div a:hover {
    text-decoration: underline;
}

#footer-content div p a {
    text-decoration: underline;
    color: white;
}

#copyright {
    font-size: 0.7em;
    text-align: center;
    margin-top: 3em;
}



#copyright a {
    color: white;
}

#home-about-us-container {
    margin-top: 9em;
    margin-bottom: 5em;
    padding: 3em 12em 4em 12em;
    background-image: url(../img/big-wave-ultralight.svg);
    background-position: center;
    background-size: cover;
    overflow: visible;
    z-index: 2;
}

#home-about-us-container p {
    text-align: center;
}

#home-about-us-container div {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 4em;
    margin-left: -12em;
}

#home-about-us-container div img{
    width: 100%;
}

#review-slider {
    width: calc(100%);
    overflow-x: scroll;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 4em;
    scroll-behavior: smooth;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    
}

#review-slider::-webkit-scrollbar {
  width: 0px; 
  height: 0px; 
  display: none; 
}

.review-item {
    background-image: url(../img/review-bg.svg);
    background-size: cover;
    background-position: center;
    padding: 10%;
    width: calc((100vw - 9em - 12em) / 4);
    height: auto;
    aspect-ratio: 227/228;
    scroll-snap-align: start;
}

.review-txt {
    margin: 0;
    height: 90%;
}

.review-author {
    margin: 0;
}

.review-platform {
    margin: 0;
    font-size: 0.85em;
    font-style: italic;
}



#dornbusch-top {
    background-image: url(../img/bg-top-dornbusch.svg);
}

#arkona-top {
    background-image: url(../img/bg-top-arkona.svg);
}

.apartment-detailpage-top {
    background-size: cover;
    background-position: bottom;
    position: relative;
    margin-top: -6em;
    min-height: 20em;
    padding-top: 8em;
    padding-left: 4em;
    padding-right: 4em;
    padding-bottom: 10vw;
    color: white !important;
}

.apartment-detailpage-top h2 {
    color: white !important;
    text-transform: uppercase;
    margin: 0em 0em 1em 0em;
}

.apartment-detailpage-top p {
    margin: 0;
    font-weight: lighter;
}

.apartment-images {
    display: grid;
    gap: 2em;
    grid-template-areas: "img1 img1 img1 img1 img1 img1 img1 img1 img1 img1 img1 img2 img2 img2 img2 img2 img3 img3 img3 img3 img3"
        "img1 img1 img1 img1 img1 img1 img1 img1 img1 img1 img1 img2 img2 img2 img2 img2 img3 img3 img3 img3 img3"
        "img1 img1 img1 img1 img1 img1 img1 img1 img1 img1 img1 img4 img4 img5 img5 img6 img6 img7 img7 img8 img8"
        "img1 img1 img1 img1 img1 img1 img1 img1 img1 img1 img1 img9 img9 img10 img10 img11 img11 img12 img12 img13 img13"
        "img1 img1 img1 img1 img1 img1 img1 img1 img1 img1 img1 placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder";
}

.apartment-images div {
    width: 100%;
    display: grid;
    height: fit-content;
    aspect-ratio: 4/3;
    overflow: hidden;
    align-content: center;
    justify-content: center;
}

.apartment-images div img {
    width: 100%;
    cursor: pointer;
}

.apartment-images #placeholder {
    width: 100%;
    height: 100%;
    aspect-ratio: inherit;
}

.apartment-top-wave {
    position: absolute;
    width: 100%;
    bottom: -5vw;
    z-index: -1;
    right: -20%;
}

.apartment-detail-main {
    margin-left: 4em;
    margin-right: 4em;
    margin-top: 4em;
    display: grid;
    gap: 4em;
    grid-template-columns: 5fr 2fr;
}

.apartment-main-equipment {
    margin: 2em 0em 2.5em 0em ;
}

.apartment-main-equipment div {
    display: flex;
    gap: 0.3em;
    align-content: center;
}

.apartment-main-equipment div img {
    width: 2em;
}

h3 {
    color: #123150;
    font-size: 1.5em;
}

h5 {
    color: #123150;
    margin: 0em;
    font-size: 1em;
}

.apartment-detail-main ul {
    list-style-type: none; 
    padding: 0em; 
    margin: 0em 0em 1.2em 0em;
}

.apartment-detail-main li {
    margin: 0em 0em 0em 1em;
    padding-top: 0.1em;
    text-indent: -1em
}

.apartment-detail-main li::before {
    content: "✓ ";
    color: #B2C0CE;
    font-weight: bold;
}

.apartment-detail-equipment-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: -0.5em;
    margin-bottom: 2em;
    gap: 1em;
}

.smalltxt {
    font-size: 0.8em;
    margin: 0;
}

.prices {
    margin-top: 2em;
}

.prices table {
    text-align: center;
}

.prices table tr td {
    padding-bottom: 0.5em;
    padding-left: 0.2em;
    padding-right: 0.2em;
}

.prices table tr .indicator {
    color: #123150;
    font-weight: bold;
    font-size: 0.9em;
    text-align: start;
}

.calender {
    display: grid;
    gap: 0em;
    margin-top: 2em;
    margin-bottom: 1em;
}


.calender .header { 
    display: flex; 
    width: 80%;
    align-self: center;
    justify-self: center;
    justify-content: space-between; 
    align-items: center;
    padding-bottom: 10px;
}

.calender .header button { 
    cursor: pointer; 
    aspect-ratio: 1/1 !important;
    background-color: white !important; 
    min-width: 3em;
}

.calender .header button img {
    height: 1.8em;
}

.calender .header button:hover img {
    filter: drop-shadow(0px 0px 10px black);
}


.calender .header button:disabled { 
    opacity: 0; cursor: default; 
}

.day-names th, #calendar-body td { 
    text-align: center; 
    padding: 5px; 
}
        
.day-names th { 
    font-weight: bold; 
}

h4 {
    color: black;
    font-weight: bold;
    font-size: 1.2em;
    margin: 0em;
}

#location-top {
    display: grid;
    background: linear-gradient(to bottom, #B2C0CE 40%, #B2C0CE00 70%);
    margin-top: -5.5em;
    position: relative;
}

#location-top #map {
    z-index: 0;
    width: 80%;
    justify-self: center;
    align-self: center;
    margin-top: 6em;
}

#location-main {
    z-index: 1;
    margin-top: calc(-1 * (80vw * 0.805 / 1.8));
    margin-left: 4em;
    margin-right: 4em;
    display: grid;
    grid-template-columns: 4fr 1fr;
    gap: 4em;
}

#location-txt {
    width: 70%;
    margin-bottom: 6em;
}

#activity-container {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 2em;
    max-width: 90%;
}

#activity-container img {
    margin-left: -6em;
    width: calc(100% + 6em);
}

#location-address-section {
    color: #123150;
    align-content: center;
    display: grid;
    max-width: 20em;
    justify-self: center;
}

#location-address-section p {
    margin: 0em;
}

#location-address-section #address-dot {
    max-width: 5em;
    margin-bottom: 1em;
    justify-self: center;
}

#location-address-section button {
    margin-top: 1.5em;
}

.map-entry {
    position: absolute;
    color: #123150;
    font-style: italic;
    margin: 0;
}

#map-entry-wiek {
    position: absolute;
    color: #123150;
    font-weight: bold;
    align-items: center;
    gap: 0.2em;
    text-transform: uppercase;
    display: flex;
    top: calc(6em + ((100vw * 0.805) * 0.12));
    left: calc(10vw + (80vw / 2.5));
}

#map-entry-wiek p {
    margin: 0;
    font-size: 1.5em;
}

#map-entry-wiek .dot {
    background-color: #123150;
    border-radius: 1em;
    width: 1.2em;
    height: 1.2em;
}

#map-entry-arkona {
    top: calc(6em + ((100vw * 0.805) * 0.03));
    left: calc(10vw + (80vw * 0.5));
}

#map-entry-hiddensee {
    top: calc(6em + ((100vw * 0.805) * 0.2));
    left: calc(10vw + (80vw * 0.2));
}

#map-entry-sassnitz {
    top: calc(6em + ((100vw * 0.805) * 0.31));
    left: calc(10vw + (80vw * 0.75));
}



#booking-top {
    background-image: url(../img/bg-top-booking.svg);
    background-size: cover;
    background-position: bottom;
    position: relative;
    margin-top: -6em;
    min-height: 20em;
    padding-top: 8em;
    padding-left: 4em;
    padding-right: 4em;
    padding-bottom: 10vw;
    color: #123150 !important;
}

#imp-dat-top {
    background-image: url(../img/bg-top-booking.svg);
    background-size: cover;
    background-position: bottom;
    position: relative;
    margin-top: -6em;
    min-height: 10em;
    padding-top: 8em;
    padding-left: 4em;
    padding-right: 4em;
    padding-bottom: 8vw;
    color: #123150 !important;
}

#imp-dat-main {
    margin: 2em 4em 0em 4em;
}

#booking-main {
    margin: 4em 4em 0em 4em;
}

#date-section {
    display: flex !important;
    gap: 1em;
    height: fit-content;
    justify-items: flex-start;
    align-items: flex-end;
}

#date-section p {
    height: 0.25em;
}

#date-section div {
    display: grid;
    gap: 0.2em !important;
    width: 100%;
}

#booking-contact-input {
    display: grid;
}

#input-section {
    display: grid;
    grid-template-columns: 1fr 2px 2fr;
    gap: 1em;
}

#input-section div {
    display: grid;
    gap: 1em;
    align-content: start;
}

#separator {
    background-color: #123150;
    border-radius: 2px;
}

#booking-contact-input {
    display: grid;
    gap: 1em;
    grid-template-areas: "fn sn" "em em" "tel tel" "ms ms";
}

form {
    display: grid;
    gap: 2em;
}

input {
    font-family: "Montserrat", sans-serif;
    color: #123150;
    box-sizing: border-box;
    font-size: 1em;
    background-color: white;
    border: 1px solid #123150;
    border-radius: 0;
    padding: 5px 10px;
    height: fit-content;
}

input:focus {
    outline: none;
    border-color: #001E39;
    box-shadow: 0 0 5px #001E39;
}

textarea {
    font-family: "Montserrat", sans-serif;
    font-style: normal;
    color: #123150;
    box-sizing: border-box;
    font-size: 1em;
    background-color: white;
    border: 1px solid #123150;
    border-radius: 0;
    padding: 5px 10px;
    resize: none;
}

textarea:focus {
    outline: none;
    border-color: #001E39;
    box-shadow: 0 0 5px #001E39;
}

select {
    font-family: "Montserrat", sans-serif;
    color: #123150;
    box-sizing: border-box;
    font-size: 1em;
    background-color: white;
    border: 1px solid #123150;
    border-radius: 0;
    padding: 5px 10px;
    -webkit-appearance: none;
    -moz-appearance: none;   
    appearance: none;
    background-repeat: no-repeat;
    background-position: right 10px top 50%;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3e%3cpath fill='%23333333' d='M6 8l4-4H2z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px top 50%;
    padding-right: 35px;
}

select:focus {
    outline: none;
    border-color: #001E39;
    box-shadow: 0 0 5px #001E39;
}

input[type="date"] {
    font-size: 1em;
    font-family: "Montserrat", sans-serif;
    min-height: calc(1em + 10px);
    -webkit-appearance: none; 
    box-sizing: border-box;
}

input[type="date"]:disabled {
    opacity: 1;
    filter: none;
    cursor: pointer;
    background-color: white;
    color: #123150;
}

.unavailable {
    background-color: #B2C0CE;
}

.onlyout {
    background: linear-gradient(-45deg, #B2C0CE 50%, white 50%);
}

.onlyin {
    background: linear-gradient(-45deg, white 50%, #B2C0CE 50%);
}


#booking-date-selection {
    display: none;
    gap: 0em;
    top: calc(50vh - 12.5em);
    left: calc(50vw - 10em);
    position: absolute;
    align-self: center;
    justify-self: center;
    background-color: white;
    width: 20em;
    height: 25em;
    border-radius: 1em;
    padding: 1.5em 1em 1.5em 1em;
    z-index: 10;
    box-shadow: 0 0 100vw 10em gray;
}

#booking-date-selection h3 {
    margin: 0;
}

#booking-date-selection h4 {
    font-size: 1em;
}

#booking-date-selection .calender .header {
    width: 100%;
}

#booking-date-selection .calender {
    min-width: 18em !important;
}

#booking-date-selection td.available {
    background-color: #e2e2e2;
    cursor: pointer;
}

#booking-date-selection td.available:hover {
    background-color: #B2C0CE;
    cursor: pointer;
}

#booking-date-selection td.reserved {
    background-color: #B2C0CE;
}

#booking-date-selection td.checkin {
    background-color: #374a6d;
}

input.error {
    border-color: darkred;
}

.error-message {
    display: none;
    color: darkred;
    font-size: 0.8em;
    margin: 0;
    padding: 0;
}


.error-message.visible {
    display: grid;
}

.form-field {
    display: grid;
    gap: 0.2em !important;
}

#booking-fail {
    color: darkred !important;
}

#booking-success {
    color: darkgreen !important;
}

#booking-fail h4 {
    color: darkred !important;
}

#booking-success h4 {
    color: darkgreen !important;
}









#small-header {
    display: none;
    padding-top: 0.5em;
    position: relative;
}

#menu-icon {
    position: absolute;
    align-self: center;
    left: 1.5em;
    max-height: 4em;
    max-width: 4em;
    cursor: pointer;
}

#menu-close-icon {
    position: absolute;
    left: 1.5em;
    top: 1em;
    max-height: 4em;
    max-width: 4em;
    cursor: pointer;
}

menu {
    padding-left: 3em;
    margin: 0;
    position: absolute; 
    display: none;
    height: 100dvh;
    width: 100%;
    background-color: white;
    z-index: 10;
    align-items: center;
}

menu nav {
    display: flex;
    flex-direction: column;
    font-size: 1.5em;
    gap: 1em;
}

menu nav a {
    text-decoration: none;
    color: #123150;
    font-weight: normal !important;
}

menu nav a:hover {
    text-decoration: underline;
}


#img-slider-view {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    background-color: #000000aa;
    z-index: 11;
    display: grid;
    align-items: center;
    align-content: center;
    justify-content: center;
    justify-items: center;
}

#img-slider-container {
    background-color: white;
    width: 90vw;
    height: 90dvh;
    border-radius: 1em;
}

#img-slider-close-button {
    position: absolute;
    top: calc(5dvh + 1.5em);
    right: calc(5vw + 1.5em);
    width: 2.5em;
    height: 2.5em;
    filter: drop-shadow(0px 0px 10px gray);
    cursor: pointer;
}

#img-slider-close-button:hover {
    filter: drop-shadow(0px 0px 20px black);
}

#img-slider {
    position: relative;
    display: flex;
    height: calc(90dvh - 7em);
    margin-top: 5em;
    margin-left: 2em;
    margin-right: 2em;
    margin-bottom: 2em;
    gap: 0.5em;
}

#img-view-helper {
    width: 100%;
    height: 100%;
    display: flex;
    align-content: center;
    justify-content: center;
}


#img-view {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}














@media (max-width: 1345px) {
    .review-item {
        width: calc((100vw - 9em - 8em) / 3);
    }

    #home-about-us-container {
        padding: 3em 8em 4em 12em;
    }

    .calender .header {
        width: 90%;
    }

    header nav { 
        width: 80%;
    }
}

@media (max-width: 1100px) {
    #input-section {
        grid-template-columns: 1fr;
    }

    #separator {
        display: none;
    }

    .review-item {
        width: calc((100vw - 9em - 4em) / 2);
    }

    #home-about-us-container {
        padding: 3em 4em 4em 12em;
    }

    #home-review-conatiner-bg-left {
        height: 50%;
    }

    #home-review-conatiner-bg-right {
        height: 30%;
    }

    header nav {
        width: 92% !important;
    }
    .apartment-images {
        grid-template-areas: "img1 img1 img1 img1 img2 img3 img4 img5"
            "img1 img1 img1 img1 img6 img7 img8 img9"
            "img1 img1 img1 img1 img10 img11 img12 img13"
            "img1 img1 img1 img1 placeholder placeholder placeholder placeholder";
        gap: 1.5em;
    }

    #location-txt {
        width: 90%;
    }

}

@media (max-width: 1000px) {
    #location-main {
        grid-template-columns: 3fr 1fr;
    }

    .apartment-detail-equipment-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .apartment-detail-main {
        grid-template-columns: 1fr;
    }

    #img-slider { 
        margin-left: 0.8em;
        margin-right: 0.8em;
    }

    #img-slider-container .navigator {
        width: 1em;
    }

    .calender {
        max-width: fit-content;
        min-width: 20em;
        justify-self: center;
    }

    .prices {
        justify-self: center;
    }

    .apartment-preview.selected {
        gap: 4em; 
    }

    .apartment-preview-img-container {
        width: 23em;
    }

    #home-about-us-container {
        padding: 3em 4em 4em 4em;
    }

    #home-about-us-container div { 
        grid-template-columns: 1fr;
        gap: 1.5em;
        margin-left: 0em;
    }

    #home-about-us-container div img { 
        width: 60%;
        margin-left: -4em;

    }

    footer {
        padding-left: 2em;
        padding-right: 2em;
    }

    #div-home-top {
        height: 60vh;
    }

    #img-home-top-container {
        height: 60vh;
    }

    #apartment-selecter button {
        font-size: 1.1em;
    }

    #home-booking-button {
        font-size: 1em;
    }

    #div-home-top h2 {
        font-size: 2em;
    } 

    #div-home-top h3 {
        font-size: 1em !important;
    }

    #img-home-logo {
        width: 6em;
        height: 6em;
    }

    #home-apartment-preview-container {
        margin-top: calc(60vh - 1.5em - 6em);
    }

    #home-features-container {
        padding-left: 12%;
        padding-right: 12%;
    }

    .apartment-images {
        gap: 1em;
        grid-template-areas: "img1 img1 img1 img1 img1 img1 img2"
            "img1 img1 img1 img1 img1 img1 img3"
            "img1 img1 img1 img1 img1 img1 img4"
            "img1 img1 img1 img1 img1 img1 img5"
            "img1 img1 img1 img1 img1 img1 img6"
            "img7 img8 img9 img10 img11 img12 img13"
    }

    #location-main {
        grid-template-columns: 2.5fr 1fr;
    }

    #location-top #map {
        width: 95%;
    }

    #location-top p {
        font-size: 0.8em;
    }

    #location-top #map-entry-wiek .dot {
        width: 1em;
        height: 1em;
    }

    #location-top #map-entry-wiek p {
        font-size: 1.1em;
    }

    #map-entry-wiek {
        top: calc(6em + ((100vw * 0.95) * 0.12));
        left: calc(2.5vw + (95vw / 2.5));
    }

    #map-entry-arkona {
        top: calc(6em + ((100vw * 0.95) * 0.06));
        left: calc(2.5vw + (95vw * 0.5));
    }

    #map-entry-hiddensee {
        top: calc(6em + ((100vw * 0.95) * 0.23));
        left: calc(2.5vw + (95vw * 0.21));
    }

    #map-entry-sassnitz {
        top: calc(6em + ((100vw * 0.95) * 0.34));
        left: calc(2.5vw + (95vw * 0.75));
    }
}

@media (max-width: 780px) {

    #img-slider-container .navigator {
        filter: drop-shadow(0px 0px 15px white);
    }

    #img-slider-container .navigator:hover {
        filter: drop-shadow(0px 0px 20px white);
    }

    #img-slider { 
        margin-left: 0.4em;
        margin-right: 0.4em;
        gap: 0.3em;
    }

    #img-view-helper { 
        margin-left: -3.1em;
        margin-right: -3.1em;
    }

    #location-txt {
        width: 100%;
    }

    #activity-container {
        width: 100%;
    }

    #location-address-section {
        margin-top: 2em;
    }

    #location-main {
        grid-template-columns: 1fr;
    }

    .apartment-preview.selected {
        gap: 4em; 
    }

    .apartment-preview-img-container {
        width: 23em;
    }

    #home-about-us-container {
        padding: 3em 4em 4em 4em;
    }

    #home-about-us-container div { 
        grid-template-columns: 1fr;
        gap: 1.5em;
        margin-left: 0em;
    }

    #home-about-us-container div img { 
        width: 60%;
        margin-left: -4em;

    }

    #footer-content {
        grid-template-columns: 1fr 1fr;
        gap: 2em;
    }

    .apartment-preview.selected {
        padding: 3em 3em 3em 3em;
    }

    
}


@media (max-width: 700px) {
    #location-main {
        margin-left: 2em;
        margin-right: 2em;
    }

    #activity-container div {
        margin-left: -6em;
        z-index: 1;
    }

    #activity-container img {
        opacity: 75%;
        z-index: 0
    }
    
    header {
        display: none;
    }

    #small-header {
        display: flex !important;
    }

    .review-item {
        width: calc(100vw - 9em);
    }

    #home-about-us-container div img {
        width: 80%;
    }

    #img-home-logo {
        display: none;
    }

    #home-booking-button {
        bottom: 4em;
        right: 2em;
    }

    .apartment-detailpage-top {
        padding-left: 2em;
        padding-right: 2em;
    }

    #booking-top {
        padding-left: 2em;
        padding-right: 2em;
    }

    #input-section {
        width: calc(100vw - 4em);
    }

    #input-section div {
       width: calc(100vw - 4em); 
    }

    #input-section select {
       width: calc(100vw - 4em); 
    }

    #input-section .smalltxt {
       width: calc(100vw - 4em); 
    }

    #date-section {
        width: calc(100vw - 4em) !important; 
        gap: 0.5em !important;
    }

    #date-section div {
        width: 100% !important;
    }

    input[type="date"] {
        width: 100%;
    }

    #imp-dat-top {
        padding-left: 2em;
        padding-right: 2em;
    }

    #imp-dat-main {
        margin-left: 2em;
        margin-right: 2em;
    }

    .review-txt {
        font-size: 0.85em;
    }
}

@media (max-width: 660px) {
    #booking-contact-input {
        grid-template-columns: 1fr !important;
        grid-template-areas: "fn" "sn" "em" "tel" "ms";
    }

    #booking-main {
        margin-left: 2em;
        margin-right: 2em;
    }

    #footer-content {
        grid-template-columns: 1fr;
    }

    #home-features-container {
        grid-template-columns: 1fr;
        gap: 3.5em;
    }

    .apartment-preview.selected {
        display: grid;
        gap: 2em;
        padding: 3em 2em 1em 2em;
    }

    .apartment-images {
        gap: 1em;
        grid-template-areas: "img1 img1 img1 img1 img1"
            "img2 img3 img4 img5 img6"
            "img7 img8 img9 img10 img11"
            "img12 img13 img14 img15 img16"
    }

    .apartment-detail-main {
        margin-left: 2em;
        margin-right: 2em;
    }

    .apartment-preview-img-container {
        width: 100%;
    }

     #home-booking-button {
        display: none;
     }

     #home-apartment-preview-container {
        margin-top: calc(45vh - 1.5em - 6em);
    }

    #div-home-top {
        height: 45vh;
    }

    #img-home-top-container {
        height: 45vh;
    }

    #apartment-selecter button {
        font-size: 1em;
    }

    #home-features-container-bg {
        width: 300%;
        top: -2em;
        left: 10% !important;
    }

    #home-about-us-container {
        padding: 3em 2em 3em 2em;
    }

    #home-about-us-container div img { 
        margin-left: -2em;

    }

    #home-review-conatiner h2 {
        margin-left: -1em;
    }

    #img-home-top {
        
    } 

    #menu-icon {
      width: 2.5em;
      height: 2.5em;  
      left: 1em;
    }

    #menu-close-icon {
        width: 2.5em;
      height: 2.5em; 
      top: 2em;
      left: 1em;
    }

}