/* beziehungen.css: nur fuer die Beziehungs-Schublade und die Beziehungs-
   Zeilen im Steckbrief. Alles hier faengt mit bz- an, damit dieses Blatt
   nichts anfassen kann, was ihm nicht gehoert. Farben kommen ausschliesslich
   aus den Variablen in style.css, darum gehen Neon, Pergament und Nacht
   automatisch mit. Das Glas-Rezept ist dasselbe wie im HUD und in
   statistik.css: halbtransparent, unscharfer Grund, leuchtende Schrift. */

/* Das Netzbild und die Paarliste brauchen mehr als 400 Pixel. Die Klasse
   setzt das Modul selbst auf seine Lade, style.css bleibt unberuehrt. */
.lade.bz-lade{width:min(760px, 100vw)}
@media(max-width:760px){ .lade.bz-lade{width:100vw} }

/* ---- Einleitung und Ueberschriften ---- */
.bz-note{font-size:11px; color:var(--les); line-height:1.55}
.bz-note b{color:var(--gelb); font-family:ui-monospace,Menlo,monospace}
.bz-h{
  font-size:10px; letter-spacing:3px; text-transform:uppercase; color:var(--cyan);
  margin-top:6px; padding-top:8px; border-top:1px solid var(--glasrand);
  text-shadow:0 0 14px color-mix(in srgb, var(--cyan) 40%, transparent);
}
.bz-leer{font-size:12px; color:var(--mut); padding:20px 0; text-align:center}

/* ---- Kennzahlen ---- */
.bz-kacheln{display:grid; grid-template-columns:repeat(auto-fill, minmax(168px, 1fr)); gap:8px}
.bz-kachel{
  display:flex; flex-direction:column; gap:2px; padding:9px 11px; border-radius:12px;
  background:linear-gradient(180deg, var(--glanz), transparent 55%), var(--glas2);
  border:1px solid color-mix(in srgb, var(--glasrand) 75%, transparent);
  box-shadow:inset 0 1px 0 var(--glanz), 0 2px 10px rgba(0,0,0,.22);
}
.bz-kachel span{font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--mut)}
.bz-kachel b{
  font-size:21px; line-height:1.1; font-family:ui-monospace,Menlo,monospace; color:var(--gelb);
  text-shadow:0 0 16px color-mix(in srgb, var(--gelb) 45%, transparent);
}
.bz-kachel i{font-style:normal; font-size:10px; color:var(--les); line-height:1.45}

/* ---- Netzbild ---- */
.bz-cv{
  width:100%; display:block; border-radius:10px; background:var(--tief);
  border:1px solid var(--glasrand); box-shadow:inset 0 1px 0 var(--glanz);
}
.bz-legende{display:flex; flex-wrap:wrap; gap:4px 12px; font-size:10px; color:var(--mut)}

/* ---- Liste der engsten Paare ----
   Drei Spalten: Name, Balken, Name. Der Balken sitzt in einer eigenen Bahn,
   damit die Namen nicht springen, wenn die Bindung waechst. */
.bz-paare{display:flex; flex-direction:column; gap:3px}
.bz-paar{
  display:grid; grid-template-columns:1fr 68px 1fr auto; align-items:center; gap:8px;
  padding:5px 9px; border-radius:9px; font-size:11px; color:var(--txt);
  background:var(--glas2); border:1px solid color-mix(in srgb, var(--glasrand) 55%, transparent);
}
.bz-paar span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bz-paar span:first-child{text-align:right}
.bz-paar i{
  display:block; height:5px; border-radius:3px; min-width:3px;
  background:linear-gradient(90deg, var(--lila), var(--cyan));
  box-shadow:0 0 10px color-mix(in srgb, var(--cyan) 45%, transparent);
}
.bz-paar em{
  font-style:normal; font-size:9px; letter-spacing:1px; text-transform:uppercase;
  color:var(--mut); white-space:nowrap;
}

/* ---- Beziehungen im Steckbrief ----
   Wird von steckbrief.js gefuellt, siehe beziehungsListe(). Eine Zeile je
   Bekanntem: Name, Art der Beziehung, Balken fuer die Staerke. */
.bz-brief{display:flex; flex-direction:column; gap:2px}
.bz-b{
  display:grid; grid-template-columns:1fr auto 54px; align-items:center; gap:7px;
  font-size:11px; color:var(--txt); padding:2px 0; cursor:pointer;
}
.bz-b:hover{color:var(--cyan)}
.bz-b > span:first-child{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bz-b em{
  font-style:normal; font-size:9px; letter-spacing:1px; text-transform:uppercase; color:var(--mut);
}
.bz-b .bahn{display:block; height:5px; border-radius:3px; background:var(--tief); overflow:hidden}
.bz-b .bahn i{display:block; height:100%; background:var(--cyan); border-radius:3px}

/* Partnerschaft und Verwandtschaft heben sich ab, sonst sucht man in acht
   gleich aussehenden Zeilen nach der einen, die zaehlt. */
.bz-b.paar em{color:var(--lila)}
.bz-b.paar .bahn i{background:linear-gradient(90deg, var(--lila), var(--cyan))}
.bz-b.sippe em{color:var(--gelb)}
.bz-b.feind em{color:var(--rot)}
.bz-b.feind .bahn i{background:var(--rot)}

/* Trauer. Steht nur da, wenn tatsaechlich getrauert wird. */
.bz-trauer{
  font-size:11px; color:var(--schlechtTxt); line-height:1.5;
  padding:5px 9px; border-radius:9px;
  background:color-mix(in srgb, var(--rot) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--rot) 35%, transparent);
}