/* Sellgrip — toolpagina's (templates/tool.php). Alleen op die pagina's geladen,
 * na tools.css (bronregel, feitenlijst). Kaarten, FAQ en feitenlijsten komen
 * uit sellgrip.css. Dunne lijnen, geen verlopen, geen iconen in vakjes; rood
 * alleen voor de stapnummers en het label "Nur bei Sellgrip".
 */

/* ------------------------------------------------------------ kruimelpad */
.breadcrumb ol {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	row-gap: 4px;
	font-size: 0.9rem;
	color: var(--muted);
}

.breadcrumb li + li::before {
	content: "\203A";
	margin: 0 0.55em;
}

.breadcrumb a {
	text-decoration: none;
}

.breadcrumb a:hover {
	color: var(--ink);
	text-decoration: underline;
}

.breadcrumb [aria-current] {
	color: var(--graphite);
}

/* ------------------------------------------------------------------ kop */
.tp-hero h1 {
	max-width: 15em;
}

.tp-hero .eyebrow .tag {
	margin-left: 8px;
	vertical-align: 0.12em;
}

.tp-meta {
	margin-top: 22px;
	max-width: 44rem;
	font-size: 0.92rem;
	color: var(--graphite);
}

.tp-meta p + p {
	margin-top: 4px;
}

.tp-meta strong {
	color: var(--ink);
	font-weight: 650;
}

.tp-meta .tp-legend {
	margin-top: 10px;
	font-size: 0.85rem;
	color: var(--muted);
}

/* Geen display hier: licht/donker wisselt met display (sellgrip.css);
 * img is al block. */
.tp-shot .shot img {
	width: 100%;
	height: auto;
}

/* Het scherm hoort bij de tekst eronder: geen twee keer sectieruimte op wit
 * ertussen (was ±225px; slop-check 1 okt). */
.tp-shot {
	padding-bottom: clamp(24px, calc(4vw / var(--vz, 1)), 48px);
}

.tp-shot + .section {
	padding-top: clamp(40px, calc(6vw / var(--vz, 1)), 64px);
}

/* Oneven aantal punten in twee kolommen: het laatste punt krijgt de lijn over
 * de hele breedte, zodat de rij af is en er rechtsonder geen gat lijkt te
 * zitten (slop-check 1 okt). De tekst zelf blijft op kolombreedte. */
@media (min-width: 761px) {
	.tp-points > .tool:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	.tp-points > .tool:last-child:nth-child(odd) > * {
		max-width: calc(50% - 24px);
	}
}

/* ------------------------------------------------------------- stappen */
.tp-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px clamp(24px, calc(4vw / var(--vz, 1)), 56px);
}

.tp-steps li {
	padding-top: 18px;
	border-top: 1px solid var(--ink);
}

.tp-step-n {
	display: block;
	margin-bottom: 12px;
	font-size: 0.95rem;
	font-weight: 800;
	color: var(--red-text-strong);
	font-variant-numeric: tabular-nums;
}

.tp-steps p {
	margin-top: 6px;
	color: var(--graphite);
}

/* ------------------------------------------------------ tekst met links */
.tp-prose {
	max-width: 46rem;
	font-size: 1.05rem;
	color: var(--graphite);
}

.tp-prose p + p {
	margin-top: 14px;
}

.tp-facts {
	margin-top: 32px;
}

.tp-prose a,
.tp-points a,
.tp-steps a,
.facts dd a,
.faq p a {
	color: var(--ink);
	font-weight: 600;
	text-decoration-color: var(--red);
	text-decoration-thickness: 1.5px;
}

.tp-prose a:hover,
.tp-points a:hover,
.tp-steps a:hover,
.facts dd a:hover,
.faq p a:hover {
	color: var(--red-text-strong);
}

/* ------------------------------------------------------ verwante tools */
.tp-related {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.tp-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 20px 20px 22px;
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	background: var(--card);
	text-decoration: none;
	transition: border-color 0.15s ease;
}

.tp-card:hover {
	border-color: var(--ink);
}

.tp-card-icon {
	width: 20px;
	height: 20px;
	margin-bottom: 8px;
	color: var(--ink);
}

.tp-card strong {
	font-size: 1.05rem;
	letter-spacing: -0.01em;
}

.tp-card span {
	font-size: 0.95rem;
	color: var(--graphite);
}

.tp-back {
	margin-top: 28px;
}

@media (max-width: 1000px) {
	.tp-related {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 760px) {
	.tp-steps {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 520px) {
	.tp-related {
		grid-template-columns: 1fr;
	}
}