.ua-zusatz { position: relative; }
.ua-zusatz.ist-offen { border-color: #fabe0c !important; }
.ua-zusatz.ist-gesetzt .ua-zusatz__wert { color: #1f2a2d; font-weight: 700; }
.ua-zusatz:focus-visible { outline: 2px solid #2f4449; outline-offset: -2px; }


.ua-qs-search-field.ua-zusatz .ua-qs-search-icon svg { fill: none !important; stroke: currentColor; }

.ua-zusatz__pop {
	position: absolute;
	z-index: 100000;
	width: max-content;
	max-width: min(380px, calc(100vw - 32px));
	padding: 14px 16px 16px;
	border: 1px solid #e5e7eb;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 18px 40px rgba(31, 42, 45, .18);
	color: #1f2a2d;
	font-family: inherit;
	text-align: left;
}
.ua-zusatz__pop[hidden] { display: none; }
.ua-zusatz__titel {
	margin: 0 0 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #5b7479;
}
.ua-zusatz__reihe { display: flex; flex-wrap: wrap; gap: 8px; }
.ua-zusatz__chip {
	min-height: 38px;
	padding: 0 14px;
	border: 1px solid #cfd5da;
	border-radius: 999px;
	background: #fff;
	color: #1f2a2d;
	font: inherit;
	font-size: 14px;
	cursor: pointer;
	white-space: nowrap;
}
.ua-zusatz__chip:hover { border-color: #2f4449; }
.ua-zusatz__chip.ist-aktiv { border-color: #2f4449; background: #2f4449; color: #fff; font-weight: 700; }





@media (min-width: 769px) {
	
	.ua-qs-modal-trigger .hat-zusatz.hat-zusatz.hat-zusatz > .ua-qs-search-field { flex: 1 1 0 !important; min-width: 0 !important; }
	.ua-qs-modal-trigger .hat-zusatz.hat-zusatz.hat-zusatz > .ua-qs-search-field[data-modal-step="destination"] { flex-grow: 1.7 !important; }
	.ua-qs-modal-trigger .hat-zusatz.hat-zusatz.hat-zusatz > .ua-qs-search-field[data-modal-step="departure"] { flex-grow: 1.25 !important; }
	.ua-qs-modal-trigger .hat-zusatz.hat-zusatz.hat-zusatz > .ua-qs-search-field[data-modal-step="dates"] { flex-grow: 1.35 !important; }
	.ua-qs-modal-trigger .hat-zusatz.hat-zusatz.hat-zusatz > .ua-qs-search-field[data-modal-step="duration"] { flex-grow: .8 !important; }

	
	.ua-qs-modal-trigger .hat-zusatz.hat-zusatz.hat-zusatz > .ua-hotel-field { flex: 1 1 0 !important; min-width: 0 !important; }
	.ua-qs-modal-trigger .hat-zusatz.hat-zusatz.hat-zusatz > .ua-hotel-field[data-hotel-step="destination"] { flex-grow: 2 !important; }
	.ua-qs-modal-trigger .hat-zusatz.hat-zusatz.hat-zusatz > .ua-hotel-field[data-hotel-step="dates"] { flex-grow: 1.4 !important; }
	.ua-qs-modal-trigger .hat-zusatz.hat-zusatz.hat-zusatz > .ua-hotel-field[data-hotel-step="duration"] { flex-grow: .8 !important; }

	.ua-qs-modal-trigger .hat-zusatz.hat-zusatz.hat-zusatz > .ua-zusatz--vp { flex-grow: 1 !important; }
	.ua-qs-modal-trigger .hat-zusatz.hat-zusatz.hat-zusatz > .ua-zusatz--we { flex-grow: .8 !important; }

	.ua-qs-modal-trigger .hat-zusatz.hat-zusatz.hat-zusatz .ua-qs-search-value,
	.ua-qs-modal-trigger .hat-zusatz.hat-zusatz.hat-zusatz .ua-hotel-value,
	.ua-qs-modal-trigger .hat-zusatz.hat-zusatz.hat-zusatz .ua-qs-search-label,
	.ua-qs-modal-trigger .hat-zusatz.hat-zusatz.hat-zusatz .ua-hotel-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}


@media (min-width: 1100px) {
	.ua-qs-modal-trigger .hat-zusatz.hat-zusatz.hat-zusatz { flex-wrap: nowrap !important; }
	.ua-qs-modal-trigger .hat-zusatz.hat-zusatz.hat-zusatz > .ua-qs-search-field { padding-left: 12px !important; padding-right: 10px !important; gap: 10px !important; }
}


@media (min-width: 769px) and (max-width: 1099px) {
	.ua-qs-modal-trigger .hat-zusatz.hat-zusatz.hat-zusatz { flex-wrap: wrap !important; row-gap: 6px !important; }
	.ua-qs-modal-trigger .hat-zusatz.hat-zusatz.hat-zusatz > .ua-qs-search-field[data-modal-step="destination"],
	.ua-qs-modal-trigger .hat-zusatz.hat-zusatz.hat-zusatz > .ua-qs-search-field[data-modal-step="departure"],
	.ua-qs-modal-trigger .hat-zusatz.hat-zusatz.hat-zusatz > .ua-qs-search-field[data-modal-step="dates"] { flex: 1 1 30% !important; }
	.ua-qs-modal-trigger .hat-zusatz.hat-zusatz.hat-zusatz > .ua-hotel-field[data-hotel-step="destination"],
	.ua-qs-modal-trigger .hat-zusatz.hat-zusatz.hat-zusatz > .ua-hotel-field[data-hotel-step="dates"] { flex: 1 1 45% !important; }
	.ua-qs-modal-trigger .hat-zusatz.hat-zusatz.hat-zusatz > .ua-qs-search-field[data-modal-step="duration"],
	.ua-qs-modal-trigger .hat-zusatz.hat-zusatz.hat-zusatz > .ua-hotel-field[data-hotel-step="duration"],
	.ua-qs-modal-trigger .hat-zusatz.hat-zusatz.hat-zusatz > .ua-zusatz { flex: 1 1 25% !important; }
	.ua-qs-modal-trigger .hat-zusatz.hat-zusatz.hat-zusatz > .ua-qs-search-field { border-bottom: 0 !important; }
}