<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. Um Ihr Passwort zurückzusetzen,
        gehen Sie
        auf die Verlagsseite.</p>
    </section>
    <section class="forgot-password__section forgot-password__text">
      <p class="forgot-info">
        Passwort unter
        <a
          class="hep-link"
          href="https://www.hep-verlag.ch/customer/account/forgotpassword/"
          target="_blank">www.hep-verlag.ch</a> zurücksetzen</p>
    </section>
  </div>
</template>

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

  .forgot-info {
    font-family: $sans-serif-font-family;
    margin-bottom: $medium-spacing;

  }

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

</style>
