/* Hotelangebote: Karte und Filter. Eigene Klassen (ufo-ha-*), weil das
   Tailwind-Build des Themes nur die dort benutzten Klassen enthaelt.
   Farben wie die bisherige Hotelkarte (blue-600 / blue-700). */

.ufo-ha-karte {
  --ufo-blau: #2563eb;
  --ufo-blau-dunkel: #1d4ed8;
  --ufo-text: #1f2937;
  --ufo-grau: #6b7280;
  --ufo-linie: #e5e7eb;
  --ufo-flaeche: #f3f4f6;
  /* Bildgroesse fuer alle Hotels gleich, egal wie viele Angebote die Karte hat */
  --ufo-bildhoehe: 210px;
  display: flex;
  background: #fff;
  /* Rundung und Schatten der Karte; das Bild nutzt dieselben Werte */
  --ufo-radius: 0.5rem;
  --ufo-schatten: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .06);
  border-radius: var(--ufo-radius);
  box-shadow: var(--ufo-schatten);
  overflow: hidden;
  color: var(--ufo-text);
}
.ufo-ha-bild {
  position: relative; flex: 0 0 33%; height: var(--ufo-bildhoehe); align-self: flex-start;
  /* eigenstaendiges Objekt in der Karte: oben links buendig, gerundet, mit Schatten wie die Karte */
  margin: 0 0 1rem 0; border-radius: var(--ufo-radius); box-shadow: var(--ufo-schatten);
  overflow: hidden; background: var(--ufo-flaeche);
}
.ufo-ha-bild a { display: block; height: 100%; }
.ufo-ha-bild img:not(.ufo-ha-award) { width: 100%; height: 100%; object-fit: cover; display: block; }
.ufo-ha-bild-leer { height: 100%; display: flex; align-items: center; justify-content: center; color: var(--ufo-grau); font-size: .85rem; }
.ufo-ha-award { position: absolute; top: 0; left: 0; width: 2rem; height: auto; }
.ufo-ha-inhalt { flex: 1; min-width: 0; padding: 1rem; display: flex; flex-direction: column; gap: .6rem; }

.ufo-ha-titel h3 { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.3; }
.ufo-ha-titel h3 a { color: inherit; text-decoration: none; }
.ufo-ha-titel h3 a:hover { color: var(--ufo-blau); }
.ufo-ha-unterzeile { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .15rem; font-size: .85rem; color: var(--ufo-grau); }
.ufo-ha-sterne { position: relative; display: inline-block; color: #ddd; font-size: 15px; letter-spacing: 1px; line-height: 1; }
.ufo-ha-sterne-voll { position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; color: #f5a623; }
.ufo-ha-teaser { margin: 0; font-size: .875rem; color: #4b5563; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.ufo-ha-knopf {
  display: inline-block; background: var(--ufo-blau); color: #fff !important; border: 1px solid var(--ufo-blau);
  padding: .5rem 1rem; border-radius: .5rem; text-decoration: none; font-size: .9rem; white-space: nowrap; text-align: center;
}
.ufo-ha-knopf:hover { background: var(--ufo-blau-dunkel); }
.ufo-ha-knopf-zweit { background: #fff; color: var(--ufo-blau) !important; }
.ufo-ha-knopf-zweit:hover { background: #eff6ff; }
.ufo-ha-knopf-klein { padding: .3rem .7rem; font-size: .8rem; }

.ufo-ha-partner {
  display: inline-block; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
  padding: .1rem .45rem; border-radius: 999px; background: var(--ufo-flaeche); color: #374151; white-space: nowrap;
}
.ufo-ha-p-urlaubsfritzen { background: #fce7f3; color: #9d174d; }
.ufo-ha-p-holidaycheck { background: #e0f2fe; color: #075985; }
.ufo-ha-p-hotelscom { background: #fee2e2; color: #991b1b; }

/* Angebotszeilen */
.ufo-ha-zeilen { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ufo-linie); }
.ufo-ha-zeile {
  display: flex; justify-content: space-between; align-items: center; gap: .75rem;
  padding: .55rem 0; border-bottom: 1px solid var(--ufo-linie); font-size: .85rem;
}
.ufo-ha-zeile-text { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; min-width: 0; }
.ufo-ha-zeile-text strong { font-weight: 600; }
.ufo-ha-zeile-text > span:not(.ufo-ha-partner) { color: var(--ufo-grau); font-size: .78rem; }
.ufo-ha-zeile-aktion { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; flex-shrink: 0; }
.ufo-ha-hinweis { font-style: italic; }
.ufo-ha-preis { font-weight: 600; color: var(--ufo-blau); white-space: nowrap; }

.ufo-ha-fuss { margin-top: auto; padding-top: .5rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.ufo-ha-leer { font-size: .85rem; color: var(--ufo-grau); }

/* Filter (Gruppen-Rahmen und Klappen: uf-filter-* im Theme) */
.ufo-ha-sortierung { display: flex; align-items: center; gap: .6rem; padding: .2rem 0 .8rem; }
.ufo-ha-sortierung label { font-weight: 500; white-space: nowrap; }
.ufo-ha-sortierung select {
  flex: 1; min-width: 0; border: 1px solid #d1d5db; border-radius: .375rem; padding: .35rem .5rem; font-size: .9rem; background: #fff;
}
.ufo-ha-option { display: flex; align-items: center; gap: .5rem; font-size: .92rem; margin: .25rem 0; }
.ufo-ha-option input { accent-color: #2563eb; }
.ufo-ha-anzahl { margin-left: auto; font-size: .75rem; color: #9ca3af; }
.ufo-ha-option-leer { opacity: .45; }
.ufo-ha-monate .uf-filter-inhalt { display: grid; grid-template-columns: 1fr 1fr; column-gap: .9rem; }
.ufo-ha-monate .ufo-ha-option { margin: .1rem 0; }

/* Preisregler: zwei Schieber auf einer Spur */
.ufo-ha-preisregler { margin-top: .7rem; padding-top: .7rem; border-top: 1px dashed #e5e7eb; }
.ufo-ha-preis-titel { font-size: .92rem; margin-bottom: .35rem; }
.ufo-ha-preis-titel small { display: none; color: #9ca3af; font-size: .75rem; }
.ufo-ha-preisregler[data-gesperrt="1"] { opacity: .45; }
.ufo-ha-preisregler[data-gesperrt="1"] .ufo-ha-preis-titel small { display: inline; }
.ufo-ha-preisregler[data-gesperrt="1"] input[type=range]::-webkit-slider-thumb { cursor: not-allowed; }
.ufo-ha-preis-werte { display: flex; justify-content: space-between; font-size: .9rem; font-weight: 600; color: #1f2937; margin-bottom: .4rem; }
.ufo-ha-regler { position: relative; height: 1.6rem; }
.ufo-ha-regler-spur, .ufo-ha-regler-band { position: absolute; top: 50%; height: .35rem; transform: translateY(-50%); border-radius: 999px; }
.ufo-ha-regler-spur { left: 0; right: 0; background: #e5e7eb; }
.ufo-ha-regler-band { background: #2563eb; }
.ufo-ha-regler input[type=range] {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; background: none;
  -webkit-appearance: none; appearance: none; pointer-events: none;
}
.ufo-ha-regler input[type=range]::-webkit-slider-runnable-track { background: none; height: 100%; }
.ufo-ha-regler input[type=range]::-moz-range-track { background: none; }
.ufo-ha-regler input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto; width: 1.25rem; height: 1.25rem; margin-top: .175rem; border-radius: 50%;
  background: #fff; border: 2px solid #2563eb; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); cursor: pointer;
}
.ufo-ha-regler input[type=range]::-moz-range-thumb {
  pointer-events: auto; width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: #fff; border: 2px solid #2563eb; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); cursor: pointer;
}

@media (max-width: 1023px) {
  .ufo-ha-karte { flex-direction: column; }
  .ufo-ha-bild { flex-basis: auto; width: auto; align-self: stretch; margin: 0; }
}
.uf-filter-gruppe[data-gruppe="ufo_preis"] .ufo-ha-preisregler { margin-top: 0; padding-top: .2rem; border-top: 0; }
/* Reisemonat am Deal-Preis: wie die Beschreibung der Karte (text-gray-600 text-sm), nicht fett */
.ufo-ha-monat { font-weight: 400; color: #4b5563; font-size: .875rem; white-space: nowrap; display: inline-block; }
/* Deal-Karten (Theme): Preis und Monat duerfen nur zwischen sich umbrechen,
   der Knopf behaelt seine Breite und bricht nicht um */
.ufo-ha-preiszahl { white-space: nowrap; }
.ufo-ha-preis-mit-monat { white-space: normal; }
.pauschalreise-card .price-container, .last-minute-card .price-container { min-width: 0; }
.pauschalreise-card a.bg-blue-600, .last-minute-card a.bg-blue-600 { flex-shrink: 0; white-space: nowrap; }