/* Kursthemen-Reiter. Ohne JavaScript stapeln sich die Inhalte untereinander. */

.juleica-tabs {
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

@media (min-width: 782px) {
	.juleica-tabs[data-juleica-tabs-bereit="ja"] {
		grid-template-columns: minmax(220px, 18rem) 1fr;
		align-items: start;
	}
}

.juleica-tabs__liste {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 782px) {
	.juleica-tabs__liste {
		flex-direction: column;
		flex-wrap: nowrap;
	}
}

.juleica-tabs__reiter {
	appearance: none;
	width: 100%;
	border: 0;
	border-left: 4px solid transparent;
	background: var(--wp--preset--color--grund);
	color: var(--wp--preset--color--text-stark);
	font: inherit;
	font-size: var(--wp--preset--font-size--klein);
	text-align: left;
	padding: 12px 16px;
	cursor: pointer;
}

.juleica-tabs__reiter:hover {
	background: #eceded;
}

/* Markengelb als Fläche und Kante, nie als Schriftfarbe. */
.juleica-tabs__reiter[aria-selected="true"] {
	background: var(--wp--preset--color--gelb);
	border-left-color: var(--wp--preset--color--tinte);
	color: var(--wp--preset--color--tinte);
	font-weight: 700;
}

.juleica-tabs__panel {
	margin: 0;
}

.juleica-tabs__panel img {
	display: block;
	width: 100%;
	height: auto;
}

/* Ohne JavaScript braucht jedes Panel eine eigene Überschrift,
   damit die Liste der Kursnamen nicht verloren geht. */
[data-juleica-tabs-bereit="ja"] .juleica-tabs__panel-titel {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}