/*
* GOOGLE FONTS - kopieer deze link-tags in de van elke HTML-pagina,
* vóór de link naar styles.css:
*
*
*
*
*
* Bitter = koppen (karaktervol, warm, ambachtelijk zonder serif-cliche)
* Hanken Grotesk = bodytekst (menselijk, goed leesbaar)
*
* Kleurreflex: "verzadigd warmroos en salie op wit, niet beige"
* Primair: #ffa28f (warmroos)
* Accent: #aece89 (salie-groen)
* Paars: #9437fd (sparend ingezet als diepte-accent)
* Neuraal: puur wit + diepdonker groen-grijs voor tekst
*/
/* =========================================================
RESET & BASIS
========================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 100%; scroll-behavior: auto; }
body {
font-family: var(--font-body);
font-size: var(--text-base);
line-height: 1.65;
color: var(--color-text);
background: var(--color-bg);
-webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
/* =========================================================
DESIGN TOKENS
========================================================= */
:root {
/* Merkkleuren */
--color-primary: #ffa28f;
--color-primary-dark: #e07a65;
--color-primary-light: #ffe5de;
--color-accent: #aece89;
--color-accent-dark: #7da85a;
--color-accent-light: #e6f3d9;
--color-purple: #9437fd;
/* Neutraal */
--color-bg: #ffffff;
--color-surface: #f8f5f3;
--color-border: #e8e0db;
--color-text: #1e2820;
--color-text-muted: #4a5445;
--color-text-on-dark: #ffffff;
/* Typografie */
--font-heading: 'Bitter', Georgia, serif;
--font-body: 'Hanken Grotesk', Helvetica, sans-serif;
/* Vloeiende typeschaal */
--text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
--text-sm: clamp(0.875rem, 0.82rem + 0.28vw, 1rem);
--text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
--text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
--text-xl: clamp(1.375rem, 1.1rem + 1.4vw, 2rem);
--text-2xl: clamp(1.75rem, 1.2rem + 2.8vw, 3rem);
--text-3xl: clamp(2.25rem, 1.4rem + 4.3vw, 4.25rem);
/* Spacing-schaal (stappen van 4px) */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-10: 2.5rem;
--space-12: 3rem;
--space-16: 4rem;
--space-20: 5rem;
--space-24: 6rem;
--space-32: 8rem;
/* Radius */
--radius-sm: 0.5rem;
--radius-md: 1rem;
--radius-lg: 1.75rem;
--radius-xl: 2.5rem;
--radius-full: 9999px;
/* Schaduwen */
--shadow-sm: 0 1px 3px rgba(30,40,32,0.08), 0 1px 2px rgba(30,40,32,0.04);
--shadow-md: 0 4px 16px rgba(30,40,32,0.10), 0 2px 6px rgba(30,40,32,0.06);
--shadow-lg: 0 12px 40px rgba(30,40,32,0.13), 0 4px 12px rgba(30,40,32,0.07);
--shadow-card: 0 2px 12px rgba(255,162,143,0.10), 0 4px 24px rgba(30,40,32,0.06);
/* Layout */
--container-max: 72rem;
--container-pad: clamp(var(--space-4), 5vw, var(--space-10));
/* Animatie */
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
--duration-fast: 0.25s;
--duration-base: 0.55s;
--duration-slow: 0.9s;
}
/* =========================================================
HULPKLASSEN
========================================================= */
.container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-pad);
}
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
.text-center { text-align: center; }
/* =========================================================
TYPOGRAFIE
========================================================= */
h1, h2, h3, h4 {
font-family: var(--font-heading);
line-height: 1.2;
color: var(--color-text);
text-wrap: balance;
}
h1 { font-size: var(--text-3xl); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.01em; }
h3 { font-size: var(--text-xl); font-weight: 600; }
h4 { font-size: var(--text-lg); font-weight: 600; }
p { max-width: 65ch; }
.lead {
font-size: var(--text-lg);
line-height: 1.55;
color: var(--color-text-muted);
}
/* =========================================================
KNOPPEN
========================================================= */
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-8);
border-radius: var(--radius-full);
font-family: var(--font-body);
font-size: var(--text-base);
font-weight: 600;
line-height: 1;
transition: transform var(--duration-fast) var(--ease-out-quart),
box-shadow var(--duration-fast) var(--ease-out-quart),
background var(--duration-fast) ease,
color var(--duration-fast) ease;
cursor: pointer;
white-space: nowrap;
}
.btn:focus-visible {
outline: 3px solid var(--color-purple);
outline-offset: 3px;
}
.btn-primary {
background: var(--color-primary);
color: var(--color-text);
box-shadow: 0 2px 12px rgba(255,162,143,0.35);
}
.btn-primary:hover {
background: var(--color-primary-dark);
color: #fff;
transform: translateY(-2px);
box-shadow: 0 6px 24px rgba(224,122,101,0.40);
}
.btn-secondary {
background: transparent;
color: var(--color-text);
box-shadow: inset 0 0 0 2px var(--color-border);
}
.btn-secondary:hover {
box-shadow: inset 0 0 0 2px var(--color-primary);
color: var(--color-primary-dark);
transform: translateY(-2px);
}
.btn-accent {
background: var(--color-accent);
color: var(--color-text);
box-shadow: 0 2px 12px rgba(174,206,137,0.30);
}
.btn-accent:hover {
background: var(--color-accent-dark);
color: #fff;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(125,168,90,0.35);
}
/* =========================================================
HEADER & NAVIGATIE
========================================================= */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(255,255,255,0.96);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-bottom: 1px solid var(--color-border);
transition: box-shadow var(--duration-fast) ease;
}
.site-header.scrolled { box-shadow: var(--shadow-sm); }
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 4.5rem;
}
.site-logo img {
height: 3rem;
width: auto;
}
.site-logo .wordmark {
font-family: var(--font-heading);
font-size: var(--text-lg);
font-weight: 700;
color: var(--color-text);
letter-spacing: -0.01em;
}
.site-nav { display: flex; align-items: center; gap: var(--space-8); }
.nav-links {
display: flex;
align-items: center;
gap: var(--space-6);
}
.nav-links a {
font-size: var(--text-sm);
font-weight: 500;
color: var(--color-text-muted);
position: relative;
padding-block: var(--space-1);
transition: color var(--duration-fast) ease;
}
.nav-links a::after {
content: '';
position: absolute;
left: 0; bottom: -2px;
width: 0; height: 2px;
background: var(--color-primary);
border-radius: var(--radius-full);
transition: width var(--duration-base) var(--ease-out-expo);
}
.nav-links a:hover,
.nav-links a[aria-current="page"] { color: var(--color-text); }
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after { width: 100%; }
.nav-links a:focus-visible {
outline: 2px solid var(--color-purple);
outline-offset: 3px;
border-radius: 2px;
}
/* Hamburger */
.nav-toggle {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
width: 2.5rem;
height: 2.5rem;
gap: 5px;
border-radius: var(--radius-sm);
transition: background var(--duration-fast) ease;
}
.nav-toggle:hover { background: var(--color-surface); }
.nav-toggle:focus-visible { outline: 2px solid var(--color-purple); outline-offset: 2px; }
.nav-toggle span {
display: block;
width: 22px;
height: 2px;
background: var(--color-text);
border-radius: var(--radius-full);
transition: transform var(--duration-base) var(--ease-out-expo),
opacity var(--duration-fast) ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Mobiel menu */
.mobile-menu {
display: none;
position: absolute;
top: 100%;
left: 0; right: 0;
background: #fff;
border-bottom: 1px solid var(--color-border);
padding: var(--space-6) var(--container-pad) var(--space-8);
box-shadow: var(--shadow-md);
}
.mobile-menu.is-open { display: block; }
.mobile-menu .nav-links {
flex-direction: column;
align-items: flex-start;
gap: var(--space-4);
}
.mobile-menu .nav-links a { font-size: var(--text-base); }
.mobile-menu .btn { margin-top: var(--space-4); }
/* =========================================================
HERO
========================================================= */
.hero {
position: relative;
min-height: clamp(540px, 88vh, 800px);
display: grid;
place-items: center;
overflow: hidden;
}
.hero-media {
position: absolute;
inset: 0;
z-index: 0;
}
.hero-media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
135deg,
rgba(30,40,32,0.52) 0%,
rgba(30,40,32,0.28) 60%,
rgba(255,162,143,0.18) 100%
);
z-index: 1;
}
.hero-content {
position: relative;
z-index: 2;
text-align: center;
padding: var(--space-16) var(--container-pad);
max-width: 52rem;
margin-inline: auto;
}
.hero-kicker {
display: inline-block;
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-primary-light);
letter-spacing: 0.06em;
margin-bottom: var(--space-4);
}
.hero-title {
color: #fff;
margin-bottom: var(--space-5);
text-shadow: 0 2px 16px rgba(0,0,0,0.18);
}
.hero-title em {
font-style: italic;
color: var(--color-primary);
}
.hero-lead {
color: rgba(255,255,255,0.88);
font-size: var(--text-lg);
margin-inline: auto;
margin-bottom: var(--space-8);
max-width: 42ch;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
justify-content: center;
}
/* Afgeronde hero-kaart die licht over de hero valt */
.hero-card-anchor {
position: relative;
z-index: 3;
margin-top: -3.5rem;
margin-inline: auto;
padding-inline: var(--container-pad);
max-width: var(--container-max);
}
/* =========================================================
SECTIES ALGEMEEN
========================================================= */
.section {
padding-block: clamp(var(--space-16), 8vw, var(--space-32));
}
.section-surface { background: var(--color-surface); }
.section-dark {
background: var(--color-text);
color: var(--color-text-on-dark);
}
.section-header {
margin-bottom: var(--space-12);
}
.section-header.centered { text-align: center; }
.section-header.centered p { margin-inline: auto; }
.section-title { margin-bottom: var(--space-4); }
.section-lead {
font-size: var(--text-lg);
color: var(--color-text-muted);
max-width: 54ch;
line-height: 1.6;
}
.section-dark .section-lead { color: rgba(255,255,255,0.70); }
/* =========================================================
DIENSTEN - KAARTEN
========================================================= */
.diensten-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
gap: var(--space-6);
}
.dienst-card {
background: var(--color-bg);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-card);
transition: transform var(--duration-base) var(--ease-out-expo),
box-shadow var(--duration-base) var(--ease-out-expo);
display: flex;
flex-direction: column;
}
.dienst-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
}
.dienst-card-image {
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--color-primary-light);
}
.dienst-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--duration-slow) var(--ease-out-expo);
}
.dienst-card:hover .dienst-card-image img { transform: scale(1.06); }
.dienst-card-body {
padding: var(--space-6);
flex: 1;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.dienst-card-title {
font-family: var(--font-heading);
font-size: var(--text-lg);
font-weight: 600;
color: var(--color-text);
}
.dienst-card-desc {
font-size: var(--text-sm);
color: var(--color-text-muted);
line-height: 1.6;
flex: 1;
}
.dienst-card-price {
display: inline-flex;
align-items: center;
gap: var(--space-1);
margin-top: var(--space-3);
font-family: var(--font-heading);
font-size: var(--text-base);
font-weight: 700;
color: var(--color-primary-dark);
}
/* =========================================================
PRIJSLIJST
========================================================= */
.price-list {
display: grid;
gap: var(--space-3);
max-width: 44rem;
}
.price-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-4) var(--space-6);
background: var(--color-bg);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
}
.section-surface .price-row { background: var(--color-bg); }
.price-row-name {
font-family: var(--font-heading);
font-weight: 600;
font-size: var(--text-base);
color: var(--color-text);
}
.price-row-dots {
flex: 1;
border-bottom: 2px dotted var(--color-border);
margin-bottom: 3px;
min-width: var(--space-6);
}
.price-row-amount {
font-family: var(--font-heading);
font-weight: 700;
font-size: var(--text-base);
color: var(--color-primary-dark);
white-space: nowrap;
}
/* =========================================================
WERKGEBIED
========================================================= */
.werkgebied-block {
background: var(--color-primary-light);
border-radius: var(--radius-xl);
padding: var(--space-12) var(--space-10);
display: flex;
flex-wrap: wrap;
gap: var(--space-8);
align-items: center;
}
.werkgebied-text { flex: 1 1 18rem; }
.werkgebied-text h2 { margin-bottom: var(--space-4); }
.werkgebied-text p { color: var(--color-text-muted); }
.werkgebied-badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
background: var(--color-primary);
color: var(--color-text);
font-family: var(--font-heading);
font-weight: 700;
font-size: var(--text-xl);
padding: var(--space-4) var(--space-8);
border-radius: var(--radius-full);
box-shadow: var(--shadow-md);
flex-shrink: 0;
}
.werkgebied-badge svg {
width: 1.4em;
height: 1.4em;
flex-shrink: 0;
}
/* =========================================================
SIGNATUURMOMENT - CONTACT / BESTELLING CTA
(het ene opvallende interactieve blok)
========================================================= */
.cta-spotlight {
background: var(--color-text);
border-radius: var(--radius-xl);
padding: var(--space-16) var(--space-10);
text-align: center;
position: relative;
overflow: hidden;
}
.cta-spotlight::before {
content: '';
position: absolute;
top: -6rem; right: -6rem;
width: 22rem; height: 22rem;
background: radial-gradient(circle, rgba(255,162,143,0.22) 0%, transparent 70%);
pointer-events: none;
}
.cta-spotlight::after {
content: '';
position: absolute;
bottom: -5rem; left: -4rem;
width: 18rem; height: 18rem;
background: radial-gradient(circle, rgba(174,206,137,0.16) 0%, transparent 70%);
pointer-events: none;
}
.cta-spotlight-inner { position: relative; z-index: 1; }
.cta-spotlight h2 {
color: #fff;
margin-bottom: var(--space-4);
}
.cta-spotlight p {
color: rgba(255,255,255,0.72);
margin-inline: auto;
margin-bottom: var(--space-8);
font-size: var(--text-lg);
max-width: 48ch;
}
.cta-spotlight .btn-primary { font-size: var(--text-lg); padding: var(--space-4) var(--space-10); }
/* =========================================================
INTRO / OVER-ONS BLOK
========================================================= */
.intro-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(var(--space-8), 6vw, var(--space-16));
align-items: center;
}
.intro-split-text h2 { margin-bottom: var(--space-5); }
.intro-split-text p { color: var(--color-text-muted); margin-bottom: var(--space-4); }
.intro-split-image {
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-lg);
aspect-ratio: 4 / 5;
}
.intro-split-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--duration-slow) var(--ease-out-expo);
}
.intro-split-image:hover img { transform: scale(1.04); }
/* =========================================================
GALERIJ STRIP
========================================================= */
.gallery-strip {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
gap: var(--space-3);
}
.gallery-item {
border-radius: var(--radius-md);
overflow: hidden;
aspect-ratio: 1;
background: var(--color-primary-light);
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--duration-slow) var(--ease-out-expo);
}
.gallery-item:hover img { transform: scale(1.07); }
/* =========================================================
CONTACTFORMULIER
========================================================= */
.contact-layout {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: clamp(var(--space-8), 6vw, var(--space-16));
align-items: start;
}
.contact-info h2 { margin-bottom: var(--space-5); }
.contact-info p { color: var(--color-text-muted); margin-bottom: var(--space-6); }
.contact-detail {
display: flex;
align-items: flex-start;
gap: var(--space-3);
margin-bottom: var(--space-4);
font-size: var(--text-base);
color: var(--color-text);
}
.contact-detail svg {
width: 1.25rem;
height: 1.25rem;
flex-shrink: 0;
margin-top: 2px;
color: var(--color-primary-dark);
}
.contact-form {
background: var(--color-bg);
border-radius: var(--radius-xl);
padding: var(--space-10);
box-shadow: var(--shadow-lg);
}
.form-group {
display: flex;
flex-direction: column;
gap: var(--space-1);
margin-bottom: var(--space-5);
}
.form-group label {
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-text);
}
.form-group input,
.form-group textarea {
font-family: var(--font-body);
font-size: var(--text-base);
color: var(--color-text);
background: var(--color-surface);
border: 1.5px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-3) var(--space-5);
width: 100%;
transition: border-color var(--duration-fast) ease,
box-shadow var(--duration-fast) ease;
appearance: none;
-webkit-appearance: none;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
color: var(--color-text-muted);
opacity: 0.7;
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(255,162,143,0.25);
}
.form-group textarea { min-height: 140px; resize: vertical; }
.form-honeypot { display: none; }
.form-status {
margin-top: var(--space-4);
padding: var(--space-3) var(--space-5);
border-radius: var(--radius-md);
font-size: var(--text-sm);
font-weight: 500;
display: none;
}
.form-status.success {
display: block;
background: var(--color-accent-light);
color: var(--color-accent-dark);
}
.form-status.error {
display: block;
background: var(--color-primary-light);
color: var(--color-primary-dark);
}
/* =========================================================
FOOTER
========================================================= */
.site-footer {
background: var(--color-text);
color: rgba(255,255,255,0.65);
padding-block: var(--space-16) var(--space-8);
}
.footer-inner {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: var(--space-10);
margin-bottom: var(--space-12);
}
.footer-brand .wordmark {
font-family: var(--font-heading);
font-size: var(--text-xl);
font-weight: 700;
color: #fff;
display: block;
margin-bottom: var(--space-4);
}
.footer-brand p {
font-size: var(--text-sm);
line-height: 1.7;
max-width: 28ch;
}
.footer-col h4 {
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: 600;
color: #fff;
margin-bottom: var(--space-4);
letter-spacing: 0.04em;
}
.footer-col ul { display: flex; flex-direction: column; gap: var(--space-2); }
.footer-col a {
font-size: var(--text-sm);
color: rgba(255,255,255,0.60);
transition: color var(--duration-fast) ease;
}
.footer-col a:hover { color: var(--color-primary); }
.footer-col a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 2px; }
.footer-bottom {
border-top: 1px solid rgba(255,255,255,0.10);
padding-top: var(--space-6);
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
justify-content: space-between;
align-items: center;
font-size: var(--text-xs);
}
.footer-credit a {
color: rgba(255,255,255,0.45);
transition: color var(--duration-fast) ease;
}
.footer-credit a:hover { color: var(--color-primary); }
/* =========================================================
SCROLL REVEAL - PROGRESSIVE ENHANCEMENT
========================================================= */
html.anim .reveal {
opacity: 0;
transform: translateY(1.5rem);
transition: opacity var(--duration-slow) var(--ease-out-expo),
transform var(--duration-slow) var(--ease-out-expo);
}
html.anim .reveal.is-revealed {
opacity: 1;
transform: none;
}
html.anim .reveal-left {
opacity: 0;
transform: translateX(-2rem);
transition: opacity var(--duration-slow) var(--ease-out-expo),
transform var(--duration-slow) var(--ease-out-expo);
}
html.anim .reveal-left.is-revealed {
opacity: 1;
transform: none;
}
html.anim .reveal-right {
opacity: 0;
transform: translateX(2rem);
transition: opacity var(--duration-slow) var(--ease-out-expo),
transform var(--duration-slow) var(--ease-out-expo);
}
html.anim .reveal-right.is-revealed {
opacity: 1;
transform: none;
}
/* Stagger voor kinderen */
html.anim .stagger > * {
opacity: 0;
transform: translateY(1.25rem);
transition: opacity var(--duration-slow) var(--ease-out-expo),
transform var(--duration-slow) var(--ease-out-expo);
}
html.anim .stagger.is-revealed > * { opacity: 1; transform: none; }
html.anim .stagger.is-revealed > *:nth-child(1) { transition-delay: 0.05s; }
html.anim .stagger.is-revealed > *:nth-child(2) { transition-delay: 0.15s; }
html.anim .stagger.is-revealed > *:nth-child(3) { transition-delay: 0.25s; }
html.anim .stagger.is-revealed > *:nth-child(4) { transition-delay: 0.35s; }
html.anim .stagger.is-revealed > *:nth-child(5) { transition-delay: 0.45s; }
html.anim .stagger.is-revealed > *:nth-child(6) { transition-delay: 0.55s; }
html.anim .stagger.is-revealed > *:nth-child(7) { transition-delay: 0.65s; }
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
html.anim .reveal,
html.anim .reveal-left,
html.anim .reveal-right,
html.anim .stagger > * {
opacity: 1;
transform: none;
transition: none;
}
.btn,
.dienst-card,
.dienst-card-image img,
.intro-split-image img,
.gallery-item img,
.nav-links a::after {
transition: none;
}
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 900px) {
.intro-split {
grid-template-columns: 1fr;
}
.intro-split-image {
aspect-ratio: 16 / 9;
order: -1;
}
.contact-layout {
grid-template-columns: 1fr;
}
.footer-inner {
grid-template-columns: 1fr 1fr;
}
.footer-inner > :first-child {
grid-column: 1 / -1;
}
}
@media (max-width: 680px) {
.nav-links { display: none; }
.nav-toggle { display: flex; }
.site-nav .btn { display: none; }
.hero-actions { flex-direction: column; align-items: center; }
.werkgebied-block {
flex-direction: column;
text-align: center;
padding: var(--space-8) var(--space-6);
}
.cta-spotlight { padding: var(--space-10) var(--space-6); }
.contact-form { padding: var(--space-6); }
.footer-inner { grid-template-columns: 1fr; }
.footer-bottom { flex-direction: column; text-align: center; }
.hero-card-anchor { margin-top: -2rem; }
.diensten-grid { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
.btn { padding: var(--space-3) var(--space-6); }
}