/* ==========================================================================
   Fundstellen im Antworttext
   --------------------------------------------------------------------------
   Gemeinsame Darstellung für alle Seiten, die eine bewertete Antwort zeigen:
   das Bewertungspaket (/bewertungspaket/paket.php) und die Rückmeldung im
   Test (/themen/run.php, /themen/result.php).

   Die Stelle, auf die sich die Bewertung eines Kriteriums stützt, wird im
   Antworttext eingefärbt – wie mit einem Textmarker. Die Farbe wiederholt
   sich beim zugehörigen Kriterium in der Liste darunter. Farben, Abstände
   und Radien kommen aus /design/chemie-ki.css.
   ========================================================================== */

.bp-answer {
  background: var(--bg-subtle);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  padding: 1.1rem 1.25rem;
  margin: .5rem 0 .6rem;
  font-size: .97rem;
  line-height: 1.75;
  color: var(--text);
  overflow-wrap: anywhere;
}
.bp-answer-hint {
  margin: 0 0 1.25rem;
  font-size: .84rem;
  color: var(--text-3);
}

/* Die Farben stammen aus dem Spektrum des Logos, stark aufgehellt, damit
   der Text darauf lesbar bleibt. */
.bp-mark-1 { --bp-mark: rgba(255, 204, 10, .45); --bp-mark-strong: #e0a800; }
.bp-mark-2 { --bp-mark: rgba(0, 208, 231, .38); --bp-mark-strong: #0097a9; }
.bp-mark-3 { --bp-mark: rgba(0, 168, 79, .30); --bp-mark-strong: #1a9a56; }
.bp-mark-4 { --bp-mark: rgba(227, 0, 135, .22); --bp-mark-strong: #c0006f; }
.bp-mark-5 { --bp-mark: rgba(240, 102, 31, .28); --bp-mark-strong: #d2560f; }
.bp-mark-6 { --bp-mark: rgba(114, 197, 249, .48); --bp-mark-strong: #2f7fbf; }

.bp-mark {
  /* Der Farbstreifen endet oben und unten kurz vor der Zeile – dadurch
     wirkt er wie ein gezogener Marker und nicht wie ein Farbkasten. */
  background: linear-gradient(
    to bottom,
    transparent 8%,
    var(--bp-mark) 8%,
    var(--bp-mark) 92%,
    transparent 92%
  );
  color: inherit;
  padding: 0 .08em;
  border-radius: .2em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: box-shadow var(--t-fast) var(--ease);
}
/* Teilpunkte: der Marker deckt die Zeile nur zur Hälfte ab. Nicht erfüllte
   Kriterien bekommen bloß eine gepunktete Linie – so bedeutet die volle
   Markierung immer „erfüllt". */
.bp-mark.is-part {
  background: linear-gradient(
    to bottom,
    transparent 52%,
    var(--bp-mark) 52%,
    var(--bp-mark) 92%,
    transparent 92%
  );
}
.bp-mark.is-none {
  background: none;
  border-bottom: 2px dotted var(--bp-mark-strong);
  border-radius: 0;
}
.bp-mark.is-active {
  box-shadow: 0 0 0 3px var(--bp-mark);
  border-radius: .2em;
}

.bp-mark-tag {
  display: inline-block;
  margin-left: .25em;
  font-size: .66em;
  font-weight: 700;
  letter-spacing: .02em;
  vertical-align: .45em;
  color: var(--bp-mark-strong);
}

/* --- Kriterien einer Bewertung ------------------------------------------
   Kompakte Zeile: Farbe, Kürzel, Begründung, Punkte. Die Begründung ist
   der eigentliche Inhalt und steht deshalb in der Textfarbe; Kriterienname
   und Hinweise treten als Zeile darunter zurück. */
.bp-crit-list { list-style: none; margin: 0; padding: 0; }
.bp-crit-item {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0 .6rem;
  padding: .4rem .6rem;
  border-radius: var(--radius-s);
  border: 1px solid transparent;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.bp-crit-item:hover,
.bp-crit-item:focus-visible {
  background: var(--bg-subtle);
  border-color: var(--hairline);
  outline: none;
}
.bp-crit-chip {
  width: .8rem;
  height: .8rem;
  border-radius: 4px;
  background: var(--bp-mark);
  box-shadow: inset 0 0 0 1px var(--bp-mark-strong);
  transform: translateY(.05rem);
}
.bp-crit-item.is-none .bp-crit-chip { background: transparent; }
.bp-crit-id {
  font-size: .82rem;
  font-weight: 650;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.bp-crit-body { min-width: 0; }
.bp-crit-judgement { margin: 0; font-size: .95rem; color: var(--text); }
.bp-crit-meta {
  margin: .05rem 0 0;
  font-size: .8rem;
  color: var(--text-3);
}
.bp-crit-points {
  font-size: .88rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text-2);
}
.bp-crit-item.is-full .bp-crit-points { color: var(--ok); }
.bp-crit-item.is-none .bp-crit-points { color: var(--text-3); }

/* Auf Telefonen stehen Kürzel und Punkte in einer Kopfzeile, die Begründung
   darunter über die volle Breite – sonst bleibt für sie ein schmaler
   Streifen mit vielen Umbrüchen. */
@media (max-width: 620px) {
  .bp-crit-item {
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-areas:
      "chip id     punkte"
      "body body   body";
    row-gap: .15rem;
  }
  .bp-crit-chip   { grid-area: chip; }
  .bp-crit-id     { grid-area: id; }
  .bp-crit-body   { grid-area: body; }
  .bp-crit-points { grid-area: punkte; justify-self: end; }
}