/* ===== Basis & Theme-Erbe ===== */
.simple-toc {
	--toc-accent: currentColor;
	--toc-bg: rgba(0,0,0,0);
	--toc-radius: 10px;

	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	color: inherit;
	background: var(--toc-bg);
	margin: 0 0 1.25rem 0;
	font-size: 0.95em;
	line-height: 1.2;
}

/* Optional sticky */
.simple-toc--sticky {
	position: sticky;
	top: 1rem;
	z-index: 20;
}

/* ===== Card-Look ===== */
.simple-toc--card .simple-toc__inner {
	border-radius: var(--toc-radius);
	background: #fff; /* neutraler Hintergrund */
	color: inherit;   /* Schriftfarbe folgt Theme */
	box-shadow: 0 4px 12px rgba(0,0,0,0.05);
	border: 1px solid rgba(0,0,0,0.08);
	overflow: hidden;
}

/* ===== Header / Toggle ===== */
.simple-toc__header {
	display: flex;
	align-items: center;
	gap: .6rem;
	width: 100%;
	background: #004ea8;
	border: 0;
	padding: .8rem 1rem;
	cursor: pointer;
	text-align: left;
	color: #fff;
	font: inherit;
}

.simple-toc__chevron {
	--sz: 10px;
	inline-size: var(--sz);
	block-size: var(--sz);
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	transition: transform .2s ease;
	opacity: .9;
}
.is-open .simple-toc__chevron {
	transform: rotate(45deg);
	opacity: 1;
}

.simple-toc__title {
	margin: 0;
	font: inherit;
	font-weight: 700;
	line-height: 1.25;
	color: #fff;
}

/* ===== Panel (animiert) ===== */
.simple-toc__panel {
	width: 100%;
	overflow: hidden;
	max-height: 0;
	transition: max-height .25s ease;
	border-top: 1px dashed rgba(0,0,0,0.15);
	background: rgba(0,0,0,0.03);
}

/* ===== Liste / Items ===== */
.simple-toc__list { width: 100%; }

.simple-toc__items {
	margin: 0;
	padding: .4rem 1rem .6rem 1rem;
}

/* Keine Bullets, kein Einzug */
.simple-toc--no-dots .simple-toc__items { list-style: none; padding-left: 0; margin-left: 0; }
.simple-toc--no-dots .simple-toc__link::before { content: none; }

/* Kompaktere Abstände */
.simple-toc__item { margin: 0; padding: 0; }

/* ===== Links ===== */
a.simple-toc__link {
	position: relative;
	display: block;
	width: 100%;
	padding: 0.4rem 0.75rem;
	line-height: 1.1;
	color: inherit;                    /* Standardfarbe vom Theme */
	text-decoration: none;
	border-radius: 6px;
	transition: background-color .2s ease, color .2s ease, opacity .2s ease;
	opacity: 0.9;
}
a.simple-toc__link * { color: inherit; }

/* Hover-Effekt: Zeile einfärben + Text weiß */
a.simple-toc__link:hover,
a.simple-toc__link:focus {
	background-color: #004ea8; /* gleiche Farbe wie Header */
	color: #fff;
	text-decoration: none;
	opacity: 1;
}
a.simple-toc__link:hover *,
a.simple-toc__link:focus * {
	color: #fff;
}

/* Aktive Überschrift (bleibt farblich neutral) */
a.simple-toc__link.is-active {
	font-weight: 600;
	color: inherit;
	background: rgba(0,0,0,0.05);
}
a.simple-toc__link.is-active * {
	color: inherit;
}

/* Wenn dots="true" genutzt wird */
.simple-toc:not(.simple-toc--no-dots) a.simple-toc__link::before {
	content: "";
	inline-size: .4rem;
	block-size: .4rem;
	border-radius: 999px;
	background: currentColor;
	opacity: .35;
	transform: scale(0.9);
	transition: opacity .15s ease, transform .15s ease;
	margin-right: .25rem;
	display: inline-block;
	vertical-align: middle;
}
.simple-toc:not(.simple-toc--no-dots) a.simple-toc__link:hover::before {
	background: #fff; /* Punkt ebenfalls weiß bei Hover */
	opacity: .9;
	transform: scale(1);
}

/* Touch-Geräte */
@media (hover:none) {
	a.simple-toc__link { text-decoration: none; }
}