/**
 * Bewusst zurueckhaltend: Typografie und Farben kommen aus dem Theme.
 * Die Gruppenfarbe wird als Custom Property --awt-farbe am Gruppen-Element gesetzt.
 */

/*
 * --awt-farbe muss eine echte Farbe sein, kein currentColor: als Hintergrund
 * wuerde currentColor gegen die color desselben Elements aufgeloest und damit
 * unsichtbar, sobald wir die Textfarbe mitsetzen.
 * --awt-kontrast wird serverseitig passend zur Gruppenfarbe gesetzt.
 */
.awt-programm {
	--awt-farbe: #444;
	--awt-kontrast: #fff;
	--awt-text: #444;
}

.awt-diagnose {
	margin: 1rem 0;
	padding: .75rem 1rem;
	border-left: 4px solid #d63638;
	background: rgba( 214, 54, 56, .06 );
	font-size: .875em;
}

.awt-diagnose ul {
	margin: .5rem 0 0;
	padding-left: 1.25rem;
}

.awt-gruppe {
	margin: 0 0 1rem;
	padding: 0 0 0 1rem;
	border-left: 4px solid var(--awt-farbe);
}

.awt-gruppe__titel {
	display: inline-flex;
	gap: .5rem;
	align-items: baseline;
	margin: 0 0 .25rem;
	color: var(--awt-text);
}

/* Akkordeon */
.awt-gruppe__kopf {
	display: flex;
	gap: .5rem;
	align-items: center;
	padding: .5rem 0;
	cursor: pointer;
	list-style: none;
}

.awt-gruppe__kopf::-webkit-details-marker {
	display: none;
}

.awt-gruppe__kopf::before {
	content: '';
	flex: 0 0 auto;
	width: .5em;
	height: .5em;
	border-right: 2px solid var(--awt-farbe);
	border-bottom: 2px solid var(--awt-farbe);
	transform: rotate( -45deg );
	transition: transform .15s ease;
}

details[open] > .awt-gruppe__kopf::before {
	transform: rotate( 45deg );
}

.awt-gruppe__kopf:focus-visible {
	outline: 2px solid var(--awt-farbe);
	outline-offset: 2px;
}

.awt-gruppe__kopf .awt-gruppe__titel {
	margin: 0;
}

.awt-gruppe__anzahl {
	padding: .1em .5em;
	border-radius: 999px;
	background: var(--awt-farbe);
	color: var(--awt-kontrast);
	font-size: .75em;
	font-weight: 600;
}

.awt-hinweis {
	margin-top: 1.5rem;
	font-size: .8125em;
	opacity: .7;
}

@media ( prefers-reduced-motion: reduce ) {
	.awt-gruppe__kopf::before {
		transition: none;
	}
}

.awt-gruppe__beschreibung {
	margin: 0 0 1rem;
	opacity: .8;
}

.awt-alle {
	margin: 0 0 1rem;
	text-align: right;
}

.awt-alle__schalter {
	padding: .35em .9em;
	border: 1px solid var(--awt-text);
	border-radius: 999px;
	background: transparent;
	color: var(--awt-text);
	font: inherit;
	font-size: .875em;
	cursor: pointer;
}

.awt-alle__schalter:hover,
.awt-alle__schalter:focus-visible {
	background: var(--awt-farbe);
	color: var(--awt-kontrast);
}

.awt-liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

.awt-vortrag {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: flex-start;
	justify-content: space-between;
	padding: 1.25rem 0;
	border-bottom: 1px solid rgba( 0, 0, 0, .12 );
}

.awt-vortrag:last-child {
	border-bottom: 0;
}

.awt-vortrag__inhalt {
	flex: 1 1 20rem;
	min-width: 0;
}

.awt-vortrag__titel {
	margin: 0;
}

/* Aufklappbarer Vortrag: Titel sichtbar, Beschreibung auf Klick */
.awt-vortrag__kopf {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .15rem .6rem;
	align-items: start;
	cursor: pointer;
	list-style: none;
}

.awt-vortrag__kopf::-webkit-details-marker {
	display: none;
}

.awt-vortrag__kopf::before {
	content: '';
	grid-row: 1;
	width: .45em;
	height: .45em;
	margin-top: .45em;
	border-right: 2px solid var(--awt-text);
	border-bottom: 2px solid var(--awt-text);
	transform: rotate( -45deg );
	transition: transform .15s ease;
}

.awt-vortrag__kopf > * {
	grid-column: 2;
}

details[open] > .awt-vortrag__kopf::before {
	transform: rotate( 45deg );
}

.awt-vortrag__kopf:focus-visible {
	outline: 2px solid var(--awt-text);
	outline-offset: 3px;
}

.awt-vortrag__kopf > * {
	margin: 0;
}

.awt-vortrag__kopf .awt-vortrag__untertitel {
	font-weight: 400;
	opacity: .7;
}

details.awt-vortrag__inhalt .awt-vortrag__beschreibung {
	padding-left: 1.05em;
}

.awt-vortrag__untertitel {
	margin: .15rem 0 0;
	font-weight: 600;
	opacity: .85;
}

.awt-vortrag__beschreibung {
	margin-top: .5rem;
}

.awt-vortrag__beschreibung > p:last-child {
	margin-bottom: 0;
}

.awt-vortrag__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	align-items: center;
	margin: .75rem 0 0;
	font-size: .875em;
}

.awt-badge {
	padding: .15em .6em;
	border: 1px solid var(--awt-text);
	border-radius: 999px;
	color: var(--awt-text);
	white-space: nowrap;
}

.awt-vortrag__referenten {
	opacity: .75;
}

.awt-vortrag__like {
	flex: 0 0 auto;
}

.awt-like {
	display: inline-flex;
	gap: .5rem;
	align-items: center;
	padding: .5em 1em;
	border: 1px solid var(--awt-text);
	border-radius: 999px;
	background: transparent;
	color: var(--awt-text);
	font: inherit;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.awt-like:hover:not( [disabled] ) {
	border-color: var(--awt-farbe);
	background: var(--awt-farbe);
	color: var(--awt-kontrast);
}

.awt-like:focus-visible {
	outline: 2px solid var(--awt-farbe);
	outline-offset: 2px;
}

.awt-like[disabled] {
	opacity: .6;
	cursor: default;
}

.awt-like.is-liked {
	border-color: var(--awt-farbe);
	background: var(--awt-farbe);
	color: var(--awt-kontrast);
}

.awt-like__count {
	padding-left: .5rem;
	border-left: 1px solid currentColor;
	font-variant-numeric: tabular-nums;
}

@media ( max-width: 40rem ) {
	.awt-vortrag {
		flex-direction: column;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.awt-like {
		transition: none;
	}
}