/*
Theme Name: Garage Gert Post
Description: Thema voor Garage Gert Post, Steenwijk. Child theme van Twenty Twenty-Five.
Template: twentytwentyfive
Version: 1.1.10
Text Domain: garagegertpost
*/

:root {
	--ggp-rood: #cd1c1a;
	--ggp-rood-donker: #a81614;
	--ggp-vlag-groen: #008c45;
	--ggp-groen: #14161b;
	--ggp-groen-licht: #ffffff;
	--ggp-wit-vlag: #f4f5f0;
	--ggp-rood-vlag: #cd212a;
	--ggp-groen-donker: #111111;
	--ggp-donker: #14161b;
	--ggp-goud: #c9a15a;
	--ggp-wijn: #7d1020;
	--ggp-rood-licht: #ff5a4d;
	--ggp-tekst: #2c2b29;
	--ggp-grijs: #f6f1e9;
	--ggp-lijn: #e7dfd2;
}

body {
	color: var(--ggp-tekst);
}

/* ---------- Header ---------- */

.ggp-topbar {
	background: #fff;
	padding-top: 18px;
	padding-bottom: 18px;
}

.ggp-logo img {
	display: block;
	height: auto;
}

.ggp-info {
	gap: 34px;
}

.ggp-info .ggp-info-item {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.35;
	padding-left: 14px;
	border-left: 3px solid var(--ggp-groen);
}

.ggp-info .ggp-info-item strong {
	display: block;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #777;
}

.ggp-info .ggp-info-item a {
	color: var(--ggp-tekst);
	font-weight: 700;
	text-decoration: none;
}

/* ---------- Algemeen ---------- */

.ggp-section {
	padding-top: 72px;
	padding-bottom: 72px;
	margin-top: 0;
	margin-bottom: 0;
}

.wp-block-post-content > .alignfull {
	margin-top: 0;
	margin-bottom: 0;
}

.ggp-grijs {
	background: var(--ggp-grijs);
}

.ggp-donker {
	background: var(--ggp-donker);
	color: #fff;
}

.ggp-donker h2,
.ggp-donker h3 {
	color: #fff;
}

.ggp-section h2 {
	font-size: clamp(1.6rem, 2.6vw, 2.2rem);
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 0.6em;
}

.ggp-kicker {
	margin: 0 0 8px;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ggp-rood);
}

.ggp-donker .ggp-kicker {
	color: var(--ggp-groen);
}

.ggp-section a:not(.wp-block-button__link) {
	color: var(--ggp-rood);
}

.wp-block-button.ggp-btn-rood .wp-block-button__link,
.wp-block-button.ggp-btn-groen .wp-block-button__link,
.wp-block-button.ggp-btn-licht .wp-block-button__link {
	border-radius: 3px;
	font-weight: 700;
	padding: 14px 26px;
	border: 2px solid transparent;
}

.wp-block-button.ggp-btn-rood .wp-block-button__link {
	background: var(--ggp-rood);
	color: #fff;
}

.wp-block-button.ggp-btn-rood .wp-block-button__link:hover {
	background: var(--ggp-rood-donker);
}

.wp-block-button.ggp-btn-groen .wp-block-button__link {
	background: var(--ggp-groen);
	color: var(--ggp-donker);
}

.wp-block-button.ggp-btn-groen .wp-block-button__link:hover {
	background: #000000;
}

.wp-block-button.ggp-btn-licht .wp-block-button__link {
	background: transparent;
	color: #fff;
	border-color: #fff;
}

.wp-block-button.ggp-btn-licht .wp-block-button__link:hover {
	background: #fff;
	color: var(--ggp-donker);
}

/* ---------- Hero ---------- */

.ggp-hero.wp-block-cover {
	padding-top: 64px;
	padding-bottom: 64px;
}

.ggp-hero .wp-block-cover__background {
	background: linear-gradient(90deg, rgba(18, 18, 18, 0.88) 0%, rgba(18, 18, 18, 0.7) 45%, rgba(18, 18, 18, 0.25) 100%) !important;
	opacity: 1 !important;
}

.ggp-hero .wp-block-cover__inner-container {
	color: #fff;
}

.ggp-hero h1 {
	font-size: clamp(2.1rem, 5vw, 3.6rem);
	font-weight: 700;
	line-height: 1.08;
	max-width: 15em;
	margin: 0 0 18px;
	color: #fff;
}

.ggp-hero h1 em {
	font-style: normal;
	color: var(--ggp-groen);
}

.ggp-hero .ggp-hero-tekst {
	font-size: clamp(1.05rem, 1.6vw, 1.3rem);
	max-width: 34em;
	margin: 0 0 30px;
}

.ggp-hero .ggp-kicker {
	color: var(--ggp-groen);
}

/* ---------- Contactblok (welkom) ---------- */

.ggp-callout {
	background: var(--ggp-groen);
	color: var(--ggp-donker);
	padding: 30px 32px;
	border-radius: 4px;
}

.ggp-callout h3 {
	margin-top: 0;
	font-size: 1.5rem;
	font-weight: 700;
}

.ggp-section .ggp-callout a:not(.wp-block-button__link) {
	color: var(--ggp-donker);
	font-weight: 700;
}

/* ---------- Dienstenkaarten ---------- */

.ggp-kaart {
	background: #fff;
	border: 1px solid var(--ggp-lijn);
	border-top: 4px solid var(--ggp-rood);
	border-radius: 4px;
	padding: 26px 26px 22px;
	height: 100%;
	box-sizing: border-box;
}

.ggp-kaart h3 {
	margin: 0 0 10px;
	font-size: 1.25rem;
	font-weight: 700;
}

.ggp-kaart p {
	margin: 0;
	font-size: 0.98rem;
}

.ggp-kaarten.wp-block-columns {
	margin-bottom: 24px;
}

/* ---------- Foto's ---------- */

.ggp-foto img {
	width: 100%;
	height: auto;
	border-radius: 4px;
	display: block;
}

.ggp-lijst li {
	margin-bottom: 6px;
}

.ggp-donker .ggp-lijst li::marker {
	color: var(--ggp-groen);
}

.ggp-autoprofijt img {
	max-width: 320px;
	height: auto;
}

/* ---------- Contact ---------- */

.ggp-contact-gegevens p {
	margin: 0 0 14px;
}

.ggp-contact-gegevens strong {
	display: block;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #777;
}

/* ---------- Occasions ---------- */

.ggp-occ-raster {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 26px;
	margin-top: 32px;
}

.ggp-section a.ggp-occ-kaart {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--ggp-lijn);
	border-radius: 4px;
	overflow: hidden;
	color: var(--ggp-tekst);
	text-decoration: none;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.ggp-section a.ggp-occ-kaart:hover,
.ggp-section a.ggp-occ-kaart:focus-visible {
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
	transform: translateY(-2px);
}

.ggp-occ-foto,
.ggp-occ-groot {
	position: relative;
	background: #e9e9e6;
}

.ggp-occ-foto {
	aspect-ratio: 4 / 3;
}

.ggp-occ-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ggp-occ-geenfoto {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 220px;
	color: #888;
	font-size: 0.95rem;
}

.ggp-occ-status {
	position: absolute;
	top: 12px;
	left: 12px;
	background: var(--ggp-donker);
	color: #fff;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 5px 10px;
	border-radius: 3px;
}

.ggp-occ-status-verkocht {
	background: var(--ggp-rood);
}

.ggp-occ-tekst {
	padding: 18px 20px 20px;
	border-top: 4px solid var(--ggp-rood);
	flex: 1;
}

.ggp-occ-tekst h3 {
	margin: 0 0 6px;
	font-size: 1.2rem;
	line-height: 1.25;
}

.ggp-occ-specs {
	margin: 0 0 12px;
	font-size: 0.92rem;
	color: #666;
}

.ggp-occ-prijs {
	margin: 0;
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--ggp-donker);
}

.ggp-occ-leeg {
	margin-top: 28px;
	padding: 22px 24px;
	background: var(--ggp-grijs);
	border-left: 4px solid var(--ggp-groen);
}

.ggp-occ-pagina .wp-block-post-title {
	font-size: clamp(1.8rem, 3.4vw, 2.6rem);
	line-height: 1.15;
	margin: 0 0 28px;
}

.ggp-occ-pagina .ggp-kicker a {
	color: var(--ggp-rood);
	text-decoration: none;
}

.ggp-occ-detail {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: 36px;
	align-items: start;
}

.ggp-occ-groot img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 4px;
}

.ggp-occ-duimen {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

.ggp-occ-duimen button {
	padding: 0;
	border: 2px solid transparent;
	border-radius: 3px;
	background: none;
	cursor: pointer;
	line-height: 0;
}

.ggp-occ-duimen button:hover,
.ggp-occ-duimen button:focus-visible {
	border-color: var(--ggp-rood);
}

.ggp-occ-duimen img {
	width: 84px;
	height: 64px;
	object-fit: cover;
	border-radius: 2px;
	display: block;
}

.ggp-occ-info {
	background: var(--ggp-grijs);
	border-top: 4px solid var(--ggp-rood);
	border-radius: 4px;
	padding: 26px 28px;
}

.ggp-occ-info .ggp-occ-prijs {
	font-size: 2rem;
	margin-bottom: 16px;
}

.ggp-occ-lijst {
	margin: 0 0 22px;
}

.ggp-occ-lijst > div {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 9px 0;
	border-bottom: 1px solid var(--ggp-lijn);
}

.ggp-occ-lijst dt {
	color: #666;
}

.ggp-occ-lijst dd {
	margin: 0;
	font-weight: 700;
	text-align: right;
}

.ggp-occ-knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}

.ggp-section a.ggp-occ-knop {
	display: inline-block;
	background: var(--ggp-rood);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	padding: 12px 20px;
	border-radius: 3px;
}

.ggp-section a.ggp-occ-knop:hover {
	background: var(--ggp-rood-donker);
}

.ggp-section a.ggp-occ-knop-groen {
	background: var(--ggp-groen);
	color: var(--ggp-donker);
}

.ggp-section a.ggp-occ-knop-groen:hover {
	background: #000000;
}

.ggp-occ-omschrijving {
	margin-top: 44px;
	max-width: 760px;
}

@media (max-width: 781px) {
	.ggp-occ-detail {
		grid-template-columns: 1fr;
	}
}

.ggp-occ-filter {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 14px 20px;
	margin-top: 28px;
	padding: 16px 20px;
	background: var(--ggp-grijs);
	border-radius: 4px;
}

.ggp-occ-filter label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 0.85rem;
	font-weight: 700;
}

.ggp-occ-filter select,
.ggp-occ-filter button {
	font: inherit;
	font-size: 1rem;
	padding: 9px 12px;
	border: 1px solid #bbb;
	border-radius: 3px;
	background: #fff;
	color: var(--ggp-tekst);
}

.ggp-occ-filter button {
	background: var(--ggp-donker);
	border-color: var(--ggp-donker);
	color: #fff;
	font-weight: 700;
	cursor: pointer;
}

.ggp-occ-opties {
	margin-top: 44px;
}

.ggp-occ-opties ul {
	columns: 2;
	column-gap: 40px;
	max-width: 760px;
	padding-left: 1.2em;
}

/* ---------- Dienstenpagina's ---------- */

.ggp-section h1 {
	font-size: clamp(1.9rem, 3.6vw, 2.8rem);
	font-weight: 700;
	line-height: 1.12;
	margin: 0 0 0.5em;
}

.ggp-donker h1 {
	color: #fff;
}

.ggp-kaart h3 a,
.ggp-section .ggp-kaart h3 a:not(.wp-block-button__link) {
	color: var(--ggp-donker);
	text-decoration: none;
}

.ggp-kaart h3 a:hover {
	color: var(--ggp-rood);
	text-decoration: underline;
}

.ggp-afsluiter {
	text-align: center;
}

.ggp-afsluiter .wp-block-buttons {
	justify-content: center;
}

.ggp-afsluiter p {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

/* ---------- Openingstijden, kaart, reviews ---------- */

.ggp-tijden {
	border-collapse: collapse;
	width: 100%;
	max-width: 360px;
	margin: 0 0 18px;
}

.ggp-tijden th,
.ggp-tijden td {
	padding: 7px 0;
	border-bottom: 1px solid var(--ggp-lijn);
	text-align: left;
	font-weight: 400;
}

.ggp-tijden td {
	text-align: right;
}

.ggp-tijden .ggp-vandaag th,
.ggp-tijden .ggp-vandaag td {
	font-weight: 700;
	color: var(--ggp-donker);
}

.ggp-bedrijfsregel {
	font-size: 0.9rem;
	color: #666;
}

.ggp-footer .ggp-bedrijfsregel {
	color: #9a9a9a;
	margin-top: 10px;
}

.ggp-route iframe {
	width: 100%;
	height: 420px;
	border: 1px solid var(--ggp-lijn);
	border-radius: 4px;
	display: block;
}

.ggp-kaart-knop {
	margin-top: 16px;
}

.ggp-binnen {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 var(--wp--style--root--padding-right, 20px) 0 var(--wp--style--root--padding-left, 20px);
}

.ggp-reviews-raster {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
	margin-top: 28px;
}

.ggp-review {
	margin: 0;
	background: #fff;
	border: 1px solid var(--ggp-lijn);
	border-radius: 4px;
	padding: 24px 26px;
}

.ggp-sterren {
	color: #e8a700;
	font-size: 1.2rem;
	letter-spacing: 2px;
}

.ggp-sterren span {
	color: #d5d5d0;
}

.ggp-review blockquote {
	margin: 10px 0 12px;
	padding: 0;
	border: 0;
	font-size: 1rem;
}

.ggp-review blockquote p {
	margin: 0 0 8px;
}

.ggp-review figcaption {
	font-weight: 700;
	color: var(--ggp-donker);
}

.ggp-reviews-link {
	margin-top: 24px;
}

.ggp-reviews-raster:empty {
	display: none;
}

.ggp-score {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-top: 20px;
}

.ggp-score-cijfer {
	font-size: 3.4rem;
	font-weight: 700;
	line-height: 1;
	color: var(--ggp-donker);
}

.ggp-score .ggp-sterren {
	font-size: 1.6rem;
}

.ggp-score p {
	margin: 2px 0 0;
}

.ggp-formulier .ggp-formulier-privacy {
	font-size: 0.88rem;
	color: #555;
}

.ggp-privacy {
	max-width: 760px;
}

.ggp-privacy h2 {
	margin-top: 1.6em;
}

/* ---------- Afspraakformulier ---------- */

.ggp-formulier {
	background: var(--ggp-grijs);
	border-top: 4px solid var(--ggp-rood);
	border-radius: 4px;
	padding: 26px 28px;
	scroll-margin-top: 20px;
}

.ggp-formulier p {
	margin: 0 0 16px;
}

.ggp-formulier label {
	display: block;
	font-weight: 700;
	font-size: 0.95rem;
	margin-bottom: 5px;
	color: var(--ggp-donker);
}

.ggp-formulier input,
.ggp-formulier select,
.ggp-formulier textarea {
	width: 100%;
	box-sizing: border-box;
	font: inherit;
	padding: 11px 12px;
	border: 1px solid #bbb;
	border-radius: 3px;
	background: #fff;
	color: var(--ggp-tekst);
}

.ggp-formulier input:focus,
.ggp-formulier select:focus,
.ggp-formulier textarea:focus {
	outline: 2px solid var(--ggp-groen-donker);
	outline-offset: 1px;
}

.ggp-veld-rij {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 18px;
}

.ggp-veld-web {
	position: absolute;
	left: -9999px;
}

.ggp-formulier button.ggp-occ-knop {
	border: 0;
	font: inherit;
	font-weight: 700;
	background: var(--ggp-rood);
	color: #fff;
	padding: 14px 26px;
	border-radius: 3px;
	cursor: pointer;
}

.ggp-formulier button.ggp-occ-knop:hover {
	background: var(--ggp-rood-donker);
}

.ggp-melding {
	padding: 16px 18px;
	border-radius: 3px;
	margin-bottom: 18px;
	background: #fff;
	border-left: 4px solid var(--ggp-groen-donker);
}

.ggp-melding-fout {
	border-left-color: var(--ggp-rood);
}

@media (max-width: 600px) {
	.ggp-veld-rij {
		grid-template-columns: 1fr;
	}

	.ggp-occ-opties ul {
		columns: 1;
	}
}

/* ---------- Footer ---------- */

.ggp-footer {
	background: var(--ggp-donker);
	color: #cfcfcf;
	border-top: 4px solid var(--ggp-groen);
	padding-top: 22px;
	padding-bottom: 22px;
	margin-top: 0;
	font-size: 0.92rem;
}

.ggp-footer p {
	margin: 0;
}

.ggp-footer a {
	color: #fff;
}

/* ---------- Mobiel ---------- */

@media (max-width: 781px) {
	.ggp-section {
		padding-top: 48px;
		padding-bottom: 48px;
	}

	.ggp-info .ggp-info-item:not(.ggp-info-telefoon) {
		display: none;
	}

	.ggp-logo img {
		width: 190px !important;
	}

	.ggp-hero.wp-block-cover {
		min-height: 440px !important;
	}

	.ggp-hero .wp-block-cover__background {
		background: rgba(18, 18, 18, 0.74) !important;
	}
}

.ggp-sterren-deel {
	display: inline-block;
	background: linear-gradient(90deg, #e8a700 var(--ggp-deel, 100%), #d5d5d0 var(--ggp-deel, 100%));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ---------- Menubalk ---------- */

header.wp-block-template-part {
	display: contents;
}

.ggp-nav {
	background: var(--ggp-donker);
	border-bottom: 3px solid var(--ggp-groen);
	margin-top: 0;
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.ggp-nav-binnen {
	gap: 20px;
	min-height: 58px;
}

.ggp-nav .wp-block-navigation {
	font-size: 0.98rem;
	font-weight: 700;
	gap: 2px;
}

.ggp-nav .wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
	display: block;
	color: #fff;
	padding: 19px 14px 18px;
	text-decoration: none;
	transition: color 0.15s ease;
}

.ggp-nav .wp-block-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 10px;
	height: 3px;
	border-radius: 2px;
	background: var(--ggp-groen);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.18s ease;
}

.ggp-nav .wp-block-navigation .wp-block-navigation-item__content:hover,
.ggp-nav .wp-block-navigation .wp-block-navigation-item__content:focus-visible,
.ggp-nav .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	color: var(--ggp-groen);
}

.ggp-nav .wp-block-navigation .wp-block-navigation-item__content:hover::after,
.ggp-nav .wp-block-navigation .wp-block-navigation-item__content:focus-visible::after,
.ggp-nav .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

.ggp-nav .wp-block-button.ggp-nav-knop .wp-block-button__link {
	background: var(--ggp-rood);
	color: #fff;
	font-weight: 700;
	font-size: 0.95rem;
	padding: 10px 20px;
	border-radius: 3px;
	white-space: nowrap;
}

.ggp-nav .wp-block-button.ggp-nav-knop .wp-block-button__link:hover {
	background: var(--ggp-rood-donker);
}

.ggp-nav .wp-block-navigation__responsive-container-open,
.ggp-nav .wp-block-navigation__responsive-container-close {
	color: #fff;
}

.ggp-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--ggp-donker);
	padding: 24px;
}

.ggp-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.25rem;
	padding: 12px 0;
}

.ggp-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	display: none;
}

@media (max-width: 1120px) {
	.ggp-nav .wp-block-navigation .wp-block-navigation-item__content {
		padding-left: 10px;
		padding-right: 10px;
	}

	.ggp-nav .wp-block-navigation .wp-block-navigation-item__content::after {
		left: 10px;
		right: 10px;
	}
}

@media (max-width: 1020px) and (min-width: 600px) {
	.ggp-nav .wp-block-buttons {
		display: none;
	}
}

/* ---------- Pluspunten onder de grote foto ---------- */

.ggp-hero.wp-block-cover {
	padding-bottom: 120px;
}

.ggp-usp {
	position: relative;
	z-index: 2;
	margin-top: -62px !important;
	padding-top: 0;
	padding-bottom: 0;
	background: transparent;
}

.ggp-usp .wp-block-columns {
	margin: 0;
	gap: 0;
	background: #fff;
	border-radius: 6px;
	border-bottom: 4px solid var(--ggp-groen);
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
}

.ggp-usp .wp-block-column {
	display: grid;
	grid-template-columns: 48px 1fr;
	align-items: center;
	gap: 14px;
	padding: 24px 22px;
	border-left: 1px solid var(--ggp-lijn);
}

.ggp-usp .wp-block-column:first-child {
	border-left: 0;
}

.ggp-usp .wp-block-column::before {
	content: "";
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: var(--ggp-groen);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 24px 24px;
}

.ggp-usp .wp-block-column:nth-child(1)::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E");
}

.ggp-usp .wp-block-column:nth-child(2)::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E");
}

.ggp-usp .wp-block-column:nth-child(3)::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
}

.ggp-usp .wp-block-column:nth-child(4)::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3Cline x1='7' y1='7' x2='7.01' y2='7'/%3E%3C/svg%3E");
}

.ggp-usp p {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.35;
	color: #666;
}

.ggp-usp p strong {
	display: block;
	font-size: 1.05rem;
	color: var(--ggp-donker);
}

.ggp-section .ggp-usp p strong a,
.ggp-usp p strong a {
	color: var(--ggp-donker);
	text-decoration: none;
}

.ggp-usp p strong a:hover {
	color: var(--ggp-rood);
}

@media (max-width: 781px) {
	.ggp-hero.wp-block-cover {
		padding-bottom: 90px;
	}

	.ggp-usp {
		margin-top: -44px !important;
	}

	.ggp-usp .wp-block-column {
		border-left: 0;
		border-top: 1px solid var(--ggp-lijn);
		padding: 16px 18px;
	}

	.ggp-usp .wp-block-column:first-child {
		border-top: 0;
	}
}

/* Mobiel menu: donkere achtergrond, en ankers niet onder de vaste menubalk. */

.ggp-nav .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--ggp-donker) !important;
	color: #fff !important;
}

.ggp-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 56px;
}

html {
	scroll-padding-top: 84px;
}

/* Twee of vier reviews: twee naast elkaar, zodat er geen losse kaart overblijft. */
@media (min-width: 700px) {
	.ggp-reviews-raster.ggp-reviews-2,
	.ggp-reviews-raster.ggp-reviews-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ---------- Cookiemelding en kaart na toestemming ---------- */

.ggp-route-leeg {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-height: 320px;
	padding: 30px 24px;
	text-align: center;
	background: #e9e9e6;
	border: 1px solid var(--ggp-lijn);
	border-radius: 4px;
}

.ggp-route-leeg p {
	margin: 0;
	max-width: 440px;
}

.ggp-route-leeg p strong {
	display: block;
	font-size: 1.15rem;
	color: var(--ggp-donker);
}

.ggp-route-leeg button.ggp-occ-knop {
	border: 0;
	font: inherit;
	font-weight: 700;
	background: var(--ggp-rood);
	color: #fff;
	padding: 12px 22px;
	border-radius: 3px;
	cursor: pointer;
}

.ggp-cookiebalk {
	position: fixed;
	left: 16px;
	right: 16px;
	bottom: 16px;
	z-index: 100;
	max-width: 760px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 22px;
	padding: 18px 22px;
	background: var(--ggp-donker);
	color: #e6e6e6;
	border-top: 4px solid var(--ggp-groen);
	border-radius: 6px;
	box-shadow: 0 12px 34px rgba(0, 0, 0, 0.3);
	font-size: 0.95rem;
	line-height: 1.5;
}

.ggp-cookiebalk[hidden] {
	display: none;
}

.ggp-cookiebalk p {
	margin: 0;
	flex: 1 1 340px;
}

.ggp-cookiebalk strong {
	color: #fff;
}

.ggp-cookiebalk a {
	color: var(--ggp-groen);
}

.ggp-cookiebalk-knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ggp-cookiebalk button {
	font: inherit;
	font-weight: 700;
	padding: 10px 18px;
	border-radius: 3px;
	border: 2px solid transparent;
	cursor: pointer;
}

.ggp-cookie-ja {
	background: var(--ggp-groen);
	color: var(--ggp-donker);
}

.ggp-cookie-nee {
	background: transparent;
	color: #fff;
	border-color: #8a8a8a !important;
}

/* ---------- Contactblok op de startpagina: drie kaarten ---------- */

.ggp-contact-kaarten.wp-block-columns {
	gap: 24px;
	margin-top: 28px;
	margin-bottom: 0;
}

.ggp-contact-kaart {
	background: var(--ggp-grijs);
	border-top: 4px solid var(--ggp-rood);
	border-radius: 4px;
	padding: 28px 28px 26px;
	box-sizing: border-box;
}

.ggp-contact-kaart.ggp-autoprofijt {
	border-top-color: var(--ggp-groen);
}

.ggp-contact-kaart h3 {
	margin: 0 0 16px;
	font-size: 1.3rem;
	font-weight: 700;
}

.ggp-contact-kaart .ggp-tijden {
	max-width: none;
	margin-bottom: 0;
}

.ggp-contact-kaart .ggp-tijden th,
.ggp-contact-kaart .ggp-tijden td {
	border-bottom-color: #dcdcd7;
}

.ggp-contact-kaart .wp-block-buttons {
	margin-top: 20px;
	gap: 10px;
}

.ggp-contact-kaart .wp-block-button .wp-block-button__link {
	padding: 12px 18px;
}

.ggp-contact-kaart.ggp-autoprofijt .wp-block-image {
	margin: 0 0 16px;
	background: #fff;
	border-radius: 4px;
	padding: 16px 18px;
}

.ggp-contact-kaart.ggp-autoprofijt img {
	max-width: 100%;
	width: 260px;
	height: auto;
	display: block;
	margin: 0 auto;
}

.ggp-contact-kaart.ggp-autoprofijt p {
	margin: 0 0 10px;
	font-size: 0.98rem;
}

/* ---------- Dienstenpagina's: smalle tekstkolom, links naar andere diensten, klikbare kaarten ---------- */

.ggp-smal {
	max-width: 760px;
}

.ggp-smal h3 {
	margin: 1.4em 0 0.4em;
	font-size: 1.25rem;
}

.ggp-dienstlinks {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 18px 0 0;
}

.ggp-section .ggp-dienstlinks a:not(.wp-block-button__link) {
	display: inline-block;
	padding: 10px 16px;
	background: var(--ggp-grijs);
	border: 1px solid var(--ggp-lijn);
	border-left: 4px solid var(--ggp-rood);
	border-radius: 3px;
	color: var(--ggp-donker);
	font-weight: 700;
	text-decoration: none;
}

.ggp-section .ggp-dienstlinks a:not(.wp-block-button__link):hover {
	background: #fff;
	border-left-color: var(--ggp-groen);
}

.ggp-kaart {
	position: relative;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.ggp-kaart h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.ggp-kaart:has(h3 a):hover {
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
}

.ggp-kaart:has(h3 a) h3 a::before {
	content: "→";
	float: right;
	color: var(--ggp-rood);
	font-weight: 400;
}

/* ---------- Over ons: het verhaal van Gert ---------- */

.ggp-verhaal {
	flex-basis: 60% !important;
}

.ggp-verhaal-foto {
	flex-basis: 40% !important;
}

.ggp-verhaal .ggp-intro {
	font-size: 1.18rem;
	line-height: 1.6;
	color: var(--ggp-donker);
	padding-left: 18px;
	border-left: 4px solid var(--ggp-groen);
}

.ggp-verhaal h2 {
	margin-top: 1.5em;
	font-size: 1.5rem;
}

.ggp-verhaal .ggp-handtekening {
	font-size: 1.3rem;
	font-weight: 700;
	font-style: italic;
	color: var(--ggp-rood);
	margin-top: 0;
}

@media (min-width: 782px) {
	.ggp-verhaal-foto .ggp-foto {
		position: sticky;
		top: 100px;
	}
}

.ggp-verhaal-foto .ggp-bijschrift {
	margin: 8px 0 22px;
	font-size: 0.92rem;
	font-weight: 700;
	color: #666;
}

@media (min-width: 782px) {
	.ggp-verhaal-foto .ggp-foto {
		position: static;
	}
}

/* ---------- Kleine labels boven de koppen weggehaald ---------- */

.ggp-kicker {
	display: none;
}

/* De teruglink op een occasionpagina blijft, als gewone link. */
.ggp-occ-pagina .ggp-kicker {
	display: block;
	margin: 0 0 14px;
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

/* ---------- Over ons: nieuwe indeling ---------- */

.ggp-over-kop {
	padding-top: 64px;
	padding-bottom: 64px;
	background: linear-gradient(120deg, #1b1b1b 0%, #2c2c2c 100%);
}

.ggp-over-kop h1 {
	font-size: clamp(2.2rem, 4.6vw, 3.4rem);
	margin-bottom: 0.4em;
}

.ggp-over-kop .ggp-lead {
	font-size: clamp(1.15rem, 1.9vw, 1.45rem);
	line-height: 1.5;
	color: #fff;
	padding-left: 18px;
	border-left: 4px solid var(--ggp-groen);
}

.ggp-over-kop p {
	color: #d6d6d6;
}

.ggp-over-foto {
	flex-basis: 38% !important;
	flex-grow: 0 !important;
}

.ggp-over-foto .ggp-foto img {
	border-radius: 6px;
	border-bottom: 5px solid var(--ggp-rood);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
}

.ggp-bijschrift {
	margin: 8px 0 0;
	font-size: 0.9rem;
	font-weight: 700;
	color: #777;
}

.ggp-donker .ggp-bijschrift {
	color: #b5b5b5;
}

.ggp-citaat.wp-block-quote {
	margin: 26px 0 18px;
	padding: 22px 26px 20px;
	border: 0;
	border-left: 5px solid var(--ggp-rood);
	background: var(--ggp-grijs);
	border-radius: 0 6px 6px 0;
}

.ggp-citaat.wp-block-quote p {
	margin: 0 0 8px;
	font-size: clamp(1.3rem, 2.2vw, 1.7rem);
	font-weight: 700;
	font-style: italic;
	line-height: 1.3;
	color: var(--ggp-donker);
}

.ggp-citaat.wp-block-quote p::before {
	content: "“";
	color: var(--ggp-rood);
}

.ggp-citaat.wp-block-quote p::after {
	content: "”";
	color: var(--ggp-rood);
}

.ggp-citaat.wp-block-quote cite {
	font-size: 0.9rem;
	font-style: normal;
	color: #666;
}

.ggp-tijdlijn.wp-block-columns {
	gap: 0;
	margin-top: 30px;
	border-top: 3px solid var(--ggp-lijn);
}

.ggp-stap {
	position: relative;
	padding: 26px 22px 0 0;
}

.ggp-stap::before {
	content: "";
	position: absolute;
	top: -10px;
	left: 0;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	background: var(--ggp-rood);
	border: 3px solid var(--ggp-grijs);
}

.ggp-stap:last-child::before {
	background: var(--ggp-groen);
}

.ggp-stap .ggp-tijd-label {
	margin: 0 0 4px;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--ggp-rood);
	line-height: 1.1;
}

.ggp-stap:last-child .ggp-tijd-label {
	color: var(--ggp-groen-donker);
}

.ggp-stap h3 {
	margin: 0 0 8px;
	font-size: 1.15rem;
}

.ggp-stap p {
	margin: 0;
	font-size: 0.97rem;
}

.ggp-cijferband {
	background: var(--ggp-groen);
	padding-top: 38px;
	padding-bottom: 38px;
}

.ggp-cijfers.wp-block-columns {
	margin: 0;
	text-align: center;
}

.ggp-cijfer {
	margin: 0;
	font-size: clamp(2.4rem, 5vw, 3.4rem);
	font-weight: 700;
	line-height: 1;
	color: var(--ggp-donker);
}

.ggp-cijfer-tekst {
	margin: 6px 0 0;
	font-weight: 700;
	color: #e8f5ee;
}

@media (max-width: 781px) {
	.ggp-over-foto {
		flex-basis: 100% !important;
	}

	.ggp-tijdlijn.wp-block-columns {
		border-top: 0;
		border-left: 3px solid var(--ggp-lijn);
		margin-left: 8px;
	}

	.ggp-stap {
		padding: 0 0 26px 26px;
	}

	.ggp-stap::before {
		top: 4px;
		left: -11px;
	}

	.ggp-cijfers .wp-block-column + .wp-block-column {
		margin-top: 18px;
	}
}

/* ---------- Huisstijl van Over ons op alle pagina's ---------- */

.ggp-paginakop {
	padding-top: 60px;
	padding-bottom: 60px;
	background: linear-gradient(120deg, #1b1b1b 0%, #2c2c2c 100%);
}

.ggp-paginakop h1 {
	font-size: clamp(2.1rem, 4.4vw, 3.2rem);
	margin-bottom: 0.4em;
	color: #fff;
}

.ggp-paginakop .ggp-lead {
	font-size: clamp(1.12rem, 1.8vw, 1.4rem);
	line-height: 1.5;
	color: #fff;
	padding-left: 18px;
	border-left: 4px solid var(--ggp-groen);
}

.ggp-paginakop p {
	color: #d6d6d6;
}

.ggp-paginakop .ggp-kopbinnen p {
	max-width: 760px;
}

.ggp-paginakop .wp-block-buttons {
	margin-top: 26px;
}

.ggp-lead-licht {
	font-size: 1.18rem;
	line-height: 1.6;
	color: var(--ggp-donker);
	padding-left: 18px;
	border-left: 4px solid var(--ggp-groen);
}

.ggp-merken .ggp-cijfer {
	font-size: clamp(1.7rem, 3.4vw, 2.5rem);
}

/* Koppen van blokken krijgen dezelfde rode streep als accent. */
.ggp-section:not(.ggp-paginakop):not(.ggp-over-kop):not(.ggp-afsluiter) h2.wp-block-heading {
	position: relative;
	padding-bottom: 12px;
}

.ggp-section:not(.ggp-paginakop):not(.ggp-over-kop):not(.ggp-afsluiter) h2.wp-block-heading::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 54px;
	height: 4px;
	border-radius: 2px;
	background: var(--ggp-rood);
}

.ggp-donker:not(.ggp-paginakop):not(.ggp-over-kop):not(.ggp-afsluiter) h2.wp-block-heading::after {
	background: var(--ggp-groen);
}

.ggp-reviews h2 {
	position: relative;
	padding-bottom: 12px;
}

.ggp-reviews h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 54px;
	height: 4px;
	border-radius: 2px;
	background: var(--ggp-rood);
}

/* Over ons: portret van Gert kleiner en vierkant. */
.ggp-over-kop .ggp-over-foto {
	flex-basis: 280px !important;
	max-width: 280px;
}

.ggp-over-kop .ggp-over-foto .ggp-foto img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center 30%;
}

@media (max-width: 781px) {
	.ggp-over-kop .ggp-over-foto {
		flex-basis: auto !important;
		max-width: 220px;
	}
}

/* ---------- Italiaanse stijl: vlaggroen en driekleur als accent ---------- */

/* Witte tekst op de groene vlakken. */
.ggp-callout,
.ggp-callout h3,
.ggp-section .ggp-callout a:not(.wp-block-button__link),
.ggp-cijfer,
.wp-block-button.ggp-btn-groen .wp-block-button__link,
.ggp-section a.ggp-occ-knop-groen,
.ggp-cookie-ja {
	color: #fff;
}

/* Groene tekst op een donkere achtergrond: de lichtere tint, anders is het niet leesbaar. */
.ggp-hero .ggp-kicker,
.ggp-donker .ggp-kicker,
.ggp-donker .ggp-lijst li::marker,
.ggp-cookiebalk a,
.ggp-nav .wp-block-navigation .wp-block-navigation-item__content:hover,
.ggp-nav .wp-block-navigation .wp-block-navigation-item__content:focus-visible,
.ggp-nav .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	color: var(--ggp-groen-licht);
}

.ggp-nav .wp-block-navigation .wp-block-navigation-item__content::after {
	background: var(--ggp-groen-licht);
}

/* De drie merken in de grote kop in de kleuren van de Italiaanse vlag. */
.ggp-hero h1 em:nth-of-type(1) {
	color: var(--ggp-groen-licht);
}

.ggp-hero h1 em:nth-of-type(2) {
	color: #fff;
}

.ggp-hero h1 em:nth-of-type(3) {
	color: #ff5148;
}

/* Driekleur als lijn onder de menubalk en boven de voettekst. */
.ggp-nav {
	border-bottom: 0;
}

.ggp-nav::after,
.ggp-footer::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--ggp-vlag-groen) 0 33.33%, var(--ggp-wit-vlag) 33.33% 66.66%, var(--ggp-rood-vlag) 66.66% 100%);
}

.ggp-nav::after {
	bottom: -4px;
}

.ggp-footer {
	position: relative;
	border-top: 0;
	padding-top: 26px;
}

.ggp-footer::before {
	top: 0;
}

/* Driekleur als streepje onder de koppen. */
.ggp-section:not(.ggp-paginakop):not(.ggp-over-kop):not(.ggp-afsluiter) h2.wp-block-heading::after,
.ggp-donker:not(.ggp-paginakop):not(.ggp-over-kop):not(.ggp-afsluiter) h2.wp-block-heading::after,
.ggp-reviews h2::after {
	width: 66px;
	background: linear-gradient(90deg, var(--ggp-vlag-groen) 0 33.33%, var(--ggp-wit-vlag) 33.33% 66.66%, var(--ggp-rood-vlag) 66.66% 100%);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* Driekleur als verticale streep naast de uitgelichte zin. */
.ggp-paginakop .ggp-lead,
.ggp-over-kop .ggp-lead,
.ggp-lead-licht {
	border-left: 0;
	position: relative;
	padding-left: 22px;
}

.ggp-paginakop .ggp-lead::before,
.ggp-over-kop .ggp-lead::before,
.ggp-lead-licht::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	bottom: 4px;
	width: 6px;
	border-radius: 2px;
	background: linear-gradient(180deg, var(--ggp-vlag-groen) 0 33.33%, var(--ggp-wit-vlag) 33.33% 66.66%, var(--ggp-rood-vlag) 66.66% 100%);
}

.ggp-lead-licht::before {
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* Kaart met pluspunten en cijferband. */
.ggp-usp .wp-block-columns {
	border-bottom: 0;
	position: relative;
	overflow: hidden;
}

.ggp-usp .wp-block-columns::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 5px;
	background: linear-gradient(90deg, var(--ggp-vlag-groen) 0 33.33%, var(--ggp-wit-vlag) 33.33% 66.66%, var(--ggp-rood-vlag) 66.66% 100%);
}

.ggp-cijfer-tekst {
	color: #e8f5ee;
}

.ggp-stap:last-child .ggp-tijd-label {
	color: var(--ggp-groen);
}

/* ---------- Italiaanse stijl, bescheidener: driekleur alleen nog als dunne lijn onder het menu en boven de voettekst ---------- */

.ggp-nav::after,
.ggp-footer::before {
	height: 3px;
}

.ggp-nav::after {
	bottom: -3px;
}

/* De merken in de grote kop weer in één kleur. */
.ggp-hero h1 em:nth-of-type(1),
.ggp-hero h1 em:nth-of-type(2),
.ggp-hero h1 em:nth-of-type(3) {
	color: var(--ggp-groen-licht);
}

/* Streepje onder de koppen: één kleur. */
.ggp-section:not(.ggp-paginakop):not(.ggp-over-kop):not(.ggp-afsluiter) h2.wp-block-heading::after,
.ggp-reviews h2::after {
	width: 54px;
	background: var(--ggp-rood);
	box-shadow: none;
}

.ggp-donker:not(.ggp-paginakop):not(.ggp-over-kop):not(.ggp-afsluiter) h2.wp-block-heading::after {
	width: 54px;
	background: var(--ggp-groen-licht);
	box-shadow: none;
}

/* Streep naast de uitgelichte zin: één kleur. */
.ggp-paginakop .ggp-lead::before,
.ggp-over-kop .ggp-lead::before {
	width: 4px;
	background: var(--ggp-groen-licht);
}

.ggp-lead-licht::before {
	width: 4px;
	background: var(--ggp-groen);
	box-shadow: none;
}

/* Kaart met pluspunten: effen groene rand. */
.ggp-usp .wp-block-columns::after {
	height: 4px;
	background: var(--ggp-groen);
}

/* ---------- Groen weggehaald: alleen de driekleurlijn onder het menu en boven de voettekst is nog groen ---------- */

/* Accentstreepjes en randen in het rood van het logo. */
.ggp-info .ggp-info-item {
	border-left-color: var(--ggp-rood);
}

.ggp-paginakop .ggp-lead::before,
.ggp-over-kop .ggp-lead::before,
.ggp-lead-licht::before,
.ggp-usp .wp-block-columns::after,
.ggp-nav .wp-block-navigation .wp-block-navigation-item__content::after {
	background: var(--ggp-rood);
}

.ggp-donker:not(.ggp-paginakop):not(.ggp-over-kop):not(.ggp-afsluiter) h2.wp-block-heading::after {
	background: var(--ggp-rood);
}

.ggp-contact-kaart.ggp-autoprofijt {
	border-top-color: var(--ggp-rood);
}

.ggp-donker .ggp-lijst li::marker {
	color: #ff5148;
}

.ggp-stap:last-child::before {
	background: var(--ggp-donker);
}

.ggp-stap:last-child .ggp-tijd-label {
	color: var(--ggp-donker);
}

/* Ronde icoontjes bij de pluspunten: rood. */
.ggp-usp .wp-block-column::before {
	background-color: var(--ggp-rood);
}

/* Balk met cijfers: rood met witte tekst. */
.ggp-cijferband {
	background: var(--ggp-rood);
}

.ggp-cijfer,
.ggp-cijfer-tekst {
	color: #fff;
}

/* Tweede knop naast de rode: donker op een lichte achtergrond, wit op een donkere. */
.wp-block-button.ggp-btn-groen .wp-block-button__link,
.ggp-section a.ggp-occ-knop-groen {
	background: var(--ggp-donker);
	color: #fff;
}

.wp-block-button.ggp-btn-groen .wp-block-button__link:hover,
.ggp-section a.ggp-occ-knop-groen:hover {
	background: #000;
}

.ggp-donker .wp-block-button.ggp-btn-groen .wp-block-button__link,
.ggp-afsluiter .wp-block-button.ggp-btn-groen .wp-block-button__link {
	background: #fff;
	color: var(--ggp-donker);
}

.ggp-donker .wp-block-button.ggp-btn-groen .wp-block-button__link:hover,
.ggp-afsluiter .wp-block-button.ggp-btn-groen .wp-block-button__link:hover {
	background: #e9e9e6;
}

/* Cookiemelding. */
.ggp-cookiebalk {
	border-top-color: var(--ggp-rood);
}

.ggp-cookie-ja {
	background: var(--ggp-rood);
	color: #fff;
}

.ggp-cookiebalk a {
	color: #fff;
}

/* Kaartje met contactgegevens bij de welkomsttekst: donker, met rode rand. */
.ggp-callout {
	border-top: 4px solid var(--ggp-rood);
}

/* ---------- Startpagina: kop wordt uitgetypt ---------- */

.ggp-typ-wacht .ggp-hero h1 {
	visibility: hidden;
}

.ggp-hero h1 .ggp-typ {
	opacity: 0;
}

.ggp-hero h1 .ggp-typ-aan {
	opacity: 1;
}

.ggp-hero h1 .ggp-typ-nu,
.ggp-hero h1 .ggp-typ-eind {
	box-shadow: 4px 0 0 0 var(--ggp-rood);
}

.ggp-hero h1 .ggp-typ-eind {
	animation: ggp-knipper 0.8s steps(1) 4 forwards;
}

@keyframes ggp-knipper {
	0%   { box-shadow: 4px 0 0 0 var(--ggp-rood); }
	50%  { box-shadow: 4px 0 0 0 transparent; }
	100% { box-shadow: 4px 0 0 0 transparent; }
}

/* ==========================================================================
   Moderne stijl: carbonzwart, warm crème, het rood van het logo en een
   messing accent. Zachtere vormen, kleurverlopen en diepte.
   ========================================================================== */

body {
	background: #fffdfa;
}

.ggp-section h1,
.ggp-section h2,
.ggp-hero h1 {
	letter-spacing: -0.015em;
}

/* ---------- Bovenbalk en menu ---------- */

.ggp-topbar {
	background: #fffdfa;
}

.ggp-info .ggp-info-item {
	border-left: 0;
	padding-left: 0;
}

.ggp-info .ggp-info-item strong {
	color: var(--ggp-rood);
	letter-spacing: 0.08em;
}

.ggp-nav {
	background: rgba(20, 22, 27, 0.96);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 6px 24px rgba(20, 22, 27, 0.22);
}

/* De vervaging sluit het mobiele menu op in de menubalk, dus niet als het menu er is. */
@media (max-width: 599px) {
	.ggp-nav {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

.ggp-nav:has(.is-menu-open) {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.ggp-nav .wp-block-navigation .wp-block-navigation-item__content {
	color: #e9e6e0;
}

.ggp-nav .wp-block-navigation .wp-block-navigation-item__content:hover,
.ggp-nav .wp-block-navigation .wp-block-navigation-item__content:focus-visible,
.ggp-nav .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	color: #fff;
}

.ggp-nav .wp-block-navigation .wp-block-navigation-item__content::after {
	height: 2px;
	bottom: 12px;
	background: linear-gradient(90deg, var(--ggp-rood-licht), var(--ggp-goud));
}

/* ---------- Knoppen ---------- */

.wp-block-button.ggp-btn-rood .wp-block-button__link,
.wp-block-button.ggp-btn-groen .wp-block-button__link,
.wp-block-button.ggp-btn-licht .wp-block-button__link,
.ggp-nav .wp-block-button.ggp-nav-knop .wp-block-button__link,
.ggp-section a.ggp-occ-knop,
.ggp-formulier button.ggp-occ-knop,
.ggp-route-leeg button.ggp-occ-knop,
.ggp-cookiebalk button {
	border-radius: 10px;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.wp-block-button.ggp-btn-rood .wp-block-button__link,
.ggp-nav .wp-block-button.ggp-nav-knop .wp-block-button__link,
.ggp-section a.ggp-occ-knop:not(.ggp-occ-knop-groen),
.ggp-formulier button.ggp-occ-knop,
.ggp-route-leeg button.ggp-occ-knop,
.ggp-cookie-ja {
	background: linear-gradient(135deg, #e02a22 0%, var(--ggp-rood) 45%, #a8141b 100%);
	box-shadow: 0 8px 20px rgba(205, 28, 26, 0.28);
}

.wp-block-button.ggp-btn-rood .wp-block-button__link:hover,
.ggp-nav .wp-block-button.ggp-nav-knop .wp-block-button__link:hover,
.ggp-section a.ggp-occ-knop:not(.ggp-occ-knop-groen):hover,
.ggp-formulier button.ggp-occ-knop:hover,
.ggp-route-leeg button.ggp-occ-knop:hover {
	background: linear-gradient(135deg, #ea352c 0%, #d5201d 45%, #b3161d 100%);
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(205, 28, 26, 0.36);
}

.wp-block-button.ggp-btn-groen .wp-block-button__link:hover,
.wp-block-button.ggp-btn-licht .wp-block-button__link:hover {
	transform: translateY(-2px);
}

/* ---------- Grote foto op de startpagina ---------- */

.ggp-hero .wp-block-cover__background {
	background:
		radial-gradient(900px 500px at 12% 20%, rgba(205, 28, 26, 0.34), transparent 62%),
		linear-gradient(100deg, rgba(14, 15, 19, 0.94) 0%, rgba(14, 15, 19, 0.78) 46%, rgba(14, 15, 19, 0.28) 100%) !important;
}

.ggp-hero h1 em:nth-of-type(1),
.ggp-hero h1 em:nth-of-type(2),
.ggp-hero h1 em:nth-of-type(3) {
	color: transparent;
	background: linear-gradient(90deg, #ffffff 0%, #f3d9a4 55%, var(--ggp-goud) 100%);
	-webkit-background-clip: text;
	background-clip: text;
}

.ggp-hero h1 em .ggp-typ {
	color: #f3d9a4;
}

/* ---------- Kaart met pluspunten ---------- */

.ggp-usp .wp-block-columns {
	border-radius: 18px;
	box-shadow: 0 24px 60px rgba(20, 22, 27, 0.18);
}

.ggp-usp .wp-block-columns::after {
	height: 4px;
	background: linear-gradient(90deg, var(--ggp-rood) 0%, var(--ggp-goud) 100%);
}

.ggp-usp .wp-block-column::before {
	border-radius: 14px;
	background-color: transparent;
	background-image: none;
	background: linear-gradient(135deg, #e02a22, var(--ggp-wijn));
	box-shadow: 0 8px 18px rgba(205, 28, 26, 0.3);
}

.ggp-usp .wp-block-column {
	position: relative;
}

.ggp-usp .wp-block-column::after {
	content: "";
	position: absolute;
	left: 34px;
	top: 50%;
	width: 24px;
	height: 24px;
	margin-top: -12px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 24px 24px;
}

.ggp-usp .wp-block-column:nth-child(1)::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E");
}

.ggp-usp .wp-block-column:nth-child(2)::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E");
}

.ggp-usp .wp-block-column:nth-child(3)::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
}

.ggp-usp .wp-block-column:nth-child(4)::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3Cline x1='7' y1='7' x2='7.01' y2='7'/%3E%3C/svg%3E");
}

/* ---------- Donkere banden ---------- */

.ggp-paginakop,
.ggp-over-kop,
.ggp-donker,
.ggp-afsluiter {
	background:
		radial-gradient(700px 380px at 88% 0%, rgba(205, 28, 26, 0.3), transparent 65%),
		radial-gradient(500px 300px at 0% 100%, rgba(201, 161, 90, 0.12), transparent 70%),
		linear-gradient(135deg, #111317 0%, #1b1e25 100%);
}

.ggp-paginakop .ggp-lead::before,
.ggp-over-kop .ggp-lead::before,
.ggp-lead-licht::before {
	width: 4px;
	background: linear-gradient(180deg, var(--ggp-rood-licht), var(--ggp-goud));
}

.ggp-over-foto .ggp-foto img {
	border-radius: 16px;
	border-bottom: 0;
}

/* ---------- Koppen ---------- */

.ggp-section:not(.ggp-paginakop):not(.ggp-over-kop):not(.ggp-afsluiter) h2.wp-block-heading::after,
.ggp-donker:not(.ggp-paginakop):not(.ggp-over-kop):not(.ggp-afsluiter) h2.wp-block-heading::after,
.ggp-reviews h2::after {
	width: 64px;
	height: 4px;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--ggp-rood) 0%, var(--ggp-goud) 100%);
}

/* ---------- Kaarten ---------- */

.ggp-kaart,
.ggp-contact-kaart,
.ggp-review,
.ggp-section a.ggp-occ-kaart,
.ggp-occ-info,
.ggp-formulier {
	border: 1px solid rgba(20, 22, 27, 0.06);
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(20, 22, 27, 0.07);
}

.ggp-kaart,
.ggp-review,
.ggp-section a.ggp-occ-kaart {
	background: #fff;
}

.ggp-kaart {
	border-top: 1px solid rgba(20, 22, 27, 0.06);
	overflow: hidden;
}

.ggp-kaart::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 4px;
	background: linear-gradient(90deg, var(--ggp-rood) 0%, var(--ggp-goud) 100%);
	transform: scaleX(0.18);
	transform-origin: left;
	transition: transform 0.25s ease;
}

.ggp-kaart:hover::before {
	transform: scaleX(1);
}

.ggp-kaart:has(h3 a):hover {
	box-shadow: 0 18px 40px rgba(20, 22, 27, 0.13);
	transform: translateY(-4px);
}

.ggp-kaart:has(h3 a) h3 a::before {
	color: var(--ggp-goud);
}

.ggp-contact-kaart {
	background: #fff;
	border-top: 1px solid rgba(20, 22, 27, 0.06);
}

.ggp-contact-kaart.ggp-autoprofijt {
	border-top-color: rgba(20, 22, 27, 0.06);
}

.ggp-contact-kaart.ggp-autoprofijt .wp-block-image {
	background: var(--ggp-grijs);
	border-radius: 12px;
}

.ggp-occ-info,
.ggp-formulier {
	background: #fff;
	border-top: 1px solid rgba(20, 22, 27, 0.06);
}

.ggp-occ-tekst {
	border-top: 0;
}

.ggp-occ-prijs {
	color: var(--ggp-rood);
}

.ggp-callout {
	border-top: 0;
	border-radius: 16px;
	background:
		radial-gradient(300px 200px at 100% 0%, rgba(205, 28, 26, 0.35), transparent 70%),
		linear-gradient(135deg, #111317 0%, #1f232b 100%);
	box-shadow: 0 16px 36px rgba(20, 22, 27, 0.2);
}

.ggp-foto img,
.ggp-occ-groot img,
.ggp-route iframe,
.ggp-route-leeg {
	border-radius: 16px;
}

/* ---------- Balk met cijfers ---------- */

.ggp-cijferband {
	background: linear-gradient(120deg, #e02a22 0%, var(--ggp-rood) 35%, var(--ggp-wijn) 100%);
	position: relative;
	overflow: hidden;
}

.ggp-cijferband::before {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.06) 0 2px, transparent 2px 26px);
	pointer-events: none;
}

.ggp-cijfer {
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.25);
}

.ggp-cijfer-tekst {
	color: #ffe9d2;
}

/* ---------- Citaat, tijdlijn, reviews ---------- */

.ggp-citaat.wp-block-quote {
	border-left: 0;
	border-radius: 16px;
	background: linear-gradient(135deg, #fff 0%, var(--ggp-grijs) 100%);
	box-shadow: inset 4px 0 0 var(--ggp-rood), 0 10px 30px rgba(20, 22, 27, 0.07);
}

.ggp-tijdlijn.wp-block-columns {
	border-top-color: var(--ggp-lijn);
}

.ggp-stap::before,
.ggp-stap:last-child::before {
	background: linear-gradient(135deg, #e02a22, var(--ggp-wijn));
	border-color: var(--ggp-grijs);
	box-shadow: 0 0 0 3px rgba(205, 28, 26, 0.14);
}

.ggp-stap:last-child::before {
	background: var(--ggp-goud);
	box-shadow: 0 0 0 3px rgba(201, 161, 90, 0.2);
}

.ggp-stap:last-child .ggp-tijd-label {
	color: #9a7532;
}

.ggp-sterren,
.ggp-sterren-deel {
	color: var(--ggp-goud);
}

.ggp-sterren-deel {
	background: linear-gradient(90deg, var(--ggp-goud) var(--ggp-deel, 100%), #ddd5c8 var(--ggp-deel, 100%));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.ggp-score-cijfer {
	color: var(--ggp-rood);
}

/* ---------- Links naar diensten, filter, formulier ---------- */

.ggp-section .ggp-dienstlinks a:not(.wp-block-button__link) {
	background: #fff;
	border: 1px solid var(--ggp-lijn);
	border-radius: 999px;
	padding: 9px 18px;
}

.ggp-section .ggp-dienstlinks a:not(.wp-block-button__link):hover {
	background: var(--ggp-donker);
	border-color: var(--ggp-donker);
	color: #fff;
}

.ggp-occ-filter {
	border-radius: 16px;
}

.ggp-occ-filter select,
.ggp-occ-filter button,
.ggp-formulier input,
.ggp-formulier select,
.ggp-formulier textarea {
	border-radius: 10px;
	border-color: #d6cebf;
}

.ggp-tijden th,
.ggp-tijden td {
	border-bottom-color: var(--ggp-lijn);
}

.ggp-tijden .ggp-vandaag th,
.ggp-tijden .ggp-vandaag td {
	color: var(--ggp-rood);
}

/* ---------- Voettekst en cookiemelding ---------- */

.ggp-footer {
	background: #0f1114;
}

.ggp-cookiebalk {
	border-top: 0;
	border-radius: 16px;
	background: rgba(20, 22, 27, 0.97);
}

/* Geen beweging voor wie dat op zijn apparaat heeft uitgezet. */
@media (prefers-reduced-motion: reduce) {
	.ggp-kaart,
	.ggp-kaart::before,
	.wp-block-button .wp-block-button__link {
		transition: none;
	}
}

/* Icoonvlakjes bij de pluspunten: het verloop moet vóór het oude icoon gaan. */
.ggp-usp .wp-block-column:nth-child(n)::before {
	background-image: linear-gradient(135deg, #e02a22, var(--ggp-wijn));
	background-size: cover;
}

/* ==========================================================================
   Luxe uitstraling: Bodoni (de Italiaanse klassieker uit Parma) voor de koppen,
   carbon en champagnegoud, fijne lijnen, meer ruimte en rustiger knoppen.
   ========================================================================== */

:root {
	--ggp-goud: #c2a26a;
	--ggp-goud-licht: #e6d3a8;
	--ggp-serif: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
}

/* ---------- Typografie ---------- */

.ggp-hero h1,
.ggp-section h1,
.ggp-section h2,
.ggp-reviews h2,
.ggp-occ-pagina .wp-block-post-title,
.ggp-cijfer,
.ggp-score-cijfer,
.ggp-citaat.wp-block-quote p,
.ggp-stap .ggp-tijd-label {
	font-family: var(--ggp-serif);
	font-weight: 500;
	letter-spacing: -0.01em;
}

.ggp-hero h1 {
	font-size: clamp(2.4rem, 5.6vw, 4.4rem);
	line-height: 1.04;
}

.ggp-hero h1 em,
.ggp-hero h1 em .ggp-typ {
	font-style: italic;
	font-weight: 500;
}

.ggp-section h1 {
	font-size: clamp(2.3rem, 4.8vw, 3.6rem);
	line-height: 1.08;
}

.ggp-section h2,
.ggp-reviews h2 {
	font-size: clamp(1.8rem, 3vw, 2.5rem);
	line-height: 1.15;
}

.ggp-kaart h3,
.ggp-contact-kaart h3,
.ggp-stap h3,
.ggp-occ-tekst h3 {
	font-weight: 700;
	letter-spacing: 0.01em;
}

/* ---------- Meer ruimte ---------- */

.ggp-section {
	padding-top: 96px;
	padding-bottom: 96px;
}

.ggp-paginakop,
.ggp-over-kop {
	padding-top: 88px;
	padding-bottom: 88px;
}

@media (max-width: 781px) {
	.ggp-section {
		padding-top: 60px;
		padding-bottom: 60px;
	}

	.ggp-paginakop,
	.ggp-over-kop {
		padding-top: 56px;
		padding-bottom: 56px;
	}
}

/* ---------- Fijne gouden lijnen in plaats van dikke balkjes ---------- */

.ggp-section:not(.ggp-paginakop):not(.ggp-over-kop):not(.ggp-afsluiter) h2.wp-block-heading,
.ggp-reviews h2 {
	padding-bottom: 20px;
}

.ggp-section:not(.ggp-paginakop):not(.ggp-over-kop):not(.ggp-afsluiter) h2.wp-block-heading::after,
.ggp-donker:not(.ggp-paginakop):not(.ggp-over-kop):not(.ggp-afsluiter) h2.wp-block-heading::after,
.ggp-reviews h2::after {
	width: 72px;
	height: 1px;
	border-radius: 0;
	background: var(--ggp-goud);
}

.ggp-paginakop .ggp-lead::before,
.ggp-over-kop .ggp-lead::before,
.ggp-lead-licht::before {
	width: 1px;
	background: var(--ggp-goud);
}

.ggp-paginakop .ggp-lead,
.ggp-over-kop .ggp-lead,
.ggp-lead-licht {
	padding-left: 24px;
	font-family: var(--ggp-serif);
	font-style: italic;
	font-weight: 400;
}

/* ---------- Menu ---------- */

.ggp-nav .wp-block-navigation {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.ggp-nav .wp-block-navigation .wp-block-navigation-item__content::after {
	height: 1px;
	background: var(--ggp-goud);
}

.ggp-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	letter-spacing: 0.08em;
}

/* ---------- Knoppen: rustiger, in kapitalen ---------- */

.wp-block-button.ggp-btn-rood .wp-block-button__link,
.wp-block-button.ggp-btn-groen .wp-block-button__link,
.wp-block-button.ggp-btn-licht .wp-block-button__link,
.ggp-nav .wp-block-button.ggp-nav-knop .wp-block-button__link,
.ggp-section a.ggp-occ-knop,
.ggp-formulier button.ggp-occ-knop,
.ggp-route-leeg button.ggp-occ-knop {
	border-radius: 4px;
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 17px 30px;
}

.ggp-nav .wp-block-button.ggp-nav-knop .wp-block-button__link {
	padding: 12px 22px;
	font-size: 0.74rem;
}

.wp-block-button.ggp-btn-rood .wp-block-button__link,
.ggp-nav .wp-block-button.ggp-nav-knop .wp-block-button__link,
.ggp-section a.ggp-occ-knop:not(.ggp-occ-knop-groen),
.ggp-formulier button.ggp-occ-knop,
.ggp-route-leeg button.ggp-occ-knop {
	background: var(--ggp-rood);
	box-shadow: none;
}

.wp-block-button.ggp-btn-rood .wp-block-button__link:hover,
.ggp-nav .wp-block-button.ggp-nav-knop .wp-block-button__link:hover,
.ggp-section a.ggp-occ-knop:not(.ggp-occ-knop-groen):hover,
.ggp-formulier button.ggp-occ-knop:hover,
.ggp-route-leeg button.ggp-occ-knop:hover {
	background: var(--ggp-rood-donker);
	box-shadow: none;
	transform: none;
}

/* Tweede knop: omlijnd in goud. */
.wp-block-button.ggp-btn-licht .wp-block-button__link,
.ggp-donker .wp-block-button.ggp-btn-groen .wp-block-button__link,
.ggp-afsluiter .wp-block-button.ggp-btn-groen .wp-block-button__link {
	background: transparent;
	color: var(--ggp-goud-licht);
	border: 1px solid var(--ggp-goud);
}

.wp-block-button.ggp-btn-licht .wp-block-button__link:hover,
.ggp-donker .wp-block-button.ggp-btn-groen .wp-block-button__link:hover,
.ggp-afsluiter .wp-block-button.ggp-btn-groen .wp-block-button__link:hover {
	background: var(--ggp-goud);
	color: var(--ggp-donker);
	transform: none;
}

.wp-block-button.ggp-btn-groen .wp-block-button__link,
.ggp-section a.ggp-occ-knop-groen {
	background: transparent;
	color: var(--ggp-donker);
	border: 1px solid var(--ggp-donker);
}

.wp-block-button.ggp-btn-groen .wp-block-button__link:hover,
.ggp-section a.ggp-occ-knop-groen:hover {
	background: var(--ggp-donker);
	color: #fff;
	transform: none;
}

/* ---------- Grote foto ---------- */

.ggp-hero .wp-block-cover__background {
	background:
		radial-gradient(1000px 560px at 10% 30%, rgba(205, 28, 26, 0.22), transparent 65%),
		linear-gradient(100deg, rgba(10, 11, 14, 0.95) 0%, rgba(10, 11, 14, 0.82) 48%, rgba(10, 11, 14, 0.35) 100%) !important;
}

.ggp-hero h1 em:nth-of-type(1),
.ggp-hero h1 em:nth-of-type(2),
.ggp-hero h1 em:nth-of-type(3) {
	background: linear-gradient(90deg, #f6ead0 0%, var(--ggp-goud-licht) 40%, var(--ggp-goud) 100%);
	-webkit-background-clip: text;
	background-clip: text;
}

.ggp-hero h1 em .ggp-typ {
	color: var(--ggp-goud-licht);
}

.ggp-hero h1 .ggp-typ-nu,
.ggp-hero h1 .ggp-typ-eind {
	box-shadow: 3px 0 0 0 var(--ggp-goud);
}

@keyframes ggp-knipper {
	0%   { box-shadow: 3px 0 0 0 var(--ggp-goud); }
	50%  { box-shadow: 3px 0 0 0 transparent; }
	100% { box-shadow: 3px 0 0 0 transparent; }
}

/* ---------- Kaart met pluspunten: carbon met gouden icoontjes ---------- */

.ggp-usp .wp-block-columns {
	border-radius: 6px;
	box-shadow: 0 30px 70px rgba(10, 11, 14, 0.2);
}

.ggp-usp .wp-block-columns::after {
	height: 1px;
	background: var(--ggp-goud);
}

.ggp-usp .wp-block-column:nth-child(n)::before {
	border-radius: 50%;
	background-image: linear-gradient(135deg, #23262e, #0e0f12);
	box-shadow: inset 0 0 0 1px rgba(194, 162, 106, 0.55);
}

.ggp-usp .wp-block-column:nth-child(1)::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2a26a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E");
}

.ggp-usp .wp-block-column:nth-child(2)::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2a26a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E");
}

.ggp-usp .wp-block-column:nth-child(3)::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2a26a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
}

.ggp-usp .wp-block-column:nth-child(4)::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2a26a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3Cline x1='7' y1='7' x2='7.01' y2='7'/%3E%3C/svg%3E");
}

/* ---------- Kaarten: fijne randen, weinig schaduw ---------- */

.ggp-kaart,
.ggp-contact-kaart,
.ggp-review,
.ggp-section a.ggp-occ-kaart,
.ggp-occ-info,
.ggp-formulier {
	border: 1px solid var(--ggp-lijn);
	border-radius: 6px;
	box-shadow: 0 1px 2px rgba(10, 11, 14, 0.04);
}

.ggp-kaart::before {
	height: 1px;
	background: var(--ggp-goud);
	transform: scaleX(0.25);
}

.ggp-kaart:has(h3 a):hover {
	box-shadow: 0 24px 50px rgba(10, 11, 14, 0.1);
	transform: translateY(-3px);
}

.ggp-callout {
	border-radius: 6px;
	box-shadow: 0 24px 50px rgba(10, 11, 14, 0.18);
}

.ggp-foto img,
.ggp-occ-groot img,
.ggp-route iframe,
.ggp-route-leeg,
.ggp-over-foto .ggp-foto img {
	border-radius: 4px;
}

/* ---------- Cijfers: carbon met gouden Bodoni-cijfers ---------- */

.ggp-cijferband {
	background:
		radial-gradient(600px 260px at 50% 0%, rgba(194, 162, 106, 0.14), transparent 70%),
		linear-gradient(135deg, #0e0f12 0%, #1a1d23 100%);
	border-top: 1px solid rgba(194, 162, 106, 0.35);
	border-bottom: 1px solid rgba(194, 162, 106, 0.35);
}

.ggp-cijferband::before {
	display: none;
}

.ggp-cijfer {
	font-size: clamp(2.8rem, 6vw, 4.2rem);
	color: transparent;
	background: linear-gradient(180deg, #f6ead0 0%, var(--ggp-goud) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	text-shadow: none;
}

.ggp-merken .ggp-cijfer {
	font-size: clamp(2rem, 4vw, 3rem);
	font-style: italic;
}

.ggp-cijfer-tekst {
	color: #bdb6a8;
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* ---------- Citaat, tijdlijn en reviews ---------- */

.ggp-citaat.wp-block-quote {
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	padding: 10px 0 10px 28px;
	border-left: 1px solid var(--ggp-goud);
}

.ggp-citaat.wp-block-quote p {
	font-size: clamp(1.6rem, 2.8vw, 2.2rem);
	font-weight: 400;
}

.ggp-citaat.wp-block-quote p::before,
.ggp-citaat.wp-block-quote p::after {
	color: var(--ggp-goud);
}

.ggp-stap::before,
.ggp-stap:last-child::before {
	width: 13px;
	height: 13px;
	top: -8px;
	background: var(--ggp-grijs);
	border: 1px solid var(--ggp-goud);
	box-shadow: none;
}

.ggp-stap:last-child::before {
	background: var(--ggp-goud);
}

.ggp-tijdlijn.wp-block-columns {
	border-top: 1px solid var(--ggp-goud);
}

.ggp-stap .ggp-tijd-label,
.ggp-stap:last-child .ggp-tijd-label {
	color: var(--ggp-rood);
	font-size: 1.9rem;
}

.ggp-score-cijfer {
	color: var(--ggp-donker);
}

/* ---------- Kleine details ---------- */

.ggp-section .ggp-dienstlinks a:not(.wp-block-button__link) {
	border-radius: 4px;
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ggp-info .ggp-info-item strong {
	color: var(--ggp-goud);
	letter-spacing: 0.16em;
}

.ggp-occ-prijs {
	font-family: var(--ggp-serif);
	font-weight: 500;
	color: var(--ggp-donker);
}

.ggp-occ-status {
	border-radius: 2px;
	letter-spacing: 0.14em;
}

.ggp-footer {
	letter-spacing: 0.02em;
}

.ggp-cookiebalk,
.ggp-occ-filter {
	border-radius: 6px;
}

/* ---------- Merkenband op de startpagina ---------- */

.ggp-merken.wp-block-columns {
	gap: 24px;
}

.ggp-merken .ggp-cijfer {
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	line-height: 1.15;
}

.ggp-merkenlijst {
	margin: 40px auto 0;
	max-width: 900px;
	text-align: center;
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 2;
	color: #9d968a;
}

@media (max-width: 781px) {
	.ggp-merken.wp-block-columns {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 26px 16px;
	}

	.ggp-cijfers.ggp-merken .wp-block-column + .wp-block-column {
		margin-top: 0;
	}
}

/* ---------- Grote foto: tekst netjes uitgelijnd, bord van het pand goed zichtbaar ---------- */

.ggp-hero .wp-block-cover__inner-container {
	width: 100%;
	max-width: 1140px;
	margin-left: auto !important;
	margin-right: auto !important;
}

.ggp-hero .wp-block-cover__inner-container > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.ggp-hero .ggp-hero-tekst {
	max-width: 30em;
}

.ggp-hero .wp-block-cover__background {
	background:
		radial-gradient(900px 520px at 6% 30%, rgba(205, 28, 26, 0.2), transparent 65%),
		linear-gradient(100deg, rgba(10, 11, 14, 0.94) 0%, rgba(10, 11, 14, 0.84) 36%, rgba(10, 11, 14, 0.4) 60%, rgba(10, 11, 14, 0.12) 100%) !important;
}

@media (max-width: 781px) {
	.ggp-hero .wp-block-cover__background {
		background: linear-gradient(180deg, rgba(10, 11, 14, 0.55) 0%, rgba(10, 11, 14, 0.85) 55%, rgba(10, 11, 14, 0.92) 100%) !important;
	}

	.ggp-hero .wp-block-cover__image-background {
		object-position: 72% 30% !important;
	}
}

/* ---------- Over ons: het team ---------- */

.ggp-team.wp-block-columns {
	margin-top: 34px;
	gap: 24px;
}

.ggp-persoon {
	display: flex;
	align-items: center;
	gap: 22px;
	padding: 24px 26px;
	background: #fff;
	border: 1px solid var(--ggp-lijn);
	border-radius: 6px;
}

.ggp-persoon .ggp-avatar {
	flex: 0 0 104px;
	margin: 0;
}

.ggp-persoon .ggp-avatar img {
	width: 104px;
	height: 104px;
	object-fit: cover;
	object-position: center 25%;
	border-radius: 50%;
	box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--ggp-goud);
	display: block;
}

.ggp-persoon-tekst p {
	margin: 0;
}

.ggp-persoon .ggp-naam {
	font-family: var(--ggp-serif);
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.15;
	color: var(--ggp-donker);
}

.ggp-persoon .ggp-rol {
	margin: 4px 0 10px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #9a7b45;
}

.ggp-persoon-tekst p:last-child {
	font-size: 0.97rem;
}

@media (max-width: 600px) {
	.ggp-persoon {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Over ons: teamfoto als brede, lagere strook boven de kaartjes. */
.ggp-section:has(.ggp-team) .ggp-foto {
	max-width: 960px;
	margin-left: auto !important;
	margin-right: auto !important;
}

.ggp-section:has(.ggp-team) .ggp-foto img {
	width: 100%;
	height: 400px;
	object-fit: cover;
	object-position: center 38%;
}

.ggp-section:has(.ggp-team) .ggp-bijschrift {
	max-width: 960px;
	margin-left: auto !important;
	margin-right: auto !important;
}

.ggp-section:has(.ggp-team) .ggp-team.wp-block-columns {
	max-width: 960px;
	margin-left: auto !important;
	margin-right: auto !important;
}

@media (max-width: 781px) {
	.ggp-section:has(.ggp-team) .ggp-foto img {
		height: 240px;
	}
}

/* Over ons: kop en inleiding van het teamblok op dezelfde breedte als de foto. */
.ggp-section:has(.ggp-team) > * {
	max-width: 960px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ---------- RDW-erkend ---------- */

.ggp-hero .ggp-keurmerk,
.ggp-paginakop .ggp-keurmerk {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 26px !important;
	padding: 9px 16px 9px 12px;
	border: 1px solid rgba(194, 162, 106, 0.6);
	border-radius: 999px;
	background: rgba(10, 11, 14, 0.45);
	color: var(--ggp-goud-licht);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.ggp-hero .ggp-keurmerk::before,
.ggp-paginakop .ggp-keurmerk::before {
	content: "";
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2a26a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l7 3v6c0 5-3.5 9-7 11-3.5-2-7-6-7-11V5z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ggp-rdw-regel {
	margin-top: 18px;
	padding: 14px 18px;
	border-left: 1px solid var(--ggp-goud);
	background: var(--ggp-grijs);
	font-size: 0.97rem;
}

.ggp-paginakop .ggp-keurmerk {
	max-width: none !important;
	color: var(--ggp-goud-licht) !important;
}

/* Icoontjes bij de pluspunten precies in het midden van het rondje, ook op telefoon en tablet. */
.ggp-usp .wp-block-column::after {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
	inset: 0;
	margin: auto;
}
