/* Inhaltsverzeichnis und Leistungsindex.
 *
 * Beide sprechen die Sprache der Tonspur: Abschnitte sind Marken auf einer
 * Spur. Auf der Seite steht diese Spur senkrecht, sonst ist es dieselbe Form
 * wie in der Bühne — grüner Punkt an einer Linie.
 */

/* ---------- Verzeichnis auf einer Leistungsseite ---------- */

.pvm-toc {
	margin-bottom: var(--pvm-space-xl);
	padding: var(--pvm-space-md) var(--pvm-space-lg);
	/* Grün, seit dem 20.08.2026. Aimée: „man versteht nicht direkt, dass es
	 * kein Infokasten ist, weil es auch blau ist — bitte die mitlaufende
	 * Navigation in einen grünen Kasten setzen (auf allen Seiten)."
	 *
	 * Grün trägt keine Schrift, es ist Fläche. Darauf steht Ink mit 9,14:1 —
	 * die einzige Kombination, in der die Markenfarbe Kontrast liefert.
	 */
	background: var(--pvm-signal);
	color: var(--pvm-ink);
	border-radius: var(--pvm-radius-lg);
}

.pvm-toc__title {
	margin: 0 0 var(--pvm-space-sm);
	font-size: var(--pvm-text-sm);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pvm-ink);
	font-family: var(--pvm-font-body);
}

.pvm-toc__list {
	position: relative;
	margin: 0;
	padding: 0 0 0 var(--pvm-space-md);
	list-style: none;
	counter-reset: pvm-toc;
}

/* Die Spur, auf der die Marken sitzen. */
.pvm-toc__list::before {
	content: '';
	position: absolute;
	top: 0.7em;
	bottom: 0.7em;
	left: 3px;
	width: 1px;
	/* Die Spur auf Grün: dunkel und durchscheinend, sonst verschwindet sie. */
	background: rgb(26 26 26 / 30%);
}

.pvm-toc__item {
	position: relative;
	margin: 0;
	padding: var(--pvm-space-3xs) 0;
}

.pvm-toc__item + .pvm-toc__item {
	margin-top: var(--pvm-space-3xs);
}

.pvm-toc__item::before {
	content: '';
	position: absolute;
	top: 0.95em;
	left: calc(-1 * var(--pvm-space-md) + 1px);
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--pvm-ink);
}

.pvm-toc__item a {
	color: var(--pvm-ink);
	text-decoration: none;
	font-weight: 600;
	/* „Geschäfts-/Nachhaltigkeitsbericht" ist breiter als die Randspalte und
	 * stand am 19.08.2026 rechts aus dem blauen Kasten heraus.
	 */
	hyphens: auto;
	overflow-wrap: break-word;
}

.pvm-toc__item a:hover {
	color: var(--pvm-ink);
	text-decoration: underline;
	text-underline-offset: 0.25em;
	text-decoration-thickness: 2px;
}

.pvm-toc :focus-visible {
	outline-color: var(--pvm-ink);
}

@media (min-width: 1100px) {
	/* Auf breiten Bildschirmen läuft das Verzeichnis neben dem Text mit,
	 * statt ihn nach unten zu schieben.
	 */
	.pvm-toc {
		position: sticky;
		top: calc(var(--pvm-header-height) + var(--pvm-space-sm));
		float: right;
		width: 17rem;
		margin: 0 0 var(--pvm-space-lg) var(--pvm-space-xl);
	}
}

/* ---------- Sprungmarken als Elementor-Baustein ----------
 * Das Verzeichnis oben ist eine Randspalte, die neben dem Text mitläuft. Der
 * Baustein dagegen steht als eigener Abschnitt im Fluss: Er darf nicht
 * schweben, sonst legt er sich über die breiten Bilder darunter — genau das
 * ist auf den Leistungsseiten passiert.
 */

.pvm-jumplinks {
	position: static;
	float: none;
	width: auto;
	margin: 0;
	padding: var(--pvm-space-lg);
}

@media (min-width: 1100px) {
	.pvm-jumplinks {
		position: static;
		float: none;
		width: auto;
		margin: 0;
	}
}

@media (min-width: 700px) {
	.pvm-jumplinks__list {
		display: grid;
		grid-template-columns: repeat(var(--pvm-jump-cols, 2), minmax(0, 1fr));
		column-gap: var(--pvm-space-2xl);
	}

	/* Die senkrechte Spur trägt nur eine einzelne Spalte. Über mehrere Spalten
	 * hinweg liefe sie mitten durchs Raster.
	 */
	.pvm-jumplinks__list::before {
		content: none;
	}
}

/* ---------- Index der Leistungsbereiche ---------- */

.pvm-index {
	margin-top: var(--pvm-space-2xl);
}

.pvm-index__title {
	margin-bottom: var(--pvm-space-lg);
}

.pvm-index__list {
	display: grid;
	gap: var(--pvm-space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 700px) {
	.pvm-index__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--pvm-space-xl) var(--pvm-space-2xl);
	}
}

.pvm-index__area {
	margin: 0;
	padding-top: var(--pvm-space-sm);
	border-top: 1px solid var(--pvm-line);
}

.pvm-index__heading {
	margin-bottom: var(--pvm-space-2xs);
	font-size: var(--pvm-text-xl);
	text-wrap: balance;
}

.pvm-index__heading a {
	text-decoration: none;
}

.pvm-index__heading a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.pvm-index__marks {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pvm-index__marks li {
	margin: 0;
	padding-left: var(--pvm-space-sm);
	position: relative;
	font-size: var(--pvm-text-sm);
	line-height: 1.9;
}

.pvm-index__marks li::before {
	content: '';
	position: absolute;
	top: 0.85em;
	left: 0;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--pvm-green);
}

.pvm-index__marks a {
	color: var(--pvm-text-muted);
	text-decoration: none;
}

.pvm-index__marks a:hover {
	color: var(--pvm-link);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}


/* ---------- Der Abschnitt, in dem man gerade liest ----------
 * `toc.js` setzt die Klasse. Ohne JavaScript steht die Liste unverändert da —
 * sie funktioniert dann als reine Sprungliste weiter.
 */

.pvm-toc__item.is-current > a {
	color: var(--pvm-ink);
	text-decoration: underline;
	text-underline-offset: 0.25em;
	text-decoration-thickness: 2px;
}

.pvm-toc__item.is-current::before {
	width: 11px;
	height: 11px;
	top: 0.82em;
	left: calc(-1 * var(--pvm-space-md) - 1px);
	background: var(--pvm-ink);
	box-shadow: 0 0 0 3px rgb(26 26 26 / 18%);
}

@media (prefers-reduced-motion: no-preference) {
	.pvm-toc__item::before {
		transition: width 200ms ease, height 200ms ease, box-shadow 200ms ease;
	}
}

/* ---------- Randspalte auf den Leistungsseiten ----------
 * Juri am 20.08.2026: „die mitlaufende bitte auch auf den Leistungsseiten
 * wieder rechts machen, und wenn da Platz ist, ist das so — die Kundin hat
 * gesagt, es gefällt ihr, dass der Kasten mitläuft."
 *
 * Grün bleibt die Karte: Blau und Beige gehören den Infokästen, das
 * Verzeichnis soll sich davon unterscheiden.
 *
 * Zwei echte Spalten, keine schwebende Kiste: Ein früherer Versuch mit `float`
 * legte das Verzeichnis über die breiten Bilder. Der Inhalt steht im Quelltext
 * hinter dem Verzeichnis, `row-reverse` dreht die Anzeige.
 */

@media (min-width: 1100px) {
	.e-con.e-flex.pvm-rail {
		--flex-direction: row-reverse;
		--flex-wrap: nowrap;
		--align-items: flex-start;
	}

	.pvm-rail > .e-con-inner > .pvm-rail__main {
		--flex-grow: 1;
		--flex-shrink: 1;
		--flex-basis: auto;
		min-width: 0;
	}

	.pvm-rail > .e-con-inner > .pvm-rail__side {
		--flex-grow: 0;
		--flex-shrink: 0;
		--flex-basis: 17rem;
		position: sticky;
		/* Unter dem Kopfbereich, mit demselben Abstand wie `scroll-padding-top`
		 * in `base.css` — sonst springt ein Anker hinter das Verzeichnis.
		 */
		top: calc(var(--pvm-header-height) + var(--pvm-space-sm));
	}

	/* In der schmalen Spalte ist die Liste einspaltig, und die senkrechte Spur
	 * gehört wieder dazu.
	 */
	.pvm-rail__side .pvm-jumplinks__list {
		display: block;
	}

	.pvm-rail__side .pvm-jumplinks__list::before {
		content: '';
	}

	.pvm-rail__side .pvm-toc__item a {
		font-size: var(--pvm-text-sm);
	}

	/* Die Flächen mit eigenem Grund liefen randlos über den Bildschirm. In der
	 * Spalte werden sie zu Blöcken mit eigenem Innenabstand und derselben
	 * Rundung wie Kästen und Karten.
	 */
	.pvm-rail__main .e-con.pvm-band,
	.pvm-rail__main .e-con.pvm-soft,
	.pvm-rail__main .e-con.pvm-case {
		padding-inline: var(--pvm-space-xl);
		border-radius: var(--pvm-radius-lg);
	}

	/* In der Spalte ist die Zeile rund ein Drittel kürzer als über die volle
	 * Breite. Eine Stufe kleiner hält die Zwischentitel dort im Verhältnis.
	 */
	.pvm-rail__main .elementor-widget-heading .elementor-heading-title {
		font-size: var(--pvm-text-2xl);
	}
}