.room-card {
  height: 100%;
  overflow: hidden;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  box-shadow: 0 12px 32px rgba(55, 58, 60, .07);
  transition: transform .25s, box-shadow .25s;
}

.room-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(55, 58, 60, .13);
}


/*
 * Bildergalerie
 */
.room-card__gallery {
  position: relative;
  height: 275px;
  overflow: hidden;
  background: var(--bs-gray-200);
}

.room-card__gallery .carousel-inner,
.room-card__gallery .carousel-item {
  height: 100%;
}


/*
 * Lightbox-Link.
 *
 * Sowohl beim einzelnen Bild als auch innerhalb des
 * Bootstrap-Carousels füllt der Link die komplette
 * verfügbare Bildfläche.
 */
.room-card__lightbox {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}


/*
 * Bild
 */
.room-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/*
 * Zoom-Overlay für HalkaBox / t3sbootstrap.
 *
 * Das Overlay liegt über der kompletten Bildfläche
 * und wird beim Hover eingeblendet.
 */
.room-card__lightbox .zoom-overlay {
  position: absolute;
  z-index: 1;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;

  margin: 0 !important;

  opacity: 0;

  transition:
    opacity .35s,
    transform .35s;

  pointer-events: none;
}

.room-card__lightbox:hover .zoom-overlay,
.room-card__lightbox:focus-visible .zoom-overlay {
  opacity: 1;
}


/*
 * t3sbootstrap positioniert die Lupe normalerweise
 * absolut über top/left 50 %.
 *
 * Hier übernimmt das Flexbox-Layout des Overlays
 * bereits die Zentrierung.
 */
.room-card__lightbox .magnifying-glass-icon {
  position: static;
  top: auto;
  left: auto;

  flex: 0 0 auto;

  transform: none;
}


/*
 * Carousel Navigation
 *
 * z-index höher als das Zoom-Overlay, damit die
 * Navigation weiterhin problemlos bedienbar bleibt.
 */
.room-card__gallery-prev,
.room-card__gallery-next {
  top: 50%;
  bottom: auto;
  z-index: 3;

  width: 38px;
  height: 44px;

  border: 1px solid rgba(255, 255, 255, .72);
  background: rgba(36, 38, 37, .62);

  opacity: 1;

  transform: translateY(-50%);
}

.room-card__gallery-prev {
  left: 12px;
}

.room-card__gallery-next {
  right: 12px;
}

.room-card__gallery-prev:hover,
.room-card__gallery-next:hover {
  background: var(--bs-danger);
  border-color: #fff;
}

.room-card__gallery-prev .carousel-control-prev-icon,
.room-card__gallery-next .carousel-control-next-icon {
  width: 1.25rem;
  height: 1.25rem;
}


/*
 * Bildzähler
 */
.room-card__counter {
  position: absolute;
  z-index: 3;
  bottom: 12px;
  left: 50%;

  padding: 5px 9px;

  background: rgba(36, 38, 37, .72);
  color: #fff;

  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;

  transform: translateX(-50%);

  pointer-events: none;
}


/*
 * Inhalt
 */
.room-card__body {
  padding: 30px 32px 32px;
}

.room-card__supraheader {
  margin: 0 0 8px;

  color: var(--bs-danger);

  font-size: .68rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.room-card__headline {
  margin: 0 0 12px;
  font-size: 2rem;
}

.room-card__text {
  font-size: .82rem;
  line-height: 1.45;
}

.room-card__text p:last-child {
  margin-bottom: 0;
}


/*
 * Raumdaten
 */
.room-card__facts {
  margin-top: 24px;
  border-top: 1px solid var(--bs-border-color);
}

.room-card__fact {
  display: grid;
  grid-template-columns: 105px minmax(0, 1fr);
  gap: 16px;
  align-items: start;

  padding: 12px 4px;

  border-bottom: 1px solid var(--bs-border-color);
}

.room-card__fact-label {
  color: var(--bs-secondary-color);

  font-size: .68rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.room-card__fact-content {
  text-align: right;

  font-size: .82rem;
  line-height: 1.45;
}

.room-card__fact-content p {
  margin: 0;
}

.room-card__fact-content p + p {
  margin-top: 4px;
}

.room-card__fact-content strong {
  font-weight: 700;
}


/*
 * Bestuhlungsarten
 */
.room-card__seating {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));

  margin: 18px 0;

  background: var(--bs-gray-300);
  color: var(--bs-body-color);
}

.room-card__seating-item {
  min-width: 0;

  padding: 14px 4px 15px;

  text-align: center;

  border-right: 1px solid var(--bs-gray-500);
}

.room-card__seating-item:last-child {
  border-right: 0;
}

.room-card__seating-label {
  display: block;
  min-height: 34px;

  color: var(--bs-secondary-color);

  font-size: .68rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.room-card__seating-icon {
  display: block;

  width: 48px;
  height: 36px;

  margin: 3px auto 0;

  color: var(--bs-body-color);
}

.room-card__seating-item strong {
  display: block;

  margin-top: 5px;

  font-size: .82rem;
  line-height: 1.45;
  font-weight: 700;
}


/*
 * Aktionen
 */
.room-card__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;

  margin-top: 18px;
}

.room-card__request-link {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  color: var(--bs-danger);
  font-weight: 700;
  font-size: 0.95rem;

  text-transform: uppercase;

}

a.room-card__request-link:hover {
  text-decoration: none;
}

.room-card__request-link span {
  font-size: 1.3rem;
  transition: transform .2s;
}

.room-card__request-link:hover span {
  transform: translateX(4px);
}

.room-card__detail-link {
  display: inline-flex;
  min-height: 40px;

  align-items: center;
  justify-content: center;

  padding: 8px 11px;

  border-radius: 0;

  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .075em;
  text-transform: uppercase;
}


/*
 * Tablet
 */
@media (max-width: 767.98px) {
  .room-card__gallery {
    height: 260px;
  }
}


/*
 * Smartphone
 */
@media (max-width: 575.98px) {
  .room-card__body {
    padding: 25px 22px;
  }

  .room-card__fact {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 12px;
  }

  .room-card__seating {
    grid-template-columns: repeat(2, 1fr);
  }

  .room-card__seating-item:nth-child(2n) {
    border-right: 0;
  }

  .room-card__seating-item {
    border-bottom: 1px solid var(--bs-border-color);
  }

  .room-card__seating-item:nth-last-child(-n+2) {
    border-bottom: 0;
  }

  .room-card__seating-label {
    min-height: auto;
  }

  .room-card__actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .room-card__detail-link {
    width: 100%;
  }
}