/* Gestaltungslinie v2 – Ringe + Glow als Seitenschmuck */

.gl-rings {
  --gl-ring-stroke: 5px;
  position: relative;
  width: min(560px, 100%);
  aspect-ratio: 5 / 4;
  margin: 0;
  pointer-events: none;
}
.gl-ring {
  position: absolute;
  width: var(--s);
  aspect-ratio: 1;
  box-sizing: border-box;
  border: var(--gl-ring-stroke) solid currentColor;
  border-radius: 50%;
  background: transparent;
}
.gl-ring--cyan { color: #44bbc1; }
.gl-ring--navy { color: #293b49; }
.gl-ring--white { color: #fff; }
.gl-ring-a { --s: 38%; left: 8%; top: 42%; }
.gl-ring-b { --s: 48%; left: 46%; top: 8%; }
.gl-ring-c { --s: 16%; left: 28%; top: 12%; }
.gl-ring-d { --s: 13%; left: 22%; top: 78%; }

.has-ornament {
  position: relative;
  overflow: hidden;
}
.has-ornament > .shell,
.has-ornament > .ds-shell {
  position: relative;
  z-index: 1;
}

.gl-rings--hero {
  position: absolute;
  right: -6%;
  top: 6%;
  width: min(52%, 520px);
  z-index: 0;
}
.gl-rings--block {
  position: absolute;
  right: -4%;
  bottom: -20%;
  width: min(48%, 460px);
  z-index: 0;
  opacity: .72;
}

.gl-glow {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  filter: blur(14px);
}
.gl-glow img {
  display: block;
  height: 188px;
  width: auto;
  max-width: none;
  opacity: .88;
}
.gl-glow--hero {
  right: 12%;
  bottom: -8%;
}
.gl-glow--soft {
  left: -40px;
  top: 24px;
}
.gl-glow--behind {
  right: 2%;
  bottom: -10%;
  opacity: .7;
}
.gl-glow--bar {
  width: 180px;
  height: 28px;
  border-radius: 999px;
  background: #44bbc1;
  filter: blur(14px);
  right: 8%;
  top: 18%;
}