/* ===================================================
           holiday-counter.de · TBE Brand Override
           Primärfarbe: #008BCF  Dunkel: #00699e  Hell: #e8f4fb
           Fix 4: #tbe-container Spezifität statt !important
           !important nur wo Angular inline-styles setzt
           =================================================== */

/* --- Buttons (Angular setzt inline bg → !important nötig) --- */
#tbe-container .tbe-primary-button {
   background-color: #008BCF !important;
   border-radius: 0;
   white-space: nowrap !important;
}

#tbe-container .tbe-primary-button:hover {
   background-color: #00699e !important;
}

#tbe-container .tbe-primary-button[disabled] {
   background-color: rgba(0, 139, 207, 0.55) !important;
}

/* --- Hotel-Karte: Rahmen & Header --- */
#tbe-container .tbe-hotel {
   border-color: #008BCF;
   border-radius: 0;
   overflow: hidden;
}

#tbe-container .tbe-hotel__header {
   color: #008BCF;
}

#tbe-container .tbe-hotel__favorite a {
   color: #008BCF;
}

/* --- Suchergebnis-Alternativzeile & Suche-Hintergrund --- */
#tbe-container .tbe-hotel--alternative {
   background-color: #e8f4fb;
}

#tbe-container .tbe-result-modifier {
   background: #e8f4fb;
}

#tbe-container .tbe-loadmore {
   background: #e8f4fb;
}

#tbe-container .tbe-notepad__link {
   background-color: #e8f4fb;
}

#tbe-container .tbe-switch__tab {
   background: #e8f4fb;
   color: #333;
}

/* --- Such-Tabs (Angular toggled active inline → !important) --- */
#tbe-container .tbe-switch__tabs {
   border-bottom-color: #008BCF;
}

#tbe-container .tbe-switch__tab.active {
   background-color: #008BCF !important;
   color: #fff !important;
}

/* --- Links --- */
#tbe-container tbe a {
   color: #008BCF;
}

#tbe-container .tbe-hotel-info__region {
   color: #008BCF;
}

#tbe-container .tbe-bookingaddon-headline__neutral {
   color: #008BCF;
}

/* --- Preisanzeige --- */
#tbe-container .tbe-offer-pricelist__price {
   color: #008BCF;
}

#tbe-container .tbe-pricematrix__price {
   color: #008BCF;
}

#tbe-container .tbe-offer>p:not(.tbe-primary-button *) {
   color: #008BCF;
}

#tbe-container .tbe-offer {
   border-color: #008BCF;
}

/* --- Preismatrix-Balken --- */
#tbe-container .tbe-pricematrix__bar--filled {
   background-color: #008BCF;
   border-color: #008BCF;
}

#tbe-container .tbe-pricematrix__entry__container:hover .tbe-pricematrix__bar--filled {
   background-color: #e8f4fb;
   border-left: 1px solid #008BCF;
   border-right: 1px solid #008BCF;
   border-top: 1px solid #008BCF;
}

#tbe-container .tbe-pricematrix__bar--selected {
   background-color: #e8f4fb;
}

#tbe-container .tbe-pricematrix__lane {
   border-top-color: #008BCF;
}

#tbe-container .tbe-pricematrix__entry--first-in-filter-range {
   border-left: 1.8px solid #008BCF;
}

#tbe-container .tbe-pricematrix__entry--last-in-filter-range {
   border-right: 1.8px solid #008BCF;
}

#tbe-container .tbe-pricematrix__entry--in-filter-range {
   background-color: #e8f4fb;
}

/* --- Angebotsliste: Dauer-Label = Orange, Spalten = Blau --- */
#tbe-container .tbe-offer-collabel__duration {
   color: #E86820;
}

#tbe-container .tbe-offer__dates,
#tbe-container .tbe-offer__services,
#tbe-container .tbe-offer__airports,
#tbe-container .tbe-offer__operator,
#tbe-container .tbe-offer__check {
   color: #008BCF;
}

#tbe-container .tbe-offer__dates *,
#tbe-container .tbe-offer__services *,
#tbe-container .tbe-offer__airports *,
#tbe-container .tbe-offer__operator *,
#tbe-container .tbe-offer__check * {
   color: #008BCF;
}

/* --- Regionen-Tabelle Header --- */
#tbe-container .tbe-regions__row--head {
   background: #008BCF;
}

/* --- Regionen-Tabelle: "Beliebteste Reiseziele"-Zeile Text = Orange --- */
#tbe-container .tbe-regions__list>div:first-child {
   color: #E86820;
}

/* --- Regionen-Tabelle Icons --- */
#tbe-container .tbe-regions__col .fa-plane,
#tbe-container .tbe-regions__row .fa-plane {
   color: #E86820;
}

#tbe-container .tbe-regions__col .fa-sun,
#tbe-container .tbe-regions__row .fa-sun {
   color: #ffda44;
}

#tbe-container .tbe-regions__col .fa-water,
#tbe-container .tbe-regions__row .fa-water {
   color: #008BCF;
}

/* --- Ladeanimation --- */
#tbe-container .tbe-loading {
   color: #008BCF;
}

#tbe-container .tbe-hib__loading {
   color: #008BCF;
}

#tbe-container .tbe-hib__close {
   color: #008BCF;
}

/* --- Buchungsformular: Abschnitts-Überschriften --- */
#tbe-container .tbe-book-checkout h3,
#tbe-container .tbe-travelinfo h3,
#tbe-container .tbe-operatorinfo h3,
#tbe-container .tbe-book-registration h3,
#tbe-container .tbe-book-travellers>h3,
#tbe-container .tbe-book-legalform>h3,
#tbe-container .tbe-book-insurance__header h3,
#tbe-container .tbe-book-payment__text h3,
#tbe-container .tbe-book-annotation>h3,
#tbe-container .tbe-book-requestinfo__content h3,
#tbe-container .tbe-modal__header h3 {
   color: #008BCF;
}

/* --- Flugdetails & In-House-Booking Überschriften --- */
#tbe-container .tbe-flight-detail__col--headline,
#tbe-container .tbe-flightinfo__col--headline {
   color: #008BCF;
}

/* --- Hotel-Info-Detailseite (HIB) --- */
#tbe-container .tbe-hib .mat-mdc-tab {
   background: #008BCF;
}

#tbe-container .tbe-hib .mat-mdc-tab.mdc-tab--active,
#tbe-container .tbe-hib .mat-mdc-tab.mdc-tab--active:hover {
   background: white;
}

#tbe-container .mat-tab-label {
   background-color: #008BCF;
}

#tbe-container .mat-tab-label-active {
   background-color: white;
   color: black;
}

#tbe-container .hib-navigation-item__link {
   color: #008BCF;
}

#tbe-container .hib-navigation-itemActive {
   border-bottom-color: #008BCF;
   background-color: #e8f4fb;
}

#tbe-container .hib-description__title {
   color: #008BCF;
}

/* --- Datepicker (Angular Material setzt inline → !important nötig) --- */
#tbe-container .tbe-timespan-component__popup .tbe-return-date-component mat-calendar::before,
#tbe-container .tbe-timespan-component__popup .tbe-outbound-date-component mat-calendar::before {
   border-bottom-color: #008BCF !important;
}

#tbe-container .tbe-timespan-component__popup .tbe-return-date-component mat-calendar .mat-calendar-header:before,
#tbe-container .tbe-timespan-component__popup .tbe-outbound-date-component mat-calendar .mat-calendar-header:before {
   background: #008BCF !important;
   border-color: #008BCF !important;
}

#tbe-container .tbe-timespan-component__popup .tbe-outbound-date-component .mat-calendar-body-returnDate {
   background-color: #008BCF !important;
   color: #fff !important;
}

#tbe-container .tbe-timespan-component__popup .tbe-return-date-component .mat-calendar-body-selected {
   background-color: #008BCF !important;
   color: #fff !important;
}

#tbe-container .tbe-timespan-component__popup .tbe-return-date-component .mat-calendar-body-outboundDate,
#tbe-container .tbe-timespan-component__popup .tbe-outbound-date-component .mat-calendar-body-selected {
   background-color: #e8f4fb !important;
   color: #333 !important;
}

#tbe-container .mat-calendar-body-timespan {
   border-bottom-color: #008BCF !important;
}

/* --- Tooltip-Rahmen --- */
#tbe-container .tbe-tooltip__overlay {
   border-color: #008BCF;
}

#tbe-container .tbe-tooltip__positive {
   color: #008411;
}

/* --- Versicherungsauswahl (Radio pseudo → !important nötig) --- */
#tbe-container .tbe-book-insurance__offer--list {
   border-color: #008BCF;
}

#tbe-container .tbe-book-insurance input[type="radio"]:checked+span::before {
   background: #008BCF !important;
   box-shadow: inset 0 0 0 0.1rem #008BCF, inset 0 0 0 0.25rem white !important;
}

/* --- Autosuggest Kategorien (CDK-Overlay liegt AUSSERHALB #tbe-container → !important) --- */
.cdk-overlay-container .tbe-input-autosuggest__category .mat-mdc-optgroup-label {
   color: #008BCF !important;
}

.cdk-overlay-container .tbe-input-autosuggest__category .mat-mdc-optgroup-label::before {
   color: #008BCF !important;
}

/* --- Bestätigungsseite --- */
#tbe-container .tbe-confirmpage__info {
   color: #008BCF;
}

#tbe-container .tbe-bookingaddon-headline {
   color: #008BCF;
}

#tbe-container .tbe-addon__success p {
   color: #008BCF;
}

/* --- "Unser Tipp"-Badge --- */
#tbe-container .tbe-hotel-tophotel .tbe-hotel__images::before {
   background-color: #008BCF;
}

/* --- Schrift: System-UI --- */
#tbe-container tbe,
#tbe-container .tbe-container,
#tbe-container .tbe-hib {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --- Button-Text immer weiß (Angular inline → !important) --- */
#tbe-container .tbe-primary-button,
#tbe-container .tbe-primary-button *,
#tbe-container .tbe-primary-button .mat-button-wrapper,
#tbe-container .tbe-primary-button .mdc-button__label {
   color: #fff !important;
}

/* --- noUiSlider (setzt inline styles → !important) --- */
#tbe-container nouislider .noUi-connect,
#tbe-container .noUi-connect {
   background: #008BCF !important;
}

#tbe-container nouislider .noUi-handle,
#tbe-container .noUi-handle {
   border-color: #008BCF !important;
}

#tbe-container .noUi-handle:after,
#tbe-container .noUi-handle:before {
   background: #008BCF !important;
}

/* --- Preis-Slider (Angular Material MDC setzt CSS vars inline → !important) --- */
#tbe-container .mat-mdc-slider {
   --mdc-slider-active-track-color: #008BCF !important;
   --mdc-slider-handle-color: #008BCF !important;
   --mdc-slider-focus-handle-color: #008BCF !important;
   --mdc-slider-hover-handle-color: #008BCF !important;
   --mat-mdc-slider-ripple-color: rgba(0, 139, 207, .2) !important;
}

#tbe-container .mat-slider-track-fill,
#tbe-container .mat-slider-thumb,
#tbe-container .mat-slider-thumb-label {
   background-color: #008BCF !important;
}

#tbe-container .mat-mdc-slider .mdc-slider__track--active_fill {
   background-color: #008BCF !important;
   border-top-color: #008BCF !important;
}

#tbe-container .mat-mdc-slider .mdc-slider__thumb-knob {
   background-color: #008BCF !important;
   border-color: #008BCF !important;
}

#tbe-container .mat-mdc-slider .mdc-slider__track--active {
   background-color: #008BCF !important;
}

#tbe-container .mat-accent .mat-slider-track-fill,
#tbe-container .mat-accent .mat-slider-thumb {
   background-color: #008BCF !important;
}

/* --- Hotelinfos / Lage Links = Markenblau + Hover Orange --- */
#tbe-container .tbe-hotel-info__link,
#tbe-container .tbe-hib-link,
#tbe-container .tbe-hotel__links a,
#tbe-container .tbe-hotel-info a,
#tbe-container .tbe-hotel-info__details a,
#tbe-container .tbe-hotel__info-link,
#tbe-container .tbe-hotel__more-info a,
#tbe-container .tbe-hotel__location a,
#tbe-container tbe .tbe-hotel a:not(.tbe-primary-button):not([class*="mat-"]) {
   color: #008BCF;
}

#tbe-container .tbe-hotel-info__link:hover,
#tbe-container .tbe-hib-link:hover,
#tbe-container .tbe-hotel__links a:hover,
#tbe-container .tbe-hotel-info a:hover,
#tbe-container .tbe-hotel-info__details a:hover,
#tbe-container .tbe-hotel__info-link:hover,
#tbe-container .tbe-hotel__more-info a:hover,
#tbe-container .tbe-hotel__location a:hover,
#tbe-container tbe .tbe-hotel a:not(.tbe-primary-button):not([class*="mat-"]):hover {
   color: #E86820;
   text-decoration: underline;
}

/* --- Hotelinfos / Lage Spans direkt = Markenblau + Hover Orange --- */
#tbe-container .tbe-hotel-info__links--info,
#tbe-container .tbe-hotel-info__links--location {
   color: #008BCF;
   cursor: pointer;
}

#tbe-container .tbe-hotel-info__links--info:hover,
#tbe-container .tbe-hotel-info__links--location:hover {
   color: #E86820;
}

#tbe-container .tbe-hotel-info__links--info i,
#tbe-container .tbe-hotel-info__links--location i {
   color: #008BCF;
}

#tbe-container .tbe-hotel-info__links--info:hover i,
#tbe-container .tbe-hotel-info__links--location:hover i {
   color: #E86820;
}

/* --- Ausstattungs-Block komplett = Orange --- */
#tbe-container .tbe-hotel-info__attributes,
#tbe-container .tbe-hotel-info__attribute,
#tbe-container .tbe-hotel-info__attributes * {
   color: #E86820;
}

#tbe-container .tbe-hotel-info__attributes:hover,
#tbe-container .tbe-hotel-info__attribute:hover,
#tbe-container .tbe-hotel-info__attributes *:hover {
   color: #E86820;
   text-decoration: none;
}

/* --- Mealplan-Text kleiner --- */
#tbe-container .tbe-hotel-info__mealplan {
   font-size: 0.8em;
}

/* --- Buchungsstrecke Pfeile / Separatoren = Orange --- */
#tbe-container .tbe-process-bar__separator,
#tbe-container .tbe-form__step-separator,
#tbe-container .tbe-steps__separator,
#tbe-container .tbe-booking-steps__separator,
#tbe-container .tbe-process__separator {
   color: #E86820;
}

#tbe-container .tbe-process-bar__step:not(:last-child)::after,
#tbe-container .tbe-form__step:not(:last-child)::after {
   color: #E86820;
   border-color: #E86820;
}

#tbe-container .tbe-form__step-link::after,
#tbe-container .tbe-process-bar__arrow {
   color: #E86820;
}

/* --- Hotel-Sterne = Orange --- */
#tbe-container .tbe-hotel__stars,
#tbe-container .tbe-stars,
#tbe-container .tbe-hotel-stars,
#tbe-container .tbe-stars__star,
#tbe-container .tbe-star,
#tbe-container .tbe-hotel__category-star,
#tbe-container .tbe-hotel-category__icon {
   color: #E86820;
   fill: #E86820;
}

#tbe-container .tbe-hotel__category .tbe-category-dot,
#tbe-container .tbe-hotel__category-dot {
   background: #E86820;
}

/* --- Merken / Favorit / Herz = Orange --- */
#tbe-container .tbe-hotel__favorite,
#tbe-container .tbe-hotel__favorite a,
#tbe-container .tbe-hotel__favorite-button,
#tbe-container .tbe-notepad__link,
#tbe-container .tbe-hotel__notepad,
#tbe-container .tbe-hotel__notepad a {
   color: #E86820;
}

#tbe-container .tbe-hotel__favorite:hover,
#tbe-container .tbe-hotel__favorite a:hover,
#tbe-container .tbe-hotel__notepad a:hover {
   color: #c85a10;
}

/* --- Bewertungs-Daumen = Orange --- */
#tbe-container .tbe-hotel__rating-recommend,
#tbe-container .tbe-hotel-rating__thumb,
#tbe-container .tbe-recommend-icon,
#tbe-container .tbe-hotel__recommend,
#tbe-container .tbe-hotel-rating__recommend {
   color: #E86820;
   fill: #E86820;
}

#tbe-container .tbe-hotel__rating mat-icon,
#tbe-container .tbe-hotel__rating .material-icons,
#tbe-container .tbe-hotel__rating svg,
#tbe-container .tbe-hotel-rating mat-icon,
#tbe-container .tbe-hotel__rating-tag mat-icon,
#tbe-container .tbe-hotel-card__rating mat-icon {
   color: #E86820;
}

#tbe-container .tbe-hotel__rating mat-icon svg path,
#tbe-container .tbe-hotel__rating svg path {
   fill: #E86820;
}

#tbe-container .tbe-hotel__rating mat-icon {
   filter: invert(44%) sepia(52%) saturate(1271%) hue-rotate(7deg) brightness(99%) contrast(86%);
}

#tbe-container .tbe-hotel__rating img,
#tbe-container .tbe-hotel-rating__icon img {
   filter: sepia(1) saturate(6) hue-rotate(-20deg) brightness(0.9);
}

/* --- Besondere Vorlieben (Lifestyle-Kacheln) Hover (Angular setzt inline → !important) --- */
#tbe-container [class*="lifestyle"]:hover,
#tbe-container [class*="preference"]:hover,
#tbe-container .tbe-search-attr:hover,
#tbe-container .tbe-lifestyle-filter__item:hover,
#tbe-container .tbe-attribute-filter__item:hover,
#tbe-container .tbe-hotel-attribute:hover,
#tbe-container .tbe-search-filter__chip:hover {
   background-color: #008BCF !important;
   border-color: #008BCF !important;
   color: #fff !important;
}

#tbe-container [class*="lifestyle"].active,
#tbe-container [class*="preference"].active,
#tbe-container [class*="attribute"].active,
#tbe-container .tbe-search-attr.active,
#tbe-container .tbe-attribute-filter__item.active {
   background-color: #008BCF !important;
   border-color: #008BCF !important;
   color: #fff !important;
}

/* --- Hover-Akzente Orange --- */
#tbe-container .tbe-switch__tab:hover {
   color: #E86820;
   background: #fff7f0;
}

#tbe-container tbe a:hover,
#tbe-container .tbe-hotel__header a:hover {
   color: #E86820;
}

#tbe-container .tbe-hotel__favorite a:hover,
#tbe-container .tbe-hotel-info__region:hover {
   color: #E86820;
}

#tbe-container .tbe-primary-button:hover {
   background-color: #E86820 !important;
   border-color: #E86820 !important;
}

/* --- Hotelkategorie pmslider: aktive Sterne/Punkte = Markenblau --- */
#tbe-container .tbe-input-pmslider__value--active i.fas,
#tbe-container .tbe-input-pmslider__value--hover i.fas {
   color: #008BCF;
}

#tbe-container .tbe-input-pmslider__value--active,
#tbe-container .tbe-input-pmslider__value--hover {
   color: #008BCF;
}

#tbe-container .tbe-input-pmslider__value--active i,
#tbe-container .tbe-input-pmslider__value--active .fa {
   color: #008BCF;
}

/* --- Suchbox-Labels = Markenblau --- */
#tbe-container .tbe-input-label,
#tbe-container p.tbe-input-label {
   color: #008BCF;
   font-weight: 600;
}

/* --- Bewertungs-Daumen-Icons = Orange --- */
#tbe-container .tbe-rating-visual {
   position: relative;
}

#tbe-container .tbe-rating-visual__icon,
#tbe-container .tbe-rating-visual mat-icon,
#tbe-container .tbe-hotel__rating-visual mat-icon,
#tbe-container .tbe-rating-visual i,
#tbe-container .tbe-rating-visual .fa,
#tbe-container .tbe-rating-visual .material-icons {
   color: #E86820;
}

/* --- Bild-Ecken abrunden --- */
#tbe-container .tbe-hotel__images img,
#tbe-container .tbe-hotel-image img,
#tbe-container .tbe-hotel__image img {
   border-radius: 0;
}

#tbe-container .tbe-hotel__images,
#tbe-container .tbe-hotel-image,
#tbe-container .tbe-hotel__image-wrap {
   border-radius: 0;
   overflow: hidden;
}

/* --- Such-Tabs: Container volle Breite (Angular layout → !important für display/flex) --- */
#tbe-container .tbe-searchbox searchbox-switch,
#tbe-container .tbe-searchbox .tbe-switch {
   background-color: #008BCF;
   display: block !important;
   width: 100% !important;
}

#tbe-container .tbe-searchbox .tbe-switch__tabs {
   display: flex !important;
   width: 100% !important;
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   padding-left: 0;
   list-style: none;
   background-color: #008BCF;
}

#tbe-container .tbe-searchbox .tbe-switch__tab {
   flex: 1 1 auto !important;
   box-sizing: border-box;
   margin: 0;
   border-right: 0;
}

#tbe-container .tbe-searchbox .tbe-switch__tab.active {
   background-color: #008BCF !important;
   color: #fff !important;
}

/* --- Zusätzliche Suchoptionen (Günstig stornieren / Günstig umbuchen) — als Chip wie Direktflug --- */
#tbe-container .tbe-additionals-component label {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   margin: 4px 4px 4px 0;
   padding: 5px 12px;
   border: 1px solid #008BCF;
   border-radius: 0;
   color: #008BCF !important;
   font-weight: 600;
   font-size: 0.88em;
   cursor: pointer;
   transition: background-color 0.15s, color 0.15s;
}

#tbe-container .tbe-additionals-component label:hover {
   background-color: #008BCF !important;
   border-color: #008BCF !important;
   color: #fff !important;
}

#tbe-container .tbe-additionals-component label:has(input:checked) {
   background-color: #008BCF !important;
   border-color: #008BCF !important;
   color: #fff !important;
}

/* --- Kreis-Loader in Widget bereits passend (#008BCF) --- */
@keyframes spin {
   to {
      transform: rotate(360deg)
   }
}