













pb-talent-card { display: block; min-width: 0; }

.pb-fcard {
  display: flex;
  flex-direction: column;
  padding: var(--sp-2);          
  background: var(--surface);
  border: none;
  border-radius: var(--r-lg);
  font-family: var(--font-display); 
  cursor: pointer;
  transition:
    transform var(--dur) var(--ease),
    background var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.pb-fcard:hover {
  transform: translateY(-0.125rem);
  background: var(--surface-bright); 
  border-color: var(--border-strong);
}



.pb-fcard-header {
  position: relative;
  height: 3.25rem;
  border-radius: var(--r-md);
  background:
    var(--cat-grad,
      radial-gradient(130% 130% at 80% 12%, #e4dcec 0%, transparent 55%),
      linear-gradient(120deg, #a6c0b4, #aeabde));
  overflow: hidden;
}
[data-theme="dark"] .pb-fcard-header { filter: saturate(0.94) brightness(0.82); }




.pb-fcard-header.has-img {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
[data-theme="dark"] .pb-fcard-header.has-img { filter: none; }


.pb-fcard-body {
  flex: 1;                      
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: 0 var(--sp-2) var(--sp-2);   
}



.pb-star {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  z-index: 1;
  flex: 0 0 auto;
  width: 1.875rem;
  height: 1.875rem;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  color: #1a1a16;
  background: rgba(255, 255, 255, 0.55);
  
  opacity: 0;
  

  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              opacity var(--dur) var(--ease);
}
















.pb-fcard:hover .pb-star,
.pb-star:focus-visible,
.pb-star.on {
  opacity: 1;
  backdrop-filter: blur(2px);
}
.pb-star:hover { background: rgba(255, 255, 255, 0.78); }



@media (hover: none) {
  .pb-star { opacity: 1; }
}


.pb-star svg { width: 17px; height: 17px; }
.pb-star.on { color: #1a1a16; background: rgba(255, 255, 255, 0.85); }



.pb-fcard-body .pb-avatar {
  position: relative;   
  z-index: 1;
  margin-top: -1.6rem;
  box-shadow: 0 0 0 0.1875rem var(--surface);
}





.pb-catgrad[data-cat="3D Künstler"] {
  --cat-grad: radial-gradient(140% 150% at 22% 18%, #7fd49a 0%, #e6ddec 52%, #aeabde 100%);
}
.pb-catgrad[data-cat="Account Manager"] {
  --cat-grad: radial-gradient(140% 150% at 22% 18%, #aeabde 0%, #e6ddec 52%, #f2cd78 100%);
}
.pb-catgrad[data-cat="AI Visual Artist"] {
  --cat-grad: radial-gradient(140% 150% at 22% 18%, #f2cd78 0%, #aeabde 52%, #7fd49a 100%);
}
.pb-catgrad[data-cat="Art Direktor"] {
  --cat-grad: radial-gradient(140% 150% at 22% 18%, #f2cd78 0%, #f0763c 52%, #ef8f66 100%);
}
.pb-catgrad[data-cat="Brand Designer"] {
  --cat-grad: radial-gradient(140% 150% at 22% 18%, #a6c0b4 0%, #e6ddec 52%, #f2cd78 100%);
}
.pb-catgrad[data-cat="Texter"] {
  --cat-grad: radial-gradient(140% 150% at 22% 18%, #a6c0b4 0%, #7fd49a 52%, #e6ddec 100%);
}
.pb-catgrad[data-cat="Creative Concept"] {
  --cat-grad: radial-gradient(140% 150% at 22% 18%, #a6c0b4 0%, #7fd49a 52%, #f2cd78 100%);
}
.pb-catgrad[data-cat="Creative Director (Art)"] {
  --cat-grad: radial-gradient(140% 150% at 22% 18%, #f2cd78 0%, #f0763c 52%, #aeabde 100%);
}
.pb-catgrad[data-cat="Creative Director (Copy)"] {
  --cat-grad: radial-gradient(140% 150% at 22% 18%, #a6c0b4 0%, #7fd49a 52%, #f2cd78 100%);
}
.pb-catgrad[data-cat="Cutter"] {
  --cat-grad: radial-gradient(140% 150% at 22% 18%, #ef8f66 0%, #dd83c2 52%, #aeabde 100%);
}
.pb-catgrad[data-cat="Programmierer"] {
  --cat-grad: radial-gradient(140% 150% at 22% 18%, #7fd49a 0%, #aeabde 52%, #e6ddec 100%);
}
.pb-catgrad[data-cat="Grafik Designer"] {
  --cat-grad: radial-gradient(140% 150% at 22% 18%, #7fd49a 0%, #aeabde 52%, #e6ddec 100%);
}
.pb-catgrad[data-cat="Illustrator"] {
  --cat-grad: radial-gradient(140% 150% at 22% 18%, #a6c0b4 0%, #e6ddec 52%, #f2cd78 100%);
}
.pb-catgrad[data-cat="Motion Designer"] {
  --cat-grad: radial-gradient(140% 150% at 22% 18%, #7fd49a 0%, #e6ddec 52%, #aeabde 100%);
}
.pb-catgrad[data-cat="PR-Berater"] {
  --cat-grad: radial-gradient(140% 150% at 22% 18%, #aeabde 0%, #e6ddec 52%, #f2cd78 100%);
}
.pb-catgrad[data-cat="Projekt Manager"] {
  --cat-grad: radial-gradient(140% 150% at 22% 18%, #7fd49a 0%, #f2cd78 52%, #e6ddec 100%);
}
.pb-catgrad[data-cat="Prompt Engineer"] {
  --cat-grad: radial-gradient(140% 150% at 22% 18%, #f2cd78 0%, #aeabde 52%, #7fd49a 100%);
}
.pb-catgrad[data-cat="Strategen"] {
  --cat-grad: radial-gradient(140% 150% at 22% 18%, #a6c0b4 0%, #7fd49a 52%, #f2cd78 100%);
}
.pb-catgrad[data-cat="UI/UX Designer"] {
  --cat-grad: radial-gradient(140% 150% at 22% 18%, #7fd49a 0%, #f2cd78 52%, #e6ddec 100%);
}


.pb-fname {
  font-family: var(--font-display); 
  


  font-size: 1.25em;
  font-weight: 600;
  color: var(--text);
  line-height: 1.15;
}



.pb-fname-btn {
  display: block;
  max-width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-align: start;
  cursor: pointer;
  border-radius: var(--r-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: inherit;
}


.pb-freco { gap: 0.25rem; font-variant-numeric: tabular-nums; }
.pb-freco svg { width: 0.9375rem; height: 0.9375rem; fill: currentColor; }

.pb-ftitle {
  font-size: var(--fs-md);
  color: var(--text-soft);
  margin-top: 0.125rem;
}


.pb-fpills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}


.pb-fpills-roles,
.pb-fpills-meta { display: contents; }

.pb-frole,
.pb-fmeta-pill {
  display: inline-flex;
  align-items: center;
  


  padding: 0.3125rem 0.625rem;
  background: var(--surface-2);
  color: var(--text-soft);
  font-size: var(--fs-md);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  transition: background var(--dur) var(--ease); 
}


.pb-fmeta-pill--locked {
  background: var(--warn-tint);
  color: var(--warn);
}

.pb-frole {
  border-radius: var(--r-pill);
  



  display: inline-block;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pb-fmeta-pill {
  border-radius: var(--r-xs);
}


.pb-fcard-actions {
  margin-top: auto;            
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.pb-fcard-actions .pb-btn-add { height: 2rem; }
.pb-fcard .pb-btn-add.added { color: var(--text); border-color: var(--selected-border); }





.pb-why-btn {
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 50%;
  background: var(--ai-tint);
  color: var(--ai);
  cursor: help;
  transition: background var(--dur) var(--ease);
}
.pb-why-btn:hover { background: color-mix(in srgb, var(--ai) 22%, transparent); }
.pb-why-btn:focus-visible { outline: var(--ring-w) solid var(--ring); outline-offset: var(--ring-offset); }
.pb-why-btn svg { width: 13px; height: 13px; display: block; }







.pb-match {
  position: relative;
  z-index: 1;
  flex: none;
  display: grid;
  place-items: center;
  width: 2.875rem;
  height: 2.875rem;
  margin: 0.5rem 0 0 auto;
  border-radius: 50%;
  padding: 0;
  border: 0;
  background: var(--surface);
  box-shadow: 0 0 0 0.1875rem var(--surface);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}

.pb-match:hover { background: var(--ai-tint); }
.pb-match:focus-visible { outline: var(--ring-w) solid var(--ring); outline-offset: var(--ring-offset); }
.pb-match svg {
  position: absolute;
  inset: 0.1875rem;
  width: calc(100% - 0.375rem);
  height: calc(100% - 0.375rem);
  transform: rotate(-90deg);
}
.pb-match-trk { fill: none; stroke: var(--ai-tint); stroke-width: 5; }
.pb-match-arc { fill: none; stroke: var(--ai); stroke-width: 5; stroke-linecap: round; }
.pb-match.is-anim .pb-match-arc { animation: pb-match-ring 1.1s var(--ease) both; }
@keyframes pb-match-ring { from { stroke-dashoffset: 125.66; } }
.pb-match b {
  position: relative;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.875rem;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--text);
}
.pb-match b small { margin-left: 0.0625rem; font-size: 0.625rem; font-weight: 700; color: var(--text-soft); }
@media (prefers-reduced-motion: reduce) {
  .pb-match.is-anim .pb-match-arc { animation: none; }
}




@media (max-width: 479.98px) {
  
  .pb-fcard-actions { flex-wrap: wrap; }
  .pb-fcard-actions .pb-btn-add { flex: 1 1 100%; justify-content: center; }
}



@media (max-width: 767.98px) {
  .grid:not(.as-list) .pb-fname, .pba-results .pb-fname { font-size: 1.0625em; }
  .grid:not(.as-list) .pb-ftitle, .pba-results .pb-ftitle { font-size: var(--fs-sm); }
  .grid:not(.as-list) :is(.pb-frole, .pb-fmeta-pill),
  .pba-results :is(.pb-frole, .pb-fmeta-pill) { font-size: var(--fs-xs); padding: 0.25rem 0.5rem; }
  .grid:not(.as-list) .pb-fcard-actions .pb-btn-add,
  .pba-results .pb-fcard-actions .pb-btn-add { font-size: var(--fs-sm); }
}








.as-list pb-talent-card { display: block; }

.as-list .pb-fcard {
  flex-direction: row;
  align-items: center;
  gap: 1.25rem;
  padding: 0.75rem 1.25rem;
  background: transparent;                  
  border-radius: 0;
  box-shadow: none;
  border-top: 0.0625rem solid var(--border);
}
.as-list pb-talent-card:first-child .pb-fcard { border-top: none; }
.as-list .pb-fcard:hover {
  transform: none;
  background: var(--surface-bright);        
  box-shadow: none;
}


.as-list .pb-fcard-header { display: none; }


.as-list .pb-fcard-body {
  flex: 1;
  flex-direction: row;
  align-items: center;
  gap: 1.25rem;
  padding: 0;
  min-width: 0;
}


.as-list .pb-fcard-body .pb-avatar {
  flex: 0 0 auto;
  margin-top: 0;
  box-shadow: none;
}


.as-list .pb-fident {
  flex: 0 0 13rem;
  min-width: 0;
}
.as-list .pb-fname,
.as-list .pb-ftitle {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.as-list .pb-fpills { display: contents; }
.as-list .pb-fpills-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  flex: 1;
  min-width: 0;
  max-height: 2rem;               
  overflow: hidden;
}
.as-list .pb-fpills-meta {
  display: flex;
  gap: 0.375rem;
  flex: 0 0 auto;
  justify-content: flex-end;
}


.as-list .pb-frole,
.as-list .pb-fmeta-pill {
  font-size: var(--fs-sm);
  padding: 0.3125rem 0.6875rem;
}


.as-list .pb-fcard-actions {
  margin-top: 0;
  flex: 0 0 auto;
}

@media (max-width: 767.98px) {
  .as-list .pb-fident { flex-basis: 9rem; }
  .as-list .pb-fpills-roles { display: none; }   

  


  .pb-fcard { border-radius: 0.5em; }
  .pb-fcard-header { border-radius: 0.25em; }
}







[data-theme="dark"] .pb-fcard:hover,
[data-theme="dark"] .as-list .pb-fcard:hover {
  background: var(--surface-1);
}



[data-theme="dark"] .pb-fcard:hover .pb-frole,
[data-theme="dark"] .pb-fcard:hover .pb-fmeta-pill:not(.pb-fmeta-pill--locked),
[data-theme="dark"] .pb-fcard:hover .pb-btn-secondary {
  background: var(--surface-3);
}

[data-theme="dark"] .pb-fcard:hover .pb-btn-secondary:hover {
  background: var(--surface-bright);
}



[data-theme="dark"] .pb-star {
  color: #f2f2f2;
  background: rgba(16, 16, 14, 0.55);
}
[data-theme="dark"] .pb-star:hover { background: rgba(16, 16, 14, 0.78); }
[data-theme="dark"] .pb-star.on {
  color: #f2f2f2;
  background: rgba(16, 16, 14, 0.85);
}






.pb-favrow {
  display: flex;
  align-items: flex-start;
}
.pb-fteam-avs {
  display: inline-flex;
  



  margin-left: 0.375rem;
  margin-top: -0.25rem;
  position: relative;
  z-index: 1;
}
.pb-fteam-av {
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  border: 0.125rem solid var(--surface);
  padding: 0;
  margin-left: -0.375rem;
  

  background: var(--avatar); font-weight: 900; 
  cursor: pointer;
  overflow: hidden;
  display: inline-grid;
  place-items: center;
  transition: transform 0.15s ease;
}
.pb-fteam-av:first-child { margin-left: 0; }
.pb-fteam-av:hover,
.pb-fteam-av:focus-visible { transform: translateY(-0.125rem); z-index: 1; position: relative; }
.pb-fteam-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.pb-fteam-init {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--text-soft, var(--text-muted, #6b6b6b));
}



.as-list .pb-fteam-avs { display: none; }
.as-list .pb-favrow { flex: 0 0 auto; }
