/* PROJECT LEGEND V0.51.2 - Spielerblatt (Scouting-Nebel).
   Die Unschaerfe ist auch optisch sichtbar: der Balken zeigt den
   Schaetzmittelwert, das hellere Band darueber die Spanne. */
.pl522{display:flex;flex-direction:column;gap:16px}
.pl522-kopf{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pl522-kopf-text{flex:1 1 220px;min-width:0}
.pl522-kopf-text h2{margin:0;font-size:clamp(20px,2.4vw,30px);line-height:1.15}
.pl522-kopf-text p{margin:2px 0 0;color:var(--muted,#91a1b8);font-size:13.5px}
.pl522-kenntnis{display:flex;flex-direction:column;gap:2px;text-align:right;
  padding:8px 12px;border:1px solid var(--line,rgba(255,255,255,.09));border-radius:12px;max-width:100%}
.pl522-kenntnis small{font-size:10.5px;letter-spacing:.11em;color:var(--muted,#91a1b8)}
.pl522-kenntnis b{font-size:14px}
.pl522-kenntnis span{font-size:11.5px;color:var(--muted,#91a1b8)}
.pl522-hinweis{margin:0;font-size:13px;color:var(--muted,#91a1b8);max-width:76ch}
.pl522-gitter{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;align-items:start}
.pl522-wert{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:7px 0;border-bottom:1px solid var(--line-soft,rgba(255,255,255,.06))}
.pl522-wert:last-child{border-bottom:0}
.pl522-wert span{color:var(--muted,#91a1b8);font-size:13px}
.pl522-wert b{font-variant-numeric:tabular-nums;white-space:nowrap}
.pl522-gross b{font-size:22px;font-weight:800}
.pl522-balken{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:6px 0}
.pl522-balken-name{font-size:13px;color:var(--muted,#91a1b8);min-width:74px}
.pl522-balken-bahn{position:relative;height:8px;border-radius:999px;
  background:var(--panel-2,rgba(255,255,255,.07));overflow:hidden}
.pl522-balken-bahn i{position:absolute;inset:0 auto 0 0;border-radius:999px;
  background:var(--accent-2,#31c76a);display:block}
/* Das Band macht die Unsicherheit sichtbar - je breiter, desto vager. */
.pl522-balken-bahn u{position:absolute;top:0;bottom:0;border-radius:999px;
  background:rgba(255,255,255,.28);mix-blend-mode:screen;display:block}
.pl522-balken b{font-variant-numeric:tabular-nums;font-size:13px;min-width:52px;text-align:right}
.pl522-karte svg{width:100%;height:auto;display:block}
/* Anklickbare Namen: dezent, aber erkennbar. */
.pl522-link{cursor:pointer;text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:color-mix(in srgb,currentColor 35%,transparent)}
.pl522-link:hover{text-decoration-color:currentColor}
/* V0.54.1 (08.09.2026): Ein <button> mit dieser Klasse muss wie ein Link
   aussehen, nicht wie ein Knopf. Ohne diese Zeilen zeigte der Browser seine
   Voreinstellung - grauer Kasten, weisser outset-Rahmen, eigenes Polster -,
   und in der Konferenz sahen die 16 Vereinsnamen aus wie markierter Text.
   Gemessen: keine einzige Regel setzte dort einen Hintergrund; der Kasten kam
   allein vom Browser. Es wird NUR zurueckgenommen, nie etwas gesetzt: Farbe,
   Schrift und Ausrichtung erbt der Knopf damit von seiner Umgebung, genau wie
   die 107 <span> mit derselben Klasse. */
button.pl522-link{-webkit-appearance:none;appearance:none;background:none;border:0;
  padding:0;margin:0;font:inherit;color:inherit;text-align:inherit;line-height:inherit}
.pl502-offen{opacity:.55;font-style:italic}
@media (max-width:640px){
  .pl522-kenntnis{text-align:left;align-items:flex-start}
  .pl522-balken{grid-template-columns:auto 1fr;grid-template-areas:"name wert" "bahn bahn"}
  .pl522-balken-name{grid-area:name}
  .pl522-balken b{grid-area:wert}
  .pl522-balken-bahn{grid-area:bahn}
}