/* ==========================================================================
   HOF BERGMANN - Kooperationspartner
   ==========================================================================
   Zwei Spalten mit aufklappbaren Eintraegen. Mehrere Eintraege koennen
   gleichzeitig offen sein (kein Gruppenzwang wie bei einem klassischen
   Akkordeon, das immer nur einen Eintrag offen laesst).

   Aufbau je Eintrag:
   - Kopfzeile: Terrakotta-Strich + Name des Partners + Pfeil
   - Klappflaeche: Papier gedaempft, erscheint beim Oeffnen darunter
   ========================================================================== */

.hb-partner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 3rem;
}

@media all and (min-width: 45em) {
  .hb-partner {
    grid-template-columns: 1fr 1fr;
  }
}

.hb-partner__spalte {
  display: flex;
  flex-direction: column;
}

.hb-partner__item {
  border-bottom: 1px solid var(--hb-trennlinie);
}
.hb-partner__item:first-child {
  border-top: 1px solid var(--hb-trennlinie);
}

.hb-partner__kopf {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0.7rem;
  padding: 0.85rem 0.1rem;
  background: none;
  border: none;
  font-family: var(--heading-font);
  font-size: 1rem;
  font-weight: 600;
  color: var(--hb-tinte);
  text-align: left;
  cursor: pointer;
}

/* main.css belegt jedes <button>-Element pauschal mit einem dunklen
   Hover/Fokus-Hintergrund (fuer die normalen Kasten-Buttons gedacht).
   Der Kopf hier ist technisch ein <button> (fuer Tastatur- und
   Screenreader-Bedienung), soll aber kein Knopf-Aussehen haben -
   deshalb diese Regel gezielt zurueckgesetzt. */
.hb-partner__kopf:hover,
.hb-partner__kopf:focus,
.hb-partner__kopf:active {
  background-color: var(--hb-papier-gedaempft);
  color: var(--hb-tinte);
}

.hb-partner__kopf::before {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 2px;
  background: var(--hb-terrakotta);
}

.hb-partner__pfeil {
  margin-left: auto;
  flex-shrink: 0;
  width: 0.7rem;
  height: 0.7rem;
  border-right: 1.5px solid var(--hb-tinte-gedaempft);
  border-bottom: 1.5px solid var(--hb-tinte-gedaempft);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.hb-partner__item.ist-offen .hb-partner__pfeil {
  transform: rotate(-135deg);
}

.hb-partner__inhalt {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.25s ease;
}

.hb-partner__item.ist-offen .hb-partner__inhalt {
  max-height: 40rem; /* ausreichend hoch, keine Eintraege sind so lang */
}

.hb-partner__inhalt-innen {
  padding: 0 0.1rem 1rem 1.8rem;
  color: var(--hb-tinte-gedaempft);
  font-size: 0.92rem;
}

.hb-partner__inhalt-innen p {
  margin: 0 0 0.5rem;
}
.hb-partner__inhalt-innen ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.hb-partner__inhalt-innen li {
  position: relative;
  padding: 0.2rem 0 0.2rem 1rem;
}
.hb-partner__inhalt-innen li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75rem;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--hb-gruen);
}