```{raw} html
<section class="cbht-login-layer-intro" aria-label="chatBHT Layer-Grafik">
  <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="Layer-Grafiken der chatBHT Einführung">
    <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>
```

# Einführung

chatBHT ist eine Plattform für den Einsatz generativer KI an der Berliner Hochschule für Technik. Sie unterstützt die Arbeit mit Texten, Bildern, Sprache und eigenen Unterlagen in Lehre und Forschung.

## Application Layer

Auf der Anwendungsebene begegnen Nutzende den KI-Funktionen im Hochschulalltag. Die Oberfläche soll Menschen mit unterschiedlichen fachlichen Hintergründen einen zugänglichen Einstieg ermöglichen.

chatBHT baut auf offenen Technologien wie Django, PostgreSQL und Webstandards auf. Eine nachvollziehbare, integrierbare Software unterstützt die eigenständige Gestaltung institutioneller IT. Der [Deutschland-Stack](https://technologie.deutschland-stack.gov.de/) bietet einen Bezugspunkt für offene Technologien in öffentlichen Digitalvorhaben.

## Institutional Layer

Die institutionelle Ebene ordnet generative KI in Lehre, Forschung und bestehende Arbeitsabläufe ein. Die Einführung ist ein gemeinsamer Lernprozess: Studierende, Lehrende und die Hochschule entwickeln Kompetenzen und Regeln für einen verantwortlichen Einsatz.

## Computing Layer

Die Rechenebene stellt Modelle und Rechenleistung bereit. Die Anbindung von chatBHT umfasst Dienste der GWDG/SAIA. Standardisierte Schnittstellen ermöglichen es, unterschiedliche Modelle einzubinden. Welche Modelle verfügbar sind, sehen Sie in der [Modellauswahl](using-chatbht/choose-a-model.md).

Wissenschaftliche Verbundstrukturen ermöglichen den Austausch über neue Modelle, technischen Support und die Weiterentwicklung der gemeinsamen Infrastruktur.

## Infrastructure Layer

Die Infrastrukturebene ermöglicht digitale Kommunikation und verteilte Rechenleistung. Rechenzentren, Netzwerke und internationale Datenverbindungen bilden die technische Grundlage, auf der KI-Dienste erreichbar werden.

## Energy Layer

Jede KI-Anfrage benötigt Rechenarbeit und damit Energie. Der Ressourcenbedarf gehört deshalb zur Bewertung von KI-Infrastruktur und ihrer Nutzung. Er bildet die Basisschicht des Modells.

```{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">Partner</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>
```
