/**
 * Modern Teacher Booking System - CSS Styles
 * Zeitgemäßes Design mit Glassmorphism, Animationen und modernen UI-Patterns
 * 
 * Features:
 * - Glassmorphism Design mit Backdrop-Filter
 * - Smooth Animations & Micro-Interactions
 * - Responsive Design für alle Geräte
 * - Touch-optimierte Interaktionen
 * - Accessibility-First Approach
 * - Dark Mode Ready
 * - Performance-optimiert
 * - Grid + Table View für Lehrer
 * - Instrument-Filter mit Mehrfachauswahl
 * - Teacher Info Modal
 */

/* ===========================
   🎨 CSS CUSTOM PROPERTIES
   =========================== */

:root {
    /* Modern Color Palette */
    --mtb-primary: #007AFF;
    --mtb-primary-light: #5AC8FA;
    --mtb-secondary: #34C759;
    --mtb-accent: #FF9500;
    --mtb-warning: #FF9500;
    --mtb-error: #FF3B30;
    --mtb-success: #34C759;
    
    /* Neutral Colors */
    --mtb-neutral-50: #FAFAFA;
    --mtb-neutral-100: #ffffff;
    --mtb-neutral-200: #E5E5E5;
    --mtb-neutral-300: #D4D4D4;
    --mtb-neutral-400: #A3A3A3;
    --mtb-neutral-500: #737373;
    --mtb-neutral-600: #525252;
    --mtb-neutral-700: #404040;
    --mtb-neutral-800: #262626;
    --mtb-neutral-900: #171717;
    
    /* Semantic Colors */
    --mtb-background: #F2F2F7;
    --mtb-surface: rgba(255, 255, 255, 0.85);
    --mtb-surface-glass: rgba(255, 255, 255, 0.7);
    --mtb-surface-subtle: rgba(255, 255, 255, 0.4);
    --mtb-surface-secondary: rgba(248, 248, 248, 0.9);
    --mtb-text-primary: #1D1D1F;
    --mtb-text-secondary: #86868B;
    --mtb-text-tertiary: #C7C7CC;
    --mtb-border: rgba(0, 0, 0, 0.1);
    --mtb-border-light: rgba(0, 0, 0, 0.05);
    
    /* Teacher Specific Colors */
    --mtb-teacher-primary: #007AFF;
    --mtb-teacher-secondary: #5AC8FA;
    --mtb-lesson-individual: #34C759;
    --mtb-lesson-partner: #FF9500;
    --mtb-lesson-group: #AF52DE;
    --mtb-wing-upgrade: #FF6B6B;
    --mtb-warm-up: #4ECDC4;
    
    /* Instrument Colors */
    --mtb-piano-color: #007AFF;
    --mtb-guitar-color: #FF9500;
    --mtb-drums-color: #FF3B30;
    --mtb-violin-color: #AF52DE;
    --mtb-vocal-color: #34C759;
    
    /* Spacing Scale */
    --mtb-space-1: 0.25rem;  /* 4px */
    --mtb-space-2: 0.5rem;   /* 8px */
    --mtb-space-3: 0.75rem;  /* 12px */
    --mtb-space-4: 1rem;     /* 16px */
    --mtb-space-5: 1.25rem;  /* 20px */
    --mtb-space-6: 1.5rem;   /* 24px */
    --mtb-space-8: 2rem;     /* 32px */
    --mtb-space-10: 2.5rem;  /* 40px */
    --mtb-space-12: 3rem;    /* 48px */
    --mtb-space-16: 4rem;    /* 64px */
    
    /* Border Radius */
    --mtb-radius-sm: 6px;
    --mtb-radius-md: 12px;
    --mtb-radius-lg: 20px;
    --mtb-radius-xl: 24px;
    --mtb-radius-2xl: 32px;
    --mtb-radius-full: 9999px;
    
    /* Shadows */
    --mtb-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
    --mtb-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --mtb-shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.12);
    --mtb-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.15);
    
    /* Typography */
    --mtb-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --mtb-font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
    
    /* Font Sizes */
    --mtb-text-xs: 0.75rem;   /* 12px */
    --mtb-text-sm: 0.875rem;  /* 14px */
    --mtb-text-base: 1rem;    /* 16px */
    --mtb-text-lg: 1.125rem;  /* 18px */
    --mtb-text-xl: 1.25rem;   /* 20px */
    --mtb-text-2xl: 1.5rem;   /* 24px */
    --mtb-text-3xl: 1.875rem; /* 30px */
    --mtb-text-4xl: 2.25rem;  /* 36px */
    
    /* Font Weights */
    --mtb-font-normal: 400;
    --mtb-font-medium: 500;
    --mtb-font-semibold: 600;
    --mtb-font-bold: 700;
    --mtb-font-extrabold: 800;
    
    /* Line Heights */
    --mtb-leading-tight: 1.25;
    --mtb-leading-normal: 1.5;
    --mtb-leading-relaxed: 1.75;
    
    /* Transitions */
    --mtb-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --mtb-transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --mtb-transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
    --mtb-transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* Z-Index Scale */
    --mtb-z-dropdown: 10;
    --mtb-z-sticky: 20;
    --mtb-z-fixed: 30;
    --mtb-z-modal-backdrop: 40;
    --mtb-z-modal: 50;
    --mtb-z-popover: 60;
    --mtb-z-tooltip: 70;
    --mtb-z-toast: 9999999;
    
    /* Grid & Layout */
    --mtb-container-sm: 640px;
    --mtb-container-md: 768px;
    --mtb-container-lg: 1024px;
    --mtb-container-xl: 1280px;
    --mtb-container-2xl: 1536px;
}

/* ===========================
   🏗️ BASE STYLES
   =========================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--mtb-font-family);
    background: var(--mtb-background);
    color: var(--mtb-text-primary);
    line-height: var(--mtb-leading-normal);
    overflow-x: hidden;
}

/* Prevent body scroll when modal is open */
body.mtb-modal-open {
    overflow: hidden;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===========================
   🏛️ MAIN CONTAINER
   =========================== */

.mtb-container {
    margin: 0 auto;
    min-height: 100vh;
}

@media (max-width: 768px) {
    .mtb-container {
    }
}

/* ===========================
   📱 HEADER SECTION - HERO STYLE
   =========================== */

.mtb-header {
    background: linear-gradient(135deg, #007AFF 0%, #5AC8FA 100%);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: none;
    border-radius: var(--mtb-radius-xl);
    padding: var(--mtb-space-8) 20px;
    margin-bottom: var(--mtb-space-8);
    position: relative;
    z-index: 1;
    color: white;
}

.mtb-header-content {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    margin: 0 auto;
}

.mtb-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--mtb-space-8);
    flex-wrap: wrap;
    gap: var(--mtb-space-4);
}

.mtb-page-title {
    font-size: var(--mtb-text-3xl);
    font-weight: var(--mtb-font-extrabold);
    color: white;
    letter-spacing: -0.025em;
    display: flex;
    align-items: center;
    gap: var(--mtb-space-3);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    animation: mtb-slide-up 0.8s ease-out;
}

.mtb-page-title .mtb-icon {
    width: 36px;
    height: 36px;
    color: rgba(255, 255, 255, 0.9);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* User Status - wie Hero Credits Card */
.mtb-user-status {
    display: flex;
    align-items: center;
    gap: var(--mtb-space-4);
    animation: mtb-slide-up 0.8s ease-out 0.2s both;
}

.mtb-credits-card {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: var(--mtb-space-3) var(--mtb-space-5);
    border-radius: var(--mtb-radius-lg);
    font-weight: var(--mtb-font-semibold);
    font-size: var(--mtb-text-sm);
    display: flex;
    align-items: center;
    gap: var(--mtb-space-2);
    transition: all var(--mtb-transition-normal);
    cursor: default;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.mtb-credits-card:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.mtb-credits-card .mtb-icon {
    width: 18px;
    height: 18px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.mtb-flatrate-badge {
    background: rgba(52, 199, 89, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: var(--mtb-space-2) var(--mtb-space-3);
    border-radius: var(--mtb-radius-md);
    font-size: var(--mtb-text-xs);
    font-weight: var(--mtb-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: var(--mtb-space-1);
    box-shadow: 0 4px 15px rgba(52, 199, 89, 0.3);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.mtb-flatrate-badge .mtb-icon {
    width: 14px;
    height: 14px;
}

/* ===========================
   🔽 FILTERS SECTION - GLASSMORPHISM
   =========================== */

.mtb-filters {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--mtb-radius-xl);
    padding: var(--mtb-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--mtb-space-4);
    animation: mtb-slide-up 0.8s ease-out 0.4s both;
}

/* Date Filter Row - Full Width */
.mtb-date-filter-row {
    display: flex;
    flex-direction: column;
    gap: var(--mtb-space-3);
    width: 100%;
    padding-bottom: var(--mtb-space-4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

/* Other Filters Row */
.mtb-filters-row {
    display: flex;
    gap: var(--mtb-space-4);
    flex-wrap: wrap;
    align-items: flex-end;
    width: 100%;
}

.mtb-filter-group {
    display: flex;
    flex-direction: column;
    gap: var(--mtb-space-2);
    min-width: 160px;
    flex: 1;
}

/* Date Navigation */
.mtb-date-navigation {
    display: flex;
    align-items: center;
    gap: var(--mtb-space-2);
}

.mtb-date-nav-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--mtb-radius-md);
    cursor: pointer;
    transition: all var(--mtb-transition-fast);
}

.mtb-date-nav-btn:hover {
    background: white;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.mtb-date-nav-btn svg,
.mtb-chevron-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #6B7280;
}

/* Date Display Wrapper */
.mtb-date-display-wrapper {
    position: relative;
    flex: 1;
}

/* Disabled State Styles for Date Filter */
#mtb-date-filter:disabled,
#mtb-date-filter[disabled],
#mtb-date-filter.loading-disabled,
#mtb-date-display:disabled,
#mtb-date-display[disabled],
#mtb-date-display.loading-disabled {
    opacity: 0.5;
    cursor: not-allowed !important;
    pointer-events: none !important;
    background-color: #f5f5f5 !important;
    position: relative;
}

/* Custom Calendar Popup blockieren wenn loading */
#mtb-calendar-popup.loading-disabled,
.loading-disabled #mtb-calendar-popup {
    display: none !important;
    pointer-events: none !important;
}

/* Date Display während loading nicht klickbar */
#mtb-date-display.loading-disabled {
    cursor: not-allowed !important;
    user-select: none !important;
}

.mtb-date-nav.disabled,
.mtb-week-nav.disabled {
    opacity: 0.4;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.mtb-date-nav.disabled button,
.mtb-week-nav.disabled button {
    cursor: not-allowed !important;
    pointer-events: none !important;
    background-color: #f5f5f5 !important;
}

/* Calendar Keeper Checkbox */
.mtb-calendar-keeper {
    margin-top: var(--mtb-space-3);
}

.mtb-checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--mtb-space-3);
    font-size: var(--mtb-text-sm);
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    user-select: none;
}

.mtb-checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    background: transparent;
    transition: all var(--mtb-transition-fast);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
}

.mtb-checkbox:hover {
    border-color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.1);
}

.mtb-checkbox:checked {
    background: var(--mtb-primary);
    border-color: var(--mtb-primary);
}

.mtb-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Custom Calendar Widget */
.mtb-calendar-popup {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: var(--mtb-space-2);
    background: white;
    border-radius: var(--mtb-radius-lg);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    padding: var(--mtb-space-4);
    z-index: 9999;
    display: none;
    min-width: 280px;
}

.mtb-calendar-popup.show {
    display: block;
}

/* Calendar Header */
.mtb-calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--mtb-space-4);
}

.mtb-calendar-month-year {
    font-size: var(--mtb-text-lg);
    font-weight: var(--mtb-font-semibold);
    color: var(--mtb-text-primary);
}

.mtb-calendar-nav {
    display: flex;
    gap: var(--mtb-space-2);
}

.mtb-calendar-nav-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mtb-primary);
    color: white;
    border: none;
    border-radius: var(--mtb-radius-sm);
    cursor: pointer;
    transition: all var(--mtb-transition-fast);
}

.mtb-calendar-nav-btn:hover {
    background: #0056CC;
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
}

.mtb-calendar-nav-btn svg {
    width: 14px;
    height: 14px;
    color: white;
    flex-shrink: 0;
}

/* Calendar Grid */
.mtb-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--mtb-space-1);
    margin-bottom: var(--mtb-space-2);
}

.mtb-calendar-weekday {
    text-align: center;
    font-size: var(--mtb-text-xs);
    font-weight: var(--mtb-font-semibold);
    color: var(--mtb-text-secondary);
    padding: var(--mtb-space-2);
}

.mtb-calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--mtb-space-1);
}

.mtb-calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--mtb-text-sm);
    color: var(--mtb-text-primary);
    border-radius: var(--mtb-radius-sm);
    cursor: pointer;
    transition: all var(--mtb-transition-fast);
    position: relative;
}

.mtb-calendar-day:hover:not(.disabled):not(.other-month) {
    background: var(--mtb-primary);
    color: white;
    font-weight: var(--mtb-font-semibold);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
}

.mtb-calendar-day.today {
    background: rgba(0, 122, 255, 0.15);
    color: var(--mtb-primary);
    font-weight: var(--mtb-font-semibold);
}

.mtb-calendar-day.selected {
    background: var(--mtb-primary);
    color: white;
    font-weight: var(--mtb-font-semibold);
}

.mtb-calendar-day.has-booking::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background: var(--mtb-success);
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.2);
}

.mtb-calendar-day.other-month {
    color: var(--mtb-text-tertiary);
    opacity: 0.6;
    cursor: pointer;
}

.mtb-calendar-day.other-month:hover {
    background: rgba(0, 122, 255, 0.1);
    color: var(--mtb-primary);
    opacity: 1;
    transform: scale(1.05);
}

.mtb-calendar-day.disabled {
    color: var(--mtb-text-tertiary);
    opacity: 0.5;
    cursor: not-allowed;
}

/* Date display input styling */
#mtb-date-display.mtb-filter-input,
.mtb-date-display-wrapper #mtb-date-display {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: var(--mtb-radius-lg) !important;
    padding: var(--mtb-space-3) var(--mtb-space-4) !important;
    font-size: var(--mtb-text-base) !important;
    font-weight: var(--mtb-font-medium) !important;
    color: var(--mtb-text-primary) !important;
    transition: all var(--mtb-transition-normal);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    text-align: center;
    width: 100%;
}

.mtb-filter-label {
    font-size: var(--mtb-text-xs);
    font-weight: var(--mtb-font-bold);
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.mtb-filter-input,
.mtb-filter-select {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--mtb-radius-lg);
    padding: var(--mtb-space-3) var(--mtb-space-4);
    font-size: var(--mtb-text-base);
    font-weight: var(--mtb-font-medium);
    color: var(--mtb-text-primary);
    transition: all var(--mtb-transition-normal);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.mtb-filter-input:focus,
.mtb-filter-select:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2), 0 8px 25px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.mtb-filter-input::placeholder {
    color: rgba(29, 29, 31, 0.6);
}

.mtb-action-button {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: var(--mtb-primary);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--mtb-radius-lg);
    padding: var(--mtb-space-3) var(--mtb-space-6);
    font-size: var(--mtb-text-base);
    font-weight: var(--mtb-font-bold);
    cursor: pointer;
    transition: all var(--mtb-transition-normal);
    display: flex;
    align-items: center;
    gap: var(--mtb-space-2);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.mtb-action-button:hover {
    background: rgba(255, 255, 255, 1);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 122, 255, 0.3);
    color: #0056CC;
}

.mtb-action-button:active {
    transform: translateY(-1px);
}

.mtb-action-button .mtb-icon {
    width: 18px;
    height: 18px;
    transition: transform var(--mtb-transition-normal);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.mtb-action-button.mtb-refresh-spin .mtb-icon {
    animation: mtb-spin 1s linear infinite;
}

/* ===========================
   🎸 INSTRUMENT DROPDOWN
   =========================== */

.mtb-instrument-dropdown {
    position: relative;
    min-width: 200px;
}

.mtb-instrument-toggle {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--mtb-radius-lg);
    padding: var(--mtb-space-3) var(--mtb-space-4);
    font-size: var(--mtb-text-base);
    font-weight: var(--mtb-font-medium);
    color: var(--mtb-text-primary);
    transition: all var(--mtb-transition-normal);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mtb-space-2);
}

.mtb-instrument-toggle.active {
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2), 0 8px 25px rgba(0, 0, 0, 0.15);
}

.mtb-selected-instruments {
    flex: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mtb-dropdown-icon {
    width: 16px;
    height: 16px;
    transition: transform var(--mtb-transition-normal);
    flex-shrink: 0;
}

.mtb-instrument-toggle.active .mtb-dropdown-icon {
    transform: rotate(180deg);
}

.mtb-instrument-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--mtb-radius-lg);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    z-index: var(--mtb-z-dropdown);
    margin-top: var(--mtb-space-1);
    overflow: hidden;
    display: none;
}

.mtb-instrument-search {
    padding: var(--mtb-space-3);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.mtb-instrument-search input {
    width: 100%;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--mtb-radius-md);
    padding: var(--mtb-space-2) var(--mtb-space-3);
    font-size: var(--mtb-text-sm);
    color: var(--mtb-text-primary);
}

.mtb-instrument-search input:focus {
    outline: none;
    border-color: var(--mtb-primary);
    box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2);
}

.mtb-instrument-list {
    max-height: 200px;
    overflow-y: auto;
    padding: var(--mtb-space-2);
}

.mtb-instrument-option {
    padding: var(--mtb-space-2);
}

.mtb-instrument-option label {
    display: flex;
    align-items: center;
    gap: var(--mtb-space-2);
    padding: var(--mtb-space-2);
    border-radius: var(--mtb-radius-sm);
    cursor: pointer;
    transition: all var(--mtb-transition-fast);
    font-size: var(--mtb-text-sm);
    color: var(--mtb-text-primary);
}

.mtb-instrument-option label:hover {
    background: rgba(0, 122, 255, 0.1);
}

.mtb-instrument-option-checkbox {
    display: none;
}

.mtb-instrument-option-custom {
    width: 16px;
    height: 16px;
    border: 2px solid var(--mtb-border);
    border-radius: var(--mtb-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--mtb-transition-normal);
    flex-shrink: 0;
    background: white;
}

.mtb-instrument-option-checkbox:checked + .mtb-instrument-option-custom {
    border-color: var(--mtb-primary);
    background: var(--mtb-primary);
}

.mtb-instrument-option-checkbox:checked + .mtb-instrument-option-custom::after {
    content: '✓';
    color: white;
    font-size: 12px;
    font-weight: bold;
}

/* ===========================
   📱 MOBILE RESPONSIVE - OPTIMIERT
   =========================== */

@media (max-width: 768px) {
    .mtb-header {
        padding: var(--mtb-space-5) 20px;
    }
    
    .mtb-header-top {
        flex-direction: column;
        gap: var(--mtb-space-3);
        text-align: center;
        margin-bottom: var(--mtb-space-5);
    }
    
    .mtb-page-title {
        font-size: var(--mtb-text-2xl);
    }
    
    .mtb-page-title .mtb-icon {
        width: 28px;
        height: 28px;
    }
    
    .mtb-user-status {
        flex-direction: row;
        justify-content: center;
        gap: var(--mtb-space-3);
        flex-wrap: wrap;
    }
    
    .mtb-credits-card {
        padding: var(--mtb-space-2) var(--mtb-space-4);
        font-size: var(--mtb-text-sm);
    }
    
    /* Mobile Filter Layout - Kompakter */
    .mtb-filters {
        padding: var(--mtb-space-4);
        gap: var(--mtb-space-3);
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto auto;
        grid-template-areas: 
            "date date"
            "instruments instruments"
            "teacher teacher"
            "action action";
    }
    
    .mtb-filter-group:nth-child(1) { grid-area: date; }
    .mtb-filter-group:nth-child(2) { grid-area: instruments; }
    .mtb-filter-group:nth-child(3) { grid-area: teacher; }
    .mtb-action-button { grid-area: action; }
    
    .mtb-filter-group {
        min-width: unset;
        flex: none;
    }
    
    .mtb-filter-label {
        font-size: var(--mtb-text-xs);
        margin-bottom: var(--mtb-space-1);
    }
    
    .mtb-filter-input,
    .mtb-filter-select,
    .mtb-instrument-toggle {
        padding: var(--mtb-space-3);
        font-size: var(--mtb-text-sm);
        border-radius: var(--mtb-radius-md);
    }
    
    .mtb-action-button {
        padding: var(--mtb-space-3) var(--mtb-space-4);
        font-size: var(--mtb-text-sm);
        justify-content: center;
        margin-top: var(--mtb-space-2);
    }
}

@media (max-width: 480px) {
    .mtb-header {
        padding: var(--mtb-space-4) 15px;
        border-radius: var(--mtb-radius-lg);
    }
    
    .mtb-page-title {
        font-size: var(--mtb-text-xl);
        gap: var(--mtb-space-2);
    }
    
    .mtb-page-title .mtb-icon {
        width: 24px;
        height: 24px;
    }
    
    .mtb-credits-card {
        padding: var(--mtb-space-2) var(--mtb-space-3);
        font-size: var(--mtb-text-xs);
    }
    
    .mtb-flatrate-badge {
        padding: var(--mtb-space-1) var(--mtb-space-2);
        font-size: 10px;
    }
    
    /* Noch kompaktere Filter für sehr kleine Screens */
    .mtb-filters {
        padding: var(--mtb-space-3);
        gap: var(--mtb-space-2);
        grid-template-columns: 1fr;
        grid-template-areas: 
            "date"
            "instruments"
            "teacher"
            "action";
    }
    
    .mtb-filter-input,
    .mtb-filter-select,
    .mtb-instrument-toggle {
        padding: var(--mtb-space-2) var(--mtb-space-3);
        font-size: var(--mtb-text-sm);
    }
    
    .mtb-filter-label {
        font-size: 10px;
    }
    
    .mtb-action-button {
        padding: var(--mtb-space-2) var(--mtb-space-3);
        font-size: var(--mtb-text-sm);
    }
}

/* ===========================
   ⏳ LOADING STATES
   =========================== */

.mtb-loading-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

.mtb-loading-spinner {
    text-align: center;
}

.mtb-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--mtb-neutral-200);
    border-top: 3px solid var(--mtb-primary);
    border-radius: 50%;
    animation: mtb-spin 1s linear infinite;
    margin: 0 auto var(--mtb-space-4);
}

.mtb-spinner-sm {
    width: 20px;
    height: 20px;
    border-width: 2px;
}

.mtb-loading-text {
    color: var(--mtb-text-secondary);
    font-size: var(--mtb-text-base);
    font-weight: var(--mtb-font-medium);
}

/* ===========================
   👨‍🏫 TEACHER CARDS - GRID VIEW
   =========================== */

.mtb-teachers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--mtb-space-6);
    margin-bottom: var(--mtb-space-8);
}

.mtb-teacher-card {
    background: var(--mtb-surface);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--mtb-border);
    border-radius: var(--mtb-radius-lg);
    padding: var(--mtb-space-6);
    transition: all var(--mtb-transition-normal);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: var(--mtb-shadow-sm);
}

.mtb-teacher-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: var(--mtb-shadow-lg);
    border-color: var(--mtb-primary);
}

.mtb-teacher-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--mtb-primary), var(--mtb-primary-light));
    opacity: 0;
    transition: opacity var(--mtb-transition-normal);
}

.mtb-teacher-card:hover::before {
    opacity: 1;
}


.mtb-teacher-detail .mtb-icon {
    width: 16px;
    height: 16px;
    opacity: 0.7;
}

.mtb-teacher-info-icon {
    position: absolute;
    top: 0;
    right: 0;
    background: none;
    border: none;
    color: var(--mtb-primary);
    cursor: pointer;
    padding: var(--mtb-space-1);
    border-radius: var(--mtb-radius-sm);
    transition: all var(--mtb-transition-fast);
    z-index: 2;
}

.mtb-teacher-info-icon:hover {
    color: #0056CC;
    background: rgba(0, 122, 255, 0.1);
}

.mtb-teacher-info-icon .mtb-icon {
    width: 16px;
    height: 16px;
}

.mtb-lesson-category-options {
    display: flex;
    flex-direction: column;
    gap: var(--mtb-space-3); /* ✅ 12px Abstand zwischen den Optionen */
    margin-top: var(--mtb-space-4);
    padding: var(--mtb-space-4);
    background: var(--mtb-surface-subtle);
    border-radius: var(--mtb-radius-md);
    border: 1px solid var(--mtb-border-light);
}

/* ===========================
   ⏰ TIME SLOTS - GRID VIEW
   =========================== */

.mtb-time-slots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
    gap: var(--mtb-space-2);
    margin-bottom: var(--mtb-space-5);
}

.mtb-time-slot {
    aspect-ratio: 1;
    background: var(--mtb-neutral-100);
    border: 1px solid var(--mtb-border);
    border-radius: var(--mtb-radius-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: var(--mtb-text-xs);
    font-weight: var(--mtb-font-semibold);
    cursor: pointer;
    transition: all var(--mtb-transition-normal);
    position: relative;
    overflow: hidden;
}

.mtb-time-slot {
    animation-fill-mode: none !important;
}

.mtb-time-slot.mtb-slot-available {
    background: var(--mtb-success);
    color: white;
    border-color: var(--mtb-success);
}

.mtb-time-slot.mtb-slot-premium {
    background: linear-gradient(135deg, var(--mtb-accent), #FF8C00);
    color: white;
    border-color: var(--mtb-accent);
}

.mtb-time-slot.mtb-slot-discount {
    background: linear-gradient(135deg, #34C759, #2DB555);
    color: white;
    border-color: #34C759;
}

.mtb-time-slot.mtb-slot-booked {
    background: var(--mtb-neutral-200);
    color: var(--mtb-text-tertiary);
    cursor: not-allowed;
    border-color: var(--mtb-neutral-200);
}

/* Eigene Buchungen hervorheben - BLAU WIE IM RAUMBUCHUNGSSYSTEM */
.mtb-time-slot.mtb-slot-booked.mtb-own-booking {
    background: #007aff !important;
    color: white !important;
    cursor: pointer !important;
    border-color: #007aff !important;
    position: relative;
}

.mtb-time-slot.mtb-slot-booked.mtb-own-booking:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3) !important;
}

.mtb-time-slot.mtb-slot-booked.mtb-own-booking .mtb-user-name {
    font-size: 8px;
    opacity: 0.9;
    margin-top: 2px;
}

.mtb-time-slot.mtb-slot-past {
    background: repeating-linear-gradient(
        45deg,
        #e0e0e0,
        #e0e0e0 8px,
        #d0d0d0 8px,
        #d0d0d0 16px
    ) !important;
    color: white !important;
    cursor: not-allowed !important;
    opacity: 0.7;
}

.mtb-time-slot.mtb-slot-unavailable {
    background: var(--mtb-neutral-200);
    color: var(--mtb-text-tertiary);
    cursor: not-allowed;
    border-color: var(--mtb-neutral-200);
}

.mtb-time-slot.mtb-slot-selected {
    background: var(--mtb-primary);
    color: white;
    border-color: var(--mtb-primary);
    transform: scale(1.1);
    box-shadow: var(--mtb-shadow-md);
}

.mtb-time-slot:not(.mtb-slot-booked):not(.mtb-slot-past):not(.mtb-slot-unavailable):hover {
    transform: scale(1.08);
    box-shadow: var(--mtb-shadow-md);
}

.mtb-slot-time {
    font-size: 10px;
    margin-bottom: 2px;
}

.mtb-slot-price {
    font-size: 11px;
    font-weight: var(--mtb-font-bold);
}

/* ===========================
   💰 PRICING INFO
   =========================== */

.mtb-pricing-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--mtb-space-4);
    border-top: 1px solid var(--mtb-border);
}

.mtb-price-range {
    font-size: var(--mtb-text-lg);
    font-weight: var(--mtb-font-bold);
    color: var(--mtb-primary);
}

.mtb-book-button {
    background: var(--mtb-primary);
    color: white;
    border: none;
    border-radius: var(--mtb-radius-full);
    padding: var(--mtb-space-2) var(--mtb-space-4);
    font-size: var(--mtb-text-sm);
    font-weight: var(--mtb-font-semibold);
    cursor: pointer;
    transition: all var(--mtb-transition-normal);
    position: relative;
    overflow: hidden;
}

.mtb-book-button:hover {
    background: #0056CC;
    transform: scale(1.05);
    box-shadow: var(--mtb-shadow-md);
}

.mtb-book-button:disabled {
    background: var(--mtb-neutral-300);
    cursor: not-allowed;
    transform: none;
}

/* ===========================
   📊 TABLE VIEW - WITH SCROLL WRAPPER
   =========================== */

.mtb-table-container {
    background: #fafafd;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--mtb-border);
    border-radius: var(--mtb-radius-lg);
    box-shadow: var(--mtb-shadow-md);
    margin-bottom: var(--mtb-space-8);
    position: relative;
    overflow: hidden;
}

/* Scroll Wrapper für horizontales Scrollen */
.mtb-table-scroll-wrapper {
    overflow-x: auto;
    overflow-y: visible;
    flex: 1;
    /* Firefox Scrollbar komplett ausblenden */
    scrollbar-width: none;
    scroll-behavior: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
    /* border-radius: var(--mtb-radius-lg); */
}

/* Scrollbar komplett ausblenden für Webkit Browser */
.mtb-table-scroll-wrapper::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* IE/Edge Scrollbar ausblenden */
.mtb-table-scroll-wrapper {
    -ms-overflow-style: none;
}

/* Interaktiver Scroll-Indikator - EXAKT wie im Raumbuchungssystem */
.mtb-scroll-indicator {
    position: fixed;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    width: 25%;
    min-width: 180px;
    max-width: 270px;
    z-index: 9999;
    padding: 8px;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    pointer-events: none;
}

/* Wenn sichtbar */
.mtb-scroll-indicator.visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: all;
}

/* Hover-Bereich für Aktivierung */
.mtb-table-container:hover .mtb-scroll-indicator {
    opacity: 1;
}

.mtb-scroll-track {
    position: relative;
    width: 100%;
    height: 5px;
    background: var(--mtb-neutral-100);
    border-radius: 30px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

/* Track wird größer beim Hover */
.mtb-scroll-indicator:hover .mtb-scroll-track {
    height: 8px;
}

.mtb-scroll-thumb {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(135deg, var(--mtb-primary), #5AC8FA);
    border-radius: 30px;
    cursor: grab;
    min-width: 40px;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    /* Keine transition für left - für direkte Reaktion beim Dragging */
}

/* Thumb Effekte */
.mtb-scroll-indicator:hover .mtb-scroll-thumb {
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
}

.mtb-scroll-thumb:hover {
    box-shadow: 0 2px 12px rgba(0, 122, 255, 0.4);
    transform: scale(1.05);
}

.mtb-scroll-thumb.dragging {
    cursor: grabbing;
    box-shadow: 0 4px 16px rgba(0, 122, 255, 0.5);
    transform: scale(1.08);
}

/* Fade in/out Animation - nur auf Desktop */
@media (min-width: 769px) {
    .mtb-scroll-indicator {
        opacity: 0;
    }
}

/* Bei Inaktivität ausblenden - nur auf Desktop */
@media (min-width: 769px) {
    .mtb-table-container:not(:hover) .mtb-scroll-indicator {
        opacity: 0;
        transition-delay: 2s;
    }
}

/* Sticky Header Styles - JavaScript generiert */
.mtb-sticky-header-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background: #fafafd;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--mtb-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-100%);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.mtb-sticky-header-wrapper.mtb-sticky-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mtb-sticky-header-wrapper .mtb-sticky-scroll {
    overflow: hidden;
    width: 100%;
}

.mtb-sticky-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.mtb-sticky-header-wrapper .mtb-table-header th {
    background: #fafafd;
    padding: var(--mtb-space-2) var(--mtb-space-3);
    text-align: center;
    font-weight: var(--mtb-font-bold);
    color: var(--mtb-text-primary);
    font-size: var(--mtb-text-sm);
    border-right: 1px solid white;
    border-bottom: none;
    overflow: hidden;
    box-sizing: border-box;
}

/* Kompaktere Darstellung im Sticky Header */
.mtb-sticky-header-wrapper .mtb-teacher-avatar {
    width: 32px;
    height: 32px;
    margin: 0 auto 4px;
}

.mtb-sticky-header-wrapper .mtb-teacher-name {
    font-size: 11px;
    line-height: 1.2;
    margin-bottom: 2px;
}

.mtb-sticky-header-wrapper .mtb-teacher-instruments {
    margin-top: 2px;
}

.mtb-sticky-header-wrapper .mtb-instrument-tag {
    font-size: 9px;
    padding: 1px 4px;
}

.mtb-booking-table {
    width: auto;
    border-collapse: collapse;
    font-size: var(--mtb-text-sm);
    min-width: auto;
    border: 1px solid white;
    margin-bottom: 0px;
    table-layout: fixed;
}

/* Table Header */
.mtb-table-header {
    background: #fafafd;
    border-bottom: 1px solid white;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 10;
}

.mtb-table-header th {
    padding: var(--mtb-space-4);
    text-align: center;
    font-weight: var(--mtb-font-bold);
    color: var(--mtb-text-primary);
    font-size: var(--mtb-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-right: 1px solid white;
    background: var(--mtb-surface);
    backdrop-filter: blur(10px);
}

.mtb-time-header {
    text-align: left !important;
    font-size: var(--mtb-text-sm) !important;
    text-transform: none !important;
    font-weight: var(--mtb-font-semibold) !important;
    min-width: 100px; /* Erhöht von 80px */
    width: 100px;
    background: var(--mtb-surface) !important;
    border-right: 1px solid white;
}

/* Teacher Header Cells - Breitere Spalten */
.mtb-teacher-header {
    min-width: 180px; /* Erhöht von 120px */
    width: 180px;
    position: relative;
    text-align: center;
    padding: var(--mtb-space-4) !important;
}

/* Profilbild in der Lehrerliste */
.mtb-teacher-avatar-placeholder {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(0, 122, 255, 0.08);
    margin: 0 auto 8px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #007AFF;
}

.mtb-teacher-avatar-placeholder svg {
    width: 32px;
    height: 32px;
    color: var(--mrb-primary, #007AFF);
}

/* Alle Teacher-Header auf gleiche Höhe ausrichten */
.mtb-teacher-header {
    vertical-align: top !important;
}

.mtb-teacher-name {
    font-size: var(--mtb-text-sm);
    font-weight: 700;
    margin-bottom: 4px;
    text-transform: none !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.3;
}

.mtb-teacher-firstname,
.mtb-teacher-lastname {
    display: block;
    text-transform: none !important;
}

.mtb-teacher-firstname {
    font-weight: 600;
}

.mtb-teacher-lastname {
    font-weight: 500;
}

.mtb-teacher-rate {
    font-size: 10px;
    font-weight: var(--mtb-font-semibold);
    color: var(--mtb-text-secondary);
    margin-bottom: 2px;
}

.mtb-teacher-instruments {
    font-size: 9px;
    font-weight: var(--mtb-font-medium);
    color: var(--mtb-text-tertiary);
    line-height: 1.2;
}

.mtb-table-teacher-info-icon {
    background: none;
    border: none;
    color: var(--mrb-primary);
    cursor: pointer;
    padding: 2px;
    margin: 2px 0;
    display: inline-block;
    line-height: 1;
    transition: color var(--mrb-transition-fast);
    border-radius: var(--mrb-radius-sm);
}

.mtb-table-teacher-info-icon:hover {
    color: #0056CC;
    background: rgba(0, 122, 255, 0.1);
}

.mtb-table-teacher-info-icon svg {
    width: 14px;
    height: 14px;
}

/* Table Body */
.mtb-table-body {
    background: var(--mtb-surface);
}

.mtb-table-row {
    transition: background var(--mtb-transition-fast);
}

.mtb-table-row:hover {
    background: rgba(0, 122, 255, 0.02);
}

/* Time Column - Breitere Spalte */
.mtb-time-cell {
    padding: var(--mtb-space-4);
    font-weight: var(--mtb-font-semibold);
    color: var(--mtb-text-secondary);
    border-right: 1px solid white;
    background: var(--mtb-surface);
    backdrop-filter: blur(10px);
    min-width: 100px; /* Erhöht von 80px */
    width: 100px;
    text-align: center;
}

/* Table Slot Cells */
.mtb-table-slot {
    padding: var(--mtb-space-3);
    border-right: 1px solid white;
    text-align: center;
    cursor: pointer;
    transition: all var(--mtb-transition-normal);
    position: relative;
    min-height: 44px;
    vertical-align: middle;
    font-weight: var(--mtb-font-semibold);
    border-radius: 12px;
    width: 140px;
    min-width: 140px;
    max-width: 140px;
}

.mtb-table-slot:hover {
    transform: scale(1.02);
    box-shadow: inset 0 0 0 2px var(--mtb-primary);
    z-index: 5;
}

/* Table Slot States */
.mtb-table-slot.mtb-slot-available {
    background: var(--mtb-success);
    color: white;
}

.mtb-table-slot.mtb-slot-available:hover {
    background: #2DB555;
    box-shadow: 0 4px 12px rgba(52, 199, 89, 0.3);
}

.mtb-table-slot.mtb-slot-premium {
    background: linear-gradient(135deg, var(--mtb-accent), #FF8C00);
    color: white;
}

.mtb-table-slot.mtb-slot-premium:hover {
    background: linear-gradient(135deg, #E6830D, #D17500);
    box-shadow: 0 4px 12px rgba(255, 149, 0, 0.3);
}

.mtb-table-slot.mtb-slot-discount {
    background: linear-gradient(135deg, #34C759, #2DB555);
    color: white;
}

.mtb-table-slot.mtb-slot-discount:hover {
    background: linear-gradient(135deg, #2DB555, #249348);
    box-shadow: 0 4px 12px rgba(52, 199, 89, 0.3);
}

.mtb-table-slot.mtb-slot-booked {
    background: var(--mtb-neutral-200);
    color: var(--mtb-text-tertiary);
    cursor: not-allowed;
}

.mtb-table-slot.mtb-slot-booked:hover {
    transform: none;
    box-shadow: none;
}

/* Eigene Buchungen in Tabelle hervorheben - BLAU WIE IM RAUMBUCHUNGSSYSTEM */
.mtb-table-slot.mtb-slot-booked.mtb-own-booking {
    background: #007aff !important;
    color: white !important;
    cursor: pointer !important;
}

.mtb-table-slot.mtb-slot-booked.mtb-own-booking:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3) !important;
}

.mtb-table-slot.mtb-slot-booked.mtb-own-booking .mtb-user-name {
    font-size: 10px;
    display: block;
    opacity: 0.9;
    color: white !important;
}

.mtb-table-slot.mtb-slot-past {
    background: repeating-linear-gradient(
        45deg,
        #e0e0e0,
        #e0e0e0 8px,
        #d0d0d0 8px,
        #d0d0d0 16px
    ) !important;
    color: white !important;
    cursor: not-allowed !important;
    opacity: 0.7;
}

.mtb-table-slot.mtb-slot-past:hover {
    transform: none !important;
    box-shadow: none !important;
}

.mtb-table-slot.mtb-slot-selected {
    background: var(--mtb-primary);
    color: white;
    transform: scale(1.05);
    box-shadow: var(--mtb-shadow-md);
}

.mtb-table-slot.mtb-slot-unavailable {
    background: var(--mtb-neutral-100);
    color: var(--mtb-text-tertiary);
    cursor: not-allowed;
}

.mtb-cost-breakdown {
    margin-bottom: var(--mtb-space-6);
}

.mtb-slot-price {
    font-size: var(--mtb-text-xs);
    font-weight: var(--mtb-font-bold);
}

.mtb-price-premium {
    color: var(--mtb-accent);
    position: relative;
}

.mtb-price-discount {
    color: var(--mtb-success);
    position: relative;
}

.mtb-surcharge-badge,
.mtb-discount-badge {
    font-size: 9px;
    padding: 1px 3px;
    border-radius: 3px;
    margin-left: 2px;
    font-weight: bold;
}

.mtb-surcharge-badge {
    background: rgba(255, 149, 0, 0.2);
    color: var(--mtb-accent);
}

.mtb-discount-badge {
    background: rgba(52, 199, 89, 0.2);
    color: var(--mtb-success);
}

/* Trial-Badge neben Personennamen */
.mtb-trial-badge {
    display: inline-block;
    font-size: 11px;
    line-height: 1;
    padding: 3px 6px;
    margin-left: 8px;
    border-radius: 999px;
    background: rgba(52, 199, 89, 0.12);
    color: var(--mtb-success);
    font-weight: var(--mtb-font-semibold);
}

.mtb-slot-status {
    font-size: var(--mtb-text-xs);
    font-weight: var(--mtb-font-medium);
}

.mtb-past-text {
    color: var(--mtb-text-tertiary);
    font-style: italic;
}

.mtb-surcharge-text,
.mtb-discount-text {
    font-size: 8px;
    display: block;
    margin-top: 1px;
}

/* ===========================
   📅 WEEK VIEW TABLE - VEREINHEITLICHT MIT DAY VIEW
   =========================== */

.mtb-week-container {
    background: var(--mtb-surface);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--mtb-border);
    border-radius: var(--mtb-radius-lg);
    box-shadow: var(--mtb-shadow-md);
    overflow: hidden;
    margin-bottom: var(--mtb-space-8);
}

.mtb-week-header {
    background: linear-gradient(135deg, var(--mtb-neutral-100), var(--mtb-surface));
    padding: var(--mtb-space-4) var(--mtb-space-6);
    border-bottom: 1px solid white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mtb-week-header h3 {
    font-size: var(--mtb-text-lg);
    font-weight: 700;
    color: var(--mtb-text-primary);
}

.mtb-week-navigation {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--mtb-space-2);
}

.mtb-week-nav-top {
    display: flex;
    align-items: center;
    gap: var(--mtb-space-3);
}

.mtb-week-nav-bottom {
    display: flex;
    justify-content: center;
}

.mtb-week-prev,
.mtb-week-next,
.mtb-week-today {
    background: var(--mtb-neutral-100);
    border: 1px solid var(--mtb-border);
    border-radius: var(--mtb-radius-sm);
    cursor: pointer;
    transition: all var(--mtb-transition-normal);
    font-weight: bold;
    color: var(--mtb-text-secondary);
}

.mtb-week-prev,
.mtb-week-next {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mtb-week-today {
    padding: 6px 12px;
    font-size: var(--mtb-text-xs);
}

.mtb-week-prev:hover,
.mtb-week-next:hover,
.mtb-week-today:hover {
    background: var(--mtb-primary);
    color: white;
    border-color: var(--mtb-primary);
}

.mtb-week-today {
    padding: 6px 12px;
    font-size: var(--mtb-text-xs);
}

.mtb-week-prev:hover,
.mtb-week-next:hover,
.mtb-week-today:hover {
    background: var(--mtb-primary);
    color: white;
    border-color: var(--mtb-primary);
}

.mtb-week-range {
    font-size: var(--mtb-text-sm);
    font-weight: var(--mtb-font-semibold);
    color: var(--mtb-text-secondary);
}

.mtb-week-table-container {
    overflow-x: auto;
}

.mtb-week-table {
    width: auto;
    border-collapse: collapse;
    font-size: var(--mtb-text-sm);
    min-width: auto;
    border: 1px solid white;
    margin-bottom: 0px;
    table-layout: fixed;
}

/* Week Table Header - VEREINHEITLICHT */
.mtb-week-table thead {
    background: linear-gradient(135deg, var(--mtb-neutral-100), var(--mtb-surface));
    border-bottom: 1px solid white;
}

.mtb-week-table .mtb-time-header {
    text-align: center !important;
    font-size: var(--mtb-text-sm) !important;
    text-transform: none !important;
    font-weight: var(--mtb-font-semibold) !important;
    width: 80px;
    min-width: 80px;
    max-width: 80px;
    position: sticky;
    left: 0;
    z-index: 11;
    border-right: 1px solid white !important;
    padding: var(--mtb-space-3);
    color: var(--mtb-text-primary);
    background: #fafafd !important;
}

.mtb-day-header {
    padding: var(--mtb-space-3);
    text-align: center;
    font-weight: var(--mtb-font-bold);
    color: var(--mtb-text-primary);
    border-right: 1px solid white !important;
    background: #fafafd !important;
    width: 140px;
    min-width: 140px;
    max-width: 140px;
    position: sticky;
    top: 0;
    z-index: 10;
    font-size: var(--mtb-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mtb-day-name {
    font-size: var(--mtb-text-sm);
    font-weight: var(--mtb-font-bold);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mtb-day-date {
    font-size: var(--mtb-text-xs);
    color: var(--mtb-text-secondary);
    font-weight: var(--mtb-font-medium);
}

/* Week Table Body - VEREINHEITLICHT */
.mtb-week-table tbody {
    background: var(--mtb-surface);
}

.mtb-week-row {
    border-bottom: 1px solid white !important;
    transition: background var(--mtb-transition-fast);
}

.mtb-week-row:hover {
    background: rgba(0, 122, 255, 0.02);
}

/* Week Time Column - VEREINHEITLICHT */
.mtb-week-table .mtb-time-cell {
    padding: var(--mtb-space-3);
    font-weight: var(--mtb-font-semibold);
    color: var(--mtb-text-secondary);
    border-right: 1px solid white !important;
    position: sticky;
    left: 0;
    z-index: 2;
    backdrop-filter: blur(10px);
    width: 80px;
    min-width: 80px;
    max-width: 80px;
    text-align: center;
    background: #fafafd !important;
}

/* Week Slot Cells - VEREINHEITLICHT MIT DAY VIEW */
.mtb-week-slot {
    padding: var(--mtb-space-3);
    border-right: 1px solid white !important;
    border-bottom: 1px solid white !important;
    text-align: center;
    cursor: pointer;
    transition: all var(--mtb-transition-normal);
    position: relative;
    min-height: 44px;
    vertical-align: middle;
    font-weight: var(--mtb-font-semibold);
    border-radius: 12px;
    width: 140px;
    min-width: 140px;
    max-width: 140px;
}

.mtb-week-slot:hover:not(.mtb-slot-booked):not(.mtb-slot-past):not(.mtb-slot-unavailable) {
	transform: scale(1.05);
 box-shadow: inset 0 0 0 2px var(--mtb-primary);
 z-index: 5;
 color: var(--mtb-primary) !important;
}

/* Table Slot Hover Effects - Normal Day View */
.mtb-table-slot:hover:not(.mtb-slot-booked):not(.mtb-slot-past):not(.mtb-slot-unavailable) {
    transform: scale(1.05);
    box-shadow: inset 0 0 0 2px var(--mtb-primary);
    z-index: 5;
    cursor: pointer;
		color: var(--mtb-primary) !important;
}

/* Optional: Smooth transition for table slots */
.mtb-table-slot {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

/* Ensure hover works on touch devices too */
.mtb-table-slot:focus:not(.mtb-slot-booked):not(.mtb-slot-past):not(.mtb-slot-unavailable) {
    transform: scale(1.05);
    box-shadow: inset 0 0 0 2px var(--mtb-primary);
    z-index: 5;
    color: var(--mtb-primary) !important;
    outline: none;
}

/* Active state for table slots */
.mtb-table-slot:active:not(.mtb-slot-booked):not(.mtb-slot-past):not(.mtb-slot-unavailable) {
    transform: scale(0.98);
}

/* Week Slot States - EXAKT WIE DAY VIEW */
.mtb-week-slot.mtb-slot-available {
    background: var(--mtb-success) !important;
    color: white !important;
}

.mtb-week-slot.mtb-slot-available:hover {
    box-shadow: 0 4px 12px rgba(52, 199, 89, 0.3);
}

.mtb-week-slot.mtb-slot-premium {
    background: linear-gradient(135deg, var(--mtb-accent), #FF8C00) !important;
    color: white !important;
}

.mtb-week-slot.mtb-slot-premium:hover {
    background: linear-gradient(135deg, #E6830D, #D17500) !important;
    box-shadow: 0 4px 12px rgba(255, 149, 0, 0.3);
}

.mtb-week-slot.mtb-slot-discount {
    background: linear-gradient(135deg, #34C759, #2DB555) !important;
    color: white !important;
}

.mtb-week-slot.mtb-slot-discount:hover {
    background: linear-gradient(135deg, #2DB555, #249348) !important;
    box-shadow: 0 4px 12px rgba(52, 199, 89, 0.3);
}

.mtb-week-slot.mtb-slot-booked {
    background: var(--mtb-neutral-200) !important;
    color: var(--mtb-text-tertiary) !important;
    cursor: not-allowed;
}

.mtb-week-slot.mtb-slot-booked:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Eigene Buchungen in Wochenansicht hervorheben - BLAU WIE IM RAUMBUCHUNGSSYSTEM */
.mtb-week-slot.mtb-slot-booked.mtb-own-booking {
    background: #007aff !important;
    color: white !important;
    cursor: pointer !important;
}

.mtb-week-slot.mtb-slot-booked.mtb-own-booking:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3) !important;
}

.mtb-week-slot.mtb-slot-past {
    background: repeating-linear-gradient(
        45deg,
        #e0e0e0,
        #e0e0e0 8px,
        #d0d0d0 8px,
        #d0d0d0 16px
    ) !important;
    color: white !important;
    cursor: not-allowed !important;
    opacity: 0.7;
}

.mtb-week-slot.mtb-slot-past:hover {
    transform: none !important;
    box-shadow: none !important;
}

.mtb-week-slot.mtb-slot-selected {
    background: var(--mtb-primary) !important;
    color: white !important;
    transform: scale(1.05);
    box-shadow: var(--mtb-shadow-md);
}

.mtb-week-slot.mtb-slot-unavailable {
    background: var(--mtb-neutral-100) !important;
    color: var(--mtb-text-tertiary) !important;
    cursor: not-allowed;
}

.mtb-week-slot.mtb-slot-unavailable:hover {
    transform: none !important;
    box-shadow: none !important;
}

.mtb-week-slot .mtb-slot-price {
    font-size: var(--mtb-text-xs);
    font-weight: var(--mtb-font-bold);
}

.mtb-week-slot .mtb-slot-price small {
    font-size: 9px;
    display: block;
    margin-top: 1px;
}

.mtb-week-slot .mtb-slot-status {
    font-size: var(--mtb-text-xs);
    font-weight: var(--mtb-font-medium);
}

.mtb-week-slot .mtb-past-text {
    color: var(--mtb-text-tertiary);
    font-style: italic;
}

/* ===========================
   🚨 WOBBLE EFFECT - VON RAUMBUCHUNG ÜBERNOMMEN
   =========================== */

/* Wobble Animation für nicht verfügbare Slots */
@keyframes mtb-wobble {
    0% { transform: translateX(0); }
    15% { transform: translateX(-5px) rotate(-2deg); }
    30% { transform: translateX(4px) rotate(1deg); }
    45% { transform: translateX(-3px) rotate(-1deg); }
    60% { transform: translateX(2px) rotate(0.5deg); }
    75% { transform: translateX(-1px) rotate(-0.2deg); }
    100% { transform: translateX(0); }
}

/* Wobble Klasse für alle Slot-Typen */
.mtb-slot-wobble {
    animation: mtb-wobble 0.6s ease-in-out;
}

/* Spezifische Wobble-Effekte für verschiedene Slot-Zustände */
.mtb-time-slot.mtb-slot-wobble,
.mtb-table-slot.mtb-slot-wobble,
.mtb-week-slot.mtb-slot-wobble {
    animation: mtb-wobble 0.6s ease-in-out;
}

/* Wobble für nicht verfügbare Slots mit rotem Glow */
.mtb-slot-booked.mtb-slot-wobble,
.mtb-slot-unavailable.mtb-slot-wobble {
    animation: mtb-wobble 0.6s ease-in-out;
    box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.3) !important;
}

/* Wobble für vergangene Slots */
.mtb-slot-past.mtb-slot-wobble {
    animation: mtb-wobble 0.6s ease-in-out;
    box-shadow: 0 0 0 3px rgba(160, 160, 160, 0.3) !important;
}

/* ===========================
   📱 MOBILE RESPONSIVE - WEEK VIEW
   =========================== */

@media (max-width: 768px) {
    .mtb-week-header {
        flex-direction: column;
        gap: var(--mtb-space-3);
        text-align: center;
        padding: var(--mtb-space-4);
    }
    
    .mtb-week-table {
        min-width: 600px;
    }
    
    .mtb-day-header {
        padding: var(--mtb-space-3);
        min-width: 80px;
    }
    
    .mtb-day-name {
        font-size: var(--mtb-text-xs);
        margin-bottom: 2px;
    }
    
    .mtb-day-date {
        font-size: 10px;
    }
    
    .mtb-week-slot {
        padding: var(--mtb-space-2);
        min-height: 36px;
    }
    
    .mtb-week-slot .mtb-slot-price {
        font-size: 10px;
    }
    
    .mtb-week-slot .mtb-slot-price small {
        font-size: 8px;
    }
}

@media (max-width: 480px) {
    .mtb-week-table {
        min-width: 500px;
    }
    
    .mtb-week-header h3 {
        font-size: var(--mtb-text-base);
    }
    
    .mtb-week-range {
        font-size: var(--mtb-text-xs);
    }
    
    .mtb-day-header {
        padding: var(--mtb-space-2);
        min-width: 70px;
    }
    
    .mtb-week-slot {
        padding: var(--mtb-space-1);
        min-height: 32px;
    }
}

/* ===========================
   ♿ ACCESSIBILITY - WEEK VIEW
   =========================== */

.mtb-week-slot:focus {
    outline: 2px solid var(--mtb-primary);
    outline-offset: 2px;
}

.mtb-week-slot:focus:not(:focus-visible) {
    outline: none;
}

.mtb-week-slot:focus-visible {
    outline: 2px solid var(--mtb-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.2);
}

/* High contrast support */
@media (prefers-contrast: high) {
    .mtb-week-slot {
        border-width: 2px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .mtb-slot-wobble,
    .mtb-time-slot.mtb-slot-wobble,
    .mtb-table-slot.mtb-slot-wobble,
    .mtb-week-slot.mtb-slot-wobble {
        animation: none;
    }
    
    .mtb-week-slot:hover {
        transform: none;
    }
}

/* ===========================
  🪟 MODAL STYLES
  =========================== */

.mtb-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    padding: var(--mtb-space-4);
    opacity: 0;
    transition: opacity 0.3s ease;
    overflow: hidden;
}

.mtb-info-box {
    display: flex;
    align-items: flex-start;
    gap: var(--mtb-space-3);
    padding: var(--mtb-space-4);
    border: 1px solid var(--mtb-border);
    border-radius: var(--mtb-radius-md);
    background: var(--mtb-surface-secondary);
    margin-bottom: var(--mtb-space-4);
}

.mtb-info-box .mtb-info-icon {
    font-size: 18px;
    line-height: 1;
    margin-top: 2px;
}

.mtb-info-box .mtb-info-text {
    flex: 1;
}

.mtb-info-box .mtb-info-text p {
    margin: 0;
    color: var(--mtb-text-secondary);
}

.mtb-info-box-warning {
    border-left: 4px solid var(--mtb-warning);
    background: rgba(255, 149, 0, 0.06);
}

.mtb-info-box-success {
    border-left: 4px solid var(--mtb-success);
    background: rgba(52, 199, 89, 0.06);
}

/* Kompaktere Abstände für Form-Elemente in Info-Boxen */
.mtb-info-box .mtb-form-group {
    margin-bottom: 0;
}

.mtb-modal-overlay.show {
    opacity: 1;
}

.mtb-modal {
    background: var(--mtb-surface);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--mtb-border);
    border-radius: var(--mtb-radius-xl);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--mtb-shadow-xl);
    position: relative;
    
    /* Zoom-in Animation */
    transform: scale(0.9) translateY(20px);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateZ(0);
    /* Container isolieren */
    isolation: isolate;
    /* Rendering optimieren */
    contain: paint;
    
    /* Scrollbar komplett ausblenden aber funktionsfähig lassen */
    /* Firefox */
    scrollbar-width: none;
    /* IE/Edge */
    -ms-overflow-style: none;
}

.mtb-modal {
    transition: all 0.3s ease;
}

/* Chrome, Safari, Edge */
.mtb-modal::-webkit-scrollbar {
    display: none;
}

.mtb-modal.active {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.mtb-modal-header-container {
    position: sticky;
    top: 0;
    background: var(--mtb-surface);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 10;
    border-radius: var(--mtb-radius-xl) var(--mtb-radius-xl) 0 0;
}

.mtb-modal-header {
    padding: var(--mtb-space-6) var(--mtb-space-6) 0 var(--mtb-space-6);
    border-bottom: 1px solid var(--mtb-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: static;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.mtb-modal-title {
    font-size: var(--mtb-text-xl);
    font-weight: var(--mtb-font-bold);
    color: var(--mtb-text-primary);
}

.mtb-modal-close {
    background: var(--mtb-neutral-100);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--mtb-transition-normal);
    color: var(--mtb-text-secondary);
    flex-shrink: 0;
}

.mtb-modal-close:hover {
    background: var(--mtb-neutral-200);
    color: var(--mtb-text-primary);
    transform: scale(1.1);
}

.mtb-modal-close .mtb-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.mtb-modal-body {
    /* Das ist der entscheidende Fix */
    transform: translateZ(0);
    /* Zusätzliche Sicherheit */
    contain: layout;
    overflow: hidden;
    padding: 0;
}

.mtb-modal-footer {
    padding: var(--mtb-space-6);
    border-top: 1px solid var(--mtb-border);
    display: flex;
    gap: var(--mtb-space-4);
    justify-content: flex-end;
    position: sticky;
    bottom: 0;
    background: var(--mtb-surface);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 0 0 var(--mtb-radius-xl) var(--mtb-radius-xl);
}

/* ===========================
   🏷️ MODAL TABS - VERBESSERT
   =========================== */

.mtb-modal-tabs {
    display: flex;
    gap: 0;
    padding: var(--mtb-space-6) var(--mtb-space-6) var(--mtb-space-4) var(--mtb-space-6);
    margin: 0;
    border-bottom: 1px solid var(--mtb-border);
    position: static;
    background: var(--mtb-surface-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.mtb-tab-btn {
    flex: 1;
    padding: var(--mtb-space-3) var(--mtb-space-4);
    background: var(--mtb-surface-subtle);
    border: 1px solid var(--mtb-border);
    border-radius: var(--mtb-radius-md);
    font-size: var(--mtb-text-sm);
    font-weight: var(--mtb-font-semibold);
    color: var(--mtb-text-secondary);
    cursor: pointer;
    transition: all var(--mtb-transition-normal);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mtb-space-2);
    position: relative;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.mtb-tab-btn:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
}

.mtb-tab-btn:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.mtb-tab-btn:hover {
    background: var(--mtb-surface);
    color: var(--mtb-text-primary);
    transform: translateY(-1px);
}

.mtb-tab-btn.active {
    background: var(--mtb-primary);
    color: white;
    border-color: var(--mtb-primary);
    box-shadow: var(--mtb-shadow-md);
}

.mtb-tab-btn .mtb-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.mtb-tab-content {
    display: none;
}

.mtb-tab-content.active {
    display: block;
}

/* ===========================
  📄 BOOKING FORM SECTIONS
  =========================== */

.mtb-booking-summary {
   background: linear-gradient(135deg, var(--mtb-primary), var(--mtb-primary-light));
   color: white;
   padding: var(--mtb-space-6);
   display: flex;
   align-items: center;
   gap: var(--mtb-space-4);
}

.mtb-teacher-icon {
   width: 56px;
   height: 56px;
   background: rgba(255, 255, 255, 0.2);
   border-radius: var(--mtb-radius-md);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
}

.mtb-teacher-icon .mtb-icon {
   width: 32px;
   height: 32px;
}

.mtb-booking-info h3 {
   font-size: var(--mtb-text-xl);
   font-weight: var(--mtb-font-bold);
   margin-bottom: var(--mtb-space-1);
}

.mtb-booking-meta {
   font-size: var(--mtb-text-sm);
   opacity: 0.9;
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
}

.mtb-room-info {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   color: white;
   font-weight: 500;
}

.mtb-room-info svg {
   width: 18px;
   height: 18px;
   color: white;
}

.mtb-form-section {
   padding: var(--mtb-space-6);
   border-bottom: 1px solid var(--mtb-border);
   opacity: 0;
   transform: translateY(20px);
   animation: mtb-slide-up 0.6s ease forwards;
   overflow: hidden;
   contain: layout;
}

.mtb-form-section:nth-child(1) { animation-delay: 0.1s; }
.mtb-form-section:nth-child(2) { animation-delay: 0.2s; }
.mtb-form-section:nth-child(3) { animation-delay: 0.3s; }
.mtb-form-section:nth-child(4) { animation-delay: 0.4s; }
.mtb-form-section:nth-child(5) { animation-delay: 0.5s; }

.mtb-section-title {
   font-size: var(--mtb-text-base);
   font-weight: var(--mtb-font-semibold);
   color: var(--mtb-text-primary);
   margin-bottom: var(--mtb-space-4);
   display: flex;
   align-items: center;
   gap: var(--mtb-space-2);
}

.mtb-section-title .mtb-icon {
   width: 20px;
   height: 20px;
   color: var(--mtb-primary);
}

/* ===========================
  ⏰ TIME SELECTOR
  =========================== */

.mtb-time-selector {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
   gap: var(--mtb-space-2);
}

.mtb-day-group {
   margin-bottom: var(--mtb-space-4);
}

.mtb-day-label {
   font-size: var(--mtb-text-sm);
   font-weight: var(--mtb-font-bold);
   color: var(--mtb-text-primary);
   margin-bottom: var(--mtb-space-2);
   padding: var(--mtb-space-2) var(--mtb-space-3);
   background: var(--mtb-surface-subtle);
   border-radius: var(--mtb-radius-sm);
}

.mtb-day-slots {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
   gap: var(--mtb-space-2);
}

.mtb-time-option {
   background: var(--mtb-neutral-100);
   border: 2px solid transparent;
   border-radius: var(--mtb-radius-md);
   padding: var(--mtb-space-3);
   text-align: center;
   cursor: pointer;
   transition: all var(--mtb-transition-normal);
   font-weight: var(--mtb-font-semibold);
   font-size: var(--mtb-text-sm);
   position: relative;
}

.mtb-time-option:hover:not(.mtb-time-option-disabled):not(.mtb-time-option-past) {
    background: var(--mrb-primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--mrb-shadow-md);
}

.mtb-time-option.mtb-time-option-selected {
   background: var(--mtb-primary);
    color: white !important; /* Explizit weiß */
   border-color: var(--mtb-primary);
   transform: translateY(-2px);
   box-shadow: var(--mtb-shadow-md);
}

.mtb-time-option.mtb-time-option-premium {
   background: var(--mtb-accent);
   color: white;
}

.mtb-time-option.mtb-time-option-discount {
   background: var(--mtb-success);
   color: white;
}

.mtb-time-option.mtb-time-option-disabled,
.mtb-time-option.mtb-time-option-past {
   background: repeating-linear-gradient(
       45deg,
       #e0e0e0,
       #e0e0e0 8px,
       #d0d0d0 8px,
       #d0d0d0 16px
   ) !important;
   color: white !important;
   cursor: not-allowed !important;
   opacity: 0.7;
   border: 2px solid var(--mtb-neutral-300) !important;
}

.mtb-time-option.mtb-time-option-disabled:hover,
.mtb-time-option.mtb-time-option-past:hover {
   transform: none !important;
   box-shadow: none !important;
}

.mtb-time-label {
   font-size: var(--mtb-text-sm);
   margin-bottom: var(--mtb-space-1);
}

.mtb-time-price {
   font-size: var(--mtb-text-xs);
   font-weight: var(--mtb-font-bold);
}

.mtb-time-price.mtb-price-premium {
   position: relative;
}

.mtb-time-price.mtb-price-discount {
   position: relative;
}

.mtb-surcharge-badge {
   font-size: 9px;
   padding: 1px 3px;
   border-radius: 3px;
   margin-left: 2px;
   background: rgba(255, 255, 255, 0.3);
   color: white;
}

.mtb-discount-badge {
   font-size: 9px;
   padding: 1px 3px;
   border-radius: 3px;
   margin-left: 2px;
   background: rgba(255, 255, 255, 0.3);
   color: white;
}

.mtb-time-past {
   color: var(--mtb-text-tertiary);
   font-style: italic;
}

/* ===========================
  📝 FORM CONTROLS
  =========================== */

.mtb-form-row {
   display: grid;
   grid-template-columns: 1fr;
   gap: var(--mtb-space-4);
}

.mtb-form-group {
   display: flex;
   flex-direction: column;
   gap: var(--mtb-space-2);
    margin-bottom: var(--mtb-space-4); /* 16px Abstand nach jeder Gruppe */

}

.mtb-form-label {
   font-size: var(--mtb-text-sm);
   font-weight: var(--mtb-font-semibold);
   color: var(--mtb-text-secondary);
   text-transform: uppercase;
   letter-spacing: 0.05em;
}

.mtb-form-control {
   background: var(--mtb-neutral-100);
   border: 2px solid transparent;
   border-radius: var(--mtb-radius-md);
   padding: var(--mtb-space-3) var(--mtb-space-4);
   font-size: var(--mtb-text-base);
   font-weight: var(--mtb-font-medium);
   color: var(--mtb-text-primary);
   transition: all var(--mtb-transition-normal);
}

.mtb-form-control:focus {
   outline: none;
   border-color: var(--mtb-primary);
   background: white;
   box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

/* Error state for required fields */
.mtb-form-control.mtb-field-error {
   border-color: var(--mtb-error) !important;
   box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.1) !important;
}

.mtb-form-control.mtb-field-error:focus {
   border-color: var(--mtb-error) !important;
   box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.2) !important;
}

/* ===========================
   🎵 SPECIALS SECTION - EIGENE CHECKBOX IM RADIO-STYLE
   =========================== */

/* Verstecke die originale Checkbox */
.mtb-special-item input[type="checkbox"] {
    display: none;
}

/* Specials Grid */
.mtb-specials-grid {
    display: flex;
    flex-direction: column;
    gap: var(--mtb-space-3);
    margin-top: var(--mtb-space-4);
}

/* Special Item */
.mtb-special-item {
    background: var(--mtb-surface);
    border: 1px solid var(--mtb-border);
    border-radius: var(--mtb-radius-lg);
    padding: 0;
    transition: all var(--mtb-transition-normal);
    cursor: pointer;
}

.mtb-special-item:hover {
    border-color: var(--mtb-primary);
    background: rgba(0, 122, 255, 0.05);
    transform: translateY(-1px);
    box-shadow: var(--mtb-shadow-sm);
}

.mtb-special-item:has(input[type="checkbox"]:checked),
.mtb-special-item.selected {
    border-color: var(--mtb-primary);
    background: rgba(0, 122, 255, 0.1);
}

/* Special Option Label */
.mtb-special-option {
    display: flex;
    align-items: center;
    gap: var(--mtb-space-3);
    padding: var(--mtb-space-4);
    cursor: pointer;
    width: 100%;
    margin: 0;
}

/* ✅ EIGENE CHECKBOX-KLASSE - identisches Styling wie mtb-radio-custom */
.mtb-special-checkbox-custom {
    width: 20px;
    height: 20px;
    border: 2px solid var(--mtb-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--mtb-transition-normal);
    flex-shrink: 0;
    position: relative;
    background: var(--mtb-surface);
}

/* ✅ RICHTIG - Direkte Geschwister-Selektion: */
.mtb-special-item input[type="checkbox"]:checked + .mtb-special-checkbox-custom {
    border-color: var(--mtb-primary);
    background: var(--mtb-primary);
}

.mtb-special-item input[type="checkbox"]:checked + .mtb-special-checkbox-custom::after {
    content: '';
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Special Content */
.mtb-special-content {
    display: flex;
    align-items: flex-start;
    gap: var(--mtb-space-3);
    flex: 1;
}

/* Special Icon */
.mtb-special-icon {
    width: 24px;
    height: 24px;
    color: var(--mtb-primary);
    flex-shrink: 0;
    margin-top: 2px;
}

.mtb-special-icon {
   position: absolute;
   top: var(--mtb-space-4);
   right: var(--mtb-space-4);
   margin-top: 0;
}

.mtb-special-item {
   position: relative;
}

/* Special Info */
.mtb-special-info {
    flex: 1;
}

.mtb-special-info h4 {
    font-size: var(--mtb-text-base);
    font-weight: var(--mtb-font-semibold);
    color: var(--mtb-text-primary);
    margin: 0 0 var(--mtb-space-1) 0;
    line-height: 1.4;
}

.mtb-special-info p {
    font-size: var(--mtb-text-sm);
    color: var(--mtb-text-secondary);
    margin: 0 0 var(--mtb-space-2) 0;
    line-height: 1.5;
}

/* Special Price */
.mtb-special-price {
    font-size: var(--mtb-text-sm);
    font-weight: var(--mtb-font-bold);
    color: var(--mtb-primary);
    background: rgba(0, 122, 255, 0.1);
    padding: var(--mtb-space-1) var(--mtb-space-2);
    border-radius: var(--mtb-radius-sm);
    display: inline-block;
}

/* Wing Upgrade Styling */
.mtb-wing-upgrade .mtb-special-icon {
    color: var(--mtb-accent);
}

.mtb-wing-upgrade .mtb-special-price {
    background: rgba(255, 149, 0, 0.1);
    color: var(--mtb-accent);
}

/* Warm Up Styling */
.mtb-warm-up .mtb-special-icon {
    color: var(--mtb-success);
}

.mtb-warm-up .mtb-special-price {
    background: rgba(52, 199, 89, 0.1);
    color: var(--mtb-success);
}

/* Focus State */
.mtb-special-item input[type="checkbox"]:focus + .mtb-special-option {
    outline: 2px solid var(--mtb-primary);
    outline-offset: 2px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .mtb-special-option {
        padding: var(--mtb-space-3);
        gap: var(--mtb-space-2);
    }
    
    .mtb-special-content {
        gap: var(--mtb-space-2);
    }
    
    .mtb-special-icon {
        width: 20px;
        height: 20px;
    }
    
    .mtb-special-info h4 {
        font-size: var(--mtb-text-sm);
    }
    
    .mtb-special-info p {
        font-size: var(--mtb-text-xs);
    }
    
    .mtb-special-price {
        font-size: var(--mtb-text-xs);
        padding: 2px 6px;
    }
}

/* ===========================
  💰 COST BREAKDOWN - VERBESSERT
  =========================== */

.mtb-cost-breakdown {
   background: var(--mtb-surface-glass);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border: 1px solid var(--mtb-border);
   border-radius: var(--mtb-radius-lg);
   padding: var(--mtb-space-5);
   margin-top: var(--mtb-space-4);
}

.mtb-cost-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: var(--mtb-space-4);
}

.mtb-cost-title {
   font-size: var(--mtb-text-base);
   font-weight: var(--mtb-font-bold);
   color: var(--mtb-text-primary);
}

.mtb-cost-total {
   font-size: var(--mtb-text-xl);
   font-weight: var(--mtb-font-extrabold);
   color: var(--mtb-primary);
}

.mtb-cost-items {
   display: flex;
   flex-direction: column;
   gap: var(--mtb-space-3);
}

.mtb-cost-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: var(--mtb-text-sm);
   opacity: 0;
   transform: translateX(-10px);
   animation: mtb-slide-in 0.4s ease forwards;
}

.mtb-cost-item:nth-child(1) { animation-delay: 0.1s; }
.mtb-cost-item:nth-child(2) { animation-delay: 0.2s; }
.mtb-cost-item:nth-child(3) { animation-delay: 0.3s; }
.mtb-cost-item:nth-child(4) { animation-delay: 0.4s; }
.mtb-cost-item:nth-child(5) { animation-delay: 0.5s; }

.mtb-cost-label {
   color: var(--mtb-text-secondary);
}

.mtb-cost-value {
   font-weight: var(--mtb-font-semibold);
   color: var(--mtb-text-primary);
}

.mtb-cost-divider {
   height: 1px;
   background: var(--mtb-border);
   margin: var(--mtb-space-3) 0;
}

.mtb-cost-total-item {
   padding-top: var(--mtb-space-2);
   border-top: 1px solid var(--mtb-border);
   font-size: var(--mtb-text-base);
}

.mtb-cost-loading {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--mtb-space-3);
   padding: var(--mtb-space-6);
   color: var(--mtb-text-secondary);
}

.mtb-calculation-error {
   display: flex;
   align-items: center;
   gap: var(--mtb-space-3);
   padding: var(--mtb-space-4);
   background: rgba(255, 59, 48, 0.1);
   border: 1px solid rgba(255, 59, 48, 0.2);
   border-radius: var(--mtb-radius-md);
   color: var(--mtb-error);
}

.mtb-calculation-error .mtb-icon {
   width: 20px;
   height: 20px;
   flex-shrink: 0;
}

.mtb-wing-upgrade-detail {
   color: var(--mtb-wing-upgrade);
}

.mtb-warm-up-detail {
   color: var(--mtb-warm-up);
}

/* ===========================
  👤 USER CREDITS - RECHTS AUSGERICHTET
  =========================== */

.mtb-user-credits {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: var(--mtb-space-2);
   margin-top: var(--mtb-space-4);
   padding-top: var(--mtb-space-3);
   border-top: 1px solid var(--mtb-border);
   font-size: var(--mtb-text-sm);
}

.mtb-user-credits .mtb-credits-label {
   color: var(--mtb-text-secondary);
   font-weight: var(--mtb-font-medium);
}

.mtb-credits-label {
   color: white;
   font-weight: var(--mtb-font-medium);
}

.mtb-credits-value {
   font-weight: var(--mtb-font-bold);
   color: var(--mtb-primary);
}

/* ===========================
  📋 BOOKING TYPE SELECTOR - VERBESSERT
  =========================== */

.mtb-booking-type-selector {
   display: flex;
   gap: var(--mtb-space-3);
   margin-bottom: var(--mtb-space-4);
   padding: var(--mtb-space-3);
   background: var(--mtb-surface-glass);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border: 1px solid var(--mtb-border);
   border-radius: var(--mtb-radius-lg);
}

.mtb-booking-type-option {
   flex: 1;
   display: flex;
   align-items: center;
   gap: var(--mtb-space-3);
   cursor: pointer;
   font-weight: var(--mtb-font-semibold);
   padding: var(--mtb-space-3) var(--mtb-space-4);
   border-radius: var(--mtb-radius-md);
   transition: all var(--mtb-transition-normal);
   background: var(--mtb-surface-subtle);
   border: 1px solid var(--mtb-border);
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
}

.mtb-booking-type-option:hover {
   background: var(--mtb-surface);
   transform: translateY(-1px);
   box-shadow: var(--mtb-shadow-sm);
}

.mtb-booking-type-option input[type="radio"] {
   display: none;
}

/* Radio Custom */
.mtb-booking-type-option .mtb-radio-custom {
   width: 20px;
   height: 20px;
   border: 2px solid var(--mtb-border);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all var(--mtb-transition-normal);
   flex-shrink: 0;
   position: relative;
   background: var(--mtb-surface);
}

.mtb-booking-type-option input[type="radio"]:checked + .mtb-radio-custom {
   border-color: white;
   background: var(--mtb-primary);
}

.mtb-booking-type-option input[type="radio"]:checked + .mtb-radio-custom::after {
   content: '';
   width: 8px;
   height: 8px;
   background: white;
   border-radius: 50%;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

/* ✅ ERGÄNZUNG: Radio Custom für andere Bereiche (allgemein verwendbar) */
.mtb-radio-option .mtb-radio-custom,
.mtb-special-option .mtb-radio-custom {
   width: 20px;
   height: 20px;
   border: 2px solid var(--mtb-border);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all var(--mtb-transition-normal);
   flex-shrink: 0;
   position: relative;
   background: var(--mtb-surface);
}

/* ✅ ERGÄNZUNG: Radio Custom checked state für normale Radio-Buttons */
.mtb-radio-option input[type="radio"]:checked + .mtb-radio-custom {
   border-color: var(--mtb-primary);
   background: var(--mtb-primary);
}

.mtb-radio-option input[type="radio"]:checked + .mtb-radio-custom::after {
   content: '';
   width: 8px;
   height: 8px;
   background: white;
   border-radius: 50%;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

/* ✅ ERGÄNZUNG: Radio Custom checked state für Checkboxes in Specials */
.mtb-special-item input[type="checkbox"]:checked + .mtb-special-option .mtb-radio-custom {
   border-color: var(--mtb-primary);
   background: var(--mtb-primary);
}

.mtb-special-item input[type="checkbox"]:checked + .mtb-special-option .mtb-radio-custom::after {
   content: '';
   width: 8px;
   height: 8px;
   background: white;
   border-radius: 50%;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

/* Selected state for booking type */
.mtb-booking-type-option:has(input:checked) {
   background: var(--mtb-primary);
   color: white;
   border-color: var(--mtb-primary);
   transform: translateY(-2px);
   box-shadow: var(--mtb-shadow-md);
}

.mtb-booking-type-option.selected {
   background: var(--mtb-primary);
   color: white;
   border-color: var(--mtb-primary);
   transform: translateY(-2px);
   box-shadow: var(--mtb-shadow-md);
}

/* ===========================
  👤 EINZELBUCHUNG - Radio Options
  =========================== */

#mtb-single-booking {
   padding: var(--mtb-space-4);
   background: var(--mtb-surface-subtle);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border-radius: var(--mtb-radius-lg);
   border: 1px solid var(--mtb-border);
}

.mtb-radio-group {
   display: flex;
   flex-direction: column;
   gap: var(--mtb-space-2);
   max-height: 200px;
}

/* Radio Option */
.mtb-radio-option {
   display: flex;
   align-items: center;
   gap: var(--mtb-space-3);
   padding: var(--mtb-space-3) var(--mtb-space-4);
   border: 1px solid var(--mtb-border);
   border-radius: var(--mtb-radius-md);
   cursor: pointer;
   transition: all var(--mtb-transition-normal);
   background: var(--mtb-surface);
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
}

.mtb-radio-option:hover {
   border-color: var(--mtb-primary);
   background: rgba(0, 122, 255, 0.05);
   transform: translateY(-1px);
}

.mtb-radio-option.selected {
   border-color: var(--mtb-primary);
   background: rgba(0, 122, 255, 0.1);
}

.mtb-radio-option input[type="radio"] {
   display: none;
}

/* Radio Custom */
.mtb-radio-option .mtb-radio-custom {
   width: 20px;
   height: 20px;
   border: 2px solid var(--mtb-border);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all var(--mtb-transition-normal);
   flex-shrink: 0;
   position: relative;
   background: var(--mtb-surface);
}

.mtb-radio-option input[type="radio"]:checked + .mtb-radio-custom {
   border-color: var(--mtb-primary);
   background: var(--mtb-primary);
}

.mtb-radio-option input[type="radio"]:checked + .mtb-radio-custom::after {
   content: '';
   width: 8px;
   height: 8px;
   background: white;
   border-radius: 50%;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

/* ===========================
  👥 GRUPPENBUCHUNG
  =========================== */

.mtb-multiple-booking {
   margin-top: var(--mtb-space-4);
   padding: var(--mtb-space-4);
   background: var(--mtb-surface-subtle);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border-radius: var(--mtb-radius-lg);
   border: 1px solid var(--mtb-border);
}

.mtb-multiple-selection-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: var(--mtb-space-4);
   padding: var(--mtb-space-3) var(--mtb-space-4);
   background: var(--mtb-surface);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border-radius: var(--mtb-radius-md);
   border: 1px solid var(--mtb-border);
}

.mtb-selection-count {
   font-weight: var(--mtb-font-bold);
   color: var(--mtb-text-primary);
   font-size: var(--mtb-text-sm);
}

.mtb-selection-summary {
   font-size: var(--mtb-text-xs);
   color: var(--mtb-text-secondary);
   margin-top: var(--mtb-space-1);
}

.mtb-btn-select-all {
   background: var(--mtb-primary);
   color: white;
   border: none;
   padding: var(--mtb-space-2) var(--mtb-space-3);
   border-radius: var(--mtb-radius-md);
   font-size: var(--mtb-text-sm);
   font-weight: var(--mtb-font-semibold);
   cursor: pointer;
   transition: all var(--mtb-transition-normal);
}

.mtb-btn-select-all:hover {
   background: #0056CC;
   transform: translateY(-1px);
   box-shadow: var(--mtb-shadow-sm);
}

.mtb-btn-select-all.deselect {
   background: var(--mtb-neutral-400);
}

.mtb-btn-select-all.deselect:hover {
   background: var(--mtb-neutral-500);
}

.mtb-multiple-checkbox-group {
   display: flex;
   flex-direction: column;
   gap: var(--mtb-space-2);
   max-height: 200px;
   overflow-y: auto;
}

.mtb-multiple-checkbox-option {
   display: flex;
   align-items: center;
   gap: var(--mtb-space-3);
   padding: var(--mtb-space-3) var(--mtb-space-4);
   border: 1px solid var(--mtb-border);
   border-radius: var(--mtb-radius-md);
   cursor: pointer;
   transition: all var(--mtb-transition-normal);
   background: var(--mtb-surface);
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
}

.mtb-multiple-checkbox-option:hover {
   border-color: var(--mtb-primary);
   background: rgba(0, 122, 255, 0.05);
   transform: translateY(-1px);
}

.mtb-multiple-checkbox-option.selected {
   border-color: var(--mtb-primary);
   background: rgba(0, 122, 255, 0.1);
}

.mtb-multiple-checkbox-option input[type="checkbox"] {
   display: none;
}

.mtb-multiple-checkbox-custom {
   width: 20px;
   height: 20px;
   border: 2px solid var(--mtb-border);
   border-radius: var(--mtb-radius-sm);
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all var(--mtb-transition-normal);
   flex-shrink: 0;
   background: var(--mtb-surface);
}

.mtb-multiple-checkbox-option input[type="checkbox"]:checked + .mtb-multiple-checkbox-custom {
   border-color: var(--mtb-primary);
   background: var(--mtb-primary);
}

.mtb-multiple-checkbox-option input[type="checkbox"]:checked + .mtb-multiple-checkbox-custom::after {
   content: '✓';
   color: white;
   font-size: 14px;
   font-weight: bold;
}

/* ===========================
  ☑️ AGB CHECKBOX & AUTHORIZATION
  =========================== */

.mtb-required-checkbox {
   border: 1px solid var(--mtb-border);
   border-radius: var(--mtb-radius-lg);
   padding: var(--mtb-space-4);
   background: var(--mtb-surface-subtle);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   margin-top: var(--mtb-space-3);
}

.mtb-checkbox-option {
   display: flex;
   align-items: flex-start;
   gap: var(--mtb-space-3);
   cursor: pointer;
   line-height: 1.5;
}

.mtb-checkbox-option input[type="checkbox"] {
   display: none;
}

.mtb-checkbox-custom {
   width: 20px;
   height: 20px;
   border: 2px solid var(--mtb-border);
   border-radius: var(--mtb-radius-sm);
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all var(--mtb-transition-normal);
   flex-shrink: 0;
   margin-top: 2px;
   background: var(--mtb-surface);
}

.mtb-checkbox-option input[type="checkbox"]:checked + .mtb-checkbox-custom {
   border-color: var(--mtb-primary);
   background: var(--mtb-primary);
}

.mtb-checkbox-option input[type="checkbox"]:checked + .mtb-checkbox-custom::after {
   content: '✓';
   color: white;
   font-size: 14px;
   font-weight: bold;
}

.mtb-link {
   color: var(--mtb-primary);
   text-decoration: none;
}

.mtb-link:hover {
   text-decoration: underline;
}

.mtb-required {
   color: var(--mtb-error);
   font-weight: bold;
}

/* ===========================
  🔘 BUTTONS
  =========================== */

.mtb-btn {
   border: none;
   border-radius: var(--mtb-radius-md);
   padding: var(--mtb-space-3) var(--mtb-space-6);
   font-size: var(--mtb-text-base);
   font-weight: var(--mtb-font-semibold);
   cursor: pointer;
   transition: all var(--mtb-transition-normal);
   display: flex;
   align-items: center;
   gap: var(--mtb-space-2);
   position: relative;
   overflow: hidden;
}

.mtb-btn-secondary {
   background: var(--mtb-neutral-100);
   color: var(--mtb-text-primary);
}

.mtb-btn-secondary:hover {
   background: var(--mtb-neutral-200);
   transform: translateY(-1px);
}

.mtb-btn-primary {
   background: var(--mtb-primary);
   color: white;
}

.mtb-btn-primary:hover:not(:disabled) {
   background: #0056CC;
   transform: translateY(-1px);
   box-shadow: var(--mtb-shadow-md);
}

.mtb-btn-primary:disabled,
.mtb-btn.mtb-btn-disabled {
   background: var(--mtb-neutral-300);
   color: var(--mtb-text-tertiary);
   cursor: not-allowed;
   transform: none;
}

.mtb-btn .mtb-icon {
   width: 18px;
   height: 18px;
}

.mtb-btn-text {
   /* Verhindert Layout-Sprünge beim Laden */
}

.mtb-btn-spinner {
   display: none;
   align-items: center;
   gap: var(--mtb-space-2);
}

/* ===========================
  👨‍🏫 TEACHER INFO TAB
  =========================== */

/* Teacher Hero Section - Neues Layout mit Bild links neben Namen */
.mtb-teacher-hero-section {
    background: linear-gradient(135deg, #007AFF, #5AC8FA);
    padding: var(--mtb-space-6);
    color: white;
    opacity: 0;
    transform: translateY(20px);
    animation: mtb-slide-up 0.6s ease forwards;
    animation-delay: 0.1s;
}

.mtb-hero-content {
    display: flex;
    flex-direction: column;
    gap: var(--mtb-space-6);
    max-width: 1000px;
    margin: 0 auto;
}

/* NEU: Header mit Bild und Name nebeneinander */
.mtb-teacher-hero-header {
    display: flex;
    align-items: flex-start;
    gap: var(--mtb-space-6);
}

/* Teacher Image - kleiner und rund */
.mtb-teacher-hero-image {
    width: 120px;
    height: 120px;
    min-width: 120px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    background: var(--mtb-neutral-200);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mtb-teacher-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Teacher Info - nimmt restlichen Platz */
.mtb-teacher-hero-info {
    flex: 1;
}

/* Info Kacheln - volle Breite */
.mtb-hero-info-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--mtb-space-3);
    width: 100%;
}

.mtb-teacher-extended-info {
    margin-top: var(--mtb-space-4);
    padding: var(--mtb-space-4);
    background: var(--mtb-surface);
    border: 1px solid var(--mtb-border);
    border-radius: var(--mtb-radius-md);
}

.mtb-info-section-title {
    font-size: var(--mtb-font-lg);
    font-weight: var(--mtb-font-semibold);
    color: var(--mtb-text-primary);
    margin-bottom: var(--mtb-space-3);
}

.mtb-info-section-content {
    font-size: var(--mtb-font-base);
    color: var(--mtb-text-secondary);
    line-height: 1.6;
}

@media (max-width: 768px) {
    .mtb-hero-info-tiles {
        grid-template-columns: 1fr;
    }
}

.mtb-info-tile {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--mtb-radius-md);
    padding: var(--mtb-space-4) var(--mtb-space-6);
    text-align: center;
    transition: all var(--mtb-transition-normal);
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--mtb-space-4);
}

.mtb-info-tile-icon {
    width: 24px;
    height: 24px;
    opacity: 0.9;
    margin: 0;
}

.mtb-info-tile-label {
    font-size: var(--mtb-text-xs);
    font-weight: var(--mtb-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.9;
    margin: 0;
}

.mtb-info-tile-value {
    font-size: var(--mtb-text-sm);
    font-weight: var(--mtb-font-bold);
    margin-left: auto;
}

.mtb-info-tile:hover {
   background: rgba(255, 255, 255, 0.25);
   transform: translateY(-2px);
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.mtb-info-tile-icon {
   width: 24px;
   height: 24px;
   opacity: 0.9;
   margin: 0 auto var(--mtb-space-2);
}

.mtb-info-tile-label {
   font-size: var(--mtb-text-xs);
   font-weight: var(--mtb-font-semibold);
   text-transform: uppercase;
   letter-spacing: 0.05em;
   opacity: 0.9;
   margin-bottom: var(--mtb-space-1);
}

.mtb-info-tile-value {
   font-size: var(--mtb-text-sm);
   font-weight: var(--mtb-font-bold);
}

/* Teacher Qualifications */
.mtb-teacher-qualifications {
   display: flex;
   flex-wrap: wrap;
   gap: var(--mtb-space-2);
}

.mtb-qualification-tag {
   background: var(--mtb-neutral-100);
   padding: var(--mtb-space-2) var(--mtb-space-3);
   border-radius: var(--mtb-radius-full);
   font-size: var(--mtb-text-sm);
   font-weight: var(--mtb-font-medium);
   color: var(--mtb-text-primary);
   border: 1px solid var(--mtb-border);
}

/* Teaching Methods */
.mtb-teaching-methods {
   display: flex;
   flex-wrap: wrap;
   gap: var(--mtb-space-2);
}

.mtb-method-tag {
   background: rgba(0, 122, 255, 0.1);
   color: var(--mtb-primary);
   padding: var(--mtb-space-2) var(--mtb-space-3);
   border-radius: var(--mtb-radius-full);
   font-size: var(--mtb-text-sm);
   font-weight: var(--mtb-font-medium);
   border: 1px solid rgba(0, 122, 255, 0.2);
}

.mtb-text-secondary {
   color: var(--mtb-text-secondary);
   font-style: italic;
}

/* ===========================
  🍞 TOAST NOTIFICATIONS
  =========================== */

.mtb-toast {
   position: fixed;
   top: 20px;
   right: 20px;
   min-width: 300px;
   max-width: 400px;
   padding: 16px 20px;
   background: white;
   border-radius: 8px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   transform: translateX(450px);
   transition: transform 0.3s ease;
   z-index: var(--mtb-z-toast);
   font-size: 14px;
   font-weight: 500;
}

.mtb-toast.mtb-toast-show {
   transform: translateX(0);
}

.mtb-toast-success {
   border-left: 4px solid #34C759;
}

.mtb-toast-error {
   border-left: 4px solid #FF3B30;
}

.mtb-toast-warning {
   border-left: 4px solid #FF9500;
}

.mtb-toast-info {
   border-left: 4px solid #007AFF;
}

.mtb-toast-icon {
   flex-shrink: 0;
}

.mtb-toast-icon .mtb-icon {
   flex-shrink: 0;
   width: 20px;
   height: 20px;
}

.mtb-toast-success .mtb-toast-icon {
   color: #34C759;
}

.mtb-toast-error .mtb-toast-icon {
   color: #FF3B30;
}

.mtb-toast-warning .mtb-toast-icon {
   color: #FF9500;
}

.mtb-toast-info .mtb-toast-icon {
   color: #007AFF;
}

.mtb-toast-content {
   flex: 1;
}

.mtb-toast-message {
   font-size: 14px;
   font-weight: 500;
   color: #1d1d1f;
   line-height: 1.4;
   margin: 0;
}

.mtb-toast-close {
   background: none;
   border: none;
   font-size: 20px;
   cursor: pointer;
   color: #8e8e93;
   padding: 0;
   margin-left: 12px;
}

.mtb-toast-close:hover {
   color: #1d1d1f;
}

.mtb-toast-close .mtb-icon {
   width: 16px;
   height: 16px;
}

/* ===========================
  📊 ENHANCED LEGEND
  =========================== */

.mtb-legend {
   background: var(--mtb-surface);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border: 1px solid var(--mtb-border);
   border-radius: var(--mtb-radius-lg);
   padding: var(--mtb-space-5);
   margin-bottom: var(--mtb-space-6);
   box-shadow: var(--mtb-shadow-md);
}

.mtb-legend-title {
   font-size: var(--mtb-text-base);
   font-weight: var(--mtb-font-semibold);
   color: var(--mtb-text-primary);
   margin-bottom: var(--mtb-space-4);
   display: flex;
   align-items: center;
   gap: var(--mtb-space-2);
   border-bottom: 1px solid var(--mtb-border);
   padding-bottom: var(--mtb-space-3);
}

.mtb-legend-title .mtb-icon {
   width: 18px;
   height: 18px;
   color: var(--mtb-primary);
}

.mtb-legend-items {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: var(--mtb-space-3);
   margin-bottom: var(--mtb-space-4);
}

.mtb-legend-item {
   display: flex;
   align-items: center;
   gap: var(--mtb-space-2);
   font-size: var(--mtb-text-sm);
   font-weight: var(--mtb-font-medium);
   color: var(--mtb-text-primary);
   padding: var(--mtb-space-2);
   border-radius: var(--mtb-radius-sm);
   transition: all var(--mtb-transition-fast);
}

.mtb-legend-item:hover {
   background: var(--mtb-surface-subtle);
   transform: translateX(2px);
}

.mtb-legend-color {
   width: 16px;
   height: 16px;
   border-radius: var(--mtb-radius-sm);
   flex-shrink: 0;
   border: 1px solid var(--mtb-border-light);
   box-shadow: var(--mtb-shadow-sm);
}

/* Standard Legend Colors */
.mtb-legend-color.mtb-available {
   background: var(--mtb-success);
}

.mtb-legend-color.mtb-premium {
   background: linear-gradient(135deg, var(--mtb-accent), #FF8C00);
}

.mtb-legend-color.mtb-discount {
   background: linear-gradient(135deg, #34C759, #2DB555);
}

.mtb-legend-color.mtb-booked {
   background: var(--mtb-neutral-300);
}

.mtb-legend-color.mtb-selected {
   background: var(--mtb-primary);
   box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.3);
}

.mtb-legend-color.mtb-flatrate-only {
   background: linear-gradient(45deg, var(--mtb-success), var(--mtb-primary));
}

.mtb-legend-color.mtb-past {
   background: repeating-linear-gradient(
       45deg,
       #e0e0e0,
       #e0e0e0 3px,
       #d0d0d0 3px,
       #d0d0d0 6px
   );
   opacity: 0.8;
}

.mtb-legend-color.mtb-no-times {
   background: var(--mtb-neutral-200);
   border: 2px dashed var(--mtb-neutral-400);
}

/* ===========================
  🚫 EMPTY & ERROR STATES
  =========================== */

.mtb-empty-state,
.mtb-error-state {
   text-align: center;
   padding: var(--mtb-space-16) var(--mtb-space-8);
}

.mtb-empty-animation,
.mtb-error-animation {
   margin-bottom: var(--mtb-space-6);
}

.mtb-empty-animation .mtb-icon,
.mtb-error-animation .mtb-icon {
   width: 64px;
   height: 64px;
   color: var(--mtb-text-tertiary);
   animation: mtb-float 3s ease-in-out infinite;
}

.mtb-empty-content h3,
.mtb-error-content h3 {
   font-size: var(--mtb-text-2xl);
   font-weight: var(--mtb-font-bold);
   color: var(--mtb-text-primary);
   margin-bottom: var(--mtb-space-3);
}

.mtb-empty-content p,
.mtb-error-content p {
   font-size: var(--mtb-text-base);
   color: var(--mtb-text-secondary);
   margin-bottom: var(--mtb-space-6);
}

.mtb-no-booking-times-table {
   text-align: center;
   padding: var(--mtb-space-12) var(--mtb-space-8);
   background: var(--mtb-surface-subtle);
   border-radius: var(--mtb-radius-lg);
   margin: var(--mtb-space-4);
}

.mtb-no-booking-times-table .mtb-icon {
   width: 48px;
   height: 48px;
   color: var(--mtb-text-tertiary);
   margin-bottom: var(--mtb-space-4);
}

.mtb-no-booking-times-table h3 {
   font-size: var(--mtb-text-xl);
   font-weight: var(--mtb-font-bold);
   color: var(--mtb-text-primary);
   margin-bottom: var(--mtb-space-3);
}

.mtb-no-booking-times-table p {
   font-size: var(--mtb-text-base);
   color: var(--mtb-text-secondary);
}

/* ===========================
  🔔 LOGIN NOTICE
  =========================== */

.mtb-login-notice {
   background: var(--mtb-surface);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border: 1px solid var(--mtb-border);
   border-radius: var(--mtb-radius-lg);
   padding: var(--mtb-space-6);
   margin-bottom: var(--mtb-space-6);
   border-left: 4px solid var(--mtb-warning);
}

.mtb-notice-content {
   display: flex;
   align-items: flex-start;
   gap: var(--mtb-space-4);
}

.mtb-notice-content .mtb-icon {
   width: 24px;
   height: 24px;
   color: var(--mtb-warning);
   flex-shrink: 0;
   margin-top: 2px;
}

.mtb-notice-text strong {
   font-size: var(--mtb-text-base);
   font-weight: var(--mtb-font-semibold);
   color: var(--mtb-text-primary);
   display: block;
   margin-bottom: var(--mtb-space-2);
}

.mtb-notice-text p {
   font-size: var(--mtb-text-sm);
   color: var(--mtb-text-secondary);
   margin: 0;
}

.mtb-login-link {
   color: var(--mtb-primary);
   text-decoration: none;
   font-weight: var(--mtb-font-medium);
}

.mtb-login-link:hover {
   text-decoration: underline;
}

/* ===========================
  🎭 ANIMATIONS
  =========================== */

@keyframes mtb-spin {
   to {
       transform: rotate(360deg);
   }
}

@keyframes mtb-slide-up {
   from {
       opacity: 0;
       transform: translateY(20px);
   }
   to {
       opacity: 1;
       transform: translateY(0);
   }
}

@keyframes mtb-slide-in {
   from {
       opacity: 0;
       transform: translateX(-10px);
   }
   to {
       opacity: 1;
       transform: translateX(0);
   }
}

@keyframes mtb-float {
   0%, 100% {
       transform: translateY(0);
   }
   50% {
       transform: translateY(-10px);
   }
}

@keyframes mtb-pulse {
   0%, 100% {
       transform: scale(1);
   }
   50% {
       transform: scale(1.05);
   }
}

@keyframes mtb-shake {
   0%, 100% {
       transform: translateX(0);
   }
   25% {
       transform: translateX(-5px);
   }
   75% {
       transform: translateX(5px);
   }
}

@keyframes mtb-ripple {
   to {
       transform: scale(4);
       opacity: 0;
   }
}

/* Animation Classes */
.mtb-animate-in {
   animation: mtb-slide-up 0.6s ease forwards;
}

.mtb-animate-pulse {
   animation: mtb-pulse 1s ease-in-out;
}

.mtb-animate-shake {
   animation: mtb-shake 0.5s ease-in-out;
}

.mtb-refresh-spin .mtb-icon {
   animation: mtb-spin 1s linear infinite;
}

.mtb-success-celebration {
   animation: mtb-pulse 0.8s ease-in-out;
}

/* Ripple Effect */
.mtb-ripple {
   position: absolute;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.6);
   transform: scale(0);
   animation: mtb-ripple 0.6s linear;
   pointer-events: none;
}

/* ===========================
  📱 RESPONSIVE DESIGN
  =========================== */

@media (max-width: 768px) {
   .mtb-container {
   }
   
   .mtb-header-top {
       flex-direction: column;
       gap: var(--mtb-space-4);
       text-align: center;
   }
   
   .mtb-filters {
       flex-direction: column;
       gap: var(--mtb-space-3);
   }
   
   .mtb-filter-group {
       min-width: unset;
   }
   
   .mtb-teachers-grid {
       grid-template-columns: 1fr;
       gap: var(--mtb-space-4);
   }
   
   .mtb-table-container {
       padding: var(--mtb-space-3);
   }
   
   /* Mobile Scroll Enhancements */
   .mtb-table-scroll-wrapper {
       padding: var(--mtb-space-2);
   }
   
   /* Scroll Indikator immer sichtbar auf Mobile */
   .mtb-scroll-indicator {
       opacity: 1 !important;
       width: 90%;
       max-width: 300px;
       bottom: 10px;
   }
   
   /* Kleinere Spalten auf Mobile */
   .mtb-teacher-header,
   .mtb-table-slot {
       min-width: 140px !important;
       width: 140px !important;
   }
   
   .mtb-time-header,
   .mtb-time-cell {
       min-width: 80px !important;
       width: 80px !important;
   }
   
   /* Sticky Headers anpassen */
   .mtb-sticky-header-wrapper {
       padding: 0 var(--mtb-space-2);
   }
   
   .mtb-modal-footer {
       flex-direction: column;
       gap: var(--mtb-space-3);
   }
   
   .mtb-btn {
       width: 100%;
       justify-content: center;
   }
   
   .mtb-time-selector {
   }
   
   .mtb-specials-grid {
       grid-template-columns: 1fr;
   }
   
   .mtb-toast {
       top: var(--mtb-space-4);
       right: var(--mtb-space-4);
       left: var(--mtb-space-4);
       max-width: none;
   }
   
   .mtb-legend-items {
       grid-template-columns: repeat(2, 1fr);
   }
   
   .mtb-booking-type-selector {
       flex-direction: column;
       gap: var(--mtb-space-3);
   }
   
   .mtb-multiple-selection-header {
       flex-direction: column;
       gap: var(--mtb-space-2);
       text-align: center;
   }
   
   .mtb-radio-option,
   .mtb-multiple-checkbox-option {
       padding: var(--mtb-space-4);
   }
   
   .mtb-teacher-hero-section {
       padding: var(--mtb-space-6);
   }
   
   .mtb-hero-content {
       grid-template-columns: 1fr;
       gap: var(--mtb-space-6);
   }
   
   .mtb-teacher-hero-image {
       width: 100%;
       height: 200px;
   }
   
   .mtb-teacher-hero-title {
       font-size: var(--mtb-text-2xl);
   }
   
   .mtb-hero-info-tiles {
       grid-template-columns: 1fr;
       gap: var(--mtb-space-3);
   }
   
   .mtb-info-tile {
       padding: var(--mtb-space-4);
   }
   
   .mtb-tab-btn {
       font-size: var(--mtb-text-xs);
       padding: var(--mtb-space-2) var(--mtb-space-3);
   }
   
   .mtb-tab-btn .mtb-icon {
       width: 16px;
       height: 16px;
   }
   
   .mtb-week-header {
       flex-direction: column;
       gap: var(--mtb-space-3);
       text-align: center;
   }
	    .mtb-teacher-hero-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--mtb-space-4);
    }
    
    .mtb-teacher-hero-image {
        width: 100px;
        height: 100px;
        min-width: 100px;
    }
}

@media (max-width: 480px) {
   .mtb-page-title {
       font-size: var(--mtb-text-2xl);
   }
   
   .mtb-user-status {
       flex-direction: column;
       gap: var(--mtb-space-2);
   }
   
   .mtb-time-slots {
       grid-template-columns: repeat(3, 1fr);
   }
   
   .mtb-time-selector {
   }
}

/* ===========================
  🎯 UTILITY CLASSES
  =========================== */

.mtb-sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
}

.mtb-icon {
   width: 20px;
   height: 20px;
   stroke-width: 2;
   fill: none;
   stroke: currentColor;
}

.mtb-icon-sm {
   width: 16px;
   height: 16px;
}

.mtb-icon-lg {
   width: 24px;
   height: 24px;
}

.mtb-icon-xl {
   width: 48px;
   height: 48px;
}

/* Glassmorphism Effects */
.liquid-glass {
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
}

.specular-highlight::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 40%;
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent);
   pointer-events: none;
}

/* ===========================
  🎯 OVERRIDE GLOBAL TABLE BORDERS & BACKGROUNDS
  =========================== */

/* Spezifische Überschreibung für MTB Tabellen */
.mtb-booking-table td,
.mtb-booking-table th {
   border: 0px solid white !important;
   padding: var(--mtb-space-3) var(--mtb-space-4);
   line-height: 1.5;
   vertical-align: middle;
}

/* Override zebra stripes - keep MTB backgrounds */
.mtb-booking-table tbody > tr:nth-child(odd) > td,
.mtb-booking-table tbody > tr:nth-child(odd) > th {
   background-color: var(--mtb-surface) !important;
}

.mtb-booking-table tbody > tr:nth-child(even) > td,
.mtb-booking-table tbody > tr:nth-child(even) > th {
   background-color: var(--mtb-surface) !important;
}

/* Preserve specific MTB slot backgrounds */
.mtb-booking-table .mtb-table-slot.mtb-slot-available {
   background: var(--mtb-success) !important;
   color: white !important;
}

.mtb-booking-table .mtb-table-slot.mtb-slot-premium {
   background: linear-gradient(135deg, var(--mtb-accent), #FF8C00) !important;
   color: white !important;
}

.mtb-booking-table .mtb-table-slot.mtb-slot-discount {
   background: linear-gradient(135deg, #34C759, #2DB555) !important;
   color: white !important;
}

.mtb-booking-table .mtb-table-slot.mtb-slot-past {
   background: repeating-linear-gradient(
       45deg,
       #e0e0e0,
       #e0e0e0 8px,
       #d0d0d0 8px,
       #d0d0d0 16px
   ) !important;
   color: white !important;
}

.mtb-booking-table .mtb-table-slot.mtb-slot-selected {
   background: var(--mtb-primary) !important;
   color: white !important;
}

.mtb-booking-table .mtb-table-slot.mtb-slot-unavailable {
   background: var(--mtb-neutral-100) !important;
   color: var(--mtb-text-tertiary) !important;
}

/* Zusätzliche spezifische Border-Überschreibungen */
.mtb-table-header th {
   border-right: 1px solid white !important;
   border-bottom: 1px solid white !important;
}

.mtb-time-header {
   border-right: 1px solid white !important;
}

.mtb-time-cell {
   border-right: 1px solid white !important;
   border-bottom: 1px solid white !important;
}

.mtb-table-slot {
   border-right: 1px solid white !important;
   border-bottom: 1px solid white !important;
}

/* ===========================
  ♿ ACCESSIBILITY ENHANCEMENTS
  =========================== */

.mtb-teacher-info-icon:focus, .mtb-table-teacher-info-icon:focus {
    outline-offset: 2px;
    color: var(--mtb-primary);
    background: transparent;
}

.mtb-teacher-info-icon:focus:not(:focus-visible),
.mtb-table-teacher-info-icon:focus:not(:focus-visible) {
   outline: none;
}

.mtb-teacher-info-icon:focus-visible,
.mtb-table-teacher-info-icon:focus-visible {
   outline: 2px solid var(--mtb-primary);
   outline-offset: 2px;
   box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.2);
}

/* High contrast support */
@media (prefers-contrast: high) {
   .mtb-legend-color {
       border-width: 2px;
   }
   
   .mtb-legend-item {
       border: 1px solid var(--mtb-border);
   }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
   .mtb-teacher-hero-section {
       animation: none;
       opacity: 1;
       transform: none;
   }
   
   .mtb-form-section {
       animation: none;
       opacity: 1;
       transform: none;
   }
   
   .mtb-cost-item {
       animation: none;
       opacity: 1;
       transform: none;
   }
}

/* MTB Week View - White borders */

.mtb-week-table .mtb-time-header,
.mtb-week-table .mtb-time-cell,
.mtb-week-slot,
.mtb-day-header,
.mtb-week-row th,
.mtb-week-row td {
    border-right: 1px solid white !important;
}

.mtb-week-container {
    border: 1px solid var(--mtb-border);
}

.mtb-week-header {
    border-bottom: 1px solid white !important;
}

/* Week table header */
.mtb-week-table thead {
    border-bottom: 1px solid white !important;
}

/* MTB Both Views - Leichtes Apple-Style Grau mit höherer Spezifität */

/* Table Headers für beide Ansichten */
.mtb-booking-table .mtb-table-header,
.mtb-booking-table .mtb-table-header th,
.mtb-week-table thead,
.mtb-week-table thead th,
.mtb-booking-table .mtb-teacher-header,
.mtb-week-table .mtb-day-header {
    background: #fafafd !important;
    color: #1d1d1f !important;
    border-right: 1px solid #fafafd !important;
    border-bottom: 1px solid #fafafd !important;
}

/* Time Cells für beide Ansichten mit höherer Spezifität */
.mtb-booking-table .mtb-time-header,
.mtb-booking-table .mtb-time-cell,
.mtb-week-table .mtb-time-header,
.mtb-week-table .mtb-time-cell {
    background: #fafafd !important;
    color: #1d1d1f !important;
    border-right: 1px solid #fafafd !important;
    font-weight: 600 !important;
}

/* Überschreibe zebra stripes für Header/Time Bereiche */
.mtb-booking-table tbody > tr:nth-child(odd) > .mtb-time-cell,
.mtb-booking-table tbody > tr:nth-child(even) > .mtb-time-cell {
    background: #fafafd !important;
}


/* ===========================
   ⏰ TIME BLOCK INTERFACE - OPTION 2 STYLE
   =========================== */



.mtb-starttime-section {
    margin-bottom: 24px;
}

.mtb-starttime-grid,
.mtb-slots-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* Immer genau 6 Spalten */
    grid-auto-rows: auto; /* Neue Zeilen werden automatisch erstellt */
    gap: 8px;
    margin-bottom: 16px;
    position: relative;
    transition: all var(--mtb-transition-normal);
    
    /* ✅ WICHTIG: Verhindert zusätzliche Spalten */
    grid-auto-columns: 0; /* Keine automatischen Spalten */
    overflow: visible; /* Stellt sicher, dass Inhalte sichtbar bleiben */
}

.mtb-time-option {
    background: var(--mrb-neutral-100);
    border: 2px solid transparent;
    border-radius: var(--mrb-radius-md);
    padding: var(--mrb-space-3);
    text-align: center;
    cursor: pointer;
    transition: all var(--mrb-transition-normal);
    font-weight: var(--mrb-font-semibold);
    font-size: var(--mrb-text-sm);
}

.mtb-time-option:hover:not(.mtb-time-option-disabled):not(.mtb-time-option-past):not(.mtb-time-option-invalid) {
    background: var(--mrb-primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--mrb-shadow-md);
}

.mtb-time-option.mtb-time-option-selected {
    background: var(--mtb-primary);
    color: white;
    border-color: var(--mtb-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 122, 255, 0.3);
}

.mtb-time-option.mtb-time-option-premium {
    border-color: var(--mtb-accent);
    background: rgba(255, 149, 0, 0.1);
}

.mtb-time-option.mtb-time-option-premium:hover {
    background: rgba(255, 149, 0, 0.15);
    border-color: var(--mtb-accent);
}

.mtb-time-option.mtb-time-option-premium.mtb-time-option-selected {
    background: var(--mtb-accent);
    border-color: var(--mtb-accent);
    box-shadow: 0 4px 15px rgba(255, 149, 0, 0.3);
}

.mtb-time-option.mtb-time-option-discount {
    border-color: var(--mtb-success);
    background: rgba(52, 199, 89, 0.1);
}

.mtb-time-option.mtb-time-option-discount:hover {
    background: rgba(52, 199, 89, 0.15);
    border-color: var(--mtb-success);
}

.mtb-time-option.mtb-time-option-discount.mtb-time-option-selected {
    background: var(--mtb-success);
    border-color: var(--mtb-success);
    box-shadow: 0 4px 15px rgba(52, 199, 89, 0.3);
}

.mtb-time-option.mtb-time-option-disabled,
.mtb-time-option.mtb-time-option-past,
.mtb-time-option.mtb-time-option-invalid {
    background: #f0f0f0;
    color: #999;
    cursor: not-allowed;
    opacity: 0.5;
    border-color: #e0e0e0;
}

.mtb-time-option.mtb-time-option-disabled:hover,
.mtb-time-option.mtb-time-option-past:hover,
.mtb-time-option.mtb-time-option-invalid:hover {
    transform: none;
    box-shadow: none;
    border-color: #e0e0e0;
    background: #f0f0f0;
}

.mtb-time-label {
    font-size: 14px;
    font-weight: var(--mtb-font-bold);
    margin-bottom: 4px;
    line-height: 1.2;
}

.mtb-time-price {
    font-size: 12px;
    font-weight: var(--mtb-font-semibold);
    line-height: 1.2;
}

.mtb-time-price .mtb-surcharge-text,
.mtb-time-price .mtb-discount-text {
    display: block;
    font-size: 10px;
    margin-top: 2px;
    opacity: 0.9;
}

.mtb-time-option.mtb-time-option-selected .mtb-time-price .mtb-surcharge-text,
.mtb-time-option.mtb-time-option-selected .mtb-time-price .mtb-discount-text {
    opacity: 1;
}

/* Availability Legend */
.mtb-availability-legend {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-top: 12px;
    font-size: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.mtb-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.mtb-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.mtb-legend-dot.mtb-available {
    background: var(--mtb-success);
}

.mtb-legend-dot.mtb-unavailable {
    background: #ff3b30;
}

.mtb-legend-dot.mtb-selected {
    background: var(--mtb-primary);
}

/* Modal Button Styles (from Raumbuchungssystem) */
.mds-booking-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    min-height: 44px;
    margin: 0 4px;
}

.mds-booking-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2);
}

.mds-booking-btn-primary {
    background-color: #007AFF;
    color: #ffffff;
}

.mds-booking-btn-primary:hover {
    background-color: #0056CC;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 122, 255, 0.3);
}

.mds-booking-btn-secondary {
    background-color: rgba(255, 255, 255, 0.85);
    color: #1D1D1F;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.mds-booking-btn-secondary:hover {
    background-color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.mds-booking-btn-danger {
    background-color: #FF3B30;
    color: #ffffff;
}

.mds-booking-btn-danger:hover {
    background-color: #DC2626;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 59, 48, 0.3);
}

/* Time Visualization Boxes */
.mtb-time-visualization {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    justify-content: center;
    flex-wrap: wrap;
}

.mtb-time-box {
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 16px 20px;
    text-align: center;
    min-width: 100px;
    transition: all 0.3s ease;
}

.mtb-time-box.mtb-start {
    border-color: var(--mtb-primary);
    background: var(--mtb-primary);
    color: white;
}

.mtb-time-box.mtb-end {
    border-color: var(--mtb-success);
    background: var(--mtb-success);
    color: white;
}

.mtb-time-box .mtb-time-label {
    font-size: 12px;
    opacity: 0.8;
    margin-bottom: 4px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mtb-time-box .mtb-time-value {
    font-size: 20px;
    font-weight: bold;
    line-height: 1;
}

.mtb-time-arrow {
    font-size: 24px;
    color: var(--mtb-primary);
    font-weight: bold;
    opacity: 0.7;
}

/* Duration Slider Container */
.mtb-duration-slider-container {
    background: white;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.mtb-duration-slider {
    width: 100%;
    height: 10px;
    background: linear-gradient(to right, 
        var(--mtb-primary) 0%, 
        var(--mtb-primary) var(--slider-progress, 20%), 
        #e0e0e0 var(--slider-progress, 20%), 
        #e0e0e0 100%);    border-radius: 5px;
    outline: none;
    -webkit-appearance: none;
    position: relative;
    cursor: pointer;
}

.mtb-duration-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 32px;
    height: 32px;
    background: var(--mtb-primary);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
    border: 4px solid white;
    transition: all 0.2s ease;
}

.mtb-duration-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(0, 122, 255, 0.4);
}

.mtb-duration-slider::-moz-range-thumb {
    width: 32px;
    height: 32px;
    background: var(--mtb-primary);
    border-radius: 50%;
    cursor: pointer;
    border: 4px solid white;
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
    transition: all 0.2s ease;
}

.mtb-duration-slider::-moz-range-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(0, 122, 255, 0.4);
}

.mtb-duration-slider::-webkit-slider-track {
    background: linear-gradient(to right, 
        var(--mtb-primary) 0%, 
        var(--mtb-primary) var(--slider-progress, 0%),
        #e0e0e0 var(--slider-progress, 0%), 
        #e0e0e0 100%);
    height: 10px;
    border-radius: 5px;
}

.mtb-duration-slider::-moz-range-track {
    background: linear-gradient(to right, 
        var(--mtb-primary) 0%, 
        var(--mtb-primary) var(--slider-progress, 0%),
        #e0e0e0 var(--slider-progress, 0%), 
        #e0e0e0 100%);
    height: 10px;
    border-radius: 5px;
    border: none;
}

.mtb-slider-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    font-size: 12px;
    color: #666;
    font-weight: 600;
}

.mtb-current-duration {
    text-align: center;
    margin-top: 16px;
    font-size: 18px;
    font-weight: bold;
    color: var(--mtb-primary);
    padding: 8px 16px;
    background: rgba(0, 122, 255, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(0, 122, 255, 0.2);
}

/* No Timeline/No Bookable Slots */
.mtb-no-timeline,
.mtb-no-bookable-slots {
    text-align: center;
    padding: var(--mtb-space-12) var(--mtb-space-6);
    background: var(--mtb-surface-subtle);
    border-radius: var(--mtb-radius-lg);
    border: 2px dashed var(--mtb-border);
}

.mtb-no-timeline .mtb-icon,
.mtb-no-bookable-slots .mtb-icon {
    width: 48px;
    height: 48px;
    color: var(--mtb-text-tertiary);
    margin-bottom: var(--mtb-space-4);
}

.mtb-no-timeline p,
.mtb-no-bookable-slots p {
    font-size: var(--mtb-text-base);
    font-weight: var(--mtb-font-semibold);
    color: var(--mtb-text-secondary);
    margin-bottom: var(--mtb-space-2);
}

.mtb-no-timeline small,
.mtb-no-bookable-slots small {
    font-size: var(--mtb-text-sm);
    color: var(--mtb-text-tertiary);
}

/* ===========================
   📱 MOBILE RESPONSIVE - TIME BLOCKS
   =========================== */

@media (max-width: 768px) {
    .mtb-time-controls {
    }
    
    .mtb-starttime-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .mtb-time-option {

    }
    
    .mtb-time-label {
    }
    
    .mtb-time-price {
    }
    
    .mtb-time-price .mtb-surcharge-text,
    .mtb-time-price .mtb-discount-text {
    }
    
    

    
    .mtb-time-box .mtb-time-value {
        font-size: 18px;
    }

    
    .mtb-duration-slider-container {
        padding: 16px;
    }
    
    .mtb-current-duration {
        font-size: 16px;
        margin-top: 12px;
        padding: 6px 12px;
    }
    
    .mtb-availability-legend {
        gap: 12px;
        font-size: 11px;
    }
    
    .mtb-legend-item {
        padding: 3px 6px;
    }
    
    .mtb-legend-dot {
        width: 6px;
        height: 6px;
    }
}

@media (max-width: 480px) {
    .mtb-time-controls {
    }
    
    .mtb-starttime-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .mtb-time-option {

    }
    
    .mtb-time-label {
    }
    
    .mtb-time-price {
    }
    

    
    .mtb-time-box .mtb-time-value {
        font-size: 16px;
    }
    
    .mtb-duration-slider-container {
        padding: 12px;
    }
    
    .mtb-current-duration {
        font-size: 14px;
        padding: 4px 8px;
    }
    
    .mtb-availability-legend {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
}

/* ===========================
   ♿ ACCESSIBILITY ENHANCEMENTS
   =========================== */

.mtb-time-option:focus {
    outline: 2px solid var(--mtb-primary);
    outline-offset: 2px;
}

.mtb-time-option:focus:not(:focus-visible) {
    outline: none;
}

.mtb-time-option:focus-visible {
    outline: 2px solid var(--mtb-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.2);
}

.mtb-duration-slider:focus {
    outline: 2px solid var(--mtb-primary);
    outline-offset: 2px;
}

.mtb-duration-slider:focus:not(:focus-visible) {
    outline: none;
}

.mtb-duration-slider:focus-visible {
    outline: 2px solid var(--mtb-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.2);
}

/* High contrast support */
@media (prefers-contrast: high) {
    .mtb-time-option {
        border-width: 3px;
    }
    
    .mtb-legend-dot {
        border: 1px solid currentColor;
    }
    
    .mtb-duration-slider::-webkit-slider-thumb {
        border-width: 3px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .mtb-time-option,
    .mtb-time-box,
    .mtb-duration-slider::-webkit-slider-thumb,
    .mtb-duration-slider::-moz-range-thumb {
        transition: none;
    }
    
    .mtb-time-option:hover {
        transform: none;
    }
    
    .mtb-time-option.mtb-time-option-selected {
        transform: none;
    }
}

/* ===========================
   🎨 ENHANCED VISUAL EFFECTS
   =========================== */

/* Subtle gradient für Premium/Discount Options */
.mtb-time-option.mtb-time-option-premium {
    background: linear-gradient(135deg, rgba(255, 149, 0, 0.1), rgba(255, 140, 0, 0.15));
}

.mtb-time-option.mtb-time-option-discount {
    background: linear-gradient(135deg, rgba(52, 199, 89, 0.1), rgba(46, 181, 85, 0.15));
}



/* Enhanced shadow for selected time box */
.mtb-time-box.mtb-start,
.mtb-time-box.mtb-end {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Micro-animation für current duration display */
.mtb-current-duration {
    transition: all 0.3s ease;
}

.mtb-current-duration:hover {
    transform: scale(1.02);
    box-shadow: 0 2px 10px rgba(0, 122, 255, 0.2);
}

/* CSS für Buchungsregeln-invalide Slots - identisch zu past Slots */
.mtb-table-slot.mtb-slot-booking-window-invalid {
    background: repeating-linear-gradient(45deg, #e0e0e0, #e0e0e0 8px, #d0d0d0 8px, #d0d0d0 16px) !important;
    color: white !important;
    cursor: not-allowed !important;
    opacity: 0.7;
}

.mtb-booking-table .mtb-table-slot.mtb-slot-booking-window-invalid {
    background: repeating-linear-gradient(45deg, #e0e0e0, #e0e0e0 8px, #d0d0d0 8px, #d0d0d0 16px) !important;
    color: white !important;
}

.mtb-week-slot.mtb-slot-booking-window-invalid {
    background: repeating-linear-gradient(45deg, #e0e0e0, #e0e0e0 8px, #d0d0d0 8px, #d0d0d0 16px) !important;
    color: white !important;
    cursor: not-allowed !important;
    opacity: 0.7;
}

.mtb-slot-booking-window-invalid:hover {
    background: repeating-linear-gradient(45deg, #e0e0e0, #e0e0e0 8px, #d0d0d0 8px, #d0d0d0 16px) !important;
    transform: none !important;
}

.mtb-slot-booking-window-invalid .mtb-slot-status {
    color: white !important;
}

/* Dauer-Warnung für Slider */
.mtb-duration-warning {
    background: rgba(255, 149, 0, 0.1);
    border: 1px solid rgba(255, 149, 0, 0.3);
    border-radius: var(--mtb-radius-md);
    padding: var(--mtb-space-4);
    margin-top: var(--mtb-space-4);
    display: flex;
    align-items: flex-start;
    gap: var(--mtb-space-3);
    animation: mtb-slide-down 0.3s ease;
}

.mtb-duration-warning .mtb-icon {
    width: 20px;
    height: 20px;
    color: var(--mtb-warning);
    flex-shrink: 0;
    margin-top: 2px;
}

.mtb-duration-warning p {
    margin: 0;
    color: var(--mtb-text-primary);
    font-size: var(--mtb-text-sm);
    line-height: var(--mtb-leading-relaxed);
}

.mtb-duration-warning strong {
    color: var(--mtb-warning);
}

/* Animation für die Warnung */
@keyframes mtb-slide-down {
    from {
        opacity: 0;
        transform: translateY(-10px);
        max-height: 0;
    }
    to {
        opacity: 1;
        transform: translateY(0);
        max-height: 100px;
    }
}

/* ===========================
   🎭 SLOT ANIMATION SYSTEM - CSS
   =========================== */

/* Basis-Grid für seamless Layout */
.mtb-starttime-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
    gap: 8px;
    margin-bottom: 16px;
    position: relative;
    transition: all var(--mtb-transition-normal);
}

/* Grid Animation States */
.mtb-time-slots-grid.mtb-slots-expanded {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 122, 255, 0.1);
}

/* Wrapper für Animation-Control */
.mtb-time-option-wrapper {
    position: relative;
    transition: all var(--mtb-transition-normal);
}

/* Sichtbare Time Options */
.mtb-time-option-wrapper.mtb-option-visible {
    display: block;
}

/* Versteckte Time Options */
.mtb-time-option-wrapper.mtb-option-hidden {
    display: none;
}

/* Fade-In Animation */
.mtb-time-option-wrapper.mtb-option-appearing {
    animation: mtb-option-fade-in 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Fade-Out Animation */
.mtb-time-option-wrapper.mtb-option-disappearing {
    animation: mtb-option-fade-out 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Keyframes für smooth Erscheinen */
@keyframes mtb-option-fade-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Keyframes für smooth Verschwinden */
@keyframes mtb-option-fade-out {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(-8px) scale(0.95);
    }
}

/* ===========================
   🔽 EXPAND/COLLAPSE BUTTON
   =========================== */

.mtb-time-slots-expand-container {
    display: flex;
    justify-content: center;
    margin-top: var(--mtb-space-4);
    margin-bottom: var(--mtb-space-2);
}

.mtb-expand-time-slots-btn {
    background: rgba(0, 122, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 122, 255, 0.2);
    border-radius: var(--mtb-radius-full);
    color: var(--mtb-primary);
    padding: var(--mtb-space-2) var(--mtb-space-4);
    font-size: var(--mtb-text-sm);
    font-weight: var(--mtb-font-semibold);
    cursor: pointer;
    transition: all var(--mtb-transition-normal);
    display: flex;
    align-items: center;
    gap: var(--mtb-space-2);
    position: relative;
    overflow: hidden;
}

.mtb-expand-time-slots-btn:hover {
    background: rgba(0, 122, 255, 0.15);
    border-color: rgba(0, 122, 255, 0.3);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(0, 122, 255, 0.2);
}

.mtb-expand-time-slots-btn:active {
    transform: translateY(0);
}

/* Icon Rotation */
.mtb-expand-icon {
    width: 16px;
    height: 16px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.mtb-expand-icon.mtb-expand-icon-rotated {
    transform: rotate(180deg);
}

/* Text Switching */
.mtb-expand-show,
.mtb-expand-hide {
    transition: opacity var(--mtb-transition-fast);
    white-space: nowrap;
}

/* ===========================
   🎭 EXPANDABLE SLOTS ANIMATION 
   =========================== */


/* Slot Wrapper für Animationskontrolle */
.mtb-time-option-wrapper {
    position: relative;
}

/* Animation Keyframes - exakt wie Dokumentation */
@keyframes mtb-slot-fade-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes mtb-slot-fade-out {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(-8px) scale(0.95);
    }
}

/* Animation Classes */
.mtb-time-option-wrapper.mrb-slot-appearing {
    animation: mtb-slot-fade-in 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.mtb-time-option-wrapper.mrb-slot-disappearing {
    animation: mtb-slot-fade-out 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Expanded State */
.mtb-starttime-section.mtb-slots-expanded {
    transform: translateY(-2px);
}

/* Expand Section */
.mtb-expand-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--mtb-space-3);
    padding: var(--mtb-space-2);
    border-radius: var(--mtb-radius-md);
    background: rgba(0, 122, 255, 0.03);
    border: 1px solid rgba(0, 122, 255, 0.1);
    transition: all var(--mtb-transition-normal);
}

/* Expand Button */
.mtb-expand-button {
    background: none;
    border: none;
    display: flex;
    align-items: center;
    gap: var(--mtb-space-2);
    cursor: pointer;
    padding: var(--mtb-space-2) var(--mtb-space-3);
    border-radius: var(--mtb-radius-md);
    transition: all var(--mtb-transition-normal);
    color: var(--mtb-primary);
    font-weight: 600;
}

.mtb-expand-button:hover {
    background: rgba(0, 122, 255, 0.1);   /* 10% blaue Hinterlegung */
    color: #0056CC;                        /* Dunkleres Blau */
    transform: translateY(-1px);           /* Anheben */
}

.mtb-expand-button:active {
    transform: translateY(0) scale(0.98);  /* Eindrücken beim Klick */
    background: rgba(0, 122, 255, 0.15);  /* Stärkere Hinterlegung */
}

.mtb-expand-button:focus {
    outline: none;
    background: rgba(0, 122, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2); /* Fokus-Ring */
    color: var(--mtb-primary);
}

/* Icon Rotation */
.mtb-expand-icon {
    width: 16px;
    height: 16px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mtb-expand-icon.mtb-rotated {
    transform: rotate(180deg);
}

/* Availability Hint */
.mtb-availability-hint {
    display: flex;
    align-items: center;
    gap: var(--mtb-space-1);
    font-size: var(--mtb-text-xs);
    color: var(--mtb-text-secondary);
}

.mtb-available-count {
    background: var(--mtb-success);
    color: white;
    padding: 2px 6px;
    border-radius: var(--mtb-radius-sm);
    font-weight: bold;
    font-size: 10px;
}

/* Performance Optimizations */
.mtb-time-option-wrapper.mrb-slot-appearing,
.mtb-time-option-wrapper.mrb-slot-disappearing {
    will-change: transform, opacity;
    backface-visibility: hidden;
    perspective: 1000px;
}

.mtb-time-option-wrapper.mrb-slot-visible {
    will-change: auto;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .mtb-slots-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
    
    .mtb-expand-section {
        padding: var(--mtb-space-2);
    }
    
    .mtb-expand-button {
        padding: var(--mtb-space-3) var(--mtb-space-4);
        font-size: var(--mtb-text-sm);
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .mtb-time-option-wrapper.mrb-slot-appearing,
    .mtb-time-option-wrapper.mrb-slot-disappearing {
        animation: none;
    }
    
    .mtb-expand-icon {
        transition: none;
    }
    
    .mtb-expand-button:hover {
        transform: none;
    }
}

/* ===========================
   ✅ VISUAL SELECTED STATE für Special Items (Checkboxes - Mehrfachauswahl)
   =========================== */

/* Selected visual state für Special Items - ähnlich wie Booking Type aber für Checkboxes */
.mtb-special-item:has(input[type="checkbox"]:checked) {
   border-color: var(--mtb-primary);
   background: rgba(0, 122, 255, 0.1);
   transform: translateY(-2px);
   box-shadow: var(--mtb-shadow-md);
}

/* Alternative: Falls :has() nicht unterstützt wird */
.mtb-special-item.selected {
   border-color: var(--mtb-primary);
   background: rgba(0, 122, 255, 0.1);
   transform: translateY(-2px);
   box-shadow: var(--mtb-shadow-md);
}

/* Wing Upgrade selected state - behält Orange-Akzent */
.mtb-special-item.mtb-wing-upgrade:has(input[type="checkbox"]:checked),
.mtb-special-item.mtb-wing-upgrade.selected {
   border-color: var(--mtb-accent);
   background: rgba(255, 149, 0, 0.1);
}

/* Warm Up selected state - behält Grün-Akzent */
.mtb-special-item.mtb-warm-up:has(input[type="checkbox"]:checked),
.mtb-special-item.mtb-warm-up.selected {
   border-color: var(--mtb-success);
   background: rgba(52, 199, 89, 0.1);
}

/* ===========================
   🔗 NAHTLOSE BUCHUNG - VEREINFACHT FINAL
   =========================== */

.mtb-seamless-booking-section {
    background: rgba(52, 199, 89, 0.05);
    border: 1px solid rgba(52, 199, 89, 0.2);
    border-radius: var(--mtb-radius-lg);
    padding: var(--mtb-space-4) var(--mtb-space-5);
    margin-top: var(--mtb-space-4);
    transition: var(--mtb-transition-normal);
}

.mtb-seamless-booking-section:hover {
    background: rgba(52, 199, 89, 0.08);
    border-color: rgba(52, 199, 89, 0.3);
    transform: translateY(-1px);
    box-shadow: var(--mtb-shadow-sm);
}

/* ❌ H4 TITEL ENTFERNT - nicht mehr nötig */

.mtb-seamless-controls {
    margin: 0;
}

.mtb-seamless-controls .inline-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mtb-seamless-controls .inline-info {
    display: flex;
    align-items: center;
    gap: var(--mtb-space-3);
}

.mtb-seamless-controls .inline-info .mtb-icon {
    color: var(--mtb-success);
    width: 20px;
    height: 20px;
}

.mtb-seamless-controls .inline-info-text strong {
    color: var(--mtb-text-primary);
    font-weight: var(--mtb-font-semibold);
    display: block;
    margin-bottom: 2px;
}

.mtb-seamless-controls .inline-info-text small {
    color: var(--mtb-text-secondary);
    font-size: var(--mtb-text-sm);
}

.mtb-seamless-enable {
    display: flex;
    align-items: center;
    gap: var(--mtb-space-2);
    cursor: pointer;
    margin: 0;
}

.mtb-seamless-enable input[type="checkbox"] {
    display: none;
}

.mtb-seamless-enable .mtb-checkbox-custom {
    width: 20px;
    height: 20px;
    border: 2px solid var(--mtb-border);
    border-radius: var(--mtb-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--mtb-transition-normal);
    flex-shrink: 0;
    background: var(--mtb-surface);
}

.mtb-seamless-enable input[type="checkbox"]:checked + .mtb-checkbox-custom {
    border-color: var(--mtb-success);
    background: var(--mtb-success);
}

.mtb-seamless-enable input[type="checkbox"]:checked + .mtb-checkbox-custom::after {
    content: '✓';
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.mtb-seamless-enable span:last-child {
    font-size: var(--mtb-text-sm);
    font-weight: var(--mtb-font-medium);
    color: var(--mtb-text-primary);
}

.mtb-seamless-actions {
    display: flex;
    gap: var(--mtb-space-3);
    align-items: center;
}

.mtb-check-seamless-btn {
    background: var(--mtb-success);
    color: white;
    border: none;
    border-radius: var(--mtb-radius-md);
    padding: var(--mtb-space-2) var(--mtb-space-4);
    font-size: var(--mtb-text-sm);
    font-weight: var(--mtb-font-semibold);
    cursor: pointer;
    transition: all var(--mtb-transition-normal);
    display: flex;
    align-items: center;
    gap: var(--mtb-space-2);
}

.mtb-check-seamless-btn:hover {
    background: #2DB555;
    transform: translateY(-1px);
    box-shadow: var(--mtb-shadow-md);
}

.mtb-check-seamless-btn:active {
    transform: translateY(0) scale(0.98);
}

.mtb-check-seamless-btn .mtb-icon {
    width: 16px;
    height: 16px;
}

.mtb-seamless-options {
    margin-top: var(--mtb-space-4);
    padding-top: var(--mtb-space-4);
    border-top: 1px solid rgba(52, 199, 89, 0.2);
}

.mtb-seamless-info {
    text-align: center;
    margin-bottom: var(--mtb-space-4);
}

.mtb-seamless-info p {
    margin: 0;
    color: var(--mtb-text-secondary);
    font-size: var(--mtb-text-sm);
    font-style: italic;
}

/* ===========================
   📊 VEREINFACHTE SEAMLESS RESULTS
   =========================== */

.mtb-seamless-results {
    background: var(--mtb-surface);
    border: 1px solid var(--mtb-border);
    border-radius: var(--mtb-radius-md);
    padding: var(--mtb-space-4);
    margin-top: var(--mtb-space-3);
    animation: mtb-slide-up 0.3s ease;
}

/* Loading State */
.mtb-seamless-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mtb-space-3);
    padding: var(--mtb-space-6);
    text-align: center;
    color: var(--mtb-text-secondary);
}

.mtb-seamless-loading .mtb-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--mtb-neutral-200);
    border-top: 2px solid var(--mtb-success);
    border-radius: 50%;
    animation: mtb-spin 1s linear infinite;
}

.mtb-seamless-loading span {
    font-size: var(--mtb-text-sm);
    font-weight: var(--mtb-font-medium);
}

/* Error State */
.mtb-seamless-error {
    background: rgba(255, 59, 48, 0.05);
    border: 1px solid rgba(255, 59, 48, 0.2);
    border-radius: var(--mtb-radius-md);
    padding: var(--mtb-space-4);
    display: flex;
    align-items: flex-start;
    gap: var(--mtb-space-3);
}

.mtb-seamless-error .mtb-icon {
    width: 20px;
    height: 20px;
    color: var(--mtb-error);
    flex-shrink: 0;
    margin-top: 2px;
}

.mtb-seamless-error p {
    margin: 0;
    color: var(--mtb-error);
    font-size: var(--mtb-text-sm);
    line-height: var(--mtb-leading-relaxed);
}

.mtb-retry-seamless {
    background: var(--mtb-error);
    color: white;
    border: none;
    border-radius: var(--mtb-radius-sm);
    padding: var(--mtb-space-2) var(--mtb-space-3);
    font-size: var(--mtb-text-xs);
    font-weight: var(--mtb-font-semibold);
    cursor: pointer;
    margin-top: var(--mtb-space-2);
    transition: all var(--mtb-transition-normal);
}

.mtb-retry-seamless:hover {
    background: #D70015;
    transform: translateY(-1px);
}

/* No Results State */
.mtb-seamless-no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--mtb-space-3);
    padding: var(--mtb-space-8);
    text-align: center;
    background: rgba(255, 149, 0, 0.05);
    border: 1px solid rgba(255, 149, 0, 0.2);
    border-radius: var(--mtb-radius-md);
}

.mtb-seamless-no-results .mtb-icon {
    width: 32px;
    height: 32px;
    color: var(--mtb-warning);
}

.mtb-seamless-no-results p {
    margin: 0 0 var(--mtb-space-1) 0;
    color: var(--mtb-text-primary);
    font-size: var(--mtb-text-base);
    font-weight: var(--mtb-font-semibold);
}

.mtb-seamless-no-results small {
    margin: 0;
    color: var(--mtb-text-secondary);
    font-size: var(--mtb-text-sm);
}

/* ===========================
   🎯 VEREINFACHTE TIMELINE
   =========================== */

.mtb-seamless-timeline {
    /* Keine extra Box - direkt im Results Container */
}

.mtb-timeline-header {
    margin-bottom: var(--mtb-space-4);
    text-align: center;
    padding-bottom: var(--mtb-space-3);
    border-bottom: 1px solid var(--mtb-border);
}

.mtb-timeline-header h5 {
    margin: 0;
    font-size: var(--mtb-text-lg);
    font-weight: var(--mtb-font-bold);
    color: var(--mtb-text-primary);
}

/* ✅ NEUE VEREINFACHTE SESSION LISTE */
.mtb-timeline-sessions {
    display: flex;
    flex-direction: column;
    gap: var(--mtb-space-2);
}

.mtb-timeline-session {
    border: 1px solid rgba(52, 199, 89, 0.2);
    border-radius: var(--mtb-radius-md);
    padding: var(--mtb-space-3);
    transition: all var(--mtb-transition-normal);
    cursor: pointer;
}

.mtb-timeline-session:hover {
    border-color: var(--mtb-success);
    background: rgba(52, 199, 89, 0.1);
}

.mtb-timeline-session.selected {
    border-color: var(--mtb-success);
    background: rgba(52, 199, 89, 0.15);
}

.mtb-session-option {
    display: flex;
    align-items: center;
    gap: var(--mtb-space-3);
    width: 100%;
    cursor: pointer;
}

.mtb-session-option input[type="checkbox"] {
    display: none;
}

.mtb-session-checkbox-custom {
    width: 18px;
    height: 18px;
    border: 2px solid var(--mtb-border);
    border-radius: var(--mtb-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--mtb-transition-normal);
    flex-shrink: 0;
    background: var(--mtb-surface);
}

.mtb-session-option input[type="checkbox"]:checked + .mtb-session-checkbox-custom {
    border-color: var(--mtb-success);
    background: var(--mtb-success);
}

.mtb-session-option input[type="checkbox"]:checked + .mtb-session-checkbox-custom::after {
    content: '✓';
    color: white;
    font-size: 11px;
    font-weight: bold;
}

/* ✅ NEUE SESSION INFO STRUKTUR */
.mtb-session-info {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mtb-session-left {
    display: flex;
    align-items: center;
    gap: var(--mtb-space-3);
}

.mtb-session-number {
    font-size: var(--mtb-text-xs);
    font-weight: var(--mtb-font-bold);
    color: var(--mtb-success);
    background: rgba(52, 199, 89, 0.1);
    padding: 2px 6px;
    border-radius: var(--mtb-radius-sm);
    text-transform: uppercase;
}

.mtb-session-time {
    font-weight: var(--mtb-font-semibold);
    color: var(--mtb-text-primary);
}

.mtb-session-right {
    display: flex;
    align-items: center;
    gap: var(--mtb-space-2);
    font-size: var(--mtb-text-sm);
    color: var(--mtb-text-secondary);
}

/* ===========================
   📱 MOBILE RESPONSIVE
   =========================== */

@media (max-width: 768px) {
    .mtb-seamless-booking-section {
        padding: var(--mtb-space-4);
    }
    
    .mtb-seamless-controls .inline-content {
        gap: var(--mtb-space-4);
    }
    
    .mtb-seamless-actions {
        width: 100%;
        justify-content: end;
    }
    
    .mtb-check-seamless-btn {
        flex: 1;
        justify-content: center;
        padding: var(--mtb-space-3) var(--mtb-space-4);
    }
    
    .mtb-session-info {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--mtb-space-1);
    }
    
    .mtb-session-right {
        align-self: flex-end;
    }
    
    .mtb-seamless-no-results {
        padding: var(--mtb-space-6);
    }
    
    .mtb-seamless-no-results .mtb-icon {
        width: 28px;
        height: 28px;
    }
}

@media (max-width: 480px) {
    .mtb-seamless-controls .inline-info {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--mtb-space-2);
    }
    
    .mtb-seamless-enable span:last-child {
        font-size: var(--mtb-text-xs);
    }
    
    .mtb-check-seamless-btn {
        font-size: var(--mtb-text-xs);
        padding: var(--mtb-space-2) var(--mtb-space-3);
    }
    
    .mtb-session-time {
        font-size: var(--mtb-text-base);
    }
    
    .mtb-timeline-header h5 {
        font-size: var(--mtb-text-base);
    }
}

.mtb-session-right {
    display: flex;
    align-items: center;
    gap: var(--mtb-space-1);
}

.mtb-session-separator {
    color: var(--mtb-text-secondary);
    font-weight: normal;
}

.mtb-time-option.mtb-time-option-affected {
    background: linear-gradient(135deg, #ff9a56 0%, #ff7b42 100%);
    border-color: #ff7b42;
    color: white;
    font-weight: 600;
    transition: all 0.3s ease;
	transform: translateY(-2px);
}

.mtb-time-option.mtb-time-option-affected:hover {
    background: linear-gradient(135deg, #ff8c42 0%, #ff6b35 100%) !important;
    color: white !important;
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
    border-color: #ff6b35;
}

.mtb-time-option.mtb-time-option-affected:hover:not(.mtb-time-option-selected) {
    background: linear-gradient(135deg, #ff8c42 0%, #ff6b35 100%) !important;
    color: white !important;
}

.mtb-booking-for-chip {
    background: rgba(52, 199, 89, 0.1); /* --mtb-success mit 10% opacity */
    border: 1px solid rgba(52, 199, 89, 0.2);
    padding: var(--mtb-space-1) var(--mtb-space-3); /* kleiner: 4px 12px statt 8px 16px */
    border-radius: var(--mtb-radius-full);
    font-size: var(--mtb-text-xs);
    font-weight: var(--mtb-font-medium);
    color: var(--mtb-success);
    display: inline-block;
    width: fit-content;
}


/* ===========================
   🎹 FLÜGEL-RAUM AUSWAHL - PASSEND ZU MODAL DESIGN
   =========================== */

.mtb-wing-room-selection {
    margin-bottom: var(--mtb-space-4);
    padding: var(--mtb-space-4);
    background: var(--mtb-surface-subtle);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--mtb-border);
    border-radius: var(--mtb-radius-lg);
}

/* Flügel-Raum Label - passt zu anderen Form Labels */
.mtb-wing-room-selection .mtb-form-label {
    font-size: var(--mtb-text-sm);
    font-weight: var(--mtb-font-semibold);
    color: var(--mtb-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--mtb-space-2);
    display: flex;
    align-items: center;
    gap: var(--mtb-space-2);
}

.mtb-wing-room-selection .mtb-form-label .mtb-icon {
    width: 18px;
    height: 18px;
    color: var(--mtb-accent); /* Orange für Flügel */
}

/* Select Dropdown - passt zu anderen Form Controls */
.mtb-wing-room-selection .mtb-form-control {
    background: var(--mtb-neutral-100);
    border: 1px solid var(--mtb-border);
    border-radius: var(--mtb-radius-md);
    padding: var(--mtb-space-3) var(--mtb-space-4);
    font-size: var(--mtb-text-base);
    font-weight: var(--mtb-font-medium);
    color: var(--mtb-text-primary);
    transition: all var(--mtb-transition-normal);
    width: 100%;
    appearance: none;
}

.mtb-wing-room-selection .mtb-form-control:focus {
    outline: none;
    border-color: var(--mtb-accent);
    background: white;
    box-shadow: 0 0 0 3px rgba(255, 149, 0, 0.1);
}

.mtb-wing-room-selection .mtb-form-control:hover {
    border-color: var(--mtb-accent);
    background: rgba(255, 255, 255, 0.8);
}

/* Help Text - passt zu anderen Help Texten */
.mtb-wing-room-selection .mtb-help-text {
    font-size: var(--mtb-text-xs);
    color: var(--mtb-text-secondary);
    margin-top: var(--mtb-space-2);
    font-style: italic;
}

/* Wing Room Info Container */
.mtb-wing-room-info {
    margin-top: var(--mtb-space-3);
    padding: var(--mtb-space-3);
    background: rgba(255, 149, 0, 0.05);
    border: 1px solid rgba(255, 149, 0, 0.2);
    border-radius: var(--mtb-radius-md);
}

.mtb-wing-room-info .mtb-help-text {
    margin: 0;
    font-size: var(--mtb-text-xs);
    color: var(--mtb-text-secondary);
    line-height: 1.4;
}

.mtb-wing-room-info .mtb-help-text strong {
    color: var(--mtb-accent);
    font-weight: var(--mtb-font-bold);
}

/* Error State für Flügel-Räume */
.mtb-wing-room-error {
    display: flex;
    align-items: flex-start;
    gap: var(--mtb-space-3);
    padding: var(--mtb-space-4);
    background: rgba(255, 59, 48, 0.05);
    border: 1px solid rgba(255, 59, 48, 0.2);
    border-radius: var(--mtb-radius-md);
    color: var(--mtb-error);
    font-size: var(--mtb-text-sm);
    margin-top: var(--mtb-space-3);
}

.mtb-wing-room-error .mtb-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--mtb-error);
}

.mtb-wing-room-error span {
    flex: 1;
    line-height: 1.4;
}

/* Debug Actions - für Development */
.mtb-wing-room-debug-actions {
    display: flex;
    gap: var(--mtb-space-2);
    margin-top: var(--mtb-space-3);
}

.mtb-wing-room-debug-actions .mtb-btn-sm {
    padding: var(--mtb-space-1) var(--mtb-space-3);
    font-size: var(--mtb-text-xs);
    border-radius: var(--mtb-radius-sm);
}

/* Responsive Design für mobile Geräte */
@media (max-width: 768px) {
    .mtb-wing-room-selection {
        padding: var(--mtb-space-3);
        margin-bottom: var(--mtb-space-3);
    }
    
    .mtb-wing-room-selection .mtb-form-control {
        padding: var(--mtb-space-2) var(--mtb-space-3);
        font-size: var(--mtb-text-sm);
    }
    
    .mtb-wing-room-info {
        padding: var(--mtb-space-2);
    }
    
    .mtb-wing-room-error {
        padding: var(--mtb-space-3);
        flex-direction: column;
        gap: var(--mtb-space-2);
    }
    
    .mtb-wing-room-debug-actions {
        flex-direction: column;
    }
}

/* ===========================
   🎼 WARMUP-RAUM AUSWAHL - IDENTISCH ZU FLÜGEL-RAUM DESIGN
   =========================== */

.mtb-warmup-room-selection {
    margin-bottom: var(--mtb-space-4);
    padding: var(--mtb-space-4);
    background: var(--mtb-surface-subtle);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--mtb-border);
    border-radius: var(--mtb-radius-lg);
}

/* Warmup-Raum Label - passt zu anderen Form Labels */
.mtb-warmup-room-selection .mtb-form-label {
    font-size: var(--mtb-text-sm);
    font-weight: var(--mtb-font-semibold);
    color: var(--mtb-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--mtb-space-2);
    display: flex;
    align-items: center;
    gap: var(--mtb-space-2);
}

.mtb-warmup-room-selection .mtb-form-label .mtb-icon {
    width: 18px;
    height: 18px;
    color: var(--mtb-success); /* Grün für Warmup */
}

/* Select Dropdown - identisch zu Wing-Room */
.mtb-warmup-room-selection .mtb-form-control {
    background: var(--mtb-neutral-100);
    border: 1px solid var(--mtb-border);
    border-radius: var(--mtb-radius-md);
    padding: var(--mtb-space-3) var(--mtb-space-4);
    font-size: var(--mtb-text-base);
    font-weight: var(--mtb-font-medium);
    color: var(--mtb-text-primary);
    transition: all var(--mtb-transition-normal);
    width: 100%;
    appearance: none;
}

.mtb-warmup-room-selection .mtb-form-control:focus {
    outline: none;
    border-color: var(--mtb-success);
    background: white;
    box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.1);
}

.mtb-warmup-room-selection .mtb-form-control:hover {
    border-color: var(--mtb-success);
    background: rgba(255, 255, 255, 0.8);
}

/* Help Text - identisch zu Wing-Room */
.mtb-warmup-room-selection .mtb-help-text {
    font-size: var(--mtb-text-xs);
    color: var(--mtb-text-secondary);
    margin-top: var(--mtb-space-2);
    font-style: italic;
}

/* Warmup Room Info Container */
.mtb-warmup-room-info {
    margin-top: var(--mtb-space-3);
    padding: var(--mtb-space-3);
    background: rgba(52, 199, 89, 0.05);
    border: 1px solid rgba(52, 199, 89, 0.2);
    border-radius: var(--mtb-radius-md);
}

.mtb-warmup-room-info .mtb-help-text {
    margin: 0;
    font-size: var(--mtb-text-xs);
    color: var(--mtb-text-secondary);
    line-height: 1.4;
}

.mtb-warmup-room-info .mtb-help-text strong {
    color: var(--mtb-success);
    font-weight: var(--mtb-font-bold);
}

/* Error State für Warmup-Räume */
.mtb-warmup-room-error {
    display: flex;
    align-items: flex-start;
    gap: var(--mtb-space-3);
    padding: var(--mtb-space-4);
    background: rgba(255, 59, 48, 0.05);
    border: 1px solid rgba(255, 59, 48, 0.2);
    border-radius: var(--mtb-radius-md);
    color: var(--mtb-error);
    font-size: var(--mtb-text-sm);
    margin-top: var(--mtb-space-3);
}

.mtb-warmup-room-error .mtb-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--mtb-error);
}

.mtb-warmup-room-error span {
    flex: 1;
    line-height: 1.4;
}

/* Debug Actions - für Development */
.mtb-warmup-room-debug-actions {
    display: flex;
    gap: var(--mtb-space-2);
    margin-top: var(--mtb-space-3);
}

.mtb-warmup-room-debug-actions .mtb-btn-sm {
    padding: var(--mtb-space-1) var(--mtb-space-3);
    font-size: var(--mtb-text-xs);
    border-radius: var(--mtb-radius-sm);
}

/* Responsive Design für mobile Geräte */
@media (max-width: 768px) {
    .mtb-warmup-room-selection {
        padding: var(--mtb-space-3);
        margin-bottom: var(--mtb-space-3);
    }
    
    .mtb-warmup-room-selection .mtb-form-control {
        padding: var(--mtb-space-2) var(--mtb-space-3);
        font-size: var(--mtb-text-sm);
    }
    
    .mtb-warmup-room-info {
        padding: var(--mtb-space-2);
    }
    
    .mtb-warmup-room-error {
        padding: var(--mtb-space-3);
        flex-direction: column;
        gap: var(--mtb-space-2);
    }
    
    .mtb-warmup-room-debug-actions {
        flex-direction: column;
    }
}

/* ===========================
   📝 SEAMLESS INFO - DEZENTE STYLING ÜBERARBEITUNG
   =========================== */

.mtb-seamless-info {
    background: rgba(52, 199, 89, 0.03);
    border: 1px solid rgba(52, 199, 89, 0.15);
    border-radius: var(--mtb-radius-md);
    padding: var(--mtb-space-3) var(--mtb-space-4);
    margin-bottom: var(--mtb-space-4);
    text-align: left;
    transition: all var(--mtb-transition-normal);
}

.mtb-seamless-info p {
    margin: 0 0 var(--mtb-space-3) 0;
    color: var(--mtb-text-secondary);
    font-size: var(--mtb-text-sm);
    line-height: var(--mtb-leading-relaxed);
    font-weight: var(--mtb-font-medium);
}

/* Upgrade Notice - dezenter Hinweis-Stil */
.mtb-seamless-upgrade-notice {
    background: rgba(255, 149, 0, 0.05);
    border: 1px solid rgba(255, 149, 0, 0.15);
    border-radius: var(--mtb-radius-sm);
    padding: var(--mtb-space-3);
    margin-top: var(--mtb-space-3);
    display: flex;
    align-items: flex-start;
    gap: var(--mtb-space-2);
    transition: all var(--mtb-transition-normal);
}


.mtb-seamless-upgrade-notice .mtb-icon {
    width: 16px;
    height: 16px;
    color: var(--mtb-warning);
    flex-shrink: 0;
    margin-top: 2px;
}

.mtb-seamless-upgrade-notice span {
    font-size: var(--mtb-text-xs);
    color: var(--mtb-text-secondary);
    line-height: var(--mtb-leading-relaxed);
    margin: 0;
}

.mtb-seamless-upgrade-notice strong {
    color: var(--mtb-warning);
    font-weight: var(--mtb-font-semibold);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .mtb-seamless-info {
        padding: var(--mtb-space-3);
        margin-bottom: var(--mtb-space-3);
    }
    
    .mtb-seamless-info p {
        font-size: var(--mtb-text-xs);
        margin-bottom: var(--mtb-space-2);
    }
    
    .mtb-seamless-upgrade-notice {
        padding: var(--mtb-space-2);
        gap: var(--mtb-space-2);
    }
    
    .mtb-seamless-upgrade-notice .mtb-icon {
        width: 14px;
        height: 14px;
    }
    
    .mtb-seamless-upgrade-notice span {
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .mtb-seamless-info {
        padding: var(--mtb-space-2);
        border-radius: var(--mtb-radius-sm);
    }
    
    .mtb-seamless-upgrade-notice {
        flex-direction: column;
        gap: var(--mtb-space-1);
    }
    
    .mtb-seamless-upgrade-notice .mtb-icon {
        align-self: flex-start;
    }
}

/* ===========================
   MTB MINIMALIST CLEAN TEACHER HEADERS
   =========================== */

/* Teacher Header - Clean and simple */
.mtb-teacher-header {
    padding: 12px !important;
    background: #fafafd !important;
    border-bottom: 1px solid white !important;
    border-right: 1px solid white !important;
    text-align: center;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    width: 140px;
    min-width: 140px;
    max-width: 140px;
    z-index: 5;
}

/* Teacher Name */
.mtb-teacher-name {
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    color: #1d1d1f !important;
    text-transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    line-height: 1.3 !important;
}

/* Rate - Large and blue */
.mtb-teacher-rate {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--mtb-primary) !important;
    margin-bottom: 4px !important;
    display: block;
}

/* Credits label - Small */
.mtb-teacher-rate-label {
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    color: #666 !important;
    margin-bottom: 12px !important;
    font-weight: 600 !important;
}

/* Instruments - As chips */
.mtb-teacher-instruments {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    margin-top: 8px;
}

/* Versteckte Instrumente im Table Header */
.mtb-teacher-instruments .mtb-instrument-hidden {
    display: none;
    margin-top: 4px;
    padding-top: 4px;
}

.mtb-teacher-instruments .mtb-instrument-hidden .mtb-instrument-tag {
    margin: 2px;
}

.mtb-instrument-tag {
    display: inline-block;
    background: white;
    color: #666;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 500;
    border: 1px solid #e0e0e0;
}

/* Higher specificity override for theme button styles */
.mtb-booking-table .mtb-table-teacher-info-icon:hover,
.mtb-booking-table .mtb-table-teacher-info-icon:focus,
.mtb-week-table .mtb-table-teacher-info-icon:hover,
.mtb-week-table .mtb-table-teacher-info-icon:focus {
    color: #0056CC;
    background: rgba(0, 122, 255, 0.1);
}

.mtb-table-teacher-info-icon svg {
    width: 14px !important;
    height: 14px !important;
}

/* Mobile */
@media (max-width: 768px) {
    .mtb-teacher-header {
        padding: 16px 12px !important;
        min-width: 120px;
    }
    
    .mtb-teacher-name {
        font-size: 14px !important;
    }
    
    .mtb-teacher-rate {
        font-size: 20px !important;
    }
    
    .mtb-teacher-instruments {
        font-size: 10px !important;
    }
}

.mtb-cost-item:last-child {
    margin-top: var(--mtb-space-4);
}

.mtb-instrument-toggle:hover{
background: rgba(255, 255, 255, 0.9);
    color: var(--mtb-text-primary);
}

.mtb-instrument-toggle:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.6);
	    color: var(--mtb-text-primary);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2), 0 8px 25px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

/* Tagesansicht */
.mtb-booking-table {
    border-collapse: separate;
    border-spacing: 3px;
    background-color: #fafafd;
    border: none;
    table-layout: fixed !important;
    width: auto !important;
    min-width: auto !important;
}

/* Wochenansicht - gleiche Styles */
.mtb-week-table {
    border-collapse: separate;
    border-spacing: 3px;
    background-color: #fafafd;
    border: none;
    table-layout: fixed !important;
    width: auto !important;
    min-width: auto !important;
}

.mtb-table-slot,
.mtb-week-slot {
    border: none !important;
    border-radius: 8px !important;
    margin: 0;
    box-shadow: none;
    position: relative;
}

.mtb-booking-table td,
.mtb-booking-table th,
.mtb-week-table td,
.mtb-week-table th {
    border: none !important;
}

.mtb-table-header th,
.mtb-time-header,
.mtb-time-cell,
.mtb-day-header {
    background: #fafafd !important;
    border: none !important;
}

.mtb-teacher-header {
    background: #fafafd !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 8px !important;
}

.mtb-table-container,
.mtb-week-table-container {
    background: #fafafd;
    border: 1px solid #fafafd;
    padding: 4px;
    /* border-radius: 12px; */
}

.mtb-table-row,
.mtb-week-row {
    margin-bottom: 4px;
    border-bottom: none !important;
}

.mtb-modal-content {
    transition: height 0.3s ease;
}

/* Modal Body - nur diese Zeile hinzufügen */
.mtb-modal-body {
    transition: height 0.3s ease;
}

/* ===========================
   💬 BOOKING DETAILS MODAL (MDS Style)
   =========================== */

/* Modal Overlay */
.mds-booking-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 9999;
    padding: 20px;
}

.mds-booking-modal-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* Modal Container */
.mds-booking-modal {
    background: rgba(255, 255, 255, 0.85); /* var(--mds-surface) */
    border-radius: 24px; /* var(--mds-radius-xl) */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); /* var(--mds-shadow-xl) */
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    transform: scale(0.9) translateY(20px);
    opacity: 0;
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); /* var(--mds-transition-normal) */
    margin: auto;
    position: relative;
}

.mds-booking-modal-overlay.show .mds-booking-modal {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.mds-booking-modal.active {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* Modal Header Container */
.mds-booking-modal-header-container {
    background: rgba(250, 250, 253, 0.9); /* var(--mds-surface-header) */
    border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* var(--mds-border-light) */
    border-radius: 24px 24px 0 0; /* var(--mds-radius-xl) */
}

/* Modal Header */
.mds-booking-modal-header {
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mds-booking-modal-title {
    font-size: 20px;
    font-weight: 600;
    color: #1D1D1F; /* var(--mds-text-primary) */
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; /* var(--mds-font-family) */
}

/* Modal Close Button */
.mds-booking-modal-close {
    background: #f3f4f6;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); /* var(--mds-transition-fast) */
    color: #86868B; /* var(--mds-text-secondary) */
}

.mds-booking-modal-close:hover {
    background: #e5e7eb;
    color: #1D1D1F; /* var(--mds-text-primary) */
    transform: scale(1.1);
}

.mds-booking-modal-close svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Modal Body */
.mds-booking-modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

/* Modal Footer */
.mds-booking-modal-footer {
    padding: 16px 24px;
    background: rgba(250, 250, 253, 0.9); /* var(--mds-surface-header) */
    border-top: 1px solid rgba(0, 0, 0, 0.05); /* var(--mds-border-light) */
    border-radius: 0 0 24px 24px; /* var(--mds-radius-xl) */
}

.mds-booking-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

/* Booking Info Groups */
.mds-booking-info-group {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* var(--mds-border-light) */
    font-weight: 600;
}

.mds-booking-info-group:last-child {
    border-bottom: none;
}

.mds-booking-info-label {
    font-size: 14px;
    color: #86868B; /* var(--mds-text-secondary) */
    flex-shrink: 0;
    min-width: 120px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

.mds-booking-info-value {
    font-size: 14px;
    color: #1D1D1F; /* var(--mds-text-primary) */
    text-align: right;
    flex: 1;
    margin-left: 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-weight: 600;
}

/* Spezielle Styles für Gesamtkosten */
.mds-total-cost-group .mds-booking-info-value {
    font-size: 20px;
    color: #007AFF;
}

/* Modal Buttons */
.mds-booking-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    min-height: 44px;
}

.mds-booking-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2);
}

.mds-booking-btn-primary {
    background-color: #007AFF;
    color: #ffffff;
}

.mds-booking-btn-primary:hover {
    background-color: #0056CC;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 122, 255, 0.3);
}

.mds-booking-btn-secondary {
    background-color: rgba(255, 255, 255, 0.85);
    color: #1D1D1F;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.mds-booking-btn-secondary:hover {
    background-color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Responsive Modal */
@media (max-width: 768px) {
    .mds-booking-modal-overlay {
        padding: 0;
        align-items: flex-end;
    }
    
    .mds-booking-modal {
        max-width: 100%;
        max-height: 95vh;
        border-radius: 16px 16px 0 0;
        margin: 0;
    }
    
    .mds-booking-modal-header {
        padding: 20px;
    }
    
    .mds-booking-modal-body {
        padding: 20px;
    }
    
    .mds-booking-info-group {
        flex-direction: column;
        gap: 4px;
    }
    
    .mds-booking-info-label {
        min-width: auto;
    }
    
    .mds-booking-info-value {
        text-align: left;
        margin-left: 0;
    }
}
/* Blocked Slots - EXAKT wie im Raumbuchungssystem */
.mtb-slot-blocked,
.mtbs-slot-blocked,
.mtb-slot-type-blocked,
.mtbs-slot-type-blocked,
.mtb-week-slot.mtb-slot-blocked,
.mtb-table-slot.mtb-slot-blocked {
    background: #f8f9fa !important;
    cursor: not-allowed !important;
    position: relative;
    color: #6c757d !important;
    border-color: #dee2e6 !important;
}

/* Diagonale Streifen-Muster - EXAKT wie mrb-slot-blocked-custom */
.mtb-slot-blocked::after,
.mtbs-slot-blocked::after,
.mtb-slot-type-blocked::after,
.mtbs-slot-type-blocked::after,
.mtb-week-slot.mtb-slot-blocked::after,
.mtb-table-slot.mtb-slot-blocked::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        135deg,
        transparent,
        transparent 8px,
        rgba(108, 117, 125, 0.4) 8px,
        rgba(108, 117, 125, 0.4) 16px
    );
    pointer-events: none;
    border-radius: inherit;
}

.mtb-slot-blocked .mtb-slot-status,
.mtbs-slot-blocked .mtbs-slot-status,
.mtb-blocked-text,
.mtbs-blocked-text {
    color: #6c757d !important;
    font-weight: 600;
}

/* Session card when blocked */
.mtb-session-card.is-blocked,
.mtbs-session-card.is-blocked,
.mtb-session-option.is-blocked {
    background: #FEE2E2;
    border-color: #EF4444;
    opacity: 0.8;
    pointer-events: none;
}

.mtb-session-card.is-blocked .mtb-session-status,
.mtbs-session-card.is-blocked .mtbs-session-status {
    background: #EF4444;
    color: white;
}

/* Slot data attribute styling */
[data-type="blocked"] {
    background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%) !important;
    cursor: not-allowed !important;
}

/* NEU: Insufficient Duration Slots - zu kurz für Mindestbuchungsdauer */
.mtb-slot-insufficient-duration,
.mtb-week-slot.mtb-slot-insufficient-duration,
.mtb-table-slot.mtb-slot-insufficient-duration {
    background: #f3f4f6 !important;
    cursor: not-allowed !important;
    position: relative;
    color: #9ca3af !important;
    border-color: #e5e7eb !important;
    opacity: 0.6;
}

/* Punktmuster für insufficient duration */
.mtb-slot-insufficient-duration::after,
.mtb-week-slot.mtb-slot-insufficient-duration::after,
.mtb-table-slot.mtb-slot-insufficient-duration::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle, rgba(156, 163, 175, 0.3) 1px, transparent 1px);
    background-size: 8px 8px;
    pointer-events: none;
    border-radius: inherit;
}

.mtb-slot-insufficient-duration:hover,
.mtb-week-slot.mtb-slot-insufficient-duration:hover,
.mtb-table-slot.mtb-slot-insufficient-duration:hover {
    transform: none !important;
    box-shadow: none !important;
    background: #f3f4f6 !important;
}

/* ===========================
   PROBESTUNDEN DROPDOWN DISABLED
   =========================== */

#mtb-duration-dropdown.mtb-disabled-for-trial,
#mtb-duration-dropdown:disabled {
    background-color: #f5f5f5;
    color: #666;
    cursor: not-allowed;
    opacity: 0.7;
    border-color: #ddd;
}

#mtb-duration-dropdown.mtb-disabled-for-trial:hover,
#mtb-duration-dropdown:disabled:hover {
    border-color: #ddd;
    background-color: #f5f5f5;
}

/* Visual indicator for trial lesson lock */
.mtb-duration-container {
    position: relative;
}

.mtb-duration-container.trial-locked::after {
    content: '🔒';
    position: absolute;
    right: 35px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    opacity: 0.6;
    pointer-events: none;
}

/* ===========================
   PROBESTUNDEN INKOMPATIBLE SLOTS
   =========================== */

.mtb-time-option-trial-incompatible {
    background: #fef2f2 !important;
    border-color: #fca5a5 !important;
    color: #991b1b !important;
    cursor: not-allowed !important;
    opacity: 0.7;
    position: relative;
}

.mtb-time-option-trial-incompatible::after {
    content: '⚠️';
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 12px;
}

.mtb-time-option-trial-incompatible:hover {
    transform: none !important;
    box-shadow: none !important;
    background: #fef2f2 !important;
}

.mtb-time-option-trial-incompatible .mtb-time-price {
    text-decoration: line-through;
    opacity: 0.6;
}

/* ===========================
   PROBESTUNDEN CHECKBOX DISABLED
   =========================== */

#mtb-use-trial:disabled,
#mtb-use-trial[disabled] {
    cursor: not-allowed !important;
    opacity: 0.5;
}

#mtb-use-trial:disabled + label,
#mtb-use-trial[disabled] + label,
.mtb-disabled label {
    cursor: not-allowed !important;
    opacity: 0.6;
    color: #999;
}

.mtb-disabled {
    position: relative;
}

.mtb-disabled::after {
    content: '⚠️ Zeitslot zu kurz';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    color: #ef4444;
    white-space: nowrap;
}

/* ===========================
   📅 TEILWEISE FREIE SLOTS
   =========================== */

/* Stil für die "ab XX:XX" Zeit-Anzeige bei teilweise freien Slots */
.mtb-partial-time {
    display: block;
    font-size: 10px;
    opacity: 0.8;
}

/* ===========================
   👨‍🏫 LEHRER-ÜBERSICHT
   =========================== */

.mtb-teachers-overview {
    margin: var(--mtb-space-8) 0;
    padding: var(--mtb-space-6);
    background: var(--mtb-surface);
    border-radius: var(--mtb-radius-xl);
}

.mtb-overview-header {
    margin-bottom: var(--mtb-space-6);
}

.mtb-section-title {
    display: flex;
    align-items: center;
    gap: var(--mtb-space-3);
    font-size: var(--mtb-text-xl);
    font-weight: var(--mtb-font-bold);
    color: var(--mtb-text-primary);
    margin: 0 0 var(--mtb-space-5) 0;
}

.mtb-section-title .mtb-icon {
    width: 24px;
    height: 24px;
}

/* Override Elementor Styles for Overview Filters */
.mtb-teachers-overview .mtb-filters-row {
    display: flex;
    gap: var(--mtb-space-4);
    flex-wrap: wrap;
    align-items: flex-end;
}

.mtb-teachers-overview .mtb-filter-group {
    flex: 1;
    min-width: 200px;
}

.mtb-teachers-overview .mtb-filter-label {
    display: block;
    font-size: var(--mtb-text-xs);
    font-weight: var(--mtb-font-semibold);
    color: var(--mtb-text-secondary);
    margin-bottom: var(--mtb-space-2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Search Input - Override Elementor */
.mtb-teachers-overview input[type="text"].mtb-filter-input,
.mtb-teachers-overview .mtb-filter-input {
    width: 100% !important;
    padding: 12px 16px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: var(--mtb-radius-lg) !important;
    font-size: var(--mtb-text-base) !important;
    font-weight: var(--mtb-font-medium) !important;
    color: var(--mtb-text-primary) !important;
    transition: all var(--mtb-transition-normal) !important;
    box-sizing: border-box !important;
    height: auto !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

.mtb-teachers-overview input[type="text"].mtb-filter-input:focus,
.mtb-teachers-overview .mtb-filter-input:focus {
    outline: none !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2), 0 8px 25px rgba(0, 0, 0, 0.15) !important;
}

.mtb-teachers-overview input[type="text"].mtb-filter-input::placeholder {
    color: var(--mtb-text-tertiary) !important;
    opacity: 1 !important;
}

/* Instrument Dropdown in Overview - gleiche Styles wie oben */
.mtb-teachers-overview .mtb-instrument-dropdown {
    position: relative;
}

.mtb-teachers-overview .mtb-instrument-options {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--mtb-radius-lg);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    z-index: var(--mtb-z-dropdown);
    margin-top: var(--mtb-space-1);
    overflow: hidden;
}

.mtb-teachers-overview .mtb-instrument-options.show {
    display: block;
}

/* Checkbox Styles im Overview Dropdown */
.mtb-teachers-overview .mtb-instrument-option {
    display: flex;
    align-items: center;
    gap: var(--mtb-space-2);
    padding: var(--mtb-space-2);
    border-radius: var(--mtb-radius-sm);
    cursor: pointer;
    transition: all var(--mtb-transition-fast);
    font-size: var(--mtb-text-sm);
    color: var(--mtb-text-primary);
}

.mtb-teachers-overview .mtb-instrument-option:hover {
    background: rgba(0, 122, 255, 0.1);
}

.mtb-teachers-overview .mtb-instrument-option input[type="checkbox"] {
    display: none;
}

.mtb-teachers-overview .mtb-instrument-option .mtb-checkbox-custom {
    width: 16px;
    height: 16px;
    border: 2px solid var(--mtb-border);
    border-radius: var(--mtb-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--mtb-transition-normal);
    flex-shrink: 0;
    background: white;
}

.mtb-teachers-overview .mtb-instrument-option input[type="checkbox"]:checked + .mtb-checkbox-custom {
    border-color: var(--mtb-primary);
    background: var(--mtb-primary);
}

.mtb-teachers-overview .mtb-instrument-option input[type="checkbox"]:checked + .mtb-checkbox-custom::after {
    content: '✓';
    color: white;
    font-size: 12px;
    font-weight: bold;
}

/* Grid Layout - 6 Spalten */
.mtb-teachers-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--mtb-space-4);
}

@media (max-width: 1400px) {
    .mtb-teachers-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 1200px) {
    .mtb-teachers-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 992px) {
    .mtb-teachers-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .mtb-teachers-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .mtb-teachers-grid {
        grid-template-columns: 1fr;
    }
}

/* Lehrer-Karte - Gleiches Design wie Teacher-Header oben */
.mtb-overview-card {
    background: #fafafd;
    border-radius: var(--mtb-radius-lg);
    padding: var(--mtb-space-4);
    text-align: center;
    transition: all var(--mtb-transition-normal);
    border: 1px solid transparent;
    display: flex;
    flex-direction: column;
    min-height: 280px;
    overflow: hidden;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.mtb-overview-card:hover {
    box-shadow: var(--mtb-shadow-md);
    border-color: #e0e0e0;
    background: #fff;
}

/* Actions immer unten */
.mtb-overview-card .mtb-overview-actions {
    margin-top: auto;
}

/* Avatar - Gleich wie oben */
.mtb-overview-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto var(--mtb-space-3);
    overflow: hidden;
    background: linear-gradient(135deg, rgba(0, 122, 255, 0.1), rgba(0, 122, 255, 0.05));
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #007AFF;
}

.mtb-overview-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mtb-overview-avatar svg {
    width: 32px;
    height: 32px;
    color: #007AFF;
}

/* Name */
.mtb-overview-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--mtb-text-primary);
    margin-bottom: var(--mtb-space-2);
    line-height: 1.3;
}

/* Instrumente */
.mtb-overview-instruments {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    margin-bottom: var(--mtb-space-2);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
}

.mtb-overview-instrument-tag {
    background: white;
    color: #666;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 500;
    border: 1px solid #e0e0e0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    flex-shrink: 1;
}

/* Versteckte Instrumente in Lehrer-Übersicht */
.mtb-overview-instruments .mtb-instrument-hidden {
    display: none;
    flex-basis: 100%;
    width: 100%;
    max-width: 100%;
    text-align: center;
    margin-top: 6px;
    overflow: hidden;
    word-wrap: break-word;
    box-sizing: border-box;
}

.mtb-overview-instruments .mtb-instrument-hidden .mtb-overview-instrument-tag {
    margin: 2px;
    display: inline-block;
    max-width: calc(100% - 8px);
}

/* +X Button für mehr Instrumente - gleiches Styling wie Tags */
.mtb-instrument-more {
    display: inline-block;
    padding: 3px 8px;
    background: #f0f0f0;
    color: #666;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid #e0e0e0;
}

.mtb-instrument-more:hover {
    background: #e5e5e5;
    border-color: #ccc;
}

.mtb-instrument-hidden {
    display: none;
}

/* Arbeitstage */
.mtb-overview-workdays {
    font-size: 10px;
    color: var(--mtb-text-tertiary);
    margin-top: var(--mtb-space-2);
}

.mtb-overview-workdays span {
    display: inline-block;
    padding: 2px 6px;
    background: rgba(0, 122, 255, 0.1);
    color: #007AFF;
    border-radius: 4px;
    margin: 2px;
    font-weight: 500;
}

/* Action Buttons in Card */
.mtb-overview-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: var(--mtb-space-3);
    padding-top: var(--mtb-space-3);
    border-top: 1px solid #e5e7eb;
}

.mtb-overview-info-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid #e0e0e0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
}

.mtb-overview-info-btn:hover {
    background: rgba(0, 122, 255, 0.1);
    border-color: #007AFF;
}

.mtb-overview-info-btn svg {
    width: 16px;
    height: 16px;
    color: #666;
}

.mtb-overview-info-btn:hover svg {
    color: #007AFF;
}

.mtb-overview-termine-btn {
    flex: 1;
    max-width: 120px;
    padding: 8px 12px;
    background: #007AFF;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.mtb-overview-termine-btn:hover {
    background: #0056CC;
}

.mtb-overview-termine-btn svg {
    width: 14px;
    height: 14px;
}

/* Empty State */
.mtb-teachers-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--mtb-space-8);
    color: var(--mtb-text-tertiary);
}

.mtb-teachers-empty .mtb-icon {
    width: 48px;
    height: 48px;
    margin-bottom: var(--mtb-space-4);
    opacity: 0.5;
}