.filter-label {
  display: block;
  color: #f5c400;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.filter-label::before {
  content: "▶ ";
  color: #f5c400;
}

.filter-date-group {
  display: flex;
  align-items: stretch;
  width: 220px;
  height: 46px;
  border: 1px solid #f5c400;
  background: #0d0d10;
  position: relative;
  transition: box-shadow 0.25s;
  box-sizing: border-box;
}

.filter-date-group:hover,
.filter-date-group:focus-within {
  box-shadow: 0 0 10px rgb(245, 196, 0);
}

.filter-date-group::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  background: #f5c400;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  z-index: 1;
}

.filter-date-group .btn-cal {
  background: rgba(245, 196, 0, 0.12);
  border: none;
  padding: 0 14px;
  color: #f5c400;
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.filter-date-group .btn-cal:hover {
  background: rgba(245, 196, 0, 0.25);
}

.filter-date-group .btn-cal .icon {
  fill: #f5c400;
  stroke: #f5c400;
}

.filter-date-group #dateRange {
  flex: 1;
  background: transparent !important;
  border: none;
  color: #f5c400 !important;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 0 12px;
  outline: none;
  min-width: 0;
}

.filter-date-group #dateRange::placeholder,
#dateRange::placeholder {
  color: rgba(245, 196, 0, 1) !important;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.filter-date-group .btn-del {
  background: transparent;
  border: none;
  padding: 0 13px;
  color: transparent;
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.filter-date-group:hover .btn-del,
.filter-date-group:focus-within .btn-del {
  color: #e03333;
  background: rgba(180, 30, 30, 0.15);
}

.filter-date-group .btn-del:hover {
  background: rgba(220, 50, 50, 0.3) !important;
}

.filter-date-group .btn-del .icon {
  fill: currentColor;
  stroke: currentColor;
}

.flatpickr-mobile {
  color: #f5c400 !important;
  background: transparent !important;
}

.flatpickr-mobile::placeholder {
  color: rgba(245, 196, 0, 1) !important;
}

.filter-dropdown-wrap {
  width: 220px;
  height: 46px;
  position: relative;
  box-sizing: border-box;
}

.filter-dropdown-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  background: #f5c400;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  z-index: 2;
  pointer-events: none;
}

.filter-dropdown-wrap .btn-kategorie {
  width: 100%;
  height: 100%;
  background: #0d0d10;
  border: 1px solid #f5c400;
  color: rgba(245, 196, 0, 1);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: left;
  padding: 0 18px;
  cursor: pointer;
  transition:
    box-shadow 0.25s,
    color 0.2s;
  display: flex;
  align-items: center;
}

.filter-dropdown-wrap .btn-kategorie:hover,
.filter-dropdown-wrap .btn-kategorie:focus,
.filter-dropdown-wrap .btn-kategorie[aria-expanded="true"] {
  box-shadow: 0 0 10px rgba(245, 196, 0, 1);
  color: #f5c400;
  background: #0d0d10;
  border-color: #f5c400;
  outline: none;
}

.filter-dropdown-wrap .dropdown-menu {
  background: #111116;
  border: 1px solid #f5c400;
  border-radius: 0;
  padding: 4px 0;
  min-width: 100%;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7);
}

.filter-dropdown-wrap .dropdown-menu .dropdown-item {
  color: #aaa;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 9px 18px;
  transition:
    background 0.15s,
    color 0.15s;
  background: transparent;
}

.filter-dropdown-wrap .dropdown-menu .dropdown-item:hover {
  background: rgba(245, 196, 0, 0.12);
  color: #f5c400;
}

.filter-date-group,
.filter-dropdown-wrap {
  width: 240px;
  box-sizing: border-box;
}

.flatpickr-mobile {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: #f5c400 !important;
  background: transparent !important;
}

.header-icon[data-offer-no]::before {
  content: "#" attr(data-offer-no);
}

.card-body {
  display: flex !important;
  flex-direction: column !important;
}

.card-body .card-text {
  flex: 1;
}

.muttizettel-link {
  text-decoration: none !important;
  color: #f5c400 !important;
  font-size: 90%;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.muttizettel-link:hover {
  color: #ffe60a;
  text-decoration: none;
}

.link {
  text-decoration: none !important;
  color: #f5c400 !important;
  font-size: 90%;
  letter-spacing: 0.5px;
}

.link::before {
  content: "→ ";

}

.link:hover {
  color: #fff !important;
  text-decoration: none !important;
}

@media (min-width: 1400px) {
  .bg-buchung .container.main-content { max-width: 1560px; }}

.offers {
  --y: #ffe60a; --y-soft: rgba(255, 230, 10, .08); --muted: #b9b9b9; --cut: 10px;
  display: grid; grid-template-columns: 1fr; gap: 44px; margin: 8px 0 40px;
}
@media (min-width: 1200px) { .offers { grid-template-columns: 1fr 1fr; gap: 48px 40px; } }
.offers > .booking { margin: 0 !important; padding: 0 !important; width: auto; max-width: none; }

.offer {
  --b: 4px; --w: 22px;
  position: relative; display: grid; grid-template-columns: minmax(0, 36%) minmax(0, 1fr);
  height: 100%; background: rgba(9, 9, 12, .9); color: #fff; text-align: left;
  transition: box-shadow .2s;
}
.offer::before {
  content: ""; position: absolute; inset: -10px; pointer-events: none;
  border: var(--b) solid transparent;
  --g: #0000 90deg, var(--y) 0;
  --p: var(--w) var(--w) border-box no-repeat;
  background:
    conic-gradient(from 90deg  at top var(--b) left var(--b), var(--g)) 0 0 / var(--p),
    conic-gradient(from 180deg at top var(--b) right var(--b), var(--g)) 100% 0 / var(--p),
    conic-gradient(from 0deg   at bottom var(--b) left var(--b), var(--g)) 0 100% / var(--p),
    conic-gradient(from -90deg at bottom var(--b) right var(--b), var(--g)) 100% 100% / var(--p);
}
.offer:hover { box-shadow: 0 0 0 1px rgba(255, 230, 10, .25), 0 12px 30px rgba(0, 0, 0, .5); }

.offer-media { position: relative; overflow: hidden; }
.offer-media .offer-img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.offer:hover .offer-media .offer-img { transform: scale(1.04); }
.offer-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px);
}

.offer-body { display: flex; flex-direction: column; min-width: 0; padding: 20px 24px 20px 26px; }
.offer-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.offer-head .offer-nr { margin: 0; top: 0; font-family: 'MAXIMA'; font-size: 2.6rem; line-height: 1; color: var(--y); }
.offer-title {
  margin: 0; font-family: 'MAXIMA'; font-weight: normal; font-size: 1.5rem; line-height: 1.05;
  letter-spacing: 1.5px; text-transform: uppercase; color: #fff;
}

.filter-date-group, .filter-dropdown-wrap .btn-kategorie { border-color: #4a4a52 !important; }
.filter-date-group #dateRange, .filter-dropdown-wrap .btn-kategorie, #kategorieLabel { color: #e6e6ea !important; }
.filter-date-group #dateRange::placeholder, #dateRange::placeholder { color: #b9b9b9 !important; }
.filter-date-group .btn-cal { background: rgba(255, 255, 255, .06); }
.filter-date-group:hover, .filter-date-group:focus-within,
.filter-dropdown-wrap .btn-kategorie:hover, .filter-dropdown-wrap .btn-kategorie:focus,
.filter-dropdown-wrap .btn-kategorie[aria-expanded="true"] { border-color: #ffe60a !important; }

.offers { --red: #c50f26; --red-light: #ff5a67; }
.offer-facts {
  list-style: none; margin: 0 0 14px; padding: 8px 12px;
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  background: rgba(255, 255, 255, .05); border-left: 2px solid #4a4a52; color: #e6e6ea; font-size: 13.5px;
}
.offer-facts li { white-space: nowrap; }
.offer-facts li > span, .offer-facts li > a { display: inline-flex; align-items: center; gap: 7px; }
.offer-facts .icon { width: 18px; height: 18px; flex: 0 0 auto; fill: var(--y); }
.offer-facts .muttizettel-link {
  color: var(--red-light) !important; font-size: inherit; text-decoration: none !important;
  border-bottom: 1px dashed currentColor;
}
.offer-facts .muttizettel-link .icon { fill: var(--red-light); }

.offer-intro { margin: 0 0 8px; }
.offer-list { list-style: none; margin: 0 0 16px; padding: 0 0 0 16px; flex: 1; }
.offer-list > li { position: relative; margin-bottom: 2px; }
.offer-list > li::before { content: "\2022"; position: absolute; left: -16px; color: var(--y); font-weight: bold; }
.offer-list .underbullet { padding-left: 16px; color: var(--muted); }
.offer-list .underbullet li::before { margin-right: 6px; }

.offer-foot {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px;
  margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .12);
}
.offer-price { line-height: 1; }
.offer-price .main, .offer-price .per { display: flex; align-items: baseline; column-gap: 6px; }
.offer-price .ab { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.offer-price .amt { font-family: 'MAXIMA'; font-size: 2.3rem; }
.offer-price .amt small { font-size: .5em; margin-left: 2px; }
.offer-price .unit { font-size: 13px; color: var(--muted); }
.offer-price .per { margin-top: 6px; padding-left: 24px; }
.offer-price .per .amt { font-size: 1.6rem; color: var(--y); }
.offer-price .per .unit { color: var(--y); }
.offer-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-left: auto; max-width: 100%; }.offer-body { container-type: inline-size; }
@container (max-width: 480px) {
  .offer-foot { align-items: center; }
  .offer-cta { width: 100%; margin-left: 0; flex-wrap: nowrap; }
  .offer-cta .hud-btn { flex: 1 1 0; min-width: 0; padding: 0 12px; font-size: 1.05rem; }
}

.hud-btn { min-height: 44px; padding: 0 22px; font-size: 1.15rem; }
.offer-cta:hover { filter: drop-shadow(0 0 8px rgba(255, 230, 10, .55)); }
.hud-btn.is-ghost:hover { background: var(--y); }

@media (max-width: 1199px) { .offer { grid-template-columns: minmax(0, 32%) minmax(0, 1fr); } }

@media (max-width: 767px) {
  .offers { gap: 44px; }
  .offer { grid-template-columns: 1fr; --w: 18px; }
  .offer-media { aspect-ratio: 16 / 7; }
  .offer-body { padding: 16px 16px 18px; }
  .offer-head .offer-nr { font-size: 2.1rem; }
  .offer-title { font-size: 1.3rem; }
  .offer-facts { gap: 6px 16px; font-size: 13px; }
  .offer-foot { align-items: center; }
  .offer-price .amt { font-size: 2rem; }
  .hud-btn { font-size: 1.05rem; padding: 0 14px; }
  .offer-cta { width: 100%; margin-left: 0; }
  .offer-cta .hud-btn { flex: 1 1 0; }
}

.ta-dots { display: none; }
@media (max-width: 991px) {
  .offers { margin-bottom: 96px; }  .ta-dots {
    --cut: 9px; --seg: 26px;
    position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 50;
    transform: translateX(-50%);
    display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 24px);
    padding: 4px 4px 4px 14px; background: #4a4a52; isolation: isolate;
    clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
    transition: opacity .25s, transform .25s;
  }
  .ta-dots::before {
    content: ""; position: absolute; inset: 1px; z-index: -1; background: #09090c;
    clip-path: polygon(calc(var(--cut) - .4px) 0, 100% 0, 100% calc(100% - var(--cut) + .4px), calc(100% - var(--cut) + .4px) 100%, 0 100%, 0 calc(var(--cut) - .4px));
  }
  .ta-dots.is-hidden { opacity: 0; pointer-events: none; transform: translate(-50%, 12px); }
  .ta-dots.is-many { --seg: 22px; }  .ta-dots-count { font-family: 'MAXIMA', 'Arial Narrow', sans-serif; font-size: 1.25rem; line-height: 1; color: #ffe60a; white-space: nowrap; }
  .ta-dots-count small { margin-left: 2px; font-size: .7em; color: #a3a3ab; }
  .ta-dots-bars { display: flex; gap: 0; min-width: 0; }
  .ta-dots-bars button {    width: calc(var(--seg) + 2px); height: 32px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center;
  }
  .ta-dots-bars button::before {
    content: ""; width: var(--seg); height: 5px; background: #3a3a42;
    clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
    transition: background .2s, height .2s;
  }
  .ta-dots-bars button.is-active::before { height: 9px; background: #ffe60a; }
  .ta-dots-next {    width: 32px; height: 32px; padding: 0; border: 0; cursor: pointer;
    background: none; color: #ffe60a; font-size: 1rem; line-height: 1;
  }
  .ta-dots-next i { font-style: normal; display: inline-block; animation: ta-nudge 1.4s ease-in-out infinite; }
  .ta-dots-next:disabled { color: #4a4a52; cursor: default; }
  .ta-dots-next:disabled i { animation: none; }
  .ta-dots button { -webkit-tap-highlight-color: transparent; }
  .ta-dots button:focus { outline: none; }
  .ta-dots-bars button:focus-visible::before { background: #a3a3ab; }
  .ta-dots-next:focus-visible { color: #fff; }
}
@keyframes ta-nudge { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(2px); } }
@media (prefers-reduced-motion: reduce) {
  .ta-dots-next i { animation: none; }
  .hud-btn::after { display: none; }
}