/* PROJECT LEGEND V0.51.1 - Attributsystem & Trainingsuebungen (Oberflaeche)
   Bestandsmuster: pl42-panel/pl42-attr fuer die Gruppen, eigene pl511-Klassen
   nur fuer Ueberkategorie-Chips und den Uebungskatalog im Trainingsdialog. */

/* Ueberkategorie-Chips im Kopf des Attribut-Panels */
.pl511-kategorien{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pl511-chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 11px;border-radius:999px;
  border:1px solid var(--pl42-line,#26324a);
  background:rgba(255,255,255,.03);
}
.pl511-chip small{font-size:10px;letter-spacing:.14em;font-weight:800;color:var(--pl42-ink-4,#7f95b8)}
.pl511-chip b{font-size:14px;font-weight:800;color:var(--pl42-ink-1,#e8f0fb)}
.pl511-chip--ges{border-color:var(--pl42-gold,#d8a935);background:var(--pl42-gold-wash,rgba(216,169,53,.12))}
.pl511-chip--ges b{color:var(--pl42-gold-bright,#f4c95d)}

/* Gruppenwert rechts im Panel-Kopf */
.pl511-gruppenwert{
  font-size:13px;font-weight:800;color:var(--pl42-ink-3,#9fb2cf);
  border:1px solid var(--pl42-line,#26324a);border-radius:8px;padding:2px 8px;
}

/* Sechs Attributgruppen in einer Reihe auf breiten Bildschirmen */
@media (min-width:1701px){
  .pl42-attr-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
}

/* ------------------------------------------------ Trainingsdialog ---- */
/* Breite: die Bestandsklasse pl2-modal--detail setzt width mit !important
   (phase2-premium.css), daher hier ebenfalls !important mit hoeherer
   Spezifitaet. Ab 1780px waechst der Dialog linear mit (Faktor wie v0512). */
#modalRoot .modal:has(.pl511-training){
  width:min(max(1160px,calc(1160px + min(100vw - 1780px, 500px)*0.28)),96vw)!important;
  max-width:96vw!important;
}
.pl511-training{display:flex;flex-direction:column;gap:10px;margin-top:10px}

/* Icons immer als Farb-Emoji zeichnen (Inter liefert sonst fuer einzelne
   Zeichen monochrome Ersatzglyphen, z. B. einen Pfeil statt der Zielscheibe). */
.pl511-ico,.pl511-gross,.pl511-katkopf>span,.pl511-drillkopf>span{
  font-family:'Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif;
}

/* Stufe 1: Trainingsgruppen als Kacheln */
.pl511-gruppen{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:6px}
.pl511-gruppe{
  display:flex;flex-direction:column;align-items:flex-start;gap:9px;
  padding:16px 17px;border-radius:14px;cursor:pointer;text-align:left;
  border:1px solid var(--pl42-line,#26324a);background:rgba(255,255,255,.02);
  transition:border-color .15s ease,background .15s ease;
}
.pl511-gruppe:hover{border-color:var(--pl42-gold,#d8a935);background:var(--pl42-gold-wash,rgba(216,169,53,.1))}
.pl511-gruppe.pl511-empf{border-color:rgba(216,169,53,.4)}
.pl511-gruppe .pl511-gross{font-size:30px;line-height:1}
.pl511-gruppe b{font-size:14px;font-weight:800;color:var(--pl42-ink-1,#e8f0fb)}
.pl511-gruppe small{font-size:11px;font-weight:600;color:var(--pl42-ink-4,#7f95b8)}

/* Stufe 2: Kopfzeile der Gruppenansicht */
.pl511-drillkopf{display:flex;align-items:center;gap:10px;margin-top:4px}
.pl511-drillkopf span{font-size:18px}
.pl511-drillkopf b{font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--pl42-ink-2,#c6d4ea)}
.pl511-zurueck{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  padding:7px 13px;border-radius:999px;font-size:12px;font-weight:800;
  color:var(--pl42-gold-bright,#f4c95d);
  border:1px solid rgba(216,169,53,.35);background:rgba(216,169,53,.06);
}
.pl511-zurueck:hover{background:var(--pl42-gold-wash,rgba(216,169,53,.14))}
.pl511-katkopf{
  display:flex;align-items:center;gap:9px;margin-top:8px;
  padding-bottom:6px;border-bottom:1px solid var(--pl42-line,#26324a);
}
.pl511-katkopf span{font-size:15px}
.pl511-katkopf b{
  font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--pl42-ink-3,#9fb2cf);
}
.pl511-uebungen{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;
}
.pl511-uebung{
  display:flex;flex-direction:column;gap:8px;
  border:1px solid var(--pl42-line,#26324a);border-radius:12px;
  padding:11px 12px;background:rgba(255,255,255,.02);
}
.pl511-uebung.pl511-empf{border-color:rgba(216,169,53,.55);background:rgba(216,169,53,.05)}
.pl511-ueb-kopf{display:flex;align-items:center;gap:8px;min-height:22px}
.pl511-ueb-kopf .pl511-ico{font-size:16px;flex:0 0 auto}
.pl511-ueb-kopf b{font-size:13px;font-weight:800;color:var(--pl42-ink-1,#e8f0fb);line-height:1.25}
.pl511-stern{margin-left:auto;color:var(--pl42-gold-bright,#f4c95d);font-style:normal;font-size:13px}
.pl511-ziele{display:flex;flex-wrap:wrap;gap:5px}
.pl511-ziel{
  font-size:10.5px;font-weight:700;letter-spacing:.02em;
  padding:2px 8px;border-radius:999px;
  color:var(--pl42-ink-2,#c6d4ea);
  border:1px solid rgba(216,169,53,.28);background:rgba(216,169,53,.07);
}
.pl511-ziel b{color:var(--pl42-gold-bright,#f4c95d);font-weight:800}
.pl511-fuss{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto}
.pl511-last{font-size:10px;letter-spacing:2px;color:var(--pl42-ink-4,#7f95b8);user-select:none}

/* Auto-Plan: Auswahllisten mit Gruppenueberschriften lesbar halten */
.rotation-grid-v13 select optgroup{font-style:normal;font-weight:800}

@media (max-width:640px){
  .pl511-uebungen{grid-template-columns:1fr}
  .pl511-kategorien{gap:6px}
}