{{ define "main" }}
<section class="hero">
  <div class="hero-media hero-overlay">
    <img src="{{ .Params.hero_image }}" alt="" loading="eager">

    <div class="hero-text">
      <h1>{{ .Params.hero_title }}</h1>
      <p class="sub">{{ .Params.hero_subtitle }}</p>
      {{ with .Params.hero_text }}
        <p class="lead">{{ . }}</p>
      {{ end }}
    </div>
  </div>
</section>


<section class="section">
  <h2 class="section-title">{{ .Params.about_title }}</h2>
  <div class="section-text">
    {{ .Content }}
  </div>

  {{/* Cards optional mit Bildern */}}
  <div class="cards">
    {{ range .Params.cards }}
      <a class="card" href="{{ .link }}">
        <div class="thumb">
          {{ with .image }}
            <img src="{{ . }}" alt="" loading="lazy">
          {{ end }}
        </div>
        <h3>{{ .title }}</h3>
        <p>{{ .text }}</p>
      </a>
    {{ end }}
  </div>
</section>
{{ end }}