Walschleber-Kultour-CMS/newsletter.html

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">

  <title>Newsletter – Walschleber KulTour</title>

  <meta
    name="description"
    content="Abonniere den Newsletter und erhalte neue Termine der Walschleber KulTour direkt per E-Mail."
  >

  <link
    rel="canonical"
    href="https://walschleber-kultour.com/newsletter.html"
  >

  <meta
    name="viewport"
    content="width=device-width, initial-scale=1"
  >

  <!-- Open Graph -->
  <meta
    property="og:title"
    content="Newsletter – Walschleber KulTour"
  >

  <meta
    property="og:description"
    content="Verpasse keinen Termin: Jetzt anmelden."
  >

  <meta
    property="og:type"
    content="website"
  >

  <meta
    property="og:url"
    content="https://walschleber-kultour.com/newsletter.html"
  >

  <meta
    property="og:image"
    content="https://walschleber-kultour.com/assets/og-default.jpg"
  >

  <meta
    name="twitter:card"
    content="summary_large_image"
  >

  <!-- Favicon -->
  <link
    rel="icon"
    href="/assets/logo.png"
    sizes="32x32"
    type="image/png"
  >

  <!-- Bootstrap -->
  <link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
    rel="stylesheet"
  >

  <!-- Eigene Styles -->
  <link
    rel="stylesheet"
    href="/assets/styles.css"
  >

  <!-- Performance-Hint für Kit -->
  <link
    rel="preconnect"
    href="https://walschleber-kultour.kit.com"
    crossorigin
  >
</head>

<body>

  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg bg-body-tertiary border-bottom sticky-top">
    <div class="container">

      <a
        class="navbar-brand brand-logo"
        href="index.html"
      >
        <img
          src="/assets/logo.png"
          alt="Walschleber KulTour Logo"
          height="34"
          width="34"
        >

        <span>Walschleber KulTour</span>
      </a>

      <button
        class="navbar-toggler"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#nav"
        aria-controls="nav"
        aria-expanded="false"
        aria-label="Navigation öffnen"
      >
        <span class="navbar-toggler-icon"></span>
      </button>

      <div
        id="nav"
        class="collapse navbar-collapse"
      >
        <ul class="navbar-nav ms-auto">

          <li class="nav-item">
            <a
              class="nav-link"
              href="programm.php"
            >
              Programm
            </a>
          </li>

          <li class="nav-item">
            <a
              class="nav-link"
              href="vergangene-vortraege.php"
            >
              Vergangene Vorträge
            </a>
          </li>

          <li class="nav-item">
            <a
              class="nav-link"
              href="ueber-uns.html"
            >
              Über uns
            </a>
          </li>

          <li class="nav-item">
            <a
              class="nav-link active"
              href="newsletter.html"
              aria-current="page"
            >
              Newsletter
            </a>
          </li>

        </ul>
      </div>
    </div>
  </nav>


  <!-- Header -->
  <header class="py-5 bg-light border-bottom">
    <div class="container">

      <div class="akzent-line mb-3"></div>

      <h1 class="display-6 mb-2">
        Newsletter
      </h1>

      <p class="text-muted mb-0">
        Verpasse keinen Termin – wir mailen dir neue Veranstaltungen beizeiten.
      </p>

    </div>
  </header>


  <!-- Hauptinhalt -->
  <main class="container my-5">

    <div class="row g-4">

      <!-- Anmeldung -->
      <div class="col-lg-7">

        <div class="p-4 border rounded-3 bg-white h-100">

          <p class="section-kicker mb-1">
            Anmeldung
          </p>

          <h2 class="h4">
            Schnell &amp; DSGVO-konform
          </h2>

          <p>
            Trage deine E-Mail-Adresse ein und bestätige die
            Anmeldung anschließend per Double-Opt-In.
          </p>


          <!-- Kit Newsletter Formular -->
          <div class="p-3 p-md-4 cta-band rounded-4">

            <!-- BEGIN Kit Embed -->
            <script
              async
              data-uid="d9075b0046"
              src="https://walschleber-kultour.kit.com/d9075b0046/index.js"
            ></script>
            <!-- END Kit Embed -->

            <noscript>
              <p class="text-danger mt-2 mb-0">
                Bitte JavaScript aktivieren, um das
                Newsletter-Formular zu laden.
              </p>
            </noscript>

          </div>


          <!-- Datenschutzhinweis -->
          <p class="small text-muted mt-3 mb-0">
            Hinweis: Wir verwenden Kit als Newsletter-Dienst.
            Mit deiner Anmeldung erklärst du dich mit der Verarbeitung
            deiner Daten zum Versand des Newsletters einverstanden.
            Details findest du in unserer
            <a href="/datenschutz.html">
              Datenschutzerklärung
            </a>.
          </p>

        </div>
      </div>


      <!-- Vorteile -->
      <div class="col-lg-5">

        <div class="p-4 border rounded-3 bg-white h-100">

          <p class="section-kicker mb-1">
            Vorteile
          </p>

          <h2 class="h5">
            Warum abonnieren?
          </h2>

          <ul class="mb-0">
            <li>
              Frühzeitig über neue Termine informiert
            </li>

            <li>
              Besondere Hinweise &amp; Hintergründe
            </li>

            <li>
              Nur relevante Infos – kein Spam
            </li>

            <li>
              Jederzeit mit einem Klick abmelden
            </li>
          </ul>

        </div>
      </div>

    </div>
  </main>


  <!-- Footer -->
  <footer class="py-4 border-top">

    <div class="container small d-flex gap-3 flex-wrap align-items-center">

      <span>
        &copy;
        <span id="y"></span>
        Walschleber KulTour
      </span>

      <span class="separator">•</span>

      <a href="impressum.html">
        Impressum
      </a>

      <span class="separator">•</span>

      <a href="datenschutz.html">
        Datenschutz
      </a>

      <span class="separator">•</span>

      <a
        class="footer-gitea"
        href="https://git.mrblake.cc/MrBlake/Walschleber-Kultour-CMS"
        target="_blank"
        rel="noopener noreferrer"
        aria-label="Quellcode auf Gitea ansehen"
        title="Quellcode auf Gitea"
      >
        <img
          src="/assets/gitea.svg"
          width="18"
          height="18"
          alt=""
        >
      </a>

    </div>
  </footer>


  <!-- Aktuelles Jahr im Footer -->
  <script>
    document.getElementById('y').textContent =
      new Date().getFullYear();
  </script>


  <!-- Bootstrap JavaScript -->
  <script
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
  ></script>

</body>
</html>