@charset "UTF-8";:root{--font-main:"Stag Sans", sans-serif;--font-headline:"Stag Sans", sans-serif;--font-description:"Open Sans", sans-serif;--color-primary:#b7a5db;--color-secondary:#ffadd8;--color-tertiary:#d8da96;--color-link:#1e96fc;--bg-page:#ffffff;--bg-card:#ffffff;--color-text-main:#333333;--color-text-inverted:#f8f8f8;--filter-button-text-color-active:#f8f8f8;--color-text-light-contrast:#666666;--color-text-filter-labels:#111111;--border-main:#cccccc;--bg-header:#474747;--bg-section-header:#f0f0f0;--bg-list-odd:#ffffff;transition:--bg-page .2s ease-in-out,--bg-card .2s ease-in-out,--color-text-main .2s ease-in-out,--color-text-inverted .2s ease-in-out,--color-text-light-contrast .2s ease-in-out,--border-main .2s ease-in-out,--bg-header .2s ease-in-out,--bg-section-header .2s ease-in-out,--bg-list-odd .2s ease-in-out}html[data-theme=dark]{--bg-page:#000000;--bg-card:#141414;--color-text-main:#e1e5f2;--color-text-inverted:#191919;--color-text-light-contrast:#aaaaaa;--border-main:#000000;--bg-header:#B8B8B8;--bg-section-header:#191919;--bg-list-odd:#141414;--color-primary:#d5c8ed;--color-secondary:#ffc9e6;--color-tertiary:#e9eaac;--color-link:#66b2ff}#calendar-wrapper{width:100%;max-width:60rem;min-height:100%;font-family:var(--font-main);color:var(--color-text-main);background-color:var(--bg-page);font-weight:400;margin:0 auto;padding:0;background-color:var(--bg-page);transition:color .2s ease-in-out,background-color .2s ease-in-out;p, h3, h4, h5 { padding: 0px; margin: 0px; text-wrap: wrap; } #menu-bar { display: flex; justify-content: center; align-items: center; padding: 1rem; margin: 0; color: var(--color-text-main); } .loading-message { display: flex; justify-content: center; align-items: center; font-size: 4em; color: var(--color-text-main); padding: 1rem; } .loading-spinner { display: inline-block; width: 1em; height: 1em; line-height: 1; vertical-align: middle; animation: spin 4s linear infinite; transform-origin: center center; } .error-message { text-align: center; font-size: 1.2em; color: #c00; padding: 20px; margin-top: 50px; font-weight: bold; } h3, h4, h5 { font-family: var(--font-headline); font-weight: bold; } .event-item-wrapper { position: relative; margin-bottom: 20px; } .event-row { margin-bottom: 10px; } .combined-label-container { display: flex; flex-direction: column; width: 100%; } .content-row { word-break: break-word; white-space: normal; } .label-row { display: flex; align-items: center; gap: 8px; margin-top: 0px; } .flex-line { flex-grow: 1; height: 1px; border-top: 1px dashed var(--color-text-light-contrast); } .content-label { color: var(--color-text-light-contrast); font-size: 0.7rem; opacity: 0.6; white-space: nowrap; font-family: monospace; flex-shrink: 0; } .event-category { text-wrap: wrap; } .language-section { font-size: 1.0rem; } .edit-event-title, .edit-event-title a, .edit-event-title a:visited, .edit-event-title a:hover, .edit-event-title a:active, .edit-event-subtitle, .edit-event-subtitle a, .edit-event-subtitle a:visited, .edit-event-subtitle a:hover, .edit-event-subtitle a:active { font-family: monospace; color: var(--color-primary); text-decoration: none; text-wrap: wrap; } .edit-date-title, .edit-date-title a, .edit-date-title a:visited, .edit-date-title a:hover, .edit-date-title a:active, .edit-date-subtitle, .edit-date-subtitle a, .edit-date-subtitle a:visited, .edit-date-subtitle a:hover, .edit-date-subtitle a:active { font-family: monospace; color: var(--color-secondary); text-decoration: none; text-wrap: wrap; } .edit-exhibition-title, .edit-exhibition-title a, .edit-exhibition-title a:visited, .edit-exhibition-title a:hover, .edit-exhibition-title a:active, .edit-exhibition-subtitle, .edit-exhibition-subtitle a, .edit-exhibition-subtitle a:visited, .edit-exhibition-subtitle a:hover, .edit-exhibition-subtitle a:active { font-family: monospace; color: var(--color-tertiary); text-decoration: none; text-wrap: wrap; } .event-audience { font-family: monospace; color: var(--color-text-main); text-decoration: none; text-wrap: wrap; } ul { list-style-type: none; padding-left: 0px; margin: 0; } ul#event-list { list-style-type: none; margin: 0px; padding: 0px; } li.event-item-wrapper { margin: 0px; padding: 0px; } li#scroll-sentinel { background-color: var(--bg-page); display: flex; flex-direction: column; min-height: 100px; } .no-events-info { text-align: right; font-style: italic; color: var(--color-text-main); margin-top: auto; } .date-section-header, .month-section-header { font-family: var(--font-headline); font-weight: bold; font-size: 1.5rem; background-color: var(--bg-card); padding: 1rem; margin: 0; display: flex; justify-content: center; align-items: center; color: var(--color-text-main); border-bottom: 1px solid var(--border-main); } .date-section-header { position: sticky; top: var(--nav-spacer-height); z-index: 1; justify-content: left; background-color: var(--bg-section-header); transition: top 0.2s, color 0.2s ease-in-out, background-color 0.2s ease-in-out; @media (min-width: 79em) { top: var(--nav-height); } } .date-section-header, .month-section-header { background-color: var(--bg-page); width: 100vw; margin-left: calc(-50vw + 50%); box-sizing: border-box; } .date-section-header.reception { background-color: var(--bg-page); display: flex; align-items: center; justify-content: space-between; border: none; } .current-time-display { color: var(--color-text-main); font-weight: 300; } .month-section-header { color: var(--color-text-inverted); background-color: var(--bg-header); } .event-item-wrapper+.month-section-header, .event-item-wrapper+.date-section-header { margin-top: 20px; } ul#event-list>li.event-item-wrapper+li.event-item-wrapper { border-top: 1px solid var(--border-main); } ul#event-list>li.event-item-wrapper:has(+ #scroll-sentinel) { border-bottom: 1px solid var(--border-main); } .month-section-header.period-nav-bar { justify-content: space-between; } ul#event-list>li { padding: 1rem; } a { color: var(--color-link); } ul#event-list>li.event-item-wrapper { background: var(--bg-card); } ul#event-list>li.event-item-wrapper:nth-child(odd) { background: var(--bg-list-odd); } ul#event-list>li img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .period-nav-button { color: var(--color-text-inverted); font-family: var(--font-headline); font-weight: bold; font-size: 1.2rem; } .date-text { color: var(--color-text-main); } button { background: transparent; border: none; color: var(--color-text-main); transition: opacity 0.2s ease-in-out, color 0.2s ease-in-out; } .icon-button { padding: 0; font-size: 1.4rem; } .icon-button:focus { color: var(--color-text-main); } .pencil-button { position: absolute; padding: 1rem; top: 0; right: 0; } button:disabled, #switch-view-button:disabled { cursor: not-allowed; opacity: 0.2; } button:hover, #switch-view-button:hover .calendar-icon-wrapper i.bi-calendar, #switch-view-button:hover .calendar-icon-label { cursor: pointer; color: var(--color-text-light-contrast); } .calendar-icon-wrapper { position: relative; display: inline-block; } .calendar-icon-wrapper i.bi-calendar { color: var(--color-text-main); transition: opacity 0.2s ease-in-out, color 0.2s ease-in-out; width: 100%; height: 100%; display: block; text-align: center; } .calendar-icon-label { transition: opacity 0.2s ease-in-out, color 0.2s ease-in-out; position: absolute; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-style: italic; font-weight: bold; letter-spacing: -0.04rem; top: 50%; left: 50%; transform: translate(-50%, -33%); font-size: 0.66rem; color: var(--color-text-main); pointer-events: none; } .button-area { display: flex; gap: 10px; } .stag-spacing { letter-spacing: .02em; word-spacing: .15em; } .final-line1 { font-size: 1.2rem; font-family: var(--font-main); font-weight: 300; color: var(--color-text-main); padding-bottom: 0.5rem; } .event-time-container { display: flex; align-items: center; } .event-time-container>.right-aligned-item { margin-left: auto; } .no-seats-available-info { font-style: italic; } .final-line2 { font-size: 1.5rem; font-family: var(--font-headline); font-weight: bold; color: var(--color-text-main); padding-bottom: 0.5rem; } .final-line3 { font-size: 1.2rem; font-family: var(--font-main); font-weight: 300; color: var(--color-text-main); padding-bottom: 1rem; } .octagon-seperator { font-size: 0.2em; vertical-align: middle; padding: 0 2px; } .vspace { height: 2rem; } .collapsible-container { font-family: var(--font-description); margin: 0; overflow: hidden; font-size: 1.0rem; color: var(--color-text-main); } .collapsible-button-bar { display: flex; align-items: center; gap: 2rem; margin-top: 1rem; } .details-button { background: none; color: var(--color-text-main); cursor: pointer; padding: 0; border: none; font-size: 1rem; display: flex; align-items: center; } .details-button-inner { display: inline-flex; align-items: center; gap: 0.5rem; } .tickets-button { color: var(--color-text-main); transition: opacity 0.2s ease-in-out, color 0.2s ease-in-out; text-decoration: none; font-size: 1rem; display: inline-flex; align-items: center; } .tickets-button-inner { display: inline-flex; align-items: center; gap: 0.5rem; } .details-button, .details-button *, .tickets-button, .tickets-button * { font-family: var(--font-main); } .tickets-button:hover, .details-button:hover { color: var(--color-text-light-contrast); } .details-button .details-button-inner .bs-icon-arrow { transition: transform 0.2s ease; } .details-button.active .details-button-inner .bs-icon-arrow { transform: rotate(-180deg); } .collapsible-content { padding: 0; max-height: 0; overflow: hidden; transition: max-height 0.2s ease, opacity 0.2s ease; opacity: 0; } .collapsible-content.show { opacity: 1; max-height: 2000px; padding-top: 10px; } .description { font-size: 1.0rem; padding: 10px 0; color: var(--color-text-main); } .img-container { padding: 0; } .exhibition-header { padding-top: 16px; } .exhibition-description p { padding-top: 8px; } .edit-container { padding-top: 32px; max-height: 500px; overflow: hidden; transition: max-height 0.2s ease, opacity 0.2s ease, padding-top 0.2s ease; opacity: 1; pointer-events: auto; color: var(--color-text-main); } .edit-container.hidden { padding-top: 0; max-height: 0; opacity: 0; pointer-events: none; } .filter-button-container { display: flex; flex-wrap: wrap; gap: 10px; padding: 1rem; justify-content: center; } .filter-button { font-family: var(--font-main); position: relative; background-color: var(--bg-card); color: var(--color-text-main); border: 2px solid var(--button-color); padding: 4px 10px; border-radius: 20px; cursor: pointer; font-size: 1.0rem; white-space: nowrap; display: flex; align-items: center; justify-content: center; line-height: 1; } .filter-button.active { font-weight: bold; background-color: var(--button-color); } .filter-button.active::after { content: "\00a0×"; } .filter-label { font-family: var(--font-main); background-color: transparent; color: var(--color-text-filter-labels); padding: 0.25rem 0.625rem; border-radius: 1.25rem; font-size: 1.0rem; white-space: nowrap; font-weight: normal; margin-bottom: 0.5rem; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .font-headline { font-family: var(--font-headline); font-weight: bold; } .hidden { display: none; } .hidden-but-keep-layout { visibility: hidden; pointer-events: none; } #scroll-to-top { position: fixed; bottom: 2rem; right: 2rem; width: 50px; height: 50px; font-size: 1.2rem; background-color: var(--bg-header); color: var(--color-text-inverted); border: none; border-radius: 50%; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 1000; } #scroll-to-top.visible { opacity: 1; pointer-events: auto; }}@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}