/* surrobonds: redaktionelle Feinzeichnung der öffentlichen Startseite.
   Nur Statement und Themenmotiv; alle anderen Seiten bleiben unverändert. */
.statement-band .statement-mark {
  font-size: clamp(18px, 1.55vw, 21px);
  line-height: 1.4;
  letter-spacing: -.015em;
  max-width: 26ch;
}
.statement-band .statement-mark::before {
  flex-basis: 34px;
}
.topics .topics-connection {
  width: min(100%, 355px);
  margin-top: clamp(28px, 3vw, 45px);
  color: #315649;
  pointer-events: none;
}
.topics .topics-connection svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.topics .topics-connection__arc,
.topics .topics-connection__bridge {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.topics .topics-connection__arc--sage { stroke: #789083; }
.topics .topics-connection__arc--inner { stroke: #526f61; }
.topics .topics-connection__bridge { stroke: #9a654d; stroke-width: 1.4; }
.topics .topics-connection__dot { fill: #ab604a; }
/* JS is optional: without it the complete illustration is immediately visible. */
@media (prefers-reduced-motion: no-preference) {
  .topics .topics-connection--animate .topics-connection__draw {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
  }
  .topics .topics-connection--animate.topics-connection--visible .topics-connection__draw {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1.55s cubic-bezier(.23,.71,.34,1);
  }
  .topics .topics-connection--animate.topics-connection--visible .topics-connection__draw:nth-child(2) { transition-delay: .14s; }
  .topics .topics-connection--animate.topics-connection--visible .topics-connection__draw:nth-child(3) { transition-delay: .22s; }
  .topics .topics-connection--animate.topics-connection--visible .topics-connection__draw:nth-child(4) { transition-delay: .3s; }
  .topics .topics-connection--animate.topics-connection--visible .topics-connection__draw:nth-child(5) { transition-delay: .43s; }
  .topics .topics-connection--animate .topics-connection__dot { opacity: 0; }
  .topics .topics-connection--animate.topics-connection--visible .topics-connection__dot {
    opacity: 1;
    transition: opacity .45s ease 1.45s;
  }
}
@media (max-width: 780px) {
  .topics .topics-connection {
    width: min(78%, 295px);
    margin-top: 22px;
  }
}
@media (max-width: 420px) {
  .topics .topics-connection { width: min(88%, 250px); margin-top: 20px; }
  .statement-band .statement-mark { font-size: 18px; }
}