<!-- Standard -->
<div class="overlay">
  <div class="overlay__background" tabindex="-1"></div>
  <dialog class="overlay__dialog" aria-labelledby="PLEASE-CHANGE-ME-overlay-1-title" open="open">
    <div class="overlay__headline">
      <h1 class="headline headline--6" id="PLEASE-CHANGE-ME-overlay-1-title">Das ist ein Overlay</h1>
    </div>
    <div class="overlay__description">
      <p>Optionaler Erklärtext ipsum dolor sit amet, consetetur sed diam nonumy eirmod tempor invidunt.</p>
    </div>
  </dialog>
</div>

{
  "headline": {
    "text": "Das ist ein Overlay"
  },
  "description": "p Optionaler Erklärtext ipsum dolor sit amet, consetetur sed diam nonumy eirmod tempor invidunt.\n"
}

<!-- Login -->
<div class="overlay">
  <div class="overlay__background" tabindex="-1"></div>
  <dialog class="overlay__dialog overlay__dialog--login" aria-labelledby="PLEASE-CHANGE-ME-overlay-2-title" open="open">
    <div class="overlay__headline">
      <h1 class="headline headline--6" id="PLEASE-CHANGE-ME-overlay-2-title">Adminportal</h1>
    </div>
    <div class="overlay__description">
      <p>Bei Problemen mit Ihrem Zugang wenden Sie sich bitte an den ITZ-Helpdesk.</p>
    </div>
    <div class="overlay__form">
      <form class="form" name="LoginForm" action="https://adminportal2.itz.uni-halle.de/check_login.php" method="post">
        <div class="form__content">
          <div class="form__fields">
            <div class="form__field">
              <div class="form-group">
                <label class="label form-group__label" for="nkz">Nutzerkennzeichen
                  <abbr class="label__required" title="Pflichtfeld">*</abbr>
                </label>
                <input class="input" id="nkz" name="nkz" placeholder="abcde" required="required"></input>
              </div>
            </div>
            <div class="form__field">
              <div class="form-group">
                <label class="label form-group__label" for="pw">AD-Passwort
                  <abbr class="label__required" title="Pflichtfeld">*</abbr>
                </label>
                <input class="input" id="pw" name="pw" type="password" placeholder="geheim42" required="required"></input>
              </div>
            </div>
          </div>
          <div class="form__buttons">
            <button class="button button--primary" type="submit"><span class="button__text">Login</span></button>
          </div>
        </div>
      </form>
      <form class="form" name="CasLoginForm" action="https://adminportal2.itz.uni-halle.de/login_with_cas.php" method="post">
        <div class="form__content">
          <button class="button button--secondary" type="submit"><span class="button__text">CAS Login</span></button>
        </div>
      </form>
    </div>
  </dialog>
</div>

{
  "headline": {
    "text": "Adminportal"
  },
  "description": "p Bei Problemen mit Ihrem Zugang wenden Sie sich bitte an den ITZ-Helpdesk.\n",
  "login": true,
  "button": {
    "text": "CAS Login",
    "link": "#"
  },
  "form": {
    "submitprimary": true,
    "name": "LoginForm",
    "action": "https://adminportal2.itz.uni-halle.de/check_login.php",
    "method": "post",
    "submit": "Login",
    "fields": [
      {
        "label": "Nutzerkennzeichen",
        "required": true,
        "name": "nkz",
        "id": "nkz",
        "settings": {
          "placeholder": "abcde"
        }
      },
      {
        "label": "AD-Passwort",
        "required": true,
        "id": "pw",
        "name": "pw",
        "settings": {
          "placeholder": "geheim42",
          "type": "password"
        }
      }
    ]
  },
  "formcas": {
    "submitsecondary": true,
    "button": {
      "type": "submit",
      "style": "secondary",
      "text": "CAS Login"
    },
    "name": "CasLoginForm",
    "action": "https://adminportal2.itz.uni-halle.de/login_with_cas.php",
    "method": "post",
    "submit": "CAS Login"
  }
}

<!-- 404 -->
<div class="overlay">
  <div class="overlay__background" tabindex="-1"></div>
  <dialog class="overlay__dialog overlay__dialog--error" aria-labelledby="PLEASE-CHANGE-ME-overlay-3-title" open="open">
    <div class="overlay__headline">
      <h1 class="headline headline--6" id="PLEASE-CHANGE-ME-overlay-3-title">Dokument nicht gefunden</h1>
    </div>
    <div class="overlay__description">
      <p>Der aufgerufene Link ist nicht korrekt. Bitte die Seite neu laden, die URL prüfen, zurück zur
        <a class="link link--internal" href="https://adminportal.relaunch.uni-halle.de/docs/templates.html">Startseite</a> gehen oder den
        <a class="link link--external" href="mailto:erika.m@beispiel.de?&amp;subject=Admin-Portal">Admin</a> informieren.</p>
    </div>
  </dialog>
</div>

{
  "error": true,
  "headline": {
    "text": "Dokument nicht gefunden"
  },
  "description": "p Der aufgerufene Link ist nicht korrekt. Bitte die Seite neu laden, die URL prüfen, zurück zur #[a.link.link--internal(href='https://adminportal.relaunch.uni-halle.de/docs/templates.html') Startseite] gehen oder den #[a.link.link--external(href=\"mailto:erika.m@beispiel.de?&subject=Admin-Portal\") Admin] informieren.\n"
}