body {
	--elf-surface: white;
	--elf-text: var(--dgs-color-primary);
	--elf-text-checked: var(--dgs-v2026-petrol-light);
	--elf-filter-chip-background: var(--dgs-fieldset-bg-color);
	--elf-tag-color: #B5B5B5;
	--elf-muted: #6b7280;
	--elf-border: var(--dgs-color-primary);
	--elf-accent: var(--dgs-color-primary);
	--elf-accent-soft: white;
	--elf-shadow: 0 8px 24px rgba(0, 0, 0, .05);
	--elf-shadow-cards: 8px 8px 24px rgba(60, 60, 60, .3), -8px -8px 24px rgba(60, 60, 60, .3);
	--elf-radius: 0px;
	--elf-calendar-radius: 14px;
	--elf-hover-card-radius: 14px;
	--elf-max: 1100px;
	--elf-filter-card-background: var(--dgs-fieldset-bg-color);
	--elf-calendar-date-bg: white;
}

* {
	box-sizing: border-box
}


.dgs-wrap {
	max-width: var(--elf-max);
	margin: 0 auto;
	padding: 32px 20px 56px;
}

.dgs-hero {
	margin-bottom: 28px;
}

.dgs-hero h1 {
	margin: 0 0 8px;
	font-size: 2.1rem;
	line-height: 1.15;
}

.dgs-hero p {
	margin: 0;
	color: var(--elf-muted);
	max-width: 800px;
}

.dgs-filters {
	display: inline-flex;
	flex-wrap: wrap;
	flex: auto auto auto;
	gap: 18px;
	margin: 15px 0 15px;
	justify-content: center;
	width: 100%;
}

.dgs-filters >.dgs-card { 
	min-width: 200px;
	max-width: 260px;
}

[data-dgs-site="SOLARSCHULEN"]{
	.dgs-filters >.dgs-card { 
		max-width: 370px; /* 260px; */
	}
}


.dgs-card {
	background: var(--elf-surface);
	transition: box-shadow 200ms ease, transform 200ms ease;
}

.dgs-card:not(.dgs-filter-card):hover {
	background: var(--elf-surface);
	border-radius: var(--elf-hover-card-radius);
	box-shadow: var(--elf-shadow-cards);
  transform: translateY(-4px);
	cursor: pointer;
}

.dgs-filter-card {
	padding: 18px;
	background-color: var(--elf-filter-card-background);
	border: 0px; /* 1px solid var(--elf-border); */
	border-radius: var(--elf-radius);
	box-shadow: var(--elf-shadow);
}

.dgs-filter-card h2 {
	font-size: large;
/* 	font-weight: 800; */
	margin-right: 20px;
	margin-bottom: 15px;
	width: 95px;
	color: var(--elf-text);
}

.dgs-filter-list {
	display: grid;
	gap: 10px;
}

.dgs-filter-list label {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
}

input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--elf-accent);
	flex: 0 0 auto;
}

.dgs-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.dgs-chip {
	position: relative;
	display: inline-flex;
	cursor: pointer;
}

.dgs-chip input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.dgs-chip span {
	display: inline-block;
	padding: 0px 11px;
	border-radius: 999px;
	border: 1px solid var(--elf-border);
	border-width: 1px;
/* 	background: var(--elf-accent-soft); */
	color: var(--elf-text);
	transition: .25s ease;
}

.dgs-chip input:checked+span {
	background: var(--elf-filter-chip-background);
/* 	border-color: var(--elf-text); */
	color: var(--elf-text);
	border-width: 3px;
	font-weight: 600;
}

.dgs-chip input:checked + span::before {
  content: "✓";
  margin-right: 6px;
}


.dgs-chips {
  display: inline-flex;
}


.dgs-filter-list input {
	scale: 1.3;
}

.dgs-filter-list label {
	line-height: var(--dgs-event-line-height);
}


.dgs-event-bookingfe-online-present {
	margin-top: 30px;
	text-align: center;
	grid-column: 1/-1;
}
.dgs-event-bookingfe-online-present span {
	margin-right: 10px;
	font-weight: bold;
}


.dgs-results-head {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}

.dgs-results-head h2 {
	margin: 0;
	font-size: 1.8rem;
}

.dgs-results-head .count {
	color: var(--elf-muted);
	font-size: .98rem;
}

.dgs-event-list {
	display: grid;
	gap: 18px;
}

.dgs-event-card {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 10px;
	padding: 0px 0px 20px 0px;
}

.dgs-event-card-content-right {
	padding-right: 15px;
}


.dgs-calendar-date {
	width: 75px;
	border: 1px solid var(--elf-border);
	border-radius: var(--elf-calendar-radius);
	overflow: hidden;
	background: var(--elf-calendar-date-bg);
	box-shadow: 0 4px 12px rgba(0, 0, 0, .04);
	text-align: center;
	align-self: start;
}

.dgs-calendar-month {
	background: var(--elf-accent);
	color: #fff;
	font-size: .82rem;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 4px 6px;
}

.dgs-calendar-day {
	font-size: 1.8rem;
	font-weight: 800;
	line-height: 1;
	padding: 7px 8px 8px;
	color: var(--elf-text);
}

.dgs-calendar-year {
	font-size: .85rem;
	color: var(--elf-muted);
	padding: 0 8px 12px;
	font-weight: 600;
}

@media ( max-width : 700px) {
	.dgs-event-card {
		grid-template-columns: 1fr;
	}
	.dgs-calendar-date {
		width: 84px;
	}
	.dgs-calendar-day {
		font-size: 1.65rem;
	}
}

.dgs-event-title {
	margin: 0 0 8px;
	font-size: 1.45rem;
	line-height: 1.25;
	padding-top: 10px;
}

.dgs-event-location {
	display: flex;
	gap: 0.4em;
	margin: 0 0 14px;
	color: var(--elf-muted);
}

.dgs-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}

.dgs-tag {
	display: inline-flex;
	align-items: center;
	padding: 1px 7px;
	border-radius: 999px;
	border: 1px solid var(--elf-muted);
	color: var(--elf-muted);
	font-size: .9rem;
	/*font-weight: 600;*/
	white-space: nowrap;
}

.dgs-event-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--elf-accent);
	font-weight: 700;
	text-decoration: none;
}

.dgs-event-link:hover {
	text-decoration: underline;
}

@media ( max-width : 900px) {
	.dgs-filters {
		grid-template-columns: 1fr;
	}
}

@media ( max-width : 700px) {
	.dgs-wrap {
		padding: 22px 14px 40px
	}
	.dgs-hero h1 {
		font-size: 1.7rem
	}
	.dgs-results-head h2 {
		font-size: 1.45rem
	}
	.dgs-event-card {
		grid-template-columns: 1fr;
		gap: 12px;
		padding: 16px;
	}
	.dgs-event-title {
		font-size: 1.15rem
	}
	.dgs-event-date .day {
		font-size: 1rem
	}
	.dgs-event-date .month {
		font-size: .9rem
	}
}