/* 1025DEX Community v0.31.35 · css/community-showroom.css
   Community-Schaufenster: bewegter Kopfbereich, Freunde-Leiste, Laufband
   "Neu im Binder" und Liga-Podest. Farben ausschliesslich aus den Tokens,
   damit helles und dunkles Design stimmen. Bei "Bewegung reduzieren" steht
   alles still (Block ganz unten). */

/* ---------- Kopfbereich ---------- */
.community-hero.cs-hero{
  isolation:isolate;
  border-color:color-mix(in srgb,var(--accent) 24%,var(--line));
  background:
    radial-gradient(120% 95% at 0% 0%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 62%),
    radial-gradient(110% 95% at 100% 100%,color-mix(in srgb,var(--wish) 20%,transparent),transparent 64%),
    var(--panel);
}
.cs-hero>*:not(.cs-bg){position:relative;z-index:1}
.cs-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;border-radius:inherit}
.cs-orb{position:absolute;border-radius:50%;filter:blur(30px);opacity:.5}
.cs-orb1{width:200px;height:200px;left:-70px;top:-80px;background:color-mix(in srgb,var(--accent) 50%,transparent);animation:cs-drift1 16s ease-in-out infinite alternate}
.cs-orb2{width:220px;height:220px;right:-80px;bottom:-100px;background:color-mix(in srgb,var(--wish) 50%,transparent);animation:cs-drift2 19s ease-in-out infinite alternate}
.cs-float{position:absolute;display:block;color:color-mix(in srgb,var(--ink) 22%,transparent);animation:cs-schweben 14s ease-in-out infinite;transform:rotate(var(--r,0deg))}
.cs-float svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;display:block}
.cs-card{position:absolute;display:block;border-radius:4px;opacity:.75;
  border:1px solid color-mix(in srgb,var(--ink) 16%,transparent);
  background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 26%,transparent),color-mix(in srgb,var(--wish) 26%,transparent));
  animation:cs-schweben 17s ease-in-out infinite;transform:rotate(var(--r,0deg))}
@keyframes cs-schweben{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-12px) rotate(calc(var(--r,0deg) + 8deg))}}
@keyframes cs-drift1{to{transform:translate(46px,30px) scale(1.12)}}
@keyframes cs-drift2{to{transform:translate(-40px,-26px) scale(1.1)}}

/* Kennzahlen als Glas-Kacheln ueber dem bewegten Hintergrund */
.cs-hero .community-stat{
  position:relative;
  background:color-mix(in srgb,var(--panel-2) 72%,transparent);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-color:color-mix(in srgb,var(--line) 70%,transparent);
}
.cs-hero .community-stat b{font-variant-numeric:tabular-nums}
.community-stats button.community-stat{appearance:none;color:var(--ink);font:inherit;cursor:pointer;min-width:0;min-height:56px}
.community-stats button.community-stat:hover{border-color:var(--accent)}
.community-stats button.community-stat:active{transform:scale(.98)}
.community-stats button.community-stat:focus-visible,.neo-header button.neo-logo:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.neo-header button.neo-logo{appearance:none;border:0;background:none;color:inherit;text-align:left;padding:0;cursor:pointer}

/* Live-Punkt */
.cs-live{display:inline-block;flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--owned);animation:cs-puls 2s ease-out infinite}
.community-stat.cs-online>.cs-live{position:absolute;top:8px;right:8px}
@keyframes cs-puls{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--owned) 55%,transparent)}80%,100%{box-shadow:0 0 0 8px transparent}}

/* ---------- Schaufenster-Bloecke ---------- */
.cs-show{display:grid;gap:12px}
.cs-show[hidden]{display:none}
.cs-block{
  border:1px solid var(--line);border-radius:var(--r-xl,20px);background:var(--panel);
  padding:12px 12px 13px;min-width:0;
  animation:cs-rein .5s var(--ease-out,ease-out) both;
}
.cs-block:nth-child(2){animation-delay:.07s}
.cs-block:nth-child(3){animation-delay:.14s}
@keyframes cs-rein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.cs-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 2px 10px;min-height:22px}
.cs-head b{display:flex;align-items:center;gap:7px;font:640 14.5px/1.2 var(--ui);letter-spacing:-.012em;color:var(--ink)}
.cs-head>span{font:500 11.5px/1.2 var(--ui);color:var(--ink-soft);text-align:right}
.cs-link{border:0;background:none;color:var(--accent);font:600 12.5px/1 var(--ui);padding:6px 2px;cursor:pointer}
.cs-leer{display:block;font:500 12.5px/1.45 var(--ui);color:var(--ink-soft);padding:2px}

/* Editorial content stays useful when no one has posted yet. */
.cs-source{margin:-3px 2px 10px;color:var(--ink-soft);font:500 11px/1.4 var(--ui)}
.cs-news-list{display:grid;gap:7px}
.cs-news-item{display:grid;grid-template-columns:34px minmax(0,1fr) 16px;align-items:center;gap:11px;padding:11px;border:1px solid var(--line);border-radius:13px;background:var(--panel-2);color:var(--ink);text-decoration:none;transition:background .15s,border-color .15s,transform .15s}
.cs-news-item:hover,.cs-news-item:focus-visible{background:color-mix(in srgb,var(--accent) 9%,var(--panel-2));border-color:var(--accent);transform:translateY(-1px)}
.cs-news-index{font:750 19px/1 var(--ui);color:var(--accent);font-variant-numeric:tabular-nums}
.cs-news-copy{display:grid;gap:3px;min-width:0}
.cs-news-copy small{font:650 10.5px/1.25 var(--ui);color:var(--accent)}
.cs-news-copy b{font:650 13px/1.25 var(--ui)}
.cs-news-copy>span{font:500 11.5px/1.35 var(--ui);color:var(--ink-soft)}
.cs-news-arrow{align-self:start;color:var(--accent);font-size:15px}
.cs-impulses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cs-impulse{display:flex;flex-direction:column;align-items:flex-start;min-height:156px;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 12%,var(--panel)),var(--panel) 70%)}
.cs-daily{background:linear-gradient(145deg,color-mix(in srgb,var(--wish) 16%,var(--panel)),var(--panel) 70%)}
.cs-kicker{font:750 10px/1.25 var(--ui);letter-spacing:.08em;color:var(--accent);margin-bottom:10px}
.cs-impulse>b{font:670 14px/1.3 var(--ui);color:var(--ink)}
.cs-impulse p{font:500 11.5px/1.4 var(--ui);color:var(--ink-soft);margin:7px 0 12px}
.cs-impulse-action{border:0;background:none;padding:4px 0;margin-top:auto;font:650 12px/1.2 var(--ui);color:var(--accent);cursor:pointer;text-align:left}
.cs-impulse-action:hover,.cs-impulse-action:focus-visible{text-decoration:underline}
.cs-daily-row{display:flex;align-items:center;gap:9px;margin-bottom:12px;min-width:0}
.cs-daily-row img{width:55px;height:55px;object-fit:contain;flex:0 0 auto;image-rendering:auto}
.cs-daily-row span{display:grid;gap:4px;min-width:0}
.cs-daily-row b{font:670 13px/1.2 var(--ui);color:var(--ink)}
.cs-daily-row small{font:500 11px/1.3 var(--ui);color:var(--ink-soft)}
@media(max-width:520px){.cs-impulses{grid-template-columns:1fr}.cs-impulse{min-height:0}.cs-daily-row{margin-bottom:8px}}

/* ---------- Freunde-Leiste ---------- */
.cs-friends-row{display:flex;align-items:flex-start;gap:12px;overflow-x:auto;scrollbar-width:none;padding:12px 12px 6px;margin:-10px -12px -4px}
.cs-friends-row::-webkit-scrollbar{display:none}
.cs-friend{flex:0 0 auto;width:60px;display:grid;justify-items:center;gap:5px;border:0;background:none;padding:0;color:var(--ink);cursor:pointer}
.cs-ring{position:relative;width:58px;height:58px;border-radius:50%;display:grid;place-items:center}
.cs-ring::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--line)}
.cs-friend.online .cs-ring::before{
  background:conic-gradient(from 0deg,var(--owned) 0%,color-mix(in srgb,var(--owned) 45%,#fff) 18%,var(--owned) 36%,var(--owned) 64%,color-mix(in srgb,var(--owned) 45%,#fff) 82%,var(--owned) 100%);
  box-shadow:0 0 14px color-mix(in srgb,var(--owned) 45%,transparent);
  animation:cs-dreh 5s linear infinite;
}
.cs-ring>.trainer-avatar{position:relative;border-radius:50%;box-shadow:0 0 0 2.5px var(--panel)}
.cs-ring>.trainer-avatar::after{border-radius:50%;inset:6%}
.cs-ring>.trainer-avatar .ta-crown{right:15%;bottom:15%;width:22%;height:22%}
.cs-friend.online .cs-ring::after{content:"";position:absolute;right:1px;bottom:1px;width:13px;height:13px;border-radius:50%;background:var(--owned);box-shadow:0 0 0 2.5px var(--panel)}
.cs-friend small{max-width:60px;font:550 11px/1.15 var(--ui);color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-friend.online small{color:var(--ink)}
.cs-plus{position:relative;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:var(--panel-2);border:1.5px dashed var(--line-strong);color:var(--ink-soft);font:300 26px/1 var(--ui)}
.cs-find .cs-ring::before{background:none}
.cs-friends-hint{flex:1 1 160px;align-self:center;min-width:150px}
@keyframes cs-dreh{to{transform:rotate(360deg)}}

/* ---------- Laufband ---------- */
.cs-ticker-view{overflow:hidden;margin:0 -12px;padding:2px 12px 4px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent)}
.cs-ticker-view.still{overflow-x:auto;scrollbar-width:none}
.cs-ticker-view.still::-webkit-scrollbar{display:none}
.cs-ticker-track{display:flex;gap:10px;width:max-content}
.cs-ticker-track.laeuft{animation:cs-lauf var(--dauer,40s) linear infinite}
.cs-ticker-view:hover .cs-ticker-track,.cs-ticker-view:active .cs-ticker-track,.cs-ticker-view:focus-within .cs-ticker-track{animation-play-state:paused}
@keyframes cs-lauf{to{transform:translateX(calc(-50% - 5px))}}
.cs-tick{flex:0 0 auto;display:grid;grid-template-columns:44px minmax(0,auto);gap:10px;align-items:center;max-width:230px;
  border:1px solid var(--line);border-radius:14px;background:var(--panel-2);padding:6px 13px 6px 6px;color:var(--ink);cursor:pointer;text-align:left}
.cs-tick img{width:44px;height:61px;object-fit:cover;border-radius:5px;background:var(--panel-3);box-shadow:0 3px 10px rgba(0,0,0,.22)}
.cs-tick b{display:block;max-width:150px;font:620 13px/1.2 var(--ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-tick small{display:block;max-width:150px;margin-top:3px;font:500 11px/1.25 var(--ui);color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- Liga-Podest ---------- */
.cs-podium{display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:end;gap:8px;padding-top:2px}
.cs-step{display:grid;justify-items:center;gap:4px;min-width:0;border:0;background:none;padding:0;color:var(--ink);cursor:pointer}
.cs-step-avatar{position:relative;display:block}
.cs-medal{position:absolute;right:-5px;bottom:-3px;width:21px;height:21px;border-radius:50%;display:grid;place-items:center;
  font:700 11px/1 var(--ui);font-style:normal;color:#2b1d00;box-shadow:0 0 0 2.5px var(--panel)}
.cs-gold .cs-medal{background:linear-gradient(135deg,#ffe38f,#dba318)}
.cs-silver .cs-medal{background:linear-gradient(135deg,#f3f5f8,#a7b0bc)}
.cs-bronze .cs-medal{background:linear-gradient(135deg,#f5c39a,#b36e37);color:#2a1406}
.cs-gold .cs-step-avatar{filter:drop-shadow(0 6px 14px color-mix(in srgb,#dba318 45%,transparent))}
.cs-step-name{max-width:100%;margin-top:4px;font:620 12.5px/1.2 var(--ui);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-step-score{font:500 11px/1.2 var(--ui);color:var(--ink-soft);font-variant-numeric:tabular-nums}
.cs-step-block{display:block;width:100%;margin-top:4px;border-radius:12px 12px 6px 6px;transform-origin:bottom;animation:cs-hoch .7s var(--ease-out,ease-out) both}
.cs-gold .cs-step-block{height:70px;animation-delay:.28s;background:linear-gradient(180deg,color-mix(in srgb,#dba318 40%,var(--panel-2)),var(--panel-2))}
.cs-silver .cs-step-block{height:50px;animation-delay:.18s;background:linear-gradient(180deg,color-mix(in srgb,#a7b0bc 42%,var(--panel-2)),var(--panel-2))}
.cs-bronze .cs-step-block{height:36px;animation-delay:.38s;background:linear-gradient(180deg,color-mix(in srgb,#b36e37 40%,var(--panel-2)),var(--panel-2))}
@keyframes cs-hoch{from{transform:scaleY(0);opacity:0}to{transform:none;opacity:1}}
.cs-me{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:4px 8px;margin-top:10px;border-radius:12px;background:var(--panel-2);padding:9px 12px;
  font:500 12px/1.35 var(--ui);color:var(--ink-soft);text-align:center}
.cs-me b{font:700 18px/1 var(--ui);color:var(--ink);font-variant-numeric:tabular-nums}

/* ---------- Platzhalter beim Laden ---------- */
.cs-skel{display:block;flex:0 0 auto;border-radius:12px;
  background:linear-gradient(90deg,var(--panel-2) 0%,color-mix(in srgb,var(--panel-2) 55%,var(--panel)) 50%,var(--panel-2) 100%);
  background-size:200% 100%;animation:cs-schimmer 1.3s linear infinite}
.cs-skel-rund{width:58px;height:58px;border-radius:50%;margin-bottom:21px}
.cs-skel-tick{width:190px;height:73px;border-radius:14px}
.cs-skel-podest{height:150px}
@keyframes cs-schimmer{from{background-position:100% 0}to{background-position:-100% 0}}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion:reduce){
  .cs-orb,.cs-float,.cs-card,.cs-live,.cs-friend.online .cs-ring::before,
  .cs-ticker-track,.cs-block,.cs-step-block,.cs-skel{animation:none!important}
}