/* ═══════════════════════════════════════════════════════════════
   Foodbar Sylvère — stijlblad
   Eén bestand voor de hele site. Kleuren en lettertypes staan
   bovenaan; verander ze daar en ze veranderen overal mee.
   ═══════════════════════════════════════════════════════════════ */

/* ── lettertypes, op onze eigen server ──────────────────────────
   Geen enkele oproep naar Google. De bestanden staan in /fonts/.
   ─────────────────────────────────────────────────────────────── */
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/barlow-condensed-latin-500-normal.woff2) format('woff2');}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/barlow-condensed-latin-700-normal.woff2) format('woff2');}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:900;font-display:swap;
  src:url(../fonts/barlow-condensed-latin-900-normal.woff2) format('woff2');}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/source-sans-3-latin-400-normal.woff2) format('woff2');}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/source-sans-3-latin-600-normal.woff2) format('woff2');}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/source-sans-3-latin-700-normal.woff2) format('woff2');}

:root{
  --an:#1B2320;        /* antraciet — dezelfde kleur als op het drukwerk */
  --an2:#232C28;       /* iets lichter, voor een vlak op een vlak */
  --an3:#333C38;       /* randen op donker */
  --ge:#E6B000;        /* tour-geel */
  --wg:#766320;        /* wegdek-goud voor tekst op een lichte band.
                          Donkerder dan het goud van de weg zelf (#8F7A2A):
                          dat haalde maar 3,8:1 op krijtwit en was daarmee
                          te bleek voor kleine letters. Deze haalt 5,3:1. */
  --kw:#F2F4F1;        /* krijtwit */
  --gr:#A7B3AC;        /* fijne tekst op donker */
  --gd:#4A5650;        /* fijne tekst op licht */
  --lijn:#C9D1CB;
  --bc:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  --bd:'Source Sans 3',-apple-system,'Segoe UI',Arial,sans-serif;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--kw);color:var(--an);font-family:var(--bd);
  font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4,p,ul,ol,li,figure,dl,dt,dd,table{margin:0;padding:0;}
ul,ol{list-style:none;}
img{display:block;max-width:100%;height:auto;}  /* height:auto verslaat het height-attribuut in de HTML */
a{color:inherit;text-decoration:none;}
:focus-visible{outline:3px solid var(--ge);outline-offset:3px;}
.verborgen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;}

/* ── bouwstenen ─────────────────────────────────────────────── */
.in{max-width:1180px;margin:0 auto;padding-inline:clamp(20px,4vw,40px);}
.dk{background:var(--an);color:var(--kw);}
.lt{background:var(--kw);color:var(--an);}
.sectie{padding-block:clamp(56px,7vw,92px);}
.kop{font-family:var(--bc);font-weight:900;text-transform:uppercase;line-height:.9;
  letter-spacing:.005em;text-wrap:balance;}
.kop em{font-style:normal;color:var(--ge);}
.lt .kop em{color:var(--wg);}   /* tour-geel is te licht op krijtwit */
h1.kop{font-size:clamp(42px,6.4vw,78px);}
h2.kop{font-size:clamp(32px,4.6vw,52px);}
h3.kop{font-size:clamp(20px,2.2vw,25px);line-height:1;}
.eyebrow{font-family:var(--bc);font-weight:700;text-transform:uppercase;
  letter-spacing:.2em;font-size:14px;color:var(--wg);}
.dk .eyebrow{color:var(--ge);}
.lead{font-size:clamp(17px,1.6vw,19px);line-height:1.6;max-width:60ch;color:var(--gd);}
.dk .lead{color:var(--gr);}
.streep{width:58px;height:5px;background:var(--ge);margin-block:14px;}
.sectiekop .streep{margin-block:0;}
.sectiekop{display:flex;flex-direction:column;gap:14px;margin-bottom:38px;max-width:62ch;}
:not(.sectiekop) > .eyebrow + .kop{margin-top:14px;}

/* ── knoppen ────────────────────────────────────────────────── */
.knop{display:inline-block;font-family:var(--bc);font-weight:900;text-transform:uppercase;
  font-size:21px;letter-spacing:.03em;line-height:1;padding:16px 24px 18px;
  background:var(--ge);color:var(--an);border:3px solid var(--ge);
  transition:background .15s,color .15s;}
.knop:hover{background:transparent;color:var(--ge);}
.knop.leeg{background:transparent;color:var(--kw);border-color:#55605B;}
.knop.leeg:hover{background:var(--kw);color:var(--an);border-color:var(--kw);}
.lt .knop.leeg{color:var(--an);border-color:var(--lijn);}
.lt .knop.leeg:hover{background:var(--an);color:var(--kw);border-color:var(--an);}
.acties{display:flex;flex-wrap:wrap;gap:14px;}

/* ── navigatiebalk ──────────────────────────────────────────── */
.balk{background:var(--an);border-bottom:1px solid var(--an3);position:relative;}
.balk .in{display:flex;align-items:center;justify-content:space-between;gap:20px 28px;
  min-height:94px;padding-block:16px;}
.merk{flex:0 0 auto;}
.merk img{width:clamp(148px,17vw,182px);height:auto;}
.nav{display:flex;flex-wrap:wrap;gap:4px 26px;align-items:center;font-family:var(--bc);
  font-weight:700;text-transform:uppercase;letter-spacing:.11em;font-size:16px;color:var(--kw);}
.nav a{padding:6px 0;border-bottom:2px solid transparent;}
.nav a:hover{border-bottom-color:var(--ge);}
.nav a[aria-current="page"]{color:var(--ge);border-bottom-color:var(--ge);}
.balk .tel{font-family:var(--bc);font-weight:900;font-size:19px;letter-spacing:.02em;
  color:var(--an);background:var(--ge);padding:9px 15px 11px;white-space:nowrap;}

/* ── gevelband ──────────────────────────────────────────────── */
.pui{background:var(--an2);border-top:1px solid var(--an3);border-bottom:1px solid var(--an3);}
.pui .in{text-align:center;padding-block:15px;
  font-family:var(--bc);font-weight:700;text-transform:uppercase;letter-spacing:.13em;
  font-size:clamp(13px,1.5vw,18px);color:var(--kw);line-height:1.7;}
.pui span{white-space:nowrap;}
.pui i{font-style:normal;color:var(--ge);margin-left:clamp(5px,.9vw,10px);}

/* ── hero ───────────────────────────────────────────────────── */
.hero{position:relative;background:var(--an);overflow:hidden;}
.hero>img{width:100%;height:100%;object-fit:cover;object-position:50% 10%;
  position:absolute;inset:0;}
.hero .waas{position:absolute;inset:0;background:linear-gradient(100deg,
  rgba(27,35,32,.95) 0%,rgba(27,35,32,.86) 38%,rgba(27,35,32,.30) 72%,rgba(27,35,32,.55) 100%);}

.hero .in{position:relative;padding-block:clamp(62px,9vw,118px);
  min-height:min(clamp(430px,44vw,760px),84vh);
  display:flex;flex-direction:column;justify-content:center;}
.hero h1{color:var(--kw);max-width:14ch;}
.hero h1 em{font-style:normal;color:var(--ge);}
.hero .lead{margin-top:22px;color:#D5DDD8;max-width:44ch;}
.hero .acties{margin-top:34px;}

/* ── kop van een binnenpagina ───────────────────────────────── */
.paginakop{padding-block:clamp(44px,5.5vw,72px);}
.paginakop .lead{color:var(--gr);}

/* ── kaartenrij ─────────────────────────────────────────────── */
.rij{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(18px,2.4vw,30px);}
.kaart{display:flex;flex-direction:column;}
.kaart img{width:100%;aspect-ratio:3/2;object-fit:cover;}
.kaart .tekst{padding-top:16px;display:flex;flex-direction:column;gap:7px;}
.kaart p{font-size:15.5px;line-height:1.5;color:var(--gd);}
.dk .kaart p{color:var(--gr);}
.kaart .prijs{font-family:var(--bc);font-weight:900;font-size:19px;color:var(--ge);
  text-transform:uppercase;letter-spacing:.04em;}

/* ── tekst naast beeld ──────────────────────────────────────── */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(28px,4vw,56px);align-items:center;}
.duo figure{margin:0;}
.duo img{width:100%;aspect-ratio:4/3;object-fit:cover;}
.duo figure.staand img{aspect-ratio:3/4;}

/* ── de bergrit als overgang ─────────────────────────────────
   Het vak krijgt de kleur van de band erboven; de svg tekent het
   vlak van de band eronder. De lijndikte staat hier, niet in de
   svg, zodat ze niet mee uitgerekt wordt. De bollen zijn gewone
   elementen en blijven dus rond.
   ──────────────────────────────────────────────────────────── */
.weg{position:relative;width:100%;height:clamp(62px,6.4vw,118px);overflow:hidden;}
.weg svg{display:block;width:100%;height:100%;}
.weg .wegdek{stroke-width:clamp(9px,1vw,15px);}
.weg .streep-op-de-weg{stroke-width:clamp(1.2px,.13vw,2px);
  stroke-dasharray:clamp(7px,.78vw,12px) clamp(5px,.58vw,9px);}
.weg b{position:absolute;width:clamp(11px,1.05vw,16px);aspect-ratio:1;border-radius:50%;
  background:var(--ge);border:clamp(2px,.2vw,3px) solid var(--rand);
  transform:translate(-50%,-50%);}

/* ── menukaart ──────────────────────────────────────────────── */
.gang{margin-bottom:clamp(40px,5vw,64px);}
.gang h2{margin-bottom:6px;}
.gang .onder{font-size:15.5px;color:var(--gd);margin-bottom:20px;}
.gerechten{border-top:3px solid var(--an);}
.gerecht{display:grid;grid-template-columns:minmax(0,14rem) minmax(0,1fr) 11.4rem;
  gap:4px 26px;padding:14px 0;border-bottom:1px solid var(--lijn);align-items:baseline;}
.gerecht dt{font-family:var(--bc);font-weight:900;text-transform:uppercase;
  font-size:21px;line-height:1.05;display:flex;justify-content:space-between;
  align-items:flex-start;gap:10px;}
.gerecht dd{font-size:15.5px;line-height:1.45;color:var(--gd);}
.gerecht .pr{font-family:var(--bc);font-weight:700;font-size:19px;letter-spacing:.02em;
  color:var(--an);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.prijskop{text-align:right;margin-bottom:6px;font-family:var(--bc);font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--wg);}
.prijskop span+span::before{content:" · ";}
.snel{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:26px;}
.snel a{font-family:var(--bc);font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  font-size:13px;padding:7px 13px 8px;border:1px solid var(--an3);color:var(--gr);}
.snel a:hover{border-color:var(--ge);color:var(--ge);}
.tip{flex:0 0 auto;font-family:var(--bc);font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;font-size:12px;background:var(--ge);color:var(--an);
  padding:3px 8px 4px;margin-top:2px;}

/* ── stappen ────────────────────────────────────────────────── */
.stappen{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:34px 30px;}
.stap{display:flex;flex-direction:column;gap:9px;}
.stap .nr{font-family:var(--bc);font-weight:900;font-size:19px;line-height:1;
  width:38px;height:38px;border-radius:50%;background:var(--an);color:var(--ge);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.dk .stap .nr{background:var(--ge);color:var(--an);}
.stap p{font-size:16px;line-height:1.5;color:var(--gd);}
.dk .stap p{color:var(--gr);}

/* ── prijsblok ──────────────────────────────────────────────── */
.prijsrij{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;}
.prijs-groot{font-family:var(--bc);font-weight:900;text-transform:uppercase;line-height:.9;
  font-size:clamp(64px,11vw,116px);color:var(--an);background:var(--ge);padding:4px 16px 10px;}
.prijs-bij{font-family:var(--bc);font-weight:900;text-transform:uppercase;
  font-size:clamp(28px,4vw,44px);line-height:1;color:var(--kw);}
.liters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:34px;}
.liter{border:1px solid #39423E;padding:16px 14px 18px;text-align:center;
  display:flex;flex-direction:column;gap:3px;}
.liter b{font-family:var(--bc);font-weight:900;font-size:34px;line-height:1;color:var(--ge);}
.liter span{font-size:13px;color:var(--gr);}
.liter em{font-style:normal;font-weight:700;font-size:16px;color:var(--kw);
  font-variant-numeric:tabular-nums;}

/* ── lijst met streepje ─────────────────────────────────────── */
.punten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 40px;}
.punten li{border-left:4px solid var(--ge);padding-left:16px;}
.punten h3{margin-bottom:6px;}
.punten p{font-size:16px;line-height:1.5;color:var(--gd);}
.dk .punten p{color:var(--gr);}

/* ── tabel ──────────────────────────────────────────────────── */
.tabelwrap{overflow-x:auto;}
table.net{border-collapse:collapse;width:100%;min-width:540px;font-size:16px;}
/* kolommen tegen elkaar in plaats van uitgespreid over de volle breedte.
   De 1%-breedte van de naamkolom moet mee weg, anders rekt die de tabel
   alsnog op tot de volle breedte van het blok. */
.net.krap{width:auto;min-width:0;}
.net.krap tbody th{width:auto;}
.net th,.net td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--lijn);}
.net thead th{font-family:var(--bc);font-weight:900;text-transform:uppercase;font-size:19px;
  letter-spacing:.04em;border-bottom:3px solid var(--an);}
.net tbody th{font-family:var(--bc);font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;font-size:15px;color:var(--wg);white-space:nowrap;width:1%;}
.net td{color:var(--gd);}

/* ── het verhaal: de uitslag van Sylvère Maes ───────────────── */
.palmares{border-top:3px solid var(--ge);margin-top:8px;}
.palmares div{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:12px 22px;
  padding:11px 0;border-bottom:1px solid var(--an3);align-items:baseline;}
.palmares .jaar{font-family:var(--bc);font-weight:900;font-size:26px;line-height:1;
  color:var(--ge);font-variant-numeric:tabular-nums;}
.palmares .wat{font-size:16.5px;color:var(--kw);}
.palmares .wat span{display:block;font-size:14.5px;color:var(--gr);margin-top:2px;}

/* ── praktisch ──────────────────────────────────────────────── */
.prak{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:32px 40px;}
.prak h3{font-family:var(--bc);font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  font-size:14px;color:var(--ge);margin-bottom:10px;}
.lt .prak h3{color:var(--wg);}
.prak p,.prak li{font-size:16px;color:var(--gr);}
.lt .prak p,.lt .prak li{color:var(--gd);}
.prak b{color:var(--kw);font-weight:600;}
.tekstlink{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--ge);text-decoration-thickness:2px;}
.tekstlink:hover{color:var(--ge);}
.lt .prak b{color:var(--an);}
.prak .uur{display:flex;justify-content:space-between;gap:14px;padding:6px 0;
  border-bottom:1px solid var(--an3);font-variant-numeric:tabular-nums;}
.lt .prak .uur{border-bottom-color:var(--lijn);}
.prak .groot{font-family:var(--bc);font-weight:900;font-size:30px;letter-spacing:.02em;
  color:var(--an);line-height:1.1;}
.prak .groot:hover{color:var(--wg);}

/* ── openingsuren als een kaart naast het adres ──────────────── */
.urenkaart{background:var(--an);color:var(--kw);padding:clamp(26px,3.4vw,40px);}
.urenkaart .eyebrow{color:var(--ge);}
.urenkaart .kop{color:var(--kw);}
.urenkaart .uur{display:flex;justify-content:space-between;gap:16px;
  padding:13px 0;border-bottom:1px solid var(--an3);font-variant-numeric:tabular-nums;
  font-family:var(--bc);font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  font-size:18px;}
.urenkaart .uur:last-of-type{border-bottom:0;}
.urenkaart .uur b{font-weight:700;color:var(--kw);}
.urenkaart .uur span{color:var(--ge);}
.urenkaart .voetnoot{margin-top:22px;padding-top:20px;border-top:3px solid var(--ge);
  font-size:15.5px;line-height:1.5;color:var(--gr);}

/* ── woordmerk De Soepronde ─────────────────────────────────────
   Geen afbeelding maar echte letters, in dezelfde Barlow Condensed
   als de rest van de site. Daardoor scherp op elk scherm en overal
   even groot te zetten met --mg.
   ─────────────────────────────────────────────────────────────── */
.merkhouder{display:block;max-width:100%;}
.soepmerk{display:inline-flex;flex-direction:column;font-family:var(--bc);
  text-transform:uppercase;line-height:.84;color:var(--kw);
  transform:rotate(-8deg);transform-origin:0 100%;}
.lt .soepmerk{color:var(--an);}
.soepmerk b{font-weight:900;font-size:var(--mg);letter-spacing:.005em;}
.soepmerk b em{font-style:normal;color:var(--ge);}
.soepmerk .by{font-weight:500;font-size:calc(var(--mg) * .286);
  margin-top:calc(var(--mg) * .1);display:flex;justify-content:space-between;
  line-height:1;}
.soepmerk .by span{display:block;}

/* de bergrit onder het woordmerk, zoals op het drukwerk */
.merkrit{display:block;width:100%;max-width:520px;height:auto;margin-top:14px;}

/* ── voet ───────────────────────────────────────────────────── */
.voet{border-top:1px solid var(--an3);padding-block:clamp(40px,5vw,60px);}
.voet .in{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;}
.voet .ruit{width:clamp(96px,11vw,124px);height:auto;}
.voet .regel{font-family:var(--bc);font-weight:700;text-transform:uppercase;
  letter-spacing:.13em;font-size:15px;color:var(--kw);}
.voet .regel i{font-style:normal;color:var(--ge);margin-inline:11px;}
.voet .klein{font-size:14px;color:var(--gr);}
.voet .navvoet{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;
  font-family:var(--bc);font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  font-size:14px;color:var(--gr);}
.voet .navvoet a:hover{color:var(--ge);}

@media (max-width:820px){
  /* de hero valt uiteen: eerst de foto, dan de tekst. Zo blijft het
     gezicht op de foto zichtbaar en ligt er geen tekst overheen. */
  .hero>img{position:static;height:auto;aspect-ratio:5/4;object-position:98% 16%;}
  .hero .waas{display:none;}
  .hero .in{min-height:0;padding-block:clamp(32px,7vw,46px);}
  .hero h1{max-width:none;}
  .duo figure.staand img{aspect-ratio:4/3;}
  .duo,.punten{grid-template-columns:1fr;}
  .balk .in{flex-wrap:wrap;min-height:0;}
  .nav{order:3;width:100%;font-size:15px;gap:2px 18px;}
  .gerecht{grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;}
  .gerecht dd{grid-column:1;}
  .gerecht .pr{grid-column:2;grid-row:1/3;font-size:17px;}
  .prijskop{display:none;}
  .liters{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none!important;animation:none!important;}
}

/* ── op papier ───────────────────────────────────────────────────
   De menukaart wordt af en toe afgedrukt. Zonder deze regels gaan
   de donkere banden mee door de printer — een volle bak inkt voor
   niets, en grijze letters op grijs papier. Alles wordt hier zwart
   op wit, en wat op papier geen functie heeft valt weg. */
@media print{
  *{background:transparent!important;color:#000!important;
    box-shadow:none!important;}
  body{font-size:11pt;}
  .balk,.nav,.tel,.pui,.weg,.acties,.snel,.navvoet,.hero .waas,.hero>img,
  .knop,figure,.kaart img,.ruit{display:none!important;}
  .hero .in,.hero{min-height:0!important;padding-block:10pt!important;}
  .in{max-width:none;padding:0;}
  .sectie,.paginakop{padding-block:14pt;}
  .kop{font-size:15pt;}
  h1.kop{font-size:20pt;}
  .streep{background:#000!important;height:2px;width:40px;}
  .gang{break-inside:avoid;}
  .gerecht{break-inside:avoid;}
  .net th,.net td{border-color:#999!important;}
  .tip{border:1px solid #000;}
  /* het adres moet er altijd op staan, ook als de voettekst wegvalt */
  .voet .regel{font-weight:700;}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;}
}