```{raw} html
<section class="cbht-login-layer-intro" aria-label="chatBHT layer illustration">
  <style>
    .cbht-login-layer-intro {
      --cbht-page-bg: var(--pst-color-background, #ffffff);
      --cbht-text: var(--pst-color-text-base, #212121);
      --cbht-muted: var(--pst-color-text-muted, #525252);
      --cbht-border: #e5e5e5;
      width: 100%;
      min-height: 700px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: clamp(1.25rem, 4vw, 3rem) 1rem 2.5rem;
      background: var(--cbht-page-bg);
      color: var(--cbht-text);
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      overflow: hidden;
    }

    .cbht-login-layer-intro *,
    .cbht-login-layer-intro *::before,
    .cbht-login-layer-intro *::after {
      box-sizing: border-box;
    }

    .cbht-login-layer-logo {
      width: min(350px, 62vw);
      height: auto;
      display: block;
      margin: 0 auto;
      transform: translateY(-28px);
      user-select: none;
      -webkit-user-drag: none;
      filter: none !important;
      background: transparent !important;
      border-radius: 0 !important;
    }

    .cbht-login-layer-stack {
      position: relative;
      width: min(680px, 100%);
      height: clamp(640px, 84vw, 830px);
      margin-top: clamp(-10px, 0.2vh, 4px);
      transform: translateY(-72px);
    }

    .cbht-login-layer-image {
      position: absolute;
      left: 50%;
      top: 0;
      width: min(480px, 100%);
      height: auto;
      transform: translateX(-50%);
      user-select: none;
      -webkit-user-drag: none;
      filter: drop-shadow(0 24px 42px rgba(0, 0, 0, 0.10)) !important;
      background: transparent !important;
      border-radius: 0 !important;
    }

    .cbht-login-layer-image--login-lower {
      z-index: 10;
      opacity: 0.98;
      transform: translateX(-50%) translateY(clamp(108px, 14svh, 150px));
    }

    .cbht-login-layer-image--login-upper {
      z-index: 20;
      transform: translateX(-50%) translateY(0);
    }

    .cbht-login-layer-image--infrastructure {
      z-index: 8;
      opacity: 0.98;
      transform: translateX(-50%) translateY(clamp(248px, 34vw, 330px));
    }

    .cbht-login-layer-image--energy {
      z-index: 6;
      opacity: 0.98;
      transform: translateX(-50%) translateY(clamp(388px, 52vw, 510px));
    }

    @media (max-width: 720px) {
      .cbht-login-layer-intro {
        min-height: 640px;
      }

      .cbht-login-layer-stack {
        height: clamp(560px, 108vw, 720px);
        transform: translateY(-86px);
      }

      .cbht-login-layer-image--login-lower {
        transform: translateX(-50%) translateY(clamp(96px, 13svh, 136px));
      }

      .cbht-login-layer-image--infrastructure {
        transform: translateX(-50%) translateY(clamp(220px, 44vw, 300px));
      }

      .cbht-login-layer-image--energy {
        transform: translateX(-50%) translateY(clamp(344px, 68vw, 462px));
      }
    }
  </style>

  <img
    src="_static/images/logo-neu.png"
    alt="chatBHT logo"
    class="cbht-login-layer-logo"
  >

  <div class="cbht-login-layer-stack" aria-label="Layers in the chatBHT introduction">
    <img
      src="_static/images/3.png"
      alt="Institutional Layer"
      class="cbht-login-layer-image cbht-login-layer-image--login-lower"
    >
    <img
      src="_static/images/2.png"
      alt="AI and Computing Layer"
      class="cbht-login-layer-image cbht-login-layer-image--login-upper"
    >
    <img
      src="_static/images/7461a410b18658ad47a663bda01af8b19493617dcac12c25dc173e80064c0939.png"
      alt="Infrastructure Layer"
      class="cbht-login-layer-image cbht-login-layer-image--infrastructure"
    >
    <img
      src="_static/images/d86ef4c40ae1b65a2b7f70460a7a0582c034d4c8459967feabc2a22036d2b306.png"
      alt="Energy Layer"
      class="cbht-login-layer-image cbht-login-layer-image--energy"
    >
  </div>
</section>
```

# Introduction

chatBHT is a platform for using generative AI at Berliner Hochschule für Technik. It supports work with text, images, speech and your own documents in teaching and research.

## Application Layer

At the application layer, users encounter AI functions in everyday university work. The interface should provide an accessible starting point for people from different academic backgrounds.

chatBHT builds on open technologies such as Django, PostgreSQL and web standards. Understandable software that integrates with existing systems supports institutions in shaping their own IT. The [Deutschland-Stack](https://technologie.deutschland-stack.gov.de/) provides a reference point for open technologies in public digital projects.

## Institutional Layer

The institutional layer places generative AI within teaching, research and existing workflows. Its introduction is a shared learning process: students, teaching staff and the university develop skills and rules for responsible use.

## Computing Layer

The computing layer provides models and computing power. chatBHT connects to services including GWDG/SAIA. Standardised interfaces allow different models to be integrated. The [model selector](using-chatbht/choose-a-model.md) shows which models are available.

Academic collaborations enable the exchange of information about new models, technical support and the development of shared infrastructure.

## Infrastructure Layer

The infrastructure layer enables digital communication and distributed computing. Data centres, networks and international data connections provide the technical foundations that make AI services accessible.

## Energy Layer

Every AI request requires computation and therefore energy. Resource requirements are part of evaluating AI infrastructure and its use. They form the base layer of the model.

```{raw} html
<section class="cbht-partners" aria-labelledby="cbht-partners-title">
  <style>
    .cbht-partners {
      margin: 4rem 0 1.5rem;
      padding-top: 2rem;
      border-top: 1px solid var(--pst-color-border, #e5e5e5);
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    .cbht-partners__title {
      margin: 0 0 1.35rem;
      color: var(--pst-color-text-muted, #525252);
      font-size: 0.8rem;
      font-weight: 650;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .cbht-partners__grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(130px, 1fr));
      align-items: center;
      gap: 1rem;
    }

    .cbht-partners__item {
      min-height: 96px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1.2rem;
      border: 1px solid var(--pst-color-border, #e5e5e5);
      border-radius: 8px;
      background: var(--pst-color-background, #ffffff);
    }

    .cbht-partners__item img {
      display: block;
      max-width: 100%;
      max-height: 52px;
      width: auto;
      height: auto;
      object-fit: contain;
      filter: grayscale(1);
      opacity: 0.86;
      transition: filter 160ms ease, opacity 160ms ease;
    }

    .cbht-partners__item:hover img,
    .cbht-partners__item:focus-visible img {
      filter: grayscale(0);
      opacity: 1;
    }

    @media (max-width: 900px) {
      .cbht-partners__grid {
        grid-template-columns: repeat(2, minmax(140px, 1fr));
      }
    }

    @media (max-width: 520px) {
      .cbht-partners__grid {
        grid-template-columns: 1fr;
      }
    }
  </style>

  <h2 id="cbht-partners-title" class="cbht-partners__title">Partners</h2>

  <div class="cbht-partners__grid">
    <a class="cbht-partners__item" href="https://chatbht.com/" aria-label="chatBHT">
      <img src="_static/images/partners/chatbht-logo.svg" alt="chatBHT">
    </a>
    <a class="cbht-partners__item" href="https://www.gwdg.de/" aria-label="GWDG">
      <img src="_static/images/partners/gwdg-logo.png" alt="GWDG">
    </a>
    <a class="cbht-partners__item" href="https://kisski.gwdg.de/" aria-label="KISSKI">
      <img src="_static/images/partners/kisski-logo.png" alt="KISSKI">
    </a>
    <a class="cbht-partners__item" href="https://gangway.de/" aria-label="Gangway">
      <img src="_static/images/partners/gangway-logo.png" alt="Gangway">
    </a>
  </div>
</section>
```
