/* Eigene Infografiken (templates/_grafik_figur.html, GRAFIKEN in tools/build.py): Abbildung im Text und Galerie auf /grafiken/.
   Nur auf Seiten mit Grafik geladen. Hochformat 2:3, im Text höchstens 26rem breit, damit der Lesefluss bleibt. */
.grafik { margin: 1.8rem auto !important; max-width: 26rem; }
.grafik-bild { display: block; border: 1px solid var(--linie); border-radius: 4px; overflow: hidden; background: var(--nebel); }
.grafik-bild img { display: block; width: 100%; height: auto; }
.grafik figcaption { margin-top: .5rem; font-size: .9rem; line-height: 1.45; color: var(--daemmerung); text-align: center; }

.grafik-galerie > * + * { margin-top: 2.4rem; }
.grafik-eintrag { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; scroll-margin-top: 1rem; }
@media (min-width: 40em) { .grafik-eintrag { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; } }
.grafik-eintrag .grafik-bild { max-width: 22rem; }
.grafik-text > * + * { margin-top: .7rem !important; }
.grafik-text h3 { margin: 0 !important; font-size: clamp(1.35rem, 3vw, 1.7rem); line-height: 1.1; overflow-wrap: break-word; }
.grafik-wege { display: flex; flex-wrap: wrap; gap: .5rem; }
.grafik-weg, .grafik-kopieren { padding: .45rem .8rem; border: 2px solid var(--kiefer); border-radius: 999px; font: 700 1.05rem/1.1 var(--display);
  text-decoration: none; color: var(--kiefer); background: none; min-height: 44px; box-sizing: border-box; display: inline-flex; align-items: center; cursor: pointer; }
.grafik-weg:hover, .grafik-kopieren:hover { background: var(--kiefer); color: var(--nebel); }
.grafik-kopieren[hidden] { display: none; }
.grafik-code-label { display: block; font-size: .9rem; color: var(--daemmerung); }
.grafik-code { display: block; width: 100%; box-sizing: border-box; font: .8rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  padding: .6rem; border: 1px solid var(--linie); border-radius: 4px; background: var(--papier); color: var(--granit); resize: vertical; }