/* Wissenschaftsseite: Datenbilder.
   Grundsatz: Die Achse beginnt bei null. Betont wird über Farbe und Größe,
   nie über einen abgeschnittenen Maßstab. Jeder Wert steht zusätzlich als
   Zahl im Bild, damit die Farbe nie die einzige Information ist. */

.datenfigur{
  margin:0;
  display:flex;flex-direction:column;height:100%;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.5rem 1.4rem 1.2rem;
}
.datenfigur + .datenfigur{margin-top:1rem}
.datenfigur__kicker{
  font-size:.68rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 .9rem;
}
.datenfigur__kopf{margin-bottom:.1rem}
.datenfigur__wert{
  font-family:var(--sans);font-size:clamp(2.7rem,8vw,3.5rem);font-weight:700;
  letter-spacing:-.045em;line-height:1;color:#b1663e;
}
.datenfigur__wort{display:block;font-size:1.02rem;line-height:1.4;color:var(--ink);font-weight:600;max-width:30ch;margin-top:.45rem}
.datenfigur__satz{font-size:.92rem;line-height:1.6;color:var(--ink-2);margin:.6rem 0 0;max-width:38ch}
.datenfigur svg{display:block;width:100%;max-width:380px;height:auto;margin-top:auto;padding-top:1.4rem}
.datenfigur figcaption{
  font-size:.74rem;line-height:1.55;color:var(--ink-3);
  margin-top:1rem;padding-top:.7rem;border-top:1px solid var(--line);
}

/* Marken */
.dfig-achse{stroke:var(--line-strong);stroke-width:1}
.dfig-balken{fill:#93a492}
.dfig-balken--betont{fill:#b1663e}
.dfig-zahl{font-family:var(--sans);font-size:17px;font-weight:700;fill:var(--ink);text-anchor:middle}
.dfig-zahl--betont{fill:#b1663e}
.dfig-marke{font-family:var(--sans);font-size:11.5px;fill:var(--ink-3);text-anchor:middle}
.dfig-marke--links{text-anchor:start}
.dfig-person{fill:#d7ded5}
.dfig-person--betont{fill:#b1663e}

/* Zwei Figuren nebeneinander, sobald Platz da ist */
.datenfiguren{display:grid;gap:1rem}
@media(min-width:60em){
  .datenfiguren{grid-template-columns:1fr 1fr;align-items:stretch}
  .datenfiguren .datenfigur + .datenfigur{margin-top:0}
}

/* Kurzfassung ganz oben */
.kurzfassung{
  border:1px solid var(--line-strong);border-radius:var(--radius);
  background:var(--paper-alt);padding:1.6rem 1.5rem;margin-top:2.2rem;
}
.kurzfassung h2{
  font-family:var(--sans);font-size:1.15rem;font-weight:700;letter-spacing:-.02em;
  margin:0 0 1rem;color:var(--forest);
}
.kurzfassung ol{margin:0;padding-left:1.4rem;display:grid;gap:.75rem}
.kurzfassung li{font-size:1rem;line-height:1.6;color:var(--ink-2)}
.kurzfassung li strong{color:var(--ink)}
.kurzfassung__fuss{font-size:.82rem;color:var(--ink-3);margin:1.2rem 0 0}
@media(min-width:60em){
  .kurzfassung{padding:2rem 2.2rem}
  .kurzfassung ol{grid-template-columns:1fr 1fr;column-gap:2.5rem;gap:1rem 2.5rem}
}