/* ============================================================
   Theater Kalender – Frontend & Admin Styles
   ============================================================ */

/* ── Wrapper ─────────────────────────────────────────────── */
.theater-kalender-wrap {
    font-family: inherit;
    box-sizing: border-box;
    max-width: 100%;
}

/* ── Zeile: 2 Monate nebeneinander ───────────────────────── */
.theater-kalender-row {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    margin-bottom: 40px;
    align-items: flex-start;
}

/* ── Einzelner Monat ──────────────────────────────────────── */
.theater-kalender-month {
    flex: 1 1 280px;
    min-width: 280px;
    max-width: 480px;
}

/* ── Monatstitel ──────────────────────────────────────────── */
.theater-kalender-month-title {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 8px 0;
    padding: 0;
    letter-spacing: 0.02em;
    color: #111;
}

/* ── Tabelle ──────────────────────────────────────────────── */
.theater-kalender-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

/* ── Kopfzeile (Mo–So) ────────────────────────────────────── */
.theater-kalender-table thead th {
    text-align: center;
    font-size: 0.78rem;
    font-weight: 700;
    color: #333;
    padding: 6px 2px;
    border: 1px solid #d0d0d0;
    background: #f5f5f5;
    letter-spacing: 0.03em;
}

/* ── Alle Zellen ──────────────────────────────────────────── */
.theater-kalender-table td {
    text-align: center;
    vertical-align: top;
    padding: 6px 4px 8px;
    border: 1px solid #d0d0d0;
    height: 52px;
    position: relative;
    background: #f9f9f9;
    transition: opacity 0.15s;
}

/* ── Leere Zellen (Auffüller) ─────────────────────────────── */
.theater-kalender-table td.theater-kalender-empty {
    background: transparent;
    border-color: transparent;
}

/* ── Normale Tage (kein Ereignis) ────────────────────────── */
.theater-kalender-table td.theater-kalender-day {
    color: #555;
}

/* ── Vorstellungstag (blau / türkis wie im Screenshot) ───── */
.theater-kalender-table td.theater-kalender-day--event {
    background-color: #00c8c8;
    color: #fff;
    font-weight: 700;
    border-color: #00b0b0;
}

/* ── Ausgebuchter Vorstellungstag (rot) ───────────────────── */
.theater-kalender-table td.theater-kalender-day--soldout {
    background-color: #e03535;
    color: #fff;
    font-weight: 700;
    border-color: #c02020;
}

/* ── Tageszahl ────────────────────────────────────────────── */
.theater-kalender-day-num {
    display: block;
    font-size: 0.92rem;
    font-weight: inherit;
    line-height: 1.2;
}

/* ── Vorstellungstitel (z.B. "Premiere", "Dernière") ──────── */
.theater-kalender-day-label {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    color: #c00030;           /* roter Akzent wie im Screenshot */
    line-height: 1.2;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Auf Event-Tagen: Label bleibt gut lesbar */
.theater-kalender-day--event .theater-kalender-day-label,
.theater-kalender-day--soldout .theater-kalender-day-label {
    color: rgba(255, 255, 255, 0.90);
}

/* ── "ausgebucht"-Text ────────────────────────────────────── */
.theater-kalender-soldout-text {
    display: block;
    font-size: 0.60rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #fff;
    margin-top: 2px;
    line-height: 1.1;
}

/* ── Kein-Event-Meldung ───────────────────────────────────── */
.theater-kalender-no-events {
    color: #888;
    font-style: italic;
}

/* ── Responsive (ab 600 px einspaltig) ───────────────────── */
@media (max-width: 680px) {
    .theater-kalender-row {
        flex-direction: column;
        gap: 20px;
    }
    .theater-kalender-month {
        max-width: 100%;
    }
    .theater-kalender-table td {
        height: 44px;
        padding: 4px 2px 6px;
    }
    .theater-kalender-day-num {
        font-size: 0.82rem;
    }
    .theater-kalender-day-label {
        font-size: 0.55rem;
    }
    .theater-kalender-soldout-text {
        font-size: 0.52rem;
    }
}