/*
Theme Name: Quick Hijswerk
Description: Thema voor de verhuursite van Quick Hijswerk. Minihijskranen, specs en offerteaanvraag.
Version: 1.2.2
Author: Quick Hijswerk
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: quickhijswerken
*/

/* ---------------------------------------------------------
   1. Tokens. Huisstijl aanpassen doe je HIER en nergens anders.
   --------------------------------------------------------- */
:root {
	/* Huisstijl Quick Hijswerk, overgenomen van het logo */
	--oranje:      #ea7600;   /* exact uit het logo gemeten */
	--oranje-licht:#ff8f1f;   /* de lichte oranje laag in het beeldmerk */
	--staal:       #8b9da6;   /* het grijsblauw van het woordmerk */
	--grijs:       #d8d8d8;   /* het lichtgrijze vlak achter de tekst */

	--ink:        #1e252c;
	--ink-soft:   #6b7885;
	--paper:      #ffffff;
	--muted:      #f2f4f6;
	--line:       #dce0e4;
	--accent:     var(--oranje);
	--accent-ink: #ffffff;
	--groen:      #1f7a4d;

	--kop: "Barlow Condensed", "Arial Narrow", sans-serif;
	--tekst: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	--breedte: 1180px;
	--gat: clamp(1rem, 2.5vw, 2rem);
	--rond: 4px;
}

/* ---------------------------------------------------------
   2. Basis
   --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
body {
	margin: 0;
	font-family: var(--tekst);
	font-size: 17px;
	line-height: 1.6;
	color: var(--ink);
	background: var(--paper);
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3, .kop {
	font-family: var(--kop);
	text-transform: uppercase;
	letter-spacing: 0.01em;
	line-height: 1.05;
	margin: 0 0 .5em;
	font-weight: 700;
}
h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
h3 { font-size: 1.4rem; }

.wrap { width: min(100% - 2.5rem, var(--breedte)); margin-inline: auto; }
.sectie { padding: clamp(3rem, 7vw, 5.5rem) 0; }
/* geen losse marge boven of onder in een sectie, anders klopt de witruimte niet meer met de padding */
.sectie > .wrap > :first-child { margin-top: 0; }
.sectie > .wrap > :last-child { margin-bottom: 0; }
.sectie--muted { background: var(--muted); }
.sectie--donker { background: var(--ink); color: #fff; }

.knop {
	display: inline-block;
	padding: .85rem 1.6rem;
	background: var(--accent);
	color: var(--accent-ink);
	text-decoration: none;
	font-weight: 600;
	border-radius: var(--rond);
	border: 2px solid var(--accent);
	transition: filter .15s ease;
	cursor: pointer;
}
.knop:hover { filter: brightness(.92); }
.knop--leeg { background: transparent; color: inherit; border-color: currentColor; }

/* ---------------------------------------------------------
   3. Header
   --------------------------------------------------------- */
/* De donkere balk boven de kop: wat we doen, plus bellen en mailen binnen bereik.
   Hij plakt niet mee naar beneden, alleen de witte kopbalk eronder doet dat. */
.utilbalk { background: var(--ink); color: #c2ccd4; font-size: .85rem; }
.utilbalk .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 40px; }
.utilbalk .claim { margin: 0; }
.utilbalk .stip { color: var(--oranje-licht); padding: 0 .25rem; }
.utilbalk .contact { display: flex; align-items: center; gap: 1.5rem; }
.utilbalk a { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap;
	text-decoration: none; color: #e2e8ed; transition: color .15s ease; }
.utilbalk a:hover, .utilbalk a:focus-visible { color: var(--oranje-licht); }
.utilbalk svg { width: 15px; height: 15px; flex: none; color: var(--oranje-licht); }

.site-header {
	border-bottom: 1px solid var(--line);
	background: var(--paper);
	position: sticky; top: 0; z-index: 20;
}
.site-header .wrap {
	display: flex; align-items: center; gap: 2rem;
	min-height: 76px;
}
.site-logo { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; }
.site-logo img { max-height: 44px; width: auto; }
.custom-logo-link { display: inline-flex; align-items: center; }
.custom-logo-link img { max-height: 44px; width: auto; }
.site-logo .woordmerk { font-family: var(--tekst); font-weight: 700; font-size: 1.45rem; letter-spacing: -.01em; color: var(--staal); }
.site-logo .woordmerk i { font-style: normal; color: var(--oranje); }
.site-logo .woordmerk span { display: inline-block; }
.site-nav { margin-left: auto; }
/* De ruimte tussen de items krimpt mee, zodat de rij het tot aan de breekgrens
   van 960 px op een regel volhoudt. Daaronder neemt het uitklapmenu het over. */
.site-nav ul { display: flex; gap: clamp(.85rem, 1.9vw, 1.6rem); list-style: none; margin: 0; padding: 0; flex-wrap: nowrap; }
.site-nav a { text-decoration: none; font-weight: 500; font-size: .97rem; white-space: nowrap; }
.site-nav a:hover { color: var(--accent); }
.site-nav .current-menu-item > a { box-shadow: inset 0 -2px 0 var(--accent); }

/* De knop staat er altijd, maar is boven de breekgrens verborgen. */
.menu-knop {
	display: none; margin-left: auto; align-items: center; gap: .55rem;
	font: inherit; font-weight: 600; font-size: .95rem; cursor: pointer;
	padding: .55rem .9rem; background: #fff; color: var(--ink);
	border: 1px solid var(--line); border-radius: var(--rond);
}
.menu-knop:hover { border-color: var(--staal); }
.menu-knop:focus-visible { outline: 2px solid var(--oranje); outline-offset: 2px; }
.menu-strepen { display: inline-flex; flex-direction: column; justify-content: space-between; width: 18px; height: 12px; }
.menu-strepen span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .18s ease, opacity .18s ease; }
/* Open: de bovenste en onderste streep vormen een kruis, de middelste valt weg. */
.menu-knop[aria-expanded="true"] .menu-strepen span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.menu-knop[aria-expanded="true"] .menu-strepen span:nth-child(2) { opacity: 0; }
.menu-knop[aria-expanded="true"] .menu-strepen span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* Onder de 960 px passen de zes items niet meer op een regel. Het menu gaat dan
   achter de knop en klapt uit als paneel onder de balk. De grens staat ook in
   js/menu.js, verander hem op allebei de plekken.

   Alles hangt aan .has-js, die de javascript zelf zet. Laadt die niet, dan blijft
   het menu gewoon staan zoals het was: over twee regels, maar wel bruikbaar. */
/* Op smalle schermen valt eerst de claim weg en daarna het mailadres, zodat het
   telefoonnummer altijd binnen bereik blijft. Bellen is hier de snelste weg. */
@media (max-width: 860px) {
	.utilbalk .claim { display: none; }
	.utilbalk .wrap { justify-content: center; gap: 1.8rem; }
}
@media (max-width: 480px) {
	.utilbalk .mail { display: none; }
}

@media (max-width: 960px) {
	.menu-knop { display: inline-flex; }

	.site-header.has-js .site-nav {
		position: absolute; left: 0; right: 0; top: 100%;
		background: var(--paper); border-bottom: 1px solid var(--line);
		box-shadow: 0 10px 24px rgba(30, 37, 44, .10);
		max-height: calc(100vh - 76px); overflow-y: auto;
	}
	.site-header.has-js .site-nav[data-open="nee"] { display: none; }
	.site-header.has-js .site-nav ul { flex-direction: column; gap: 0; padding: .4rem 0 .8rem; }
	.site-header.has-js .site-nav li { border-top: 1px solid var(--line); }
	.site-header.has-js .site-nav li:first-child { border-top: 0; }
	/* 1,25rem is dezelfde inspringing als .wrap gebruikt, zodat de items links
	   uitlijnen met het logo erboven. */
	.site-header.has-js .site-nav a {
		display: block; padding: .95rem 1.25rem; font-size: 1.05rem;
	}
	.site-header.has-js .site-nav .current-menu-item > a {
		box-shadow: inset 3px 0 0 var(--accent); background: var(--muted);
	}
}

@media (prefers-reduced-motion: reduce) {
	.menu-strepen span { transition: none; }
}

/* ---------------------------------------------------------
   4. Hero
   --------------------------------------------------------- */
.hero { position: relative; isolation: isolate; overflow: hidden;
	background: var(--ink); color: #fff; padding: clamp(3.5rem, 9vw, 7rem) 0; }
.hero > .wrap { position: relative; z-index: 2; max-width: min(100% - 2.5rem, var(--breedte)); }
.hero h1, .hero p.lead, .hero .knoppen, .hero-cijfers { max-width: 34rem; }

/* De foto staat rechts en loopt met een verloop over in het donkere vlak,
   zodat de tekst links altijd leesbaar blijft. */
.hero-foto { position: absolute; inset: 0 0 0 auto; width: 50%; margin: 0; z-index: 1; }
.hero-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; display: block; }
/* De foto op het machineoverzicht staat anders in beeld dan die op de homepagina:
   daar hoort de kraan hoger te zitten, anders valt de bovenkant weg. */
.post-type-archive-machine .hero-foto img { object-position: 50% 45%; }
.hero-foto::after { content: ""; position: absolute; inset: 0;
	background: linear-gradient(to right, #1e252c 0%, rgba(30,37,44,.96) 18%, rgba(30,37,44,.55) 48%, rgba(30,37,44,.12) 100%); }
.hero p.lead { font-size: 1.2rem; max-width: 46ch; color: #cbd3da; }
.hero .knoppen { display: flex; gap: .9rem; flex-wrap: wrap; margin-top: 2rem; }
.hero-cijfers { display: flex; gap: 2.5rem; flex-wrap: wrap; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid #2e363e; }
.hero-cijfers div span { display: block; font-family: var(--kop); font-size: 2.4rem; color: var(--oranje-licht); line-height: 1; }
.hero-cijfers div small { color: #98a4ae; font-size: .9rem; }

/* ---------------------------------------------------------
   5. Machinekaarten
   --------------------------------------------------------- */
.machine-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--gat);
}
.machine-kaart {
	position: relative;
	border: 1px solid var(--line);
	border-radius: var(--rond);
	background: var(--paper);
	display: flex; flex-direction: column;
	overflow: hidden;
	transition: border-color .15s ease, transform .15s ease;
}
.machine-kaart:hover { border-color: var(--accent); transform: translateY(-2px); }
.machine-kaart .beeld { aspect-ratio: 4 / 3; background: var(--muted); display: grid; place-items: center; padding: 1rem; }
.machine-kaart .beeld img { max-height: 100%; width: auto; object-fit: contain; transition: transform .15s ease; }
.machine-kaart:hover .beeld img { transform: scale(1.03); }
.machine-kaart .body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.machine-kaart h3 { margin-bottom: .2rem; }
.machine-kaart h3 a { text-decoration: none; }
/* hele kaart klikbaar: de titellink wordt over de kaart heen gelegd */
.machine-kaart h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.machine-kaart:hover h3 a { color: var(--accent); }
.machine-kaart .omschrijving { color: var(--ink-soft); font-size: .95rem; margin: 0 0 1rem; }
.machine-kaart .kerncijfers { display: flex; gap: 1.2rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line); }
.machine-kaart .kerncijfers b { display: block; font-family: var(--kop); font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.machine-kaart .kerncijfers small { color: var(--ink-soft); font-size: .8rem; }

/* ---------------------------------------------------------
   6. Filterbalk
   --------------------------------------------------------- */
.filterbalk {
	display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: flex-end;
	padding: 1.2rem; background: var(--muted); border-radius: var(--rond); margin-bottom: 2rem;
}
.filterbalk label { display: block; font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); margin-bottom: .3rem; }
.filterbalk select {
	font: inherit; font-size: .95rem; padding: .5rem .7rem;
	border: 1px solid var(--line); border-radius: var(--rond); background: #fff; min-width: 170px;
}
.filterbalk .resultaat { margin-left: auto; color: var(--ink-soft); font-size: .9rem; }

/* ---------------------------------------------------------
   7. Machinepagina
   --------------------------------------------------------- */
.machine-top { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 860px) { .machine-top { grid-template-columns: 1fr; } }
.machine-top .beeld { background: var(--muted); border-radius: var(--rond); padding: 2rem; display: grid; place-items: center; }
.kruimels { font-size: .88rem; color: var(--ink-soft); margin-bottom: 1rem; }
.kruimels a { text-decoration: none; }

.cijferblok { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--rond); overflow: hidden; margin: 1.5rem 0; }
.cijferblok div { background: #fff; padding: 1rem 1.1rem; }
.cijferblok b { display: block; font-family: var(--kop); font-size: 1.8rem; line-height: 1; font-variant-numeric: tabular-nums; }
.cijferblok small { color: var(--ink-soft); font-size: .82rem; }

.spec-tabel { width: 100%; border-collapse: collapse; margin: 1rem 0 2rem; }
.spec-tabel th, .spec-tabel td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--line); font-size: .95rem; vertical-align: top; }
.spec-tabel th { width: 42%; font-weight: 600; color: var(--ink-soft); }
.spec-tabel td { font-variant-numeric: tabular-nums; }
.spec-tabel tr:nth-child(odd) td, .spec-tabel tr:nth-child(odd) th { background: #fafbfc; }

.downloads { display: flex; gap: .8rem; flex-wrap: wrap; margin: 1.5rem 0; }
.downloads a {
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .7rem 1.1rem; border: 1px solid var(--line); border-radius: var(--rond);
	text-decoration: none; font-size: .93rem; font-weight: 500; background: #fff;
}
.downloads a:hover { border-color: var(--accent); color: var(--accent); }

/* ---------------------------------------------------------
   8. Footer
   --------------------------------------------------------- */
.site-footer { background: var(--ink); color: #c2ccd4; padding: 4rem 0 2rem; border-top: 1px solid #2e363e; font-size: 1rem; }
.site-footer a { color: #e2e8ed; text-decoration-color: #55616b; text-underline-offset: 3px;
	transition: color .15s ease, text-decoration-color .15s ease; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--oranje-licht); text-decoration-color: currentColor; }
.site-footer .kolommen { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2.5rem 2rem; }
/* koppen in het lichte oranje, hetzelfde accent als de cijfers in de hero */
.site-footer h3 { color: var(--oranje-licht); font-size: 1.2rem; letter-spacing: .05em; margin-bottom: .7em; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .55rem; }
.site-footer .onderkant { border-top: 1px solid #2e363e; margin-top: 3rem; padding-top: 1.5rem;
	font-size: .88rem; color: #97a3ad; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* ---------------------------------------------------------
   9. Inhoud van gewone pagina's
   --------------------------------------------------------- */
.pagina-inhoud { max-width: 68ch; }
.pagina-inhoud h2 { margin-top: 2.5rem; }
.pagina-inhoud ul, .pagina-inhoud ol { padding-left: 1.2rem; }
.is-verborgen { display: none !important; }

/* ---------------------------------------------------------
   10. Offerteformulier in stappen
   --------------------------------------------------------- */
.offerte { max-width: 760px; }
.offerte-balk { height: 6px; background: var(--line); border-radius: 99px; overflow: hidden; }
.offerte-balk-vulling { height: 100%; width: 11%; background: var(--oranje); transition: width .3s ease; }
.offerte-teller { margin: .7rem 0 2rem; font-size: .85rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }

.offerte .stap { display: none; border: 0; padding: 0; margin: 0; }
.offerte .stap.is-actief { display: block; animation: qhw-in .25s ease; }
@keyframes qhw-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.offerte legend { font-family: var(--kop); text-transform: uppercase; font-size: clamp(1.6rem, 3.5vw, 2.2rem); line-height: 1.1; padding: 0; margin-bottom: .4rem; }
.stap-hulp { color: var(--ink-soft); font-size: .95rem; margin: 0 0 1.5rem; }

.keuzes { display: grid; gap: .7rem; }
.keuze { position: relative; display: block; cursor: pointer; }
.keuze input { position: absolute; opacity: 0; pointer-events: none; }
.keuze > span {
	display: block; padding: 1rem 1.2rem;
	border: 2px solid var(--line); border-radius: var(--rond);
	background: #fff; font-weight: 500; transition: border-color .15s ease, background .15s ease;
}
.keuze > span small { display: block; font-weight: 400; color: var(--ink-soft); font-size: .87rem; margin-top: .15rem; }
.keuze:hover > span { border-color: var(--staal); }
.keuze input:checked + span { border-color: var(--oranje); background: #fff8f1; }
.keuze input:focus-visible + span { outline: 2px solid var(--oranje); outline-offset: 2px; }

.keuzes--machines { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.keuze--machine > span { display: flex; flex-direction: column; gap: .35rem; height: 100%; }
.keuze--machine img { width: 100%; height: 110px; object-fit: contain; background: var(--muted); border-radius: 2px; padding: .4rem; }
.keuze--machine b { font-family: var(--kop); text-transform: uppercase; font-size: 1.2rem; }

.velden { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.2rem; }
@media (max-width: 620px) { .velden { grid-template-columns: 1fr; } }
.velden p { margin: 0; }
.velden .veld--breed { grid-column: 1 / -1; }
.velden label { display: block; font-size: .85rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); margin-bottom: .35rem; }
.velden input, .velden select, .velden textarea {
	font: inherit; width: 100%; padding: .75rem .9rem;
	border: 2px solid var(--line); border-radius: var(--rond); background: #fff;
}
.velden input:focus, .velden select:focus, .velden textarea:focus { outline: none; border-color: var(--oranje); }
.verplicht { color: var(--oranje); }

.melding { padding: .9rem 1.1rem; border-radius: var(--rond); font-size: .93rem; margin-top: 1.2rem; }
.melding--buiten { background: #fff4e8; border-left: 3px solid var(--oranje); }

.offerte-knoppen { display: flex; gap: .8rem; margin-top: 2rem; }
.offerte-fout { color: #b3261e; font-size: .93rem; margin-top: .9rem; }

.samenvatting { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.samenvatting h3 { font-size: 1.1rem; }
.samenvatting dl { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.2rem; margin: 0; font-size: .93rem; }
.samenvatting dt { color: var(--ink-soft); }
.samenvatting dd { margin: 0; font-weight: 500; }

.offerte-klaar { padding: 2rem; background: var(--muted); border-radius: var(--rond); max-width: 640px; }

/* ---------------------------------------------------------
   11. Rekenstappen: maten, uitkomst, snelkeuze
   --------------------------------------------------------- */
.keuzes--twee { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.velden--kort { grid-template-columns: minmax(0, 280px); }
.veld-hulp { display: block; color: var(--ink-soft); font-size: .82rem; margin-top: .3rem; }

.met-eenheid { position: relative; display: block; }
.met-eenheid input { padding-right: 4.2rem; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.met-eenheid em {
	position: absolute; right: .9rem; top: 50%; transform: translateY(-50%);
	font-style: normal; color: var(--ink-soft); font-size: .9rem; pointer-events: none;
}

.snelkeuze { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.snelkeuze button {
	font: inherit; font-size: .88rem; cursor: pointer;
	padding: .45rem .85rem; border: 1px solid var(--line); border-radius: 99px;
	background: #fff; color: var(--ink-soft);
}
.snelkeuze button:hover { border-color: var(--staal); color: var(--ink); }
.snelkeuze button.is-aan { border-color: var(--oranje); background: #fff8f1; color: var(--ink); font-weight: 600; }

.knoppenrij { display: flex; flex-wrap: wrap; gap: .5rem; }
.knoppenrij .mini { cursor: pointer; }
.knoppenrij .mini input { position: absolute; opacity: 0; }
.knoppenrij .mini span {
	display: inline-block; padding: .5rem .9rem; font-size: .9rem;
	border: 2px solid var(--line); border-radius: var(--rond); background: #fff;
}
.knoppenrij .mini input:checked + span { border-color: var(--oranje); background: #fff8f1; font-weight: 600; }

.uitkomst { border: 1px solid var(--line); border-radius: var(--rond); padding: 1.4rem 1.5rem; background: #fff; }
.uitkomst--gewicht { margin-top: 1.8rem; text-align: center; background: var(--muted); border: 0; }
.uitkomst-cijfer { display: block; font-family: var(--kop); font-size: clamp(2.8rem, 8vw, 4rem); line-height: 1; color: var(--oranje); font-variant-numeric: tabular-nums; }
.uitkomst-label { display: block; font-size: .9rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .05em; }
.uitkomst-hulp { color: var(--ink-soft); font-size: .87rem; margin: .8rem 0 0; }

.uitkomst--advies { display: flex; gap: 1.5rem; align-items: flex-start; border-left: 4px solid var(--oranje); }
@media (max-width: 620px) { .uitkomst--advies { flex-direction: column; } }
.uitkomst--advies img { width: 180px; flex: none; background: var(--muted); border-radius: 2px; padding: .5rem; }
.uitkomst--advies h3 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin: .1rem 0 .8rem; }
.uitkomst--advies .uitkomst-label { margin-bottom: 0; }
.uitkomst--advies a { font-weight: 600; color: var(--oranje); }
.waarom { list-style: none; padding: 0; margin: 0 0 1rem; }
.waarom li { padding-left: 1.4rem; position: relative; margin-bottom: .3rem; font-size: .95rem; }
.waarom li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; background: var(--oranje); border-radius: 50%; }

.uitkomst--leeg { border-left: 4px solid var(--staal); background: var(--muted); }
.uitkomst--leeg h3 { margin-bottom: .5rem; }

.uitkomst-alternatief { margin-top: 1.2rem; padding: 1.1rem 1.3rem; background: var(--muted); border-radius: var(--rond); }
.uitkomst-alternatief h4 { margin: 0 0 .5rem; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); font-family: var(--tekst); }
.uitkomst-alternatief ul { list-style: none; padding: 0; margin: 0; }
.uitkomst-alternatief li { margin-bottom: .3rem; font-size: .95rem; }
.uitkomst-alternatief a { font-weight: 600; }
.uitkomst-alternatief small { color: var(--ink-soft); }

/* Eigen gewicht invullen, apart gezet van de maatvelden */
.veld--eigen-gewicht { margin-top: .8rem !important; padding-top: 1.2rem; border-top: 1px dashed var(--line); }
.veld--eigen-gewicht .met-eenheid { max-width: 280px; }
.veld--eigen-gewicht input::placeholder { color: var(--ink-soft); }

/* Verbergen moet altijd winnen van .knop { display: inline-block } */
[hidden] { display: none !important; }

.snelkeuze button { display: inline-flex; align-items: baseline; gap: .4rem; font-variant-numeric: tabular-nums; }
.snelkeuze button b, .snelkeuze button small { font-size: .82rem; opacity: .75; font-weight: 400; }

/* ---------------------------------------------------------
   12. Uitgevoerd werk
   --------------------------------------------------------- */
.werk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--gat); margin: 2rem 0 0; }
.werk-kaart { margin: 0; border: 1px solid var(--line); border-radius: var(--rond); overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.werk-kaart img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; background: var(--muted); }
.werk-kaart figcaption { padding: 1.1rem 1.3rem 1.4rem; }
.werk-plaats { display: block; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--oranje); margin-bottom: .35rem; }
.werk-kaart h3 { font-size: 1.25rem; margin-bottom: .4rem; }
.werk-kaart p { margin: 0; color: var(--ink-soft); font-size: .95rem; }

/* Alleen zichtbaar voor de beheerder: iets moet nog ingevuld worden. */
.qhw-let-op { padding: .8rem 1rem; border-left: 4px solid var(--oranje); background: #fff6ec; font-size: .95rem; }

/* Onder de 900px past er geen kolom naast de tekst. De foto gaat dan over de
   hele breedte achter de tekst, met een zwaardere sluier eroverheen. */
@media (max-width: 900px) {
	.hero-foto { width: 100%; }
	.hero-foto img { object-position: 50% 35%; }
	.hero-foto::after { background: linear-gradient(to bottom, rgba(30,37,44,.93) 0%, rgba(30,37,44,.82) 55%, rgba(30,37,44,.9) 100%); }
	.hero h1, .hero p.lead, .hero .knoppen, .hero-cijfers { max-width: none; }
}

/* ---------------------------------------------------------
   13. Machinepagina: verhaal en praktijkblokken
   --------------------------------------------------------- */
.machine-verhaal { max-width: 68ch; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.machine-verhaal h2 { margin-bottom: .8rem; }
/* Dit is de hoofdtekst van de pagina, dus in gewone inktkleur en iets groter
   dan de bijschriften die verder op de pagina dezelfde klasse dragen. */
.machine-verhaal .inleiding { color: var(--ink); font-size: 1.05rem; margin-bottom: 1.5rem; }

/* Losse inleidende alinea boven een lijst of tabel. */
.inleiding { color: var(--ink-soft); margin: 0 0 1.2rem; }

/* Kleine toelichting onder een tabel: bron, voorbehoud, marge. */
.fijndruk { color: var(--ink-soft); font-size: .9rem; margin-top: 1rem; max-width: 60ch; }

/* Links de hijstabel, rechts wat er op de plek zelf moet kloppen. */
.machine-praktijk { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 860px) { .machine-praktijk { grid-template-columns: 1fr; } }
.machine-praktijk h2 { margin-bottom: .8rem; }
.machine-praktijk h3 { margin: 2rem 0 .8rem; font-size: 1.15rem; }
.machine-praktijk .spec-tabel { background: #fff; border-radius: var(--rond); overflow: hidden; }
.machine-praktijk .spec-tabel tr:last-child th, .machine-praktijk .spec-tabel td:last-child { border-bottom: 0; }
.machine-praktijk .knop { margin-top: .5rem; }

/* De hijstabel: twee smalle kolommen, cijfers rechts uitgelijnd zodat ze onder elkaar lopen. */
.spec-tabel thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; background: var(--muted); color: var(--ink-soft); }
.spec-tabel--curve th { width: 50%; color: var(--ink); font-variant-numeric: tabular-nums; }
.spec-tabel--curve tbody td { font-weight: 600; }