{{ define "main" }}
<article class="page">
  <div class="container">
    <h1>{{ .Title }}</h1>
    {{ .Content }}

    {{ range .Params.galerien }}
    {{ $titel := .titel }}
    <section class="ausflug-gruppe">
      <div class="ausflug-inner">
        <div class="ausflug-text">
          <h2>{{ .titel }}</h2>
          {{ with .text }}<p>{{ . }}</p>{{ end }}
          {{ with .punkte }}
          <ul class="ausflug-punkte">
            {{ range . }}<li>{{ . }}</li>{{ end }}
          </ul>
          {{ end }}
        </div>

        <div class="ausflug-bild">
          <div class="slider slider--single lightbox-gallery">
            <button type="button" class="slider-arrow slider-prev" aria-label="Zurück">&#10094;</button>
            <div class="slider-track">
              {{ range $i, $img := .bilder }}
              <a href="{{ $img }}" target="_blank" rel="noopener" class="slider-slide lightbox-trigger">
                <img src="{{ $img }}" alt="{{ $titel }} – Foto {{ add $i 1 }}" loading="lazy">
              </a>
              {{ end }}
            </div>
            <button type="button" class="slider-arrow slider-next" aria-label="Weiter">&#10095;</button>
          </div>
        </div>
      </div>
    </section>
    {{ end }}

    <div class="lightbox" hidden>
      <button type="button" class="lightbox-close" aria-label="Schließen">&times;</button>
      <button type="button" class="lightbox-arrow lightbox-prev" aria-label="Vorheriges Bild">&#10094;</button>
      <img class="lightbox-img" src="" alt="">
      <button type="button" class="lightbox-arrow lightbox-next" aria-label="Nächstes Bild">&#10095;</button>
    </div>
  </div>
</article>
{{ end }}