/* Text mit Bild und Zahlen - Abschnitt "Weil jede 12. Person von Armut
   betroffen ist". Masse direkt aus Figma uebernommen:
   Inhaltsbreite 1280px, Spalten je 600px, Abstand 80px, Textspalte
   vertikal mit 24px Abstand. */

/* Feine Linien oben und unten ueber die ganze Breite, 80px Innenabstand.
   Theme setzt section { padding: 120px 0 } ueber #content - darum doppelt. */
.mantik-facts,
#content section.mantik-facts {
  position: relative;
  margin: 0; padding: 80px 0;
  border-top: 1px solid #ededed; border-bottom: 1px solid #ededed;
}

/* Schneeflocke im Hintergrund: hellblau, 30 Grad gedreht, unten links
   unter dem Bild, ragt ganz ueber die untere Linie (nicht abgeschnitten).
   Frontend.js verschiebt sie beim Scrollen leicht (--mantik-facts-flake-y).
   Bei Bild rechts gespiegelt auf die rechte Seite. */
.mantik-facts > .container { position: relative; }
.mantik-facts > .container::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: -16px; bottom: -165px;
  width: 190px; height: 190px;
  background: url("/Images/schneeflocke.svg") center / contain no-repeat;
  opacity: .2;
  transform: translateY(var(--mantik-facts-flake-y, 0px)) rotate(30deg);
  will-change: transform;
}
.mantik-facts--media-right > .container::before { left: auto; right: -16px; }
.mantik-facts__inner { position: relative; z-index: 1; }

.mantik-facts__inner {
  display: flex; align-items: center; gap: 80px;
}
.mantik-facts__media,
.mantik-facts__content { flex: 1 1 0; min-width: 0; }

.mantik-facts--media-right .mantik-facts__inner { flex-direction: row-reverse; }

.mantik-facts__media img { display: block; width: 100%; height: auto; }

.mantik-facts__content {
  display: flex; flex-direction: column; gap: 24px;
}

/* Titel: 36px / 130% / #009FE3 - Theme faerbt h2 ueber ID-Selektoren,
   deshalb die Farbe doppelt setzen. */
.mantik-facts .mantik-facts__header,
#content .mantik-facts .mantik-facts__header {
  margin: 0; font-size: 2.25rem; line-height: 1.3; font-weight: 500;
  color: #009fe3;
}

.mantik-facts .mantik-facts__text,
#content .mantik-facts .mantik-facts__text {
  font-size: 1rem; line-height: 1.5; color: #212529;
}
.mantik-facts__text p { margin: 0; }

.mantik-facts__numbers {
  display: flex; gap: 40px; list-style: none; margin: 0; padding: 0;
}
.mantik-facts__number { display: flex; flex-direction: column; gap: .35rem; }

/* Zahl: 32px / 120% / #212529 */
.mantik-facts .mantik-facts__value,
#content .mantik-facts .mantik-facts__value {
  font-size: 2rem; line-height: 1.2; font-weight: 500; color: #212529;
}
.mantik-facts .mantik-facts__caption,
#content .mantik-facts .mantik-facts__caption {
  font-size: 1rem; line-height: 1.5; color: #212529;
}

/* Button: gleiche blaue Pille wie im Menue (ohne Herz). */
#content .mantik-facts .mantik-facts__button,
.mantik-facts .mantik-facts__button {
  display: inline-flex; align-items: center; align-self: flex-start; height: 46px; padding: 0 1.5rem;
  border-radius: 2rem; background: #009fe3; color: #fff; text-decoration: none;
  font-size: 1rem; line-height: 1.5; font-weight: 500; transition: background-color .2s ease;
}
#content .mantik-facts .mantik-facts__button:hover,
#content .mantik-facts .mantik-facts__button:focus,
.mantik-facts .mantik-facts__button:hover { background: #0089c4; color: #fff; text-decoration: none; }

@media (max-width: 991px) {
  .mantik-facts,
  #content section.mantik-facts { padding: 48px 0; }
  .mantik-facts > .container::before { width: 140px; height: 140px; bottom: -110px; left: -24px; }
  .mantik-facts--media-right > .container::before { left: -24px; right: auto; }
  .mantik-facts__inner,
  .mantik-facts--media-right .mantik-facts__inner {
    flex-direction: column; align-items: stretch; gap: 1.5rem;
  }
  .mantik-facts .mantik-facts__header,
  #content .mantik-facts .mantik-facts__header { font-size: 1.75rem; }
  /* Zahlen duerfen umbrechen, sonst quetschen sie sich auf dem Handy */
  .mantik-facts__numbers { flex-wrap: wrap; gap: 1.5rem 2.5rem; }
}