/*
Theme Name: Shining Image
Description: Eigen thema voor shiningimage.nl, nagebouwd naar het ontwerp van de oude MODX-site (oktober 2026).
Version: 1.0.0
Requires at least: 7.1
Requires PHP: 8.2
Text Domain: shiningimage
*/

/* ==========================================================================
   1. Variabelen — alle kleuren, maten en lettertypes komen hiervandaan.
   ========================================================================== */
:root {
	--paars: #412272;
	--paars-donker: #210a45;
	--paars-diep: #16072f;
	--paars-lint: #2f135c;
	--paars-rand: #4c179e;
	--mint: #7cccbf;
	--mint-tekst: #3a9686;          /* mint for text on white, 3.5:1 */
	--mint-licht: #e7fbf7;
	--mint-band: #c4efe6;
	--lila: #aaa5c2;
	--lila-donker: #9481b3;
	--roze: #e3006b;
	--roze-rand: #ca005f;
	--tekst: #505050;
	--lijn: #e5e5e5;
	--wit: #fff;
	--voet-tekst: #cccccc;

	--font: "Yanone Kaffeesatz", "Arial Narrow", Arial, sans-serif;
	--font-script: "Honey Script", "Yanone Kaffeesatz", cursive;

	--container: 1170px;
	--goot: 15px;
	--hoek: 8px;
	--kop-hoogte: 135px;
	--overgang: .2s ease;
}

@font-face {
	font-family: "Yanone Kaffeesatz";
	src: url("assets/fonts/yanone-latin.woff2") format("woff2");
	font-weight: 200 700;
	font-display: swap;
	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: "Yanone Kaffeesatz";
	src: url("assets/fonts/yanone-latin-ext.woff2") format("woff2");
	font-weight: 200 700;
	font-display: swap;
	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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Honey Script";
	src: url("assets/fonts/honeyscript-light-webfont.woff2") format("woff2"),
	     url("assets/fonts/honeyscript-light-webfont.woff") format("woff");
	font-weight: 300;
	font-display: swap;
}

/* ==========================================================================
   2. Basis
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font: 300 18px/1.45 var(--font);
	color: var(--tekst);
	background: var(--wit);
}
img { max-width: 100%; height: auto; }
a { color: var(--paars); text-decoration-color: var(--mint); text-underline-offset: 2px; transition: color var(--overgang); }
a:hover, a:focus { color: var(--mint-tekst); }
:focus-visible { outline: 2px solid var(--mint-tekst); outline-offset: 2px; }
p { margin: 0 0 1em; }
strong, b { font-weight: 500; }

h1, h2, h3, h4, h5, h6 { margin: 0 0 .4em; font-family: var(--font); color: var(--mint-tekst); }
h1 { font: 300 55px/1.1 var(--font-script); color: var(--wit); }
h2 { font-weight: 200; font-size: 35px; line-height: 1.15; margin-top: 1.2em; }
h3 { font-weight: 300; font-size: 22px; line-height: 1.2; }
h4 { font-weight: 300; font-size: 20px; line-height: 1.25; color: var(--paars); }
h2 a, h3 a, h4 a { color: inherit; text-decoration: none; }

hr, .wp-block-separator {
	border: 0;
	height: 1px;
	margin: 40px 0;
	background: linear-gradient(to right, transparent, rgba(0, 0, 0, .2), transparent);
	opacity: 1;
}

.screen-reader-text, .si-hp {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.si-overslaan:focus {
	position: fixed; top: 8px; left: 8px; z-index: 100;
	width: auto; height: auto; clip: auto;
	padding: 8px 14px; background: var(--paars); color: var(--wit);
}

.si-container {
	width: 100%;
	max-width: calc(var(--container) + 2 * var(--goot));
	margin: 0 auto;
	padding: 0 var(--goot);
}

/* Knoppen */
.si-knop, .wp-block-button__link, .wp-element-button {
	display: inline-block;
	padding: 6px 16px;
	border: 0;
	border-radius: 0;
	background: var(--paars);
	color: var(--wit);
	font: 300 20px/1.3 var(--font);
	text-decoration: none;
	cursor: pointer;
	transition: background var(--overgang), color var(--overgang);
}
.si-knop:hover, .si-knop:focus, .wp-block-button__link:hover, .wp-block-button__link:focus { background: var(--mint); color: var(--wit); }
.si-knop--groot { padding: 10px 22px; font-size: 25px; background: var(--roze); border: 1px solid var(--roze-rand); }
.si-knop--groot:hover, .si-knop--groot:focus { background: var(--mint); border-color: var(--mint-tekst); }

/* ==========================================================================
   3. Kop en menu
   ========================================================================== */
.si-kop {
	background: linear-gradient(#f8f8f8, var(--wit));
	border-bottom: 4px solid var(--paars);
}
.si-kop__binnen {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	min-height: var(--kop-hoogte);
}
.si-logo { display: flex; align-items: center; padding: 8px 0; }
.si-logo img { display: block; width: 165px; height: auto; }
.si-kop__rechts { display: flex; align-items: stretch; gap: 18px; }

.si-menu ul { list-style: none; margin: 0; padding: 0; display: flex; height: 100%; }
.si-menu li { display: flex; }
.si-menu a {
	display: flex;
	align-items: flex-end;
	padding: 0 11px 22px;
	color: var(--paars);
	font: 300 22px/1 var(--font);
	text-transform: uppercase;
	text-decoration: none;
	transition: background var(--overgang), color var(--overgang);
}
.si-menu a:hover, .si-menu a:focus { color: var(--mint-tekst); }
.si-menu .current-menu-item > a,
.si-menu .current-menu-ancestor > a,
.si-menu .current-page-ancestor > a,
.si-menu .current_page_parent > a,
.si-menu .si-actief > a { background: var(--mint); color: var(--wit); }

.si-sociaal { list-style: none; display: flex; gap: 8px; margin: 0; padding: 0 0 18px; align-self: flex-end; }
.si-sociaal a {
	display: flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; border-radius: 50%;
	background: var(--wit); color: #444;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
	transition: background var(--overgang), color var(--overgang);
}
.si-sociaal a:hover, .si-sociaal a:focus { background: var(--mint); color: var(--wit); }
.si-sociaal svg { width: 15px; height: 15px; fill: currentColor; }

.si-menuknop {
	display: none;
	align-self: center;
	padding: 8px 12px;
	border: 0;
	background: var(--paars);
	color: var(--wit);
	font: 300 20px/1 var(--font);
	cursor: pointer;
}

/* ==========================================================================
   4. Paginakop (paarse band met kruimelpad en titel)
   ========================================================================== */
.si-paginakop { background: var(--paars-donker); padding: 18px 0 0; }
.si-kruimel { margin: 0 0 4px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; font-size: 16px; color: var(--lila-donker); }
.si-kruimel li + li::before { content: "/"; margin: 0 6px; color: var(--voet-tekst); }
.si-kruimel a { color: var(--voet-tekst); text-decoration: none; }
.si-kruimel a:hover, .si-kruimel a:focus { color: var(--wit); }
.si-paginakop h1 {
	display: inline-block;
	margin: 0;
	padding: 0 4px 12px 0;
	border-bottom: 5px solid var(--mint);
}

/* ==========================================================================
   5. Inhoud
   ========================================================================== */
.si-inhoud { padding: 40px 0 50px; }
.si-inhoud > .si-container > *:first-child { margin-top: 0; }
.si-lead, .is-style-lead { font-size: 23px; line-height: 1.35; color: var(--paars); }

.wp-block-columns { gap: 2em 30px; margin-bottom: 1.5em; }
.wp-block-column > :first-child { margin-top: 0; }
.wp-block-image { margin: 0 0 1em; }
/* Every content image gets the thumbnail frame of the old site. */
.si-inhoud .wp-block-image img {
	padding: 4px; border: 1px solid #ddd; border-radius: var(--hoek); background: var(--wit);
}
.wp-block-list { padding-left: 1.2em; }
.si-tijden { border-collapse: collapse; }
.si-tijden td { padding: 2px 18px 2px 0; }

/* Lists of social links (contact pages): icon instead of a bullet. */
.wp-block-list:has(a[href*="facebook.com"], a[href*="linkedin.com"]) { list-style: none; padding-left: 0; }
.wp-block-list a[href*="facebook.com"], .wp-block-list a[href*="linkedin.com"],
.wp-block-list a[href*="twitter.com"], .wp-block-list a[href*="pinterest.com"] { text-decoration: none; }
.wp-block-list a[href*="facebook.com"]::before, .wp-block-list a[href*="linkedin.com"]::before,
.wp-block-list a[href*="twitter.com"]::before, .wp-block-list a[href*="pinterest.com"]::before {
	content: ""; display: inline-block; width: 15px; height: 15px; margin-right: 10px; vertical-align: -2px;
	background: var(--mint); -webkit-mask: var(--icoon) center / contain no-repeat; mask: var(--icoon) center / contain no-repeat;
}
.wp-block-list a[href*="facebook.com"] { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9.2 16V8.7h2.4l.4-2.8H9.2V4.1c0-.8.2-1.4 1.4-1.4H12V.1C11.8.1 10.9 0 9.9 0 7.8 0 6.3 1.3 6.3 3.7v2.2H4v2.8h2.4V16z'/%3E%3C/svg%3E"); }
.wp-block-list a[href*="linkedin.com"] { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 16H.3V5.3h3.3zM2 3.8A1.9 1.9 0 1 1 2 0a1.9 1.9 0 0 1 0 3.8zM16 16h-3.3v-5.2c0-1.2 0-2.8-1.7-2.8s-2 1.3-2 2.7V16H5.7V5.3h3.2v1.5c.4-.8 1.5-1.7 3.1-1.7 3.3 0 4 2.2 4 5z'/%3E%3C/svg%3E"); }
.wp-block-list a[href*="twitter.com"] { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M12.2 1h2.3L9.6 6.8 15.4 15h-4.6L7.3 10.3 3.2 15H.9l5.3-6.1L.6 1h4.7l3.2 4.3zm-.8 12.6h1.3L4.7 2.3H3.3z'/%3E%3C/svg%3E"); }
.wp-block-list a[href*="pinterest.com"] { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 0 0-2.9 15.4c-.1-.6-.1-1.6 0-2.3l.9-4s-.2-.5-.2-1.2c0-1.1.7-2 1.5-2 .7 0 1 .5 1 1.1 0 .7-.4 1.7-.7 2.7-.2.8.4 1.4 1.2 1.4 1.4 0 2.5-1.5 2.5-3.7 0-1.9-1.4-3.3-3.4-3.3-2.3 0-3.7 1.7-3.7 3.5 0 .7.3 1.4.6 1.8l.1.3-.2.8c0 .1-.1.2-.3.1-1-.5-1.6-1.9-1.6-3.1C3 5.1 4.8 2.7 8.3 2.7c2.8 0 4.9 2 4.9 4.6 0 2.8-1.7 5-4.2 5-.8 0-1.6-.4-1.8-.9l-.5 1.9c-.2.7-.7 1.6-1 2.1A8 8 0 1 0 8 0z'/%3E%3C/svg%3E"); }

/* Portfoliodetails (klant, werkzaamheden) */
.si-details h3 { margin-top: 1.1em; }
.si-details ul { list-style: none; padding: 0; }
.si-details li { padding-left: 24px; position: relative; }
.si-details li::before {
	content: ""; position: absolute; left: 0; top: .35em;
	width: 14px; height: 14px; border-radius: 50%;
	background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 11.2 3.3 8l1-1 2.2 2.2 5.2-5.2 1 1z' fill='%23fff'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.si-details a { color: var(--lila-donker); text-decoration: none; border-bottom: 1px dotted var(--paars); }
.si-details a:hover, .si-details a:focus { color: var(--mint-tekst); border-bottom: 1px solid var(--mint); }

/* Contactlijsten */
.si-contactlijst { list-style: none; margin: 0 0 1.5em; padding: 0; }
.si-contactlijst li { display: flex; gap: 10px; align-items: baseline; margin-bottom: .45em; }
.si-contactlijst a { text-decoration: none; }
.si-contactlijst svg { width: 15px; height: 15px; flex: none; fill: var(--mint); position: relative; top: 2px; }

/* ==========================================================================
   6. Portfolio
   ========================================================================== */
.si-filters { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 0 0 30px; border-bottom: 1px solid var(--lijn); }
.si-filters a, .si-filters button {
	display: block; padding: 8px 12px; border: 0; background: none;
	color: var(--lila); font: 300 18px/1.2 var(--font); text-decoration: none; cursor: pointer;
}
.si-filters a:hover, .si-filters button:hover, .si-filters a:focus, .si-filters button:focus { color: var(--paars); }
.si-filters .is-actief, .si-filters [aria-pressed="true"] { background: var(--mint); color: var(--wit); }

.si-raster { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.si-raster--klein { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.si-raster [hidden] { display: none; }
.si-tegel a {
	position: relative; display: block; overflow: hidden;
	padding: 4px; border: 1px solid #ddd; border-radius: var(--hoek); background: var(--wit);
}
.si-tegel img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; }
.si-tegel__titel {
	position: absolute; left: 4px; right: 4px; bottom: 10%;
	padding: 6px 10px; background: rgba(65, 34, 114, .9); color: var(--wit);
	font: 300 20px/1.2 var(--font); opacity: 0; transform: translateY(8px);
	transition: opacity var(--overgang), transform var(--overgang);
}
.si-tegel__icoon {
	position: absolute; top: 4px; right: -60px;
	width: 46px; height: 46px; border-radius: 0 0 0 25px;
	background: var(--mint); transition: right var(--overgang);
	display: flex; align-items: center; justify-content: center;
}
.si-tegel__icoon svg { width: 20px; height: 20px; fill: var(--wit); }
.si-tegel a::after { content: ""; position: absolute; inset: 4px; border-radius: 4px; background: var(--mint); opacity: 0; transition: opacity var(--overgang); }
.si-tegel a:hover::after, .si-tegel a:focus::after { opacity: .25; }
.si-tegel a:hover .si-tegel__icoon, .si-tegel a:focus .si-tegel__icoon { right: 4px; }
.si-tegel a:hover .si-tegel__titel, .si-tegel a:focus .si-tegel__titel { opacity: 1; transform: none; }
.si-raster--klein .si-tegel__titel { display: none; }
.si-raster--klein .si-tegel__icoon { width: 32px; height: 32px; }
.si-raster--klein .si-tegel__icoon svg { width: 14px; height: 14px; }

.si-meer { margin-top: 40px; }
.si-meer h3 { margin-bottom: 0; }

/* ==========================================================================
   7. Voorpagina
   ========================================================================== */
/* The banner scales with the width like the old slider (1920x500); on small screens it keeps a minimum height. */
.si-banner { display: block; background: #e9e9ee; border-bottom: 4px solid var(--lijn); }
.si-banner img { display: block; width: 100%; height: auto; aspect-ratio: 1920 / 500; min-height: 200px; max-height: 500px; object-fit: cover; object-position: left top; }

.si-reacties-home { position: relative; padding: 60px 0 30px; text-align: center; overflow: hidden; }
.si-reacties-home::before, .si-reacties-home::after {
	position: absolute; font: 900 270px/1 "Arial Black", Arial, sans-serif; color: #f3f3f6; z-index: -1;
}
.si-reacties-home::before { content: "\201C"; left: 0; top: -30px; }
.si-reacties-home::after { content: "\201D"; right: 0; top: 70px; }
.si-citaat { margin: 0 auto; max-width: 900px; padding: 0 5%; }
.si-citaat p { font-size: 25px; line-height: 1.3; color: var(--paars); }
.si-citaat footer { color: var(--paars); font-size: 17px; }
.si-citaat cite { font-style: normal; font-weight: 500; }
.si-citaat .si-scheiding { color: var(--mint); margin: 0 5px; }
.si-reacties-home .si-knop { margin-top: 18px; font-size: 18px; }
.si-stippen { display: flex; justify-content: center; gap: 10px; margin-top: 40px; }
.si-stippen button {
	width: 12px; height: 12px; padding: 0; border: 0; border-radius: 50%;
	background: var(--lila); opacity: .5; cursor: pointer;
}
.si-stippen button[aria-current="true"] { opacity: 1; background: var(--lila-donker); }
.si-voorpagina-portfolio { padding: 0 0 50px; text-align: center; }
.si-voorpagina-portfolio .si-raster { text-align: left; margin-bottom: 30px; }

/* ==========================================================================
   8. Reacties
   ========================================================================== */
.si-reacties { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
.si-reactie {
	position: relative; margin: 0; padding: 30px 33px; height: 100%;
	background: var(--mint-licht); color: var(--paars); text-align: center;
}
.si-reactie::before, .si-reactie::after { position: absolute; font: 100px/1 Arial, sans-serif; color: #c6eee6; }
.si-reactie::before { content: "\201C"; left: 10px; top: 10px; }
.si-reactie::after { content: "\201D"; right: 16px; bottom: -40px; }
.si-reactie p { position: relative; font-size: 20px; line-height: 1.3; }
.si-reactie footer { position: relative; font-size: 17px; }
.si-reactie cite { font-style: normal; font-weight: 500; }
.si-reactie .si-scheiding { color: var(--mint-tekst); margin: 0 5px; }
.si-reactie__over { display: block; color: var(--lila-donker); font-size: 16px; }

/* ==========================================================================
   9. Formulieren
   ========================================================================== */
.si-formulier form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }
.si-veld { margin: 0 0 18px; grid-column: 1 / -1; }
.si-veld--email, .si-veld--telefoon { grid-column: auto; }
.si-veld label { display: block; margin-bottom: 4px; font-size: 16px; font-weight: 400; }
.si-veld input, .si-veld textarea {
	width: 100%; padding: 8px 10px; border: 1px solid #ccc; border-radius: 3px;
	font: 300 18px/1.3 var(--font); color: var(--tekst); background: var(--wit);
}
.si-veld textarea { min-height: 180px; resize: vertical; }
.si-veld--fout input, .si-veld--fout textarea { border-color: #c0392b; }
.si-veld__fout { display: block; margin-top: 3px; color: #c0392b; font-size: 15px; }
.si-verzenden { grid-column: 1 / -1; margin: 0; }
.si-melding { padding: 10px 14px; border-radius: 3px; }
.si-melding--goed { background: var(--mint-licht); color: var(--paars); border: 1px solid var(--mint); }
.si-melding--fout { background: #fbeaea; color: #8b1e14; border: 1px solid #e5b5b0; }

/* ==========================================================================
   10. Oproep en voettekst
   ========================================================================== */
.si-oproep {
	position: relative; padding: 45px 0 75px;
	background: var(--mint-band); border-top: 4px solid var(--paars);
}
.si-oproep::before {
	content: ""; position: absolute; top: -4px; left: 50%; margin-left: -15px;
	border: 15px solid transparent; border-top-color: var(--wit); border-bottom: 0;
}
.si-oproep__binnen { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 24px; text-align: center; }
.si-oproep p { margin: 0; font: 300 26px/1.2 var(--font); color: var(--paars); }

.si-voet {
	position: relative; padding: 80px 0 50px;
	background: var(--paars-donker); border-top: 4px solid var(--mint);
	color: var(--voet-tekst); font-size: 17px;
}
.si-voet a { color: var(--voet-tekst); text-decoration: none; }
.si-voet a:hover, .si-voet a:focus { color: var(--wit); }
.si-voet h2 { margin: 0 0 18px; font: 300 22px/1.2 var(--font); color: var(--wit); }
.si-lint {
	position: absolute; top: -26px; left: max(var(--goot), calc((100% - var(--container)) / 2 + 22px));
	padding: 8px 18px 6px; background: var(--paars-lint);
	font: 300 26px/1.1 var(--font-script); color: var(--wit);
}
.si-lint::before {
	content: ""; position: absolute; left: -10px; top: 0;
	border-right: 10px solid #0f061d; border-top: 16px solid transparent;
}
.si-voet__kolommen { display: grid; grid-template-columns: 3fr 6fr 3fr; gap: 40px; }
.si-voet__logo img { display: block; width: 150px; margin: 6px 0 22px; }
.si-voet .si-contactlijst svg { fill: var(--mint); }
.si-voet .si-veld input, .si-voet .si-veld textarea { background: var(--paars-donker); color: var(--voet-tekst); border-color: var(--paars-rand); }
.si-voet .si-veld label { color: var(--voet-tekst); }
.si-voet .si-knop { background: var(--paars-diep); color: var(--voet-tekst); border: 1px solid var(--paars-rand); }
.si-voet .si-knop:hover, .si-voet .si-knop:focus { background: var(--mint); color: var(--wit); }
.si-voet .si-melding--goed { background: var(--paars-diep); color: var(--wit); }
.si-voet .si-tegel a { border-color: var(--paars-rand); background: var(--paars-diep); }
.si-raster--voet { display: block; margin: 0; }
.si-voet__portfolio .si-tegel { max-width: 160px; margin-bottom: 10px; }

/* ==========================================================================
   11. Schermbreedtes
   ========================================================================== */
@media (max-width: 1199px) {
	.si-menu a { padding: 0 8px 22px; font-size: 20px; }
}
@media (max-width: 991px) {
	:root { --kop-hoogte: 100px; }
	.si-logo img { width: 120px; }
	.si-menuknop { display: block; }
	.si-kop__binnen { flex-wrap: wrap; }
	.si-kop__rechts { display: none; width: 100%; flex-direction: column; gap: 0; padding-bottom: 14px; }
	.si-kop.is-open .si-kop__rechts { display: flex; }
	.si-menu ul { flex-direction: column; height: auto; }
	.si-menu a { padding: 12px 10px; border-top: 1px solid var(--lijn); }
	.si-sociaal { padding: 14px 10px 0; align-self: flex-start; }
	.si-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
	.si-raster--klein { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.si-voet__kolommen { grid-template-columns: 1fr 1fr; }
	.si-voet__formulier { grid-column: 1 / -1; grid-row: 1; }
}
@media (max-width: 781px) {
	h1 { font-size: 42px; }
	h2 { font-size: 30px; }
	.si-reacties { grid-template-columns: 1fr; }
	.si-citaat p { font-size: 21px; }
	.si-reacties-home::before, .si-reacties-home::after { font-size: 160px; }
	.si-oproep p { font-size: 23px; }
}
@media (max-width: 599px) {
	.si-raster { grid-template-columns: 1fr 1fr; gap: 12px; }
	.si-raster--klein { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
	.si-formulier form { grid-template-columns: 1fr; }
	.si-veld--email, .si-veld--telefoon { grid-column: 1 / -1; }
	.si-voet__kolommen { grid-template-columns: 1fr; gap: 30px; }
	.si-voet { padding-top: 60px; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}