.pfadweber-result {
  --result-forest: #15251f;
  --result-ink: #e7f1eb;
  --result-muted: #b6cfc0;
  --result-gold: #dfbd7d;
  --result-violet: #b8ace0;
  --result-coral: #e5a58e;
  margin: 1rem 0;
  max-width: 32rem;
  padding: 1rem 1.1rem .85rem;
  background: var(--result-forest);
  color: var(--result-ink);
  border-radius: 12px;
}
.pfadweber-result-endpoints { display: flex; justify-content: space-between; gap: 1.5rem; font-weight: 600; line-height: 1.35; }
.pfadweber-result-endpoints > span { max-width: 46%; overflow-wrap: anywhere; }
.pfadweber-result-endpoints > span:last-child { text-align: right; }
.pfadweber-result-map { display: block; width: 100%; height: auto; margin: .15rem 0 .35rem; overflow: visible; }
.pfadweber-result-contours { stroke: #355747; stroke-width: 1; }
.pfadweber-result-route { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.pfadweber-result-route-1 { color: var(--result-gold); }
.pfadweber-result-route-2 { color: var(--result-violet); }
.pfadweber-result-route-extra { color: var(--result-coral); }
.pfadweber-result-ribbon { stroke: currentColor; stroke-width: 8; stroke-opacity: .16; }
.pfadweber-result-thread { stroke: currentColor; stroke-width: 2.5; }
.pfadweber-result-route-2 .pfadweber-result-thread { stroke-dasharray: 5 5; }
.pfadweber-result-stop { fill: var(--result-forest); stroke: currentColor; stroke-width: 2.5; }
.pfadweber-result-endpoint { fill: var(--result-forest); stroke: #c9e8d2; stroke-width: 2; }
.pfadweber-result-endpoint > :nth-child(even) { fill: #c9e8d2; stroke: none; }
.pfadweber-result figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; font-size: .8rem; line-height: 1.5; color: var(--result-muted); }
.pfadweber-result-keys { display: flex; flex-wrap: wrap; gap: .35rem 1rem; }
.pfadweber-result-key { display: inline-flex; align-items: center; gap: .4rem; }
.pfadweber-result-key::before { content: ''; width: .5rem; height: .5rem; border: 1px solid currentColor; flex-shrink: 0; }
.pfadweber-result-key-1 { color: var(--result-gold); }
.pfadweber-result-key-1::before { border-radius: 50%; }
.pfadweber-result-key-2 { color: var(--result-violet); }
.pfadweber-result-key-2::before { transform: rotate(45deg); }
.pfadweber-result-key-extra { color: var(--result-coral); }
@media (max-width: 420px) {
  .pfadweber-result { padding: .85rem; }
  .pfadweber-result figcaption { flex-direction: column; }
}
