/* Stadtlander "uber" v2 — restyle-pass met gpt-taste (14 aug 2026).
 * Layout/secties identiek aan v1 (backup: ../site-v1-backup); alleen de huid.
 * identiteit v2: nachtzwart + kaarslicht-amber + creme · Cabinet Grotesk (Fontshare)
 * motion: glass-pill nav · gepinde horizontale pan (GSAP) · image scale&fade ·
 * hover-physics (scale 1.05 / 700ms in overflow-clip) · korrel + radiale ambience.
 */

:root {
  --bg: oklch(15% 0.012 60);
  --bg-2: oklch(19% 0.016 60);
  --paneel: oklch(22% 0.02 62);
  --lijn: oklch(34% 0.02 65);
  --tekst: oklch(95% 0.015 85);
  --tekst-zacht: oklch(78% 0.02 80);
  --tekst-vaag: oklch(60% 0.018 75);
  --amber: oklch(80% 0.125 75);
  --amber-diep: oklch(68% 0.12 65);
  --bordeaux: oklch(50% 0.15 20);
  --room: oklch(96% 0.02 85);
  --inkt: oklch(15% 0.012 60);

  --font: "Cabinet Grotesk", system-ui, sans-serif;

  --r-xs: 0.5rem; --r-sm: 0.85rem; --r-md: 1.4rem; --r-lg: 2.25rem;
  --r-xl: 4.5rem; --r-2xl: 8rem;
  --gutter: clamp(1.1rem, 4.5vw, 3rem);
  --radius: 14px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--tekst);
  font-family: var(--font);
  font-size: 1.075rem;
  line-height: 1.65;
  font-weight: 400;
}

/* korrel + ambient gloed over de hele pagina */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body::after {
  content: "";
  position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background:
    radial-gradient(60% 45% at 80% 0%, oklch(45% 0.09 60 / 0.12), transparent 70%),
    radial-gradient(50% 40% at 8% 95%, oklch(40% 0.1 30 / 0.10), transparent 70%);
}

img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }

h1, h2 { font-weight: 800; letter-spacing: -0.022em; }

a { color: var(--amber); text-underline-offset: 3px; transition: color 200ms var(--ease); }
a:hover { color: var(--room); }
a:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 3px; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: clip; clip-path: inset(50%); white-space: nowrap; }
.noot { font-size: 0.9rem; color: var(--tekst-vaag); }

.label {
  font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--amber); margin: 0 0 var(--r-sm);
}

/* ── Nav: stevige matte balk met amber bies ───── */
.top {
  position: sticky; top: 0;
  z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: clamp(1rem, 3vw, 2.5rem);
  width: 100%;
  padding: 0.7rem var(--gutter);
  background: var(--bg);
  border-bottom: 2px solid var(--amber-diep);
}
.merk { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--tekst); font-weight: 800; font-size: 1rem; letter-spacing: -0.01em; }
.merk img { width: 32px; height: auto; filter: invert(1) opacity(0.92); }
.top nav { display: flex; align-items: center; gap: clamp(0.7rem, 2vw, 1.5rem); }
.top nav a { text-decoration: none; color: var(--tekst-zacht); font-size: 0.93rem; font-weight: 500; white-space: nowrap; }
.top nav a:hover { color: var(--room); }

/* ── Knoppen ─────────────────────────────────── */
.knop {
  display: inline-block;
  font-weight: 700;
  background: var(--amber); color: var(--inkt);
  padding: 0.9rem 1.9rem;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 220ms var(--ease), transform 120ms var(--ease), box-shadow 220ms var(--ease);
  box-shadow: 0 10px 30px -12px oklch(80% 0.125 75 / 0.45);
}
.knop:hover { background: var(--room); color: var(--inkt); box-shadow: 0 14px 36px -12px oklch(80% 0.125 75 / 0.55); }
.knop:active { transform: translateY(1px); }
.knop-klein { padding: 0.5rem 1.15rem; font-size: 0.9rem; box-shadow: none; }
.knop-groot { font-size: 1.1rem; padding: 1.05rem 2.4rem; }
.link-stil { color: var(--tekst-zacht); text-decoration: none; font-size: 0.95rem; font-weight: 500; }
.link-stil:hover { color: var(--room); }

/* ── Hero ────────────────────────────────────── */
.hero { position: relative; min-height: 100dvh; display: grid; align-items: end; isolation: isolate; }
.hero-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: contrast(1.06) saturate(1.05); }
.hero-schaduw {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 90% at 28% 82%, oklch(10% 0.012 60 / 0.88) 0%, transparent 55%),
    linear-gradient(to top, oklch(10% 0.012 60 / 0.96) 0%, oklch(10% 0.012 60 / 0.35) 48%, oklch(10% 0.012 60 / 0.30) 100%);
}
.hero-inhoud { padding: var(--r-2xl) var(--gutter) var(--r-xl); max-width: 60rem; }
.hero-logo { width: clamp(64px, 7vw, 96px); height: auto; filter: invert(1) opacity(0.94) drop-shadow(0 4px 18px oklch(0% 0 0 / 0.5)); margin-bottom: var(--r-md); }
.hero-sinds {
  font-weight: 700; font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--amber); margin: 0 0 var(--r-sm);
}
.hero h1 {
  font-size: clamp(2.6rem, 5vw, 4.6rem);
  line-height: 1.02; margin: 0 0 var(--r-md);
  max-width: 56rem;
  text-wrap: balance;
  text-shadow: 0 2px 30px oklch(0% 0 0 / 0.45);
}
.hero-sub { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--tekst-zacht); max-width: 48ch; margin: 0 0 var(--r-lg); font-weight: 500; }
.hero-acties { display: flex; align-items: center; gap: var(--r-md); flex-wrap: wrap; }

/* ── Bloksecties: cinematische ademruimte ────── */
.blok { max-width: 82rem; margin: 0 auto; padding: var(--r-2xl) var(--gutter); }

/* verhaal */
.verhaal {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(var(--r-lg), 6vw, var(--r-2xl)); align-items: center;
}
.verhaal h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.06; margin: 0 0 var(--r-md); text-wrap: balance; }
.verhaal p { margin: 0 0 var(--r-md); color: var(--tekst-zacht); font-size: 1.1rem; }
.verhaal strong { color: var(--room); font-weight: 700; }
.verhaal-beeld { overflow: clip; border-radius: var(--radius); }
.verhaal-beeld img { filter: contrast(1.05); transition: transform 700ms var(--ease); }
.verhaal-beeld:hover img { transform: scale(1.05); }
.verhaal-beeld figcaption { font-size: 0.85rem; color: var(--tekst-vaag); padding: 0.6rem 0.2rem 0; }

/* ── Horizontale pan ─────────────────────────── */
.pan { position: relative; }
.pan-vast { position: relative; overflow: clip; }
.pan-kop {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--r-md);
  max-width: 82rem; margin: 0 auto;
  padding: var(--r-xl) var(--gutter) var(--r-lg);
}
.pan-kop h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); margin: 0; }
.pan-hint { font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tekst-vaag); margin: 0; font-weight: 700; }
.pan-track {
  display: flex; gap: clamp(var(--r-sm), 1.8vw, var(--r-md));
  padding: 0 var(--gutter) var(--r-xl);
  width: max-content;
}
.pan-track figure { flex: none; width: clamp(270px, 33vw, 470px); overflow: clip; border-radius: var(--radius); position: relative; }
.pan-track img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  filter: contrast(1.06) saturate(1.04);
  transition: transform 700ms var(--ease);
}
.pan-track figure:hover img { transform: scale(1.05); }
.pan-track figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.2rem 1rem 0.85rem;
  font-size: 0.92rem; font-weight: 700; color: var(--room);
  background: linear-gradient(to top, oklch(10% 0.012 60 / 0.85), transparent);
  font-variant-numeric: tabular-nums;
  border-radius: 0 0 var(--radius) var(--radius);
}

/* ── Keuken / kaart ──────────────────────────── */
.keuken-kop { max-width: 58ch; margin-bottom: var(--r-xl); }
.keuken-kop h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.06; margin: 0 0 var(--r-sm); text-wrap: balance; }
.kop-sub { color: var(--tekst-zacht); margin: 0; font-size: 1.1rem; }

.kaart {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(var(--r-md), 3vw, var(--r-xl));
  margin: 0 0 var(--r-xl);
}
.kaart-kolom {
  background: oklch(20% 0.016 60 / 0.55);
  border: 1px solid oklch(100% 0 0 / 0.06);
  border-radius: var(--radius);
  padding: clamp(var(--r-md), 2.5vw, var(--r-lg));
  backdrop-filter: blur(4px);
}
.kaart-kolom h3 {
  font-size: 0.82rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--amber);
  margin: 0 0 var(--r-md);
}
.menu { list-style: none; margin: 0; padding: 0; }
.menu li {
  display: flex; align-items: baseline; gap: 0.65rem;
  padding: 0.5rem 0; font-size: 0.99rem;
}
.menu span { color: var(--tekst-zacht); font-weight: 500; }
.menu i { flex: 1; border-bottom: 1px dotted oklch(100% 0 0 / 0.16); transform: translateY(-4px); }
.menu b { font-variant-numeric: tabular-nums; color: var(--room); font-weight: 700; white-space: nowrap; }
.kaart-noot { font-size: 0.88rem; color: var(--tekst-vaag); margin-top: var(--r-md); line-height: 1.6; }

/* galerij: gapless bento (dense) */
.galerij {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 210px;
  grid-auto-flow: dense;
  gap: var(--r-sm);
}
.galerij figure { overflow: clip; border-radius: var(--radius); }
.galerij img {
  width: 100%; height: 100%; object-fit: cover;
  filter: contrast(1.06) saturate(1.05);
  transition: transform 700ms var(--ease);
}
.galerij figure:hover img { transform: scale(1.05); }
.g1 { grid-column: span 2; grid-row: span 2; }
.g2, .g3, .g4 { grid-column: span 1; }
.g5 { grid-column: span 3; }
.galerij-credit { font-size: 0.85rem; color: var(--tekst-vaag); margin: var(--r-sm) 0 0; }

/* ── Borrel ──────────────────────────────────── */
.borrel {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  background:
    radial-gradient(80% 100% at 15% 50%, oklch(24% 0.03 50 / 0.5), transparent 70%),
    var(--bg-2);
  border-block: 1px solid oklch(100% 0 0 / 0.07);
}
.borrel-inhoud { padding: var(--r-2xl) var(--gutter); max-width: 46rem; justify-self: end; align-self: center; }
.borrel h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); line-height: 1.06; margin: 0 0 var(--r-md); text-wrap: balance; }
.borrel p { color: var(--tekst-zacht); margin: 0 0 var(--r-lg); font-size: 1.08rem; }
.label-licht { color: var(--amber); }
.deal {
  background: linear-gradient(115deg, var(--bordeaux), oklch(42% 0.14 15));
  border: 1px solid oklch(100% 0 0 / 0.1);
  border-radius: var(--radius);
  padding: var(--r-md) var(--r-lg);
  box-shadow: 0 20px 50px -25px oklch(50% 0.15 20 / 0.7);
}
.deal-kop { font-size: 1.5rem; font-weight: 800; margin: 0; color: var(--room); letter-spacing: -0.01em; }
.deal-tijd { font-weight: 700; font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; margin: 0.2rem 0 var(--r-sm); color: oklch(88% 0.05 20); }
.deal ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem var(--r-lg); }
.deal li { white-space: nowrap; color: var(--room); font-weight: 500; }
.deal b { font-weight: 800; }
.borrel-beeld { min-height: 100%; overflow: clip; }
.borrel-beeld img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.06) saturate(1.04); }

/* ── Gasten ──────────────────────────────────── */
.gasten {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--r-lg), 6vw, var(--r-2xl)); align-items: center;
}
.gasten blockquote { margin: 0; }
.gasten blockquote p {
  font-size: clamp(1.45rem, 2.6vw, 2.1rem); line-height: 1.28; margin: 0 0 var(--r-md);
  font-weight: 700; letter-spacing: -0.015em; text-wrap: balance;
}
.gasten cite { font-style: normal; font-size: 0.92rem; color: var(--tekst-vaag); font-weight: 500; }
.gasten cite::before { content: ""; display: inline-block; width: 2rem; height: 2px; background: var(--amber); vertical-align: middle; margin-right: 0.7rem; }
.gasten-tekst h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.08; margin: 0 0 var(--r-sm); text-wrap: balance; }
.gasten-tekst p { color: var(--tekst-zacht); margin: 0; font-size: 1.08rem; }

/* ── Praktisch ───────────────────────────────── */
.praktisch { position: relative; isolation: isolate; padding: var(--r-2xl) var(--gutter); }
.praktisch-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: contrast(1.05); }
.praktisch-schaduw {
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(110% 120% at 22% 50%, oklch(11% 0.012 60 / 0.94) 30%, oklch(11% 0.012 60 / 0.55) 100%);
}
.praktisch-inhoud { max-width: 82rem; margin: 0 auto; }
.praktisch-kaart {
  max-width: 27rem;
  background: oklch(17% 0.014 60 / 0.82);
  border: 1px solid oklch(100% 0 0 / 0.09);
  border-radius: var(--radius);
  padding: clamp(var(--r-md), 3vw, var(--r-lg));
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.07), 0 30px 70px -30px oklch(0% 0 0 / 0.8);
}
.praktisch-kaart h2 { font-size: 2.1rem; margin: 0 0 var(--r-md); }
.tijden { width: 100%; border-collapse: collapse; margin-bottom: var(--r-md); }
.tijden th, .tijden td { padding: 0.42rem 0; border-bottom: 1px dotted oklch(100% 0 0 / 0.14); font-size: 0.95rem; }
.tijden th { text-align: left; font-weight: 500; color: var(--tekst-zacht); }
.tijden td { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.praktisch-kaart .knop-groot { margin-top: var(--r-sm); width: 100%; text-align: center; }

/* ── Voet ────────────────────────────────────── */
.voet { border-top: 1px solid oklch(100% 0 0 / 0.07); padding: var(--r-lg) var(--gutter) var(--r-xl); }
.voet p { max-width: 82rem; margin: 0 auto; font-size: 0.85rem; color: var(--tekst-vaag); line-height: 1.8; }

/* ── Reveal + scale-fade ─────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .onthul { opacity: 0; transform: translateY(22px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
  .zichtbaar { opacity: 1 !important; transform: none !important; }
  .schaal { transform: scale(0.88); opacity: 0.35; will-change: transform, opacity; }
  .hero-inhoud > * { opacity: 0; transform: translateY(18px); animation: hero-in 800ms var(--ease) forwards; }
  .hero-inhoud > *:nth-child(2) { animation-delay: 100ms; }
  .hero-inhoud > *:nth-child(3) { animation-delay: 200ms; }
  .hero-inhoud > *:nth-child(4) { animation-delay: 300ms; }
  .hero-inhoud > *:nth-child(5) { animation-delay: 400ms; }
  @keyframes hero-in { to { opacity: 1; transform: none; } }
}

/* fallback pan zonder JS / reduced motion */
.pan-vast.native { overflow-x: auto; scrollbar-width: thin; }
.pan-vast.native .pan-track { scroll-snap-type: x mandatory; }
.pan-vast.native .pan-track figure { scroll-snap-align: start; }

/* ── Responsive ──────────────────────────────── */
@media (max-width: 900px) {
  .verhaal, .gasten { grid-template-columns: minmax(0, 1fr); }
  .kaart { grid-template-columns: minmax(0, 1fr); }
  .galerij { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 175px; }
  .g5 { grid-column: span 2; }
  .borrel { grid-template-columns: minmax(0, 1fr); }
  .borrel-beeld { max-height: 58vw; }
  .top nav a:not(.knop) { display: none; }
  .hero-inhoud { padding-bottom: var(--r-lg); }
  .blok { padding-block: var(--r-xl); }
}

/* specificiteits-fix: nav-link-kleur mag de pill-knop niet overschrijven */
.top nav a.knop { color: var(--inkt); }
.top nav a.knop:hover { color: var(--inkt); }