/* PROJECT LEGEND V0.52.0 - S2-4: Kurzkarte in der Tabellenzeile.

   Nur Marken, keine Literale: ab v0533 prueft audit-v0510/werkzeuge/stil-wache.pl
   dieses Blatt HART - keine Hexfarbe, kein rgb(), kein !important, kein
   var(--marke,LITERAL), kein Literal bei font-size, border-radius,
   letter-spacing oder box-shadow, keine nackte Elementregel.

   Die Karte sitzt IM Fluss (eine zusaetzliche <tr> bzw. ein <div> unter der
   Zeile). Deshalb kein position, kein z-index, kein Nachfuehren beim Scrollen -
   siehe die Begruendung im Kopf von v0534-spielerkarte.js. */

#pl420Root .pl534-zeile>td{
  padding:0;
  background:var(--pl42-panel-2);
}
#pl420Root .pl534-karte{
  display:flex;
  flex-direction:column;
  gap:var(--pl42-s2);
  padding:var(--pl42-s3) var(--pl42-s4);
  border-top:1px solid var(--pl42-line-strong);
  border-bottom:1px solid var(--pl42-line);
  background:var(--pl42-panel-3);
}
#pl420Root .pl534-block{
  margin:var(--pl42-s2) 0 var(--pl42-s3);
  border-radius:var(--pl42-r-sm);
  overflow:hidden;
  border:1px solid var(--pl42-line);
}
#pl420Root .pl534-block .pl534-karte{
  border-top:0;
  border-bottom:0;
}

#pl420Root .pl534-kopf{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--pl42-s3);
  flex-wrap:wrap;
}
#pl420Root .pl534-wer{
  display:flex;
  flex-direction:column;
  gap:var(--pl42-s1);
  min-width:0;
}
#pl420Root .pl534-wer>b{
  font-size:var(--pl42-h3);
  color:var(--pl42-ink);
  line-height:1.2;
}
#pl420Root .pl534-wer>small{
  font-size:var(--pl42-small);
  color:var(--pl42-ink-3);
}

#pl420Root .pl534-knoepfe{
  display:flex;
  align-items:center;
  gap:var(--pl42-s2);
  flex-shrink:0;
}
#pl420Root .pl534-knopf{
  min-height:var(--pl42-touch);
  padding:0 var(--pl42-s3);
  border:1px solid var(--pl42-line-strong);
  border-radius:var(--pl42-r-sm);
  background:var(--pl42-panel);
  color:var(--pl42-ink-2);
  font-size:var(--pl42-small);
  cursor:pointer;
}
#pl420Root .pl534-knopf:hover{
  color:var(--pl42-gold-bright);
  border-color:var(--pl42-gold-deep);
}
#pl420Root .pl534-knopf--still{
  min-width:var(--pl42-touch);
  padding:0;
  color:var(--pl42-ink-4);
}

#pl420Root .pl534-felder{
  display:flex;
  flex-wrap:wrap;
  gap:var(--pl42-s2) var(--pl42-s6);
}
#pl420Root .pl534-feld{
  display:flex;
  flex-direction:column;
  gap:var(--pl42-s1);
  min-width:0;
}
#pl420Root .pl534-etikett{
  font-size:var(--pl42-label);
  font-weight:800;
  letter-spacing:var(--pl42-track-label);
  text-transform:uppercase;
  color:var(--pl42-ink-4);
}
#pl420Root .pl534-feld>b{
  font-size:var(--pl42-body);
  color:var(--pl42-ink);
  font-variant-numeric:tabular-nums;
}

#pl420Root .pl534-kenntnis,
#pl420Root .pl534-leer{
  font-size:var(--pl42-small);
  color:var(--pl42-ink-3);
}

/* Die anklickbare Zeile bekommt dieselbe Rueckmeldung wie andere Klickziele
   der Flaeche. Ohne cursor:pointer liest sich eine Tabellenzeile als Text. */
#pl420Root tr[data-pl42-act="pl534-karte"]{
  cursor:pointer;
}
#pl420Root tr[data-pl42-act="pl534-karte"]:hover>td{
  background:var(--pl42-gold-wash);
}
#pl420Root tr[data-pl42-act="pl534-karte"][aria-expanded="true"]>td{
  background:var(--pl42-gold-wash);
}
#pl420Root tr[data-pl42-act="pl534-karte"]:focus-visible{
  outline:2px solid var(--pl42-gold);
  outline-offset:-2px;
}

/* Auf dem Telefon steht die Knopfzeile unter dem Namen statt daneben. */
@media (max-width:640px){
  #pl420Root .pl534-kopf{
    flex-direction:column;
    align-items:stretch;
  }
  #pl420Root .pl534-knoepfe{
    justify-content:flex-start;
  }
}