/* The one table of contents: service pages, Ratgeber articles (artikel-prose renders this
   block) and legal texts. Phones/tablets: a compact card with a disclosure above the text.
   Desktop (>= 1280px): a sticky column that never outgrows the window; the list scrolls
   inside and fades where entries hide, the advice card below always stays visible. */
.fyh-service-toc {
	min-width: 0;
	color: var(--wp--preset--color--ink);
}

.fyh-service-toc nav {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.fyh-service-toc__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 2.75rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
}

.fyh-service-toc__label {
	margin: 0;
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.fyh-service-toc__chevron {
	display: none;
	width: 1rem;
	height: 1rem;
	transition: transform 180ms ease;
}

.fyh-service-toc__list {
	display: grid;
	align-content: start;
	gap: .15rem;
	margin: .75rem 0 0;
	padding: .75rem 0 0;
	border-top: 1px solid var(--wp--preset--color--hairline);
	list-style: none;
}

.fyh-service-toc__list a {
	display: block;
	padding: .55rem .65rem;
	border-radius: 8px;
	color: var(--wp--preset--color--muted);
	font-size: .82rem;
	font-weight: 560;
	line-height: 1.4;
	text-decoration: none;
	transition: background-color 160ms ease, color 160ms ease;
}

/* Legal texts with few H2 list their H3 as indented sub entries. */
.fyh-service-toc__list .is-sub a {
	padding-left: 1.4rem;
	font-weight: 500;
}

.fyh-service-toc__list a:hover,
.fyh-service-toc__list a.is-active {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
}

/* Active marker via box-shadow: a font-weight change would re-wrap long titles and make the list jump. */
.fyh-service-toc__list a.is-active {
	box-shadow: inset 2px 0 0 var(--wp--preset--color--ink);
}

.fyh-service-toc__list a:focus-visible,
.fyh-service-toc__head:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 3px;
}

/* Fade the edge that hides entries (view.js sets the flags while the list scrolls). */
.fyh-service-toc__list.has-more-below { -webkit-mask-image: linear-gradient( to bottom, #000 calc( 100% - 2.5rem ), transparent ); mask-image: linear-gradient( to bottom, #000 calc( 100% - 2.5rem ), transparent ); }
.fyh-service-toc__list.has-more-above { -webkit-mask-image: linear-gradient( to bottom, transparent, #000 2.5rem ); mask-image: linear-gradient( to bottom, transparent, #000 2.5rem ); }
.fyh-service-toc__list.has-more-above.has-more-below { -webkit-mask-image: linear-gradient( to bottom, transparent, #000 2.5rem, #000 calc( 100% - 2.5rem ), transparent ); mask-image: linear-gradient( to bottom, transparent, #000 2.5rem, #000 calc( 100% - 2.5rem ), transparent ); }

/* Advice card: the ink media-card primitive; icon beside the eyebrow instead of a tile above. */
.fyh-service-toc__contact {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: .3rem;
	margin-top: 1.25rem;
	padding: 1rem 1.1rem;
}
.fyh-service-toc__contact-title { margin: 0 0 .6rem; color: #fff; font-size: .95rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.fyh-service-toc__contact-link { display: flex; align-items: center; justify-content: center; padding: .6rem 1rem; border-radius: 10px; background: var( --wp--preset--color--base, #fff ); color: var( --wp--preset--color--ink, #111 ); font-size: .875rem; font-weight: 600; text-decoration: none; }
.fyh-service-toc__contact-call { display: inline-flex; align-items: center; gap: .5rem; margin-top: .55rem; color: rgb( 255 255 255 / .8 ); font-size: .8125rem; font-weight: 500; text-decoration: none; }
.fyh-service-toc__contact-call svg { width: 15px; height: 15px; }
.fyh-service-toc__contact-link:hover { color: var( --wp--preset--color--ink, #111 ); text-decoration: none; opacity: .92; }
.fyh-service-toc__contact :is( a ):hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

@media ( min-width: 1280px ) {
	/* Das aeussere Grid-Item streckt sich ueber die Inhaltszeile. Der innere
	   Sticky-Wrapper folgt dem Text; eine reservierte Spalte traegt ihn durch den CTA. */
	.fyh-service-toc {
		position: static;
		align-self: stretch;
		grid-row: 1;
		overflow: visible;
	}

	body .fyh-service-layout > .fyh-service-toc {
		grid-row: 1 / 3;
	}

	.fyh-service-toc__sticky {
		position: sticky;
		top: calc( var(--fyh-nav-height, 72px) + 1rem );
		display: flex;
		flex-direction: column;
		transform: translateY( var(--fyh-service-toc-disclosure-shift, 0px) );
		max-height: calc( 100svh - var(--fyh-nav-height, 72px) - 2rem );
		overflow: hidden;
	}

	.fyh-service-toc nav {
		flex: 1 1 auto;
	}

	.fyh-service-toc__list {
		min-height: 4rem;
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
		scrollbar-color: color-mix( in srgb, var(--wp--preset--color--ink) 18%, transparent ) transparent;
	}

	.fyh-service-toc__head {
		pointer-events: none;
	}
}

@media ( max-width: 1279px ) {
	.fyh-service-toc {
		padding: .8rem 1rem;
		border: 1px solid var(--wp--preset--color--hairline);
		border-radius: 16px;
		background: var(--wp--preset--color--base);
	}

	.fyh-service-toc__head {
		cursor: pointer;
	}

	.fyh-service-toc__chevron {
		display: block;
	}

	.fyh-service-toc.is-enhanced:not(.is-open) .fyh-service-toc__list {
		display: none;
	}

	.fyh-service-toc.is-open .fyh-service-toc__chevron {
		transform: rotate(180deg);
	}

	/* Mobil: TOC ist eingeklappt/kompakt, die Karte stapelt sich dort nicht. */
	.fyh-service-toc__contact {
		display: none;
	}
}

/* Short windows: the card turns compact so the list keeps room to breathe. */
@media ( min-width: 1280px ) and ( max-height: 760px ) {
	.fyh-service-toc__contact { padding: .8rem 1rem; }
}

@media ( prefers-reduced-motion: reduce ) {
	.fyh-service-toc__chevron,
	.fyh-service-toc__list a {
		transition: none;
	}
}