<template>
  <div class="forgot-password public-page">
    <header class="info-header">
      <h1
        class="forgot-password__title public-page__title"
        data-cy="forgot-password">Passwort vergessen?</h1>
    </header>
    <section class="forgot-password__section forgot-password__text">
      <p class="forgot-info">Ihr Benutzerkonto wird durch den Hep Verlag verwaltet und deshalb können Sie das Passwort ausschliesslicht auf
        <a
          class="hep-link"
          href="https://www.hep-verlag.ch">www.hep-verlag.ch</a> verwaltet werden.</p>
      <p class="forgot-info">Melden Sie sich mit der gleichen E-Mail-Adresse und dem gleichen </p>
    </section>
    <section class="forgot-password__section forgot-password__link">
      <a
        class="button button--primary button--big actions__submit"
        href="https://www.hep-verlag.ch">Hep Verlag Webseite besuchen</a>
    </section>
  </div>
</template>

<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";

.forgot-info {
  font-family: $sans-serif-font-family;

  &:last-child {
    margin-top: $large-spacing;
  }
}

.forgot-password__link {
    margin-top: $large-spacing;
}

</style>
