/* Zahlen - wie auf /noah, aber ohne Gridelements und ohne RTE-Klassen.
   Groessen aus dem Entwurf (Verhaeltnis Zahl : Text gemessen):
   Zahl 90px, blaue Zeile 27px, Text 20px/26px, Quellen 12px.
   Hintergrund standardmaessig weiss (hellblau per Schalter).
   Checkbox statt Select: in tt_content ist kein Platz mehr fuer weitere
   varchar-Spalten (MySQL-Limit fuer die Zeilengroesse). */

#content section.mantik-stats,
.mantik-stats { padding: 80px 0 0; margin: 0; }
.mantik-stats--blue { background: #ccecf9; }

.mantik-stats__items {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 32px;
}
.mantik-stats__items--1 { grid-template-columns: minmax(0, 1fr); }
.mantik-stats__items--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mantik-stats__items--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mantik-stats__item { margin: 0; padding: 0; text-align: center; }

#content .mantik-stats .mantik-stats__value,
.mantik-stats .mantik-stats__value {
  margin: 0; font-size: 5.625rem; line-height: 1.05; font-weight: 500; color: #009fe3;
}
#content .mantik-stats .mantik-stats__label,
.mantik-stats .mantik-stats__label {
  margin: .5rem 0 1.25rem; font-size: 1.6875rem; line-height: 1; font-weight: 500; color: #009fe3;
}
#content .mantik-stats .mantik-stats__text,
.mantik-stats .mantik-stats__text {
  margin: 0 auto; max-width: 26rem;
  font-size: 1.25rem; line-height: 1.3; color: #212529;
}

/* hochgestellte Ziffern kommen aus dem Editor (sup) */
.mantik-stats sup { font-size: .6em; line-height: 1; }
/* in den kleinen Quellen sonst zu winzig */
.mantik-stats__sources sup { font-size: .85em; }

/* RTE liefert p-Tags. Das Theme setzt "#content p { font-size: 20px }",
   darum Groesse hier direkt auf den Absaetzen setzen. */
#content .mantik-stats .mantik-stats__text p,
.mantik-stats .mantik-stats__text p { margin: 0; font-size: 1.25rem; line-height: 1.3; }
#content .mantik-stats .mantik-stats__sources li,
#content .mantik-stats .mantik-stats__sources p,
.mantik-stats .mantik-stats__sources li,
.mantik-stats .mantik-stats__sources p { margin: 0; font-size: .75rem; line-height: 1.6; }

/* Quellen klein: Block rechts aussen, aber Text linksbuendig (ca. 1/4 breit) */
.mantik-stats__sources {
  list-style: none; margin: 5rem 0 0 auto; padding: 0;
  width: 25%; min-width: 15rem; text-align: left;
  font-size: .75rem; line-height: 1.6; color: #212529;
}
.mantik-stats__sources li { margin: 0; }
#content .mantik-stats .mantik-stats__sources a,
.mantik-stats .mantik-stats__sources a { color: inherit; text-decoration: underline; }

@media (max-width: 991px) {
  #content section.mantik-stats, .mantik-stats { padding: 48px 0 0; }
  .mantik-stats__items,
  .mantik-stats__items--3,
  .mantik-stats__items--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
  #content .mantik-stats .mantik-stats__value,
  .mantik-stats .mantik-stats__value { font-size: 3.5rem; }
  #content .mantik-stats .mantik-stats__label,
  .mantik-stats .mantik-stats__label { font-size: 1.375rem; margin-bottom: .75rem; }
  #content .mantik-stats .mantik-stats__text,
  .mantik-stats .mantik-stats__text { font-size: 1.0625rem; }
  .mantik-stats__sources { margin: 1.5rem 0 0; width: auto; min-width: 0; }
}
@media (max-width: 575px) {
  .mantik-stats__items,
  .mantik-stats__items--3,
  .mantik-stats__items--4 { grid-template-columns: minmax(0, 1fr); }
}
