/*
 * Colorful Tabber - Basis-Layout für tabber.js
 * (Die Farben pro Tab werden separat und dynamisch per PHP eingefügt,
 * siehe inc/assets.php -> ct_generate_color_css())
 */

.tabberlive {
	margin: 1.5rem 0;
}

.tabberlive .tabbertabhide {
	display: none;
}

ul.tabbernav {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0 0 1.25rem;
	padding: 0;
}

ul.tabbernav li {
	list-style: none;
	margin: 0;
	display: inline;
}

ul.tabbernav li a {
	display: inline-block;
	padding: 0.65rem 1.4rem;
	border: 2px solid transparent;
	border-radius: 8px 8px 0 0;
	color: #ffffff;
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	transition: filter 0.15s ease, transform 0.1s ease;
	background-color: #888888; /* Fallback, falls keine Farbe konfiguriert ist */
}

ul.tabbernav li a:hover {
	text-decoration: none;
	color: #ffffff;
}

ul.tabbernav li.tabberactive a {
	color: #ffffff;
	transform: translateY(1px);
}

ul.tabbernav li a:focus-visible {
	outline: 3px solid #000000;
	outline-offset: 2px;
}

.tabberlive .tabbertab {
	padding: 1.25rem;
	border: 1px solid #e2e2e2;
	border-radius: 0 8px 8px 8px;
}

/* Überschrift ausblenden, da der Titel schon im Tab-Button steht */
.tabberlive .tabbertab > h1,
.tabberlive .tabbertab > h2,
.tabberlive .tabbertab > h3,
.tabberlive .tabbertab > h4 {
	display: none;
}