/* Shared role selection cards (register + early access) */
.role-buttons{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  margin-bottom:20px;
}
.role-buttons:has(.role-btn.active) .role-btn:not(.active){
  opacity:0.58;
  transform:none;
}
@media(max-width:480px){
  .role-buttons{ grid-template-columns:1fr; gap:8px; }
}
.role-btn{
  background:rgba(24,25,29,.8);
  backdrop-filter:blur(10px);
  border:2px solid #1f2230;
  color:#fff;
  padding:16px 14px;
  border-radius:16px;
  cursor:pointer;
  transition:all .35s cubic-bezier(.4,0,.2,1);
  font-size:14px;
  font-weight:600;
  text-align:left;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  gap:12px;
  min-height:0;
  opacity:0.88;
  margin:0;
}
.role-btn.active{
  opacity:1;
  transform:scale(1.01);
}
.role-icon-wrap{
  flex-shrink:0;
  width:44px;
  height:44px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.2rem;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  transition:background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.role-btn-body{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  padding-top:18px;
}
.role-check{
  position:absolute;
  top:10px;
  right:10px;
  font-size:1rem;
  opacity:0;
  transform:scale(0.6);
  transition:opacity .25s ease, transform .25s ease;
  color:#e94c5a;
  line-height:1;
}
.role-btn.active .role-check{
  opacity:1;
  transform:scale(1);
}
.role-teaser{
  font-size:0.72rem;
  color:rgba(207,210,220,.72);
  font-weight:400;
  line-height:1.35;
  display:block;
}
.role-btn::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 0%, rgba(233,76,90,.08), transparent 70%);
  opacity:0;
  transition:opacity .35s ease;
}
.role-btn:hover{
  border-color:rgba(233,76,90,.45);
  box-shadow:0 6px 24px rgba(0,0,0,.35);
  transform:translateY(-2px);
}
.role-btn:hover::before{ opacity:1; }
.role-btn.active{
  background:linear-gradient(135deg, rgba(233,76,90,.14), rgba(255,90,131,.1));
  border-color:#e94c5a;
  box-shadow:0 0 0 1px rgba(233,76,90,.35), 0 8px 28px rgba(0,0,0,.35);
  color:#fff;
}
.role-btn.active::before{
  opacity:1;
  background:radial-gradient(circle at 50% 0%, rgba(233,76,90,.15), transparent 70%);
}
.role-btn:has(input:focus-visible){
  outline:2px solid rgba(233,76,90,.65);
  outline-offset:3px;
}
.role-btn input[type="radio"]{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.role-label{
  font-size:14px;
  font-weight:700;
  letter-spacing:.2px;
  line-height:1.2;
}
.role-desc{
  font-size:0.7rem;
  color:rgba(207,210,220,.7);
  font-weight:400;
  line-height:1.4;
  display:block;
  max-width:100%;
  max-height:0;
  opacity:0;
  overflow:hidden;
  margin-top:0;
  transition:max-height .35s ease, opacity .3s ease, margin-top .3s ease;
}
.role-btn.active .role-desc{
  max-height:5rem;
  opacity:1;
  margin-top:6px;
}
.role-badge{
  position:absolute;
  top:8px;
  left:10px;
  display:inline-block;
  font-size:9.5px;
  font-weight:700;
  padding:3px 8px;
  border-radius:999px;
  letter-spacing:.05em;
  text-transform:uppercase;
  backdrop-filter:blur(6px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  z-index:2;
}
.role-badge.free{
  background:rgba(52,211,153,.16);
  color:#34d399;
  border:1px solid rgba(52,211,153,.32);
}
.role-badge.trial{
  background:rgba(245,158,11,.16);
  color:#fbbf24;
  border:1px solid rgba(245,158,11,.34);
}
.role-badge.studio-link{
  background:rgba(167,139,250,.16);
  color:#c4b5fd;
  border:1px solid rgba(167,139,250,.32);
}
.role-btn[data-role="kunde"]{ border-color:rgba(52,211,153,.22); }
.role-btn[data-role="kunde"]:hover{ border-color:rgba(52,211,153,.42); }
.role-btn[data-role="kunde"]:hover::before{
  background:radial-gradient(circle at 50% 0%, rgba(52,211,153,.12), transparent 70%);
}
.role-btn[data-role="kunde"].active{
  background:linear-gradient(135deg, rgba(52,211,153,.14), rgba(45,212,191,.08));
  border-color:#34d399;
  box-shadow:0 0 0 1px rgba(52,211,153,.4), 0 10px 32px rgba(0,0,0,.35);
}
.role-btn[data-role="kunde"].active::before{
  background:radial-gradient(circle at 50% 0%, rgba(52,211,153,.18), transparent 72%);
}
.role-btn[data-role="kunde"].active .role-check{ color:#6ee7b7; }
.role-btn[data-role="kunde"] .role-icon-wrap{ color:#6ee7b7; border-color:rgba(52,211,153,.25); background:rgba(52,211,153,.08); }
.role-btn[data-role="studio_artist"]:hover{ border-color:rgba(167,139,250,.4); }
.role-btn[data-role="studio_artist"]:hover::before{
  background:radial-gradient(circle at 50% 0%, rgba(167,139,250,.12), transparent 70%);
}
.role-btn[data-role="studio_artist"].active{
  background:linear-gradient(135deg, rgba(167,139,250,.16), rgba(139,92,246,.1));
  border-color:#a78bfa;
  box-shadow:0 0 0 1px rgba(167,139,250,.42), 0 10px 32px rgba(0,0,0,.35);
}
.role-btn[data-role="studio_artist"].active::before{
  background:radial-gradient(circle at 50% 0%, rgba(167,139,250,.2), transparent 72%);
}
.role-btn[data-role="studio_artist"]{ border-color:rgba(167,139,250,.22); }
.role-btn[data-role="studio_artist"] .role-icon-wrap{ color:#c4b5fd; border-color:rgba(167,139,250,.25); background:rgba(167,139,250,.08); }
.role-btn[data-role="studio_artist"].active .role-check{ color:#c4b5fd; }
.role-btn[data-role="solo_artist"]:hover{ border-color:rgba(45,212,191,.42); }
.role-btn[data-role="solo_artist"]:hover::before{
  background:radial-gradient(circle at 50% 0%, rgba(45,212,191,.12), transparent 70%);
}
.role-btn[data-role="solo_artist"].active{
  background:linear-gradient(135deg, rgba(45,212,191,.14), rgba(20,184,166,.1));
  border-color:#2dd4bf;
  box-shadow:0 0 0 1px rgba(45,212,191,.4), 0 10px 32px rgba(0,0,0,.35);
}
.role-btn[data-role="solo_artist"].active::before{
  background:radial-gradient(circle at 50% 0%, rgba(45,212,191,.18), transparent 72%);
}
.role-btn[data-role="solo_artist"]{ border-color:rgba(45,212,191,.22); }
.role-btn[data-role="solo_artist"] .role-icon-wrap{ color:#5eead4; border-color:rgba(45,212,191,.25); background:rgba(45,212,191,.08); }
.role-btn[data-role="solo_artist"].active .role-check{ color:#5eead4; }
.role-btn[data-role="studio"]:hover{ border-color:rgba(251,191,36,.45); }
.role-btn[data-role="studio"]:hover::before{
  background:radial-gradient(circle at 50% 0%, rgba(251,191,36,.12), transparent 70%);
}
.role-btn[data-role="studio"].active{
  background:linear-gradient(135deg, rgba(251,191,36,.14), rgba(245,158,11,.1));
  border-color:#fbbf24;
  box-shadow:0 0 0 1px rgba(251,191,36,.4), 0 10px 32px rgba(0,0,0,.35);
}
.role-btn[data-role="studio"].active::before{
  background:radial-gradient(circle at 50% 0%, rgba(251,191,36,.18), transparent 72%);
}
.role-btn[data-role="studio"]{ border-color:rgba(251,191,36,.24); }
.role-btn[data-role="studio"] .role-icon-wrap{ color:#fcd34d; border-color:rgba(251,191,36,.28); background:rgba(251,191,36,.08); }
.role-btn[data-role="studio"].active .role-check{ color:#fcd34d; }
.role-btn[data-role="azubi_artist"]:hover{ border-color:rgba(56,189,248,.42); }
.role-btn[data-role="azubi_artist"]:hover::before{
  background:radial-gradient(circle at 50% 0%, rgba(56,189,248,.12), transparent 70%);
}
.role-btn[data-role="azubi_artist"].active{
  background:linear-gradient(135deg, rgba(56,189,248,.14), rgba(14,165,233,.08));
  border-color:#38bdf8;
  box-shadow:0 0 0 1px rgba(56,189,248,.4), 0 10px 32px rgba(0,0,0,.35);
}
.role-btn[data-role="azubi_artist"].active::before{
  background:radial-gradient(circle at 50% 0%, rgba(56,189,248,.18), transparent 72%);
}
.role-btn[data-role="azubi_artist"]{ border-color:rgba(56,189,248,.22); }
.role-btn[data-role="azubi_artist"] .role-icon-wrap{ color:#7dd3fc; border-color:rgba(56,189,248,.25); background:rgba(56,189,248,.08); }
.role-btn[data-role="azubi_artist"].active .role-check{ color:#7dd3fc; }
@media (prefers-reduced-motion: reduce){
  .role-btn{ transition:border-color .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease; }
  .role-btn:hover, .role-btn.active{ transform:none; }
}