/* ==========================================================================
   Ergänzung zu custom.css — Bausteine für "Bernd F. Rex"
   Im Include-Order nach custom.css einsortieren.
   ========================================================================== */

/* Vollbild-Band unter der Navbar */

.inst-vollbild {
  display: block;
  background: var(--inst-dark);
}

.inst-vollbild img {
  width: 100%;
  height: clamp(320px, 58vh, 620px);
  object-fit: cover;
  object-position: center 30%;
  /*Bildausschnitt: zweiter Wert justiert die Höhe;*/
  display: block;
}

/* Vier Punkte: Label links, Text rechts */

.inst-punkt {
  padding-block: 32px;
  border-top: 1px solid var(--inst-line);
}

.inst-punkt--last {
  border-bottom: 1px solid var(--inst-line);
}

.inst-punkt-titel {
  font-family: var(--inst-ff-head);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--inst-ink);
  margin: 0;
  text-wrap: pretty;
}

/* Kundenliste hinter Klick */

.inst-kundenliste {
  margin-top: 20px;
}

.inst-firmen {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 32px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--inst-ink-soft);
}

@media (min-width: 992px) {
  .inst-firmen {
    columns: 3;
  }
}

.inst-firmen li {
  break-inside: avoid;
  padding: 2px 0;
}

/* Büste neben dem Quintilian-Text */

.inst-buestenbild {
  width: 100%;
  max-width: 240px;
  height: auto;
  display: block;
  border-radius: var(--inst-r-md);
  background: var(--inst-soft);
}

/* Umriss-Button auf hellem Grund (Kundenliste aufklappen) */

.inst-btn--outline-dark {
  color: var(--inst-ink);
  border-color: var(--inst-ink);
  background: transparent;
}

.inst-btn--outline-dark:hover {
  background: var(--inst-ink);
  color: var(--inst-bg);
  border-color: var(--inst-ink);
}