/* ====== Design-Variablen (gerne anpassen) ====== */
:root {
	--chip-bg: #fff;
	--chip-border: #cfd5db;
	--chip-text: #1f2937;
	--chip-bg-active: #0b66e4;
	--chip-border-active: #0b66e4;
	--chip-text-active: #eee;
	--chip-bg-hover: #0b66e4;
	--chip-ring: rgba(11, 102, 228, .35);
	--chip-text-hover-active: #ccc;
	--chip-text-hover: #eee;
	/* Kontrastfarbe für aktives Hover */
}



/* ====== Container & Gruppen ====== */
#filterBox {
	margin: 20px 0;
	padding: 14px 16px;
	background: #f8fafc;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	font-family: inherit;
}

#filterBox h3 {
	margin: 0 0 12px;
	font-size: 18px;
	font-weight: 700;
	color: #111827;
}

#filterBox .group {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 16px;
}

#filterBox .group-title {
	flex: 0 0 100%;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 700;
	color: #374151;
}

/* ====== Chip-Basis ====== */
#filterBox label {
	position: relative;
	display: inline-flex;
	align-items: center;
	line-height: 1;
	user-select: none;
}

/* Inputs zugänglich, aber unsichtbar */
#filterBox .tagFilter {
	position: absolute;
	inset: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	opacity: 0;
	pointer-events: none;
	/* Klicks gehen aufs Label/Span */
}

/* Chip-Optik */
#filterBox .tagFilter + span {
	display: inline-block;
	padding: 7px 14px;
	border: 1px solid var(--chip-border);
	border-radius: 999px;
	background: var(--chip-bg);
	color: var(--chip-text);
	font-size: 14px;
	transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .04s ease;
	white-space: nowrap;
}

/* Hover */
#filterBox label:hover .tagFilter + span {
	background: var(--chip-bg-hover);
	border-color: var(--chip-border);
	color: var(--chip-text-hover);
}

/* Active (checked) */
#filterBox .tagFilter:checked + span {
	background: var(--chip-bg-active);
	border-color: var(--chip-border-active);
	color: #fff;
	font-weight: 400;
}

/* Active (checked+hover) */
#filterBox .tagFilter:checked:hover + span {
	color: var(--chip-text-hover-active);
}

/* Tastaturfokus */
#filterBox .tagFilter:focus-visible + span {
	box-shadow: 0 0 0 3px var(--chip-ring);
}

/* „Alle“-Chip dezenter (optional) */
#filterBox .allOption + span {
	background: #ffffff;
	border-style: dashed;
}

#filterBox .allOption:checked + span {
	border-style: solid;
}

/* Dichte Variante auf sehr schmalen Screens */
@media (max-width: 520px) {
	#filterBox .tagFilter + span {
		padding: 6px 12px;
		font-size: 13px;
	}

	#filterBox .group {
		gap: 6px;
	}
}

/* Falls Jimdo globale Form-Styles stark reinfunken */
#filterBox input[type="radio"],
#filterBox input[type="checkbox"] {
	all: unset;
	/* Resettet Browser/Jimdo-Form-Styles innerhalb des Containers */
}


.filter-group h4 {
	font-size: 1.1em;
	margin-bottom: 0.3em;
}

.filter-group .hint {
	font-weight: normal;
	font-size: 0.9em;
	color: #666;
}

.cc-pagemode-default #filterBox .group:first-of-type {
	display: none;
}