# Kontakt

```{raw} html
<section class="cbht-contact" aria-label="Kontakt chatBHT">
  <style>
    .cbht-contact {
      --cbht-contact-border: var(--pst-color-border, #e5e5e5);
      --cbht-contact-text: var(--pst-color-text-base, #212121);
      --cbht-contact-muted: var(--pst-color-text-muted, #525252);
      --cbht-contact-bg: var(--pst-color-background, #ffffff);
      width: 100%;
      margin: 1rem 0 2rem;
      color: var(--cbht-contact-text);
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    .cbht-contact *,
    .cbht-contact *::before,
    .cbht-contact *::after {
      box-sizing: border-box;
    }

    .cbht-contact__intro {
      max-width: 760px;
      margin: 0 0 2.5rem;
    }

    .cbht-contact__lead {
      margin: 0;
      color: var(--cbht-contact-muted);
      font-size: clamp(1rem, 2vw, 1.18rem);
      line-height: 1.65;
    }

    .cbht-contact__layout {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
      gap: clamp(1rem, 3vw, 2rem);
      align-items: stretch;
    }

    .cbht-contact__panel {
      border: 1px solid var(--cbht-contact-border);
      border-radius: 8px;
      background: var(--cbht-contact-bg);
      padding: clamp(1.25rem, 3vw, 2rem);
    }

    .cbht-contact__section-title {
      margin: 0 0 1.1rem;
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: 0;
    }

    .cbht-contact__definition {
      display: grid;
      gap: 1rem;
      margin: 0;
    }

    .cbht-contact__row {
      display: grid;
      grid-template-columns: 9rem minmax(0, 1fr);
      gap: 1rem;
      padding-top: 1rem;
      border-top: 1px solid var(--cbht-contact-border);
    }

    .cbht-contact__row:first-child {
      padding-top: 0;
      border-top: 0;
    }

    .cbht-contact__label {
      margin: 0;
      color: var(--cbht-contact-muted);
      font-size: 0.86rem;
      font-weight: 650;
    }

    .cbht-contact__value {
      margin: 0;
      line-height: 1.55;
    }

    .cbht-contact__value a {
      color: inherit;
      text-decoration-thickness: 1px;
      text-underline-offset: 0.18em;
    }

    .cbht-contact__brand {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 100%;
    }

    .cbht-contact__logo-wrap {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      min-height: 92px;
      margin-bottom: 2rem;
    }

    .cbht-contact__logo {
      display: block;
      width: min(260px, 86%);
      height: auto;
      object-fit: contain;
    }

    .cbht-contact__brand-text {
      margin: 0;
      color: var(--cbht-contact-muted);
      line-height: 1.65;
    }

    @media (max-width: 820px) {
      .cbht-contact__layout {
        grid-template-columns: 1fr;
      }

      .cbht-contact__row {
        grid-template-columns: 1fr;
        gap: 0.35rem;
      }
    }
  </style>

  <div class="cbht-contact__intro">
    <p class="cbht-contact__lead">
      Die Anwendung chatBHT wurde von Gordon Dyballa für die Lehre an der Berliner Hochschule für Technik entwickelt.
    </p>
  </div>

  <div class="cbht-contact__layout">
    <section class="cbht-contact__panel" aria-labelledby="cbht-contact-details-title">
      <h2 id="cbht-contact-details-title" class="cbht-contact__section-title">Ansprechpartner</h2>

      <dl class="cbht-contact__definition">
        <div class="cbht-contact__row">
          <dt class="cbht-contact__label">Name</dt>
          <dd class="cbht-contact__value">Gordon Dyballa</dd>
        </div>
        <div class="cbht-contact__row">
          <dt class="cbht-contact__label">E-Mail</dt>
          <dd class="cbht-contact__value"><a href="mailto:gordon.dyballa@bht-berlin.de">gordon.dyballa@bht-berlin.de</a></dd>
        </div>
        <div class="cbht-contact__row">
          <dt class="cbht-contact__label">Fachbereich</dt>
          <dd class="cbht-contact__value">Fachbereich VII - Elektrotechnik - Mechatronik - Optometrie</dd>
        </div>
        <div class="cbht-contact__row">
          <dt class="cbht-contact__label">Labor</dt>
          <dd class="cbht-contact__value"><a href="https://labor.bht-berlin.de/fvm">FVM-Labor</a></dd>
        </div>
        <div class="cbht-contact__row">
          <dt class="cbht-contact__label">Adresse</dt>
          <dd class="cbht-contact__value">Berliner Hochschule für Technik (BHT)<br>Luxemburger Str. 10<br>Berlin</dd>
        </div>
      </dl>
    </section>

    <aside class="cbht-contact__panel cbht-contact__brand" aria-label="LayerX">
      <div>
        <div class="cbht-contact__logo-wrap">
          <img class="cbht-contact__logo" src="_static/images/partners/layerx-logo.png" alt="LayerX">
        </div>
        <h2 class="cbht-contact__section-title">LayerX</h2>
        <p class="cbht-contact__brand-text">
          <a href="https://layerx.dev">LayerX</a> ist das Berliner Unternehmen hinter chatBHT und unterstützt mit IT-Services &amp; Ingenierdienstleistungen.
        </p>
      </div>
    </aside>
  </div>
</section>
```