/**
 * Die Stereotypen - Termine Widget Styling
 * 1:1 Replikation des Designs von https://www.diestereotypen.de/termine
 */

/* Grundlegendes Layout für die Termin-Zeilen */
.stereotypen-termine-wrapper {
    width: 100%;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #212529;
}

.termine-veranstaltung {
    padding: 24px 0;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.15s ease;
}

.termine-veranstaltung:last-child {
    border-bottom: none;
}

.termine-veranstaltung .sppb-row-container {
    border-bottom: 0px solid #fff0;
}

.termine-veranstaltung:hover {
    background-color: rgba(0, 136, 204, 0.02);
}

/* OBERKANTEN-AUSRICHTUNG (Top Alignment für alle Spalten wie im Original) */
.termine-veranstaltung .sppb-row {
    align-items: flex-start !important;
}

.termine-veranstaltung .sppb-row > [class*="sppb-col-"],
.termine-veranstaltung .sppb-row > [class*="col-"] {
    align-self: flex-start !important;
}

.termine-datum-uhrzeit,
.termine-titel,
.termine-location,
.termine-infos,
.termine-link {
    align-self: flex-start !important;
}

.termine-datum-uhrzeit h3,
.termine-titel p,
.termine-location p,
.termine-infos p,
.termine-link p {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 1. Spalte: Datum & Uhrzeit */
.termine-datum-uhrzeit h3 {
    margin: 0 0 3px 0;
    line-height: 1.1;
    color: #111111;
    font-weight: bold;
    font-size: 24px;
    font-family: 'Oswald', sans-serif;
}

.termine-datum-uhrzeit p {
    margin: 0;
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    color: #333;
    font-size: 16px;
    line-height: 1.2;
}

/* Abgesagter Termin Datum */
.termin-abgesagt .termine-datum-uhrzeit h3,
.termin-abgesagt .termine-datum-uhrzeit h3 span {
    color: #C5C5C5 !important;
}
.termin-abgesagt .termine-datum-uhrzeit p,
.termin-abgesagt .termine-datum-uhrzeit p span {
    color: #C5C5C5 !important;
}

/* 2. Spalte: Titel */
.termine-titel p {
    margin: 0;
    text-transform: uppercase;
    color: #000;
    font-size: 24px;
    line-height: 1.1;
    font-weight: bold;
    font-family: 'Oswald', sans-serif;
}

.termine-titel strong {
    font-weight: 800;
}

.termine-titel em {
    font-style: italic;
    font-weight: 800;
}

/* Farbige Formate (z.B. Workshop blau) */
.termine-titel .format-workshop {
    color: #000;
}

/* Abgesagt-Titel */
.termine-titel .text-abgesagt-badge {
    color: #FF0000;
    font-weight: 800;
}
.termine-titel .text-abgesagt-title {
    color: #8C8C8C;
    font-weight: 800;
}

/* 3. Spalte: Location */
.termine-location p {
    margin: 0;
    line-height: 1.2;
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    font-size: 16px;
    color: #333;	
}

.termine-location a {
    color: #1060ff;
    text-decoration: none;
    font-weight: 300;
    transition: color 0.15s ease;
    font-size: 19px;
    display: inline-block;
    line-height: 1.2;
}

.termine-location a:hover {
    color: #000;
    text-decoration: none;
}

.termine-location .location-city {
    color: #333;
    font-size: 19px;
}

/* 4. Spalte: INFOS Text-Link */
.termine-infos p {
    margin: 0;
    line-height: 1.1;
}

.btn-termin-info {
    display: inline-block;
    background: transparent;
    border: none;
    padding: 0;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 0.5px;
    text-decoration: none;
    cursor: pointer;
    text-transform: uppercase;
    transition: color 0.15s ease;
    font-family: 'Oswald', sans-serif;
    color: #1060ff;
    line-height: 1.1;
}

.termine-infos a {
    text-transform: uppercase;
    font-weight: bold;
    color: #1060ff;
    font-family: 'Oswald', sans-serif;
    font-size: 24px;
    line-height: 1.1;
    display: inline-block;
}

.btn-termin-info:hover,
.termine-infos a:hover {
    color: #000;
    text-decoration: none;
}

.termine-veranstaltung .sppb-row-container {
    border-bottom: 0px solid #fff0;
}

/* 5. Spalte: TICKETS Text-Link */
.termine-link p {
    margin: 0;
    line-height: 1.1;
}

.termine-link a {
    display: inline-block;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-decoration: none !important;
    text-transform: uppercase;
    transition: color 0.15s ease;
    font-family: 'Oswald', sans-serif;
    font-size: 24px;
    color: #1060ff !important;
    line-height: 1.1;
}

.termine-link a:hover {
    color: #000 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

.termine-link .termin-ausfall-text {
    font-size: 16px;
    line-height: 1.2;
    color: #333333;
    font-weight: 300;
    display: inline-block;
    font-family: 'Oswald', sans-serif;
}

/* Modal Popup für Detail-Informationen (INFOS) */
.stereotypen-modal {
    display: none; /* Standardmäßig IMMER geschlossen! */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 2147483647 !important; /* Maximal möglicher z-Index im Browser */
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

.stereotypen-modal.is-open {
    display: flex !important;
}

.stereotypen-modal-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(3px) !important;
    z-index: 1 !important;
}

.stereotypen-modal-dialog {
    position: relative !important;
    background: #ffffff !important;
    width: 100% !important;
    max-width: 620px !important;
    max-height: 85vh !important;
    border-radius: 8px !important;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.45) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: 2 !important;
    opacity: 1 !important;
    animation: stModalFadeIn 0.2s ease-out;
}

@keyframes stModalFadeIn {
    from { opacity: 0; transform: translateY(15px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.stereotypen-modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #f8f9fa;
}

.stereotypen-modal-header h4 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: #111;
    font-family: 'Oswald', sans-serif;
}

.stereotypen-modal-close {
    background: transparent;
    border: none;
    font-size: 32px;
    line-height: 1;
    color: #888;
    cursor: pointer;
    padding: 0;
    margin: 0;
    transition: color 0.15s;
}

.stereotypen-modal-close:hover {
    color: #000;
}

.stereotypen-modal-body {
    padding: 24px;
    overflow-y: auto;
    font-size: 15px;
    line-height: 1.6;
    color: #333;
}

.modal-event-meta {
    background-color: #f0f7fb;
    border-left: 4px solid #1060ff;
    padding: 12px 16px;
    margin-bottom: 18px;
    border-radius: 0 4px 4px 0;
    font-size: 14px;
}

.modal-event-meta p {
    margin: 0;
    line-height: 1.5;
}

.modal-event-text {
    white-space: pre-line;
}

.stereotypen-modal-footer {
    padding: 16px 24px;
    border-top: 1px solid #e9ecef;
    background-color: #f8f9fa;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
}

.modal-ticket-btn {
    background-color: #1060ff;
    color: #ffffff !important;
    padding: 9px 20px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    transition: background-color 0.15s;
}

.modal-ticket-btn:hover {
    background-color: #000000;
}

.modal-close-btn {
    background: #e9ecef;
    color: #333;
    border: 1px solid #ced4da;
    padding: 9px 18px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}

.modal-close-btn:hover {
    background: #dee2e6;
}

/* Responsive Verhalten */
@media (max-width: 1000px) {
	.termine-datum-uhrzeit h3, .termine-datum-uhrzeit p {
		color: #fff !important;
	}
}

@media (max-width: 767px) {
    .termine-veranstaltung {
        padding: 18px 5px;
    }
    .termine-datum-uhrzeit h3 {
        font-size: 20px;
    }
    .termine-titel {
        margin-top: 8px;
        margin-bottom: 6px;
    }
    .termine-location {
        margin-bottom: 12px;
    }
    .termine-infos, .termine-link {
        display: inline-block;
        margin-right: 15px;
    }
}