/*
 * Exakter Fix für den vorhandenen Codeblock Engagement und Beratung.
 * Keine Änderung an Header, Footer, Hero oder anderen Startseitenbereichen.
 */

body #engagement-beratung .afeb2-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: clamp(26px, 4vw, 42px) !important;
  align-items: stretch !important;
}

body #engagement-beratung .afeb2-panel {
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  height: auto !important;
  color: var(--afeb2-dark) !important;
  background: var(--afeb2-paper) !important;
}

body #engagement-beratung .afeb2-panel--rescue,
body #engagement-beratung .afeb2-panel--practice {
  display: flex !important;
  flex-direction: column !important;
}

body #engagement-beratung .afeb2-content,
body #engagement-beratung .afeb2-content--practice {
  min-height: 0 !important;
  height: auto !important;
  color: var(--afeb2-dark) !important;
  background: var(--afeb2-paper) !important;
}

body #engagement-beratung .afeb2-heading h3,
body #engagement-beratung .afeb2-practice-mark strong {
  color: var(--afeb2-dark) !important;
}

body #engagement-beratung .afeb2-heading > span,
body #engagement-beratung .afeb2-practice-mark span {
  color: var(--afeb2-red) !important;
}

body #engagement-beratung .afeb2-content > p {
  color: var(--afeb2-muted) !important;
}

body #engagement-beratung .afeb2-role-list > div,
body #engagement-beratung .afeb2-groups span {
  color: var(--afeb2-text) !important;
  background: rgba(255, 255, 255, .66) !important;
}

body #engagement-beratung .afeb2-role-list span,
body #engagement-beratung .afeb2-groups span {
  color: var(--afeb2-text) !important;
}

body #engagement-beratung .afeb2-button {
  color: var(--afeb2-dark) !important;
  background: transparent !important;
}

body #engagement-beratung .afeb2-button:hover {
  color: #fff !important;
  background: var(--afeb2-red) !important;
}

/* Ehrenamt als breite Bühne */
body #engagement-beratung .afeb2-panel--rescue {
  display: grid !important;
  grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr) !important;
}

body #engagement-beratung .afeb2-panel--rescue .afeb2-photo {
  min-height: 520px !important;
  height: 100% !important;
  aspect-ratio: auto !important;
}

body #engagement-beratung .afeb2-panel--rescue .afeb2-photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 36% !important;
}

/* Beratung als eigener, klarer Block darunter */
body #engagement-beratung .afeb2-panel--practice {
  display: grid !important;
  grid-template-columns: minmax(360px, .82fr) minmax(0, 1.18fr) !important;
}

body #engagement-beratung .afeb2-practice-head {
  min-height: 100% !important;
  grid-template-columns: 1fr !important;
  align-content: center !important;
}

body #engagement-beratung .afeb2-logo {
  min-height: 190px !important;
}

body #engagement-beratung .afeb2-content--practice {
  justify-content: center !important;
}

@media (max-width: 1080px) {
  body #engagement-beratung .afeb2-panel--rescue,
  body #engagement-beratung .afeb2-panel--practice {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body #engagement-beratung .afeb2-panel--rescue .afeb2-photo {
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
  }

  body #engagement-beratung .afeb2-practice-head {
    min-height: 280px !important;
  }
}

@media (max-width: 700px) {
  body #engagement-beratung .afeb2-grid {
    gap: 24px !important;
  }

  body #engagement-beratung .afeb2-panel--rescue .afeb2-photo {
    aspect-ratio: 4 / 3 !important;
  }

  body #engagement-beratung .afeb2-practice-head {
    min-height: 0 !important;
  }
}