:root{
    --primary-dark:#2a3b59;
    --primary-medium:#405e90;
    --primary-light:#7d96be;
    --primary-ultra-light:#e0e9f6;
    --background-white:#ffffff;
    --background-light:#f8f9fa;
    --border-light:#e9ecef;
    --text-primary:#2a3b59;
    --text-secondary:#6c757d;
    --text-white:#ffffff;
    --text-muted:#6b7280;
    --shadow-subtle:0 1px 3px rgba(42,59,89,0.1);
    --radius-small:4px;
    --radius-medium:8px;
    --spacing-xs:4px;
    --spacing-sm:8px;
    --spacing-md:16px;
    --spacing-lg:24px;
    --spacing-xl:32px
}

*{
    box-sizing:border-box
}

body{
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
    line-height:1.5;
    color:var(--text-primary);
    background-color:var(--background-light);
    margin:0;
    padding:0
}

.meine-buchungssystem-kurs-termine-wrapper{
    max-width:1200px;
    margin:var(--spacing-lg) auto;
    padding:var(--spacing-lg);
    background-color:var(--background-white);
    border-radius:var(--radius-medium);
    box-shadow:var(--shadow-subtle)
}

.meine-buchungssystem-kurs-termine-wrapper .kurs-titel{
    margin:0 0 var(--spacing-lg) 0;
    padding:0;
    color:var(--primary-dark);
    font-size:1.5rem;
    font-weight:600;
    text-align:left;
    background:none;
    border:none
}

.meine-buchungssystem-table-header{
    display:none
}

.meine-buchungssystem-angebot-card{
    display:flex;
    align-items:flex-start; /* Inhalt oben ausrichten */
    gap:var(--spacing-lg);
    padding:var(--spacing-lg);
    border-bottom:1px solid var(--border-light);
    background:var(--background-white);
    box-shadow:none;
    border-radius:var(--radius-small);
    margin:0 0 var(--spacing-md) 0;
    position:relative;
    border-left:4px solid var(--primary-light);
    transition:all 0.2s ease;
    flex-wrap: wrap; /* Ermöglicht Umbruch des Hauptkarteninhalts auf sehr kleinen Bildschirmen */
}

.meine-buchungssystem-kurs-termine-wrapper .meine-buchungssystem-angebot-card:last-of-type{
    border-bottom:none;
    margin-bottom:0
}

.meine-buchungssystem-angebot-card:hover{
    background:var(--background-light);
    border-left-color:var(--primary-medium);
    transform:none;
    box-shadow:var(--shadow-subtle)
}

.meine-buchungssystem-angebot-card::before{
    display:none
}

/* Linke Meta-Spalte (Preis) */
.meine-buchungssystem-left-meta-col {
    flex-shrink: 0; /* Verhindert Schrumpfung */
    width: 140px; /* Feste Breite für die Preisspalte */
    text-align: center;
    padding-right: var(--spacing-md);
    border-right: 1px solid var(--border-light); /* Trennlinie */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Preis vertikal zentrieren */
    align-items: center; /* Preis horizontal zentrieren */
    min-height: 100px; /* Sicherstellung einer Mindesthöhe für Ausrichtung basierend auf Inhalt */
}

/* Preisinfo-Stile - jetzt innerhalb meine-buchungssystem-left-meta-col */
.meine-buchungssystem-price-info {
    font-size: 1.5rem; /* Größere Schrift für Betonung */
    font-weight: 700;
    color: var(--primary-dark); /* Dunklere Primärfarbe für Preis */
    line-height: 1.2;
}

.meine-buchungssystem-price-info .woocommerce-Price-amount {
    font-weight: 700; /* Sicherstellen, dass der Betrag selbst fett ist */
}

.meine-buchungssystem-price-info del {
    color: var(--text-muted);
    font-size: 0.7em; /* Kleiner für durchgestrichenen Preis */
    font-weight: 400;
    display: block; /* Auf einer neuen Zeile anzeigen */
    margin-bottom: 2px;
}

.meine-buchungssystem-price-info ins {
    text-decoration: none;
}

/* Hauptinhaltsbereich (rechts vom Preis) */
.meine-buchungssystem-content-area {
    display: flex;
    flex: 1; /* Ermöglicht Wachstum und Nutzung des verbleibenden Platzes */
    flex-direction: column; /* Elemente vertikal stapeln (Titel oben, dann die Reihe darunter) */
    align-items: flex-start; /* Standardausrichtung an den Anfang */
    gap: var(--spacing-md); /* Kleinerer Abstand für gestapelte Elemente */
}

/* Kurstitel-Styling */
.meine-buchungssystem-course-name {
    width: 100%; /* Volle Breite, um Zentrierung zu ermöglichen */
    text-align: center; /* Text horizontal zentrieren */
    margin: 0 0 var(--spacing-md) 0; /* Abstand anpassen */
    padding: 0;
    color: var(--primary-dark);
    font-size: 1.3rem; /* Etwas kleiner als Überschrift des Wrappers, größer als anderer Text */
    font-weight: 600;
    line-height: 1.4;
    /* Unteren Rand für Trennung hinzufügen */
    border-bottom: 1px solid var(--border-light);
    padding-bottom: var(--spacing-md);
}

/* Container für Termine und Aktionsspalte (sollten nebeneinander liegen) */
.meine-buchungssystem-main-details-row {
    display: flex;
    width: 100%; /* Volle Breite des Elternelements */
    align-items: flex-start; /* Inhalt oben ausrichten */
    gap: var(--spacing-xl); /* Abstand zwischen Terminen und Aktionsspalte */
    flex-wrap: wrap; /* Ermöglicht Umbruch der Spalten innerhalb dieser Reihe */
    flex-direction: row !important; /* Wichtig: Diese Elemente sollen standardmäßig nebeneinander stehen! */
}

/* Termine-Sektion */
.meine-buchungssystem-termin-section {
    flex: 2; /* Termine nehmen mehr Platz ein */
    min-width: 250px; /* Mindestbreite für Terminspalte */
    padding: 0;
}

.meine-buchungssystem-angebot-termine-heading{
    display:block;
    color:var(--text-muted);
    font-size:1rem;
    font-weight:500;
    margin-bottom:var(--spacing-md);
}

.meine-buchungssystem-angebot-termine-container{
    display:grid; /* Zu Grid geändert für besseres Datums-Layout */
    grid-template-columns: repeat(3, 1fr); /* 3 Spalten für Daten */
    gap: var(--spacing-sm); /* Kleinerer Abstand für Badges */
    max-height: 180px; /* Höhe begrenzen und scrollbar machen */
    overflow-y: auto;
    padding-right: 10px; /* Etwas Padding für Scrollbar */
}

.meine-buchungssystem-termin-badge{
    background:none;
    border:none;
    border-radius:0;
    padding:0;
    box-shadow:none;
    text-align:left;
    cursor:default;
    transition:none;
    min-width:auto;
    flex-shrink:1;
    /* Sicherstellen, dass einzelne Badge-Elemente nicht ungeschickt umbrechen */
    display: block;
}

.meine-buchungssystem-termin-badge:hover{
    background:none;
    border:none;
    transform:none;
    box-shadow:none
}

.meine-buchungssystem-termin-badge .termin-datum{
    font-weight:400;
    color:var(--text-primary);
    font-size:0.95rem;
    margin-bottom:var(--spacing-xs);
    display:block
}

.meine-buchungssystem-termin-badge .termin-zeit{
    color:var(--primary-medium);
    font-size:0.9rem;
    font-weight:400;
    margin-bottom:0;
    display:block
}

.meine-buchungssystem-termin-badge .termin-wochentag{
    display:none
}

.meine-buchungssystem-termin-badge:hover .termin-datum,.meine-buchungssystem-termin-badge:hover .termin-zeit{
    color:inherit
}

.meine-buchungssystem-platz-info-wrapper,
.meine-buchungssystem-platz-info-heading,
.meine-buchungssystem-platz-info{
    display:block
}

.meine-buchungssystem-platz-info-wrapper{
    display:flex;
    justify-content:center;
    align-items:center;
    margin-right:var(--spacing-md)
}

.meine-buchungssystem-platz-info{
    background-color:var(--primary-ultra-light);
    border:1px solid var(--primary-light);
    border-radius:var(--radius-small);
    padding:var(--spacing-sm) var(--spacing-md);
    text-align:center;
    font-weight:500;
    color:var(--primary-dark);
    min-width:100px;
    font-size:0.85rem;
    white-space:nowrap;
    margin:0 auto var(--spacing-md) auto;
}

.meine-buchungssystem-platz-info .freie-plaetze-value{
    display:inline;
    font-size:1rem;
    font-weight:700;
    color:var(--primary-medium);
    margin-left:var(--spacing-xs)
}

.meine-buchungssystem-platz-info .freie-plaetze-value.zero-places{
    color:#dc2626
}

.meine-buchungssystem-platz-info .freie-plaetze-value.unlimited-places{
    color:#059669
}

/* Aktionsspalte (Plätze und Button) */
.meine-buchungssystem-action-col{
    display:flex;
    flex-direction:column;
    align-items:center; /* Elemente horizontal zentrieren */
    justify-content:flex-start; /* Inhalt oben ausrichten */
    flex-shrink:0;
    gap:var(--spacing-md);
    min-width:200px; /* Angepasste Mindestbreite für Aktionsspalte */
    padding-left:var(--spacing-xl);
    border-left:1px solid var(--border-light);
}

.meine-buchungssystem-add-to-cart-button{
    background:linear-gradient(135deg,var(--primary-medium) 0%,var(--primary-dark) 100%)!important;
    color:var(--text-white)!important;
    border:none!important;
    border-radius:var(--radius-medium)!important;
    padding:12px 24px!important;
    font-size:0.9rem!important;
    font-weight:500!important;
    text-transform:none;
    cursor:pointer;
    transition:all 0.2s ease;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:var(--spacing-sm);
    min-width:200px;
    box-shadow:var(--shadow-subtle);
    white-space:nowrap;
    width: 100%; /* Sicherstellen, dass der Button die volle Breite innerhalb seiner Spalte einnimmt */
}

.meine-buchungssystem-add-to-cart-button:hover,.meine-buchungssystem-add-to-cart-button:focus{
    background:linear-gradient(135deg,var(--primary-dark) 0%,#1a2b42 100%)!important;
    transform:translateY(-1px);
    box-shadow:0 4px 12px rgba(42,59,89,0.2)
}

.meine-buchungssystem-add-to-cart-button::before{
    content:'+';
    font-size:1rem;
    font-weight:600
}

.meine-buchungssystem-add-to-cart-button.disabled,.meine-buchungssystem-add-to-cart-button.out-of-stock{
    background:linear-gradient(135deg,#9ca3af 0%,#6b7280 100%)!important;
    color:var(--text-white)!important;
    cursor:not-allowed;
    transform:none;
    box-shadow:none
}

.meine-buchungssystem-add-to-cart-button.out-of-stock::before{
    content:'×'
}

/* Responsive Anpassungen */
/* Desktop / Größere Tablets: Termine und Aktion nebeneinander */
@media(min-width:993px) {
    .meine-buchungssystem-termin-section {
        flex-grow: 1; /* Termine nehmen verfügbaren Platz ein */
    }
    .meine-buchungssystem-action-col {
        flex-basis: 250px; /* Feste Breite für die Aktionsspalte */
        flex-grow: 0;
        flex-shrink: 0;
    }
}

/* Tablets / Kleinere Desktops: Termine und Aktion untereinander */
@media(max-width:992px) {
    .meine-buchungssystem-content-area {
        align-items: center; /* Inhalt innerhalb des Content-Bereichs zentrieren */
    }
    .meine-buchungssystem-main-details-row {
        flex-direction: column; /* Termine und Aktion untereinander auf kleineren Bildschirmen */
        gap: var(--spacing-lg);
        align-items: center; /* Zentrieren der gestapelten Spalten */
    }

    .meine-buchungssystem-termin-section,
    .meine-buchungssystem-action-col {
        min-width: unset; /* Mindestbreite entfernen */
        width: 100%; /* Volle Breite einnehmen */
        padding-left: 0;
        border-left: none;
    }
    .meine-buchungssystem-action-col {
        border-top: 1px solid var(--border-light); /* Trennlinie oben hinzufügen */
        padding-top: var(--spacing-lg);
    }
    .meine-buchungssystem-platz-info {
        margin-top: var(--spacing-md); /* Abstand hinzufügen, falls nötig */
    }
}

/* Mobile */
@media(max-width:768px){
    .meine-buchungssystem-kurs-termine-wrapper{
        margin:var(--spacing-md);
        padding:var(--spacing-md)
    }

    .meine-buchungssystem-angebot-card{
        flex-direction:column; /* Preisspalte oben stapeln */
        align-items:stretch;
        gap:var(--spacing-md);
        border-left:none;
        border-bottom:1px solid var(--border-light);
        margin-bottom:var(--spacing-md);
        box-shadow:var(--shadow-subtle);
        border-radius:var(--radius-medium)
    }

    .meine-buchungssystem-angebot-card:last-of-type{
        border-bottom:none
    }

    .meine-buchungssystem-left-meta-col {
        width: 100%; /* Volle Breite auf Mobilgeräten */
        border-right: none; /* Rechten Rand entfernen */
        padding-right: 0;
        padding-bottom: var(--spacing-md); /* Abstand unter dem Preis hinzufügen */
        border-bottom: 1px solid var(--border-light); /* Unteren Rand hinzufügen */
        min-height: auto;
    }

    .meine-buchungssystem-content-area{
        flex-direction:column;
        gap:var(--spacing-md);
        align-items: center; /* Inhalt innerhalb dieser Spalte zentrieren */
    }

    .meine-buchungssystem-termin-section {
        grid-template-columns: repeat(2, 1fr); /* 2 Spalten für Termine auf kleineren Bildschirmen */
        gap: var(--spacing-md);
    }

    .meine-buchungssystem-action-col{
        align-items:stretch; /* Elemente auf volle Breite strecken */
        text-align: center; /* Text innerhalb der Spalte zentrieren */
    }

    .meine-buchungssystem-platz-info {
        text-align: center;
        width: auto;
        margin-left: auto;
        margin-right: auto;
    }

    .meine-buchungssystem-add-to-cart-button{
        width:100%;
        min-width:auto
    }
}

@media(max-width:480px){
    .meine-buchungssystem-kurs-termine-wrapper .kurs-titel{
        font-size:1.25rem
    }

    .meine-buchungssystem-angebot-card{
        padding:var(--spacing-md)
    }

    .meine-buchungssystem-add-to-cart-button{
        padding:10px 20px!important;
        font-size:0.85rem!important
    }

    .meine-buchungssystem-kurs-termine-wrapper{
        padding:var(--spacing-sm)
    }

    .meine-buchungssystem-angebot-card{
        margin:0 0 var(--spacing-md) 0
    }

    .no-offers-available,
    .no-termine-message{
        text-align:center;
        color:var(--text-secondary);
        font-style:italic;
        margin:var(--spacing-lg) 0
    }

    .meine-buchungssystem-angebot-termine-container {
        grid-template-columns: 1fr; /* Einzelspalte für Termine auf sehr kleinen Bildschirmen */
    }
}