/* lebensbaum.css — ALION Kabbalistischer Lebensbaum */

/* SVG-Container */
#lebensbaum-svg {
  display: block;
  margin: 1rem auto;
  background: radial-gradient(ellipse at center, #111128 0%, #0a0a18 100%);
  border: 1px solid rgba(120, 160, 255, 0.2);
  border-radius: 12px;
  width: 100%;
  max-width: 600px;
  height: auto;
  aspect-ratio: 600 / 700;
  min-height: 400px;
}

/* Sefira-Kreise */
.sefira-kreis {
  transition: stroke-width 0.15s, stroke 0.15s;
  filter: drop-shadow(0 0 6px rgba(150,180,255,0.4));
}
.sefira-kreis:hover {
  filter: drop-shadow(0 0 12px rgba(200,220,255,0.8));
}

/* Pfad-Linien */
.pfad-linie {
  transition: stroke 0.15s, stroke-width 0.15s;
}

/* Tooltip */
#tooltip {
  position: fixed;
  display: none;
  background: rgba(14, 14, 30, 0.96);
  border: 1px solid rgba(120, 160, 255, 0.4);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  color: #dde;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
  z-index: 100;
  max-width: 280px;
  pointer-events: none;
  line-height: 1.5;
}
#tooltip strong {
  color: #c0e0ff;
  display: block;
  margin-bottom: 3px;
}
#tooltip em {
  color: #8899bb;
  font-style: normal;
  font-size: 12px;
}

/* Tabellen-Container */
.path-details-table-container {
  overflow-x: auto;
  padding: 0 0.5rem 2rem;
  max-width: 1280px;
  margin: 0 auto;
}

/* Tabelle */
.path-details-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: #ccd;
}
.path-details-table th {
  color: #8899bb;
  font-weight: 500;
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid rgba(120, 160, 255, 0.2);
  text-align: left;
  white-space: nowrap;
}
.path-details-table td {
  padding: 0.45rem 0.7rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  vertical-align: top;
}
.path-details-table tr[data-pfad-nr] {
  cursor: pointer;
  transition: background 0.15s;
}
.path-details-table tr[data-pfad-nr]:hover {
  background: rgba(100, 140, 255, 0.08);
}
.path-details-table tr.aktiv {
  background: rgba(255, 220, 80, 0.12);
  color: #ffe066;
}
.path-details-table tr.aktiv td {
  border-bottom-color: rgba(255, 220, 80, 0.2);
}

/* Responsive */
@media (max-width: 600px) {
  .path-details-table th,
  .path-details-table td {
    font-size: 11px;
    padding: 0.35rem 0.5rem;
  }
}