:root{
	--bg:#f7fafc;
	--panel:#fff;
	--text:#1a202c;
	--muted:#475569;
	--brand:#2e7d32;
	--brand-2:#63c27a;
	--accent:#2b6cb0;
	/* --bg:#0f1215;charcoal */
	/* --panel:#12161a;darker panel */
	/* --text:#e7e9ec;near-white */
	/* --muted:#b9c0c7;soft gray */
	/* --brand:#6bbf59;moss green */
	/* --brand-2:#99d18f;light moss */
	/* --accent:#c3e4ff;cool highlight */
	--white:#fff;
	--black:#000;
	--shadow:0 10px 30px rgba(0,0,0,.25);/*0 8px 24px rgba(16,24,40,.08)*/
	--radius:18px;/*14px*/
	--maxw:1120px;
}
/* ====== Reset / Base ====== */
* { box-sizing:border-box; }
html, body { height:100%; }
body {
	background-color:var(--white);/*linear-gradient(180deg,#f9fbfd 0%, #ffffff 100%)*/
	color:var(--text);
	font-family:"Segoe UI",Roboto,Inter,"Helvetica Neue",Arial,sans-serif;
	font-size:16px;
	margin:0;
}
img { display:block; max-width:100%; }
a { color:var(--accent); font-weight:600; text-decoration:none; }
a:hover { text-decoration:underline; }
.container { max-width:var(--maxw); margin:0 auto; padding:0 22px; width:100%; }
.btn {
	background:linear-gradient(180deg, var(--brand) 0%, #256c28 100%);
	border:0;
	border-radius:999px;
	box-shadow:0 8px 22px rgba(46,125,50,.25);
	color:var(--white);
	cursor:pointer;
	font-weight:600;
	letter-spacing:.2px;
	padding:10px 16px;
}
.btn:hover { background:linear-gradient(180deg, var(--brand-2) 0%, #256c28 100%); }
/* ====== Header / Nav ====== */
header {
	backdrop-filter:saturate(140%) blur(8px);
	background:rgba(255,255,255,.85);
	border-bottom:1px solid rgba(16,24,40,.08);
	position:sticky;
	top:0;
	z-index:50;
}
.nav { align-items:center; display:flex; gap:16px; justify-content:space-between; padding:14px 0; }
.brand { display:flex; align-items:center; gap:12px; font-weight:700; }
.logo { background:radial-gradient(120% 120% at 30% 20%, #6bbf59 0%, #244c2b 60%, #0c1114 100%); border-radius:10px; box-shadow:var(--shadow); height:36px; width:36px; }
.menu { align-items:center; display:flex; gap:18px; }
.menu a { color:var(--muted); font-weight:600; }
.menu a:hover { color:var(--accent); }
.menu a.btn { color:var(--white); text-decoration:none; }
.menu a.btn:hover { text-decoration:underline; }
/* ====== Hero ====== */
.hero { background-color:var(--white); display:grid; isolation:isolate; min-height:72vh; overflow:hidden; place-items:center; position:relative; text-align:center; }
.hero::before { background:url('/images/hero-mini.jpg') center/cover no-repeat; content:""; filter:saturate(110%) contrast(102%); inset:0; opacity:.38; position:absolute; transform:scale(1.02); }
/* vignette */
.hero::after { background:radial-gradient(60% 60% at 50% 30%, rgba(255,255,255,0) 0%, rgba(255,255,255,.4) 70%, rgba(255,255,255,.7) 100%); content:""; inset:0; position:absolute; }
.hero-inner { padding:80px 0; position:relative; z-index:1; }
.eyebrow { color:var(--brand); font-size:.78rem; font-weight:800; letter-spacing:.16em; margin-bottom:12px; text-transform:uppercase; }
.hero .textBox { background-color:var(--white); border:1px solid grey; border-radius:15px; margin:0 auto; min-width:60%; opacity:0.6; padding:5px; width:80%; }
.hero h1 { font-size:clamp(28px, 6vw, 56px); line-height:1.04; margin:.4rem 0 1rem; }
.hero p { color:var(--black); font-size:clamp(16px,2.4vw,18px); margin:12px auto; max-width:720px; opacity:1; padding:4px; }
.hero-cta { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:12px; }
/* ====== Gallery ====== */
.section { border-top:1px solid rgba(16,24,40,.08); padding:28px 0; }
.section h2 { font-size:clamp(22px, 4.8vw, 36px); margin:0 0 12px; }
#gallery .textBox { background-color:rgb(250,250,250); border:1px solid rgb(233, 236, 239); border-radius:15px; color:rgb(73, 80, 87); margin:0 0 25px; opacity:0.8; padding:5px 15px; }
.gallery { display:grid; gap:10px; grid-template-columns:repeat(12, 1fr); }
.gallery figure { background:var(--white); border:1px solid rgba(16,24,40,.06); border-radius:14px; margin:0; overflow:hidden; position:relative; }
.gallery img { height:100%; object-fit:cover; transition:transform .35s ease; width:100%; }
.gallery figure:hover img { transform:scale(1.04); }
/* layout:big mosaic */
.g1 { grid-column:span 7; }
.g2 { grid-column:span 5; }
.g3 { grid-column:span 4; }
.g4 { grid-column:span 4; }
.g5 { grid-column:span 4; }
.g6 { grid-column:span 8; }
.g7 { grid-column:span 4; }
@media (max-width:800px) {
	.gallery { grid-template-columns:repeat(6, 1fr); }
	.g1,.g2,.g3,.g4,.g5,.g6,.g7 { grid-column:span 6; }
}
/* ====== Lightbox ====== */
.lightbox { align-items:center; background:rgba(0,0,0,.9); display:none; inset:0; justify-content:center; padding:16px; position:fixed; z-index:100; }
.lightbox img { border-radius:12px; max-height:86vh; max-width:min(92vw, 1200px); }
.lightbox.active { display:flex }
.lightbox .close { background:var(--white); border:1px solid rgba(255,255,255,.5); border-radius:999px; cursor:pointer; padding:10px 14px; position:absolute; right:20px; top:20px; }
.lightbox .close:hover { background:rgba(255,255,255,.5); border:1px solid var(--white); color:var(--white); }
/* ====== Maps ====== */
.googleFrame { border:none; border-radius:15px; box-shadow:var(--shadow); margin:0 auto; overflow:hidden; padding:0; }
.mapFloat { float:right; margin-left:10px; }
iframe { border:none; padding:0; }
/* ====== Booking ====== */
.booking { background-color:var(--white); border-top:1px solid rgba(16,24,40,.08); }
/* ====== Footer ====== */
footer { background:linear-gradient(180deg, #f7fafc 0%, #ffffff 100%); color:var(--black); padding:22px 0; }
.footgrid { align-items:center; display:grid; gap:10px; }
@media (min-width:800px) { .footgrid { grid-template-columns:1fr auto; } }
/* ====== Utilities ====== */
.center { text-align:center; }
.spacer { height:28px; }
.badge { border:1px solid rgba(255,255,255,.14); border-radius:999px; color:var(--muted); display:inline-block; font-size:.84rem; padding:6px 10px; }
/* terug naar boven knop */
.back-to-top {
	border-radius:4px;
	bottom:2rem;
	font-size:1.25rem;
	font-weight:500;
	opacity:0;
	pointer-events:none;
	padding:5px 15px;
	position:fixed;
	right:2rem;
	text-decoration:none;
	transition:opacity 0.5s ease;
	z-index:1000;
}
.back-to-top:hover,
.back-to-top:active,
.back-to-top:focus { background-color:var(--black-grey); color:var(--white); text-decoration:none; }
.back-to-top i:before { color:#fff; }
.back-to-top i { font-style:normal; }