/* TELACY ESPORTS — Rosterblick auf den Teamkarten (05.10.2026)
   Gehoert zu rosterblick.js. Eigene Datei, damit site.css unberuehrt
   bleibt.

   Maus (hover:hover): Die Liste liegt ueber der oberen Flaeche der
   Karte, endet ueber Division und Teamname (--rbunten aus dem Skript)
   und verlaesst die Karte nie. Das Raster bewegt sich nicht. Klicks
   gehen durch auf den Link der Karte.
   Touch (hover:none): Knopf oben rechts, die Liste klappt unter der
   Karte auf. Das verschiebt nur, was unter dieser Reihe steht, und nur
   auf Tipp. */

.rbk{position:relative;min-width:0;align-self:start}
.rbk > .dcard{width:100%}

.rbpanel{display:none;container-type:inline-size;color:var(--txt);line-height:1.3}
.rbpanel [hidden]{display:none!important}

/* ── Inhalt ─────────────────────────────────────────────────── */
.rbpanel .rbkopf{margin:0 0 8px;font:600 10px/1 'Chakra Petch',sans-serif;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim)}
.rbpanel .rbliste + .rbkopf,.rbpanel .rbleer + .rbkopf{margin-top:13px}
.rbpanel .rbliste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.rbpanel .rbz{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;min-height:20px}
.rbpanel .rbz .who{flex:1 1 auto;gap:9px;min-width:0}
.rbpanel .rbz .who .txt{min-width:0;overflow:hidden}
.rbpanel .rbz .al{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:13.5px;font-weight:500;line-height:1.3;color:var(--white)}
.rbpanel .rbz .who .leadmark{margin-left:-3px}
.rbpanel .rbrolle{flex:none;max-width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:600 10px/1.2 'Chakra Petch',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.rbpanel .rbstaff .rbrolle{text-transform:none;letter-spacing:.02em;font:500 12px/1.2 Barlow,system-ui,sans-serif}
.rbpanel .rbleer{margin:0;font-size:13px;line-height:1.5;color:var(--dim)}
.rbpanel .rbmehr{margin:9px 0 0;font-size:12px;color:var(--dim)}
.rbpanel .rbsr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Schmal (Telefon, zwei Karten nebeneinander): Rolle unter den Namen,
   eingerueckt auf Hoehe des Alias (Flagge 22 px plus Abstand). */
@container (max-width:230px){
  .rbpanel .rbz{flex-wrap:wrap;row-gap:2px}
  .rbpanel .rbrolle{flex-basis:100%;max-width:none;padding-left:31px}
}

/* Ladezustand: ruhige Balken, keine Drehscheibe. */
.rbplatz{display:flex;flex-direction:column;gap:11px;padding-top:2px}
.rbplatz i{display:block;height:10px;width:68%;background:rgba(255,255,255,.07);animation:rbpuls 1.2s ease-in-out infinite alternate}
.rbplatz i:nth-child(2){width:52%}.rbplatz i:nth-child(3){width:61%}.rbplatz i:nth-child(4){width:44%}
@keyframes rbpuls{from{opacity:.45}to{opacity:1}}

/* Den Knopf gibt es nur ohne Maus. */
.rbknopf{display:none}

/* ── Maus: Ueberblendung in der Karte ───────────────────────── */
@media (hover:hover){
  .rbpanel{display:block;position:absolute;z-index:3;top:1px;left:1px;right:1px;
    bottom:calc(var(--rbunten, 30%) + 2px);overflow:hidden;padding:14px 16px 10px;
    background:color-mix(in srgb,var(--s1) 94%,transparent);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
    pointer-events:none;opacity:0;visibility:hidden;
    transition:opacity .18s ease,visibility 0s linear .18s,transform .4s var(--e)}
  .rbk.rbschau > .rbpanel{opacity:1;visibility:visible;transition:opacity .18s ease,visibility 0s,transform .4s var(--e)}
  /* Die Karte hebt sich beim Ueberfahren um 6 px (.dcard:hover), die
     Liste geht mit. */
  .rbk:hover > .rbpanel{transform:translateY(-6px)}
}

/* ── Touch: Knopf und Liste unter der Karte ─────────────────── */
@media (hover:none){
  .rbknopf{position:absolute;z-index:3;top:8px;right:8px;display:inline-flex;align-items:center;gap:6px;
    height:32px;padding:0 10px 0 8px;margin:0;border:1px solid var(--line2);border-radius:0;
    background:rgba(20,20,24,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    color:var(--txt);font:600 10.5px/1 'Chakra Petch',sans-serif;letter-spacing:.12em;text-transform:uppercase;
    cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
    transition:background .18s,border-color .18s,color .18s,transform .12s}
  /* Trefferflaeche 44 px, sichtbar bleibt der kleine Knopf. */
  .rbknopf::before{content:"";position:absolute;inset:-6px}
  .rbknopf svg{flex:none}
  .rbknopf:active{transform:scale(.97)}
  .rbknopf[aria-expanded="true"]{background:var(--s3);border-color:var(--brand-l);color:var(--white)}

  .rbk.rboffen > .rbpanel{display:block;margin-top:-1px;padding:14px 12px 13px;
    border:1px solid var(--line);border-top-color:var(--line2);background:var(--s1);
    animation:rbauf .22s var(--e)}
  @keyframes rbauf{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
}

@media (prefers-reduced-motion:reduce){
  .rbpanel,.rbk.rbschau > .rbpanel{transition:none}
  .rbk.rboffen > .rbpanel{animation:none}
  .rbplatz i{animation:none}
}

/* Karte schoen ausfuellen (Alexander, 05.10.2026): Bei wenigen Leuten
   verteilen sich die Zeilen ueber die ganze Flaeche statt oben zu
   kleben. Jede Liste waechst im Verhaeltnis ihrer Zeilen (--n aus dem
   Skript). Passt nicht alles hinein, gibt es keinen Platz zu verteilen,
   dann greift einpassen() wie bisher. Das Logo blendet aus, solange die
   Liste offen ist, und leere Flaggen (kein Land) nehmen keinen Platz. */
@media (hover:hover){
  .rbpanel{display:flex;flex-direction:column;background:var(--s1)}
  .rbpanel .rbliste{flex:var(--n,1) 0 auto;justify-content:space-evenly;gap:4px}
  .rbpanel .rbz{min-height:22px}
  .rbpanel .rbkopf,.rbpanel .rbleer,.rbpanel .rbmehr{flex:none}
  .rbk .dcard.logocard .art{transition:opacity .18s ease,transform .45s var(--e),filter .45s var(--e)}
  .rbk.rbschau .dcard.logocard .art,.rbk.rbschau .dcard .art{opacity:0}
}
.rbpanel .flag.none{display:none}