/* Styling für die Seminar-Tabelle (Desktop-Ansicht) */
.seminar-table {
    width: 100%;
    border-collapse: collapse; /* Vermeidet doppelte Linien zwischen den Zellen */
}

.seminar-table th,
.seminar-table td {
    padding: 15px; /* Abstand innerhalb der Zellen */
    text-align: left; /* Text linksbündig */
    border-bottom: 1px solid #ddd; /* Dünne Trennlinie unter den Zellen */
}

/* Abwechselnde Zeilenfarben für die Tabelle */
.seminar-table tr:nth-child(even) {
    background-color: #f9f9f9; /* Hellgrau für gerade Zeilen */
}

.seminar-table tr:nth-child(odd) {
    background-color: #d0d0d0; /* Etwas dunkleres Grau für ungerade Zeilen */
}

/* Hover-Effekt für Tabellenzeilen */
.seminar-table tr:hover {
    background-color: #c0c0c0; /* Helleres Grau, wenn mit der Maus über die Zeile gefahren wird */
}

/* Button-Styling für den "Jetzt buchen"-Button */
.btn-buchen {
    display: inline-block;
    padding: 10px 20px;
    background-color: #08298A; /* Dunkelblau */
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    text-align: center;
    transition: transform 0.3s, background-color 0.3s; /* Sanfte Animation für Hover-Effekt */
}

/* Hover-Effekt für den Button */
.btn-buchen:hover {
    transform: scale(1.1); /* Leichte Vergrößerung bei Hover */
    background-color: #002244; /* Dunkleres Blau beim Hover */
}

/* Styling für die Seminar-Cards (Mobile Ansicht) */
.seminar-card {
    background-color: white;
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    display: none; /* Cards sind in der Desktop-Ansicht verborgen */
}

/* Formatierung der Inhalte in den Cards */
.seminar-card .date,
.seminar-card .location,
.seminar-card .price {
    margin-bottom: 10px;
}

.seminar-card .price span {
    font-weight: bold;
}

/* Mobile Ansicht: Tabelle verstecken, Cards anzeigen */
@media screen and (max-width: 768px) {
    .seminar-table {
        display: none; /* Tabelle wird auf mobilen Geräten ausgeblendet */
    }

    .seminar-card {
        display: block; /* Cards werden auf mobilen Geräten angezeigt */
    }
}