.exam-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, .8fr);
  align-items: center;
  gap: clamp(18px, 5vw, 64px);
  padding: 34px 0 42px;
}
.exam-hero h1 { font-size: clamp(34px, 4.5vw, 61px) }
.exam-note {
  margin: 0;
  border-radius: 12px;
  border-top: 5px solid var(--brand);
  padding: clamp(18px, 2.4vw, 28px);
  background: var(--soft-blue);
}
.exam-note h2 { margin: 6px 0 18px; font-size: clamp(23px, 2.3vw, 32px) }
.exam-note p { color: var(--quiet); font-size: 15px }
.exam-ratio { display: grid; grid-template-columns: 1fr 3fr; gap: 3px; height: 12px; border-radius: 4px; overflow: hidden }
.exam-ratio span:first-child { background: var(--blue) }
.exam-ratio span:last-child { background: var(--yellow) }
.exam-note dl { display: flex; justify-content: space-between; margin: 6px 0 15px; font-weight: 750 }
.exam-note dl div { display: flex; gap: 6px }
.exam-note dd { margin: 0 }
.exam-table { max-width: none; margin-bottom: 8px }
.exam-table th[scope=row] span { display: block; margin-bottom: 2px; font-size: 13px; color: var(--quiet); font-weight: 550 }
.exam-table :is(th,td):nth-child(n+2) { width: 15%; text-align: right; white-space: nowrap }
.exam-table sup { margin-left: 2px }
.exam-calculation { background: var(--soft-blue); border-left: 4px solid var(--brand); padding: 15px 18px; margin: 18px 0 24px; font-variant-numeric: tabular-nums }
.exam-calculation strong { display: inline-block }
#gewichtung > p { max-width: 74ch }
@media(max-width: 760px) {
  .exam-hero { grid-template-columns: 1fr }
  .exam-hero { padding: 24px 0 30px }
  .exam-table th[scope=row] { hyphens: auto; overflow-wrap: anywhere }
}