/* ============================================================
   1. GRUNDSTRUKTUR (Klassisch & sicher vor JS-Fehlern)
   ============================================================ */

.calendarWidget .container,
.calendarWidget .container.multiCalendarWidget {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    color: inherit !important;
    max-width: 960px !important; 
    margin: 0 auto !important;
}

/* Verhindert, dass Smoobus JS die Tabellen auf dem Handy zerschießt */
.multiCalendarWidget .fullCalendar {
    transition: none !important;
}

/* ANTI-SMOOBU-HACK: 
   Sollte das JavaScript versehentlich die ".smallDevices" Klasse auf dem 
   Desktop aktivieren, ignorieren wir sie hier und zwingen es auf 50%! */
@media (min-width: 801px) {
    .multiCalendarWidget .fullCalendar.smallDevices {
        width: 50% !important;
        float: left !important;
    }
}


/* ============================================================
   2. TEXTE & HEADER (Dein Original)
   ============================================================ */
.multiCalendarWidget a {
    text-decoration: none !important;
}
.multiCalendarWidget h2 {
    font-size: 20px !important;
    line-height: 1.25em !important;
    margin: .25em 0 !important;
}
.multiCalendarWidget h3 {
    font-size: 1.5em !important;
    line-height: 1em !important;
    margin: .33em 0 !important;
}
.multiCalendarWidget .singleCalendarWidget,
.multiCalendarWidget .singleCalendarWidget h2 {
    text-align: center !important;
    margin-left: 20px !important;
    margin-right: 20px !important;
}
.multiCalendarWidget .singleCalendarWidget .header,
.multiCalendarWidget .singleCalendarWidget h2 .header {
    position: relative !important;
}
.multiCalendarWidget .singleCalendarWidget .header div,
.multiCalendarWidget .singleCalendarWidget h2 .header div {
    position: relative !important;
	color: var(--text) !important;
}
.multiCalendarWidget .singleCalendarWidget h2,
.multiCalendarWidget .singleCalendarWidget h2 h2 {
    text-transform: uppercase !important;
}


/* ============================================================
   3. TABELLE (Blockiert Smoobus hartcodierte 50px)
   ============================================================ */
.multiCalendarWidget .singleCalendarWidget table,
.multiCalendarWidget .singleCalendarWidget h2 table {
    width: 100% !important;
    table-layout: fixed !important;      
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}
.multiCalendarWidget .singleCalendarWidget table thead,
.multiCalendarWidget .singleCalendarWidget h2 table thead {
    font-weight: 600 !important;
    text-transform: uppercase !important;
}
.multiCalendarWidget .singleCalendarWidget table tbody,
.multiCalendarWidget .singleCalendarWidget h2 table tbody {
    color: var(--permagrau) !important;
}
.multiCalendarWidget .singleCalendarWidget table tr,
.multiCalendarWidget .singleCalendarWidget h2 table tr {
    width: 100% !important;
}

/* Überschreibt das Quetschen in den Zellen */
.multiCalendarWidget .singleCalendarWidget table td,
.multiCalendarWidget .singleCalendarWidget h2 table td {
    padding: 0 !important;
    box-sizing: border-box;
    height: 66px !important;             
    line-height: 66px !important;
    text-align: center !important;
    width: auto !important;              
}


/* ============================================================
   4. DEINE FARBEN (Dein Original)
   ============================================================ */
.multiCalendarWidget .singleCalendarWidget table td:empty{
    background: var(--hintergrund);
	color: var(--text) !important;
}
.multiCalendarWidget .singleCalendarWidget table thead td{
    background: var(--hintergrund);
	color: var(--text) !important;
}
.multiCalendarWidget .singleCalendarWidget table td,
.legende .free{
    background: lightgreen;
	color: var(--permagrau) !important;
}
.multiCalendarWidget .singleCalendarWidget table td.normal,
.multiCalendarWidget .singleCalendarWidget h2 table td.normal,
.legende .normal {
    background-color: #ffbfbf !important;
	color: var(--permagrau) !important;
}
.multiCalendarWidget .singleCalendarWidget table td.arrival,
.multiCalendarWidget .singleCalendarWidget h2 table td.arrival,
.legende .arrival{
    background: linear-gradient(to right bottom, lightgreen 50%, #ffbfbf  50%) !important;
	color: var(--permagrau) !important;
}
.multiCalendarWidget .singleCalendarWidget table td.departure,
.multiCalendarWidget .singleCalendarWidget h2 table td.departure,
.legende .departure {
    background: linear-gradient(to right bottom, #ffbfbf 50%, lightgreen 50%) !important;
	color: var(--permagrau) !important;
}
.multiCalendarWidget .singleCalendarWidget table td.current-day,
.multiCalendarWidget .singleCalendarWidget h2 table td.current-day {
    border: 2px solid var(--green1) !important;
}


/* ============================================================
   5. PFEILE, BUTTONS & LOGO (Dein Original)
   ============================================================ */
.multiCalendarWidget .btn-prev,
.multiCalendarWidget .btn-next {
    border-radius: 50% !important;
    color: #cbd1d2 !important;
    height: 32px !important;
    font-size: 16px !important;
    line-height: 28px !important;
    margin: -12px !important;
    position: absolute !important;
    top: 32% !important;
    width: 32px !important;
}
.multiCalendarWidget .btn-prev.smallDevices,
.multiCalendarWidget .btn-next.smallDevices {
    top: -20px !important;
}
.multiCalendarWidget .btn-prev {
    left: 26px !important;
}
.multiCalendarWidget .btn-prev.smallDevices {
    left: 16px !important;
}
.multiCalendarWidget .btn-next {
    right: 26px !important;
}
.multiCalendarWidget .btn-next.first {
    display: none !important;
}
.multiCalendarWidget .btn-next.smallDevices {
    right: 16px !important;
}
.multiCalendarWidget .btn-next.smallDevices.first {
    display: inherit !important;
}
.multiCalendarWidget .btn-next.smallDevices.last {
    display: none !important;
}
.multiCalendarWidget .logo {
    display: none !important;
}


/* ============================================================
   6. LEGENDE & HEADER (Dein Original)
   ============================================================ */
.legende{
	color: var(--text);
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 25px;
}
.legende td:nth-child(2) {
  padding-left: 25px;
}
.calendarWidget {
    display: flex;
    justify-content: center;
}
#main .entry #secondPartHeader h2, #main .entry #secondPartHeader h2::before, #main .entry #secondPartHeader h2::after {
    background-color: unset !important;
    width: 100% !important;
    margin: 0 !important;
    background: unset !important;
    background-image: unset !important;
    word-break: unset !important;
    -webkit-hyphens: none;
    hyphens: none;
    color: var(--schwarz) !important;
}


/* ============================================================
   7. KLICKSICHERE FARBFILTER FÜR DIE PFEILE
   ============================================================ */
.multiCalendarWidget a[class*="btn-prev"] img,
.multiCalendarWidget a[class*="btn-next"] img,
.multiCalendarWidget a[class*="btn-prev"] svg,
.multiCalendarWidget a[class*="btn-next"] svg {
  filter: brightness(0) !important;
}

body.dark-theme .multiCalendarWidget a[class*="btn-prev"] img,
body.dark-theme .multiCalendarWidget a[class*="btn-next"] img,
body.dark-theme .multiCalendarWidget a[class*="btn-prev"] svg,
body.dark-theme .multiCalendarWidget a[class*="btn-next"] svg {
  filter: brightness(0) invert(1) !important;
}


/* ============================================================
   8. RESPONSIVE ANPASSUNGEN (Behebt den Bug beim Drehen!)
   ============================================================ */

/* STUFE 1: QUERFORMAT-HANDYS & TABLETS (761px bis 980px) */
/* Der Kalender bleibt zweispaltig, aber die Kästchen schrumpfen auf 48px, 
   damit sie auf dem flachen Display nicht vertikal überlaufen. */
@media (max-width: 980px) {
    .multiCalendarWidget .singleCalendarWidget table td,
    .multiCalendarWidget .singleCalendarWidget h2 table td {
        height: 48px !important;
        line-height: 48px !important;
        font-size: 15px !important;
    }
}

/* STUFE 2: HOCHKANT-HANDYS (bis 760px) */
/* Zwingt den Kalender sicher auf 1 Spalte untereinander */
@media (max-width: 760px) {
    .multiCalendarWidget .fullCalendar,
    .multiCalendarWidget .fullCalendar.smallDevices {
        width: 100% !important;
        float: none !important;
    }
    
    .multiCalendarWidget .singleCalendarWidget table td,
    .multiCalendarWidget .singleCalendarWidget h2 table td {
        height: 42px !important;
        line-height: 42px !important;
        font-size: 14px !important;
    }
}