/* ==========================================================================
   Alp Lift: nieuwe weergave van de categoriepagina's
   ==========================================================================
   Hoort bij includes/alplift-categorie.php en wordt alleen geladen als die
   weergave aanstaat. Alles staat binnen .alp-cat (de pagina) of .alp-cat-lade
   (het filter), dus de rest van de site merkt er niets van.

   Twee dingen om op te letten:
     - De Elementor-kit (post-4.css) laadt na deze stylesheet en zet kleuren op
       .elementor-kit-4 a, h1 tot h3 en button, met hover op 0-2-1. Daarom staan
       koppen, links en knoppen hier met een ouder erbij in de selector.
     - Hello Elementor kleurt knoppen magenta bij hover en focus. Elke knop hier
       heeft daarom een eigen rust-, hover-, focus- en active-stand.

   De maten komen van de huidige categoriepagina (gemeten 26 oktober 2026):
   inhoud 1310px breed met 20px aan de zijkant, Roboto, rood #CD171A, de kop in
   het verloop van #190303 naar #2B0707.
   ========================================================================== */

.alp-cat,
.alp-cat-lade,
.alp-cat-scherm {
	--alp-rood: #CD171A;
	--alp-rood-donker: #A81215;
	--alp-inkt: #180403;
	--alp-tekst: #333333;
	--alp-grijs: #6E6767;
	--alp-vloer: #EFEFEF;
	--alp-wit: #FFFFFF;
	--alp-rij: #F6F5F5;
	--alp-lijn: #E2DEDE;
	--alp-kop: linear-gradient(138deg, #190303 21%, #2B0707 100%);
	--alp-letter: "Roboto", "Helvetica Neue", Arial, sans-serif;
}

.alp-cat {
	display: block;
	background: var(--alp-vloer);
	color: var(--alp-tekst);
	font: 400 16px/1.6 var(--alp-letter);
}

.alp-cat *,
.alp-cat-lade * {
	box-sizing: border-box;
}

.alp-cat .alp-cat-in {
	max-width: 1350px;
	margin: 0 auto;
	padding-inline: 20px;
}

.alp-cat .alp-cat-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.alp-cat p {
	margin: 0;
}

.alp-cat :focus-visible,
.alp-cat-lade :focus-visible {
	outline: 2px solid var(--alp-rood);
	outline-offset: 2px;
}


/* --- Kop --------------------------------------------------------------- */

.alp-cat .alp-cat-kop {
	background: var(--alp-kop);
	color: rgba(255, 255, 255, .9);
	padding-block: 48px 56px;
}

.alp-cat .alp-cat-kop .alp-cat-in {
	display: grid;
	gap: 20px;
}

.alp-cat .alp-cat-kruimel {
	font-size: 14px;
	color: rgba(255, 255, 255, .55);
}

.alp-cat .alp-cat-kruimel a {
	color: rgba(255, 255, 255, .55);
	text-decoration: none;
}

.alp-cat .alp-cat-kruimel a:hover,
.alp-cat .alp-cat-kruimel a:active {
	color: #FFFFFF;
}

.alp-cat .alp-cat-kruimel [aria-current] {
	color: #FFFFFF;
	font-weight: 500;
}

.alp-cat .alp-cat-kop h1 {
	margin: 0;
	color: #FFFFFF;
	font-family: var(--alp-letter);
	font-size: clamp(30px, 4vw, 40px);
	font-weight: 600;
	line-height: 1.1;
}

.alp-cat .alp-cat-intro {
	display: grid;
	gap: 12px;
	max-width: 790px;
	color: #FFFFFF;
}

.alp-cat .alp-cat-intro a {
	color: #FFFFFF;
}

/* De USP's en de doelgroepen houden hun opmaak uit style.css. Alleen het vinkje
   is hier een SVG, en op de telefoon staan de USP's altijd onder elkaar. */
.alp-cat .alplift-usps {
	padding-top: 4px;
}

.alp-cat .alplift-usps .alplift-usps__icon {
	width: 16px;
	height: 16px;
	display: block;
}

@media (max-width: 560px) {
	.alp-cat .alplift-usps {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
}

/* De tekst van de kop staat in een eigen vak, naast de foto als die er is. */
.alp-cat .alp-cat-koptekst {
	display: grid;
	gap: 20px;
	min-width: 0;
}


/* --- De nieuwe kop (versie 5, Tim 28 oktober) ---------------------------
   Alleen met .is-nieuwe-kop op de pagina, zie alplift_categorie_kop_nieuw():
   het verloop Zacht, 80 ruimte boven en onder elk vlak, een foto per
   categorie (op de computer rechts, hangt 72 onder de kop uit; op de
   telefoon bovenaan over de volle breedte) en Lees meer bij een lange intro. */

.alp-cat.is-nieuwe-kop .alp-cat-kop {
	background: linear-gradient(110deg, #190303 0%, #2B0707 55%, #3A0909 100%);
}

.alp-cat.is-nieuwe-kop .alp-cat-kop,
.alp-cat.is-nieuwe-kop .alp-cat-aanbod,
.alp-cat.is-nieuwe-kop .alp-cat-tekstband,
.alp-cat.is-nieuwe-kop .alp-cat-faq {
	padding-block: 80px;
}

.alp-cat .alp-cat-kopfoto {
	margin: 0;
	overflow: hidden;
	background: #3A3533;
}

.alp-cat .alp-cat-kopfoto img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 58% 72%;
}

/* Een lange intro: op de computer drie regels, op de telefoon vier, dan Lees meer. */
.alp-cat .alp-cat-intro.is-dicht {
	max-height: 4.8em;
	overflow: hidden;
}

.alp-cat .alp-cat-aanbod {
	scroll-margin-top: calc(var(--alp-cat-kop, 0px) + 16px);
}

.alp-cat button.alp-cat-leesmeer,
.alp-cat button.alp-cat-leesmeer:hover,
.alp-cat button.alp-cat-leesmeer:focus,
.alp-cat button.alp-cat-leesmeer:active {
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: -6px 0 0;
	padding: 0;
	border: 0;
	background: none;
	color: #FFFFFF;
	font: 700 15px var(--alp-letter);
	text-decoration: none;
	cursor: pointer;
}

/* Vet met een chevron die omdraait als de tekst open is (Tim, 28 oktober). Wit:
   het rood staat al in de vinkjes; rood is hier één kleur. */
.alp-cat .alp-cat-leesmeer svg {
	width: 16px;
	height: 16px;
	flex: none;
	color: #FFFFFF;
	transition: transform .2s ease;
}

.alp-cat .alp-cat-leesmeer[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

/* Het script verbergt de knop als de intro al past; display hierboven wint anders van hidden. */
.alp-cat button.alp-cat-leesmeer[hidden] {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.alp-cat .alp-cat-leesmeer svg {
		transition: none;
	}
}

/* Vanaf een tablet staat de foto rechts naast de tekst, staand 4:5. Pas vanaf
   1200 hangt hij onder de kop uit: smaller werd de tekst zo lang dat de foto
   laag rechts begon, en op een iPad werd hij heel hoog (Tim, 28 oktober). */
@media (min-width: 601px) {
	.alp-cat .alp-cat-kop.is-met-foto .alp-cat-in {
		grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
		column-gap: clamp(32px, 5vw, 72px);
		align-items: center;
	}

	.alp-cat .alp-cat-kop.is-met-foto .alp-cat-koptekst {
		grid-column: 1;
		grid-row: 1;
	}

	.alp-cat .alp-cat-kop.is-met-foto .alp-cat-kopfoto {
		grid-column: 2;
		grid-row: 1;
		position: relative;
		z-index: 2;
		aspect-ratio: 4 / 5;
	}
}

/* De onderkant 72 onder de kop (80 ruimte + 72). De kaarten beginnen pas 142
   onder de kop, dus er blijft lucht. */
@media (min-width: 1200px) {
	.alp-cat .alp-cat-kop.is-met-foto .alp-cat-kopfoto {
		align-self: end;
		margin-bottom: -152px;
	}

	.alp-cat .alp-cat-kop.is-met-foto ~ .alp-cat-aanbod .alp-cat-balk {
		padding-right: 440px;
	}
}

@media (min-width: 901px) and (max-width: 1199px) {
	.alp-cat .alp-cat-kop.is-met-foto .alp-cat-in {
		grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
	}
}

@media (min-width: 601px) and (max-width: 900px) {
	.alp-cat .alp-cat-kop.is-met-foto .alp-cat-in {
		grid-template-columns: minmax(0, 1fr) minmax(0, 240px);
		column-gap: 32px;
	}
}

@media (max-width: 900px) {
	.alp-cat.is-nieuwe-kop .alp-cat-kop,
	.alp-cat.is-nieuwe-kop .alp-cat-aanbod,
	.alp-cat.is-nieuwe-kop .alp-cat-tekstband,
	.alp-cat.is-nieuwe-kop .alp-cat-faq {
		padding-block: 56px;
	}

	/* Een lange intro: vier regels, dan Lees meer. */
	.alp-cat .alp-cat-intro.is-dicht {
		max-height: 6.4em;
		overflow: hidden;
	}
}

/* Op de telefoon opent de foto de kop, over de volle breedte en 3:2, zodat de
   titel snel in beeld is. */
@media (max-width: 600px) {
	.alp-cat.is-nieuwe-kop .alp-cat-kop.is-met-foto {
		padding-top: 0;
	}

	.alp-cat .alp-cat-kop.is-met-foto .alp-cat-in {
		row-gap: 28px;
	}

	.alp-cat .alp-cat-kopfoto {
		margin-inline: -20px;
		aspect-ratio: 3 / 2;
	}

	.alp-cat .alp-cat-kopfoto img {
		object-position: 55% 70%;
	}
}


/* --- Balk boven de machines --------------------------------------------- */

.alp-cat .alp-cat-aanbod {
	padding-block: 32px 56px;
}

.alp-cat .alp-cat-balk {
	display: flex;
	align-items: center;
	gap: 12px 28px;
	padding-bottom: 18px;
}

.alp-cat .alp-cat-aantal {
	font-weight: 600;
	color: var(--alp-inkt);
	white-space: nowrap;
}

.alp-cat .alp-cat-weergave {
	display: flex;
	gap: 18px;
}

.alp-cat button.alp-cat-wissel,
.alp-cat button.alp-cat-wissel:hover,
.alp-cat button.alp-cat-wissel:focus,
.alp-cat button.alp-cat-wissel:active {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 4px 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--alp-grijs);
	font: 500 15px var(--alp-letter);
	cursor: pointer;
}

.alp-cat button.alp-cat-wissel:hover {
	color: var(--alp-inkt);
}

.alp-cat button.alp-cat-wissel[aria-pressed="true"] {
	color: var(--alp-rood);
}

.alp-cat .alp-cat-wissel svg,
.alp-cat .alp-cat-filterknop svg {
	width: 16px;
	height: 16px;
	flex: none;
}

/* Een dichte rode knop, zoals de filterknop op de oude pagina (Tim, 26 oktober):
   omlijnd viel hij weg. Hij staat vooraan in de balk; rechts stond hij verloren
   als er minder dan zes kaarten zijn (Tim, 28 oktober). */
.alp-cat button.alp-cat-filterknop,
.alp-cat button.alp-cat-filterknop:focus,
.alp-cat button.alp-cat-filterknop:active {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 20px;
	border: 0;
	border-radius: 999px;
	background: var(--alp-rood);
	color: #FFFFFF;
	font: 600 15px var(--alp-letter);
	cursor: pointer;
}

.alp-cat button.alp-cat-filterknop:hover {
	background: var(--alp-rood-donker);
	color: #FFFFFF;
}

.alp-cat .alp-cat-filtertal {
	font-style: normal;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: #FFFFFF;
	color: var(--alp-rood);
	font-size: 12px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
}

@media (max-width: 560px) {
	.alp-cat .alp-cat-balk {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 14px 20px;
	}

	.alp-cat .alp-cat-aantal {
		grid-row: 2;
		grid-column: 1 / -1;
		font-size: 15px;
	}
}

/* Wat er gekozen is, als losse knopjes boven de kaarten. */
.alp-cat .alp-cat-actief {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding-bottom: 16px;
}

.alp-cat .alp-cat-actief[hidden] {
	display: none;
}

.alp-cat .alp-cat-actief button,
.alp-cat .alp-cat-actief button:hover,
.alp-cat .alp-cat-actief button:focus,
.alp-cat .alp-cat-actief button:active {
	margin: 0;
	padding: 6px 13px;
	border: 0;
	border-radius: 999px;
	background: var(--alp-inkt);
	color: #FFFFFF;
	font: 400 14px var(--alp-letter);
	cursor: pointer;
}

.alp-cat .alp-cat-actief button.alp-cat-wis,
.alp-cat .alp-cat-actief button.alp-cat-wis:hover,
.alp-cat .alp-cat-actief button.alp-cat-wis:focus,
.alp-cat .alp-cat-actief button.alp-cat-wis:active {
	background: none;
	color: var(--alp-rood);
	text-decoration: underline;
	padding-inline: 4px;
}


/* --- Kaarten ------------------------------------------------------------ */

.alp-cat .alp-cat-raster {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

@media (min-width: 760px) {
	.alp-cat .alp-cat-raster {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1060px) {
	.alp-cat .alp-cat-raster {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 20px;
	}
}

/* Zes naast elkaar op een breed scherm (Tim, 26 oktober): twaalf machines zijn
   dan twee rijen. Pas vanaf 1280, daaronder wordt de specificatieregel te krap. */
@media (min-width: 1280px) {
	.alp-cat .alp-cat-raster {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

.alp-cat .alp-cat-raster[hidden],
.alp-cat .alp-cat-kaart[hidden] {
	display: none;
}

.alp-cat a.alp-cat-kaart {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto 1fr;
	min-width: 0;
	background: var(--alp-wit);
	color: inherit;
	text-decoration: none;
}

.alp-cat a.alp-cat-kaart:hover,
.alp-cat a.alp-cat-kaart:active {
	color: inherit;
}

.alp-cat .alp-cat-foto {
	aspect-ratio: 4 / 5;
	min-width: 0;
	overflow: hidden;
	background: #E7E7E7;
}

.alp-cat .alp-cat-foto img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* Een liggende foto blijft heel en staat op wit, anders valt de machine weg. */
.alp-cat .alp-cat-foto.is-breed {
	background: var(--alp-wit);
}

.alp-cat .alp-cat-foto.is-breed img {
	object-fit: contain;
}

.alp-cat .alp-cat-label {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1;
	padding: 3px 8px;
	border-radius: 2px;
	background: var(--alp-rood);
	color: #FFFFFF;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
}

.alp-cat .alp-cat-kaart-tekst {
	display: grid;
	align-content: start;
	gap: 10px;
	padding: 18px 18px 20px;
}

.alp-cat .alp-cat-serie {
	color: var(--alp-grijs);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.alp-cat .alp-cat-kaart .alp-cat-kaart-titel {
	margin: 0;
	color: var(--alp-inkt);
	font-family: var(--alp-letter);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	transition: color .15s;
}

.alp-cat a.alp-cat-kaart:hover .alp-cat-kaart-titel {
	color: var(--alp-rood);
}

/* Bij aanwijzen komt de kaart iets omhoog en zoomt de foto licht in (Tim, 26
   oktober). Bewust zonder schaduw. Met het toetsenbord hetzelfde. */
.alp-cat a.alp-cat-kaart {
	transition: transform .25s ease;
}

.alp-cat .alp-cat-foto img {
	transition: transform .45s ease;
}

.alp-cat a.alp-cat-kaart:hover,
.alp-cat a.alp-cat-kaart:focus-visible {
	transform: translateY(-4px);
}

.alp-cat a.alp-cat-kaart:hover .alp-cat-foto img,
.alp-cat a.alp-cat-kaart:focus-visible .alp-cat-foto img {
	transform: scale(1.04);
}

.alp-cat a.alp-cat-kaart:focus-visible .alp-cat-kaart-titel {
	color: var(--alp-rood);
}

.alp-cat .alp-cat-specs {
	display: grid;
	gap: 2px;
	margin: 0;
	font-size: 14px;
}

/* Past de waarde niet naast het label, dan gaat hij in zijn geheel naar de volgende
   regel, rechts: nooit "150" en "kg" los van elkaar. */
.alp-cat .alp-cat-specs div {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0 10px;
}

.alp-cat .alp-cat-specs dt {
	color: var(--alp-grijs);
	font-weight: 400;
}

.alp-cat .alp-cat-specs dd {
	margin: 0 0 0 auto;
	color: var(--alp-inkt);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Twee kaarten naast elkaar op de telefoon: iets minder binnenruimte en een
   kleinere letter, zodat label en waarde op 390 pixels op één regel passen. */
@media (max-width: 559px) {
	.alp-cat .alp-cat-kaart-tekst {
		padding: 14px 14px 16px;
	}

	.alp-cat .alp-cat-specs {
		font-size: 13px;
	}
}

.alp-cat .alp-cat-geen {
	padding: 40px 0;
	color: var(--alp-grijs);
	text-align: center;
}

.alp-cat .alp-cat-geen[hidden] {
	display: none;
}

.alp-cat .alp-cat-geen button.alp-cat-wis,
.alp-cat .alp-cat-geen button.alp-cat-wis:hover,
.alp-cat .alp-cat-geen button.alp-cat-wis:focus,
.alp-cat .alp-cat-geen button.alp-cat-wis:active {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--alp-rood);
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}


/* --- Vergelijk ---------------------------------------------------------- */

/* Een tabel in de tekst (.alp-cat-tabel) krijgt dezelfde opmaak als Vergelijk. */
.alp-cat .alp-cat-vergelijk,
.alp-cat .alp-cat-tabel {
	overflow-x: auto;
	background: var(--alp-wit);
}

.alp-cat .alp-cat-vergelijk[hidden] {
	display: none;
}

.alp-cat .alp-cat-vergelijk table,
.alp-cat .alp-cat-tabel table {
	width: 100%;
	min-width: 560px;
	margin: 0;
	border-collapse: collapse;
	font-size: 15px;
}

.alp-cat .alp-cat-tabel table {
	min-width: 0;
}

/* Vaste kolommen in Vergelijk: de naam 32%, de rest even breed en links uitgelijnd.
   Zonder Serie-kolom (Elektrische montagelift kopen) nam de naam anders alle ruimte
   en stond er een gat tussen de naam en de getallen (Tim, 28 oktober). */
.alp-cat .alp-cat-vergelijk table {
	table-layout: fixed;
}

.alp-cat .alp-cat-vergelijk thead th:first-child {
	width: 32%;
}

.alp-cat .alp-cat-vergelijk th,
.alp-cat .alp-cat-vergelijk td,
.alp-cat .alp-cat-tabel th,
.alp-cat .alp-cat-tabel td {
	padding: 12px 16px;
	border: 0;
	background: transparent;
	line-height: 1.5;
	text-align: left;
	vertical-align: middle;
	font-variant-numeric: tabular-nums;
}

.alp-cat .alp-cat-vergelijk th,
.alp-cat .alp-cat-tabel th {
	padding-block: 15px;
	color: var(--alp-inkt);
	font-size: 14px;
	font-weight: 600;
}

.alp-cat .alp-cat-vergelijk tbody tr:nth-child(odd) td,
.alp-cat .alp-cat-tabel tbody tr:nth-child(odd) td {
	background: var(--alp-rij);
}

.alp-cat .alp-cat-vergelijk .is-getal {
	text-align: left;
}

.alp-cat .alp-cat-vergelijk th button,
.alp-cat .alp-cat-vergelijk th button:hover,
.alp-cat .alp-cat-vergelijk th button:focus,
.alp-cat .alp-cat-vergelijk th button:active {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.alp-cat .alp-cat-vergelijk th button[data-richting]::after {
	content: attr(data-richting);
	color: var(--alp-rood);
}

.alp-cat .alp-cat-vergelijk td a {
	color: var(--alp-inkt);
	font-weight: 500;
	text-decoration: none;
}

.alp-cat .alp-cat-vergelijk td a:hover,
.alp-cat .alp-cat-vergelijk td a:active {
	color: var(--alp-rood);
}

.alp-cat .alp-cat-vergelijk tr[hidden] {
	display: none;
}


/* --- De tekst, met de inhoud ernaast ------------------------------------ */

.alp-cat .alp-cat-tekstband {
	background: var(--alp-wit);
	padding-block: 64px 72px;
}

/* De titel van de inhoud staat op dezelfde lijn als de eerste kop van de tekst. */
.alp-cat .alp-cat-tekstband .alp-cat-in {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 72px;
	align-items: first baseline;
}

.alp-cat .alp-cat-inhoud {
	position: sticky;
	top: calc(var(--alp-cat-kop, 0px) + 24px);
	display: grid;
	font-size: 15px;
}

.alp-cat .alp-cat-inhoud-t {
	padding-bottom: 18px;
	color: var(--alp-inkt);
	font-size: clamp(22px, 2.4vw, 27px);
	font-weight: 600;
	line-height: 1.25;
}

.alp-cat .alp-cat-inhoud a {
	padding: 12px 0;
	border-top: 1px solid var(--alp-lijn);
	color: var(--alp-inkt);
	line-height: 1.4;
	text-decoration: none;
}

.alp-cat .alp-cat-inhoud a:last-child {
	border-bottom: 1px solid var(--alp-lijn);
}

/* Het stuk waar de lezer is: een tint donkerder en dikker, zodat de inhoud meeloopt
   (Tim, 28 oktober). De rest staat iets lichter. Het script zet aria-current. */
.alp-cat .alp-cat-inhoud a:not([aria-current]) {
	color: var(--alp-tekst);
}

.alp-cat .alp-cat-inhoud a[aria-current] {
	font-weight: 600;
}

.alp-cat .alp-cat-inhoud a:hover,
.alp-cat .alp-cat-inhoud a:active {
	color: var(--alp-rood);
}

@media (max-width: 900px) {
	.alp-cat .alp-cat-tekstband .alp-cat-in {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.alp-cat .alp-cat-inhoud {
		position: static;
	}
}

.alp-cat .alp-cat-tekst {
	display: grid;
	gap: 48px;
	max-width: 790px;
	line-height: 1.75;
}

/* Rood op grijze tekst is te weinig verschil om een link alleen aan de kleur te
   herkennen (2,2 tegen de 3 die nodig is), dus een streep eronder. */
.alp-cat .alp-cat-tekst a {
	color: var(--alp-rood);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.alp-cat .alp-cat-tekst a:hover,
.alp-cat .alp-cat-tekst a:active {
	color: var(--alp-rood-donker);
}

.alp-cat .alp-cat-blok {
	display: grid;
	gap: 14px;
	scroll-margin-top: calc(var(--alp-cat-kop, 0px) + 24px);
}

.alp-cat .alp-cat-blok h2 {
	margin: 0;
	color: var(--alp-inkt);
	font-family: var(--alp-letter);
	font-size: clamp(22px, 2.4vw, 27px);
	font-weight: 600;
	line-height: 1.25;
}

.alp-cat .alp-cat-blok h3 {
	margin: 0;
	color: var(--alp-inkt);
	font-family: var(--alp-letter);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.35;
}

.alp-cat .alp-cat-blok ul,
.alp-cat .alp-cat-blok ol {
	margin: 0;
}

/* Tussenkoppen met tekst: twee kolommen. */
.alp-cat .alp-cat-punten {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 26px 36px;
	padding-top: 6px;
}

.alp-cat .alp-cat-punten > div {
	display: grid;
	align-content: start;
	gap: 6px;
	font-size: 15px;
	line-height: 1.7;
}

@media (max-width: 640px) {
	.alp-cat .alp-cat-punten {
		grid-template-columns: 1fr;
	}
}

/* Een gewone lijst: rode stip. */
.alp-cat .alp-cat-lijst {
	display: grid;
	gap: 6px;
	padding: 0;
	list-style: none;
}

.alp-cat .alp-cat-lijst li {
	position: relative;
	padding-left: 22px;
}

.alp-cat .alp-cat-lijst li::before {
	content: "";
	position: absolute;
	top: 11px;
	left: 2px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--alp-rood);
}

/* Punten met een vet begin en regels als "Hefhoogte: 2,80 m": kaartjes. */
.alp-cat .alp-cat-kaartjes {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	padding-block: 4px;
}

@media (max-width: 760px) {
	.alp-cat .alp-cat-kaartjes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.alp-cat .alp-cat-kaartjes > div {
	display: grid;
	align-content: start;
	gap: 8px;
	padding: 16px;
	background: var(--alp-rij);
	font-size: 14px;
	line-height: 1.5;
}

.alp-cat .alp-cat-kaartjes b {
	color: var(--alp-inkt);
	font-size: 16px;
	font-weight: 600;
}

.alp-cat .alp-cat-kaartjes dl {
	display: grid;
	gap: 6px;
	margin: 0;
}

.alp-cat .alp-cat-kaartjes dt {
	color: var(--alp-grijs);
	font-size: 12px;
	font-weight: 400;
}

.alp-cat .alp-cat-kaartjes dd {
	margin: 0;
	color: var(--alp-inkt);
	font-variant-numeric: tabular-nums;
}

/* Punten met een vet begin en een zin: voordelen met een vinkje. */
.alp-cat .alp-cat-voordelen {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px 28px;
	padding: 4px 0 0;
	list-style: none;
}

@media (max-width: 760px) {
	.alp-cat .alp-cat-voordelen {
		grid-template-columns: 1fr;
	}
}

.alp-cat .alp-cat-voordelen li {
	display: grid;
	grid-template-columns: 18px 1fr;
	gap: 4px 10px;
	font-size: 15px;
	line-height: 1.6;
}

.alp-cat .alp-cat-voordelen .alp-cat-vink {
	width: 18px;
	height: 18px;
	margin-top: 3px;
	grid-row: span 2;
}

.alp-cat .alp-cat-voordelen b {
	color: var(--alp-inkt);
	font-weight: 600;
}

/* Punten die met een link beginnen: een keuzelijst met lijntjes. */
.alp-cat .alp-cat-keuze {
	padding: 0;
	list-style: none;
}

.alp-cat .alp-cat-keuze li {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--alp-lijn);
}

.alp-cat .alp-cat-keuze li.is-zin {
	display: block;
}

.alp-cat .alp-cat-keuze li > a:first-child {
	font-weight: 500;
}

.alp-cat .alp-cat-keuze li > span {
	color: var(--alp-grijs);
}


/* --- Vragen en Max ------------------------------------------------------ */

.alp-cat .alp-cat-faq {
	padding-block: 64px 72px;
	scroll-margin-top: calc(var(--alp-cat-kop, 0px) + 24px);
}

.alp-cat .alp-cat-faq .alp-cat-in {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
	gap: 64px;
}

.alp-cat .alp-cat-faq.is-zonder-vragen .alp-cat-in {
	grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 900px) {
	.alp-cat .alp-cat-faq .alp-cat-in {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

.alp-cat .alp-cat-faq-links {
	display: grid;
	align-content: start;
	gap: 14px;
	max-width: 520px;
}

.alp-cat .alp-cat-faq-links h2 {
	margin: 0 0 4px;
	color: var(--alp-inkt);
	font-family: var(--alp-letter);
	font-size: clamp(26px, 3vw, 32px);
	font-weight: 600;
	line-height: 1.2;
}

.alp-cat .alp-cat-faq-links h3 {
	margin: 0;
	color: var(--alp-inkt);
	font-family: var(--alp-letter);
	font-size: 18px;
	font-weight: 600;
}

.alp-cat a.alp-cat-knop,
.alp-cat a.alp-cat-knop:active {
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
	padding: 12px 20px;
	border-radius: 3px;
	background: var(--alp-rood);
	color: #FFFFFF;
	font: 600 15px var(--alp-letter);
	text-decoration: none;
}

.alp-cat a.alp-cat-knop:hover {
	background: var(--alp-rood-donker);
	color: #FFFFFF;
}

/* De vragen zelf: de opmaak van de FAQ op de contactpagina, in de lichte stand.
   Die komt uit alplift-landing.css via .alplift-landing-body; hier alleen de
   ruimte eromheen. */
.alp-cat .alp-cat-vragen {
	min-width: 0;
	background: transparent;
}

/* De regel onder de voorbeeldvragen, alleen voor beheerders. */
.alp-cat .alp-cat-beheer {
	padding: 16px 20px 0;
	color: var(--alp-grijs);
	font-size: 13px;
	line-height: 1.5;
}


/* --- Filterlade --------------------------------------------------------- */

/* Boven de zwarte beheerdersbalk (99999) en de chatknop van Max (10100), anders
   valt de kop van de lade eronder als je ingelogd bent. */
.alp-cat-scherm {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(24, 4, 3, .42);
}

.alp-cat-scherm[hidden],
.alp-cat-lade[hidden] {
	display: none;
}

.alp-cat-lade {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 100001;
	width: min(400px, 100%);
	display: grid;
	grid-template-rows: auto 1fr auto;
	padding-top: env(safe-area-inset-top, 0px);
	padding-bottom: env(safe-area-inset-bottom, 0px);
	background: var(--alp-wit);
	color: var(--alp-tekst);
	font: 400 16px/1.5 var(--alp-letter);
}

.alp-cat-lade .alp-cat-lade-kop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 22px 26px 10px;
}

.alp-cat-lade .alp-cat-lade-kop h2 {
	margin: 0;
	color: var(--alp-inkt);
	font: 600 22px var(--alp-letter);
}

.alp-cat-lade button.alp-cat-sluit,
.alp-cat-lade button.alp-cat-sluit:hover,
.alp-cat-lade button.alp-cat-sluit:focus,
.alp-cat-lade button.alp-cat-sluit:active {
	margin: 0;
	padding: 6px;
	border: 0;
	background: none;
	color: var(--alp-inkt);
	cursor: pointer;
}

.alp-cat-lade .alp-cat-sluit svg {
	display: block;
	width: 20px;
	height: 20px;
}

.alp-cat-lade .alp-cat-lade-body {
	display: grid;
	align-content: start;
	gap: 26px;
	padding: 6px 26px 22px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.alp-cat-lade fieldset {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.alp-cat-lade legend {
	padding: 0 0 8px;
	color: var(--alp-inkt);
	font-size: 16px;
	font-weight: 600;
}

.alp-cat-lade .alp-cat-optie {
	display: grid;
	grid-template-columns: 22px 1fr auto;
	align-items: center;
	gap: 12px;
	padding: 7px 0;
	color: var(--alp-inkt);
	font-size: 16px;
	line-height: 1.4;
	vertical-align: baseline;
	cursor: pointer;
}

.alp-cat-lade .alp-cat-optie input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--alp-rood);
}

.alp-cat-lade .alp-cat-optie small {
	color: var(--alp-grijs);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

.alp-cat-lade .alp-cat-optie.is-leeg {
	color: #B3ACAB;
}

.alp-cat-lade .alp-cat-lade-links {
	display: grid;
}

.alp-cat-lade .alp-cat-lade-links h3 {
	margin: 0 0 4px;
	color: var(--alp-inkt);
	font: 600 16px var(--alp-letter);
}

.alp-cat-lade .alp-cat-lade-links a {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--alp-lijn);
	color: var(--alp-inkt);
	font-size: 15px;
	text-decoration: none;
}

.alp-cat-lade .alp-cat-lade-links a:hover,
.alp-cat-lade .alp-cat-lade-links a:active {
	color: var(--alp-rood);
}

.alp-cat-lade .alp-cat-lade-links span {
	color: var(--alp-grijs);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.alp-cat-lade .alp-cat-lade-links i {
	margin-left: 6px;
	color: var(--alp-rood);
	font-style: normal;
}

.alp-cat-lade .alp-cat-lade-voet {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 26px 20px;
	background: var(--alp-rij);
}

.alp-cat-lade button.alp-cat-wis,
.alp-cat-lade button.alp-cat-wis:hover,
.alp-cat-lade button.alp-cat-wis:focus,
.alp-cat-lade button.alp-cat-wis:active {
	margin: 0;
	padding: 8px 0;
	border: 0;
	background: none;
	color: var(--alp-inkt);
	font: 600 15px var(--alp-letter);
	cursor: pointer;
}

.alp-cat-lade button.alp-cat-toon,
.alp-cat-lade button.alp-cat-toon:focus,
.alp-cat-lade button.alp-cat-toon:active {
	margin: 0;
	padding: 12px 20px;
	border: 0;
	border-radius: 3px;
	background: var(--alp-rood);
	color: #FFFFFF;
	font: 600 15px var(--alp-letter);
	cursor: pointer;
}

.alp-cat-lade button.alp-cat-toon:hover {
	background: var(--alp-rood-donker);
	color: #FFFFFF;
}

html.alp-cat-lade-open {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.alp-cat a.alp-cat-kaart,
	.alp-cat .alp-cat-foto img,
	.alp-cat .alp-cat-kaart .alp-cat-kaart-titel {
		transition: none;
	}

	.alp-cat a.alp-cat-kaart:hover,
	.alp-cat a.alp-cat-kaart:focus-visible,
	.alp-cat a.alp-cat-kaart:hover .alp-cat-foto img,
	.alp-cat a.alp-cat-kaart:focus-visible .alp-cat-foto img {
		transform: none;
	}
}