*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
/* Keine globalen html/body/svg-Regeln — CSS wird auf ganzen WP-Seiten geladen. */
text{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
circle,line,polygon{shape-rendering:geometricPrecision}

/* 2026-05-23: Header (Title + Sub-Text) ausgeblendet — das eingebettete
 * iframe-Embed im Praxis-Theme zeigt Title + Erklärung schon außerhalb
 * des Frames. Innerhalb der Stage bleibt nur das Suchfeld als UI. */
#header{display:none}

#search-box{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:100;
  width:min(440px, calc(100% - 36px));max-width:440px}
#search-input{width:100%;padding:10px 16px 10px 38px;border-radius:24px;border:1px solid rgba(2,128,144,0.3);background:rgba(10,15,26,0.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#E0E0E0;font-family:inherit;font-size:13px;outline:none;transition:border-color 0.2s;text-overflow:ellipsis}
#search-input:focus{border-color:#02C39A}
#search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#607080;font-size:14px;pointer-events:none}

/* Schmale Viewports (z. B. iframe-Embed im Praxis-Theme): Header weicht
 * nach links-oben (kompakt), Suchfeld rutscht darunter, beides bleibt
 * absolute-positioniert über dem SVG-Graphen. */
@media (max-width: 720px) {
  #search-box{top:10px;left:50%;transform:translateX(-50%);width:calc(100% - 28px);max-width:420px}
  #search-input{font-size:14px;padding-top:12px;padding-bottom:12px}
}

#legend{position:absolute;bottom:20px;right:20px;z-index:100;display:flex;gap:16px;align-items:center;font-size:11px;color:#8899AA}
.legend-item{display:flex;align-items:center;gap:5px}
.legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.legend-diamond{width:8px;height:8px;transform:rotate(45deg);flex-shrink:0;border-radius:1px}

#info-panel{position:absolute;top:90px;right:28px;z-index:100;width:280px;background:rgba(10,15,26,0.85);border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:0;display:none;overflow:hidden}
#info-header{padding:16px 20px 12px;border-bottom:1px solid rgba(255,255,255,0.06)}
#info-header h2{font-size:16px;font-weight:600;color:#E8E8E8}
#info-header .info-type{font-size:11px;text-transform:uppercase;letter-spacing:1px;margin-top:4px}
#info-body{padding:14px 20px 18px;font-size:12px;line-height:1.6;color:#99AABB;max-height:400px;overflow-y:auto}
#info-body .info-section{margin-bottom:10px}
#info-body .info-section-title{font-size:10px;text-transform:uppercase;letter-spacing:0.8px;color:#607080;margin-bottom:4px}
#info-body .info-connected{display:flex;flex-wrap:wrap;gap:4px}
#info-body .info-tag{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;background:rgba(2,128,144,0.15);color:#02C39A;border:1px solid rgba(2,128,144,0.25)}
#info-close{position:absolute;top:12px;right:14px;background:none;border:none;color:#607080;cursor:pointer;font-size:18px;line-height:1}

#tooltip{position:absolute;z-index:200;padding:8px 14px;border-radius:8px;background:rgba(10,15,26,0.92);border:1px solid rgba(255,255,255,0.1);font-size:12px;color:#D0D8E0;pointer-events:none;display:none;max-width:260px;white-space:nowrap}

#node-count{display:none}

#error-log{position:fixed;bottom:0;left:0;right:0;background:#E63946;color:white;padding:8px 16px;font-size:12px;display:none;z-index:9999}

.pxz-hg-stage--hosted {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: auto;
  min-height: 420px;
}
.pxz-hg-stage--hosted .pxz-hg-hosted-chrome {
  position: relative;
  z-index: 110;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 4px 10px;
}
.pxz-hg-stage--hosted .pxz-hg-hosted-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
  margin: 0;
  padding-right: 0;
}
.pxz-hg-stage--hosted .pxz-hg-hosted-header strong {
  font-size: 1rem;
  color: #e8e8e8;
}
.pxz-hg-stage--hosted .pxz-hg-hosted-header span {
  font-size: 0.85rem;
  color: #8899aa;
}
.pxz-hg-stage--hosted #search-box {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  width: 100%;
  max-width: none;
  margin: 0;
}
.pxz-hg-stage--hosted #legend {
  position: relative;
  bottom: auto;
  right: auto;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 0;
}
@media (min-width: 721px) {
  .pxz-hg-stage--hosted .pxz-hg-hosted-chrome {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 1rem;
    row-gap: 8px;
  }
  .pxz-hg-stage--hosted .pxz-hg-hosted-header {
    grid-column: 1;
    grid-row: 1;
  }
  .pxz-hg-stage--hosted #legend {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-end;
  }
  .pxz-hg-stage--hosted #search-box {
    grid-column: 1 / -1;
    grid-row: 2;
    max-width: 520px;
    justify-self: start;
  }
}
.pxz-hg-stage--hosted #graph {
  width: 100%;
  height: min(62vh, 520px);
  min-height: 280px;
  flex: 1 1 auto;
  display: block;
}
.pxz-hg-stage--hosted #header { display: none; }
.pxz-hg-stage--hosted #info-panel { top: 12px; right: 12px; }