/*
=====================================================
 EF22 FRAMEWORK
 CALENDAR.CSS
 Version 5.1
=====================================================
*/


/* ==========================================
   KALENDER SECTION
========================================== */

.calendar-section {

    position: relative;

    padding:
        var(--space-2xl)
        0;

}


/* ==========================================
   SECTION HEADER
========================================== */

.calendar-section .section-header {

    margin-bottom:
        var(--space-xl);

    text-align: center;

}

.calendar-section .section-kicker {

    display: inline-block;

    margin-bottom:
        var(--space-md);

    color:
        var(--color-ef22-green);

    font-weight: 700;

    letter-spacing: .14em;

    text-transform: uppercase;

}

.calendar-section .section-header h2 {

    margin:
        0
        0
        var(--space-md);

    color:
        var(--color-text-on-dark);

    font-size:
        var(--font-size-2xl);

}

.calendar-section .section-header p {

    max-width: 760px;

    margin: 0 auto;

    color:
        var(--color-text-muted-on-dark);

    line-height:
        var(--line-height);

}


/* ==========================================
   KALENDER CARD
========================================== */

.calendar-card {

    position: relative;

    overflow: hidden;

    padding:
        var(--space-md);

    border:
        1px solid
        var(--color-ef22-green);

    border-radius:
        var(--radius-xl);

    background:
        var(--color-background-medium);

    box-shadow:
        0 0 24px rgba(111, 191, 115, .08),
        var(--shadow-md);

}


/* ==========================================
   KALENDER
========================================== */

#calendar {

    width: 100%;

}


/* ==========================================
   FULLCALENDAR
========================================== */

.fc {

    width: 100%;

    font-family:
        var(--font-family);

    color:
        var(--color-text-on-dark);

}


/* ==========================================
   OBERSTE BEDIENZEILE

   MONAT | HEUTE | ÜBERSICHT
========================================== */

.calendar-controls {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    align-items: center;

    gap:
        var(--space-sm);

    margin-bottom:
        var(--space-md);

}


/* ==========================================
   BEDIENBUTTONS
========================================== */

.calendar-control-button {

    display: flex;

    justify-content: center;

    align-items: center;

    width: 100%;

    height: 42px;

    padding:
        0
        var(--space-xs);

    border:
        1px solid
        var(--color-ef22-green);

    border-radius:
        var(--radius-sm);

    background:
        var(--color-background-dark);

    color:
        var(--color-text-on-dark);

    font-family:
        inherit;

    font-size:
        var(--font-size-sm);

    font-weight: 700;

    line-height: 1;

    white-space: nowrap;

    cursor: pointer;

}


/* ==========================================
   AKTIVE ANSICHT
========================================== */

.calendar-control-button.is-active {

    border-width:
        2px;

}


/* ==========================================
   FULLCALENDAR TOOLBAR

   JULI | AUGUST 2026 | SEPTEMBER
========================================== */

.fc .fc-toolbar {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    align-items: center;

    gap:
        var(--space-sm);

    margin:
        0
        0
        var(--space-md);

}


/* ==========================================
   TOOLBAR BEREICHE
========================================== */

.fc .fc-toolbar-chunk {

    display: flex;

    align-items: center;

    min-width: 0;

}

.fc .fc-toolbar-chunk:first-child {

    justify-content:
        flex-start;

}

.fc .fc-toolbar-chunk:nth-child(2) {

    justify-content:
        center;

}

.fc .fc-toolbar-chunk:last-child {

    justify-content:
        flex-end;

}


/* ==========================================
   AKTUELLER MONAT
========================================== */

.fc .fc-toolbar-title {

    margin: 0;

    color:
        var(--color-text-on-dark);

    font-size:
        var(--font-size-md);

    font-weight: 700;

    line-height: 1.15;

    text-align: center;

    white-space: nowrap;

}


/* ==========================================
   MONATS BUTTONS
========================================== */

.fc .fc-button {

    display: flex !important;

    justify-content: center !important;

    align-items: center !important;

    width: 100% !important;

    height: 42px !important;

    margin: 0 !important;

    padding:
        0
        var(--space-xs)
        !important;

    border:
        1px solid
        var(--color-ef22-green)
        !important;

    border-radius:
        var(--radius-sm)
        !important;

    background:
        var(--color-background-dark)
        !important;

    color:
        var(--color-text-on-dark)
        !important;

    font-family:
        inherit !important;

    font-size:
        var(--font-size-sm)
        !important;

    font-weight:
        700
        !important;

    line-height:
        1
        !important;

    text-transform:
        none;

    white-space:
        nowrap;

    box-shadow:
        none
        !important;

}


/* ==========================================
   BUTTON ZUSTÄNDE
========================================== */

.fc .fc-button:hover,
.fc .fc-button:focus,
.fc .fc-button:active {

    border-color:
        var(--color-ef22-green)
        !important;

    background:
        var(--color-background-dark)
        !important;

    color:
        var(--color-text-on-dark)
        !important;

    box-shadow:
        none
        !important;

    transform:
        none;

    filter:
        none;

}

.fc .fc-button:disabled {

    opacity:
        .5;

}


/* ==========================================
   KALENDER RAHMEN
========================================== */

.fc-theme-standard .fc-scrollgrid {

    overflow: hidden;

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-md);

    background:
        var(--color-background-dark);

}

.fc-theme-standard td,
.fc-theme-standard th {

    border-color:
        var(--color-border);

}


/* ==========================================
   WOCHENTAGE
========================================== */

.fc .fc-col-header-cell {

    background:
        var(--color-background-dark);

}

.fc .fc-col-header-cell-cushion {

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 34px;

    padding:
        var(--space-xs);

    color:
        var(--color-text-on-dark);

    font-size:
        var(--font-size-xs);

    font-weight: 700;

    text-decoration:
        none;

}


/* ==========================================
   TAGESZELLEN
========================================== */

.fc .fc-daygrid-day {

    position: relative;

    background:
        var(--color-background-medium);

    transition:
        none;

}


/* ==========================================
   TAGESRAHMEN
========================================== */

.fc .fc-daygrid-day-frame {

    min-height:
        48px;

}


/* ==========================================
   DATUM
========================================== */

.fc .fc-daygrid-day-number {

    position: relative;

    z-index: 2;

    display: flex;

    justify-content: center;

    align-items: center;

    width: 100%;

    min-height: 48px;

    padding:
        var(--space-xs);

    color:
        var(--color-text-on-dark);

    font-size:
        var(--font-size-sm);

    font-weight: 600;

    text-decoration:
        none;

}


/* ==========================================
   TAGE AUSSERHALB DES MONATS
========================================== */

.fc .fc-day-other {

    background:
        var(--color-background-dark);

}

.fc .fc-day-other
.fc-daygrid-day-number {

    opacity:
        .35;

}


/* ==========================================
   HEUTE
========================================== */

.fc .fc-day-today {

    background:
        var(--color-background-medium)
        !important;

}

.fc .fc-day-today
.fc-daygrid-day-number {

    font-weight:
        800;

    text-decoration:
        underline;

    text-decoration-color:
        var(--color-ef22-green);

    text-decoration-thickness:
        2px;

    text-underline-offset:
        4px;

}


/* ==========================================
   TAG MIT TERMIN
========================================== */

.fc .fc-daygrid-day.has-event {

    cursor:
        pointer;

}


/* ==========================================
   EF22 TERMIN
========================================== */

.fc .fc-daygrid-day.has-ef22-event {

    background:
        var(--color-ef22-green)
        !important;

}


/* ==========================================
   EF22 TERMIN DATUM
========================================== */

.fc .fc-daygrid-day.has-ef22-event
.fc-daygrid-day-number {

    color:
        var(--color-background-dark)
        !important;

    font-weight:
        800;

}


/* ==========================================
   RKN / FREMDER TERMIN
========================================== */

.fc .fc-daygrid-day.has-external-event {

    background:
        var(--color-warning)
        !important;

}


/* ==========================================
   RKN DATUM
========================================== */

.fc .fc-daygrid-day.has-external-event
.fc-daygrid-day-number {

    color:
        var(--color-background-dark)
        !important;

    font-weight:
        800;

}


/* ==========================================
   EF22 + RKN AM SELBEN TAG

   EF22 IMMER OBEN
   RKN IMMER UNTEN
========================================== */

.fc .fc-daygrid-day.has-mixed-events {

    background:

        linear-gradient(

            to bottom,

            var(--color-ef22-green)
                0%,

            var(--color-ef22-green)
                50%,

            var(--color-warning)
                50%,

            var(--color-warning)
                100%

        )

        !important;

}


/* ==========================================
   GEMISCHTER TAG DATUM
========================================== */

.fc .fc-daygrid-day.has-mixed-events
.fc-daygrid-day-number {

    color:
        var(--color-background-dark)
        !important;

    font-weight:
        800;

}


/* ==========================================
   FULLCALENDAR EVENTS AUSBLENDEN

   INFORMATION KOMMT ÜBER TAGESFARBE
========================================== */

.fc .fc-daygrid-event-harness,
.fc .fc-daygrid-event {

    display:
        none
        !important;

}


/* ==========================================
   ÜBERSICHT
========================================== */

.calendar-list {

    width: 100%;

}


/* ==========================================
   ÜBERSICHT FILTER
========================================== */

.calendar-list-filters {

    display: flex;

    flex-direction: column;

    gap:
        var(--space-sm);

    margin-bottom:
        var(--space-lg);

    padding:
        var(--space-md);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-md);

    background:
        var(--color-background-dark);

}


/* ==========================================
   FILTER
========================================== */

.calendar-filter {

    display: flex;

    align-items: center;

    gap:
        var(--space-sm);

    min-height:
        32px;

    color:
        var(--color-text-on-dark);

    font-size:
        var(--font-size-sm);

    font-weight:
        600;

    cursor:
        pointer;

}


/* ==========================================
   CHECKBOX
========================================== */

.calendar-filter input {

    width:
        18px;

    height:
        18px;

    margin:
        0;

    accent-color:
        var(--color-ef22-green);

}


/* ==========================================
   LISTENINHALT
========================================== */

.calendar-list-content {

    display: flex;

    flex-direction: column;

    gap:
        var(--space-sm);

}


/* ==========================================
   LISTEN TERMIN
========================================== */

.calendar-list-event {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap:
        var(--space-xs);

    width: 100%;

    padding:
        var(--space-md);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-md);

    background:
        var(--color-background-dark);

    color:
        var(--color-text-on-dark);

    font-family:
        inherit;

    text-align:
        left;

    cursor:
        pointer;

}


/* ==========================================
   EF22 LISTEN TERMIN
========================================== */

.calendar-list-event--ef22 {

    border-left:
        4px solid
        var(--color-ef22-green);

}


/* ==========================================
   RKN LISTEN TERMIN
========================================== */

.calendar-list-event--rkn {

    border-left:
        4px solid
        var(--color-warning);

}


/* ==========================================
   LISTEN DATUM
========================================== */

.calendar-list-event-date {

    color:
        var(--color-text-muted-on-dark);

    font-size:
        var(--font-size-xs);

    font-weight:
        600;

}


/* ==========================================
   LISTEN QUELLE
========================================== */

.calendar-list-event-source {

    font-size:
        var(--font-size-xs);

    font-weight:
        700;

}


/* ==========================================
   EF22 QUELLE
========================================== */

.calendar-list-event--ef22
.calendar-list-event-source {

    color:
        var(--color-ef22-green);

}


/* ==========================================
   RKN QUELLE
========================================== */

.calendar-list-event--rkn
.calendar-list-event-source {

    color:
        var(--color-warning);

}


/* ==========================================
   LISTEN TITEL
========================================== */

.calendar-list-event-title {

    margin-top:
        var(--space-xs);

    color:
        var(--color-text-on-dark);

    font-size:
        var(--font-size-md);

    line-height:
        1.3;

}


/* ==========================================
   LISTEN ZEIT / ORT
========================================== */

.calendar-list-event-time,
.calendar-list-event-location {

    color:
        var(--color-text-muted-on-dark);

    font-size:
        var(--font-size-sm);

}


/* ==========================================
   LEERE LISTE
========================================== */

.calendar-list-empty {

    margin: 0;

    padding:
        var(--space-xl)
        var(--space-md);

    color:
        var(--color-text-muted-on-dark);

    text-align:
        center;

}


/* ==========================================
   HIDDEN
========================================== */

.calendar-list[hidden],
#calendar[hidden] {

    display:
        none
        !important;

}


/* ==========================================
   KLEINE DISPLAYS
========================================== */

@media (max-width: 380px) {

    .calendar-card {

        padding:
            var(--space-sm);

    }

    .calendar-controls,
    .fc .fc-toolbar {

        gap:
            var(--space-xs);

    }

    .calendar-control-button,
    .fc .fc-button {

        height:
            40px
            !important;

        font-size:
            var(--font-size-xs)
            !important;

    }

    .fc .fc-toolbar-title {

        font-size:
            var(--font-size-sm);

    }

    .fc .fc-daygrid-day-frame {

        min-height:
            44px;

    }

    .fc .fc-daygrid-day-number {

        min-height:
            44px;

        font-size:
            var(--font-size-xs);

    }

}


/* ==========================================
   TABLET
========================================== */

@media (min-width: 769px) {

    .calendar-section {

        padding:
            var(--space-3xl)
            0;

    }

    .calendar-card {

        padding:
            var(--space-xl);

    }

    .calendar-control-button,
    .fc .fc-button {

        height:
            44px
            !important;

    }

    .fc .fc-toolbar-title {

        font-size:
            var(--font-size-xl);

    }

    .fc .fc-daygrid-day-frame {

        min-height:
            72px;

    }

    .fc .fc-daygrid-day-number {

        min-height:
            72px;

    }

}