/* ------------------------------------------------- /bms/chemie (Präfix bch-)
   Fachseite Chemie: Ring „Anteil am BMS“ mit Legende, Beispielfrage mit
   pH-Skala. Themen-Kacheln kommen aus seite-bms-fach.css (bf-). */

.bch-bildtitel { display: block; margin: 0 0 14px; font: 700 12.5px/1.3 "Work Sans", sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--akzent); }

/* Ring und Legende */
.bch-anteil { margin: 8px 0 36px; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 44px; align-items: center; padding: 32px 36px; border-radius: 22px; background: var(--r-hell); }
.bch-ring { display: block; width: 200px; height: 200px; }
.bch-ring circle { fill: none; stroke-width: 26; }
.bch-ring .spur { stroke: var(--r-weiss); }
.bch-ring .zahl { font: 800 54px/1 "Manrope", sans-serif; letter-spacing: -0.05em; fill: var(--r-kopf); }
.bch-ring .klein { font: 400 13px/1 "Work Sans", sans-serif; fill: var(--r-leise); }
.bch-s-chemie { stroke: var(--akzent); background: var(--akzent); }
.bch-s-biologie { stroke: color-mix(in srgb, var(--akzent) 45%, var(--r-weiss)); background: color-mix(in srgb, var(--akzent) 45%, var(--r-weiss)); }
.bch-s-physik { stroke: color-mix(in srgb, var(--akzent) 30%, var(--r-weiss)); background: color-mix(in srgb, var(--akzent) 30%, var(--r-weiss)); }
.bch-s-mathematik { stroke: color-mix(in srgb, var(--akzent) 18%, var(--r-weiss)); background: color-mix(in srgb, var(--akzent) 18%, var(--r-weiss)); }
.bch-legende { list-style: none; margin: 0; padding: 0; }
.r-band .bch-legende li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto 64px; gap: 14px; align-items: center; padding: 11px 0; border-top: 1px solid var(--r-linie); font-size: 17px; line-height: 1.3; }
.r-band .bch-legende li:first-child { border-top: 0; }
.bch-punkt { width: 14px; height: 14px; border-radius: 50%; }
.r-band .bch-legende a { color: var(--r-kopf); font-weight: 500; }
.bch-l-zahl { font: 800 21px/1 "Manrope", sans-serif; letter-spacing: -0.03em; color: var(--r-kopf); font-variant-numeric: tabular-nums; }
.bch-l-anteil { font: 600 14px/1 "Work Sans", sans-serif; color: var(--r-leise); text-align: right; font-variant-numeric: tabular-nums; }
.r-band .bch-legende li.aktiv .bch-l-zahl, .r-band .bch-legende li.aktiv .bch-l-anteil { color: var(--akzent-tief); }
.r-band .bch-l-fuss { margin: 10px 0 0; font-size: 13px; line-height: 1.4; color: var(--r-leise); text-align: right; }

/* Beispielfrage */
.r-band .r-testblatt .bch-stamm { margin: 0 0 20px; font: 600 19px/1.5 "Work Sans", sans-serif; color: #1d1916; }

/* pH-Skala */
.bch-ph { margin: 40px auto 34px; max-width: 860px; padding: 26px 30px 22px; border-radius: 22px; background: var(--r-hell); text-align: center; }
.bch-ph-skala { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); column-gap: 4px; }
.bch-ph-bogen { grid-row: 1; grid-column: 3 / 6; position: relative; height: 12px; margin: 30px calc(50% / 3) 8px; border: 2px solid var(--akzent); border-bottom: 0; border-radius: 8px 8px 0 0; }
.bch-ph-bogen span { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); white-space: nowrap; font: 700 12.5px/1.2 "Work Sans", sans-serif; color: var(--akzent-tief); }
.bch-ph-zelle { grid-row: 2; min-width: 0; }
.bch-ph-zelle b { display: block; margin-bottom: 8px; font: 800 17px/1 "Manrope", sans-serif; color: var(--r-kopf); font-variant-numeric: tabular-nums; }
.bch-ph-zelle i { display: block; height: 24px; border-radius: 6px; background: var(--f); }
.bch-ph-zelle span { display: block; margin-top: 8px; font: 500 11.5px/1 "Work Sans", sans-serif; color: var(--r-leise); white-space: nowrap; }
.bch-ph-achse { display: flex; justify-content: space-between; margin-top: 14px; font: 700 12px/1.2 "Work Sans", sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: var(--r-leise); }
.r-band .bch-ph-legende { margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--r-leise); }

@media (max-width: 760px) {
  .bch-anteil { grid-template-columns: 1fr; justify-items: center; gap: 20px; padding: 26px 20px; }
  .bch-anteil > div { width: 100%; }
  .bch-anteil .bch-bildtitel { text-align: center; }
  .r-band .bch-legende li { grid-template-columns: 12px minmax(0, 1fr) auto 56px; gap: 10px; font-size: 16px; }
  .r-band .r-testblatt .bch-stamm { font-size: 17px; }
  .bch-ph { padding: 22px 12px 18px; }
  .bch-ph-skala { column-gap: 2px; }
  .bch-ph-zelle b { font-size: 12px; }
  .bch-ph-zelle i { height: 20px; border-radius: 4px; }
  .bch-ph-zelle span { display: none; }
  .bch-ph-zelle:nth-child(2) span, .bch-ph-zelle:nth-child(9) span { display: block; font-size: 10.5px; }
  .bch-ph-bogen { margin-top: 28px; }
  .bch-ph-bogen span { font-size: 11.5px; }
  .bch-ph-achse { font-size: 10.5px; }
}

/* Hoch- und Tiefstellung ohne Zeilensprung (nur auf dieser Seite gesetzt) */
sup.bch, sub.bch { font-size: 0.7em; line-height: 0; position: relative; vertical-align: baseline; }
sup.bch { top: -0.5em; }
sub.bch { top: 0.25em; }