{namespace f=TYPO3\CMS\Fluid\ViewHelpers}

<!-- Header mit Logo -->
<header class="site-header">
  <div class="header-inner container">
    <a href="/" class="site-logo-link">
      <img src="/fileadmin/images/activea-logo.svg" alt="Active A – Leben mit Hämophilie A" class="site-logo-img">
    </a>
  </div>
</header>

<!-- Hero: Bild links, Titel + Intro rechts -->
<section class="post-hero">
  <div class="post-hero__text" id="heroText">
    <f:if condition="{data.crdate}">
      <time class="post-meta__date" data-ts="{data.crdate}"></time>
    </f:if>
    <h1 class="post-title">{data.title}</h1>
  </div>
  <f:format.raw>{firstContent}</f:format.raw>
</section>

<!-- Artikel-Body -->
<main class="main-content">
  <div class="container content-width">
    <f:format.raw>{restContent}</f:format.raw>
  </div>
</main>

<!-- Footer -->
<footer class="site-footer">
  <div class="footer-inner">
    <a href="/impressum">Impressum</a>
    <span class="footer-sep">|</span>
    <a href="/datenschutz">Datenschutz</a>
    <span class="footer-sep">|</span>
    <a href="/kontakt">Kontakt</a>
  </div>
</footer>

<script>
(function(){
  var t=document.getElementById('heroText');
  var s=document.querySelector('.post-intro-text');
  if(t&&s){s.insertBefore(t,s.firstChild);t.style.position='static';t.style.width='auto';}
  var d=document.querySelector('.post-meta__date[data-ts]');
  if(d){
    var m=['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'];
    var dt=new Date(parseInt(d.getAttribute('data-ts'))*1000);
    d.textContent=dt.getDate()+'. '+m[dt.getMonth()]+' '+dt.getFullYear();
  }
})();
</script>