.progress-bar{
	background-color:#eb7a05c2!important;
	color:#000000!important;
}
.step.active .step-number{
	background:linear-gradient(135deg, #fb071b 0%, #eb7b07 100%)!important;
}
.step.active .step-label{
	color:#000000!important;
}

.view-toggle .btn-primary{
	background:linear-gradient(135deg, #fb071b 0%, #eb7b07 100%)!important;
}
.view-toggle .btn-outline-primary{
	border:2px solid #f72316!important;
	color:#000000!important;
}
.view-toggle .btn-outline-primary:hover {
	background:linear-gradient(135deg, #fb071b 0%, #eb7b07 100%)!important;
}

.btn-primary:not(:disabled){
	background:linear-gradient(135deg, #fb071b 0%, #eb7b07 100%)!important;
	border-color:#000000!important;
}

.btn-primary:hover:not(:disabled){
	background:linear-gradient(135deg, #eb7b07 0%, #fb071b 100%)!important;
	border-color:#000000!important;
}
.step.completed:not(:last-child)::after{
	background:linear-gradient(90deg, #eb5f0c 0%, #b81817 100%)!important;
}
.step.completed .step-number{
	border-color:#f9f60e!important;
}

.step-header{
	border:1px solid #e89b27!important;
}
.card{
	border-color:#eb953d!important;
}
.item-price{
	background:linear-gradient(135deg, rgba(211, 60, 15, 0.1) 0%, rgba(211, 60, 15, 0.05) 100%)!important;
	color:#000000!important;
}
#calendarMonth{
	color:red;
}
.main-content{
	padding-top:0px!important;
}
	
	body {
		background-color:#ffffff!important;
	}
	.calendar-day{
		color:#000000;
	}


/* CSS für Auto-Scroll Animationen und Hervorhebung */
/* Dieses CSS in den bestehenden <style> Bereich einfügen */

/* Highlight-Animation für hervorgehobene Elemente */
.highlight-animation {
    animation: highlightPulse 2s ease-in-out;
    position: relative;
}

@keyframes highlightPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7);
        border-color: #007bff;
    }
    50% {
        box-shadow: 0 0 0 10px rgba(0, 123, 255, 0.2);
        border-color: #007bff;
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
        border-color: initial;
    }
}

/* Smooth transitions für bessere UX */
.time-slot-card,
.calendar-day,
#timeSlotSelection,
#bookingForm {
    transition: all 0.3s ease;
}

/* Fokus-Styles für bessere Accessibility */
.time-slot-card:focus,
.calendar-day:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* Hover-Effekte verstärken */
.time-slot-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.2);
}

.calendar-day:hover {
    transform: scale(1.05);
}

/* Loading-Animation für dynamische Inhalte */
.loading-slots {
    text-align: center;
    padding: 20px;
    color: #6c757d;
}

.loading-slots::after {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-left: 10px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Smooth Scroll für ältere Browser */
html {
    scroll-behavior: smooth;
}

/* Verbesserte Selected-State für Zeitslots */
.time-slot-card.selected {
    border-color: #007bff;
    background-color: #e7f3ff;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
    transform: translateY(-2px);
}

.time-slot-card.selected::before {
    content: '✓';
    position: absolute;
    top: 10px;
    right: 10px;
    color: #007bff;
    font-weight: bold;
    font-size: 18px;
}

/* Kalendertag Selected-State */
.calendar-day.selected {
    background-color: #007bff;
    color: white;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.4);
    transform: scale(1.1);
}

/* Responsive Anpassungen für Mobile */
@media (max-width: 768px) {
    .highlight-animation {
        animation: highlightPulseMobile 1.5s ease-in-out;
    }
    
    @keyframes highlightPulseMobile {
        0% {
            box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7);
        }
        50% {
            box-shadow: 0 0 0 5px rgba(0, 123, 255, 0.3);
        }
        100% {
            box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
        }
    }
    
    .time-slot-card:hover {
        transform: none; /* Weniger starke Effekte auf Mobile */
    }
    
    .calendar-day:hover {
        transform: scale(1.02);
    }
}

/* Accessibility Verbesserungen */
@media (prefers-reduced-motion: reduce) {
    .highlight-animation,
    .time-slot-card,
    .calendar-day {
        animation: none;
        transition: none;
    }
    
    html {
        scroll-behavior: auto;
    }
}

/* Focus-visible für moderne Browser */
.time-slot-card:focus-visible,
.calendar-day:focus-visible {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* Bessere Sichtbarkeit für ausgewählte Elemente */
.step-content {
    position: relative;
}

.auto-scroll-indicator {
    position: absolute;
    right: 20px;
    top: 20px;
    background: rgba(0, 123, 255, 0.1);
    color: #007bff;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.auto-scroll-indicator.show {
    opacity: 1;
}

.menu-item{
	background:#ffffff!important;
}