.hl-resort-card {
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #153b31;
  border: 1px solid rgba(21, 59, 49, .12);
  border-radius: 24px;
  background: #fffdf9;
  box-shadow: 0 18px 45px rgba(17, 55, 45, .09);
  transition: transform .25s ease, box-shadow .25s ease;
}

.hl-resort-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 58px rgba(17, 55, 45, .15);
}

.hl-resort-card__visual {
  min-height: 0 !important;
  aspect-ratio: 16 / 10;
  position: relative;
  display: block;
  overflow: hidden;
  background: #dce7df;
}

.hl-resort-card__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 42, 33, .13), transparent 48%, rgba(10, 42, 33, .16));
  pointer-events: none;
}

.hl-resort-card__visual img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: cover;
  transition: transform .55s ease;
}

.hl-resort-card:hover .hl-resort-card__visual img { transform: scale(1.025); }

.hl-resort-card__selection,
.hl-resort-card__opening {
  min-height: 31px;
  padding: 0 12px;
  position: absolute;
  z-index: 2;
  left: 16px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-family: "Mulish", Arial, sans-serif;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.hl-resort-card__selection { top: 15px; color: #8a3e26; background: #f3ddcf; }
.hl-resort-card__opening {
  bottom: 15px;
  max-width: calc(100% - 32px);
  padding: 7px 12px;
  color: #fff;
  background: #b44d2b;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: .025em;
  white-space: normal;
  overflow-wrap: break-word;
}

.hl-resort-card .hl-resort-card__favorite {
  width: 44px;
  height: 44px;
  padding: 0;
  position: absolute;
  z-index: 4;
  top: 15px;
  right: 15px;
  display: grid;
  place-items: center;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .64);
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255,255,255,.28), rgba(255,255,255,.08));
  -webkit-backdrop-filter: blur(12px) saturate(145%);
  backdrop-filter: blur(12px) saturate(145%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.5), 0 3px 12px rgba(12,39,32,.16);
  cursor: pointer;
}
.hl-resort-card .hl-resort-card__favorite [data-favorite-icon] { display: none; }
.hl-resort-card .hl-resort-card__favorite svg {
  display: block;
  width: 24px;
  height: 24px;
  fill: transparent;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 2px rgba(9,35,28,.65));
}
.hl-resort-card .hl-resort-card__favorite[aria-pressed="true"] {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(25,78,62,.65), rgba(25,78,62,.3));
  border-color: rgba(255,255,255,.8);
}
.hl-resort-card .hl-resort-card__favorite[aria-pressed="true"] svg { fill: currentColor; }
.hl-resort-card .hl-resort-card__favorite:focus-visible { outline: 3px solid #edaa7c; outline-offset: 3px; }
@media (forced-colors: active) {
  .hl-resort-card .hl-resort-card__favorite { background: ButtonFace; color: ButtonText !important; border-color: ButtonText; }
}

.hl-resort-card__compare {
  min-height: 36px;
  padding: 7px 12px;
  position: absolute;
  z-index: 4;
  top: 66px;
  right: 15px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #153b31;
  background: rgba(255, 253, 249, .96);
  border: 1px solid rgba(21, 59, 49, .13);
  border-radius: 999px;
  box-shadow: 0 7px 20px rgba(12, 39, 32, .12);
  cursor: pointer;
}
.hl-resort-card__compare span {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  flex: 0 0 20px;
  border: 1px solid rgba(21, 59, 49, .22);
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
}
.hl-resort-card__compare b { font-size: 9px; font-weight: 900; letter-spacing: .045em; }
.hl-resort-card__compare.is-selected { color: #fff; background: #164b3d; border-color: #164b3d; }
.hl-resort-card__compare.is-selected span { border-color: rgba(255, 255, 255, .5); }

.hl-resort-card__body {
  min-height: 0 !important;
  padding: 18px 20px 20px !important;
  display: flex !important;
  flex: 1;
  flex-direction: column !important;
  background: #fffdf9 !important;
}

.hl-resort-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #64766f;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
  line-height: 1.35;
  text-transform: uppercase;
}

.hl-resort-card__stars {
  flex: 0 0 auto;
  color: #cf683f;
  font-family: Arial, sans-serif;
  font-size: 14px;
  letter-spacing: .05em;
  white-space: nowrap;
}

.hl-resort-card__luxury {
  margin: 16px 0 0;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #153b31;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.hl-resort-card__luxury i { width: 10px; height: 10px; display: block; border: 3px solid #eef7dc; border-radius: 50%; background: #98bf86; box-sizing: content-box; }
.hl-resort-card__luxury.level-soft i { background: #d88759; }
.hl-resort-card__luxury.level-super i { background: #153b31; }

.hl-resort-card h3 {
  min-height: 0 !important;
  margin: 10px 0 0 !important;
  font-family: "Tenor Sans", Georgia, serif !important;
  font-size: clamp(26px, 2vw, 34px) !important;
  font-weight: 400 !important;
  line-height: 1.08 !important;
  letter-spacing: -.025em !important;
}

.hl-resort-card h3 a { color: inherit; text-decoration: none; }

.hl-resort-card__description {
  min-height: 0 !important;
  margin: 12px 0 0 !important;
  display: -webkit-box;
  overflow: hidden;
  color: #687a73 !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.hl-resort-card__tags {
  margin: 15px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.hl-resort-card__tags span {
  padding: 6px 9px;
  color: #31594c;
  border-radius: 999px;
  background: #eaf1e5;
  font-size: 8px;
  font-weight: 800;
}

.hl-resort-card__fact {
  margin-top: auto;
  padding: 11px 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  color: #153b31;
  border-top: 1px solid #dfe6df;
  border-bottom: 1px solid #dfe6df;
  font-size: 10px;
}

.hl-resort-card__fact span { color: #7a8983; font-weight: 700; }
.hl-resort-card__fact strong { text-align: right; }

.hl-resort-card__price { margin-top: 14px; }
.hl-resort-card__price > small { display: block; color: #46645a; font-size: 8px; font-weight: 900; letter-spacing: .08em; line-height: 1.4; text-transform: uppercase; }
.hl-resort-card__price-value strong,
.hl-resort-card__price-empty strong { margin-top: 5px; display: block; color: #153b31; }
.hl-resort-card__price-value strong { font-family: "Tenor Sans", Georgia, serif; font-size: 27px; font-weight: 400; line-height: 1.05; }
.hl-resort-card__price-value span,
.hl-resort-card__price-empty span,
.hl-resort-card__price em { margin-top: 4px; display: block; color: #7b8984; font-size: 9px; font-style: normal; line-height: 1.4; }
.hl-resort-card__price-empty strong { font-size: 12px; }
.hl-resort-card__price-value .hl-resort-card__transfer-alternative { margin-block: 8px; color: #153b31; font-size: 12px; line-height: 1.4; }

.hl-resort-card__cta {
  min-height: 45px;
  margin-top: 15px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #fff;
  border-radius: 999px;
  background: #1d4d40;
  font-size: 11px;
  font-weight: 900;
  text-decoration: none;
}

.hl-resort-card__cta span { color: #efa17a; font-size: 18px; }

.resort-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 18px !important; }
.resort-grid--legacy { display: none !important; }
.portfolio-layout .hotel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px !important; }
.destination-panel .hotel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 18px !important; }

/*
 * Verbindliche Listenansicht fuer Hotelkarten:
 * Auch Gruppen mit nur einem Hotel bleiben kompakte Querkarten. Bild, Merken-
 * und Vergleichsschalter teilen sich dieselbe Rasterflaeche, damit die
 * Schalter nie ueber Sterne oder Inhalt rutschen.
 */

.hl-favorites-dialog { width: min(1080px, calc(100% - 30px)) !important; }
.hl-favorites-list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.hl-favorites-list .hl-resort-card { height: 100%; }
.hl-favorite-card.hl-resort-card { padding: 0; gap: 0; align-items: stretch; }

@media (max-width: 1400px) {
  .destination-panel .hotel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 1050px) {
  .resort-grid,
  .portfolio-layout .hotel-grid,
  .destination-panel .hotel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .hl-favorites-list { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .hl-resort-card__visual { aspect-ratio: 4 / 3; }
  .hl-resort-card__body { padding: 17px !important; }
  .hl-resort-card h3 { font-size: 28px !important; }
  .hl-resort-card__compare { top: 65px; max-width: calc(100% - 30px); }
}

/* Shared retry action for a temporary per-hotel live-price failure. */
[data-live-price-retry] { min-height: 44px; margin-top: 10px; padding: 9px 15px; border: 1px solid #49695e; border-radius: 999px; background: #f8f6ef; color: #173d32; font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.3; cursor: pointer; }
[data-live-price-retry]:hover { background: #e6eddf; }
[data-live-price-retry]:focus-visible { outline: 3px solid #cf7649; outline-offset: 3px; }