@media(min-width: 0px) {
    .calendar-preview-list {
    display: grid;
    align-items: flex-start;
    gap: var(--spacing-outer-spacing-top-bottom, 40px);
}

.calendar-preview-list-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Spacing-Small-Spacing-2, 16px);
}

.calendar-preview-list-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Spacing-Small-Spacing-2, 16px);
}

.calendar-preview-list-entry {
    display: grid;
    grid-template-columns: 1fr 10fr;
    align-items: center;
    gap: 24px;
    align-self: stretch;
    background-color: white;
    padding: 5px;
    position: relative;
}

.calendar-preview-list-entry h3 {
    font-size: var(--font-size-24);
}

.calendar-preview-list-entry a:has(h2),
.calendar-preview-list-entry a:has(h3)
{
    font-size: var(--font-size-24);
    color: var(--Black);
    text-decoration: none;
}

section.ce-color-3 .calendar-preview-list-entry a:has(h2),
section.ce-color-3 .calendar-preview-list-entry a:has(h3) {
    color: var(--Black);
}

.calendar-preview-list-entry-date {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: center;
    gap: -6px;
    background: var(--Red);
    color: white;
    flex-shrink: 0;
    flex-grow: 0;
    width: 80px;
    min-width: 80px;
    max-width: 100px;
    text-align: center;
}

.calendar-preview-list-entry-date span:first-child {
    font-size: var(--font-size-28);
}

.calendar-preview-list-entry-info-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Spacing-Tiny-Spacing-2, 4px);
    word-break: break-word;
}

.calendar-preview-list-entry-infos {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* List */

.calendar-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.calendar-list .calendar-preview-list-entry-info-container {
    padding: 24px;
}

.calendar-list .calendar-preview-list-entry-info-container h2{
    font-size: var(--font-size-28);
}


/* Detail */

.calendar-show h1 {
    font-size: var(--font-size-46);
}

.calendar-show .right h2{
    font-size: var(--font-size-16);
}

.calendar-show-container {
    display: grid;
    gap: 40px;
    grid-template-columns: 1fr 2fr;
}

.calendar-show-infos {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.calender-show-date {
    gap: 10px;
  display: flex;
  flex-direction: row;
  align-items: baseline;
}

.calendar-show-location {
    display: flex;
    flex-direction: row;
    gap: 8px;
}

.calendar-show-description {
    line-height: 175%;
}

.calendar-url {
    display: flex;
    padding: 8px 16px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;

}

.calendar-url a{
  color: var(--Black);
  text-decoration: none;
}

.calendar-show-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Spacing-Tiny-Spacing, 8px);
    align-self: stretch;
}

.termin-date {
    background-color: var(--Red);
    width: 5em;
    height: 5em;
    text-align: center;
    display: flex;
    justify-content: center;  /* Zentriert horizontal */
    align-items: center;      /* Zentriert vertikal */
 }

.termin-date *{
    color: var(--White);
    font-size: .9em;
 }

.termin-date div span {
    font-size: 1.5em;
 }

.termin-footer-date {
    width: 30%;
    float: left;
}

.termin-footer-time {
    width: 30%;
    float: left;
}

.termin-footer-location {
    width: 100%;
    clear: both;
    margin-top:3em;
}

.termin-footer-link {
    clear:both;
    width:100%;
    margin-top:1em;
}
}

@media(min-width: 576px) {
    .calendar-preview-list-entry {
    gap: 48px;
}
.calendar-preview-list-entry-date {
    width: 100px;
    min-width: 80px;
    max-width: 100px;
}
}
@media(min-width: 768px) {}

@media(min-width: 992px) {
    .calendar-preview-list {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        gap: var(--spacing-outer-spacing-top-bottom, 60px);
    }
}
@media(min-width: 1200px) {
        .calendar-preview-list {
            gap: var(--spacing-outer-spacing-top-bottom, 100px);
    }
}
@media(min-width: 1400px) {}
@media(min-width: 1920px) {}