/* =============================================================
   02b – HIGHLIGHTS-LEISTE (eigene Sektion direkt unter dem Hero)
   Dunkelblaues Band mit den 5 Icons (weiße SVG-Icons brauchen
   dunklen Grund) – vorher Teil des Heros.
   ============================================================= */

.highlights {
  background: var(--c-blue-deep);
  color: #DCE8F5;
  padding-block: clamp(1.8rem, 3.5vw, 2.8rem);
}

.highlights__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}
.highlights__list li { display: flex; align-items: center; gap: 0.7rem; }

.highlights__icon {
  flex: 0 0 auto; display: inline-flex;   /* ohne Hintergrund/Rahmen */
}
.highlights__icon img { width: 42px; height: 42px; object-fit: contain; }

.highlights__text { display: flex; flex-direction: column; font-size: 0.82rem; color: #A9BFD8; line-height: 1.35; }
.highlights__text strong { color: #fff; font-size: 0.95rem; font-weight: 700; }

@media (max-width: 900px) {
  .highlights__list { grid-template-columns: repeat(2, 1fr); gap: 1.2rem 1.5rem; }
}
@media (max-width: 480px) {
  .highlights__list { grid-template-columns: 1fr; }
}