/* ==========================================================================
   1. BACKGROUNDS (Hintergründe)
   ========================================================================== */
.bg-white:not(.no-css-changes),
.sm\:bg-white:not(.no-css-changes) {
	background-color: #000 !important;
}

.bg-white\/90:not(.no-css-changes) {
	background-color: rgba(0, 0, 0, 0.9) !important;
}

.bg-white\/80:not(.no-css-changes) {
	background-color: rgba(0, 0, 0, 0.8) !important;
}

.bg-white\/70:not(.no-css-changes) {
	background-color: rgba(0, 0, 0, 0.7) !important;
}

.bg-white\/60:not(.no-css-changes) {
	background-color: rgba(0, 0, 0, 0.6) !important;
}

.bg-white\/50:not(.no-css-changes) {
	background-color: rgba(0, 0, 0, 0.5) !important;
}

.bg-white\/40:not(.no-css-changes) {
	background-color: rgba(0, 0, 0, 0.4) !important;
}

.bg-white\/30:not(.no-css-changes) {
	background-color: rgba(0, 0, 0, 0.3) !important;
}

.bg-white\/20:not(.no-css-changes) {
	background-color: rgba(0, 0, 0, 0.2) !important;
}

.bg-white\/10:not(.no-css-changes) {
	background-color: rgba(0, 0, 0, 0.1) !important;
}

.bg-black:not(.no-css-changes) {
	background-color: #fecc00 !important;
}

.bg-black\/90:not(.no-css-changes) {
	background-color: rgba(255, 255, 255, 0.9) !important;
}

.bg-black\/80:not(.no-css-changes) {
	background-color: rgba(255, 255, 255, 0.8) !important;
}

.bg-black\/70:not(.no-css-changes) {
	background-color: rgba(255, 255, 255, 0.7) !important;
}

.bg-black\/60:not(.no-css-changes) {
	background-color: rgba(255, 255, 255, 0.6) !important;
}

.bg-black\/50:not(.no-css-changes) {
	background-color: rgba(255, 255, 255, 0.5) !important;
}

.bg-black\/40:not(.no-css-changes) {
	background-color: rgba(255, 255, 255, 0.4) !important;
}

.bg-black\/30:not(.no-css-changes) {
	background-color: rgba(255, 255, 255, 0.3) !important;
}

.bg-black\/20:not(.no-css-changes),
.bg-gray-100:not(.no-css-changes) {
	background-color: rgba(255, 255, 255, 0.2) !important;
}

.bg-black\/10:not(.no-css-changes),
.bg-gray\/30:not(.no-css-changes) {
	background-color: rgba(255, 255, 255, 0.1) !important;
}

.bg-gray-300:not(.no-css-changes) {
	background-color: #434343 !important;
}

.bg-gray:not(.no-css-changes),
.\!bg-gray:not(.no-css-changes),
.hover\:bg-gray:hover:not(.no-css-changes) {
	background-color: #191919 !important;
}

.bg-gray\/80 {
	background-color: rgba(33, 33, 33, 0.8) !important;
}

.bg-gray\/40:not(.no-css-changes) {
	background-color: #0a0a0a !important;
}

textarea,
.before\:bg-white::before {
	background-color: #000 !important;
}


/* ==========================================================================
   2. BORDERS (Rahmen)
   ========================================================================== */
.border,
.border-black:not(.no-css-changes) {
	border-color: #fecc00 !important;
}

.border-black\/90:not(.no-css-changes) {
	border-color: rgba(255, 255, 255, 0.9) !important;
}

.border-black\/80:not(.no-css-changes) {
	border-color: rgba(255, 255, 255, 0.8) !important;
}

.border-black\/70:not(.no-css-changes) {
	border-color: rgba(255, 255, 255, 0.7) !important;
}

.border-black\/60:not(.no-css-changes) {
	border-color: rgba(255, 255, 255, 0.6) !important;
}

.border-black\/50:not(.no-css-changes) {
	border-color: rgba(255, 255, 255, 0.5) !important;
}

.border-black\/40:not(.no-css-changes) {
	border-color: rgba(255, 255, 255, 0.4) !important;
}

.border-black\/30:not(.no-css-changes) {
	border-color: rgba(255, 255, 255, 0.3) !important;
}

.border-black\/20:not(.no-css-changes) {
	border-color: rgba(255, 255, 255, 0.2) !important;
}

.border-black\/10:not(.no-css-changes) {
	border-color: rgba(255, 255, 255, 0.1) !important;
}

.border-gray-300:not(.no-css-changes) {
	border-color: #434343 !important;
}

.lg\:border-gray-300:not(.no-css-changes),
.border-gray:not(.no-css-changes) {
	border-color: #191919 !important;
}

/* Status Borders */
.\!border-red-500:not(.no-css-changes),
.border-red-500:not(.no-css-changes) {
	--tw-border-opacity: 1 !important;
	border-color: rgb(239 68 68 / var(--tw-border-opacity, 1)) !important;
}

.\!border-green-500:not(.no-css-changes),
.border-green-500:not(.no-css-changes) {
	--tw-border-opacity: 1 !important;
	border-color: rgb(34 197 94 / var(--tw-border-opacity, 1)) !important;
}

.\!border-yellow-500:not(.no-css-changes),
.border-yellow-500:not(.no-css-changes) {
	--tw-border-opacity: 1 !important;
	border-color: rgb(234 179 8 / var(--tw-border-opacity, 1)) !important;
}

.\!border-blue-500:not(.no-css-changes),
.border-blue-500:not(.no-css-changes) {
	--tw-border-opacity: 1 !important;
	border-color: rgb(59 130 246 / var(--tw-border-opacity, 1)) !important;
}

.border-transparent {
	border-color: transparent !important
}

/* ==========================================================================
   3. TEXT COLORS & PLACEHOLDERS (Textfarben & Platzhalter)
   ========================================================================== */
.text-white:not(.no-css-changes) {
	color: #000 !important;
}

.text-white\/90:not(.no-css-changes) {
	color: rgba(0, 0, 0, 0.9) !important;
}

.text-white\/80:not(.no-css-changes) {
	color: rgba(0, 0, 0, 0.8) !important;
}

.text-white\/70:not(.no-css-changes) {
	color: rgba(0, 0, 0, 0.7) !important;
}

.text-white\/60:not(.no-css-changes) {
	color: rgba(0, 0, 0, 0.6) !important;
}

.text-white\/50:not(.no-css-changes) {
	color: rgba(0, 0, 0, 0.5) !important;
}

.text-white\/40:not(.no-css-changes) {
	color: rgba(0, 0, 0, 0.4) !important;
}

.text-white\/30:not(.no-css-changes) {
	color: rgba(0, 0, 0, 0.3) !important;
}

.text-white\/20:not(.no-css-changes) {
	color: rgba(0, 0, 0, 0.2) !important;
}

.text-white\/10:not(.no-css-changes) {
	color: rgba(0, 0, 0, 0.1) !important;
}

.text-black:not(.no-css-changes) {
	color: #fff !important;
}

.text-black\/90:not(.no-css-changes) {
	color: rgba(255, 255, 255, 0.9) !important;
}

.text-black\/80:not(.no-css-changes) {
	color: rgba(255, 255, 255, 0.8) !important;
}

.text-black\/70:not(.no-css-changes) {
	color: rgba(255, 255, 255, 0.7) !important;
}

.text-black\/60:not(.no-css-changes),
.text-gray-600:not(.no-css-changes) {
	color: rgba(255, 255, 255, 0.6) !important;
}

.text-black\/50:not(.no-css-changes) {
	color: rgba(255, 255, 255, 0.5) !important;
}

.text-black\/40:not(.no-css-changes) {
	color: rgba(255, 255, 255, 0.4) !important;
}

.text-black\/30:not(.no-css-changes) {
	color: rgba(255, 255, 255, 0.3) !important;
}

.text-black\/20:not(.no-css-changes) {
	color: rgba(255, 255, 255, 0.2) !important;
}

.text-black\/10:not(.no-css-changes) {
	color: rgba(255, 255, 255, 0.1) !important;
}

.text-gray-300:not(.no-css-changes) {
	color: #434343 !important;
}

.text-gray:not(.no-css-changes) {
	color: #191919 !important;
}

.\!text-black,
option.\!text-black {
	color: #fff !important;
}

/* Status Text */
.\!text-green-500:not(.no-css-changes) {
	--tw-text-opacity: 1 !important;
	color: rgb(34 197 94 / var(--tw-text-opacity, 1)) !important;
}

.\!text-yellow-500:not(.no-css-changes) {
	--tw-text-opacity: 1 !important;
	color: rgb(234 179 8 / var(--tw-text-opacity, 1)) !important;
}

.\!text-red-500:not(.no-css-changes) {
	--tw-text-opacity: 1 !important;
	color: rgb(239 68 68 / var(--tw-text-opacity, 1)) !important;
}

/* Status-Badges: Textfarben, die die Invertierung sonst schluckt */
.\!text-green-600:not(.no-css-changes),
.text-green-600:not(.no-css-changes) {
	--tw-text-opacity: 1 !important;
	color: rgb(22 163 74 / var(--tw-text-opacity, 1)) !important;
}

.\!text-blue-500:not(.no-css-changes),
.text-blue-500:not(.no-css-changes) {
	--tw-text-opacity: 1 !important;
	color: rgb(59 130 246 / var(--tw-text-opacity, 1)) !important;
}

/* Placeholders */
input::placeholder:not(.no-css-changes) {
	color: rgba(255, 255, 255, 0.5) !important;
}

input.placeholder\:text-black\/50::placeholder {
	color: rgba(255, 255, 255, 0.5) !important
}

/* ==========================================================================
   4. COMPONENTS (Spezifische Elemente & Buttons)
   ========================================================================== */
/* Buttons & Badges */
.button.bg-black,
.primary-bg,
.button.primary-bg,
.primary-bg:not(.no-css-changes),
.button.primary-bg:not(.no-css-changes),
.badge:not(.no-css-changes) {
	color: #000 !important;
	background-color: #fecc00 !important;
}

.primary-text,
.button.primary-text,
.primary-text:not(.no-css-changes),
.button.primary-text:not(.no-css-changes) {
	color: #feec00 !important;
}

/* Event Slider */
#eventSlider:not(.no-css-changes) .bg-black,
.event.bg-black:not(.no-css-changes) {
	background-color: #000 !important;
}

#eventSlider:not(.no-css-changes) .text-white {
	color: #fff !important;
}

/* SVG Fill */
.fill-white {
	fill: #000 !important;
}

/* Gradients */
.before\:from-white:not(.no-css-changes)::before,
.after\:from-white:not(.no-css-changes)::after {
	--tw-gradient-from: #000 var(--tw-gradient-from-position) !important;
	--tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position) !important;
	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.from-white {
	--tw-gradient-from: #000 var(--tw-gradient-from-position) !important;
	--tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position) !important;
	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.from-white\/80 {
	--tw-gradient-from: rgb(0 0 0 / 0.8) var(--tw-gradient-from-position) !important;
	--tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position) !important;
	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

/* ==========================================================================
   5. DATEPICKER (Filter-Modifikationen)
   ========================================================================== */
.datepickerFilter:not(.no-css-changes) .dp__input {
	background-color: #000 !important;
	color: #fff !important;
	border-color: #434343 !important;
}

.datepickerFilter:not(.no-css-changes) .dp__input::placeholder,
.datepickerFilter:not(.no-css-changes) .dp__calendar_header,
.datepickerFilter:not(.no-css-changes) .dp__menu {
	color: #fff !important;
}

.datepickerFilter:not(.no-css-changes) .dp__arrow_bottom,
.datepickerFilter:not(.no-css-changes) .dp__arrow_top {
	background-color: #000 !important;
	border-color: #434343 !important;
}

.datepickerFilter:not(.no-css-changes) .dp__btn {
	background-color: #191919 !important;
	color: #fff !important;
	border-color: #434343 !important;
}

.datepickerFilter:not(.no-css-changes) .dp__btn:hover {
	background-color: #434343 !important;
}

.datepickerFilter:not(.no-css-changes) .dp__cell_inner.dp__pointer:not(.dp__today) {
	background-color: #191919 !important;
	border-color: #434343 !important;
	color: rgba(255, 255, 255, 0.4) !important;
}

.datepickerFilter:not(.no-css-changes) .dp__cell_inner:not(.dp__cell_disabled).dp__pointer:not(.dp__active_date):not(.dp__today):hover {
	background-color: #434343 !important;
	color: #fff !important;
}

.datepickerFilter:not(.no-css-changes) .dp__menu {
	border-color: #434343 !important;
	background-color: #000 !important;
}

.datepickerFilter:not(.no-css-changes) .dp__input_icon {
	color: #fff !important;
	background-color: #191919 !important;
}

.defaultDatepicker:not(.no-css-changes) .dp__input_icon {
	background-color: transparent !important;
}

.dp__arrow_top.dp__arrow_top__default:not(.no-css-changes) {
	border-top-color: #434343 !important;
	background-color: #000 !important;
	border-left-color: #434343 !important;
}

/* ==========================================================================
   6. VUE TOASTIFICATION
   ========================================================================== */
.Vue-Toastification__container .Vue-Toastification__toast-body,
.Vue-Toastification__container .Vue-Toastification__toast,
.Vue-Toastification__container .Vue-Toastification__toast--default {
	background-color: #000 !important;
	background: #000 !important;
	color: #fff !important;
}

.Vue-Toastification__container .Vue-Toastification__close-button {
	color: #000 !important;
	background-color: #fecc00 !important;
}

.Vue-Toastification__container .Vue-Toastification__toast--default {
	--tw-shadow: 0 4px 4px 4px rgba(255, 255, 255, .2), 0 2px 4px 4px rgba(255, 255, 55, .2) !important;
	--tw-shadow-colored: 0 4px 4px 4px rgba(255, 255, 255, .2), 0 2px 4px 4px rgba(255, 255, 255, .2) !important;
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #fff), var(--tw-ring-shadow, 0 0 #fff), var(--tw-shadow) !important;
}

/* ==========================================================================
   7. SHADOWS & CHAT UTILITIES
   ========================================================================== */
.shadow-md {
	--tw-shadow: 0 2px 2px 0 rgba(255, 255, 255, .2), 0 2px 2px 0 rgba(255, 255, 55, .2) !important;
	--tw-shadow-colored: 0 2px 2px 0px rgba(255, 255, 255, .2), 0 2px 2px 0px rgba(255, 255, 255, .2) !important;
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #fff), var(--tw-ring-shadow, 0 0 #fff), var(--tw-shadow) !important;
}

.shadow-\[0_0_20px_20px_rgba\(255\2c 255\2c 255\2c 1\)\] {
	--tw-shadow: 0 0 20px 20px rgba(0, 0, 0, 1) !important;
	--tw-shadow-colored: 0 0 20px 20px rgba(0, 0, 0, 1) !important;
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.shadow-lg {
	--tw-shadow: 0 10px 15px -3px rgb(255 255 255 / 0.1), 0 4px 6px -4px rgb(255 255 255 / 0.1) !important;
	--tw-shadow-colored: 0 10px 15px -3px rgba(255, 255, 255, .2), 0 4px 6px -4px rgba(255, 255, 255, .2) !important;
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #fff), var(--tw-ring-shadow, 0 0 #fff), var(--tw-shadow) !important;
}

.chatHeader {
	box-shadow: 0 0 10px 10px rgba(0, 0, 0, 1) !important;
}

/* Chat Bubbles / Arrows */
.type_bot:before,
.type_loading:before {
	border-color: transparent #434343 transparent transparent !important;
}

.type_default:not(.type_bot):not(.type_loading):before {
	border-color: transparent transparent #434343 transparent !important;
}

.type_default:after {
	border-color: transparent transparent #000 transparent !important;
}

.splide__pagination__page.is-active {
	background: white !important
}

/* ==========================================================================
   8. ANIMATIONS
   ========================================================================== */
.mousey {
	border-color: #fff !important
}

.scroller {
	background-color: #000 !important
}

/* ==========================================================================
   9. MEDIA QUERIES (Responsive Design)
   ========================================================================== */
@media (min-width: 640px) {
	.sm\:bg-transparent:not(.no-css-changes) {
		background-color: transparent !important;
	}

	.sm\:bg-white:not(.no-css-changes) {
		background-color: #000 !important
	}
}

/* ==========================================================================
   10. TIXU BRANDING (Footer-Logo entfernen)
   ========================================================================== */
a[href="https://tixu.io"]:not(.no-css-changes) {
	display: none !important;
}

/* Überschrift "Ticketing powered by" direkt darüber ausblenden,
   falls sie als eigenes Element vor dem Link steht */
h1:has(+ a[href="https://tixu.io"]),
h2:has(+ a[href="https://tixu.io"]),
h3:has(+ a[href="https://tixu.io"]) {
	display: none !important;
}