.bh-calendar {
--bh-green: #009A66;
--bh-text: #3F474D;
--bh-muted: #4D575E;
--bh-yellow: #FDC300;
color: var(--bh-text);
margin-block: 2rem;
}
.bh-calendar__nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1rem;
}
.bh-calendar__title {
margin: 0;
color: var(--bh-text);
font-family: "Londrina Solid", sans-serif;
font-weight: 400;
}
.bh-calendar__nav-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.4rem;
height: 2.4rem;
border: 2px solid var(--bh-green);
border-radius: 999px;
color: var(--bh-green);
text-decoration: none;
font-size: 1.8rem;
line-height: 1;
}
.bh-calendar__nav-link:hover,
.bh-calendar__nav-link:focus-visible {
background: var(--bh-green);
color: #fff;
}
.bh-calendar__grid {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
border: 1px solid rgba(77, 87, 94, .22);
background: #fff;
}
.bh-calendar__weekday {
background: var(--bh-green);
color: #fff;
font-weight: 700;
padding: .75rem .5rem;
text-align: center;
text-transform: uppercase;
letter-spacing: .02em;
}
.bh-calendar__day {
min-height: 9.5rem;
padding: .55rem;
border-top: 1px solid rgba(77, 87, 94, .18);
border-left: 1px solid rgba(77, 87, 94, .18);
background: #fff;
position: relative;
}
.bh-calendar__day:nth-child(7n + 1) {
border-left: none;
}
.bh-calendar__day.is-other-month {
background: rgba(77, 87, 94, .06);
color: rgba(63, 71, 77, .55);
}
.bh-calendar__day.is-today .bh-calendar__day-number {
background: var(--bh-yellow);
color: var(--bh-text);
}
.bh-calendar__day-number {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.8rem;
height: 1.8rem;
border-radius: 999px;
font-weight: 700;
margin-bottom: .4rem;
}
.bh-calendar-event {
margin: .25rem 0 .4rem;
position: relative;
}
.bh-calendar-event__link,
.bh-calendar-event:not(:has(.bh-calendar-event__link)) {
display: block;
}
.bh-calendar-event__link {
color: inherit;
text-decoration: none;
}
.bh-calendar-event__time,
.bh-calendar-event__title {
display: block;
}
.bh-calendar-event__time {
font-weight: 700;
font-size: .88rem;
}
.bh-calendar-event__title {
border-left: 4px solid var(--bh-green);
background: rgba(0, 154, 102, .08);
padding: .25rem .35rem;
font-size: .92rem;
line-height: 1.25;
max-height: 3.9em;
overflow: hidden;
}
.bh-calendar-event:hover .bh-calendar-event__title,
.bh-calendar-event:focus-within .bh-calendar-event__title {
background: rgba(0, 154, 102, .13);
}
.bh-calendar-event__details {
display: none;
position: absolute;
left: .25rem;
top: calc(100% + .25rem);
z-index: 1000;
width: 380px;
max-width: min(380px, 90vw);
padding: .75rem;
background: #fff;
border: 1px solid #d9d9d9;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0,0,0,.18);
color: var(--bh-text);
font-size: .95rem;
line-height: 1.5;
overflow-wrap: anywhere;
word-break: break-word;
}
.bh-calendar-event:hover .bh-calendar-event__details,
.bh-calendar-event:focus-within .bh-calendar-event__details {
display: block;
}
.bh-calendar__list {
display: none;
}
.bh-calendar-list-event {
display: grid;
grid-template-columns: 7rem 1fr;
gap: 1rem;
padding: 1rem 0;
border-bottom: 1px solid rgba(77, 87, 94, .22);
}
.bh-calendar-list-event__date,
.bh-calendar-list-event__time {
font-weight: 700;
}
.bh-calendar-list-event a {
color: var(--bh-text);
text-decoration: none;
font-weight: 700;
}
.bh-calendar-list-event a:hover,
.bh-calendar-list-event a:focus-visible {
color: var(--bh-green);
text-decoration: underline;
}
.bh-calendar-list-event__location {
margin-top: .25rem;
color: var(--bh-muted);
}
.bh-calendar-error {
border-left: 4px solid var(--wp--preset--color--vivid-red, #cc1818);
padding-left: 1rem;
}
@media (max-width: 760px) {
.bh-calendar__grid {
display: none;
}
.bh-calendar__list {
display: block;
}
.bh-calendar__nav {
gap: .5rem;
}
.bh-calendar__title {
font-size: 1.7rem;
text-align: center;
}
.bh-calendar-list-event {
grid-template-columns: 1fr;
gap: .25rem;
}
} .bh-calendar-event__title-link {
color: inherit;
text-decoration: none;
}
.bh-calendar-event__title-link:hover,
.bh-calendar-event__title-link:focus-visible {
color: var(--bh-text);
text-decoration: underline;
}
.bh-calendar-event__details-title {
display: inline-block;
font-weight: 600;
margin-bottom: .35rem;
}
.bh-calendar-event__external {
display: inline-block;
margin: .35rem 0 .75rem;
font-weight: 700;
color: var(--bh-green);
text-decoration: none;
}
.bh-calendar-event__location {
display: inline-block;
margin-bottom: .65rem;
}
.bh-calendar-event__description {
display: inline-block;
}
.bh-calendar-event__external:hover,
.bh-calendar-event__external:focus-visible {
text-decoration: underline;
} .bh-calendar-event__description {
display: block;
margin-top: .75rem;
border-top: 1px solid rgba(77, 87, 94, .18);
padding-top: .65rem;
}
.bh-calendar-event__description summary {
cursor: pointer;
color: var(--bh-green);
font-weight: 700;
list-style-position: outside;
}
.bh-calendar-event__description summary:hover,
.bh-calendar-event__description summary:focus-visible {
text-decoration: underline;
}
.bh-calendar-event__description-content {
margin-top: .6rem;
max-height: 18rem;
overflow-y: auto;
padding-right: .35rem;
}
.bh-calendar-event__external:focus-visible,
.bh-calendar-event__title-link:focus-visible,
.bh-calendar__nav-link:focus-visible {
outline: 3px solid rgba(253, 195, 0, .9);
outline-offset: 3px;
}
@media (max-width: 760px) {
.bh-calendar {
margin-block: 1.5rem;
}
.bh-calendar__nav {
display: grid;
grid-template-columns: 3rem 1fr 3rem;
align-items: center;
margin-bottom: 1.5rem;
}
.bh-calendar__nav-link {
width: 2.75rem;
height: 2.75rem;
justify-self: center;
}
.bh-calendar__title {
font-size: 2rem;
line-height: 1.1;
}
.bh-calendar-list-event {
padding: 1.25rem 0;
gap: .35rem;
}
.bh-calendar-list-event__date {
font-size: 1.05rem;
letter-spacing: .01em;
}
.bh-calendar-list-event__time {
font-size: 1.05rem;
margin-top: .15rem;
}
.bh-calendar-list-event a,
.bh-calendar-list-event strong {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
color: var(--bh-text);
font-size: 1.08rem;
line-height: 1.25;
text-decoration: none;
}
.bh-calendar-list-event__location {
color: rgba(63, 71, 77, .78);
font-size: .98rem;
line-height: 1.35;
margin-top: .45rem;
}
}.easyVerein_calendar {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.easyVerein_calendar .easyVerein_calendar_event {
width: 100%;
padding: 25px;
border-bottom: solid 2px;
}
.easyVerein_calendar .easyVerein_calendar_event p {
margin: 5px;
}
.easyVerein_calendar .easyVerein_calendar_event p.easyVerein_calendar_event_title {
font-size: 1.5rem;
}