/* PROJECT LEGEND V0.51.0 - Stufe F: Analyse-Ansichten */

.pl521-panel .pl42-panel-head h3{display:flex;align-items:center;gap:8px}
.pl521-raster{
  /* V0.51.3: feste drei Spalten mit minmax(0,1fr) schrumpften in einem
     schmalen Panel auf gut 40 px - da hilft keine Typografie mehr, und die
     Titel brachen mitten im Wort. Die Umbruchgrenze richtet sich jetzt nach
     der BREITE DES PANELS statt nach der des Fensters (das Panel haengt
     zusaetzlich an der Seitenleiste): unter etwa 180 px je Karte wird
     umgebrochen. */
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;align-items:start;
  padding:4px 0 6px;
}
@media (max-width:960px){.pl521-raster{grid-template-columns:minmax(0,1fr)}}
.pl521-zelle{
  padding:12px;border-radius:12px;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);
}
.pl521-titel{
  display:block;font-size:.68rem;letter-spacing:.12em;opacity:.6;
  text-transform:uppercase;margin-bottom:8px;font-weight:700;
}
.pl521-zelle small{font-size:.72rem;opacity:.6;display:block;margin-top:6px;line-height:1.4}
.pl521-leer{font-size:.8rem;opacity:.65;line-height:1.5;padding:8px 0}

/* Radar */
.pl521-radar svg{width:100%;max-width:250px;height:auto;display:block;margin:0 auto}
.pl521-netz{fill:none;stroke:rgba(255,255,255,.10);stroke-width:1}
.pl521-achse{fill:rgba(220,230,247,.85);font-size:9px;font-weight:600}
.pl521-benchmark{fill:rgba(255,196,64,.10);stroke:rgba(255,196,64,.55);stroke-width:1.4;stroke-dasharray:4 3}
.pl521-spieler{fill:rgba(90,150,255,.22);stroke:rgba(120,170,255,.9);stroke-width:1.8}
.pl521-legende{display:flex;justify-content:center;gap:16px;font-size:.74rem;opacity:.85;margin-top:6px;flex-wrap:wrap}
.pl521-legende i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.pl521-i-spieler{background:rgba(120,170,255,.9)}
.pl521-i-benchmark{background:rgba(255,196,64,.6)}

/* Verlauf */
.pl521-verlauf svg{width:100%;max-width:330px;height:auto;display:block;margin:0 auto}
.pl521-linie{fill:none;stroke:rgba(120,170,255,.9);stroke-width:2.2;stroke-linejoin:round}
.pl521-punkt{fill:#ffc440;stroke:#0a1220;stroke-width:1}
.pl521-xlabel,.pl521-ylabel{fill:rgba(220,230,247,.6);font-size:9px}
.pl521-avg{fill:rgba(126,240,176,.9);font-size:8.6px;font-weight:700}

/* Heatmap */
.pl521-heatmap svg{width:100%;max-width:330px;height:auto;display:block;margin:0 auto}
.pl521-rasen{fill:rgba(38,80,46,.4);stroke:rgba(255,255,255,.15)}
.pl521-feldlinie{stroke:rgba(255,255,255,.2);stroke-width:1.4}
.pl521-hitze{fill:#ff7a3c;filter:blur(9px)}

/* V0.51.3 - Kartentitel brachen mitten im Wort ("AKTIONSRADIU / S",
   "ENTWICKLUNG / SVERLAUF"). Ursache ist die Grundregel der Huelle
   (ui-v0420/shell.css: `#pl420Root *{overflow-wrap:break-word}`), die in
   einer schmalen Rasterspalte jedes lange Wort aufbricht - und deutsche
   Komposita sind lang. Statt irgendwo zu trennen wird hier RICHTIG
   getrennt: hyphens:auto setzt den Bindestrich an die Silbengrenze
   ("AKTIONS-RADIUS"). Die Sperrung wird zugleich etwas enger, damit die
   Zeile in der Regel gar nicht erst umbrechen muss. */
#pl420Root .pl521-titel, .pl521-titel{
  /* Hoehere Spezifitaet als die Grundregel der Huelle
     (#pl420Root *{overflow-wrap:break-word}) - sonst gewinnt die. */
  overflow-wrap:normal;
  word-break:normal;
  hyphens:auto;
  -webkit-hyphens:auto;
  letter-spacing:.09em;
}
@media (max-width:1280px){
  #pl420Root .pl521-titel, .pl521-titel{letter-spacing:.04em;font-size:.63rem}
}

/* Karten sind jetzt Schaltflaechen - sie muessen wie eine Karte aussehen,
   nicht wie ein Knopf, aber als anklickbar erkennbar sein. */
.pl521-oeffnen{
  appearance:none;border:0;background:transparent;color:inherit;font:inherit;
  text-align:left;width:100%;cursor:pointer;padding:0;display:block;
  border-radius:10px;transition:background .15s ease,transform .15s ease;
}
.pl521-oeffnen:hover{background:rgba(255,255,255,.045)}
.pl521-oeffnen:focus-visible{outline:2px solid var(--accent,#67b7ff);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.pl521-oeffnen{transition:none}}

/* Grossansicht im Fenster. */
.pl521-detail svg{width:100%;max-width:520px;height:auto;display:block;margin:0 auto}
/* V0.58.9 (D20): bei Fensterhoehen unter ~840 px lag der Erklaertext unter der
   klebenden Aktionsleiste (Zeichnung 420x420 + Kopf + Legende + Text > Dialoghoehe
   calc(100dvh - 48px)). Die viewBox haelt das Seitenverhaeltnis, die Zeichnung wird
   mittig kleiner, der Text rueckt nach oben. Untergrenze 260 px: darunter waere die
   Achsenschrift kleiner als in der Miniatur. */
.pl521-detail .pl521-radar svg{max-width:420px;max-height:max(260px,calc(100dvh - 420px))}
.pl521-detail-text{margin:12px 0 0;font-size:14px;line-height:1.5;
  color:var(--muted,#91a1b8);max-width:64ch}