/* @import url('fonts.css'); */
 
:root {
	--colorPrimary: #1f77a9;
	--colorSecondary: #62a0c3;
	--colorTertiary: #d2e4ee;
	--colorAccent: #ff6800;
	--colorBackground: #fff;
	--colorText: #444;
	--colorTextHover: #777;
	--colorNav: #222;
	--colorNavHover: #555;
	
	--contentMaxWidth: min(1200px, 96vw);
    --defaultVisualMaxHeight: 30vh;
    
    --fontFamilyHeader: 'Roboto Slab', serif;
    --fontWeightHeader: 700;
}

*, *::before, *::after {
	padding: 0px;
	margin: 0px;
	box-sizing: border-box;
}

html, body {
	width: 100%;
	min-height: 100%;
	font-family: 'Roboto';
	color: var(--colorText);
}

p {
	margin-bottom: 1rem;
}

a {
	/* color: var(--colorText); */
	color: var(--colorPrimary);
	text-decoration: none;
}

a:hover,
a:focus {
	color: var(--colorTextHover);
}

h1, h2, h3 {
/*	font-family: 'MuseoSlab900';*/
    font-family: var(--fontFamilyHeader);
    font-weight: var(--fontWeightHeader);
}

h1 {
	font-size: 2rem;
    line-height: 2.5rem;
    margin-bottom: 1rem;
}

h2 {
	font-size: 1.75rem;
    line-height: 2.25rem;
    margin-bottom: 1rem;
}

h3 {
    margin-top: 1rem;
    margin-bottom: 0.25rem;
}

@media screen and (min-width: 800px) {
	h1 {
		font-size: 2rem;
		line-height: 3rem;
		margin-bottom: 0px;
	}
	h2 {
		font-size: 1.75rem;
		line-height: 2.5rem;
		margin-bottom: 0px;
	}
}

main ul {
	margin-left: 2rem;
}

.hidden {
	display: none;
}

input[type=radio].hidden + label {
	/* line-height: 1.5rem; */
	position: relative;
	padding-left: 1.5rem;
    color: var(--colorPrimary);
	cursor: pointer;
    font-size: 0.8rem;
    white-space: nowrap;
}

input[type=radio].hidden + label:hover {
    color: var(--colorSecondary);
}

input[type=radio].hidden + label:before {
	font-family: "Font Awesome 6 Pro";
    content: "\f111";
	font-weight: 400;
	font-size: 1.25rem;
    vertical-align: middle;
	position: absolute;
	left: 0rem;
}

input[type=radio].hidden:checked + label:before {
	font-weight: 900;
}

input[type=checkbox].hidden + label.switchButton {
	display: inline-block;
	line-height: 1.5rem;
	position: relative;
	/* padding: 0.5rem 1rem; */
	padding: 0.25rem 0.75rem;
    color: var(--colorBackground);
	cursor: pointer;
	background: var(--colorSecondary);
	border-radius: 2rem;
	white-space: nowrap;
	font-size: 0.8rem;
}

input[type=checkbox].hidden:checked + label.switchButton {
	background: var(--colorPrimary);
}

@media screen and (min-width: 800px) {
	input[type=checkbox].hidden + label.switchButton {
		padding: 0.5rem 1rem;
		font-size: 1rem;
	}
}

.section-content {
	margin-inline: auto;
	width: var(--contentMaxWidth);
}


.bulletbutton {
    display: inline-block;
    line-height: 1.5rem;
    position: relative;
    padding: 0.25rem 0.75rem;
    color: var(--colorBackground);
    cursor: pointer;
    background: var(--colorPrimary);
    border-radius: 2rem;
    white-space: nowrap;
    font-size: 0.8rem;
}

.bulletbutton:hover {
    background: var(--colorSecondary);
}

@media screen and (min-width: 800px) {
	.bulletbutton {
		padding: 0.5rem 1rem;
		font-size: 1rem;
	}
}



/***************
*    HEADER    *
***************/

header {
	position: sticky;
	top: 0px;
	background: var(--colorBackground);
	box-shadow: 0px 1px 2px #0004;
	z-index: 3;
}

header nav {
	width: 100%;
	margin-inline: auto;
	display: grid;
    grid-template-columns: 1fr auto;
	position: relative;
}

header span,
header a {
	color: var(--colorNav);
}

header span:hover,
header a:hover {
	color: var(--colorNavHover);
	cursor: pointer;
}

header nav div a {
	width: fit-content;
    display: block;
}

header nav ul {
    display: grid;
    /* align-items: center; */
    justify-content: space-between;
	position: absolute;
    right: 0px;
	box-shadow: 0px 0px 0px #0004;
	transition: 250ms box-shadow;
	background: var(--colorBackground);
}

header nav ul ul {
    position: relative;
}

header nav li {
	position: relative;
    list-style: none;
	overflow: hidden;
	line-height: 0rem;
    height: 0rem;
	transition: 250ms height, 250ms line-height;
    background: var(--colorBackground);
}

header nav li:first-child {
	line-height: 1rem;
    height: 3rem;
    background: transparent;
}

header nav li.specialmargin {
	margin-top: 1rem;
}

header nav:has(.hamburger :checked) ul {
	box-shadow: 2px 2px 2px #0004;
}

header nav:has(.hamburger :checked) li {
	line-height: 1rem;
    height: 3rem;
}

header nav:has(.hamburger :checked) li:has(ul) {
    height: unset;
}

header nav:has(.hamburger :checked) ul ul {
    box-shadow: none;
}

header nav li.hamburger {
    text-align: right;
    padding: 1rem;
}

header nav li.hamburger i {
    font-size: 2rem;
}

header nav li.hamburger label {
    font-size: 2rem;
	cursor: pointer;
}

header nav li span {
    display: none;
}

header nav img {
	display: block;
	height: 3rem;
	margin-block: 0.5rem;
	margin-left: 1rem;
}

header nav li a {
	display: block;
}

header nav li a,
header nav li span {
	font-size: 1rem;
    font-family: var(--fontFamilyHeader);
    font-weight: var(--fontWeightHeader);
    text-decoration: none;
	padding: 1rem;
	text-transform: uppercase;
}

@media screen and (min-width: 800px) {
	header nav {
		width: var(--contentMaxWidth);
	}
	header nav li {
		line-height: 1rem;
		height: 1rem;
		overflow: visible;
	}
	header nav ul {
		grid-auto-flow: column;
		position: static;
		gap: 1rem;
	}
	header nav ul ul {
		grid-auto-flow: row;
		position: absolute;
		margin-right: -1rem;
		padding: 0px 1rem;
		text-align: right;
		width: max-content;
		gap: 0px;
		transition: 250ms gap, 250ms padding, 250ms box-shadow;
		box-shadow: 0px 2px 2px #0000;
	}
	
	header nav ul li:hover ul {
		padding: 1rem 1rem;
		gap: 1rem;
		box-shadow: 0px 2px 2px #0008;
	}
	
	header nav:has(.hamburger :checked) ul {
		box-shadow: 0px 0px 0px #0004;
	}
	header nav li a,
	header nav li span {
		display: inline-block;
		padding: 0px;
		line-height: 4rem;
	}
	
	header nav li li,
	header nav li li:first-child {
		overflow: hidden;
		height: 0px;
	}
	
	header nav li:hover li,
	header nav li:hover li:first-child {
		height: 2rem;
	}
	
	header nav li li a {
		line-height: 0px;
	}
	
	header nav li:hover li a {
		line-height: 2rem;
	}
	
	header nav li,
	header nav:has(.hamburger :checked) li {
		line-height: 1rem;
		height: auto;
	}
	
	header nav li:first-child {
		height: unset;
	}
	
	header nav li.hamburger {
		display: none;
	}
	
	header nav li.specialmargin {
		margin-top: unset;
		margin-left: 2rem;
	}
	
	header nav li span {
		display: block;
	}
	header nav img {
		margin-left: unset;
	}
}


/***************
*    VISUAL    *
***************/

section.visual {
    width: 100%;
    background-size: cover;
    background-position: 50% 50%;
    aspect-ratio: 21 / 9;
/*    max-height: 50vh;*/
	max-height: var(--defaultVisualMaxHeight);
}

/***************
*   PROGRAM    *
***************/

section.rooster {
    width: var(--contentMaxWidth);
	margin-inline: auto;
	margin-block: 2rem;
}

.rooster-hidden {
	display: none;
}

.rooster-yearswitch {
	padding-bottom: 1rem;
    font-size: 1rem;
    font-weight: 300;
}

.rooster-yearswitch input.switch {
	position: absolute;
	width: 0px;
	height: 0px;
	opacity: 0;
	appearance: none;
}

.rooster-yearswitch input.switch + label {
	position: relative;
    background: var(--colorTertiary);
    width: 3rem;
    height: 1.5rem;
    display: inline-block;
    vertical-align: middle;
    border-radius: 1.5rem;
    border: 1px solid var(--colorSecondary);
	cursor: pointer;
}

.rooster-yearswitch input.switch + label::after {
	content: "";
	width: 1rem;
	height: 1rem;
	position: absolute;
	background: var(--colorPrimary);
    border: 1px solid var(--colorSecondary);
	border-radius: 50%;
    top: calc(0.25rem - 1px);
    left: 0.25rem;
	transition: 250ms left;
}
.rooster-yearswitch input.switch:checked + label::after {
	left: calc(1.75rem - 2px);
}
.rooster-yearswitch span {
	transition: 250ms opacity;
}

.rooster:has(input.switch:checked) .rooster-month-left,
.rooster:has(input.switch:checked) .rooster-month-label,
.rooster:has(input.switch:checked) .rooster-month-right {
	height: 0px;
	overflow: hidden;
	display: block;
}

.rooster-yearswitch:not(:has(input:checked)) span:nth-of-type(2),
.rooster-yearswitch:has(input:checked) span:nth-of-type(1) {
    opacity: 0.5;
}

.rooster-filters {
    display: grid;
    grid-template-areas:
        "rooster-filters-title rooster-filters-showhide"
        "rooster-filters-categories rooster-filters-categories"
		"rooster-filters-radios rooster-filters-radios";
    grid-template-columns: 1fr;
	gap: 0rem;
	align-items: center;
}

.rooster-filters-title {
	grid-area: rooster-filters-title;
	color: var(--colorPrimary);
	font-size: 1.5rem;
	font-weight: 300;
    text-transform: uppercase;
}

.rooster-filters-showhide {
    font-size: 0.8rem;
    color: var(--colorSecondary);
}


.rooster-filters-showhide input[type=checkbox]:checked ~ label.show {
	display: none;
}
.rooster-filters-showhide input[type=checkbox] ~ label.hide {
	display: none;
}
.rooster-filters-showhide input[type=checkbox]:checked ~ label.hide {
	display: inline;
}

.rooster-filters:has(.rooster-filters-showhide input[type=checkbox]:checked) {
	gap: 1rem;
}

.rooster-filters:has(.rooster-filters-showhide input[type=checkbox]:checked) .rooster-filters-radios {
	height: auto;
}

.rooster-filters:has(.rooster-filters-showhide input[type=checkbox]:checked) .rooster-filters-categories {
	height: auto;
}

.rooster-filters-radios {
	grid-area: rooster-filters-radios;
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
	overflow: hidden;
	height: 0px;
}

.rooster-filters-categories {
	grid-area: rooster-filters-categories;
	display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
	overflow: hidden;
	height: 0px;
}

.rooster input[type=radio].hidden + label {
    text-transform: uppercase;
}

.rooster input[type="number"] {
    width: 3rem;
    padding: 0.5rem 0.25rem;
    font-size: 1rem;
    text-align: center;
}

.rooster-month {
    padding-block: 2rem 1.75rem;
    font-size: 2rem;
/*    font-family: 'MuseoSlab900';*/
    font-family: var(--fontFamilyHeader);
    font-weight: var(--fontWeightHeader);
}

div:nth-child(2 of .rooster-month) {
    padding-block: 0px 1.75rem;
}

.rooster-month-left,
.rooster-month-right {
    display: inline-block;
    color: var(--colorPrimary);
    cursor: pointer;
    font-size: 1.75rem;
}

.rooster-month-left.disabled,
.rooster-month-right.disabled {
    cursor: default;
    color: var(--colorTertiary);
}

.rooster-month-left i,
.rooster-month-right i {
	pointer-events: none;
}

.rooster-month-left {
    margin-right: 1rem;
}
.rooster-month-right {
    margin-left: 1rem;
}

.rooster-items {
	position: relative;
}

.rooster-item {
    display: grid;
    /* grid-template-areas: */
        /* "rooster-item-title rooster-item-title rooster-item-title" */
        /* "rooster-item-thumbnail rooster-item-thumbnail rooster-item-dateandattend" */
        /* "rooster-item-cats rooster-item-cats rooster-item-dateandattend" */
        /* "rooster-item-description rooster-item-description rooster-item-calendar" */
        /* "rooster-item-attendees rooster-item-attendees rooster-item-calendar" */
        /* "rooster-item-alert rooster-item-alert rooster-item-alert"; */
    /* grid-template-columns: 1fr auto min-content; */
    /* grid-template-areas: */
        /* "rooster-item-title rooster-item-title rooster-item-title" */
        /* "rooster-item-thumbnail rooster-item-calendar rooster-item-dateandattend" */
        /* "rooster-item-cats rooster-item-cats rooster-item-dateandattend" */
		/* "rooster-item-description rooster-item-description rooster-item-description" */
        /* "rooster-item-attendees rooster-item-attendees rooster-item-attendees" */
        /* "rooster-item-alert rooster-item-alert rooster-item-alert"; */
    grid-template-columns: 1fr min-content min-content;
	/* grid-template-rows: min-content min-content min-content min-content 1fr min-content min-content; */
    gap: 0.25rem 1rem;
    position: relative;
    margin-bottom: 1.5rem;
	transition: 250ms opacity 50ms ease-in, 150ms margin 150ms ease-out, 250ms max-height, 250ms border, 250ms padding;
	overflow: hidden;
    border-bottom: 1px solid #0008;
    padding-bottom: 1rem;
/*	max-height: 25rem;*/
}

.rooster-item-thumbnail {
	grid-column: 1 / 2;
	grid-row: 2 / 4;
}
.rooster-item-title {
	grid-column: 1 / -1;
	grid-row: 1 / 2;
}

.rooster-item-date {
	grid-column: 3 / 4;
	grid-row: 2 / 3;
}

.rooster-item-attend {
	grid-column: 2 / 4;
	grid-row: 3 / 4;
}

.rooster-item-description {
	grid-column: 1 / 4;
	grid-row: 5 / 6;
}

.rooster-item-cats {
	grid-column: 1 / 4;
	grid-row: 4 / 5;
}
.rooster-item-calendar {
	grid-column: 2 / 3;
	grid-row: 2 / 3;
}
.rooster-item-uitvoering {
	grid-column: 1 / -1;
	grid-row: 6 / 7;
}
.rooster-item-attendees {
	grid-column: 1 / -1;
	grid-row: 7 / 8;
}
.rooster-item-alert {
	grid-column: 1 / -1;
	grid-row: 8 / 9;
}

.rooster-item:hover .rooster-item-title,
.rooster-item:hover .rooster-item-description {
    color: var(--colorPrimary);
    cursor: pointer;
}

/* .rooster-item:nth-last-child(-n + 1 of [data-onscreen="yes"]) { */
.rooster-item:nth-last-child(-n + 1 of [data-hide="no"]) {
    border-bottom: none;
    padding-bottom: 0;
}

.rooster-item-status {
    position: absolute;
    background: url(/img/itemlabel.svg);
    background-size: contain;
    background-repeat: no-repeat;
    aspect-ratio: 172 / 124;
    display: flex;
    align-items: center;
    padding: 1rem;
	filter: drop-shadow(0px 1px 3px #fff);
    top: 8px;
    margin-left: 3px;
    color: var(--colorBackground);
    font-weight: 500;
    font-size: 0.9rem;
}

.rooster-item a {
	text-decoration: none;
}

.rooster-item[data-onscreen="no"] {
	opacity: 0;
/*	margin-top: 5rem;*/
}

.rooster-month-label {
	text-align: center;
}

.rooster-month-label[data-hide="left"],
.rooster-month-label[data-hide="right"] {
	pointer-events: none;
	display: none;
	opacity: 0;
}

.rooster-item[data-hide="left"] {
	position: absolute;
	opacity: 0;
	transition: 0ms opacity, 150ms margin 150ms ease-out, 250ms max-height, 250ms border, 250ms padding;
	display: none;
}

.rooster-item[data-hide="right"] {
	position: absolute;
	opacity: 0;
	display: none;
}

.rooster-item[data-visible="no"],
.rooster-item[data-visible="no"][data-onscreen="no"] {
	max-height: 0px;
    border-bottom: 0px solid #0000;
    padding-bottom: 0px;
	margin-bottom: 0px;
	margin-top: 0px;
}

/* .rooster-item::after { */
    /* position: absolute; */
    /* height: 1px; */
    /* width: 100%; */
    /* background: var(--colorText); */
    /* content: ''; */
    /* bottom: -1rem; */
/* } */

.rooster-item:last-child::after {
	content: none;
}

.rooster-item-thumbnail {
/*	display: none;*/
	/* grid-area: rooster-item-thumbnail; */
	position: relative;
}

.rooster-item-title {
	/* grid-area: rooster-item-title; */
    font-size: 1.25rem;
    font-weight: 700;
/*    font-family: 'MuseoSlab900';*/
    font-family: var(--fontFamilyHeader);
    font-weight: var(--fontWeightHeader);
}

.rooster-item-dateandattend {
	/* grid-area: rooster-item-dateandattend; */
	display: grid;
    grid-template-areas:
        ". rooster-item-date"
        "rooster-item-attend rooster-item-attend"
		". .";
    grid-template-columns: 1fr max-content;
    grid-template-rows: auto auto 1fr;
	justify-items: end;
}

.rooster-item-date {
	/* grid-area: rooster-item-date; */
	padding: 0rem 0rem 1rem;
	text-align: right;
}

.rooster-item-attend {
	/* grid-area: rooster-item-attend; */
	/* display: none; */
    height: fit-content;
}

.rooster-item-date span.rooster-item-date-day {
    display: block;
    font-size: 3rem;
}

.rooster-item-date span.rooster-item-date-month {
    font-size: 1rem;
}

.rooster-item-attend {
    width: 10rem;
    background: var(--colorTertiary);
    padding: 1rem;
    border-radius: 1rem;
    text-align: center;
}

.rooster-item-attend.animate {
	animation: 0.5s 1 normal animateattend;
}

@keyframes animateattend {
	0% {
		scale: 1;
		background: var(--colorTertiary);
	}
	
	50% {
		scale: 1.15;
		background: var(--colorPrimary);
	}

	100% {
		scale: 1;
		background: var(--colorTertiary);
	}
}

.rooster-item-attend span {
    margin-bottom: 0.5rem;
    display: block;
}

.rooster-item-attend button {
    background: var(--colorPrimary);
    color: var(--colorBackground);
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 1rem;
    cursor: pointer;
    transition: 250ms background, 250ms color;
}

.rooster-item-attend button:hover {
    background: var(--colorSecondary);
/*    color: var(--colorPrimary);*/
}

.rooster-item-alert {
	/* grid-area: rooster-item-alert; */
    background: var(--colorTertiary);
    padding: 1rem;
    border-radius: 1rem;
    text-align: center;
}

.rooster-item-alert a {
	text-decoration: underline;
}

.rooster-item-description {
	/* display: none; */
	/* grid-area: rooster-item-description; */
/*	overflow: hidden;*/
/*    max-height: 3rem;*/
    position: relative;
	word-break: break-word;
}

.rooster-item-description::after {
    position: absolute;
    background: linear-gradient(0deg, var(--colorBackground), transparent);
/*    content: '';*/
    width: 100%;
    height: 2rem;
    top: 1rem;
    left: 0px;
}

.rooster-item-cats {
	/* grid-area: rooster-item-cats; */
	font-size: 0.9rem;
}

.rooster-item-cat {
    color: var(--colorSecondary);
    text-transform: uppercase;
    padding-right: 1rem;
	position: relative;
}

.rooster-item-cat::after {
	position: absolute;
	content: '';
	right: 0.5rem;
	width: 1px;
	height: 100%;
	background: var(--colorSecondary);
}

.rooster-item-cats .rooster-item-cat:last-child {
	padding-right: 0px;
}

.rooster-item-cats .rooster-item-cat:last-child::after {
	content: unset;
}


.rooster-item-uitvoering {
	font-size: 0.9rem;
    color: var(--colorSecondary);
}

.rooster-item-calendar {
	/* grid-area: rooster-item-calendar; */
	text-align: center;
}

.rooster-item-calendar a {
	color: var(--colorPrimary);
	font-size: 1.75rem;
}

.rooster-item-attendees {
	/* grid-area: rooster-item-attendees; */
    font-size: 0.75rem;
    font-weight: 400;
}

.rooster-item-attendees i {
    font-size: 1.5rem;
    vertical-align: middle;
    color: var(--colorPrimary);
    cursor: pointer;
}

.rooster-item-thumbnail img {
    width: 100%;
    /* aspect-ratio: 16 / 9; */
    /* object-fit: cover; */
    object-position: center;
    margin-top: 0.25rem;
}


@media screen and (min-width: 800px) {
	.rooster-filters,
	.rooster-filters:has(.rooster-filters-showhide input[type=checkbox]:checked) {
		grid-template-areas:
			"rooster-filters-title rooster-filters-radios"
			"rooster-filters-categories rooster-filters-categories";
		grid-template-columns: 1fr auto;
		gap: 1rem;
	}
	
	.rooster-filters-showhide {
		display: none;
	}
	
	.rooster-filters-radios {
		gap: 1rem;
		height: auto;
		overflow: visible;
	}
	
	.rooster-filters-categories {
		height: auto;
		overflow: visible;
	}
	.rooster-item {
		/* grid-template-areas: */
			/* "rooster-item-thumbnail rooster-item-title rooster-item-title rooster-item-dateandattend" */
			/* "rooster-item-thumbnail rooster-item-description rooster-item-description rooster-item-dateandattend" */
			/* "rooster-item-thumbnail rooster-item-cats rooster-item-calendar rooster-item-dateandattend" */
			/* "rooster-item-thumbnail rooster-item-attendees rooster-item-attendees rooster-item-dateandattend" */
			/* "rooster-item-alert rooster-item-alert rooster-item-alert rooster-item-alert"; */
		grid-template-columns: 200px 1fr min-content min-content;
		/* grid-template-rows: min-content min-content 1fr min-content min-content min-content; */
		grid-template-rows: repeat(8, min-content);
		gap: 0.5rem 1rem;
	}
	
	.rooster-item-thumbnail {
		grid-column: 1 / 2;
		grid-row: 1 / -2;
	}
	.rooster-item-title {
		grid-column: 2 / 4;
		grid-row: 1 / 2;
	}
	
	.rooster-item-date {
		grid-column: 4 / 5;
		grid-row: 1 / 3;
	}
	
	.rooster-item-attend {
		grid-column: 4 / 5;
		grid-row: 3 / 7;
	}
	
	.rooster-item-description {
		grid-column: 2 / 4;
		grid-row: 2 / 4;
	}
	
	.rooster-item-cats {
		grid-column: 2 / 3;
		grid-row: 4 / 5;
	}
	.rooster-item-calendar {
		grid-column: 3 / 4;
		grid-row: 4 / 6;
	}
	
	.rooster-item-uitvoering {
		grid-column: 2 / 3;
		grid-row: 5 / 6;
	}
	.rooster-item-attendees {
		grid-column: 2 / 4;
		grid-row: 6 / 7;
	}
	.rooster-item-alert {
		grid-column: 1 / -1;
		grid-row: 7 / 8;
	}
	
	.rooster-item-description {
		display: block;
		max-height: unset;
		overflow: visible;
        line-height: 1.4rem;
	}
	.rooster-item-description::after {
		content: unset;
	}
	.rooster-item-thumbnail {
		display: block;
	}
	
	.rooster-item-title {
		font-size: 1.5rem;
	}
	.rooster-item-cats {
		font-size: 1;
	}

	.rooster-item-dateandattend span.rooster-item-date-day {
		font-size: 4rem;
		line-height: 3.5rem;
	}

	.rooster-item-dateandattend span.rooster-item-date-month {
		font-size: 1.1rem;
        margin-top: 0.5rem;
        display: block;
	}

	.rooster-item-attend {
		display: block;
	}
	
	.rooster-item-attend.rooster-hidden {
		display: none;
	}
	
	.rooster-item-status {
		top: 0px;
	}
	
	.rooster-month {
		display: grid;
		grid-template-columns: auto auto auto 1fr;
		align-items: center;
	}
	.rooster-month-left {
		grid-column: 1 / 2;
		grid-row: 1 / 2;
	}
	.rooster-month-label {
		grid-column: 2 / 3;
		grid-row: 1 / 2;
	}
	.rooster-month-label[data-hide="left"],
	.rooster-month-label[data-hide="right"] {
		display: block;
	}
	.rooster-month-right {
		grid-column: 3 / 4;
		grid-row: 1 / 2;
	}
	.rooster-yearswitch {
		padding-bottom: unset;
		justify-self: end;
		grid-column: 4 / 5;
	}
	
	.rooster:has(input.switch:checked) .rooster-month-left,
	.rooster:has(input.switch:checked) .rooster-month-label,
	.rooster:has(input.switch:checked) .rooster-month-right {
		height: unset;
		overflow: visible;
		opacity: 0;
		pointer-events: none;
	}
}




/***************
*    WAVES     *
***************/

section.wave {
    position: relative;
    width: 100%;
	/* overflow: hidden; */
	aspect-ratio: 19;
}

section.wave-up svg {
    position: absolute;
}

section.wave-down svg {
    position: absolute;
	translate: 0 -10%;
}

section.wave.wave-overcontent {
	height: 0px;
	/* overflow: visible; */
}
section.wave.wave-overcontent.wave-up svg {
	translate: 0% -97%;
}

section.wave.wave-primarycolor {
	--fillColor: var(--colorPrimary);
}
section.wave.wave-secondarycolor {
	--fillColor: var(--colorSecondary);
}
section.wave.wave-bgcolor {
	--fillColor: var(--colorBackground);
}




/***************
*     TEXT     *
***************/

section.text {
	margin-block: 1rem;
    font-size: 1.15rem;
    line-height: 1.5rem;
    font-weight: 400;
}

@media screen and (min-width: 800px) {
	section.text {
		font-size: 1.25rem;
		line-height: 2rem;
	}
}




/***************
*    FOOTER    *
***************/

footer {
	background: var(--colorPrimary);
	color: var(--colorBackground);
}

.footercontent {
    display: grid;
    grid-template-areas:
        "footerlogo" "footertitle"
        "footernav" "footertext";
	padding-top: 1rem;
    width: var(--contentMaxWidth);
	gap: 1.5rem;
    margin-inline: auto;
	text-align: center;
}

.footerlogo {
	grid-area: footerlogo;
}

.footertitle {
	grid-area: footertitle;
	align-self: center;
}

.footertext {
	grid-area: footertext;
}

footer nav {
	grid-area: footernav;
}

footer ul {
	list-style: none;
}

footer nav ul span {
	display: none;
}

.footer-copyright {
    background: var(--colorBackground);
	color: var(--colorText);
	text-transform: uppercase;
}

.footer-copyright a {
	text-decoration: none;
}

.footer-copyright a:hover {
	text-decoration: underline;
}

.footer-copyright div {
    width: var(--contentMaxWidth);
    margin-inline: auto;
    padding-block: 1rem;
    opacity: 0.75;
    font-weight: 300;
    font-size: 0.9rem;
}

footer img {
	width: 10rem;
}

footer nav a {
	display: inline-block;
	line-height: 1.5rem;
    font-weight: 300;
    text-decoration: none;
    text-transform: uppercase;
	color: var(--colorBackground);
}

footer nav a:hover,
footer nav a:focus {
	color: var(--colorBackground);
    text-decoration: underline;
}

.footertext a {
    color: var(--colorBackground);
    text-decoration: none;
    font-weight: 600;
}

.footertext a:hover,
.footertext a:focus {
    text-decoration: underline;
}

.footertext p {
	margin-bottom: 1.5rem;
}

@media screen and (min-width: 800px) {
	.footercontent {
		grid-template-areas:
			"footerlogo footertitle"
			"footernav footertext";
		text-align: left;
	}
	footer h2 {
		font-size: 1.75rem;
	}
}




/***************
*     FORM     *
***************/
fieldset {
	border: none;
}

.form-row input[type=text],
.form-row input[type=password],
.form-row input[type=email] {
    padding: 0.5rem;
    font-size: 1rem;
    border-radius: 0.25rem;
    border: 1px solid #8888;
	width: 100%;
}

.form-row input[type=submit] {
    padding: 0.5rem;
    font-size: 1rem;
    border-radius: 0.25rem;
    border: 1px solid #8888;
	background: var(--colorPrimary);
	color: var(--colorBackground);
	width: 100%;
    cursor: pointer;
}

.form-group {
	font-size: 1rem;
}

.form-row {
	display: grid;
	grid-template-columns: 1fr;
	margin-block: 0.5rem;
}

.form-row.form-fullwidth {
	grid-template-columns: 1fr;
}

.form-row p {
/*	font-weight: 300;*/
/*	font-size: 0.9rem;*/
}

.form-row .requiredmark {
	font-size: 0.8rem;
    line-height: 1rem;
    vertical-align: super;
}

@media screen and (min-width: 800px) {
	.form-row {
		grid-template-columns: 1fr 2fr;
	}
}

/***************
*    MODAL     *
***************/


.modal {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 2;
    isolation: isolate;
	display: flex;
    align-items: center;
    justify-content: center;
	transition: 500ms scale;
    scale: 0;
}
.modal.open {
    scale: 1;
}

.modalbackdrop {
    background: #0000;
    inset: 0px;
    position: fixed;
	transition: 250ms background;
	display: none;
}

.modalbackdrop.open {
    background: #0008;
	transition: 250ms background;
}

.modalcontent {
    background: var(--colorBackground);
	width: 100%;
    min-width: 10rem;
    min-height: 3rem;
	height: 100%;
	top: 0px;
	left: 0px;
    z-index: 1;
    position: absolute;
    box-shadow: 0px 1rem 2rem #0008;
}

.rooster-modal-details {
    width: 100%;
	height: 100%;
	overflow: auto;
    display: grid;
	/* gap: 1rem; */
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: auto 2rem min-content min-content min-content 1fr min-content;
    grid-template-areas:
		"rooster-modal-details-thumb rooster-modal-details-thumb rooster-modal-details-thumb"
		"rooster-modal-details-thumb rooster-modal-details-thumb rooster-modal-details-thumb"
		"rooster-modal-details-alert rooster-modal-details-alert rooster-modal-details-alert"
		"rooster-modal-details-title rooster-modal-details-title rooster-modal-details-date"
		"rooster-modal-details-cats rooster-modal-details-cats rooster-modal-details-cats"
		"rooster-modal-details-description rooster-modal-details-description rooster-modal-details-description"
		"rooster-modal-details-calendar rooster-modal-details-back rooster-modal-details-back";
}

.rooster-modal-details-wave {
	grid-column: 1 / 4;
	grid-row: 2 / 3;
    display: flex;
	--fillColor: var(--colorBackground);
}

.rooster-modal-details-wave svg {
	display: block;
    width: 100%;
}

.rooster-modal-details-thumb {
	grid-area: rooster-modal-details-thumb;
	/* padding: 1rem; */
}

.rooster-modal-details-thumb img {
    width: 100%;
    /* max-width: 12rem; */
	height: 40vh;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
}

.rooster-modal-details-title {
	grid-area: rooster-modal-details-title;
    font-size: 1.375rem;
    font-family: var(--fontFamilyHeader);
    font-weight: var(--fontWeightHeader);
    padding: 0.5rem 1rem;
}
.rooster-modal-details-close {
	grid-area: rooster-modal-details-close;
    font-size: 2rem;
    padding: 0.5rem;
	display: none;
}

.modal-close {
	color: #0006;
	cursor: pointer;
	transition: 150ms color;
}
.modal-close:hover {
	color: #000a;
}

.rooster-modal-details-description {
	grid-area: rooster-modal-details-description;
	/* overflow: auto; */
	padding-inline: 1rem;
	margin-bottom: 3rem;
}

.rooster-modal-details-description th {
    text-align: left;
    padding-right: 1rem;
}

.rooster-modal-details-date {
	grid-area: rooster-modal-details-date;
}
.rooster-modal-details-cats {
	grid-area: rooster-modal-details-cats;
    display: flex;
    /* flex-wrap: wrap; */
    /* flex-direction: column; */
    /* align-items: flex-start; */
	font-size: 1rem;
	padding-inline: 1rem;
	padding-block: 0.5rem;
}

.rooster-modal-details-cats .rooster-modal-details-cats-title {
    font-weight: 600;
	display: none;
}

.rooster-modal-details-cats .rooster-modal-cat {
    color: var(--colorPrimary);
    text-transform: uppercase;
    padding-right: 1rem;
	position: relative;
}

.rooster-modal-details-cats .rooster-modal-cat::after {
	position: absolute;
	content: '';
	right: 0.5rem;
	width: 1px;
	height: 100%;
	background: var(--colorSecondary);
}

.rooster-modal-details-cats .rooster-modal-cat:last-child {
	padding-right: 0px;
}

.rooster-modal-details-cats .rooster-modal-cat:last-child::after {
	content: unset;
}


.rooster-modal-details-attend {
	/* grid-area: rooster-modal-details-attend; */
	grid-column: 2 / 4;
	grid-row: 1 / 2;
	align-self: end;
    justify-self: end;
    background: var(--colorTertiary);
    padding: 1rem;
    border-radius: 1rem;
    text-align: center;
	width: 10rem;
	margin-right: 1rem;
}

.rooster-modal-details-attend button {
    background: var(--colorPrimary);
    color: var(--colorBackground);
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 1rem;
    cursor: pointer;
    transition: 250ms background, 250ms color;
	margin-top: 0.5rem;
}

.rooster-modal-details-attend button:hover {
    background: var(--colorSecondary);
}

.rooster-modal-details-calendar {
	grid-area: rooster-modal-details-calendar;
	display: flex;
    align-items: center;
    justify-content: center;
	font-size: 0.9rem;
	line-height: 1.5rem;
    vertical-align: middle;
	border-top: 1px solid #0003;
    bottom: 0px;
    background: #fff;
    left: 0px;
    width: 50%;
    height: 2.5rem;
    position: fixed;
}

.rooster-modal-details-calendar i {
	font-size: 1.5rem;
    vertical-align: middle;
}

.rooster-modal-details-back {
	grid-area: rooster-modal-details-back;
	padding: 0.5rem;
    display: flex;
    justify-content: center;
	border-top: 1px solid #0003;
	/* position: sticky; */
    bottom: 0px;
    background: #fff;
    right: 0px;
    width: 50%;
    height: 2.5rem;
    position: fixed;
}

.rooster-modal-details-back .bulletbutton {
    color: var(--colorPrimary);
    background: var(--colorBackground);
	padding: unset;
    vertical-align: middle;
}

.bulletbutton i {
    font-size: 1.5rem;
    vertical-align: middle;
}

.rooster-modal-date-day {
    display: block;
    font-size: 3rem;
}

.rooster-modal-date-month {
    font-size: 1rem;
}

.rooster-modal-details-alert {
	grid-area: rooster-modal-details-alert;
    background: var(--colorTertiary);
    margin: 0.5rem;
    padding: 0.5rem;
    border-radius: 1rem;
    text-align: center;
}

.rooster-modal-details-alert a {
	text-decoration: underline;
}

.rooster-modal-details input[type="number"] {
    width: 3rem;
    padding: 0.5rem 0.25rem;
    font-size: 1rem;
    text-align: center;
}

@media screen and (min-width: 800px) {
	.modal {
		z-index: 4;
	}
	/* .modal::before { */
		/* content: ''; */
	/* } */
	.modalcontent {
		max-width: var(--contentMaxWidth);
		max-height: 80vh;
		width: unset;
		/* height: unset; */
		top: unset;
		left: unset;
	}
	
	.rooster-modal-details-thumb img {
		/* width: 100%; */
		/* max-width: 12rem; */
		width: 12rem;
		height: unset;
	}
	.rooster-modal-details {
		/* width: var(--contentMaxWidth); */
		/* display: grid; */
		gap: 1rem 0px;
		grid-template-columns: auto 1fr auto;
		grid-template-rows: auto auto auto 1fr auto auto;
		grid-template-areas:
			"rooster-modal-details-thumb rooster-modal-details-title rooster-modal-details-title"
			"rooster-modal-details-thumb rooster-modal-details-description rooster-modal-details-date"
			"rooster-modal-details-cats rooster-modal-details-description rooster-modal-details-attend"
			". rooster-modal-details-description rooster-modal-details-calendar"
			"rooster-modal-details-alert rooster-modal-details-alert rooster-modal-details-alert"
			". rooster-modal-details-back .";
	}
	.rooster-modal-details-wave {
		display: none;
	}
	.rooster-modal-details-attend {
		grid-area: rooster-modal-details-attend;
		grid-column: unset;
		grid-row: unset;
        margin-right: 2rem;
	}
	
	.rooster-modal-details-thumb {
		padding: 2rem 1rem 2rem 2rem;
	}
	
	.rooster-modal-details-cats .rooster-modal-details-cats-title {
		display: block;
	}
	
	.rooster-modal-details-cats {
		flex-wrap: wrap;
		flex-direction: column;
		align-items: flex-end;
	}
	
	.rooster-modal-details-cats .rooster-modal-cat {
    	padding-right: 0px;
	}
	
	.rooster-modal-details-cats .rooster-modal-cat::after {
    	content: unset;
	}
	
	.rooster-modal-details-description {
		overflow: auto;
		margin-bottom: unset;
	}
	
    .rooster-modal-details-title {
        padding: 1.5rem 1rem 0.5rem 1rem;
        font-size: 2rem;
    }
    
	.rooster-modal-details-back,
	.rooster-modal-details-calendar {
		border-top: none;
		position: relative;
		height: unset;
		width: unset;
		left: unset;
		right: unset;
	}
	
	.rooster-modal-details-calendar {
		align-items: start;
        margin-right: 0.5rem;
	}
	
	.rooster-modal-details-date {
		grid-area: rooster-modal-details-date;
		text-align: right;
		margin: 0rem 3.5rem 1rem;
	}
    
    .rooster-modal-details-back {
        padding: 1.5rem;
    }
    .rooster-modal-date-day {
        font-size: 4rem;
        line-height: 3.5rem;
    }
    
    .rooster-modal-date-month {
        font-size: 1.1rem;
        margin-top: 0.5rem;
    }
	.rooster-modal-details-back .bulletbutton {
		color: var(--colorBackground);
		background: var(--colorPrimary);
		padding: 0.5rem 1rem;
	}
	.rooster-modal-details-calendar a {
		display: flex;
		height: fit-content;
		color: var(--colorNav);
		background: var(--colorTertiary);
		padding: 1rem;
		border-radius: 1rem;
		text-align: center;
		width: 10rem;
		margin-right: 1.5rem;
		flex-direction: column-reverse;
	}
	.rooster-modal-details-calendar i {
		color: var(--colorPrimary);
	}
	.rooster-modal-details-calendar a:hover {
		color: var(--colorPrimary);
	}
}


.loader {
    position: fixed;
    z-index: 100;
    /* display: none; */
    justify-items: center;
    align-content: center;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background: #0008;
    font-size: 4rem;
	transition: 150ms background;
}

.loader.active {
	/* display: grid; */
}