/* === Infografiken und Infoblöcke === */

/* Infografik: volle Breite und Abstand nach unten */
.Infografik {
  width: 100%;
  max-width: 100%;
  margin-bottom: var(--space-l);
}

/* Container für Erklärungen und Informationen */
.info-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  margin-bottom: var(--space-l);
}

/* Boxen für Erklärung und Zusatzinfos */
.erklaerung,
.info {
  background-color: var(--color-light-gray);
  padding: var(--space-m);
  padding-top: var(--space-xs); /* leicht anderer Abstand oben */
}

/* Erklärung besteht aus gestapelten Elementen */
.erklaerung {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

/* Zeile mit Icon und Text nebeneinander */
.icon-text {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}

.icon-text img {
  width: 40px;
  height: auto;
}

/* LED-Darstellung mittig mit Abstand oben/unten */
.icon_led {
  display: flex;
  justify-content: center;
  margin-top: var(--space-l);
  margin-bottom: var(--space-s);
}

/* Responsive: ab 900px nebeneinander statt untereinander */
@media (min-width: 900px) {
  .info-container {
    flex-direction: row;
    align-items: flex-start;
  }

  .erklaerung,
  .info {
    flex: 1;
  }

  .erklaerung {
    margin-right: var(--space-s);
  }

  .info {
    margin-left: var(--space-s);
  }
}