/* =========================================================================
   Aymé — hoofdstijl
   1. Lettertypen
   2. Ontwerpwaarden (kleuren, maten, schaduwen)
   3. Basis
   4. Bouwstenen (knoppen, labels, kaarten)
   5. Header en menu
   6. Secties
   7. Projecten
   8. Offerteformulier
   9. Footer
  10. Beheer en toegankelijkheid
   ====================================================================== */

/* -------------------------------------------------------------------------
   1. Lettertypen — zelf gehost, geen externe verzoeken
   ---------------------------------------------------------------------- */

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/inter-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
		U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/inter-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
		U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
		U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Instrument Serif';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/instrumentserif-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
		U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Instrument Serif';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/instrumentserif-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
		U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
		U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Instrument Serif';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/instrumentserif-italic-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
		U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Instrument Serif';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/instrumentserif-italic-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
		U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
		U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* -------------------------------------------------------------------------
   2. Ontwerpwaarden
   ---------------------------------------------------------------------- */

:root {
	/* Hoogte van de WordPress-adminbalk. Nul voor bezoekers; hieronder wordt
	   hij gezet zodra je als beheerder bent ingelogd. */
	--ay-adminbar: 0px;

	/* Kleur */
	--ay-papier: #fbf8f4;
	--ay-papier-2: #f5efe7;
	--ay-zand: #efe7dc;
	--ay-inkt: #16181d;
	--ay-inkt-zacht: #3a404b;
	--ay-grijs: #6a7080;
	--ay-lijn: #e6dfd5;
	--ay-lijn-sterk: #d6ccbf;
	--ay-wit: #ffffff;
	--ay-diep: #101216;
	--ay-diep-2: #191c22;

	--ay-accent: #e2603a;
	--ay-accent-diep: #c04a28;
	--ay-accent-zacht: #fbeae2;
	--ay-groen: #2f9e6b;

	/* Typografie */
	--ay-serif: 'Instrument Serif', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
	--ay-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	--ay-t-mega: clamp(2.8rem, 1.4rem + 5.6vw, 5.6rem);
	--ay-t-h1: clamp(2.4rem, 1.5rem + 3.6vw, 4.2rem);
	--ay-t-h2: clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
	--ay-t-h3: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
	--ay-t-groot: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
	--ay-t-basis: 1rem;
	--ay-t-klein: 0.875rem;
	--ay-t-mini: 0.78rem;

	/* Ruimte */
	--ay-omhulsel: 1180px;
	--ay-omhulsel-smal: 760px;
	--ay-marge: clamp(1.25rem, 5vw, 2.75rem);
	/* Iets krapper dan --ay-marge: een sectie op een laptopvenster hoeft
	   niet zo veel inhoudsbreedte in te leveren. */
	--ay-marge-sectie: clamp(1.25rem, 4vw, 2rem);
	--ay-sectie: clamp(4rem, 8vw, 7.5rem);
	--ay-gat: clamp(1.25rem, 2.5vw, 2rem);

	/* Vorm */
	--ay-r-s: 10px;
	--ay-r: 16px;
	--ay-r-l: 24px;
	--ay-r-xl: 32px;
	--ay-r-rond: 999px;

	--ay-schaduw-s: 0 1px 2px rgba(22, 24, 29, 0.05), 0 2px 8px rgba(22, 24, 29, 0.04);
	--ay-schaduw: 0 2px 4px rgba(22, 24, 29, 0.04), 0 12px 32px rgba(22, 24, 29, 0.07);
	--ay-schaduw-l: 0 4px 8px rgba(22, 24, 29, 0.05), 0 24px 60px rgba(22, 24, 29, 0.11);

	--ay-vlot: 220ms cubic-bezier(0.2, 0.7, 0.3, 1);
	--ay-header-h: 76px;
}

/* -------------------------------------------------------------------------
   3. Basis
   ---------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--ay-header-h) + var(--ay-adminbar) + 20px);
}

body {
	margin: 0;
	background: var(--ay-papier);
	color: var(--ay-inkt-zacht);
	font-family: var(--ay-sans);
	font-size: var(--ay-t-basis);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.5em;
	color: var(--ay-inkt);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

h1, h2 {
	font-family: var(--ay-serif);
	font-weight: 400;
	letter-spacing: -0.005em;
}

h1 em, h2 em {
	font-style: italic;
	color: var(--ay-accent);
}

p {
	margin: 0 0 1.1em;
	text-wrap: pretty;
}

p:last-child {
	margin-bottom: 0;
}

a {
	color: var(--ay-accent-diep);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color var(--ay-vlot);
}

a:hover {
	color: var(--ay-accent);
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

ul, ol {
	padding-left: 1.2em;
}

strong {
	color: var(--ay-inkt);
	font-weight: 600;
}

:focus-visible {
	outline: 2px solid var(--ay-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

::selection {
	background: var(--ay-accent);
	color: #fff;
}

.ayme-icon {
	font-size: 1.25em;
	width: 1em;
	height: 1em;
	flex: none;
}

.ayme-main {
	display: block;
	/* Houdt de footer onderaan bij korte pagina's. Wel afgetopt: op een heel
	   hoog venster zou 40vh anders een gat van honderden pixels opleveren. */
	min-height: min(40vh, 480px);
}

.ayme-omhulsel {
	width: min(100% - (var(--ay-marge) * 2), var(--ay-omhulsel));
	margin-inline: auto;
}

.ayme-omhulsel--smal {
	max-width: var(--ay-omhulsel-smal);
}

.ayme-sectie {
	padding-block: clamp(2.5rem, 5vw, 4rem);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.ayme-skip {
	position: absolute;
	top: -100px;
	left: 12px;
	z-index: 200;
	padding: 12px 18px;
	background: var(--ay-inkt);
	color: #fff;
	border-radius: var(--ay-r-s);
	text-decoration: none;
	transition: top var(--ay-vlot);
}

.ayme-skip:focus {
	top: 12px;
	color: #fff;
}

/* -------------------------------------------------------------------------
   4. Bouwstenen
   ---------------------------------------------------------------------- */

.ayme-label {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	margin: 0 0 1rem;
	color: var(--ay-accent-diep);
	font-size: var(--ay-t-mini);
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.ayme-label::before {
	content: '';
	width: 22px;
	height: 1px;
	background: currentColor;
	opacity: 0.55;
}

.ayme-knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55em;
	padding: 0.85em 1.5em;
	border: 1px solid transparent;
	border-radius: var(--ay-r-rond);
	font-family: inherit;
	font-size: var(--ay-t-klein);
	font-weight: 600;
	letter-spacing: -0.005em;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: transform var(--ay-vlot), background-color var(--ay-vlot),
		border-color var(--ay-vlot), color var(--ay-vlot), box-shadow var(--ay-vlot);
}

.ayme-knop__icoon {
	font-size: 1.05em;
	width: 1em;
	height: 1em;
	transition: transform var(--ay-vlot);
}

.ayme-knop:hover .ayme-knop__icoon {
	transform: translateX(3px);
}

.ayme-knop:active {
	transform: translateY(1px);
}

.ayme-knop--primair {
	background: var(--ay-inkt);
	color: #fff;
	box-shadow: var(--ay-schaduw-s);
}

.ayme-knop--primair:hover {
	background: var(--ay-accent-diep);
	color: #fff;
	box-shadow: var(--ay-schaduw);
}

.ayme-knop--zacht {
	background: var(--ay-wit);
	border-color: var(--ay-lijn);
	color: var(--ay-inkt);
}

.ayme-knop--zacht:hover {
	border-color: var(--ay-inkt);
	color: var(--ay-inkt);
}

.ayme-knop--lijn {
	background: transparent;
	border-color: var(--ay-lijn-sterk);
	color: var(--ay-inkt);
}

.ayme-knop--lijn:hover {
	background: var(--ay-wit);
	border-color: var(--ay-inkt);
	color: var(--ay-inkt);
}

.ayme-knop--licht {
	background: var(--ay-papier);
	color: var(--ay-inkt);
}

.ayme-knop--licht:hover {
	background: #fff;
	color: var(--ay-accent-diep);
}

.ayme-knop--lijnlicht {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.28);
	color: rgba(255, 255, 255, 0.92);
}

.ayme-knop--lijnlicht:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.5);
	color: #fff;
}

.ayme-tekstlink {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	font-weight: 600;
	font-size: var(--ay-t-klein);
	text-decoration: none;
}

.ayme-tekstlink .ayme-icon {
	font-size: 1em;
	width: 1em;
	height: 1em;
	transition: transform var(--ay-vlot);
}

.ayme-tekstlink:hover .ayme-icon {
	transform: translateX(3px);
}

.ayme-status {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.35em 0.85em;
	background: rgba(47, 158, 107, 0.1);
	border-radius: var(--ay-r-rond);
	color: #1d6d49;
	font-size: var(--ay-t-mini);
	font-weight: 600;
}

/* De tekst van het badge en van de labels boven koppen staat in een
   data-attribuut; zie ayme_sectiekop() voor het waarom. */
.ayme-status[data-tekst]::after {
	content: attr(data-tekst);
}

.ayme-label[data-label]::after {
	content: attr(data-label);
}

.ayme-status__stip {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ay-groen);
	box-shadow: 0 0 0 0 rgba(47, 158, 107, 0.55);
	animation: ayme-puls 2.4s infinite;
}

@keyframes ayme-puls {
	70% { box-shadow: 0 0 0 8px rgba(47, 158, 107, 0); }
	100% { box-shadow: 0 0 0 0 rgba(47, 158, 107, 0); }
}

.ayme-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ayme-tag {
	padding: 0.25em 0.7em;
	background: var(--ay-papier-2);
	border-radius: var(--ay-r-rond);
	color: var(--ay-grijs);
	font-size: var(--ay-t-mini);
	font-weight: 500;
	white-space: nowrap;
}

.ayme-lijst {
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.6rem;
}

.ayme-lijst li {
	display: flex;
	align-items: flex-start;
	gap: 0.65em;
	font-size: var(--ay-t-klein);
}

.ayme-lijst__vink {
	font-size: 1.05em;
	width: 1em;
	height: 1em;
	margin-top: 0.28em;
	color: var(--ay-accent);
	stroke-width: 2.4;
}

.ayme-notitie {
	margin-top: 1.5rem;
	padding: 0.75rem 1rem;
	background: rgba(226, 96, 58, 0.07);
	border-left: 2px solid var(--ay-accent);
	border-radius: 0 var(--ay-r-s) var(--ay-r-s) 0;
	color: var(--ay-grijs);
	font-size: var(--ay-t-klein);
}

.ayme-leeg {
	padding: 2.5rem;
	background: var(--ay-wit);
	border: 1px dashed var(--ay-lijn-sterk);
	border-radius: var(--ay-r-l);
	text-align: center;
	color: var(--ay-grijs);
}

.ayme-kruimels {
	margin-bottom: 1.25rem;
	font-size: var(--ay-t-klein);
}

.ayme-kruimels ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--ay-grijs);
}

.ayme-kruimels li + li::before {
	content: '/';
	margin-right: 0.5em;
	opacity: 0.45;
}

.ayme-kruimels a {
	color: var(--ay-grijs);
	text-decoration: none;
}

.ayme-kruimels a:hover {
	color: var(--ay-accent-diep);
}

/* Sectiekop */

.ayme-sectiekop {
	max-width: 46rem;
	margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.ayme-sectiekop--midden {
	margin-inline: auto;
	text-align: center;
}

.ayme-sectiekop--midden .ayme-label::before {
	display: none;
}

.ayme-sectiekop__titel {
	margin: 0 0 0.5em;
	font-size: var(--ay-t-h2);
}

.ayme-sectiekop__intro {
	margin: 0;
	color: var(--ay-grijs);
	font-size: var(--ay-t-groot);
	line-height: 1.6;
}

/* Vrije tekst (WYSIWYG) */

.ayme-tekst {
	font-size: var(--ay-t-groot);
	line-height: 1.75;
}

.ayme-tekst > * + * {
	margin-top: 1.15em;
}

.ayme-tekst h2 {
	margin-top: 2em;
	font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem);
}

.ayme-tekst h3 {
	margin-top: 1.8em;
	font-size: var(--ay-t-h3);
}

.ayme-tekst ul,
.ayme-tekst ol {
	padding-left: 1.3em;
}

.ayme-tekst li + li {
	margin-top: 0.4em;
}

.ayme-tekst blockquote {
	margin: 2em 0;
	padding-left: 1.4em;
	border-left: 2px solid var(--ay-accent);
	font-family: var(--ay-serif);
	font-size: 1.35em;
	line-height: 1.4;
	color: var(--ay-inkt);
}

.ayme-tekst img {
	border-radius: var(--ay-r);
}

/* -------------------------------------------------------------------------
   5. Header en menu
   ---------------------------------------------------------------------- */

.ayme-header {
	position: sticky;
	top: var(--ay-adminbar);
	z-index: 100;
	background: rgba(251, 248, 244, 0.82);
	backdrop-filter: saturate(160%) blur(14px);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	border-bottom: 1px solid transparent;
	transition: border-color var(--ay-vlot), background-color var(--ay-vlot);
}

.ayme-header.is-geplakt {
	border-bottom-color: var(--ay-lijn);
	background: rgba(251, 248, 244, 0.94);
}

.ayme-header__binnen {
	width: min(100% - (var(--ay-marge) * 2), var(--ay-omhulsel));
	margin-inline: auto;
	min-height: var(--ay-header-h);
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.ayme-header__merk {
	flex: none;
	/* Zonder deze twee regels hangt de link aan de basislijn van de regel
	   eromheen en staat het beeld een paar pixels boven het midden. */
	display: flex;
	align-items: center;
}

.ayme-header__merk .ayme-merk {
	--ayme-merk-hoogte: 2.5rem;
}

@media (max-width: 1024px) {
	.ayme-header__merk .ayme-merk {
		--ayme-merk-hoogte: 2.1rem;
	}
}

@media (max-width: 420px) {
	.ayme-header__merk .ayme-merk {
		--ayme-merk-hoogte: 1.8rem;
	}
}

/* Het merk staat één keer als <symbol> in de pagina; hier bepaalt alleen de
   hoogte hoe groot het wordt. De breedte volgt uit de verhouding van de
   tekening, zodat er nooit iets uitrekt. */
.ayme-merk {
	display: flex;
	align-items: center;
	text-decoration: none;
	/* Zo verspringt de kop niet terwijl de pagina nog laadt. */
	line-height: 0;
}

.ayme-merk__beeld {
	display: block;
	width: auto;
	height: var(--ayme-merk-hoogte, 1.75rem);
}

/* Op een donkere ondergrond wordt de naam licht; de ring houdt zijn eigen
   kleur, die staat daar goed genoeg tegen af. */
.ayme-merk--licht {
	--ayme-merk-tekst: #fff;
}

/* De sprite zelf mag niets innemen. display:none zou het ook verbergen voor
   <use>, vandaar deze omweg. */
.ayme-merk-sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

/* Hieronder staat het oude woordmerk in tekst. Het wordt niet meer uitgevoerd,
   maar blijft staan voor het geval er ooit een pagina is die het nog gebruikt. */
.ayme-wordmark {
	display: inline-flex;
	align-items: baseline;
	gap: 0.35em;
	color: var(--ay-inkt);
	font-family: var(--ay-serif);
	font-size: 1.5rem;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}

.ayme-wordmark__punt {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--ay-accent);
	transform: translateY(-2px);
}

.ayme-wordmark__achter {
	font-family: var(--ay-sans);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--ay-grijs);
	text-transform: uppercase;
}

.ayme-wordmark--licht {
	color: #fff;
}

.ayme-wordmark--licht .ayme-wordmark__achter {
	color: rgba(255, 255, 255, 0.6);
}

.ayme-header .custom-logo {
	max-height: 44px;
	width: auto;
}

.ayme-nav {
	flex: 1;
	display: flex;
	justify-content: center;
}

.ayme-nav__lijst {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ayme-nav__lijst li {
	position: relative;
}

.ayme-nav__lijst a {
	display: block;
	padding: 0.5em 0.85em;
	border-radius: var(--ay-r-rond);
	color: var(--ay-inkt-zacht);
	font-size: var(--ay-t-klein);
	font-weight: 500;
	text-decoration: none;
	transition: background-color var(--ay-vlot), color var(--ay-vlot);
}

.ayme-nav__lijst a:hover {
	background: var(--ay-papier-2);
	color: var(--ay-inkt);
}

.ayme-nav__lijst .current-menu-item > a,
.ayme-nav__lijst .current_page_item > a,
.ayme-nav__lijst .current-menu-ancestor > a {
	background: var(--ay-zand);
	color: var(--ay-inkt);
}

/* submenu */
.ayme-nav__lijst .sub-menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 210px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--ay-wit);
	border: 1px solid var(--ay-lijn);
	border-radius: var(--ay-r);
	box-shadow: var(--ay-schaduw);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--ay-vlot), transform var(--ay-vlot), visibility var(--ay-vlot);
}

.ayme-nav__lijst li:hover > .sub-menu,
.ayme-nav__lijst li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.ayme-header__acties {
	flex: none;
	display: flex;
	align-items: center;
	gap: 0.65rem;
}

.ayme-header__app {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.5em 0.9em;
	border-radius: var(--ay-r-rond);
	color: var(--ay-inkt-zacht);
	font-size: var(--ay-t-klein);
	font-weight: 600;
	text-decoration: none;
	transition: background-color var(--ay-vlot), color var(--ay-vlot);
}

.ayme-header__app .ayme-icon {
	font-size: 1em;
	width: 1em;
	height: 1em;
	color: #25d366;
}

.ayme-header__app:hover {
	background: var(--ay-papier-2);
	color: var(--ay-inkt);
}

.ayme-menuknop {
	display: none;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	background: var(--ay-wit);
	border: 1px solid var(--ay-lijn);
	border-radius: var(--ay-r-s);
	color: var(--ay-inkt);
	cursor: pointer;
}

/* Twee klassen diep, niet één. Font Awesome laadt na deze stylesheet en zet
   op .fa-solid zelf display: inline-block; met een enkele klas wint die op
   volgorde, en dan staan het menu-icoon en het kruisje tegelijk in beeld. */
.ayme-menuknop .ayme-menuknop__dicht,
.ayme-menuknop.is-open .ayme-menuknop__open {
	display: none;
}

.ayme-menuknop.is-open .ayme-menuknop__dicht {
	display: inline-block;
}

/* mobiel menu */

.ayme-mobielmenu {
	position: fixed;
	top: calc(var(--ay-header-h) + var(--ay-adminbar));
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 99;
	padding: 1.5rem var(--ay-marge) 2.5rem;
	background: var(--ay-papier);
	overflow-y: auto;
	animation: ayme-invouwen 240ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

@keyframes ayme-invouwen {
	from { opacity: 0; transform: translateY(-10px); }
	to { opacity: 1; transform: none; }
}

.ayme-mobielmenu .ayme-nav__lijst {
	flex-direction: column;
	align-items: stretch;
	gap: 2px;
}

.ayme-mobielmenu .ayme-nav__lijst a {
	padding: 0.9em 1em;
	border-radius: var(--ay-r-s);
	font-size: 1.05rem;
	font-weight: 500;
}

.ayme-mobielmenu .sub-menu {
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	box-shadow: none;
	border: 0;
	padding: 0 0 0 1rem;
	background: transparent;
}

.ayme-mobielmenu__voet {
	margin-top: 1.75rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--ay-lijn);
	display: grid;
	gap: 0.5rem;
}

.ayme-mobielmenu__voet .ayme-knop {
	width: 100%;
}

.ayme-mobielmenu__rij {
	display: flex;
	align-items: center;
	gap: 0.7em;
	padding: 0.85em 1em;
	background: var(--ay-wit);
	border: 1px solid var(--ay-lijn);
	border-radius: var(--ay-r-s);
	color: var(--ay-inkt);
	font-size: var(--ay-t-klein);
	font-weight: 500;
	text-decoration: none;
}

.ayme-mobielmenu__rij .ayme-icon {
	color: var(--ay-accent);
}

/* -------------------------------------------------------------------------
   6. Secties
   ---------------------------------------------------------------------- */

/* Hero */

.ayme-hero {
	position: relative;
	padding-block: clamp(3rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4rem);
}

.ayme-hero__grid {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

.ayme-hero__titel {
	margin: 0 0 1rem;
	font-size: var(--ay-t-mega);
	line-height: 1.02;
	letter-spacing: -0.02em;
}

.ayme-hero__intro {
	max-width: 34rem;
	margin: 0 0 2rem;
	font-size: var(--ay-t-groot);
	line-height: 1.65;
	color: var(--ay-inkt-zacht);
}

.ayme-hero__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 2rem;
}

.ayme-hero__onder {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
	color: var(--ay-grijs);
	font-size: var(--ay-t-klein);
}

/* Cijferbalk */

/* Geen kader met hokjes: de cijfers staan gewoon op het papier, met een
   accentstreepje erboven in dezelfde taal als .ayme-label. Dat leest als een
   uitspraak in plaats van als een tabel. */
/* Vaste kolommen in plaats van auto-fit: dat gaf op een telefoon vier cijfers
   onder elkaar met een halve pagina lucht ernaast, en op een tablet drie plus
   een eenzame vierde. Nu twee bij twee, en vier op een rij zodra dat past. */
.ayme-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.75rem, 5vw, 2.5rem) clamp(1.25rem, 4vw, 3.25rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ayme-stat {
	position: relative;
	padding-top: 1.4rem;
}

.ayme-stat::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 30px;
	height: 2px;
	border-radius: 2px;
	background: var(--ay-accent);
	transition: width var(--ay-vlot);
}

.ayme-stats:hover .ayme-stat::before {
	width: 22px;
}

.ayme-stat:hover::before {
	width: 46px;
}

.ayme-stat__waarde {
	display: flex;
	align-items: baseline;
	gap: 0.22em;
	font-family: var(--ay-serif);
	font-size: clamp(2.6rem, 1.7rem + 2.8vw, 3.9rem);
	line-height: 0.95;
	letter-spacing: -0.02em;
	color: var(--ay-inkt);
	font-variant-numeric: lining-nums tabular-nums;
}

/* De eenheid hoort bij het cijfer maar mag het niet overstemmen: kleiner,
   in de schreefloze letter, en in het accent. */
.ayme-stat__eenheid {
	font-family: var(--ay-sans);
	font-size: 0.27em;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--ay-accent-diep);
	white-space: nowrap;
}

.ayme-stat__label {
	display: block;
	max-width: 18ch;
	margin-top: 0.7rem;
	color: var(--ay-grijs);
	font-size: var(--ay-t-klein);
	line-height: 1.5;
	text-wrap: pretty;
}

/* Diensten */

.ayme-diensten__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
	gap: var(--ay-gat);
}

.ayme-dienst {
	display: flex;
	flex-direction: column;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--ay-wit);
	border: 1px solid var(--ay-lijn);
	border-radius: var(--ay-r-l);
	scroll-margin-top: calc(var(--ay-header-h) + var(--ay-adminbar) + 24px);
	transition: transform var(--ay-vlot), box-shadow var(--ay-vlot), border-color var(--ay-vlot);
}

.ayme-dienst:hover {
	transform: translateY(-3px);
	border-color: var(--ay-lijn-sterk);
	box-shadow: var(--ay-schaduw);
}

.ayme-dienst__icoon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: 1.25rem;
	background: var(--ay-accent-zacht);
	border-radius: var(--ay-r-s);
	color: var(--ay-accent-diep);
}

.ayme-dienst__icoon .ayme-icon {
	font-size: 22px;
	width: 1em;
	height: 1em;
}

.ayme-dienst__titel {
	margin-bottom: 0.6rem;
	font-family: var(--ay-sans);
	font-size: var(--ay-t-h3);
	font-weight: 600;
}

.ayme-dienst__tekst {
	margin-bottom: 1.35rem;
	font-size: var(--ay-t-klein);
	color: var(--ay-grijs);
	line-height: 1.7;
}

.ayme-dienst__prijs {
	margin: auto 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--ay-lijn);
	color: var(--ay-inkt);
	font-weight: 600;
	font-size: var(--ay-t-klein);
}

.ayme-dienst__prijs span {
	display: block;
	margin-top: 0.15rem;
	color: var(--ay-grijs);
	font-weight: 400;
	font-size: var(--ay-t-mini);
}

/* Waarom */

.ayme-waarom__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
}

.ayme-reden__icoon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-bottom: 1rem;
	background: var(--ay-papier-2);
	border-radius: 50%;
	color: var(--ay-accent-diep);
}

.ayme-reden__icoon .ayme-icon {
	font-size: 19px;
	width: 1em;
	height: 1em;
}

.ayme-reden__titel {
	margin-bottom: 0.5rem;
	font-size: 1.05rem;
	font-weight: 600;
}

.ayme-reden p {
	font-size: var(--ay-t-klein);
	color: var(--ay-grijs);
	line-height: 1.7;
}

/* Proces */

.ayme-proces__lijst {
	counter-reset: stap;
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--ay-lijn);
}

.ayme-stap {
	display: grid;
	grid-template-columns: 90px 1fr;
	gap: clamp(1rem, 3vw, 2.5rem);
	padding: clamp(1.35rem, 3vw, 2rem) 0;
	border-bottom: 1px solid var(--ay-lijn);
	transition: background-color var(--ay-vlot);
}

.ayme-stap:hover {
	background: rgba(255, 255, 255, 0.55);
}

.ayme-stap__nummer {
	font-family: var(--ay-serif);
	font-size: 1.75rem;
	line-height: 1.2;
	color: var(--ay-accent);
}

.ayme-stap__titel {
	margin-bottom: 0.35rem;
	font-size: var(--ay-t-h3);
	font-weight: 600;
}

.ayme-stap__body p {
	margin: 0;
	max-width: 44rem;
	color: var(--ay-grijs);
	font-size: var(--ay-t-klein);
	line-height: 1.7;
}

/* FAQ */

.ayme-faq__lijst {
	border-top: 1px solid var(--ay-lijn);
}

.ayme-faq__item {
	border-bottom: 1px solid var(--ay-lijn);
}

.ayme-faq__vraag {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.25rem 0;
	color: var(--ay-inkt);
	font-size: 1.05rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	transition: color var(--ay-vlot);
}

.ayme-faq__vraag::-webkit-details-marker {
	display: none;
}

.ayme-faq__vraag:hover {
	color: var(--ay-accent-diep);
}

.ayme-faq__pijl {
	flex: none;
	color: var(--ay-grijs);
	transition: transform var(--ay-vlot);
}

.ayme-faq__item[open] .ayme-faq__pijl {
	transform: rotate(180deg);
}

.ayme-faq__antwoord {
	padding-bottom: 1.4rem;
	max-width: 48rem;
	color: var(--ay-grijs);
	font-size: var(--ay-t-klein);
	line-height: 1.75;
}

/* Reviews */

.ayme-reviews__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: var(--ay-gat);
}

.ayme-review {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 0;
	padding: clamp(1.35rem, 3vw, 1.9rem);
	background: var(--ay-wit);
	border: 1px solid var(--ay-lijn);
	border-radius: var(--ay-r-l);
}

.ayme-review__sterren {
	display: inline-flex;
	gap: 2px;
	color: var(--ay-accent);
}

.ayme-review__sterren .ayme-icon {
	font-size: 15px;
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.ayme-review blockquote {
	margin: 0;
	color: var(--ay-inkt-zacht);
	font-size: var(--ay-t-klein);
	line-height: 1.75;
}

.ayme-review figcaption {
	margin-top: auto;
	padding-top: 0.75rem;
	border-top: 1px solid var(--ay-lijn);
	font-size: var(--ay-t-klein);
}

.ayme-review__naam {
	display: block;
	color: var(--ay-inkt);
	font-weight: 600;
}

.ayme-review__rol {
	display: block;
	color: var(--ay-grijs);
	font-size: var(--ay-t-mini);
}

/* Geen reacties aan: het blok weg, en staat het als enige in zijn Elementor-
   container, dan die container ook — anders blijft er een lege gekleurde band
   staan. Alleen bij het enige kind, zodat andere widgets ernaast blijven. */
.elementor-widget:has(.ayme-reviews-leeg),
.e-con:has(> .elementor-widget:only-child .ayme-reviews-leeg),
.e-con:has(> .e-con-inner > .elementor-widget:only-child .ayme-reviews-leeg) {
	display: none;
}

/* Contactkaart */

.ayme-contactkaart__lijst {
	display: grid;
	gap: 0.75rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.ayme-contactrij {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.15rem 1.35rem;
	background: var(--ay-wit);
	border: 1px solid var(--ay-lijn);
	border-radius: var(--ay-r);
	color: var(--ay-inkt);
	text-decoration: none;
	transition: transform var(--ay-vlot), border-color var(--ay-vlot), box-shadow var(--ay-vlot);
}

.ayme-contactrij:hover {
	transform: translateY(-2px);
	border-color: var(--ay-lijn-sterk);
	box-shadow: var(--ay-schaduw-s);
	color: var(--ay-inkt);
}

.ayme-contactrij__icoon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	flex: none;
	background: var(--ay-papier-2);
	border-radius: var(--ay-r-s);
	color: var(--ay-accent-diep);
}

.ayme-contactrij--whatsapp .ayme-contactrij__icoon {
	background: rgba(37, 211, 102, 0.12);
	color: #128c47;
}

.ayme-contactrij__body {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.ayme-contactrij__label {
	font-size: var(--ay-t-mini);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ay-grijs);
}

.ayme-contactrij__waarde {
	font-size: 1.02rem;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.ayme-contactrij__hint {
	font-size: var(--ay-t-mini);
	color: var(--ay-grijs);
}

.ayme-contactrij__pijl {
	margin-left: auto;
	flex: none;
	color: var(--ay-grijs);
	transition: transform var(--ay-vlot);
}

.ayme-contactrij:hover .ayme-contactrij__pijl {
	transform: translate(2px, -2px);
	color: var(--ay-accent);
}

/* Koffie */

.ayme-koffie {
	display: flex;
	gap: 1.15rem;
	padding: clamp(1.25rem, 3vw, 1.75rem);
	background: var(--ay-accent-zacht);
	border-radius: var(--ay-r-l);
}

.ayme-koffie__icoon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: none;
	background: rgba(255, 255, 255, 0.75);
	border-radius: 50%;
	color: var(--ay-accent-diep);
}

.ayme-koffie__titel {
	margin-bottom: 0.35rem;
	font-family: var(--ay-sans);
	font-size: 1.02rem;
	font-weight: 600;
}

.ayme-koffie p {
	margin: 0;
	color: #7a4028;
	font-size: var(--ay-t-klein);
	line-height: 1.7;
}

/* Twee alinea's onder elkaar liepen tegen elkaar aan. */
.ayme-koffie p + p {
	margin-top: 0.65rem;
}

.ayme-koffie__actie {
	margin-top: 0.75rem !important;
}

.ayme-koffie__actie a {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	color: var(--ay-accent-diep);
	font-weight: 600;
	text-decoration: none;
}

.ayme-koffie__actie a:hover {
	text-decoration: underline;
}

/* CTA */

.ayme-cta {
	padding: clamp(2.25rem, 5vw, 4rem);
	background: var(--ay-diep);
	border-radius: var(--ay-r-xl);
	color: rgba(255, 255, 255, 0.72);
	background-image: radial-gradient(circle at 88% 10%, rgba(226, 96, 58, 0.32), transparent 55%);
	text-align: center;
}

.ayme-cta__body {
	max-width: 40rem;
	margin-inline: auto;
}

.ayme-cta__titel {
	margin-bottom: 0.6rem;
	color: #fff;
	font-size: var(--ay-t-h2);
}

.ayme-cta__tekst {
	margin-bottom: 1.75rem;
	font-size: var(--ay-t-groot);
	line-height: 1.6;
}

.ayme-cta__knoppen {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
}

.ayme-cta .ayme-knop--primair {
	background: var(--ay-accent);
	color: #fff;
}

.ayme-cta .ayme-knop--primair:hover {
	background: #fff;
	color: var(--ay-inkt);
}

/* Foto's van Aymé */

.ayme-fotos {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.9rem;
}

.ayme-foto {
	position: relative;
	margin: 0;
	border-radius: var(--ay-r);
	overflow: hidden;
	background: var(--ay-papier-2);
	aspect-ratio: 3 / 4;
}

/* De foto neemt de verhouding van het vak over. Een hoogte in procenten
   werkt hier niet: het vak ontleent zijn hoogte aan aspect-ratio, en dan valt
   die procenthoogte terug op de eigen hoogte van de afbeelding. */
.ayme-foto img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: inherit;
	object-fit: cover;
	transition: transform 500ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.ayme-foto:hover img {
	transform: scale(1.035);
}

.ayme-foto--1 { grid-row: span 2; aspect-ratio: 3 / 4.6; }
.ayme-foto--4 { margin-top: -2.5rem; }

.ayme-foto figcaption {
	position: absolute;
	inset: auto 0 0;
	padding: 1.5rem 0.9rem 0.7rem;
	background: linear-gradient(transparent, rgba(16, 18, 22, 0.72));
	color: #fff;
	font-size: var(--ay-t-mini);
}

.ayme-foto--leeg {
	display: grid;
	place-items: center;
	border: 1px dashed var(--ay-lijn-sterk);
}

.ayme-foto__plaats {
	display: grid;
	justify-items: center;
	gap: 0.4rem;
	color: var(--ay-grijs);
	font-size: var(--ay-t-mini);
	text-align: center;
}

/* -------------------------------------------------------------------------
   7. Projecten
   ---------------------------------------------------------------------- */

.ayme-projecten__kop {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
}

.ayme-projecten__kop .ayme-sectiekop {
	margin-bottom: 0;
}

.ayme-projecten__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
	gap: var(--ay-gat);
	margin-top: clamp(2rem, 4vw, 3rem);
}

.ayme-projectkaart {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--ay-wit);
	border: 1px solid var(--ay-lijn);
	border-radius: var(--ay-r-l);
	overflow: hidden;
	transition: transform var(--ay-vlot), box-shadow var(--ay-vlot), border-color var(--ay-vlot);
}

.ayme-projectkaart:hover {
	transform: translateY(-4px);
	border-color: var(--ay-lijn-sterk);
	box-shadow: var(--ay-schaduw-l);
}

.ayme-projectkaart--groot {
	grid-column: span 2;
}

.ayme-projectkaart__link {
	position: absolute;
	inset: 0;
	z-index: 3;
}

.ayme-projectkaart__media {
	position: relative;
	/* 16:9, want dat is wat een schermafbeelding van een website is. */
	aspect-ratio: 16 / 9;
	background: var(--kaart-kleur, var(--ay-zand));
	overflow: hidden;
	display: grid;
	place-items: center;
}

.ayme-projectkaart__beeld {
	width: 100%;
	height: 100%;
	/* `contain` in plaats van `cover`: liever een randje in de projectkleur dan
	   een site waar de helft van af is. Past het beeld precies, dan zie je geen
	   verschil; past het niet, dan valt het niet op als fout. */
	object-fit: contain;
	transition: transform 500ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.ayme-projectkaart:hover .ayme-projectkaart__beeld {
	transform: scale(1.04);
}

.ayme-projectkaart__leeg {
	color: rgba(22, 24, 29, 0.2);
}

.ayme-projectkaart__leeg .ayme-icon {
	font-size: 42px;
	width: 1em;
	height: 1em;
}

.ayme-projectkaart__body {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: clamp(1.15rem, 2.5vw, 1.6rem);
}

.ayme-projectkaart__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.2rem 0.6rem;
	font-size: var(--ay-t-mini);
	color: var(--ay-grijs);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-weight: 600;
}

.ayme-projectkaart__jaar::before {
	content: '·';
	margin-right: 0.6rem;
}

.ayme-projectkaart__titel {
	margin: 0;
	font-family: var(--ay-sans);
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.ayme-projectkaart__tekst {
	margin: 0;
	color: var(--ay-grijs);
	font-size: var(--ay-t-klein);
	line-height: 1.65;
}

.ayme-projectkaart__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin-top: 0.35rem;
	color: var(--ay-accent-diep);
	font-size: var(--ay-t-klein);
	font-weight: 600;
}

.ayme-projectkaart__cta .ayme-icon {
	font-size: 0.95em;
	width: 1em;
	height: 1em;
	transition: transform var(--ay-vlot);
}

.ayme-projectkaart:hover .ayme-projectkaart__cta .ayme-icon {
	transform: translate(2px, -2px);
}

/* Filters */

.ayme-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}

.ayme-filter {
	padding: 0.5em 1.05em;
	background: var(--ay-wit);
	border: 1px solid var(--ay-lijn);
	border-radius: var(--ay-r-rond);
	color: var(--ay-inkt-zacht);
	font-size: var(--ay-t-klein);
	font-weight: 500;
	text-decoration: none;
	transition: all var(--ay-vlot);
}

.ayme-filter:hover,
.ayme-filter.is-actief {
	background: var(--ay-inkt);
	border-color: var(--ay-inkt);
	color: #fff;
}

/* Paginakop */

.ayme-paginakop {
	max-width: 46rem;
	padding-block: clamp(2.5rem, 5vw, 4rem) clamp(1.75rem, 3vw, 2.5rem);
}

.ayme-paginakop__titel {
	margin: 0 0 0.5em;
	font-size: var(--ay-t-h1);
}

.ayme-paginakop__intro {
	margin: 0;
	color: var(--ay-grijs);
	font-size: var(--ay-t-groot);
	line-height: 1.65;
}

/* Projectpagina */

.ayme-project__kop {
	padding-block: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem);
}

.ayme-project__kopgrid {
	display: grid;
	grid-template-columns: 1.35fr 0.65fr;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: end;
}

.ayme-project__titel {
	margin: 0 0 0.4em;
	font-size: var(--ay-t-h1);
}

.ayme-project__tagline {
	margin: 0;
	max-width: 34rem;
	color: var(--ay-grijs);
	font-size: var(--ay-t-groot);
	line-height: 1.6;
}

.ayme-project__feiten {
	display: grid;
	gap: 0.9rem;
	margin: 0;
	padding-left: clamp(0px, 2vw, 1.75rem);
	border-left: 1px solid var(--ay-lijn);
}

.ayme-project__feiten dt {
	font-size: var(--ay-t-mini);
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--ay-grijs);
}

.ayme-project__feiten dd {
	margin: 0.15rem 0 0;
	color: var(--ay-inkt);
	font-size: var(--ay-t-klein);
	font-weight: 500;
}

.ayme-project__feiten a {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	text-decoration: none;
}

.ayme-project__feiten a .ayme-icon {
	font-size: 0.9em;
	width: 1em;
	height: 1em;
}

.ayme-project__beeld {
	padding-block: 1rem clamp(2rem, 4vw, 3rem);
}

.ayme-project__figuur {
	margin: 0;
	padding: clamp(1rem, 3vw, 2.5rem);
	background: var(--project-kleur, var(--ay-zand));
	border-radius: var(--ay-r-xl);
}

.ayme-project__figuur img {
	width: 100%;
	border-radius: var(--ay-r);
	box-shadow: var(--ay-schaduw-l);
}

.ayme-resultaten {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
	gap: 1px;
	margin: 0 0 clamp(2rem, 4vw, 3rem);
	padding: 0;
	list-style: none;
	background: var(--ay-lijn);
	border: 1px solid var(--ay-lijn);
	border-radius: var(--ay-r-l);
	overflow: hidden;
}

.ayme-resultaten li {
	display: grid;
	gap: 0.2rem;
	padding: 1.35rem;
	background: var(--ay-papier);
}

.ayme-resultaten__waarde {
	font-family: var(--ay-serif);
	font-size: 2rem;
	line-height: 1;
	color: var(--ay-accent-diep);
}

.ayme-resultaten__label {
	font-size: var(--ay-t-klein);
	color: var(--ay-grijs);
}

.ayme-projectquote {
	margin: clamp(2rem, 4vw, 3rem) 0;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--ay-wit);
	border: 1px solid var(--ay-lijn);
	border-radius: var(--ay-r-l);
}

.ayme-projectquote blockquote {
	margin: 0;
	font-family: var(--ay-serif);
	font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem);
	line-height: 1.4;
	color: var(--ay-inkt);
}

.ayme-projectquote figcaption {
	margin-top: 1rem;
	color: var(--ay-grijs);
	font-size: var(--ay-t-klein);
}

.ayme-projectnav {
	padding-block: clamp(2rem, 4vw, 3rem);
}

.ayme-projectnav__rij {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--ay-lijn);
	border: 1px solid var(--ay-lijn);
	border-radius: var(--ay-r-l);
	overflow: hidden;
}

.ayme-projectnav__link {
	display: grid;
	gap: 0.35rem;
	padding: 1.5rem;
	background: var(--ay-papier);
	text-decoration: none;
	transition: background-color var(--ay-vlot);
}

.ayme-projectnav__link:hover {
	background: var(--ay-wit);
}

.ayme-projectnav__link--volgende {
	text-align: right;
	justify-items: end;
}

.ayme-projectnav__label {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	color: var(--ay-grijs);
	font-size: var(--ay-t-mini);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ayme-projectnav__titel {
	color: var(--ay-inkt);
	font-size: 1.05rem;
	font-weight: 600;
}

/* Artikelen */

.ayme-artikel__kop {
	padding-block: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2rem);
}

.ayme-artikel__titel {
	margin: 0 0 0.4em;
	font-size: var(--ay-t-h1);
}

.ayme-artikel__intro {
	margin: 0;
	color: var(--ay-grijs);
	font-size: var(--ay-t-groot);
}

.ayme-artikel__beeld {
	margin: 0 0 clamp(2rem, 4vw, 3rem);
	border-radius: var(--ay-r-l);
	overflow: hidden;
}

.ayme-berichten {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
	gap: var(--ay-gat);
}

.ayme-bericht {
	display: flex;
	flex-direction: column;
	background: var(--ay-wit);
	border: 1px solid var(--ay-lijn);
	border-radius: var(--ay-r-l);
	overflow: hidden;
}

.ayme-bericht__beeld img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.ayme-bericht__body {
	padding: 1.35rem;
	display: grid;
	gap: 0.5rem;
}

.ayme-bericht__meta {
	margin: 0;
	color: var(--ay-grijs);
	font-size: var(--ay-t-mini);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.ayme-bericht__titel {
	margin: 0;
	font-family: var(--ay-sans);
	font-size: 1.15rem;
	font-weight: 600;
}

.ayme-bericht__titel a {
	color: var(--ay-inkt);
	text-decoration: none;
}

.ayme-bericht__titel a:hover {
	color: var(--ay-accent-diep);
}

.ayme-bericht__body p {
	color: var(--ay-grijs);
	font-size: var(--ay-t-klein);
}

/* 404 */

.ayme-404 {
	max-width: 40rem;
	padding-block: clamp(3rem, 8vw, 6rem);
}

.ayme-404__titel {
	margin-bottom: 0.5em;
	font-size: var(--ay-t-h1);
}

.ayme-404__tekst {
	margin-bottom: 2rem;
	color: var(--ay-grijs);
	font-size: var(--ay-t-groot);
}

.ayme-404__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 2.5rem;
}

.ayme-zoekform {
	display: flex;
	gap: 0.5rem;
}

.ayme-zoekform__veld {
	flex: 1;
}

.ayme-leegblok {
	display: grid;
	gap: 1.5rem;
	padding: clamp(2rem, 5vw, 3.5rem);
	background: var(--ay-wit);
	border: 1px solid var(--ay-lijn);
	border-radius: var(--ay-r-l);
}

/* Paginering */

.pagination,
.ayme-pagination {
	display: flex;
	justify-content: center;
	margin-top: clamp(2rem, 4vw, 3rem);
}

.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 0.75em;
	background: var(--ay-wit);
	border: 1px solid var(--ay-lijn);
	border-radius: var(--ay-r-s);
	color: var(--ay-inkt-zacht);
	font-size: var(--ay-t-klein);
	font-weight: 500;
	text-decoration: none;
}

.page-numbers:hover,
.page-numbers.current {
	background: var(--ay-inkt);
	border-color: var(--ay-inkt);
	color: #fff;
}

/* -------------------------------------------------------------------------
   8. Offerteformulier
   ---------------------------------------------------------------------- */

.ayme-offerte {
	margin-block: clamp(1.5rem, 3vw, 2.5rem);
}

.ayme-offerte__form {
	background: var(--ay-wit);
	border: 1px solid var(--ay-lijn);
	border-radius: var(--ay-r-xl);
	box-shadow: var(--ay-schaduw);
	overflow: hidden;
}

.ayme-offerte__voortgang {
	padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.35rem, 4vw, 2.5rem) 0;
}

.ayme-voortgang__balk {
	height: 5px;
	background: var(--ay-papier-2);
	border-radius: var(--ay-r-rond);
	overflow: hidden;
}

.ayme-voortgang__vulling {
	display: block;
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--ay-accent), var(--ay-accent-diep));
	border-radius: var(--ay-r-rond);
	transition: width 320ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.ayme-voortgang__tekst {
	margin: 0.65rem 0 0;
	color: var(--ay-grijs);
	font-size: var(--ay-t-mini);
	font-weight: 500;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.ayme-voortgang__tijd {
	text-transform: none;
	letter-spacing: 0;
	opacity: 0.8;
}

/* Balk boven het formulier: verschijnt alleen als de browser eerdere
   antwoorden had bewaard. Bewust rustig van toon — het is een mededeling,
   geen waarschuwing. */
.ayme-offerte__hervat {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	margin: clamp(1rem, 2.5vw, 1.4rem) clamp(1.35rem, 4vw, 2.5rem) 0;
	padding: 0.7rem 0.9rem;
	background: var(--ay-papier-2);
	border: 1px solid var(--ay-lijn);
	border-radius: var(--ay-r-s);
}

.ayme-offerte__hervat-tekst {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0;
	color: var(--ay-grijs);
	font-size: var(--ay-t-klein);
}

.ayme-offerte__hervat-icoon {
	flex: none;
	color: var(--ay-accent);
	font-size: 0.85em;
}

.ayme-offerte__hervat-knop {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.35rem 0.6rem;
	margin: -0.35rem -0.6rem;
	background: none;
	border: 0;
	border-radius: var(--ay-r-s);
	color: var(--ay-grijs);
	font: inherit;
	font-size: var(--ay-t-klein);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: var(--ay-lijn-sterk);
	text-underline-offset: 3px;
	cursor: pointer;
	transition: color 160ms ease, background-color 160ms ease;
}

.ayme-offerte__hervat-knop:hover,
.ayme-offerte__hervat-knop:focus-visible {
	color: var(--ay-inkt);
	text-decoration-color: currentColor;
}

/* Tweede klik: nu telt het echt, dus mag het opvallen. */
.ayme-offerte__hervat-knop.is-zekerweten {
	background: var(--ay-accent);
	color: #fff;
	text-decoration: none;
}

.ayme-offerte__hervat-knop.is-zekerweten:hover,
.ayme-offerte__hervat-knop.is-zekerweten:focus-visible {
	background: var(--ay-accent-diep);
	color: #fff;
}

/* Een vraag die van een eerder antwoord afhangt. display:contents zorgt dat
   de omhulling zelf niets doet met de indeling; [hidden] wint daar bovenop,
   want dat staat verderop als !important. */
.ayme-vraag {
	display: contents;
}

/* De uitslag van de domeincontrole. Bewust klein en rustig: het is een
   aanwijzing, geen oordeel. */
.ayme-veld__uitslag {
	margin: 0.5rem 0 0;
	font-size: var(--ay-t-klein);
	line-height: 1.5;
	color: var(--ay-grijs);
}

.ayme-veld__uitslag.is-vrij {
	color: #1c7a4a;
}

.ayme-veld__uitslag.is-bezet {
	color: var(--ay-accent-diep);
}

.ayme-veld__uitslag.is-bezig {
	opacity: 0.7;
}

.ayme-offerte__body {
	display: grid;
	grid-template-columns: 1fr 296px;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	padding: clamp(1.35rem, 4vw, 2.5rem);
}

.ayme-stapblok {
	animation: ayme-stapin 300ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

@keyframes ayme-stapin {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

.ayme-stapblok__kop {
	margin: 0 0 0.4rem;
	color: var(--ay-inkt);
	line-height: 1.15;
	font-family: var(--ay-serif);
	font-weight: 400;
	font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
}

.ayme-stapblok__intro {
	margin-bottom: 1.75rem;
	color: var(--ay-grijs);
	font-size: var(--ay-t-klein);
	line-height: 1.7;
}

.ayme-veld {
	margin-bottom: 1.5rem;
	border: 0;
	padding: 0;
}

.ayme-veld__label {
	display: block;
	margin-bottom: 0.6rem;
	padding: 0;
	color: var(--ay-inkt);
	font-size: var(--ay-t-klein);
	font-weight: 600;
}

.ayme-veld__optioneel {
	margin-left: 0.5em;
	color: var(--ay-grijs);
	font-weight: 400;
	font-size: var(--ay-t-mini);
}

.ayme-veld__hint {
	margin: -0.25rem 0 0.75rem;
	color: var(--ay-grijs);
	font-size: var(--ay-t-mini);
	line-height: 1.6;
}

.ayme-veld__hint--inspring {
	padding-left: 2.1rem;
}

.ayme-opties {
	display: grid;
	gap: 0.6rem;
}

.ayme-opties--2 { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
.ayme-opties--3 { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }

.ayme-optie {
	position: relative;
	display: block;
	cursor: pointer;
}

.ayme-optie input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.ayme-optie__vak {
	display: flex;
	align-items: flex-start;
	gap: 0.8rem;
	height: 100%;
	padding: 1rem 1.1rem;
	background: var(--ay-papier);
	border: 1px solid var(--ay-lijn);
	border-radius: var(--ay-r);
	transition: border-color var(--ay-vlot), background-color var(--ay-vlot),
		box-shadow var(--ay-vlot), transform var(--ay-vlot);
}

.ayme-opties--compact .ayme-optie__vak {
	align-items: center;
	padding: 0.75rem 1rem;
}

.ayme-optie:hover .ayme-optie__vak {
	border-color: var(--ay-lijn-sterk);
	background: var(--ay-wit);
}

.ayme-optie input:focus-visible + .ayme-optie__vak {
	outline: 2px solid var(--ay-accent);
	outline-offset: 2px;
}

.ayme-optie input:checked + .ayme-optie__vak {
	background: var(--ay-accent-zacht);
	border-color: var(--ay-accent);
	box-shadow: 0 0 0 1px var(--ay-accent);
}

.ayme-optie__icoon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex: none;
	background: var(--ay-wit);
	border-radius: var(--ay-r-s);
	color: var(--ay-accent-diep);
}

.ayme-optie__icoon .ayme-icon {
	font-size: 17px;
	width: 1em;
	height: 1em;
}

.ayme-optie__tekst {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.ayme-optie__label {
	color: var(--ay-inkt);
	font-size: var(--ay-t-klein);
	font-weight: 600;
	line-height: 1.35;
}

.ayme-optie__hint {
	color: var(--ay-grijs);
	font-size: var(--ay-t-mini);
	line-height: 1.5;
}

.ayme-optie__merk {
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	flex: none;
	margin-left: auto;
	border: 1px solid var(--ay-lijn-sterk);
	border-radius: 50%;
	background: var(--ay-wit);
	color: transparent;
	transition: all var(--ay-vlot);
}

.ayme-optie__merk .ayme-icon {
	font-size: 12px;
	width: 1em;
	height: 1em;
	stroke-width: 3;
}

.ayme-optie input:checked + .ayme-optie__vak .ayme-optie__merk {
	background: var(--ay-accent);
	border-color: var(--ay-accent);
	color: #fff;
}

/* Tekstvelden */

.ayme-input {
	width: 100%;
	padding: 0.85em 1em;
	background: var(--ay-papier);
	border: 1px solid var(--ay-lijn);
	border-radius: var(--ay-r-s);
	color: var(--ay-inkt);
	font-family: inherit;
	font-size: var(--ay-t-basis);
	line-height: 1.5;
	transition: border-color var(--ay-vlot), background-color var(--ay-vlot), box-shadow var(--ay-vlot);
}

.ayme-input::placeholder {
	color: #a2a8b4;
}

.ayme-input:focus {
	outline: none;
	background: var(--ay-wit);
	border-color: var(--ay-accent);
	box-shadow: 0 0 0 3px rgba(226, 96, 58, 0.14);
}

.ayme-input.is-fout {
	border-color: #d0342c;
	box-shadow: 0 0 0 3px rgba(208, 52, 44, 0.12);
}

textarea.ayme-input {
	resize: vertical;
	min-height: 8rem;
}

.ayme-stapblok .ayme-veld--half {
	display: inline-block;
	width: calc(50% - 0.4rem);
	vertical-align: top;
}

.ayme-stapblok .ayme-veld--half:nth-of-type(odd) {
	margin-right: 0.7rem;
}

/* Checkbox */

.ayme-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	cursor: pointer;
}

.ayme-checkbox input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.ayme-checkbox__vink {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	flex: none;
	margin-top: 1px;
	background: var(--ay-papier);
	border: 1px solid var(--ay-lijn-sterk);
	border-radius: 6px;
	color: transparent;
	transition: all var(--ay-vlot);
}

.ayme-checkbox__vink .ayme-icon {
	font-size: 13px;
	width: 1em;
	height: 1em;
	stroke-width: 3;
}

.ayme-checkbox input:checked + .ayme-checkbox__vink {
	background: var(--ay-accent);
	border-color: var(--ay-accent);
	color: #fff;
}

.ayme-checkbox input:focus-visible + .ayme-checkbox__vink {
	outline: 2px solid var(--ay-accent);
	outline-offset: 2px;
}

.ayme-checkbox__tekst {
	color: var(--ay-inkt-zacht);
	font-size: var(--ay-t-klein);
	line-height: 1.6;
}

.ayme-veld--akkoord {
	margin-top: 1.75rem;
	padding: 1.1rem 1.25rem;
	background: var(--ay-papier);
	border: 1px solid var(--ay-lijn);
	border-radius: var(--ay-r);
}

.ayme-honeypot {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Zijkant: prijskaart */

.ayme-offerte__zijkant {
	display: grid;
	gap: 0.9rem;
	align-content: start;
	position: sticky;
	top: calc(var(--ay-header-h) + var(--ay-adminbar) + 20px);
}

.ayme-prijskaart {
	padding: 1.35rem;
	background: var(--ay-diep);
	border-radius: var(--ay-r-l);
	color: rgba(255, 255, 255, 0.62);
	background-image: radial-gradient(circle at 85% 0%, rgba(226, 96, 58, 0.35), transparent 60%);
}

.ayme-prijskaart__label {
	margin: 0 0 0.35rem;
	color: rgba(255, 255, 255, 0.5);
	font-size: var(--ay-t-mini);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.ayme-prijskaart__bedrag {
	margin: 0;
	color: #fff;
	font-family: var(--ay-serif);
	font-size: 1.65rem;
	line-height: 1.15;
}

.ayme-prijskaart__maand {
	margin: 0.4rem 0 0;
	color: var(--ay-accent);
	font-size: var(--ay-t-klein);
	font-weight: 600;
}

.ayme-prijskaart__uitleg {
	margin: 0.9rem 0 0;
	padding-top: 0.9rem;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: var(--ay-t-mini);
	line-height: 1.6;
}

.ayme-hulpkaart {
	padding: 1.25rem;
	background: var(--ay-papier);
	border: 1px solid var(--ay-lijn);
	border-radius: var(--ay-r-l);
	font-size: var(--ay-t-klein);
	color: var(--ay-grijs);
}

.ayme-hulpkaart__kop {
	margin: 0 0 0.3rem;
	color: var(--ay-inkt);
	font-weight: 600;
}

.ayme-hulpkaart__link {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	margin-top: 0.75rem;
	color: var(--ay-inkt);
	font-weight: 600;
	text-decoration: none;
}

.ayme-hulpkaart__link .ayme-icon {
	font-size: 1em;
	width: 1em;
	height: 1em;
	color: #25d366;
}

/* Overzicht */

.ayme-overzicht {
	display: grid;
	gap: 1px;
	background: var(--ay-lijn);
	border: 1px solid var(--ay-lijn);
	border-radius: var(--ay-r);
	overflow: hidden;
}

.ayme-overzicht__rij {
	display: grid;
	grid-template-columns: 190px 1fr auto;
	gap: 1rem;
	align-items: baseline;
	padding: 0.9rem 1.1rem;
	background: var(--ay-wit);
	font-size: var(--ay-t-klein);
}

.ayme-overzicht__label {
	color: var(--ay-grijs);
}

.ayme-overzicht__waarde {
	color: var(--ay-inkt);
	font-weight: 500;
}

.ayme-overzicht__wijzig {
	background: none;
	border: 0;
	padding: 0;
	color: var(--ay-accent-diep);
	font-family: inherit;
	font-size: var(--ay-t-mini);
	font-weight: 600;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.ayme-overzicht__leeg {
	padding: 1.5rem;
	background: var(--ay-wit);
	color: var(--ay-grijs);
	font-size: var(--ay-t-klein);
	text-align: center;
}

/* De melding onder één vraag. Dit is de belangrijkste van de twee: hier staat
   wat er moet gebeuren, vlak bij het veld waar het over gaat. De regel onderaan
   de stap vat alleen samen dat er nog iets open staat. */
.ayme-veld__fout {
	display: flex;
	align-items: flex-start;
	gap: 0.45rem;
	margin: 0.5rem 0 0;
	color: #b32d24;
	font-size: var(--ay-t-klein);
	line-height: 1.5;
	font-weight: 500;
}

/* Een uitroepteken in een rondje, zonder dat er een icoon voor geladen hoeft
   te worden. Puur decoratief: de tekst ernaast zegt alles al, dus schermlezers
   hoeven dit niet mee te krijgen. */
.ayme-veld__fout::before {
	content: "!";
	flex: none;
	display: grid;
	place-items: center;
	width: 1.15em;
	height: 1.15em;
	margin-top: 0.12em;
	background: #b32d24;
	border-radius: 50%;
	color: #fff;
	font-size: 0.8em;
	font-weight: 700;
	line-height: 1;
}

/* Een keuzegroep waar niets is aangevinkt. De vakjes zelf krijgen een rand,
   want een rand om de hele groep zie je nauwelijks. */
.ayme-veld--opties.is-fout .ayme-optie__vak {
	border-color: rgba(208, 52, 44, 0.55);
}

.ayme-veld--opties.is-fout .ayme-veld__label {
	color: #b32d24;
}

.ayme-offerte__fout {
	margin: 1rem 0 0;
	padding: 0.85rem 1.1rem;
	background: rgba(208, 52, 44, 0.08);
	border-left: 2px solid #d0342c;
	border-radius: 0 var(--ay-r-s) var(--ay-r-s) 0;
	color: #96261f;
	font-size: var(--ay-t-klein);
}

/* Voetregel met knoppen */

.ayme-offerte__voet {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: clamp(1.1rem, 3vw, 1.5rem) clamp(1.35rem, 4vw, 2.5rem);
	background: var(--ay-papier);
	border-top: 1px solid var(--ay-lijn);
}

.ayme-offerte__voet [data-ayme-volgende],
.ayme-offerte__voet [data-ayme-verstuur] {
	margin-left: auto;
}

.ayme-offerte__voet .ayme-knop.is-bezig {
	opacity: 0.65;
	pointer-events: none;
}

/* Geen JavaScript: alle stappen onder elkaar */

.no-js .ayme-stapblok[hidden] {
	display: block !important;
}

/* -------------------------------------------------------------------------
   9. Footer
   ---------------------------------------------------------------------- */

.ayme-footer {
	margin-top: clamp(3rem, 7vw, 6rem);
	background: var(--ay-diep);
	color: rgba(255, 255, 255, 0.62);
	background-image: radial-gradient(circle at 12% 0%, rgba(226, 96, 58, 0.18), transparent 45%);
}

.ayme-footer__binnen {
	width: min(100% - (var(--ay-marge) * 2), var(--ay-omhulsel));
	margin-inline: auto;
	padding-block: clamp(3rem, 6vw, 5rem) 2rem;
}

.ayme-footer__oproep {
	max-width: 34rem;
	padding-bottom: clamp(2.5rem, 5vw, 4rem);
	margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ayme-footer__oproep .ayme-label {
	color: var(--ay-accent);
}

.ayme-footer__titel {
	margin-bottom: 1.75rem;
	color: #fff;
	font-size: var(--ay-t-h2);
	line-height: 1.15;
}

.ayme-footer__titel em {
	color: var(--ay-accent);
}

.ayme-footer__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.ayme-footer__kolommen {
	display: grid;
	grid-template-columns: 1.8fr 1fr 1fr 1.3fr;
	gap: clamp(1.75rem, 4vw, 3rem);
}

.ayme-footer__kolom h3 {
	margin-bottom: 1rem;
	color: rgba(255, 255, 255, 0.45);
	font-family: var(--ay-sans);
	font-size: var(--ay-t-mini);
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.ayme-footer__kolom--over .ayme-wordmark,
.ayme-footer__kolom--over .ayme-merk {
	margin-bottom: 1rem;
}

.ayme-footer__kolom--over .ayme-merk {
	--ayme-merk-hoogte: 2.75rem;
	/* Anders rekt de link over de hele kolom en staat het merk niet links. */
	width: fit-content;
}

.ayme-footer__kolom p {
	font-size: var(--ay-t-klein);
	line-height: 1.7;
}

.ayme-footer__regio {
	display: flex;
	align-items: flex-start;
	gap: 0.55em;
	margin-top: 1rem !important;
	color: rgba(255, 255, 255, 0.45);
	font-size: var(--ay-t-mini) !important;
}

.ayme-footer__regio .ayme-icon {
	font-size: 1em;
	width: 1em;
	height: 1em;
	margin-top: 0.25em;
	color: var(--ay-accent);
}

.ayme-footer__lijst {
	display: grid;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ayme-footer__lijst a {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	color: rgba(255, 255, 255, 0.72);
	font-size: var(--ay-t-klein);
	text-decoration: none;
	transition: color var(--ay-vlot);
}

.ayme-footer__lijst a:hover {
	color: #fff;
}

.ayme-footer__lijst--contact .ayme-icon {
	font-size: 1em;
	width: 1em;
	height: 1em;
	color: var(--ay-accent);
}

.ayme-footer__reactie {
	margin-top: 1rem !important;
	color: rgba(255, 255, 255, 0.42);
	font-size: var(--ay-t-mini) !important;
}

.ayme-footer__onder {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.42);
	font-size: var(--ay-t-mini);
}

.ayme-footer__onder p {
	margin: 0;
}

.ayme-footer__klein {
	display: flex;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ayme-footer__klein a {
	color: rgba(255, 255, 255, 0.42);
	text-decoration: none;
}

.ayme-footer__klein a:hover {
	color: #fff;
}

/* Zwevende WhatsApp-knop */

.ayme-appknop {
	position: fixed;
	right: clamp(1rem, 3vw, 1.75rem);
	bottom: clamp(1rem, 3vw, 1.75rem);
	z-index: 90;
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	padding: 0.85em 1.15em;
	background: #25d366;
	border-radius: var(--ay-r-rond);
	color: #06331a;
	font-size: var(--ay-t-klein);
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 8px 28px rgba(6, 51, 26, 0.28);
	opacity: 0;
	transform: translateY(14px);
	pointer-events: none;
	transition: opacity var(--ay-vlot), transform var(--ay-vlot), background-color var(--ay-vlot);
}

.ayme-appknop.is-zichtbaar {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.ayme-appknop:hover {
	background: #1fbb5a;
	color: #06331a;
}

.ayme-appknop .ayme-icon {
	font-size: 1.15em;
	width: 1em;
	height: 1em;
}

/* -------------------------------------------------------------------------
   10. Responsief
   ---------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.ayme-offerte__body {
		grid-template-columns: 1fr;
	}

	.ayme-offerte__zijkant {
		position: static;
		grid-template-columns: 1fr 1fr;
		display: grid;
	}

	.ayme-footer__kolommen {
		grid-template-columns: 1fr 1fr;
	}

	.ayme-hero__grid {
		grid-template-columns: 1fr;
	}

	.ayme-projectkaart--groot {
		grid-column: span 1;
	}
}

/* Het telefoonnummer vraagt de meeste ruimte en is het minst nodig: dat gaat
   als eerste weg zodra het krap wordt. */
@media (max-width: 1199px) {
	.ayme-header__app {
		display: none;
	}
}

@media (max-width: 1024px) {
	.ayme-nav {
		display: none;
	}

	.ayme-menuknop {
		display: inline-flex;
	}

	.ayme-header__acties {
		margin-left: auto;
	}
}

@media (max-width: 860px) {

	.ayme-project__kopgrid {
		grid-template-columns: 1fr;
	}

	.ayme-project__feiten {
		padding-left: 0;
		border-left: 0;
		border-top: 1px solid var(--ay-lijn);
		padding-top: 1.25rem;
		grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
	}

	.ayme-stap {
		grid-template-columns: 54px 1fr;
	}

	.ayme-fotos {
		grid-template-columns: repeat(2, 1fr);
	}

	.ayme-foto--1 { grid-row: auto; aspect-ratio: 3 / 4; }
	.ayme-foto--4 { margin-top: 0; }
}

@media (max-width: 640px) {
	:root {
		--ay-header-h: 64px;
	}

	.ayme-header__acties .ayme-knop--primair {
		display: none;
	}

	.ayme-stapblok .ayme-veld--half {
		display: block;
		width: 100%;
	}

	.ayme-stapblok .ayme-veld--half:nth-of-type(odd) {
		margin-right: 0;
	}

	.ayme-offerte__zijkant {
		grid-template-columns: 1fr;
	}

	.ayme-overzicht__rij {
		grid-template-columns: 1fr auto;
	}

	.ayme-overzicht__label {
		grid-column: 1 / -1;
		font-size: var(--ay-t-mini);
		text-transform: uppercase;
		letter-spacing: 0.06em;
	}

	.ayme-footer__kolommen {
		grid-template-columns: 1fr;
	}

	.ayme-projectnav__rij {
		grid-template-columns: 1fr;
	}

	.ayme-projectnav__link--volgende {
		text-align: left;
		justify-items: start;
	}

	.ayme-appknop__tekst {
		display: none;
	}

	.ayme-appknop {
		padding: 0.95em;
	}

	.ayme-appknop .ayme-icon {
		font-size: 1.35em;
	width: 1em;
		height: 1em;
	}

	.ayme-koffie {
		flex-direction: column;
	}
}

/* -------------------------------------------------------------------------
   11. Elementor en toegankelijkheid
   ---------------------------------------------------------------------- */

/* Elementor zet zelf marges op widgets; die willen we hier niet dubbel. */
.elementor-widget-ayme-sectie .ayme-sectie,
.elementor-widget-ayme-projecten .ayme-sectie {
	padding-block: 0;
}

.elementor-element .ayme-cta,
.elementor-element .ayme-offerte {
	margin-block: 0;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

@media print {
	.ayme-header,
	.ayme-footer,
	.ayme-appknop,
	.ayme-mobielmenu,
	.ayme-offerte__voet {
		display: none !important;
	}
}

/* -------------------------------------------------------------------------
   12. Blokken die in de Elementor-sjablonen worden gebruikt
   ---------------------------------------------------------------------- */

/* Visitekaartje in de hero */

.ayme-visite {
	display: flex;
	flex-direction: column;
	background: var(--ay-wit);
	border: 1px solid var(--ay-lijn);
	border-radius: var(--ay-r-xl);
	overflow: hidden;
	box-shadow: var(--ay-schaduw);
}

/* De foto zit in een vak met een vaste verhouding en wordt daarbinnen
   bijgesneden. Absoluut positioneren, want anders bepaalt de eigen breedte van
   de afbeelding hoe breed de kaart wordt en valt de tekst eronder weg. */
.ayme-visite__foto {
	position: relative;
	min-height: 260px;
	background:
		radial-gradient(circle at 30% 20%, rgba(226, 96, 58, 0.16), transparent 60%),
		var(--ay-papier-2);
	border-bottom: 1px solid var(--ay-lijn);
}

/* De verhouding staat op de afbeelding zelf, niet op het vak eromheen.
   Een hoogte van 100% binnen een vak dat zijn hoogte uit aspect-ratio haalt
   valt in de browser terug op "auto", en dan schuift de foto over de tekst heen. */
.ayme-visite__foto img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 4.4;
	object-fit: cover;
	object-position: center 30%;
}

.ayme-visite__plaats {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	padding: 0.5em 1em;
	background: rgba(255, 255, 255, 0.7);
	border: 1px dashed var(--ay-lijn-sterk);
	border-radius: var(--ay-r-rond);
	color: var(--ay-grijs);
	font-size: var(--ay-t-mini);
}

.ayme-visite__body {
	padding: 1.35rem 1.5rem 1.5rem;
}

.ayme-visite__naam {
	margin: 0;
	color: var(--ay-inkt);
	font-family: var(--ay-serif);
	font-size: 1.5rem;
	line-height: 1.1;
}

.ayme-visite__rol {
	margin: 0.25rem 0 0;
	color: var(--ay-grijs);
	font-size: var(--ay-t-mini);
	letter-spacing: 0.02em;
}

.ayme-visite__quote {
	margin: 1rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--ay-lijn);
	color: var(--ay-inkt-zacht);
	font-family: var(--ay-serif);
	font-size: 1.1rem;
	font-style: italic;
	line-height: 1.35;
}

.ayme-visite__app {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin-top: 1rem;
	color: var(--ay-accent-diep);
	font-size: var(--ay-t-klein);
	font-weight: 600;
	text-decoration: none;
}

.ayme-visite__app::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #25d366;
}

.ayme-visite__app:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Geruststelling onder het offerteformulier */

.ayme-gerust {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: var(--ay-gat);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ayme-gerust li {
	padding: 1.35rem 1.5rem;
	background: var(--ay-wit);
	border: 1px solid var(--ay-lijn);
	border-radius: var(--ay-r-l);
	color: var(--ay-grijs);
	font-size: var(--ay-t-klein);
	line-height: 1.7;
}

.ayme-gerust strong {
	display: block;
	margin-bottom: 0.2rem;
	color: var(--ay-inkt);
}

/* Kaartjes onder elkaar, naast een tekst op een dienstpagina */

.ayme-gerust--stapel {
	grid-template-columns: 1fr;
	gap: 0.75rem;
}

.ayme-gerust--stapel li {
	padding: 1.05rem 1.35rem;
}

/* Prijsblok op de dienst- en regiopagina's */

.ayme-prijskader {
	padding: clamp(1.35rem, 3vw, 1.9rem);
	background: var(--ay-wit);
	border: 1px solid var(--ay-lijn);
	border-radius: var(--ay-r-l);
	box-shadow: var(--ay-schaduw-s);
}

.ayme-prijskader__titel {
	margin: 0 0 0.75rem;
	color: var(--ay-accent-diep);
	font-size: var(--ay-t-mini);
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.ayme-prijskader__lijst {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ayme-prijskader__lijst li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.8rem 0;
	border-top: 1px solid var(--ay-lijn);
	font-size: var(--ay-t-klein);
}

.ayme-prijskader__lijst li:first-child {
	border-top: 0;
}

.ayme-prijskader__lijst strong {
	color: var(--ay-inkt);
	white-space: nowrap;
}

.ayme-prijskader__noot {
	margin: 0.75rem 0 0;
	color: var(--ay-grijs);
	font-size: var(--ay-t-mini);
}

/* De link onder een dienstkaart naar de eigen pagina van die dienst */

.ayme-dienst__meer {
	margin-top: 1rem;
}

/* "En dan?" — de stappen na een aanvraag */

.ayme-daarna {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: daarna;
}

.ayme-daarna li {
	display: flex;
	gap: 1rem;
	padding: 1.15rem 1.35rem;
	background: var(--ay-wit);
	border: 1px solid var(--ay-lijn);
	border-radius: var(--ay-r);
}

.ayme-daarna__nummer {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	flex: none;
	background: var(--ay-accent-zacht);
	border-radius: 50%;
	color: var(--ay-accent-diep);
	font-size: var(--ay-t-klein);
	font-weight: 700;
}

.ayme-daarna strong {
	display: block;
	color: var(--ay-inkt);
	font-size: var(--ay-t-klein);
}

.ayme-daarna p {
	margin: 0.15rem 0 0;
	color: var(--ay-grijs);
	font-size: var(--ay-t-mini);
	line-height: 1.6;
}

/* Feitenlijstje op de over-mij-pagina */

.ayme-feitjes {
	padding: clamp(1.35rem, 3vw, 1.85rem);
	background: var(--ay-wit);
	border: 1px solid var(--ay-lijn);
	border-radius: var(--ay-r-l);
}

.ayme-feitjes h3 {
	margin-bottom: 1rem;
	font-family: var(--ay-sans);
	font-size: var(--ay-t-mini);
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--ay-grijs);
}

.ayme-feitjes dl {
	display: grid;
	gap: 0;
	margin: 0;
}

.ayme-feitjes dl > div {
	display: grid;
	grid-template-columns: 130px 1fr;
	gap: 1rem;
	padding: 0.7rem 0;
	border-top: 1px solid var(--ay-lijn);
	font-size: var(--ay-t-klein);
}

.ayme-feitjes dl > div:first-child {
	border-top: 0;
	padding-top: 0;
}

.ayme-feitjes dt {
	color: var(--ay-grijs);
}

.ayme-feitjes dd {
	margin: 0;
	color: var(--ay-inkt);
	font-weight: 500;
	overflow-wrap: anywhere;
}

.ayme-blokkop {
	margin-bottom: 1rem;
	font-family: var(--ay-sans);
	font-size: var(--ay-t-h3);
	font-weight: 600;
}

@media (max-width: 480px) {
	.ayme-feitjes dl > div {
		grid-template-columns: 1fr;
		gap: 0;
	}
}

/* -------------------------------------------------------------------------
   13. Elementor-widgets in de stijl van het thema trekken
   ---------------------------------------------------------------------- */

.ayme-elementor-page .elementor-widget-heading .elementor-heading-title {
	margin: 0;
}

.ayme-elementor-page .ayme-hero__titel .elementor-heading-title {
	font-family: var(--ay-serif);
	font-weight: 400;
	font-size: var(--ay-t-mega);
	line-height: 1.02;
	letter-spacing: -0.02em;
}

.ayme-elementor-page .ayme-hero__titel em {
	font-style: italic;
	color: var(--ay-accent);
}

.ayme-elementor-page .ayme-hero__intro {
	max-width: 34rem;
	color: var(--ay-inkt-zacht);
	font-size: var(--ay-t-groot);
	line-height: 1.65;
}

.ayme-elementor-page .elementor-widget-text-editor {
	color: var(--ay-inkt-zacht);
	font-size: var(--ay-t-groot);
	line-height: 1.75;
}

.ayme-elementor-page .elementor-widget-text-editor h2 {
	margin-top: 1.6em;
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
}

.ayme-elementor-page .elementor-widget-text-editor p + p {
	margin-top: 1.1em;
}

/* Elementor-knoppen in dezelfde vorm als de themaknoppen. */
.ayme-elementor-page .elementor-button {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	padding: 0.85em 1.5em;
	background: var(--ay-inkt);
	border: 1px solid transparent;
	border-radius: var(--ay-r-rond);
	color: #fff;
	font-family: var(--ay-sans);
	font-size: var(--ay-t-klein);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color var(--ay-vlot), transform var(--ay-vlot);
}

.ayme-elementor-page .elementor-button:hover {
	background: var(--ay-accent-diep);
	color: #fff;
}

.ayme-elementor-page .elementor-button:active {
	transform: translateY(1px);
}

/* De hero mag op mobiel wat minder ruimte pakken. */
@media (max-width: 860px) {
	.ayme-elementor-page .ayme-hero {
		padding-top: 40px !important;
	}
}

/* Elementor kleurt koppen standaard met de "primary"-kleur; hier houden we
   de inktkleur van het thema aan, met het accent alleen voor cursieve stukken. */
.ayme-elementor-page .elementor-heading-title {
	color: var(--ay-inkt);
}

.ayme-elementor-page .elementor-heading-title em {
	color: var(--ay-accent);
	font-style: italic;
}

/* -------------------------------------------------------------------------
   14. Correcties
   ---------------------------------------------------------------------- */

/* Het hidden-attribuut moet winnen van display:flex op knoppen en secties.
   Zonder deze regel blijven verborgen stappen en knoppen gewoon zichtbaar. */
[hidden] {
	display: none !important;
}

/* Keuzevakken in het offerteformulier: een vast aantal kolommen leest
   rustiger dan een raster dat zelf gaat rekenen. */
.ayme-opties--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ayme-opties--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 700px) {
	.ayme-opties--2,
	.ayme-opties--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 460px) {
	.ayme-opties--2,
	.ayme-opties--3 {
		grid-template-columns: 1fr;
	}
}

/* Fotostrook past zich aan het aantal foto's aan. */
.ayme-fotos[data-aantal="1"] { grid-template-columns: 1fr; }
.ayme-fotos[data-aantal="2"] { grid-template-columns: repeat(2, 1fr); }
.ayme-fotos[data-aantal="3"] { grid-template-columns: repeat(3, 1fr); }

.ayme-fotos:not([data-aantal="4"]) .ayme-foto--1 {
	grid-row: auto;
	aspect-ratio: 3 / 4;
}

.ayme-fotos:not([data-aantal="4"]) .ayme-foto--4 {
	margin-top: 0;
}

/* -------------------------------------------------------------------------
   15. Terugval zonder JavaScript
   Alle stappen onder elkaar, één verzendknop, geen voortgangsbalk.
   ---------------------------------------------------------------------- */

.no-js .ayme-stapblok[hidden] {
	display: block !important;
	margin-top: 2.5rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--ay-lijn);
}

.no-js [data-ayme-voortgang],
.no-js [data-ayme-vorige],
.no-js [data-ayme-volgende],
.no-js .ayme-overzicht,
.no-js .ayme-stapblok--overzicht .ayme-stapblok__kop,
.no-js .ayme-stapblok--overzicht .ayme-stapblok__intro,
.no-js .ayme-prijskaart {
	display: none !important;
}

.no-js [data-ayme-verstuur] {
	display: inline-flex !important;
	margin-left: auto;
}

/* Op een telefoon staan de scheidingspuntjes onder de hero in de weg. */
/* Op een telefoon staan de scheidingspuntjes in de weg; daarboven passen de
   drie tekstjes prima op één regel. */
@media (max-width: 480px) {
	.ayme-hero__onder {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.35rem;
	}

	.ayme-hero__onder span:nth-child(even) {
		display: none;
	}
}

/* -------------------------------------------------------------------------
   16. Projectfilter op de werk-pagina
   ---------------------------------------------------------------------- */

.ayme-filters {
	margin-bottom: 0.5rem;
}

.ayme-filter[aria-current="true"] {
	background: var(--ay-inkt);
	border-color: var(--ay-inkt);
	color: #fff;
}

/* Kaarten die na het filteren in beeld komen, komen rustig binnen. */
.ayme-projectkaart.is-gefilterd {
	animation: ayme-kaart-in 340ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

@keyframes ayme-kaart-in {
	from {
		opacity: 0;
		transform: translateY(10px) scale(0.985);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.ayme-projecten__grid:focus {
	outline: none;
}

.ayme-tekstknop {
	background: none;
	border: 0;
	padding: 0;
	color: var(--ay-accent-diep);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.ayme-tekstknop:hover {
	color: var(--ay-accent);
}

/* -------------------------------------------------------------------------
   17. Offerte: keuzes onder elkaar en "inbegrepen"-onderdelen
   ---------------------------------------------------------------------- */

/* Eén brede keuze per regel. Geeft lucht bij vragen met een korte uitleg. */
.ayme-opties--1 {
	grid-template-columns: 1fr;
}

.ayme-opties--1 .ayme-optie__vak {
	align-items: center;
	padding: 1.15rem 1.25rem;
	gap: 1rem;
}

.ayme-opties--1 .ayme-optie__icoon {
	width: 42px;
	height: 42px;
}

.ayme-opties--1 .ayme-optie__icoon .ayme-icon {
	font-size: 20px;
	width: 1em;
	height: 1em;
}

.ayme-opties--1 .ayme-optie__label {
	font-size: 1rem;
}

.ayme-opties--1 .ayme-optie__hint {
	font-size: var(--ay-t-klein);
}

/* Onderdelen die al meekomen met een andere keuze. */
.ayme-optie__inbegrepen {
	display: none;
	margin-top: 2px;
	color: #1d6d49;
	font-size: var(--ay-t-mini);
	font-weight: 600;
}

.ayme-optie.is-inbegrepen .ayme-optie__inbegrepen {
	display: block;
}

.ayme-optie.is-inbegrepen .ayme-optie__vak {
	background: rgba(47, 158, 107, 0.08);
	border-color: rgba(47, 158, 107, 0.35);
	box-shadow: none;
	cursor: default;
}

.ayme-optie.is-inbegrepen .ayme-optie__merk {
	background: var(--ay-groen);
	border-color: var(--ay-groen);
	color: #fff;
}

/* Wat er sowieso bij zit. */
.ayme-inbegrepen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	margin: 1rem 0 0;
	padding: 0.85rem 1.1rem;
	background: var(--ay-papier);
	border: 1px solid var(--ay-lijn);
	border-radius: var(--ay-r);
	font-size: var(--ay-t-mini);
}

.ayme-inbegrepen__kop {
	color: var(--ay-grijs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ayme-inbegrepen__item {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	color: var(--ay-inkt-zacht);
	font-weight: 500;
}

.ayme-inbegrepen__item .ayme-icon {
	font-size: 0.95em;
	width: 1em;
	height: 1em;
	color: var(--ay-groen);
	stroke-width: 2.6;
}

/* Onderdelen waar geen vast bedrag op zit. */
.ayme-optie__opmaat {
	display: block;
	margin-top: 2px;
	color: var(--ay-accent-diep);
	font-size: var(--ay-t-mini);
	font-weight: 600;
}

.ayme-prijskaart__opmaat {
	margin: 0.5rem 0 0;
	padding-top: 0.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.72);
	font-size: var(--ay-t-mini);
	line-height: 1.5;
}

/* -------------------------------------------------------------------------
   18. Handtekening van de bouwer (Dev Signature-plugin)
   ---------------------------------------------------------------------- */

/* In de footerbalk staat de handtekening tussen het copyright en de kleine
   links. Iets meer contrast dan de tekst eromheen, zodat hij leesbaar blijft
   zonder de aandacht op te eisen. */
.ayme-footer__onder .devsig {
	flex: 0 1 auto;
	color: rgba(255, 255, 255, 0.6);
}

.ayme-footer__onder .devsig__link {
	padding-block: 0.4em;
}

@media (max-width: 720px) {
	.ayme-footer__onder .devsig {
		order: 3;
		width: 100%;
		justify-content: flex-start;
	}
}

/* -------------------------------------------------------------------------
   19. Lucht tussen de inhoud en het oproepblok
   ---------------------------------------------------------------------- */

/* In de sjablonen van het thema (werk, project, bericht) volgt het oproepblok
   direct op de inhoud. Op Elementor-pagina's regelt de container de ruimte al,
   dus daar blijft dit uit. */
.ayme-cta {
	margin-top: clamp(3rem, 6vw, 5rem);
}

.elementor-element .ayme-cta {
	margin-top: 0;
}


/* -------------------------------------------------------------------------
   20. Iconen als Font Awesome
   De maat staat overal in font-size, met een vierkant vak van 1em eromheen.
   Zo levert dezelfde regel het juiste formaat op voor een letterglyph én voor
   de SVG-terugval van het thema.
   ---------------------------------------------------------------------- */

/* Bewust geen display hier: dat zou regels als .ayme-menuknop__dicht
   overrulen, en dan staan het menu-icoon en het kruisje tegelijk aan.
   Font Awesome zet zelf al inline-block, dat is precies goed. */
i.ayme-icon {
	line-height: 1;
	text-align: center;
	font-style: normal;
	overflow: visible;
}

/* -------------------------------------------------------------------------
   21. De adminbalk van WordPress
   Ben je ingelogd als beheerder, dan staat er een balk van 32 px boven de
   pagina. De vaste header en het mobiele menu moeten daar rekening mee houden,
   anders schuift de header eronder en valt het eerste menu-item weg.
   ---------------------------------------------------------------------- */

body.admin-bar {
	--ay-adminbar: 32px;
}

/* Ook op :root zetten, zodat scroll-padding-top op <html> het meekrijgt. */
:root:has(body.admin-bar) {
	--ay-adminbar: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar,
	:root:has(body.admin-bar) {
		--ay-adminbar: 46px;
	}
}

/* Onder 600 px zet WordPress de balk op absoluut: hij scrollt dan gewoon mee
   en de header hoeft er niets meer voor vrij te houden. */
@media screen and (max-width: 600px) {
	body.admin-bar,
	:root:has(body.admin-bar) {
		--ay-adminbar: 0px;
	}
}

/* -------------------------------------------------------------------------
   22. Zijmarge voor Elementor-secties
   Een boxed container van Elementor centreert de inhoud tot de ingestelde
   breedte, maar heeft daaronder geen zijmarge van zichzelf. Op een venster dat
   smaller is dan die breedte plakt alles daardoor tegen de rand. Hier geven we
   ze dezelfde marge als de rest van het thema, zonder een padding te
   overschrijven die je in Elementor zelf groter hebt gezet.
   ---------------------------------------------------------------------- */

@media (max-width: 1260px) {
	.ayme-elementor-page .e-con > .e-con-inner {
		padding-inline:
			max(var(--ay-marge-sectie), var(--padding-inline-start, 0px))
			max(var(--ay-marge-sectie), var(--padding-inline-end, 0px));
	}

	/* Binnenste containers (de kolommen van een rij) hebben die marge al van
	   hun ouder; die zou anders dubbel tellen. */
	.ayme-elementor-page .e-con .e-con > .e-con-inner {
		padding-inline: var(--padding-inline-start, 0px) var(--padding-inline-end, 0px);
	}
}


/* -------------------------------------------------------------------------
   23. Smalle en middelgrote schermen
   Zodra een blok één kolom wordt, groeit alles wat erin zit mee. Zonder
   grenzen worden een portretfoto en een projectbeeld dan schermvullend, en
   dat leest als een fout. Hier zetten we die grenzen.
   ---------------------------------------------------------------------- */

/* Vanaf hier zet Elementor de hero onder elkaar en wordt het visitekaartje
   even breed als de pagina. Zonder grens groeit de foto dan mee tot ruim
   duizend pixels hoog. */
@media (max-width: 1024px) {
	.ayme-visite {
		max-width: 420px;
	}

	.ayme-visite__foto img {
		aspect-ratio: 4 / 3;
		object-position: center 22%;
	}

	.ayme-visite__body {
		padding: 1.15rem 1.25rem 1.35rem;
	}

	.ayme-visite__naam {
		font-size: 1.3rem;
	}
}

@media (max-width: 900px) {
	.ayme-projectkaart__body {
		gap: 0.45rem;
	}

	/* De cijferbalk compacter: kleinere cijfers, minder lucht. */
	.ayme-stat__waarde {
		font-size: clamp(2.2rem, 1.6rem + 2vw, 2.9rem);
	}

	.ayme-stat {
		padding-top: 1.1rem;
	}

	.ayme-stat__label {
		max-width: 22ch;
		margin-top: 0.5rem;
	}
}

@media (min-width: 700px) {
	.ayme-stats {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 620px) {
	.ayme-visite {
		max-width: none;
	}

	.ayme-koffie,
	.ayme-dienst,
	.ayme-review,
	.ayme-gerust li,
	.ayme-feitjes {
		padding: 1.25rem 1.35rem;
	}

	.ayme-contactrij {
		padding: 1rem 1.1rem;
		gap: 0.85rem;
	}
}

/* -------------------------------------------------------------------------
   24. Elementor-widgets een vaste breedte geven
   Een widget in een flex-container krijgt zijn hoogte berekend alsof hij zo
   smal mogelijk mag zijn. Bij een raster met auto-fit levert dat de hoogte op
   van één kolom, terwijl er twee naast elkaar getekend worden — en dus een gat
   onder de sectie van honderden pixels. Een expliciete breedte haalt die
   onzekerheid weg.

   Let op: hier stond eerst var(--width, 100%), zodat een eigen breedte uit
   Elementor voorrang zou krijgen. Dat pakte verkeerd uit — --width erft over
   van de container erboven, dus een widget in een kolom van 57% werd 57% van
   die 57%. Wil je één widget smaller, zet die breedte dan op de container
   eromheen in plaats van op de widget zelf.
   ---------------------------------------------------------------------- */

.ayme-elementor-page .e-con > .elementor-widget,
.ayme-elementor-page .e-con-inner > .elementor-widget {
	width: 100%;
}


/* -------------------------------------------------------------------------
   25. Projectkaarten op middelgrote schermen
   Eén kaart per rij maakt het beeld schermvullend en het scrollen eindeloos.
   Twee naast elkaar leest als een portfolio en houdt de kaart hanteerbaar.
   ---------------------------------------------------------------------- */

@media (min-width: 520px) and (max-width: 1024px) {
	.ayme-projecten__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Onder de twee kolommen staat de kaart over de volle breedte; dan is een
   breder beeld prettiger dan een hoog. */
@media (max-width: 519px) {
	.ayme-projectkaart__media {
		aspect-ratio: 16 / 10;
	}
}


/* -------------------------------------------------------------------------
   26. De desktopindeling vastzetten
   Boven 1024 px hoort het ontwerp er altijd hetzelfde uit te zien. Met
   auto-fit hing het aantal kolommen af van de vensterbreedte, en dan viel een
   rij van drie op een smallere laptop ineens terug naar twee. Hier staat per
   blok hoeveel kolommen het zijn; daaronder nemen de responsieve regels het
   over.
   ---------------------------------------------------------------------- */

@media (min-width: 1025px) {
	.ayme-diensten__grid,
	.ayme-reviews__grid,
	.ayme-projecten__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ayme-waarom__grid,
	.ayme-stats {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}