:root .sig--br-verein { container-type: inline-size; display: grid; place-items: center; padding: clamp(16px, 3vw, 34px); background: radial-gradient(70% 60% at 15% 10%, rgba(161, 0, 255, .22), transparent 65%), radial-gradient(60% 60% at 100% 100%, rgba(227, 184, 255, .1), transparent 70%), #1c1920; }
:root .sig--br-verein svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:root .sig--br-verein .brvr { width: 100%; max-width: 640px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px; transition: opacity .6s; }
:root .sig--br-verein .brvr.out { opacity: 0; }
:root .sig--br-verein .brvr__p { position: relative; padding: 16px; border-radius: 18px; background: #f7f5f9; color: #1f1b24; box-shadow: 0 26px 50px -26px rgba(0, 0, 0, .9); overflow: hidden; }
:root .sig--br-verein .brvr__cal { grid-row: span 2; }
:root .sig--br-verein .brvr__h { display: flex; align-items: center; gap: 8px; font: 600 12px/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: #5f566a; }
:root .sig--br-verein .brvr__h svg { width: 17px; height: 17px; color: #7a00c2; }
:root .sig--br-verein .brvr__org { margin: 10px 0 12px; font: 600 18px/1.2 var(--f-display); letter-spacing: -.02em; }
:root .sig--br-verein .brvr__ev { display: grid; gap: 8px; }
:root .sig--br-verein .brvr__ev li { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; padding: 10px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px #e8e3ec; opacity: 0; transform: translateX(-16px); transition: opacity .5s, transform .8s var(--ease-out), box-shadow .5s; }
:root .sig--br-verein .brvr.s1 .brvr__ev li { opacity: 1; transform: none; }
:root .sig--br-verein .brvr.s1 .brvr__ev li:nth-child(2) { transition-delay: .12s; }
:root .sig--br-verein .brvr.s1 .brvr__ev li:nth-child(3) { transition-delay: .24s; }
:root .sig--br-verein .brvr__date { width: 46px; height: 46px; border-radius: 12px; display: grid; place-content: center; text-align: center; background: #f1e4fb; color: #5a0090; font: 600 17px/1 var(--f-display); }
:root .sig--br-verein .brvr__date small { display: block; font: 500 10.5px/1.2 var(--f-display); text-transform: uppercase; letter-spacing: .06em; color: #6d3b93; }
:root .sig--br-verein .brvr__t { font: 600 13.5px/1.3 var(--f-display); }
:root .sig--br-verein .brvr__ev li.hi { box-shadow: inset 0 0 0 2px #a100ff; }
:root .sig--br-verein .brvr__go { grid-column: 2; justify-self: start; position: relative; display: inline-grid; padding: 7px 12px; border-radius: 999px; background: #a100ff; color: #fff; font: 600 12px/1 var(--f-display); transition: background .5s, transform .2s; }
:root .sig--br-verein .brvr__go > * { grid-area: 1 / 1; transition: opacity .4s, transform .5s var(--ease-out); }
:root .sig--br-verein .brvr__done { display: inline-flex; align-items: center; gap: 5px; opacity: 0; transform: translateY(6px); }
:root .sig--br-verein .brvr__done svg { width: 14px; height: 14px; stroke-width: 2.6; }
:root .sig--br-verein .brvr.s2 .brvr__go { background: #1f1b24; }
:root .sig--br-verein .brvr.s2 .brvr__go > span:first-child { opacity: 0; transform: translateY(-6px); }
:root .sig--br-verein .brvr.s2 .brvr__done { opacity: 1; transform: none; }
:root .sig--br-verein .brvr__mem { opacity: .35; transition: opacity .6s; }
:root .sig--br-verein .brvr.s3 .brvr__mem { opacity: 1; }
:root .sig--br-verein .brvr__av { display: flex; flex-wrap: wrap; margin: 14px 0 12px 6px; }
:root .sig--br-verein .brvr__av span { width: 40px; height: 40px; margin-left: -8px; border-radius: 50%; display: grid; place-items: center; border: 3px solid #f7f5f9; font: 600 12.5px/1 var(--f-display); color: #fff; background: hsl(calc(270 + var(--i) * 22) 52% calc(36% + var(--i) * 2%)); opacity: 0; transform: scale(.4); transition: opacity .35s, transform .6s var(--ease-back); }
:root .sig--br-verein .brvr__av span.on { opacity: 1; transform: none; }
:root .sig--br-verein .brvr__welc { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 10px; background: #efe3f9; color: #4a0078; font: 500 12.5px/1.2 var(--f-display); opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .7s var(--ease-out); }
:root .sig--br-verein .brvr__welc svg { width: 15px; height: 15px; stroke-width: 2.4; }
:root .sig--br-verein .brvr.s4 .brvr__welc { opacity: 1; transform: none; }
:root .sig--br-verein .brvr__don { opacity: .35; transition: opacity .6s; }
:root .sig--br-verein .brvr.s4 .brvr__don { opacity: 1; }
:root .sig--br-verein .brvr__goal { display: block; margin: 10px 0 12px; font: 600 14.5px/1.3 var(--f-display); }
:root .sig--br-verein .brvr__bar { position: relative; height: 12px; border-radius: 999px; background: #ebe5f0; }
:root .sig--br-verein .brvr__bar i { --f: .7; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--f) * 100%); border-radius: inherit; background: linear-gradient(90deg, #7a00c2, #a100ff 70%, #c56bff); transform: scaleX(0); transform-origin: left; transition: transform 2.2s cubic-bezier(.16, 1, .3, 1); overflow: hidden; }
:root .sig--br-verein .brvr__bar i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); transform: translateX(-100%); }
:root .sig--br-verein .brvr.s5 .brvr__bar i { transform: scaleX(1); }
:root .sig--br-verein .brvr.s5 .brvr__bar i::after { animation: brvrShine 1.6s 1.6s ease-in-out; }
@keyframes brvrShine{ to { transform: translateX(100%); } }
:root .sig--br-verein .brvr__hearts { position: absolute; left: 0; top: -2px; width: calc(var(--f, .7) * 100%); height: 0; }
:root .sig--br-verein .brvr__hearts em { position: absolute; bottom: 0; width: 10px; height: 9px; background: #a100ff; clip-path: path("M5 9C2 6.8 0 5 0 2.7A2.5 2.5 0 0 1 5 1.6 2.5 2.5 0 0 1 10 2.7C10 5 8 6.8 5 9z"); opacity: 0; }
:root .sig--br-verein .brvr__hearts em:nth-child(1) { left: 20%; }
:root .sig--br-verein .brvr__hearts em:nth-child(2) { left: 45%; }
:root .sig--br-verein .brvr__hearts em:nth-child(3) { left: 62%; }
:root .sig--br-verein .brvr__hearts em:nth-child(4) { left: 74%; }
:root .sig--br-verein .brvr__hearts em:nth-child(5) { left: 86%; }
:root .sig--br-verein .brvr.s5 .brvr__hearts em { animation: brvrHeart 2.4s var(--ease-out) forwards; }
:root .sig--br-verein .brvr.s5 .brvr__hearts em:nth-child(2) { animation-delay: .3s; }
:root .sig--br-verein .brvr.s5 .brvr__hearts em:nth-child(3) { animation-delay: .7s; }
:root .sig--br-verein .brvr.s5 .brvr__hearts em:nth-child(4) { animation-delay: 1.1s; }
:root .sig--br-verein .brvr.s5 .brvr__hearts em:nth-child(5) { animation-delay: 1.5s; }
@keyframes brvrHeart{ 0% { opacity: 0; transform: translateY(0) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-34px) scale(1.1); } }
:root .sig--br-verein .brvr__state { display: flex; justify-content: space-between; margin-top: 10px; font: 500 12px/1 var(--f-display); color: #5f566a; }
:root .sig--br-verein .brvr__fast { color: #5a0090; opacity: 0; transition: opacity .6s 1.8s; }
:root .sig--br-verein .brvr.s5 .brvr__fast { opacity: 1; }
@container (max-width: 500px){:root .sig--br-verein .brvr { grid-template-columns: 1fr 1fr; gap: 8px; }
:root .sig--br-verein .brvr__cal { grid-column: 1 / -1; grid-row: auto; }
:root .sig--br-verein .brvr__ev li:nth-child(3) { display: none; }
:root .sig--br-verein .brvr__p { padding: 12px; }
:root .sig--br-verein .brvr__av span { width: 30px; height: 30px; font-size: 10px; border-width: 2px; }
:root .sig--br-verein .brvr__av span:nth-child(n+5) { display: none; }
:root .sig--br-verein .brvr__welc span, :root .sig--br-verein .brvr__state span:first-child { display: none; }
:root .sig--br-verein .brvr__goal { font-size: 12.5px; }
:root .sig--br-verein .brvr__org { margin: 8px 0; font-size: 16px; }

}
:root .scr__mm > .sig--br-verein { padding: 10px; }
:root .scr__mm > .sig--br-verein .brvr { grid-template-columns: 1fr; }
:root .scr__mm > .sig--br-verein .brvr__mem, :root .scr__mm > .sig--br-verein .brvr__don, :root .scr__mm > .sig--br-verein .brvr__org, :root .scr__mm > .sig--br-verein .brvr__ev li:nth-child(n+3) { display: none; }
:root .scr__mm > .sig--br-verein .brvr__p { padding: 10px; }
:root .scr__mm > .sig--br-verein .brvr__ev { margin-top: 8px; gap: 6px; }
:root .scr__mm > .sig--br-verein .brvr__ev li { padding: 7px; }
:root .scr__mm > .sig--br-verein .brvr__date { width: 38px; height: 38px; font-size: 14px; }