.studio-spatzl-toc {
	/* Optik erbt vom Theme: Schrift und Farben kommen per currentColor / inherit. */
	--sstoc-font-size: 16px;
	--sstoc-title-size: 18px;
	--sstoc-item-space: 8px;
	--sstoc-indent: 16px;
	--sstoc-padding-y: 20px;
	--sstoc-padding-x: 24px;
	--sstoc-border-width: 1px;
	--sstoc-border-radius: 8px;
	--sstoc-border-color: currentColor;
	--sstoc-text-color: inherit;
	--sstoc-link-color: inherit;
	--sstoc-active-color: currentColor;
	--sstoc-bg-color: transparent;
	--sstoc-marker-color: currentColor;
	--sstoc-scroll-offset: 80px;

	font-family: inherit;
	color: var(--sstoc-text-color);
	background: var(--sstoc-bg-color);
	padding: var(--sstoc-padding-y) var(--sstoc-padding-x);
	border: var(--sstoc-border-width) solid var(--sstoc-border-color);
	border-radius: var(--sstoc-border-radius);
	box-sizing: border-box;
}

.studio-spatzl-toc__title {
	font-family: inherit;
	font-size: var(--sstoc-title-size);
	font-weight: var(--sstoc-title-weight, 700);
	font-style: var(--sstoc-title-style, normal);
	line-height: var(--sstoc-title-leading, 1.2);
	letter-spacing: var(--sstoc-title-spacing, 0px);
	text-transform: var(--sstoc-title-transform, none);
	text-align: var(--sstoc-title-align, left);
	margin: 0 0 calc(var(--sstoc-item-space) + 4px);
	color: inherit;
}

button.studio-spatzl-toc__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	text-align: left;
}

.studio-spatzl-toc__chevron {
	width: 0.6em;
	height: 0.6em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.25s ease;
	flex: 0 0 auto;
}

.studio-spatzl-toc.is-collapsed .studio-spatzl-toc__chevron {
	transform: rotate(-135deg);
}

.studio-spatzl-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: sstoc;
}

.studio-spatzl-toc__item {
	font-size: var(--sstoc-font-size);
	line-height: 1.4;
	margin: 0;
	padding-left: calc(var(--sstoc-indent) * var(--sstoc-depth, 0));
}

.studio-spatzl-toc__item + .studio-spatzl-toc__item {
	margin-top: var(--sstoc-item-space);
}

.studio-spatzl-toc__link {
	color: var(--sstoc-link-color);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.studio-spatzl-toc__link:hover,
.studio-spatzl-toc__link:focus-visible {
	color: var(--sstoc-active-color);
	border-bottom-color: currentColor;
}

.studio-spatzl-toc__item.is-active > .studio-spatzl-toc__link {
	color: var(--sstoc-active-color);
	font-weight: 600;
}

.studio-spatzl-toc.is-numbered .studio-spatzl-toc__list {
	counter-reset: sstoc;
}

.studio-spatzl-toc.is-numbered .studio-spatzl-toc__item {
	counter-increment: sstoc;
}

.studio-spatzl-toc.is-numbered .studio-spatzl-toc__item::before {
	content: counter(sstoc) ".";
	color: var(--sstoc-marker-color);
	margin-right: 0.5em;
	font-variant-numeric: tabular-nums;
}

/* Sprungziele nicht unter fixierte Header schieben */
.studio-spatzl-toc ~ * :is(h1, h2, h3, h4, h5, h6)[id] {
	scroll-margin-top: var(--sstoc-scroll-offset, 80px);
}

/* Editor-Vorschau */
.studio-spatzl-toc-editor__empty {
	opacity: 0.7;
	font-style: italic;
}