/* Allgemeine Stile für die Blockkomponente */
.room-reservation-block {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin: 10px 0;
    background-color: #f9f9f9;
    overflow: hidden; /* Wichtig, um Inhalte korrekt zu beschneiden */
}

/* Titel und Texte */
.room-reservation-block h3 {
    margin-top: 0;
    font-size: 18px;
    color: #0073aa;
}

.room-reservation-block p {
    font-size: 14px;
    color: #555;
}

/* Elterncontainer mit relativer Position */
.room-display {
    position: relative; /* Wichtig für die Position der Overlay-Box */
}

/* Slider-Container */
.room-slider {
    position: relative; /* Sicherstellen, dass der Swiper-Container auch korrekt positioniert ist */
    width: 100%;
    height: auto;
    overflow: hidden;
}

.room-slider img {
    max-width: 100%;
    height: auto;
    flex-shrink: 0;
    transition: transform 0.3s ease-in-out;
}

/* Halbdurchsichtige Box über Bildern */
.room-overlay {
    position: absolute; /* Positioniert die Box relativ zum Elterncontainer */
    top: 25px;
    left: 10%;
    background-color: rgba(0, 0, 0, 0.6); /* Halbdurchsichtig */
    color: #fff;
    padding: 10px 15px;
    border-radius: 5px;
    z-index: 10; /* Über den Bildern */
}

/* Overlay-Box bei mobiler Ansicht ausblenden */
@media (max-width: 768px) { /* Für Bildschirme mit einer Breite von max. 768px */
    .room-overlay {
        display: none; /* Overlay-Box verstecken */
    }
}

.room-title {
    font-size: 18px;
    font-weight: bold;
    margin: 0;
    color: #fff !important;/* Titel wird weiß */
}

/* Bildunterschriften */
.image-caption {
    text-align: center;
    font-size: 14px;
    margin-top: 10px;
    color: #ccc; /* Heller Farbton für die Caption */
    line-height: 1.4;
    word-wrap: break-word;
}

/* Raumdetails unterhalb des Swipers */
.room-details {
    margin-top: 20px;
    padding: 15px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    max-width: 100%; /* Standardbreite */
    width: calc(100% - 30px); /* Optional: Gleiche Breite wie die Bilder im Swiper */
    text-align: left; /* Links ausrichten */
    margin-left: auto; /* Zentriert die Details */
    margin-right: auto; /* Zentriert die Details */
}

.room-price,
.room-size {
    font-size: 16px;
    margin: 5px 0;
    font-weight: bold;
    color: #333;
}

.room-description {
    font-size: 14px;
    line-height: 1.6;
    color: #555;
    margin-top: 10px;
}

/* Zusätzliche Swiper-spezifische Stile */
.swiper-wrapper {
    display: flex;
    transition: transform 0.3s ease-in-out;
}

.swiper-slide {
    flex-shrink: 0;
    width: 100%; /* Wichtig für Slider-Funktion */
    height: auto;
}

.swiper-pagination {
    bottom: 10px;
    color: #ffffff !important;
}

.swiper-button-next,
.swiper-button-prev {
    color: #ffffff !important;
}

/* Allgemeine Pfeilfarbe */
.swiper-button-next,
.swiper-button-prev {
    color: #7c7c7c; /* Ändere die Farbe der Pfeile */
    opacity: 1; /* Volle Sichtbarkeit */
}

/* Hover-Effekt für Pfeile */
.swiper-button-next:hover,
.swiper-button-prev:hover {
    color: #7c7c7c; /* Farbe beim Hover */
    transform: scale(1.1); /* Optional: Leichte Vergrößerung beim Hover */
}

/* Optional: Anpassung der Größe der Pfeile */
.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 20px; /* Standardgröße der Pfeile anpassen */
}

:root {
    --swiper-pagination-color: rgb(255, 255, 255);
    --swiper-pagination-color-active: #acacac;
    --swiper-arrow-color: #ffffff;
    --swiper-arrow-hover-color: rgb(255, 255, 255);
}