.ttg-calendar-wrap {
--ttg-red: #c41218;
--ttg-dark: #252525;
--ttg-muted: #707070;
--ttg-line: #e4e4e4;
--ttg-soft: #f7f7f7;
--ttg-white: #fff;
position: relative;
max-width: 100%;
font-family: inherit;
}
.ttg-calendar-status,
.ttg-list-empty {
padding: 24px;
border: 1px solid var(--ttg-line);
border-radius: 10px;
background: var(--ttg-soft);
text-align: center;
}
.ttg-calendar-status.is-error {
border-color: var(--ttg-red);
color: var(--ttg-red);
}
.ttg-calendar .fc-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
margin-bottom: 22px;
padding-bottom: 14px;
border-bottom: 1px solid var(--ttg-line);
}
.ttg-calendar .fc-toolbar-chunk {
display: flex;
align-items: center;
gap: 12px;
} .ttg-calendar .fc-button-group {
display: inline-flex;
gap: 12px;
}
.ttg-calendar .fc-button-group > .fc-button {
margin-left: 0 !important;
border-radius: 7px !important;
}
.ttg-calendar .fc-toolbar-chunk:first-child .fc-button-group {
margin-right: 6px;
}
.ttg-calendar .fc-toolbar-title {
margin-left: 14px;
color: var(--ttg-dark);
font-size: clamp(1.55rem, 3vw, 2.35rem);
font-weight: 750;
line-height: 1;
text-transform: capitalize;
white-space: nowrap;
}
.ttg-calendar .fc-button-primary {
min-height: 40px;
padding: 0 16px !important;
border: 0 !important;
border-radius: 7px !important;
background: var(--ttg-dark) !important;
box-shadow: none !important;
font-weight: 650 !important;
transition: transform .16s ease, background .16s ease;
}
.ttg-calendar .fc-button-primary:hover,
.ttg-calendar .fc-button-primary:focus {
background: #3a3a3a !important;
transform: translateY(-1px);
}
.ttg-calendar .fc-button-primary.fc-button-active {
background: var(--ttg-red) !important;
}
.ttg-calendar .fc-today-button:disabled {
opacity: 1 !important;
background: #858585 !important;
}
.ttg-calendar .fc-scrollgrid {
overflow: hidden;
border-radius: 10px;
}
.ttg-calendar .fc-col-header-cell {
background: var(--ttg-dark);
}
.ttg-calendar .fc-col-header-cell-cushion {
padding: 12px 6px;
color: var(--ttg-white);
font-weight: 700;
}
.ttg-calendar .fc-theme-standard td,
.ttg-calendar .fc-theme-standard th,
.ttg-calendar .fc-scrollgrid {
border-color: var(--ttg-line);
}
.ttg-calendar .fc-daygrid-day {
transition: background .16s ease;
}
.ttg-calendar .fc-daygrid-day:hover {
background: #fafafa;
}
.ttg-calendar .fc-daygrid-day-frame {
min-height: 154px;
}
.ttg-calendar .fc-daygrid-day-number {
margin: 7px 8px 0 0;
padding: 3px 7px;
border-radius: 999px;
color: var(--ttg-dark);
font-weight: 650;
}
.ttg-calendar .fc-day-other .fc-daygrid-day-number {
color: #b9b9b9;
}
.ttg-calendar .fc-day-today {
background: #fbfba0 !important;
}
.ttg-calendar .fc-day-today .fc-daygrid-day-number {
background: var(--ttg-red);
color: #fff;
font-weight: 800;
}
.ttg-calendar .fc-event {
margin: 2px 5px;
border: 0;
border-left: 3px solid var(--ttg-red);
border-radius: 3px;
background: rgba(196, 18, 24, .09);
box-shadow: none;
color: #7f1115;
cursor: pointer;
font-size: .76rem;
font-weight: 400;
}
.ttg-calendar .fc-event:hover {
background: rgba(196, 18, 24, .14);
}
.ttg-calendar .fc-event-main {
padding: 3px 6px;
color: inherit;
}
.ttg-month-event {
display: grid;
gap: 2px;
min-width: 0;
padding: 2px 0;
line-height: 1.22;
}
.ttg-month-event-head {
display: flex;
align-items: baseline;
gap: 5px;
min-width: 0;
}
.ttg-month-event-time {
flex: 0 0 auto;
font-weight: 700;
}
.ttg-month-event-title {
overflow: hidden;
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
}
.ttg-month-event-location,
.ttg-month-event-description {
display: block;
overflow: hidden;
color: #5f5f5f;
font-size: .69rem;
line-height: 1.25;
text-overflow: ellipsis;
white-space: nowrap;
}
.ttg-list-card.is-target {
border-color: var(--ttg-red);
box-shadow: 0 0 0 3px rgba(196, 18, 24, .13), 0 8px 24px rgba(0, 0, 0, .08);
}
.ttg-calendar .fc-event-title,
.ttg-calendar .fc-event-time {
font-weight: 400;
}
.ttg-calendar .fc-daygrid-more-link {
margin-left: 7px;
color: var(--ttg-red);
font-weight: 700;
}
.ttg-calendar-list {
display: grid;
gap: 10px;
} .ttg-calendar-list[hidden] {
display: none !important;
}
.ttg-list-card {
display: grid;
grid-template-columns: 112px minmax(0, 1fr);
align-items: center;
width: 100%;
min-height: 118px;
padding: 16px 18px;
border: 1px solid var(--ttg-line);
border-radius: 12px;
background: #fff;
box-shadow: 0 4px 16px rgba(0, 0, 0, .045);
color: var(--ttg-dark);
font: inherit;
text-align: left;
text-decoration: none;
cursor: default;
}
.ttg-list-date {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
align-self: stretch;
border-right: 1px solid var(--ttg-line);
color: var(--ttg-red);
}
.ttg-list-date small {
font-size: .76rem;
font-weight: 800;
letter-spacing: .06em;
}
.ttg-list-date b {
font-size: 2.2rem;
line-height: 1;
}
.ttg-list-date em {
margin-top: 5px;
color: var(--ttg-muted);
font-size: .74rem;
font-style: normal;
text-transform: uppercase;
}
.ttg-list-meta {
display: grid;
gap: 5px;
min-width: 0;
padding: 0 24px;
}
.ttg-list-time {
color: var(--ttg-muted);
font-size: .92rem;
}
.ttg-list-title {
overflow: hidden;
color: var(--ttg-dark);
font-size: 1.1rem;
font-weight: 750;
text-overflow: ellipsis;
white-space: nowrap;
}
.ttg-list-location,
.ttg-list-description {
overflow: hidden;
color: var(--ttg-muted);
font-size: .9rem;
line-height: 1.35;
text-overflow: ellipsis;
white-space: nowrap;
}
.ttg-list-location::before {
content: 'Ort: ';
font-weight: 650;
}
.ttg-calendar-popover {
position: absolute;
z-index: 99999;
width: min(380px, calc(100vw - 32px));
padding: 20px 22px;
border: 1px solid var(--ttg-line);
border-top: 4px solid var(--ttg-red);
border-radius: 10px;
background: #fff;
box-shadow: 0 14px 42px rgba(0, 0, 0, .2);
color: var(--ttg-dark);
}
.ttg-calendar-popover strong,
.ttg-calendar-popover span {
display: block;
}
.ttg-calendar-popover strong {
padding-right: 28px;
margin-bottom: 10px;
font-size: 1.12rem;
}
.ttg-calendar-popover span {
margin-top: 6px;
line-height: 1.45;
}
.ttg-calendar-popover button {
position: absolute;
top: 8px;
right: 8px;
width: 32px;
height: 32px;
border: 0;
border-radius: 50%;
background: var(--ttg-soft);
color: var(--ttg-dark);
cursor: default;pointer-events:none;
font-size: 23px;
line-height: 1;
}
@media (max-width: 900px) {
.ttg-calendar .fc-daygrid-day-frame { min-height: 132px; }
.ttg-month-event-description { display: none; }
}
@media (max-width: 680px) {
.ttg-calendar .fc-toolbar {
align-items: stretch;
flex-direction: column;
}
.ttg-calendar .fc-toolbar-chunk {
justify-content: center;
}
.ttg-calendar .fc-toolbar-title {
margin-left: 8px;
font-size: 1.5rem;
}
.ttg-calendar .fc-button-primary {
min-height: 38px;
padding: 0 13px !important;
}
.ttg-calendar-list {
width: 100%;
}
.ttg-list-card {
grid-template-columns: 68px minmax(0, 1fr);
align-items: start;
min-height: 0;
padding: 14px 12px;
}
.ttg-list-date {
min-width: 0;
padding-right: 8px;
}
.ttg-list-date b {
font-size: 1.8rem;
}
.ttg-list-date em {
font-size: .68rem;
text-align: center;
white-space: normal;
}
.ttg-list-meta {
gap: 7px;
min-width: 0;
padding: 0 0 0 14px;
}
.ttg-list-title,
.ttg-list-location,
.ttg-list-description {
display: block;
overflow: visible;
max-width: 100%;
text-overflow: clip;
white-space: normal;
overflow-wrap: anywhere;
word-break: normal;
}
.ttg-list-title {
font-size: 1.03rem;
line-height: 1.35;
}
.ttg-list-location,
.ttg-list-description {
font-size: .88rem;
line-height: 1.45;
}
} @media (max-width: 680px) {
.ttg-calendar .fc-view-harness,
.ttg-calendar .fc-dayGridMonth-button,
.ttg-calendar .fc-ttgList-button {
display: none !important;
}
.ttg-calendar .fc-toolbar {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
align-items: center;
}
.ttg-calendar .fc-toolbar-chunk:first-child {
display: grid;
grid-template-columns: auto auto minmax(0, 1fr);
justify-content: stretch;
gap: 8px;
width: 100%;
}
.ttg-calendar .fc-toolbar-chunk:first-child .fc-button-group {
display: contents;
margin: 0;
}
.ttg-calendar .fc-toolbar-title {
min-width: 0;
margin: 0 0 0 4px;
font-size: 1.45rem;
text-align: left;
}
.ttg-calendar .fc-toolbar-chunk:last-child {
justify-content: flex-start;
width: 100%;
}
.ttg-calendar .fc-toolbar-chunk:last-child .fc-button-group {
display: contents;
}
.ttg-calendar .fc-today-button {
width: 100%;
}
}