/* E-Products Europe — koepelsite.
   Donker, warm, filmisch. De foto's doen het werk; de opmaak houdt zich stil.
   Huisstijl-accent uit reference-brand-css (#CE9766), maar nu op een diepe
   espresso-achtergrond zodat het hout gloeit.
   Alles in px (geen rem). */

:root {
  --nacht: #1a1410;        /* diepste achtergrond */
  --nacht-2: #241c16;      /* vlak erop */
  --nacht-3: #2f2520;      /* randen op donker */
  --brons: #ce9766;        /* het huismerk */
  --brons-licht: #e0a878;  /* knoppen, hover */
  --brons-diep: #b8824d;
  --crème: #f8f3e8;
  --crème-zacht: #ece4d6;
  --tekst: #3c2f1a;        /* op lichte vlakken */
  --tekst-zacht: #6b5d48;
  --rand: #e8e2d9;
  --radius: 18px;
  --breed: 1240px;
  --leesbreed: 760px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--nacht);
  color: var(--crème);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--brons-licht); text-underline-offset: 3px; }

h1, h2, h3 {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0;
}

.wrap { max-width: var(--breed); margin: 0 auto; padding: 0 24px; }
.lees { max-width: var(--leesbreed); }

/* ── kop ─────────────────────────────────────────────────────────────────── */
.kop {
  position: fixed; inset: 0 0 auto; z-index: 50;
  backdrop-filter: blur(14px);
  background: rgba(26, 20, 16, 0.55);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  transition: background .3s ease;
}
.kop--vast { background: rgba(26, 20, 16, 0.94); }
.kop__in {
  max-width: var(--breed); margin: 0 auto; padding: 12px 24px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.merk { display: flex; align-items: center; gap: 11px; text-decoration: none; margin-right: auto; }
.merk__teken {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 11px;
  background: linear-gradient(145deg, var(--brons-licht), var(--brons-diep));
  color: #2a1d12; font-weight: 800; font-size: 15px; letter-spacing: -0.5px;
  display: grid; place-items: center;
}
.merk__naam { font-family: 'Fraunces', Georgia, serif; font-size: 18px; color: var(--crème); line-height: 1.15; }
.merk__sub { font-size: 11.5px; color: rgba(248, 243, 232, .55); letter-spacing: .04em; text-transform: uppercase; }

.nav { display: flex; gap: 2px; flex-wrap: wrap; align-items: center; }
.nav a {
  color: rgba(248, 243, 232, .82); text-decoration: none;
  padding: 8px 13px; border-radius: 9px; font-size: 15px; transition: .2s;
}
.nav a:hover, .nav a[aria-current="page"] { background: rgba(255, 255, 255, .09); color: var(--crème); }

.talen { display: flex; gap: 1px; padding-left: 12px; margin-left: 4px; border-left: 1px solid rgba(255,255,255,.14); }
.talen a {
  text-decoration: none; font-size: 12.5px; padding: 6px 8px; border-radius: 7px;
  color: rgba(248,243,232,.5); text-transform: uppercase; letter-spacing: .06em;
}
.talen a:hover { background: rgba(255,255,255,.09); color: var(--crème); }
.talen a[aria-current="true"] { color: var(--brons-licht); font-weight: 700; }

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: flex-end;
  overflow: hidden; isolation: isolate;
}
.hero__beeld {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  animation: traagIn 14s ease-out forwards;
}
@keyframes traagIn { from { transform: scale(1.09); } to { transform: scale(1); } }
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(18,13,10,.96) 0%, rgba(18,13,10,.72) 32%, rgba(18,13,10,.18) 62%, rgba(18,13,10,.45) 100%);
}
.hero__in { width: 100%; max-width: var(--breed); margin: 0 auto; padding: 0 24px 84px; }
.hero h1 {
  font-size: clamp(46px, 8.2vw, 112px);
  margin: 0 0 22px; color: var(--crème);
  text-shadow: 0 2px 40px rgba(0,0,0,.45);
}
.hero h1 em { font-style: normal; color: var(--brons-licht); }
.hero__lood {
  font-size: clamp(17px, 2vw, 21px); max-width: 30em;
  color: rgba(248,243,232,.9); margin: 0 0 32px;
}
.hero__merken {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.16);
  display: flex; gap: 26px; flex-wrap: wrap; font-size: 13px;
  color: rgba(248,243,232,.6); letter-spacing: .05em; text-transform: uppercase;
}
.hero__merken b { color: var(--brons-licht); font-weight: 600; }

/* ── knoppen ─────────────────────────────────────────────────────────────── */
.knoppen { display: flex; gap: 12px; flex-wrap: wrap; }
.knop {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 15px 26px; border-radius: 12px; text-decoration: none;
  font-weight: 600; font-size: 16px; font-family: inherit; cursor: pointer;
  background: var(--brons-licht); color: #221811; border: 1px solid var(--brons-licht);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.knop:hover { background: var(--crème); border-color: var(--crème); color: #221811; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.knop--glas {
  background: rgba(255,255,255,.08); color: var(--crème);
  border-color: rgba(255,255,255,.28); backdrop-filter: blur(6px);
}
.knop--glas:hover { background: rgba(255,255,255,.16); color: var(--crème); border-color: rgba(255,255,255,.5); }
.knop--donker { background: var(--tekst); border-color: var(--tekst); color: var(--crème); }
.knop--donker:hover { background: #241c16; border-color: #241c16; color: var(--crème); }


/* ── kop van een binnenpagina (geen volledig scherm) ─────────────────────── */
.paginakop {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 150px 0 72px; background: var(--nacht-2);
}
.paginakop__beeld {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
  object-fit: cover; opacity: .34;
}
.paginakop::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(26,20,16,.72), rgba(26,20,16,.93));
}
.paginakop h1 { font-size: clamp(34px, 5.4vw, 66px); margin: 0 0 18px; color: var(--crème); }
.paginakop p { font-size: 18.5px; color: rgba(248,243,232,.84); max-width: var(--leesbreed); margin: 0; }

@media (max-width: 640px) {
  .paginakop { padding: 112px 0 48px; }
  .paginakop p { font-size: 16.5px; }
}

/* ── de twee werelden ────────────────────────────────────────────────────── */
.werelden { display: grid; grid-template-columns: 1fr 1fr; min-height: 76svh; }
.wereld {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: flex-end;
  padding: 44px; text-decoration: none; color: var(--crème);
  transition: flex .4s ease;
}
.wereld img {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
  object-fit: cover; transition: transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.wereld::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(18,13,10,.92), rgba(18,13,10,.3) 55%, rgba(18,13,10,.1));
  transition: background .4s ease;
}
.wereld:hover img { transform: scale(1.06); }
.wereld:hover::after { background: linear-gradient(to top, rgba(18,13,10,.86), rgba(18,13,10,.2) 60%, rgba(18,13,10,0)); }
.wereld__label {
  font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brons-licht); margin-bottom: 10px; display: block;
}
.wereld h2 { font-size: clamp(30px, 4vw, 52px); margin: 0 0 12px; }
.wereld p { margin: 0 0 18px; color: rgba(248,243,232,.86); max-width: 24em; }
.wereld__meer { font-weight: 600; color: var(--crème); display: inline-flex; gap: 8px; align-items: center; }
.wereld__meer::after { content: '→'; transition: transform .25s ease; }
.wereld:hover .wereld__meer::after { transform: translateX(5px); }

/* ── secties ─────────────────────────────────────────────────────────────── */
.band { padding: 112px 0; }
.band--licht { background: var(--crème); color: var(--tekst); }
.band--licht h2, .band--licht h3 { color: var(--tekst); }
.band--nacht { background: var(--nacht-2); }
.band__kop { font-size: clamp(30px, 4.4vw, 56px); margin: 0 0 20px; }
.band__lood { font-size: 18.5px; color: rgba(248,243,232,.78); max-width: var(--leesbreed); margin: 0 0 40px; }
.band--licht .band__lood { color: var(--tekst-zacht); }
.opschrift {
  font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--brons); margin: 0 0 14px; font-weight: 600;
}

/* jaarringen-band */
.nerf { position: relative; overflow: hidden; background: var(--nacht); padding: 128px 0; }
.nerf__svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; z-index: 0; }
.nerf .wrap { position: relative; z-index: 1; }

/* ── kaarten ─────────────────────────────────────────────────────────────── */
.raster { display: grid; gap: 20px; }
.raster--3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.raster--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.kaart {
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius); padding: 28px; transition: .25s;
  scroll-margin-top: 120px;
}
.kaart:hover { background: rgba(255,255,255,.075); border-color: rgba(206,151,102,.45); transform: translateY(-3px); }
/* Klik je op een vestiging op de Europakaart, dan springt de pagina hierheen —
   deze gloed maakt duidelijk wélke kaart het was. */
.kaart:target {
  border-color: var(--brons); background: rgba(206,151,102,.1);
  box-shadow: 0 0 0 3px rgba(206,151,102,.28), 0 18px 50px rgba(0,0,0,.35);
  animation: kaartGevonden 2.2s ease;
}
@keyframes kaartGevonden {
  0%, 100% { box-shadow: 0 0 0 3px rgba(206,151,102,.28), 0 18px 50px rgba(0,0,0,.35); }
  30% { box-shadow: 0 0 0 7px rgba(206,151,102,.14), 0 18px 50px rgba(0,0,0,.35); }
}
.kaart h3 { font-size: 22px; margin: 0 0 4px; color: var(--crème); }
.kaart__rol { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--brons); font-weight: 600; margin-bottom: 12px; }
.kaart address { font-style: normal; font-size: 14.5px; color: rgba(248,243,232,.66); margin-bottom: 14px; }
.kaart dl { margin: 0 0 14px; font-size: 14.5px; }
.kaart dt { color: rgba(248,243,232,.45); font-size: 12px; text-transform: uppercase; letter-spacing: .07em; }
.kaart dd { margin: 0 0 9px; color: rgba(248,243,232,.9); }
.kaart ul { list-style: none; padding: 0; margin: 0; font-size: 14.5px; }
.kaart li { margin-bottom: 5px; }
.kaart li a { color: var(--brons-licht); text-decoration: none; }
.kaart li a:hover { text-decoration: underline; }

.band--licht .kaart { background: #fff; border-color: var(--rand); }
.band--licht .kaart:hover { border-color: var(--brons); }
.band--licht .kaart h3 { color: var(--tekst); }
.band--licht .kaart dd { color: var(--tekst); }
.band--licht .kaart dt { color: var(--tekst-zacht); }
.band--licht .kaart address { color: var(--tekst-zacht); }

/* ── winkelkiezer ────────────────────────────────────────────────────────── */
.landen { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.landkaart {
  display: flex; flex-direction: column; gap: 3px; text-decoration: none;
  padding: 18px 20px; border-radius: 14px;
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1);
  transition: .22s;
}
.landkaart:hover { background: rgba(206,151,102,.14); border-color: var(--brons); transform: translateY(-2px); }
.landkaart__land { font-weight: 600; font-size: 16.5px; color: var(--crème); }
.landkaart__winkel { font-size: 14px; color: var(--brons-licht); }
.landkaart__firma { font-size: 12px; color: rgba(248,243,232,.45); }
.band--licht .landkaart { background: #fff; border-color: var(--rand); }
.band--licht .landkaart:hover { background: var(--crème-zacht); border-color: var(--brons); }
.band--licht .landkaart__land { color: var(--tekst); }
.band--licht .landkaart__winkel { color: var(--brons-diep); }
.band--licht .landkaart__firma { color: var(--tekst-zacht); }

/* ── lijsten ─────────────────────────────────────────────────────────────── */
.lijst { list-style: none; padding: 0; margin: 28px 0; }
.lijst li { padding: 16px 0 16px 34px; border-bottom: 1px solid rgba(255,255,255,.1); position: relative; }
.lijst li::before { content: '✓'; position: absolute; left: 4px; color: var(--brons); font-weight: 700; }
.band--licht .lijst li { border-color: var(--rand); }

/* ── tabellen ────────────────────────────────────────────────────────────── */
.tabelrol { overflow-x: auto; margin: 20px 0; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: 15px; min-width: 580px; }
caption { text-align: left; font-family: 'Fraunces', Georgia, serif; font-size: 21px; padding: 26px 0 10px; color: var(--tekst); }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--rand); vertical-align: top; }
thead th { background: var(--tekst); color: var(--crème); font-weight: 600; white-space: nowrap; }
tbody tr:nth-child(even) { background: #fff; }
tbody tr:nth-child(odd) { background: rgba(255,255,255,.45); }
td code { font-size: 12.5px; color: var(--tekst-zacht); }
.zacht { color: var(--tekst-zacht); }
.voetnoot { font-size: 14.5px; color: var(--tekst-zacht); max-width: var(--leesbreed); }

/* ── formulier ───────────────────────────────────────────────────────────── */
.formulier { background: #fff; border: 1px solid var(--rand); border-radius: var(--radius); padding: 30px; margin: 28px 0; }
.veldrij { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.veld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.veld label { font-size: 13.5px; font-weight: 600; color: var(--tekst); }
.veld input, .veld select, .veld textarea {
  font: inherit; font-size: 16px; padding: 12px 13px;
  border: 1px solid var(--rand); border-radius: 10px; background: #fff; color: var(--tekst); width: 100%;
}
.veld textarea { min-height: 120px; resize: vertical; }
.veld input:focus, .veld select:focus, .veld textarea:focus { outline: 2px solid var(--brons); outline-offset: 1px; border-color: var(--brons); }
fieldset { border: 0; padding: 0; margin: 0 0 18px; }
fieldset legend { font-size: 13.5px; font-weight: 600; padding: 0; margin-bottom: 10px; color: var(--tekst); }
.vinkjes { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); }
.vinkje { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; font-weight: 400; color: var(--tekst); }
.vinkje input { width: 19px; height: 19px; flex: 0 0 19px; margin-top: 3px; accent-color: var(--brons-diep); }
.melding { border-radius: 10px; padding: 13px 15px; font-size: 15px; margin-bottom: 18px; background: var(--crème); border-left: 4px solid var(--brons); color: var(--tekst); }
.melding[hidden] { display: none; }
.melding--fout { border-left-color: #b4452f; background: #fff4f1; }
.gelukt { border: 1px solid var(--brons); border-left: 4px solid var(--brons); border-radius: var(--radius); background: #fff; padding: 30px; color: var(--tekst); }
.gelukt[hidden], .formulier[hidden] { display: none; }
.gelukt h3 { color: var(--tekst); font-size: 24px; margin-bottom: 10px; }
button.knop[disabled] { opacity: .6; cursor: default; transform: none; }

/* ── voet ────────────────────────────────────────────────────────────────── */
.voet { background: #15100d; padding: 72px 0 40px; font-size: 15px; border-top: 1px solid rgba(255,255,255,.08); }
.voet__raster { display: grid; gap: 34px; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.voet h3 { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--brons); margin: 0 0 14px; font-family: 'Inter', sans-serif; font-weight: 600; }
.voet ul { list-style: none; padding: 0; margin: 0; }
.voet li { margin-bottom: 7px; color: rgba(248,243,232,.7); }
.voet a { color: rgba(248,243,232,.82); text-decoration: none; }
.voet a:hover { color: var(--brons-licht); }
.voet .zacht { color: rgba(248,243,232,.5); font-size: 14px; }
.voet__slot { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.08); font-size: 13.5px; color: rgba(248,243,232,.4); }

/* ── Europakaart ─────────────────────────────────────────────────────────── */
/* Het continent als aaneengelegde houtstalen: elk land een eigen tint (zie
   houtTint in bouw.mjs), met drie gloeiende vestigingen en leverroutes die er
   als takken uitgroeien zodra de kaart in beeld komt. */
.ekaart__wrap {
  margin: 44px 0 8px; border-radius: 22px; overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,.45);
}
.ekaart__svg { width: 100%; height: auto; display: block; }
.ekaart__land {
  stroke: #1a1410; stroke-width: 0.8; stroke-opacity: .55;
  transition: filter .25s ease;
}
.ekaart__landen:hover .ekaart__land { filter: saturate(.7); }
.ekaart__land:hover { filter: saturate(1.3) brightness(1.08); }

.ekaart__route {
  fill: none; stroke: var(--brons-licht); stroke-width: 1.3; stroke-linecap: round;
  opacity: .62; stroke-dasharray: 1400; stroke-dashoffset: 1400;
  transition: stroke-dashoffset 1.7s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--vertraging, 0ms);
}
.ekaart__wrap.zichtbaar .ekaart__route { stroke-dashoffset: 0; }

.ekaart__markt circle { fill: var(--brons-licht); opacity: .9; }
.ekaart__markt text {
  font-size: 11px; font-weight: 600; fill: rgba(248,243,232,.75);
  letter-spacing: .04em; font-family: 'Inter', sans-serif;
}

.ekaart__hub { cursor: pointer; }
.ekaart__punt { fill: var(--brons-licht); }
.ekaart__puls {
  fill: var(--brons-licht); opacity: .45; transform-box: fill-box; transform-origin: center;
  animation: ekaartPuls 2.6s ease-out infinite;
}
.ekaart__hub:nth-of-type(2) .ekaart__puls { animation-delay: .5s; }
.ekaart__hub:nth-of-type(3) .ekaart__puls { animation-delay: 1s; }
@keyframes ekaartPuls {
  0% { r: 4.5; opacity: .55; }
  100% { r: 16; opacity: 0; }
}
/* Gent, Kleve en Sainte Catherine liggen in het echt vlak bij elkaar — alle drie
   labels tegelijk tonen geeft een onleesbare kluwen. Daarom alleen de naam bij hover
   of toetsenbordfocus; de stip zelf is altijd zichtbaar en klikbaar, en de naam staat
   toch al op de kaart (de firmakaart waar de link naartoe springt). */
.ekaart__stad {
  font-family: 'Fraunces', Georgia, serif; font-size: 15px; font-weight: 600;
  fill: var(--crème); text-anchor: middle; paint-order: stroke;
  stroke: var(--nacht); stroke-width: 4px; stroke-linejoin: round;
  opacity: 0; transition: opacity .18s ease; pointer-events: none;
}
.ekaart__hub:hover .ekaart__punt, .ekaart__hub:focus-visible .ekaart__punt { r: 6.5; }
.ekaart__hub:hover .ekaart__stad, .ekaart__hub:focus-visible .ekaart__stad {
  opacity: 1; fill: var(--brons-licht);
}
.ekaart__hub:focus-visible .ekaart__punt { outline: 2px solid var(--brons-licht); outline-offset: 3px; }

.ekaart__legende {
  display: flex; gap: 22px; margin: 18px 4px 0; font-size: 13px;
  color: rgba(248,243,232,.6);
}
.ekaart__legende span { display: inline-flex; align-items: center; gap: 7px; }
.ekaart__chip { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--brons-licht); }
.ekaart__chip--hub { box-shadow: 0 0 0 4px rgba(224,168,120,.3); }
.ekaart__chip--markt { opacity: .65; }
.ekaart__legende { align-items: center; }
.ekaart__hint { font-size: 12.5px; color: rgba(248,243,232,.4); margin-left: auto; }

/* ── opkomen bij scroll ──────────────────────────────────────────────────── */
.op { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.op.zichtbaar { opacity: 1; transform: none; }

/* ── gsm ─────────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .werelden { grid-template-columns: 1fr; }
  .wereld { min-height: 58svh; padding: 30px 24px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .band { padding: 72px 0; }
  .nerf { padding: 86px 0; }
  .hero__in { padding-bottom: 56px; }
  .hero__merken { gap: 14px; font-size: 11.5px; }
  .knop { width: 100%; justify-content: center; }
  .kop__in { padding: 10px 16px; gap: 12px; }
  .merk__sub { display: none; }
  .nav a { padding: 7px 10px; font-size: 14px; }
  .wrap { padding: 0 16px; }
  .formulier { padding: 20px; }
  .kaart { padding: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .op { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

@media print {
  .kop, .knoppen, .voet { display: none; }
  body { background: #fff; color: #000; }
}