Legend Tag only can contains display:inline elements, <h2> is a display:block element.

Try removing the <h2> within c:section:

<legend><h2>{!sectiontitle}</h2></legend>

by

<apex:component >
    <apex:attribute name="sectiontitle" type="String" description="TODO: Describe me"/>
  <fieldset>
      <legend>{!sectiontitle}</legend>
      <apex:componentBody />
  </fieldset>
  
</apex:component>

In addition you could style legend tag by css:

<style> legend{font-weight:bold;} </style>

Legend Tag only can contains display:inline elements, <h2> is a display:block element.

Try removing the <h2> within c:section:

<legend><h2>{!sectiontitle}</h2></legend>

by

<apex:component >
    <apex:attribute name="sectiontitle" type="String" description="TODO: Describe me"/>
  <fieldset>
      <legend>{!sectiontitle}</legend>
      <apex:componentBody />
  </fieldset>
  
</apex:component>

In addition you could style legend tag by css:

<style> legend{font-weight:bold;} </style>

In deep:

Maybe you are asking why h2 works by reloading (complete-reflow) but not by "ajax" (partial-reflow). The browser is your friend and it fix the block element on complete reflow, while fix other broken html too. I don't know why not all html is repaired on partial reflow (It should be for performance issues I assume)