/* battel.be
 *
 * Eén stylesheet voor alle pagina's. De CSP laat enkel 'self' toe: ook een
 * style-attribuut in de HTML of in een SVG wordt geweigerd. De tekeningen krijgen
 * hun lijnen daarom via de t-klassen hieronder, nooit via inline stijl.
 *
 * Beeldtaal: een tekenblad. Papier, inkt, haarlijnen en één rode draad.
 */

@font-face{
  font-family:'Geist';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('/fonts/geist-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Geist Mono';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('/fonts/geist-mono-latin.woff2') format('woff2');
}

:root{
  --papier:#F4F2EC;
  --vlak:#FAF9F5;
  --inkt:#1B1B19;
  --inkt-2:#56544E;
  --inkt-3:#6B6860;
  --lijn:rgba(27,27,25,.14);
  --lijn-sterk:rgba(27,27,25,.30);
  --rood:#C8371F;
  --teken:#1B1B19;
  --teken-zacht:rgba(27,27,25,.42);
  --arcering:rgba(27,27,25,.28);
  --breed:1240px;
  --rand:clamp(16px,4vw,48px);
  --sans:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Geist Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;
  color-scheme:light;
}
/* Donker: het tekenblad wordt onyx, de rode draad blijft. */
@media (prefers-color-scheme:dark){
  :root{
    --papier:#141517;
    --vlak:#1A1B1E;
    --inkt:#ECE9E1;
    --inkt-2:#B9B5AB;
    --inkt-3:#9A968D;
    --lijn:rgba(236,233,225,.13);
    --lijn-sterk:rgba(236,233,225,.28);
    --rood:#EE6A4A;
    --teken:#DAD6CC;
    --teken-zacht:rgba(236,233,225,.40);
    --arcering:rgba(236,233,225,.24);
    color-scheme:dark;
  }
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{
  margin:0;
  background:var(--papier);
  color:var(--inkt);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,p,figure,ul,ol{ margin:0; }
ul,ol{ padding:0; list-style:none; }
a{ color:inherit; }
svg{ display:block; max-width:100%; }
::selection{ background:var(--rood); color:#fff; }
:focus-visible{ outline:2px solid var(--rood); outline-offset:3px; border-radius:2px; }

.blad{ max-width:var(--breed); margin-inline:auto; padding-inline:var(--rand); }
.mono{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; }

/* ---------- Kop ---------- */
.kop{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding-block:22px;
  border-bottom:1px solid var(--lijn);
}
.merk{
  display:inline-flex; align-items:center; gap:10px;
  font-size:15px; font-weight:560; letter-spacing:-.005em; text-decoration:none;
}
.merk svg{ width:18px; height:18px; }
.merk-lijn{ fill:none; stroke:var(--rood); stroke-width:2; stroke-linecap:round; }
.merk-rand{ fill:none; stroke:var(--inkt); stroke-width:1.6; stroke-linejoin:round; }
.merk-vol{ fill:var(--inkt); }
.kop-nav{ display:flex; gap:26px; }
.kop-nav a{
  font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--inkt-2); text-decoration:none;
}
.kop-nav a:hover{ color:var(--inkt); }
@media (max-width:759px){ .kop-nav-breed{ display:none; } }

/* ---------- Opening ---------- */
.intro{
  display:grid; grid-template-columns:minmax(0,1fr); gap:28px 48px;
  padding-block:clamp(56px,10vw,128px) clamp(40px,6vw,72px);
}
@media (min-width:1000px){
  .intro{ grid-template-columns:minmax(0,7fr) minmax(0,4fr); align-items:end; }
}
.titel{
  font-size:clamp(44px,7.4vw,100px); line-height:.98; letter-spacing:-.045em;
  font-weight:500; text-wrap:balance;
}
.rood{ color:var(--rood); }
.lead{
  font-size:clamp(17px,1.6vw,20px); line-height:1.5; color:var(--inkt-2);
  max-width:40ch; text-wrap:pretty;
}

/* ---------- De werelden ----------
 * Eén raster, twee rijen: de vier tekeningen naast elkaar (samen één doorlopende
 * doorsnede) en de teksten eronder. Onder 1000px blijven de tekeningen één strook
 * en schuiven de teksten onder elkaar; zo loopt de rode draad altijd door.
 */
.werelden{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  border-bottom:1px solid var(--lijn);
}
.snede{ position:relative; grid-row:1; aspect-ratio:300/320; }
.snede svg{ width:100%; height:100%; overflow:hidden; }
.snede-1{ grid-column:1; } .snede-2{ grid-column:2; }
.snede-3{ grid-column:3; } .snede-4{ grid-column:4; }

.wereld{ grid-column:1/-1; padding:28px 0 32px; border-top:1px solid var(--lijn); }
.wereld-1{ grid-row:2; } .wereld-2{ grid-row:3; } .wereld-3{ grid-row:4; } .wereld-4{ grid-row:5; }
@media (min-width:640px){
  .wereld-1,.wereld-3{ grid-column:1/3; padding-right:24px; }
  .wereld-2,.wereld-4{ grid-column:3/5; padding-left:24px; border-left:1px solid var(--lijn); }
  .wereld-1,.wereld-2{ grid-row:2; }
  .wereld-3,.wereld-4{ grid-row:3; }
}
@media (min-width:1000px){
  .wereld{ grid-row:2; padding:28px 24px 44px; border-left:1px solid var(--lijn); }
  .wereld-1{ grid-column:1; border-left:0; padding-left:0; }
  .wereld-2{ grid-column:2; }
  .wereld-3{ grid-column:3; }
  .wereld-4{ grid-column:4; padding-right:0; }
}

/* Peilaanduiding in HTML, niet in de SVG: zo blijft ze leesbaar op elke breedte.
 * Plaats = (x - begin van de strook) / 300 en (y - 80) / 320 in de tekening. */
.peil{
  position:absolute; display:none; transform:translateY(-100%);
  font-family:var(--mono); font-size:11.5px; line-height:1; letter-spacing:.02em;
  color:var(--inkt-2); white-space:nowrap; pointer-events:none;
}
/* Pas vanaf 1100px: smaller wordt de strook zo klein dat de tekst het huis en de
 * drone raakt. De teksten eronder zeggen toch al waar alles over gaat. */
@media (min-width:1100px){ .peil{ display:block; } }
.peil-0{ left:10%; top:90.625%; }
.peil-450{ left:10%; top:48.4375%; }
.peil-120{ left:8.667%; top:13.125%; }

.wereld-kop{
  display:flex; align-items:baseline; gap:10px; margin-bottom:22px;
  font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--inkt-3);
}
.wereld-kop b{ font-weight:500; color:var(--rood); }

.project{ position:relative; }
.project + .project{ margin-top:26px; padding-top:26px; border-top:1px solid var(--lijn); }
/* Flex, zodat een label dat naar de volgende regel schuift links uitlijnt en niet inspringt. */
.project h3{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px;
  font-size:clamp(22px,2vw,26px); line-height:1.15; letter-spacing:-.02em; font-weight:520;
}
.project h3 a{ text-decoration:none; }
/* De hele kaart is klikbaar, maar de linktekst blijft enkel de naam. */
.project h3 a::after{ content:''; position:absolute; inset:-8px -10px; }
.project-wat{ margin-top:4px; font-size:14px; color:var(--inkt-3); }
.project-tekst{ margin-top:12px; font-size:15px; line-height:1.55; color:var(--inkt-2); max-width:38ch; text-wrap:pretty; }
.project-adres{
  margin-top:16px; display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:13px; color:var(--inkt);
  border-bottom:1px solid var(--lijn-sterk); padding-bottom:3px;
  transition:color .2s ease, border-color .2s ease;
}
.project-adres svg{ width:11px; height:11px; transition:transform .25s cubic-bezier(.2,.7,.2,1); }
.pijl{ fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.project:hover .project-adres{ color:var(--rood); border-bottom-color:var(--rood); }
.project:hover .project-adres svg{ transform:translate(2px,-2px); }
@supports selector(:has(a)){
  .project h3 a:focus-visible{ outline:none; }
  .project:has(a:focus-visible){ outline:2px solid var(--rood); outline-offset:10px; border-radius:2px; }
}
.label{
  display:inline-block;
  font-family:var(--mono); font-size:10.5px; font-weight:400; letter-spacing:.06em; text-transform:uppercase;
  color:var(--inkt-2); border:1px dashed var(--lijn-sterk); border-radius:3px; padding:3px 6px 2px;
}

/* ---------- Tekeningen ---------- */
.t-lijn{ fill:none; stroke:var(--teken); stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round; }
.t-dun{ fill:none; stroke:var(--teken-zacht); stroke-width:1; }
.t-streep{ fill:none; stroke:var(--teken-zacht); stroke-width:1; stroke-dasharray:3 4; }
.t-grond{ fill:none; stroke:var(--teken); stroke-width:2; }
.t-arcering{ stroke:var(--arcering); stroke-width:1; }
.t-vlak{ fill:var(--papier); stroke:var(--teken); stroke-width:1.3; stroke-linejoin:round; }
.t-greep{ fill:var(--papier); stroke:var(--teken); stroke-width:1.2; }
.t-vol{ fill:var(--teken); }
.t-rood{ fill:var(--rood); }
.draad{ fill:none; stroke:var(--rood); stroke-width:2.2; stroke-linejoin:round; }
.vlucht{ fill:none; stroke:var(--rood); stroke-width:2; stroke-dasharray:6 6; }
.masker-lijn{ fill:none; stroke:#fff; stroke-width:16; }

@media (prefers-reduced-motion:no-preference){
  /* Standaard staat alles al in de eindstand; alleen wie beweging toelaat, ziet
   * de draad zich trekken. Zonder CSS of met reduced motion is de tekening af. */
  .inkt{ animation:op .9s .1s ease-out both; }
  .peil{ animation:op .6s 1.1s ease-out both; }
  .trek{ stroke-dasharray:1 2; stroke-dashoffset:1; animation:trek .6s ease-in-out forwards; }
  .trek-1{ animation-delay:.5s; animation-duration:.55s; }
  .trek-2{ animation-delay:1.05s; animation-duration:.9s; }
  .trek-3{ animation-delay:1.95s; animation-duration:1s; }
  .trek-4{ animation-delay:2.95s; animation-duration:1.4s; }
  .trek-kaart{ animation-delay:.6s; animation-duration:3.2s; }
  .stip{ animation:op .3s .45s both; }
  .zweef{ animation:zweef 2.6s 4.4s ease-in-out infinite alternate; }
}
@keyframes op{ from{ opacity:0; } to{ opacity:1; } }
@keyframes trek{ to{ stroke-dashoffset:0; } }
@keyframes zweef{ from{ transform:translateY(0); } to{ transform:translateY(-4px); } }

/* ---------- De rode draad ---------- */
.draad-sectie{
  display:grid; grid-template-columns:minmax(0,1fr); gap:32px 48px;
  padding-block:clamp(64px,9vw,120px);
  border-bottom:1px solid var(--lijn);
}
@media (min-width:1000px){
  .draad-sectie{ grid-template-columns:minmax(0,3fr) minmax(0,6fr) minmax(0,3fr); align-items:start; }
}
.sectie-label{
  display:flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--inkt-3);
}
.sectie-label::before{ content:''; width:22px; height:2px; background:var(--rood); }
.sectie-kop{ margin-bottom:22px; font-weight:400; }
.draad-tekst h2,.contact h2{
  font-size:clamp(28px,3.2vw,40px); line-height:1.12; letter-spacing:-.03em; font-weight:500; text-wrap:balance;
}
.draad-tekst p{ margin-top:22px; font-size:clamp(17px,1.5vw,19px); line-height:1.6; color:var(--inkt-2); max-width:56ch; text-wrap:pretty; }
.luchtfoto{ max-width:300px; }
.luchtfoto svg{ width:100%; height:auto; }
.luchtfoto figcaption,.kaart figcaption{
  margin-top:12px; font-family:var(--mono); font-size:11.5px; letter-spacing:.02em; color:var(--inkt-3);
}

/* ---------- Titelblok (voet) ---------- */
.titelblok{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px;
  margin-block:clamp(48px,7vw,88px) 32px;
  background:var(--lijn-sterk); border:1px solid var(--lijn-sterk);
}
@media (min-width:860px){ .titelblok{ grid-template-columns:minmax(0,2.2fr) repeat(4,minmax(0,1fr)); } }
.tb{ background:var(--papier); padding:14px 16px 16px; min-width:0; }
.tb-naam{ grid-column:1/-1; }
@media (min-width:860px){ .tb-naam{ grid-column:auto; } }
.tb-label{
  display:block; margin-bottom:6px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--inkt-3);
}
.tb-waarde{ display:block; font-size:14px; overflow-wrap:anywhere; }
.tb-naam .tb-waarde{ font-size:18px; font-weight:520; letter-spacing:-.01em; }
.tb-extra{ display:block; margin-top:3px; font-family:var(--mono); font-size:12px; color:var(--inkt-3); }
.nw{ white-space:nowrap; }
.tb a{ text-decoration:none; border-bottom:1px solid var(--lijn-sterk); }
.tb a:hover{ color:var(--rood); border-bottom-color:var(--rood); }

/* ---------- Dronepagina ---------- */
.tweeluik{
  display:grid; grid-template-columns:minmax(0,1fr); gap:40px 56px; align-items:center;
  padding-block:clamp(48px,8vw,104px) clamp(40px,6vw,80px);
}
@media (min-width:1000px){ .tweeluik{ grid-template-columns:minmax(0,5fr) minmax(0,6fr); } }
.tweeluik .titel{ font-size:clamp(44px,6.4vw,84px); }
.tweeluik .lead{ margin-top:24px; }
.peil-regel{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:26px;
  font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--inkt-2);
}
.peil-regel svg{ width:14px; height:12px; }
.kaart svg{ width:100%; height:auto; }
.kaart .vlucht{ stroke-width:1.5; stroke-dasharray:4 5; }
.richtingen{ display:grid; grid-template-columns:minmax(0,1fr); border-top:1px solid var(--lijn); border-bottom:1px solid var(--lijn); }
.richting{ padding:28px 0 32px; }
.richting + .richting{ border-top:1px solid var(--lijn); }
@media (min-width:800px){
  .richtingen{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .richting{ padding:28px 24px 40px; }
  .richting:first-child{ padding-left:0; }
  .richting:last-child{ padding-right:0; }
  .richting + .richting{ border-top:0; border-left:1px solid var(--lijn); }
}
.richting-nr{ font-family:var(--mono); font-size:12px; color:var(--rood); }
.richting h3{ margin-top:14px; font-size:22px; line-height:1.2; font-weight:520; letter-spacing:-.02em; }
.richting p{ margin-top:10px; font-size:15px; color:var(--inkt-2); max-width:36ch; text-wrap:pretty; }
.contact{ display:grid; gap:20px; justify-items:start; padding-block:clamp(56px,8vw,104px) 0; }
.contact p{ color:var(--inkt-2); max-width:52ch; }
.knop{
  display:inline-flex; align-items:center; gap:10px; max-width:100%;
  font-family:var(--mono); font-size:14px; text-decoration:none;
  color:var(--papier); background:var(--inkt); padding:13px 18px; border-radius:4px;
  transition:background .2s ease;
}
.knop:hover{ background:var(--rood); color:#fff; }
.knop svg{ width:12px; height:12px; }

/* ---------- 404 ---------- */
.nietgevonden{ display:grid; gap:22px; justify-items:start; padding-block:clamp(72px,14vw,168px); }
.nietgevonden .titel{ font-size:clamp(40px,6vw,76px); }
.terug{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:14px; text-decoration:none;
  border-bottom:1px solid var(--lijn-sterk); padding-bottom:3px;
}
.terug:hover{ color:var(--rood); border-bottom-color:var(--rood); }
.terug svg{ width:11px; height:11px; }