/* ------------------------------------------------------------------
 * VGL – Inhaltsverzeichnis seitlich (vgl/side-toc)
 * Textbreite: automatisch die Theme-Breite der Seite (--wp--style--global--content-size)
 * oder im Block festgelegt (--vgl-stoc-content). Farben aus dem Theme.
 * ------------------------------------------------------------------ */
.vgl-stoc-layout {
	--vgl-stoc-c: var(--vgl-stoc-content, var(--wp--style--global--content-size, 750px));
	--vgl-stoc-gap: 40px;
	--vgl-stoc-accent-c: var(--vgl-stoc-accent, var(--theme-link-initial-color, var(--wp--preset--color--primary, #1e73be)));
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.vgl-stoc-main > :last-child {
	margin-bottom: 0;
}

/* Handy / schmale Fenster: Verzeichnis eingeklappt über dem Text */
.vgl-stoc-side {
	width: var(--theme-block-width, 92%);
	max-width: var(--vgl-stoc-c);
	margin: 0 auto 28px;
}

/* Desktop: Text links, Verzeichnis rechts und mitlaufend */
@media (min-width: 1024px) {
	.vgl-stoc-layout {
		display: grid;
		grid-template-columns: minmax(0, var(--vgl-stoc-c)) var(--vgl-stoc-w, 270px);
		column-gap: var(--vgl-stoc-gap);
		justify-content: center;
		align-items: start;
		width: var(--theme-block-width, 92%) !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	.vgl-stoc-main {
		grid-column: 1;
		grid-row: 1;
		min-width: 0;
		/* Kinder füllen die Textspalte (statt der Theme-Breite der ganzen Seite) */
		--theme-block-width: 100%;
		--wp--style--global--content-size: 100%;
	}
	.vgl-stoc-side {
		position: sticky;
		top: var(--vgl-stoc-top, 100px);
		grid-column: 2;
		grid-row: 1;
		width: auto;
		max-width: none;
		max-height: calc(100vh - var(--vgl-stoc-top, 100px) - 20px);
		margin: 0;
		overflow: auto;
		overscroll-behavior: contain;
		transition: top 0.2s ease;
	}
}

/* Sprungziele nicht unter dem mitlaufenden Header verstecken */
.vgl-has-side-toc .vgl-stoc-main [id] {
	scroll-margin-top: calc(var(--vgl-stoc-top, 100px) + 10px);
}

/* Box */
.vgl-stoc {
	border: 1px solid #e3e6ea;
	background: #fff;
	font-size: 15px;
	line-height: 1.4;
}
.vgl-stoc__head {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: #f7f8f9;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.vgl-stoc__title {
	padding: 10px 14px;
	font-size: 15px;
	font-weight: 700;
}
.vgl-stoc__icon {
	position: relative;
	flex: 0 0 44px;
	border-left: 1px solid #e3e6ea;
}
.vgl-stoc__icon::before,
.vgl-stoc__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 2px;
	margin: -1px 0 0 -7px;
	background: currentColor;
}
.vgl-stoc__icon::after {
	transform: rotate(90deg);
	transition: transform 0.2s ease;
}
.vgl-stoc__head[aria-expanded="true"] .vgl-stoc__icon::after {
	transform: rotate(0);
}
.vgl-stoc__body[hidden] {
	display: none;
}
.vgl-stoc__list,
.vgl-stoc__sub {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.vgl-stoc__item {
	margin: 0 !important;
	border-top: 1px solid #e3e6ea;
}
.vgl-stoc__sub .vgl-stoc__item {
	border-top: 0;
}
.vgl-stoc__link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px;
	color: inherit !important;
	font-size: 14px;
	line-height: 1.35;
	text-decoration: none !important;
	transition: background 0.15s ease, color 0.15s ease;
}
.vgl-stoc__item--sub .vgl-stoc__link {
	padding: 4px 14px 4px 26px;
	font-size: 13px;
}
.vgl-stoc__num {
	flex: 0 0 auto;
	min-width: 18px;
	color: var(--vgl-stoc-accent-c);
	font-size: 15px;
	font-weight: 700;
}
.vgl-stoc__item--sub .vgl-stoc__num {
	min-width: 28px;
	font-size: 12px;
}
.vgl-stoc__text {
	flex: 1 1 auto;
	min-width: 0;
}
/* Desktop (seitlich): jeder Punkt einzeilig, zu lange Texte enden mit „…“ (voller Text beim Darüberfahren) */
@media (min-width: 1024px) {
	.vgl-stoc-side .vgl-stoc__text {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}
.vgl-stoc__link:hover,
.vgl-stoc__link:focus-visible {
	background: #f3f5f7;
}
/* Eigener letzter Punkt: Symbol statt Nummer */
.vgl-stoc__sym {
	display: inline-flex;
	align-items: center;
}
.vgl-stoc__sym svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
/* Eigener letzter Punkt: Hinweis-Sternchen mit Infofenster */
.vgl-stoc__item--extra {
	position: relative;
	display: flex;
	align-items: stretch;
}
.vgl-stoc__item--extra .vgl-stoc__link {
	flex: 1 1 auto;
	min-width: 0;
}
.vgl-stoc__info {
	flex: 0 0 auto;
	margin: 0;
	padding: 0 14px;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--vgl-stoc-accent-c);
	font: inherit;
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	cursor: help;
}
.vgl-stoc__info:focus-visible {
	outline: 2px solid var(--vgl-stoc-accent-c);
	outline-offset: -2px;
}
.vgl-stoc__tip {
	position: absolute;
	top: 100%;
	right: 8px;
	left: 8px;
	z-index: 5;
	display: none;
	margin-top: 6px;
	padding: 12px 14px;
	border: 1px solid #e3e6ea;
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16);
	font-size: 13px;
	line-height: 1.5;
}
.vgl-stoc__info:hover + .vgl-stoc__tip,
.vgl-stoc__info:focus-visible + .vgl-stoc__tip,
.vgl-stoc__item--extra.is-tip-open .vgl-stoc__tip {
	display: block;
}
/* Platz unter dem letzten Punkt, damit das Infofenster im Verzeichnis sichtbar bleibt */
.vgl-stoc__item--extra.is-tip-open,
.vgl-stoc__item--extra:has(.vgl-stoc__info:hover) {
	margin-bottom: 110px !important;
}
.vgl-stoc__link.is-active {
	background: var(--vgl-stoc-accent-c);
	color: #fff !important;
}
.vgl-stoc__link.is-active .vgl-stoc__num {
	color: #fff;
}