html[data-trio-gestalt=lobby] .tm-held {
  grid-template-columns: minmax(0, 1fr) clamp(200px, 20vw, 260px);
  align-items: center;
  padding: clamp(32px, 3.4vw, 48px);
  background:
    linear-gradient(
      180deg,
      rgba(150, 172, 222, .04),
      rgba(150, 172, 222, 0) 40%),
    var(--fenster);
}
html[data-trio-gestalt=lobby] .tm-teamname {
  display: none;
}
html[data-trio-gestalt=lobby] .tm-held-bild {
  order: 2;
}
html[data-trio-gestalt=lobby] .tm-em-legende {
  display: none;
}
html[data-trio-gestalt=lobby] .tm-emblem::before {
  opacity: .7;
}
html[data-trio-gestalt=lobby] .tm-emblem.voll::before {
  opacity: 1;
}
html[data-trio-gestalt=lobby] .tm-banner-name {
  display: block;
  margin: 0 0 var(--s-4);
  color: var(--text);
  font: 800 clamp(40px, 5.5vw, 56px)/1.02 var(--sans);
  letter-spacing: -.045em;
  overflow-wrap: break-word;
  hyphens: auto;
  text-wrap: balance;
}
html[data-trio-gestalt=lobby] .tm-banner-name[hidden] {
  display: none;
}
html[data-trio-gestalt=lobby] .tm-zahl {
  font-weight: 700;
  letter-spacing: -.04em;
}
html[data-trio-gestalt=lobby] .tm-woche {
  position: relative;
}
html[data-trio-gestalt=lobby] .tm-woche::before {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 15px;
  height: 2px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--line-input) 60%, transparent);
}
html[data-trio-gestalt=lobby] .tm-woche li > i {
  background: var(--fenster);
}
html[data-trio-gestalt=lobby] .tm-woche .fertig > i {
  background: var(--verlauf);
}
html[data-trio-gestalt=lobby] .tm-team.alle-fertig .tm-held {
  box-shadow: var(--mulde), inset 0 0 0 1px rgba(76, 193, 130, .35);
}
html[data-trio-gestalt=lobby] .tm-held::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(
      100deg,
      rgba(56, 224, 255, 0) 35%,
      rgba(56, 224, 255, .14) 50%,
      rgba(168, 85, 247, 0) 65%);
}
html[data-trio-gestalt=lobby] .tm-mitglieder {
  gap: var(--s-4);
}
html[data-trio-gestalt=lobby] .tm-mitglied {
  justify-items: center;
  align-content: start;
  gap: var(--s-5);
  padding: var(--s-7) var(--s-5) var(--s-5);
  text-align: center;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--m) 10%, transparent),
      transparent 55%),
    var(--flaeche);
}
html[data-trio-gestalt=lobby] .tm-mitglied-kopf {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: var(--s-6);
}
html[data-trio-gestalt=lobby] .tm-name {
  justify-items: center;
}
html[data-trio-gestalt=lobby] .tm-name b {
  justify-content: center;
  font-size: var(--t-20);
}
html[data-trio-gestalt=lobby] .tm-name small {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px 6px;
}
html[data-trio-gestalt=lobby] .tm-rolle-name {
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--m) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--m) 40%, transparent);
  color: var(--m-text);
}
html[data-trio-gestalt=lobby] .tm-kaeufer {
  color: var(--text-3);
  font-family: var(--sans);
}
html[data-trio-gestalt=lobby] .tm-status {
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
  margin-top: var(--s-2);
}
html[data-trio-gestalt=lobby] .tm-prozent {
  font-size: var(--t-32);
  letter-spacing: -.03em;
}
html[data-trio-gestalt=lobby] .tm-prozent .ik {
  width: 22px;
  height: 22px;
}
html[data-trio-gestalt=lobby] .tm-prozent.tm-prozent-null {
  color: var(--text-3);
  font-size: var(--t-16);
  letter-spacing: 0;
}
html[data-trio-gestalt=lobby] .tm-mitglied-aktionen,
html[data-trio-gestalt=lobby] .tm-mitglied-aktion {
  justify-self: center;
  justify-content: center;
}
html[data-trio-gestalt=lobby] .tm-av.gross {
  --gr: 128px;
}
html[data-trio-gestalt=lobby] .tm-av.gross .tm-av-buchstabe {
  font-size: var(--t-32);
}
html[data-trio-gestalt=lobby] .tm-av.gross .tm-bogen-spur,
html[data-trio-gestalt=lobby] .tm-av.gross .tm-bogen {
  stroke-width: 5;
}
html[data-trio-gestalt=lobby] .tm-av.gross::before,
html[data-trio-gestalt=lobby] .tm-sitz-leer::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -22px;
  width: 150%;
  height: 30px;
  transform: translateX(-50%);
  border-radius: 50%;
  z-index: -1;
  background:
    radial-gradient(
      closest-side,
      color-mix(in srgb, var(--m) 45%, transparent),
      color-mix(in srgb, var(--m) 0%, transparent));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--m) 55%, transparent);
}
html[data-trio-gestalt=lobby] [data-zustand=fertig] .tm-av.gross::before {
  background:
    radial-gradient(
      closest-side,
      rgba(76, 193, 130, .5),
      rgba(76, 193, 130, 0));
  box-shadow: inset 0 0 0 1.5px rgba(76, 193, 130, .6);
}
html[data-trio-gestalt=lobby] [data-zustand=still] .tm-av.gross::before {
  background: none;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--m) 40%, transparent);
}
html[data-trio-gestalt=lobby] [data-zustand=offen] .tm-av.gross::before {
  background: none;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--m) 45%, transparent);
}
html[data-trio-gestalt=lobby] [data-zustand=offen] .tm-av.gross::after {
  display: none;
}
html[data-trio-gestalt=lobby] .tm-av.gross::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -12px;
  width: 190%;
  height: calc(100% + 52px);
  transform: translateX(-50%);
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(
      48% 100% at 50% 100%,
      color-mix(in srgb, var(--m) 26%, transparent),
      color-mix(in srgb, var(--m) 0%, transparent) 100%);
}
html[data-trio-gestalt=lobby] [data-zustand=fertig] .tm-av.gross::after {
  background:
    radial-gradient(
      48% 100% at 50% 100%,
      rgba(76, 193, 130, .26),
      rgba(76, 193, 130, 0) 100%);
}
html[data-trio-gestalt=lobby] [data-zustand=still] .tm-av.gross::after {
  display: none;
}
html[data-trio-gestalt=lobby] .tm-mitglied-kopf {
  position: relative;
  isolation: isolate;
}
html[data-trio-gestalt=lobby] .tm-sitz-leer {
  width: 128px;
  height: 128px;
  --m: rgba(150, 172, 222, .6);
}
html[data-trio-gestalt=lobby] .tm-sitz-leer::before {
  background: none;
  box-shadow: none;
  border: 1.5px dashed rgba(150, 172, 222, .45);
}
html[data-trio-gestalt=lobby] .tm-sitz-leer .ik {
  width: 32px;
  height: 32px;
}
html[data-trio-gestalt=lobby] .tm-rolle.stufe {
  min-height: 132px;
  padding: var(--s-6) var(--s-4) var(--s-7);
  justify-items: center;
  text-align: center;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--m) 12%, transparent),
      transparent 70%),
    var(--bg-2);
  isolation: isolate;
}
html[data-trio-gestalt=lobby] .tm-rolle.stufe b {
  padding-right: 0;
  font-size: var(--t-20);
}
html[data-trio-gestalt=lobby] .tm-rolle.stufe::before {
  left: 50%;
  top: auto;
  bottom: var(--s-4);
  width: 60%;
  height: 14px;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(
      closest-side,
      color-mix(in srgb, var(--m) 50%, transparent),
      transparent);
}
html[data-trio-gestalt=lobby] .tm-rolle.stufe:has(input:checked) {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--m) 22%, transparent),
      transparent 75%),
    var(--bg-3);
}
html[data-trio-gestalt=lobby] .tm-rolle.stufe.vergeben {
  background: transparent;
}
html[data-trio-gestalt=lobby] .tt-av {
  position: relative;
  width: 44px;
  height: 44px;
  font-size: var(--t-16);
  background:
    radial-gradient(
      closest-side,
      color-mix(in srgb, var(--f) 20%, var(--bg-3)) 82%,
      transparent 85%),
    conic-gradient(var(--f) calc(var(--p, 0) * 1turn), rgba(150, 172, 222, .16) 0);
}
html[data-trio-gestalt=lobby] .tt-mitglied.fertig .tt-av {
  background:
    radial-gradient(
      closest-side,
      color-mix(in srgb, var(--f) 20%, var(--bg-3)) 82%,
      transparent 85%),
    conic-gradient(var(--gut) calc(var(--p, 0) * 1turn), rgba(150, 172, 222, .16) 0);
}
html[data-trio-gestalt=lobby] .tt-av::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 130%;
  height: 12px;
  transform: translateX(-50%);
  border-radius: 50%;
  z-index: -1;
  background:
    radial-gradient(
      closest-side,
      color-mix(in srgb, var(--f) 45%, transparent),
      transparent);
}
html[data-trio-gestalt=lobby] .tt-mitglied {
  isolation: isolate;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--f) 10%, transparent),
      transparent 60%),
    var(--bg-2);
}
html[data-trio-gestalt=lobby] .tt-text small > span {
  white-space: nowrap;
}
html[data-trio-gestalt=lobby] .tt-fuellung {
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 calc(10% - 1.5px),
      rgba(4, 10, 20, .5) calc(10% - 1.5px) 10%),
    var(--f);
}
html[data-trio-gestalt=lobby] .tt-mitglied.fertig .tt-fuellung {
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 calc(10% - 1.5px),
      rgba(4, 10, 20, .5) calc(10% - 1.5px) 10%),
    var(--gut);
}
@container tt-team (min-width: 480px) {
  html[data-trio-gestalt=lobby] .tt-liste {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-3);
  }
  html[data-trio-gestalt=lobby] .tt-liste.mit-achse {
    padding-top: 0;
  }
  html[data-trio-gestalt=lobby] .tt-mitglied {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: var(--s-2);
    padding: var(--s-5) var(--s-3) var(--s-4);
    text-align: center;
    background:
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--f) 12%, transparent),
        transparent 60%),
      var(--bg-2);
  }
  html[data-trio-gestalt=lobby] .tt-av {
    width: 64px;
    height: 64px;
    font-size: var(--t-20);
  }
  html[data-trio-gestalt=lobby] .tt-av::after {
    bottom: -10px;
    height: 14px;
  }
  html[data-trio-gestalt=lobby] .tt-text {
    justify-items: center;
    margin-top: var(--s-2);
  }
  html[data-trio-gestalt=lobby] .tt-text b {
    max-width: 100%;
  }
  html[data-trio-gestalt=lobby] .tt-text small {
    text-align: center;
    line-height: 1.4;
  }
  html[data-trio-gestalt=lobby] .tt-marke-text {
    display: none;
  }
  html[data-trio-gestalt=lobby] .tt-balken {
    width: 100%;
    height: 6px;
    margin-top: var(--s-1);
  }
  html[data-trio-gestalt=lobby] .tt-prozent {
    font-size: var(--t-20);
  }
}
html[data-trio-gestalt=lobby] .tm-av.gross {
  transition: transform .2s cubic-bezier(.2, .7, .3, 1);
}
html[data-trio-gestalt=lobby] .tm-av.gross::before {
  transition: box-shadow .2s cubic-bezier(.2, .7, .3, 1), filter .2s cubic-bezier(.2, .7, .3, 1);
}
@media (hover: hover) and (pointer: fine) {
  html[data-trio-gestalt=lobby] .tm-mitglied:hover .tm-av.gross {
    transform: translateY(-3px);
  }
  html[data-trio-gestalt=lobby] .tm-mitglied:hover .tm-av.gross::before {
    filter: brightness(1.35);
  }
}
@media (prefers-reduced-motion: no-preference) {
  html[data-trio-gestalt=lobby] .tm-team:not(.auftritt) :is(.tm-mitglied, .tm-woche li > i, .tm-bogen) {
    animation: none;
  }
  html[data-trio-gestalt=lobby] .tm-team.auftritt .tm-woche li > i {
    animation: trio-tag .38s cubic-bezier(.16, 1, .3, 1) backwards;
    animation-delay: calc(var(--i, 0) * 45ms + 150ms);
  }
  html[data-trio-gestalt=lobby] .tm-team.auftritt .tm-mitglied {
    animation: tm-auf .5s cubic-bezier(.16, 1, .3, 1) backwards;
    animation-delay: calc(var(--n, 0) * 70ms + 250ms);
  }
  html[data-trio-gestalt=lobby] .tm-team.auftritt .tm-av.gross {
    animation: trio-tritt .5s cubic-bezier(.16, 1, .3, 1) backwards;
    animation-delay: calc(var(--n, 0) * 70ms + 300ms);
  }
  html[data-trio-gestalt=lobby] .tm-team.auftritt .tm-av.gross::before {
    animation: trio-sockel .45s cubic-bezier(.16, 1, .3, 1) backwards;
    animation-delay: calc(var(--n, 0) * 70ms + 260ms);
  }
  html[data-trio-gestalt=lobby] .tm-team.auftritt .tm-bogen {
    animation: tm-zeichnen .52s cubic-bezier(.16, 1, .3, 1) backwards;
    animation-delay: calc(var(--n, 0) * 70ms + 300ms);
  }
  html[data-trio-gestalt=lobby] .tm-team.auftritt.alle-fertig .tm-av.gross::after {
    animation: trio-welle .9s cubic-bezier(.2, .7, .3, 1) 1 backwards;
    animation-delay: calc(var(--n, 0) * 110ms + 1000ms);
  }
  html[data-trio-gestalt=lobby] .tm-team.auftritt.alle-fertig .tm-zahl > span {
    animation: trio-sprung .5s cubic-bezier(.2, .7, .3, 1) 1.15s 1 backwards;
  }
  html[data-trio-gestalt=lobby] .tm-team.auftritt.alle-fertig .tm-held::after {
    animation: trio-band .8s cubic-bezier(.16, 1, .3, 1) 1.1s 1 backwards;
  }
  html[data-trio-gestalt=lobby] .tm-av.gestupst::before {
    animation: trio-welle .8s cubic-bezier(.2, .7, .3, 1) 1;
  }
  html[data-trio-gestalt=lobby] .tt-mitglied.impuls .tt-av {
    animation: trio-ring .7s cubic-bezier(.2, .7, .3, 1) 1;
  }
  .trio-lobby-bild .trl-auftritt {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: trl-auftritt .6s cubic-bezier(.16, 1, .3, 1) backwards;
    animation-delay: calc(var(--i, 0) * 110ms + 150ms);
  }
}
@keyframes trio-tag {
  from {
    opacity: .15;
    transform: scale(.7);
  }
}
@keyframes trio-tritt {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }
}
@keyframes trio-sockel {
  from {
    opacity: 0;
    transform: translateX(-50%) scale(.55);
  }
}
@keyframes trio-welle {
  0% {
    opacity: .25;
  }
  45% {
    opacity: 1;
  }
}
@keyframes trio-sprung {
  50% {
    transform: scale(1.06);
  }
}
@keyframes trio-band {
  0% {
    opacity: 0;
    transform: translateX(-40%);
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(40%);
  }
}
@keyframes trio-ring {
  45% {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--f) 45%, transparent), 0 0 22px 4px color-mix(in srgb, var(--f) 40%, transparent);
  }
}
@keyframes trl-auftritt {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.94);
  }
}
@media (max-width: 900px) {
  html[data-trio-gestalt=lobby] .tm-held {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--s-5) var(--s-4);
  }
  html[data-trio-gestalt=lobby] .tm-held-text {
    display: block;
  }
  html[data-trio-gestalt=lobby] .tm-held-bild {
    position: absolute;
    top: var(--s-4);
    right: var(--s-4);
    width: 72px;
  }
  html[data-trio-gestalt=lobby] .tm-banner-name {
    font-size: var(--t-32);
    margin-bottom: var(--s-3);
    padding-right: 84px;
  }
  html[data-trio-gestalt=lobby] .tm-held :is(.tm-label, .tm-streak, .tm-streak-start) {
    padding-right: 84px;
  }
  html[data-trio-gestalt=lobby] .tm-woche::before {
    bottom: 15px;
  }
  html[data-trio-gestalt=lobby] .tm-av.gross::before,
  html[data-trio-gestalt=lobby] .tm-sitz-leer::before {
    width: 120%;
  }
  html[data-trio-gestalt=lobby] .tm-av.gross::after {
    width: 140%;
  }
  html[data-trio-gestalt=lobby] .tm-mitglied {
    justify-items: stretch;
    padding: var(--s-5) var(--s-4) var(--s-4);
    text-align: left;
  }
  html[data-trio-gestalt=lobby] .tm-mitglied-kopf {
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
    gap: var(--s-5);
  }
  html[data-trio-gestalt=lobby] .tm-name,
  html[data-trio-gestalt=lobby] .tm-status {
    justify-items: start;
    align-items: flex-start;
  }
  html[data-trio-gestalt=lobby] .tm-name b {
    justify-content: flex-start;
  }
  html[data-trio-gestalt=lobby] .tm-av.gross,
  html[data-trio-gestalt=lobby] .tm-sitz-leer {
    --gr: 88px;
    width: 88px;
    height: 88px;
  }
  html[data-trio-gestalt=lobby] .tm-av.gross .tm-av-buchstabe {
    font-size: 26px;
  }
  html[data-trio-gestalt=lobby] .tm-mitglied-aktionen,
  html[data-trio-gestalt=lobby] .tm-mitglied-aktion {
    justify-self: stretch;
  }
  html[data-trio-gestalt=lobby] .tm-mitglied-aktionen .knopf {
    flex: 1;
    justify-content: center;
  }
}
@media (max-width: 900px) {
  html[data-trio-gestalt=lobby] .tm-name small {
    justify-content: flex-start;
  }
  html[data-trio-gestalt=lobby] .tm-held {
    padding: var(--s-4) var(--s-4) var(--s-3);
  }
  html[data-trio-gestalt=lobby] .tm-streak-start > b {
    font-size: 22px;
  }
  html[data-trio-gestalt=lobby] .tm-streak-start {
    gap: var(--s-1);
    margin-top: var(--s-1);
  }
  html[data-trio-gestalt=lobby] .tm-held .tm-woche {
    margin-top: var(--s-3);
  }
  html[data-trio-gestalt=lobby] .tm-woche li > i {
    width: 28px;
    height: 28px;
  }
  html[data-trio-gestalt=lobby] .tm-woche::before {
    bottom: 13px;
  }
  html[data-trio-gestalt=lobby] .tm-aussage {
    font-size: 18px;
  }
  html[data-trio-gestalt=lobby] .tm-regel {
    margin-top: var(--s-1);
  }
}
html[data-trio-gestalt=lobby] .tm-start {
  background:
    linear-gradient(
      180deg,
      rgba(150, 172, 222, .05),
      rgba(150, 172, 222, 0) 50%),
    var(--fenster);
  box-shadow: var(--mulde);
}
html[data-trio-gestalt=lobby] .tm-start-bild {
  filter: drop-shadow(0 0 28px rgba(63, 141, 255, .25)) drop-shadow(0 12px 24px rgba(2, 6, 16, .55));
}