/* ==========================================================================
   halal-reisen — Hotel-Detailseite (Task 14)

   Route `single-hotem` (/place) und `single-hotel-client` (/single-place).

   Das Markup dieser Seite stammt groesstenteils aus dem uebernommenen Template
   und teilweise von halalbooking. Es wird deshalb ueberwiegend per CSS
   umgelenkt statt umgeschrieben — an ihm haengen die Galerie (slick), die
   Google-Karte und ZWEI eigene tuerkische Teilviews.
   ========================================================================== */

.single_hotel_blade { padding-block: var(--hr-space-5) var(--hr-space-7); }
.single_hotel_blade.grey-bg { background-color: var(--hr-bg); }

/* --- Kopfbereich: Galerie + Infospalte -------------------------------------
   Die beiden lagen in `col-md-8` / `col-md-4`. Bootstraps `md` schaltet bei
   992px um, unsere Mobil-Erkennung bei 1064px (docs/besonderheiten.md §2a) —
   zwischen 992 und 1064px stand die Infospalte deshalb in einer Breite, fuer
   die sie nie gedacht war. Ein Grid mit unserem Breakpoint raeumt das auf.
   -------------------------------------------------------------------------- */
@media (min-width: 1064px) {
  .single_hotel_blade > .container > .row:first-child {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: var(--hr-space-5);
    align-items: start;
  }
  .single_hotel_blade > .container > .row:first-child::before,
  .single_hotel_blade > .container > .row:first-child::after { content: none; display: none; }
  .single_hotel_blade > .container > .row:first-child > [class*='col-'] {
    width: auto;
    max-width: none;
    float: none;
    padding: 0;
  }
}

/* --- Galerie ---------------------------------------------------------------- */
.list-single-main-media {
  border-radius: var(--hr-radius-lg);
  overflow: hidden;
  background-color: var(--hr-surface);
}
.list-single-main-media .slider-for .hotel_images img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
@media (min-width: 768px) {
  .list-single-main-media .slider-for .hotel_images img { aspect-ratio: 16 / 10; }
}

/* Vorschaubilder darunter */
.list-single-main-media .slider-nav { margin-top: var(--hr-space-2); }
.list-single-main-media .slider-nav .slick-slide-item { padding-right: var(--hr-space-2); }
.list-single-main-media .slider-nav img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--hr-radius-sm);
  cursor: pointer;
  opacity: 0.75;
  transition: opacity var(--hr-transition);
}
.list-single-main-media .slider-nav .slick-current img,
.list-single-main-media .slider-nav img:hover { opacity: 1; }

/* Die Pfeile lagen im alten Blau und ohne Tastaturfokus. */
.single-slider-wrapper .sw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--hr-tap);
  height: var(--hr-tap);
  border-radius: var(--hr-radius-full);
  background-color: var(--hr-dark);
  color: var(--hr-text-on-dark);
  box-shadow: var(--hr-shadow);
}
.single-slider-wrapper .sw-btn:hover { background-color: var(--hr-primary); }

/* --- Infospalte ------------------------------------------------------------- */
.hr-detail-info {
  padding: var(--hr-space-5);
  border: 1px solid var(--hr-border);
  border-radius: var(--hr-radius-lg);
  background-color: var(--hr-surface);
}
/* 🐞 Das tuerkise "▽" rechts neben dem Hotelnamen.
   Kein Textzeichen, sondern ein dekoratives `::before` aus dem Alt-CSS mit
   `content: "\f...";` in "Font Awesome 5 Pro". Die Glyphe gibt es in der
   vorhandenen Font-Fassung nicht, also zeichnete der Browser das Ersatz-
   zeichen. Es war weder anklickbar noch beschriftet — es entfaellt. */
.hr-detail-info .box-widget-item-header::before { content: none; }

/* h1 seit Task 16: Der Hotelname ist die Ueberschrift der Seite. h3 bleibt
   im Selektor, damit bestehendes Markup unveraendert weiterlaeuft. */
.hr-detail-info .box-widget-item-header h1,
.hr-detail-info .box-widget-item-header h3 {
  margin: 0 0 var(--hr-space-2);
  color: var(--hr-dark);
  font-size: var(--hr-text-xl);
}
.hr-detail-info .box-widget-item-header h5 {
  margin: 0 0 var(--hr-space-3);
  color: var(--hr-text-muted);
  font-size: var(--hr-text-sm);
  font-weight: var(--hr-weight-normal);
}
.hr-detail-info .box-widget-item-header h5 .fa-map-marker-alt { color: var(--hr-primary); }

.hr-detail-info .hotel_overview {
  padding-block: var(--hr-space-4);
  border-top: 1px solid var(--hr-border);
  color: var(--hr-text-muted);
  font-size: var(--hr-text-sm);
  line-height: var(--hr-leading);
  /* Das Alt-CSS deckelt die Hoehe und macht den Block scrollbar. Auf dem
     Smartphone ergab das eine Scrollflaeche INNERHALB der scrollenden Seite —
     der Text war nur zu lesen, wenn man genau darin wischte. Er darf einfach
     so lang sein, wie er ist; derselbe Text steht ohnehin weiter unten noch
     einmal unter "Überblick". */
  max-height: none;
  overflow: visible;
}

/* --- Preis ------------------------------------------------------------------
   🐞 HIER LAG DER FEHLER (behoben in Task 14).
   Der Block trug die Altklasse `list-single-hero-price`. In style.css setzt
   sie den Beschriftungstext und den Betrag als getrennte Bloecke mit eigenen
   Groessen; angezeigt wurde daraus "405.00" rechts in 24px und "EUR" darunter
   links in 26px, waehrend "Minimaler Preis" gar nicht erschien.
   Der Block hat jetzt eigene Klassen — und damit keine Altregel mehr am Bein.
   Betrag und Waehrung stehen in EINEM Element mit geschuetztem Leerzeichen.
   -------------------------------------------------------------------------- */
.hr-detail-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--hr-space-2);
  padding-block: var(--hr-space-4);
  border-top: 1px solid var(--hr-border);
}
.hr-detail-price__label {
  color: var(--hr-text-muted);
  font-size: var(--hr-text-sm);
}
.hr-detail-price__value {
  color: var(--hr-dark);
  font-size: var(--hr-text-2xl);
  font-weight: var(--hr-weight-bold);
  line-height: 1.1;
  white-space: nowrap;
}
.hr-detail-price--empty { justify-content: flex-start; }
.hr-detail-price--empty .hr-detail-price__label {
  color: var(--hr-danger);
  font-weight: var(--hr-weight-medium);
}

/* --- Eckdaten (Check-in, Check-out, Sprachen) ------------------------------- */
.hr-detail-facts { border-top: 1px solid var(--hr-border); padding-top: var(--hr-space-3); }
.hr-detail-facts dl { margin: 0; }
.hr-detail-facts dl > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hr-space-2) var(--hr-space-4);
  justify-content: space-between;
  padding-block: var(--hr-space-2);
}
.hr-detail-facts dl > div + div { border-top: 1px solid var(--hr-border); }
.hr-detail-facts dt {
  color: var(--hr-text);
  font-size: var(--hr-text-sm);
  font-weight: var(--hr-weight-medium);
}
.hr-detail-facts dt i { color: var(--hr-primary); margin-right: var(--hr-space-1); }
.hr-detail-facts dd {
  margin: 0;
  color: var(--hr-text-muted);
  font-size: var(--hr-text-sm);
  text-align: right;
}

/* --- Suchformular auf der Detailseite ---------------------------------------
   Kein `overflow: hidden` — es schnitt Kalender und Gaesteklappe weg (Task 15,
   ausfuehrlich kommentiert in pages/home.css). Rundung uebernehmen die
   Randkinder. */
.single_hotel_blade .main-search-input-wrap { margin-block: var(--hr-space-5); }
.single_hotel_blade .main-search-input {
  border-radius: var(--hr-radius-lg);
  box-shadow: var(--hr-shadow);
}
.single_hotel_blade .main-search-input > .main-search-input-item:first-child {
  border-top-left-radius: var(--hr-radius-lg);
  border-bottom-left-radius: var(--hr-radius-lg);
}
.single_hotel_blade .main-search-input > .main-search-button {
  border-top-right-radius: var(--hr-radius-lg);
  border-bottom-right-radius: var(--hr-radius-lg);
}
.single_hotel_blade .main-search-button {
  background-color: var(--hr-primary);
  color: var(--hr-text-on-dark);
  font-weight: var(--hr-weight-semibold);
}
.single_hotel_blade .main-search-button:hover { background-color: var(--hr-primary-hover); }

/* --- Zimmerkarten -----------------------------------------------------------
   Die Karten lagen in `col-md-4`-Spalten und waren unterschiedlich hoch: Ihre
   Hoehe kam aus der Laenge der Stornobedingungen, und der Reservieren-Knopf
   sass deshalb bei jeder Karte auf einer anderen Hoehe.
   Jetzt ein Raster mit gleich hohen Karten; der Knopf steht immer unten.
   -------------------------------------------------------------------------- */
.hr-rooms { margin-top: var(--hr-space-6); }
.hr-rooms .room_title_main h3 {
  margin-bottom: var(--hr-space-4);
  color: var(--hr-dark);
  font-size: var(--hr-text-xl);
}

.rooms-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--hr-space-5);
}
@media (min-width: 768px)  { .rooms-container { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1064px) { .rooms-container { grid-template-columns: repeat(3, 1fr); } }
/* Der Clearfix von `.fl-wrap` wuerde im Grid eigene Zellen belegen — derselbe
   Effekt, der auf der Startseite die Merkmalskacheln verschoben hat. */
.rooms-container::before,
.rooms-container::after { content: none; display: none; }

.hr-room-col { display: flex; min-width: 0; }

.rooms-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  border: 1px solid var(--hr-border);
  border-radius: var(--hr-radius-lg);
  background-color: var(--hr-surface);
  overflow: hidden;
  transition: box-shadow var(--hr-transition), border-color var(--hr-transition);
}
.rooms-item:hover { border-color: var(--hr-border-strong); box-shadow: var(--hr-shadow-lg); }

.rooms-media { position: relative; aspect-ratio: 4 / 3; background-color: var(--hr-surface-sunken); }
.rooms-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* "Galerie ansehen" lag als volle Leiste im alten Dunkelblau ueber dem Bild. */
.rooms-media .more-photos-button {
  position: absolute;
  /* Das Alt-CSS spannt die Leiste mit `left: 0; width: 100%` ueber die ganze
     Kartenbreite — beides muss zurueckgesetzt werden, sonst bleibt der Balken
     trotz `right`/`bottom` voll breit. */
  left: auto;
  top: auto;
  width: auto;
  right: var(--hr-space-3);
  bottom: var(--hr-space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--hr-space-2);
  padding: var(--hr-space-2) var(--hr-space-3);
  border-radius: var(--hr-radius-full);
  background-color: rgba(10, 61, 46, 0.88);
  color: var(--hr-text-on-dark);
  font-size: var(--hr-text-xs);
  font-weight: var(--hr-weight-medium);
  /* Das Alt-CSS setzt hier `text-transform: uppercase` und schiebt den Pfeil
     mit `position:absolute` an den rechten Rand — er lag dadurch ueber der
     Anzahl ("3 FOT⭢S"). */
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}
.rooms-media .more-photos-button:hover { background-color: var(--hr-primary); }
.rooms-media .more-photos-button span { opacity: 0.85; }
.rooms-media .more-photos-button i {
  position: static;
  margin: 0;
  font-size: var(--hr-text-xs);
}

.rooms-details {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--hr-space-3);
  padding: var(--hr-space-4);
}

.rooms-details-header { display: flex; flex-direction: column; gap: var(--hr-space-2); }

/* 🐞 Preis-Badge: Das Alt-CSS setzt `.rooms-price` auf `position: absolute`
   mit einem negativen `top`. Gemessen sass der Preis dadurch bei y = -23px,
   also OBERHALB der Karte und ausserhalb ihres `overflow: hidden` — auf der
   Karte war er schlicht nicht zu sehen. `position: static` holt ihn zurueck
   in den Fluss. */
.rooms-price {
  position: static;
  display: inline-flex;
  align-items: baseline;
  gap: var(--hr-space-2);
  align-self: flex-start;
  padding: var(--hr-space-1) var(--hr-space-3);
  border-radius: var(--hr-radius-full);
  background-color: var(--hr-primary-soft);
  color: var(--hr-dark);
  font-size: var(--hr-text-lg);
  font-weight: var(--hr-weight-bold);
  white-space: nowrap;
}
.rooms-price .total {
  color: var(--hr-text-muted);
  font-size: var(--hr-text-xs);
  font-weight: var(--hr-weight-normal);
}

.rooms-details h3.room_name {
  margin: 0;
  color: var(--hr-dark);
  font-size: var(--hr-text-base);
  font-weight: var(--hr-weight-semibold);
}
.rooms-details h5 {
  margin: 0;
  color: var(--hr-text-muted);
  font-size: var(--hr-text-sm);
  font-weight: var(--hr-weight-normal);
}
/* Der Wert stand im alten Markenblau. */
.rooms-details h5 span { color: var(--hr-text); font-weight: var(--hr-weight-medium); }

/* Zimmermerkmale als Chips statt als Textwurst. */
h6.property_rooms_meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hr-space-2);
  margin: 0;
}
h6.property_rooms_meta span {
  display: inline-flex;
  align-items: center;
  padding: var(--hr-space-1) var(--hr-space-2);
  border: 1px solid var(--hr-border);
  border-radius: var(--hr-radius-sm);
  background-color: var(--hr-surface-sunken);
  color: var(--hr-text-muted);
  font-size: var(--hr-text-xs);
  font-weight: var(--hr-weight-normal);
}

/* Stornobedingungen — kommen als HTML von halalbooking. */
.content_room_inner {
  color: var(--hr-text-muted);
  font-size: var(--hr-text-xs);
  line-height: var(--hr-leading-snug);
}
.content_room_inner p { margin: 0 0 var(--hr-space-1); }
.content_room_inner p:last-child { margin-bottom: 0; }

/* Der Knopf sitzt immer am Fuss der Karte. */
.rooms-details .facilities-list { margin-top: auto; padding-top: var(--hr-space-2); }
.rooms-details .facilities-list .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hr-space-2);
  width: 100%;
  min-height: var(--hr-tap);
  padding: var(--hr-space-3) var(--hr-space-4);
  border: 0;
  border-radius: var(--hr-radius);
  background-color: var(--hr-primary);
  color: var(--hr-text-on-dark);
  font-size: var(--hr-text-base);
  font-weight: var(--hr-weight-semibold);
}
.rooms-details .facilities-list .btn:hover {
  background-color: var(--hr-primary-hover);
  color: var(--hr-text-on-dark);
}
/* Der Pfeil im Knopf sass im Alt-CSS als eigener, hellerer Kasten rechts
   aussen — er sah aus wie ein zweiter, angeklebter Knopf. */
.rooms-details .facilities-list .btn i {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  background: none;
  line-height: 1;
}

/* --- Untere Abschnitte -----------------------------------------------------
   Ausstattung, Lage, Pools, Wellness, wichtige Hinweise. Sie lagen in zwei
   `col-md-6`-Spalten; unterhalb von 992px stapelten sie, dazwischen war es eng.
   -------------------------------------------------------------------------- */
.single_hotel_blade .list-single-main-item {
  margin-bottom: var(--hr-space-5);
  padding: var(--hr-space-5);
  border: 1px solid var(--hr-border);
  border-radius: var(--hr-radius-lg);
  background-color: var(--hr-surface);
}
.single_hotel_blade .list-single-main-item-title h3 {
  display: flex;
  align-items: center;
  gap: var(--hr-space-2);
  margin: 0 0 var(--hr-space-4);
  padding-bottom: var(--hr-space-3);
  border-bottom: 1px solid var(--hr-border);
  color: var(--hr-dark);
  font-size: var(--hr-text-lg);
  /* Die Ueberschriften standen in Grossbuchstaben — im Markup, nicht per CSS.
     Sie sind in Task 14 auf normale Schreibweise gebracht worden; diese Regel
     faengt ab, falls irgendwo noch `text-transform` aus dem Alt-CSS greift. */
  text-transform: none;
}
.single_hotel_blade .list-single-main-item-title h3 i { color: var(--hr-primary); }

.single_hotel_blade .listing-features p,
.single_hotel_blade .facility_items p,
.single_hotel_blade .pool_info p,
.single_hotel_blade .notes {
  color: var(--hr-text);
  font-size: var(--hr-text-sm);
  line-height: var(--hr-leading);
}
.single_hotel_blade .pool_info h4 {
  margin: var(--hr-space-4) 0 var(--hr-space-2);
  color: var(--hr-dark);
  font-size: var(--hr-text-base);
}

/* Der Ueberblickstext unter den Zimmern. */
.single_hotel_blade .list-single-main-item h3 + * { margin-top: 0; }

/* --- Karte ------------------------------------------------------------------ */
.location_of_hotel,
.single_hotel_blade .map-container {
  margin-top: var(--hr-space-4);
  border-radius: var(--hr-radius);
  overflow: hidden;
}
.single_hotel_blade #hotelMap {
  width: 100%;
  height: 320px;
  background-color: var(--hr-surface-sunken);
}

/* Der Adressblock stand als dunkelgruener Kasten mit dunklem Text — der
   Kontrast lag dadurch unter 2:1 und der Hotelname war kaum zu lesen. */
.single_hotel_blade .map_info h4,
.single_hotel_blade .pool_info h4 {
  padding: 0;
  background: none;
  color: var(--hr-dark);
}

/* --- Zwei Spalten fuer die unteren Bloecke ---------------------------------- */
@media (min-width: 1064px) {
  .single_hotel_blade .list-single-main-container > .col-md-6 {
    width: calc(50% - var(--hr-space-3));
    padding: 0;
  }
  .single_hotel_blade .list-single-main-container > .col-md-6:first-of-type { margin-right: var(--hr-space-5); }
}
@media (max-width: 1063px) {
  .single_hotel_blade .list-single-main-container > .col-md-6,
  .single_hotel_blade .list-single-main-container > .col-md-12 {
    width: 100%;
    float: none;
    padding: 0;
  }
}

/* --- Mobiler Kopf (Breadcrumb + Suchformular) ------------------------------- */
.breadcrumbs-fs {
  padding: var(--hr-space-3) var(--hr-space-4);
  background-color: var(--hr-dark);
  color: var(--hr-text-on-dark);
}
.breadcrumbs-fs .s-header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hr-space-1) var(--hr-space-3);
  margin: 0;
  color: var(--hr-text-on-dark);
  font-size: var(--hr-text-sm);
}
.breadcrumbs-fs .btn-edit {
  min-height: 36px;
  padding-inline: var(--hr-space-3);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--hr-radius);
  background-color: transparent;
  color: var(--hr-text-on-dark);
  font-size: var(--hr-text-sm);
  cursor: pointer;
}

/* --- Zimmerpreise werden nachgeladen (Task 15) ------------------------------
   Die Zimmerliste wird bei geaenderten Daten/Gaesten per AJAX ersetzt. Waehrend
   der Anfrage bleibt der alte Stand sichtbar, aber gedaempft und nicht
   bedienbar — so springt das Layout nicht, und niemand klickt auf einen Preis,
   der gerade ersetzt wird. */
.hr-rooms { transition: opacity var(--hr-transition); }
.hr-rooms--laedt {
  opacity: 0.45;
  pointer-events: none;
}
.hr-rooms__hinweis {
  margin: var(--hr-space-4) 0 0;
  padding: var(--hr-space-4);
  border: 1px solid var(--hr-border);
  border-radius: var(--hr-radius);
  background-color: var(--hr-surface-sunken);
  color: var(--hr-text-muted);
  text-align: center;
}