/* ==========================================================================
   CraftPartner — Grundstil des semantischen Netzes (shared/graph.js).
   Nur Geometrie und Verhalten. Farben setzt jede Version über die Variablen
   unten selbst, sonst sähe das Netz überall gleich aus.
   ========================================================================== */

svg[data-graph]{
  /* Rückfallwerte — jede Version überschreibt sie. */
  --cp-graph-edge:#cfcabd;
  --cp-graph-edge-lit:#a06a12;
  --cp-graph-edge-dim:#e6e2d8;
  --cp-graph-hub:#a06a12;
  --cp-graph-node:#2f4a6b;
  --cp-graph-node-alt:#7d8ea6;
  --cp-graph-node-dim:#dcd8ce;
  --cp-graph-label:#5c6470;
  --cp-graph-label-hub:#1a1d23;
  --cp-graph-label-dim:#b6b2a8;
  --cp-graph-surface:#ffffff;
  --cp-graph-label-size:10px;

  width:100%;height:auto;overflow:visible;display:block;
}

.cp-graph__edge{
  stroke:var(--cp-graph-edge);stroke-width:1.2;
  transition:stroke .18s ease,stroke-width .18s ease;
}
.cp-graph__edge.is-lit{stroke:var(--cp-graph-edge-lit);stroke-width:2}

.cp-graph__hit{fill:transparent;stroke:transparent;stroke-width:18;pointer-events:stroke}
.cp-graph__dot{fill:var(--cp-graph-node);transition:fill .18s ease;pointer-events:none}
.cp-graph__node--l0 .cp-graph__dot{fill:var(--cp-graph-hub)}
.cp-graph__node--l2 .cp-graph__dot,
.cp-graph__node--l3 .cp-graph__dot{fill:var(--cp-graph-node-alt)}

.cp-graph__label{
  font:500 var(--cp-graph-label-size)/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  fill:var(--cp-graph-label);letter-spacing:.02em;pointer-events:none;
  /* Kontur in Flächenfarbe, damit Beschriftungen über Kanten lesbar bleiben. */
  paint-order:stroke;stroke:var(--cp-graph-surface);stroke-width:3.5px;
  transition:fill .18s ease;
}
.cp-graph__node--l0 .cp-graph__label{
  font-size:calc(var(--cp-graph-label-size) + 1.5px);font-weight:700;fill:var(--cp-graph-label-hub);
}

/* Beim Zeigen tritt alles zurück, was nicht am Knoten hängt. */
svg[data-graph].is-focused .cp-graph__edge:not(.is-lit){stroke:var(--cp-graph-edge-dim)}
svg[data-graph].is-focused .cp-graph__node:not(.is-lit) .cp-graph__dot{fill:var(--cp-graph-node-dim)}
svg[data-graph].is-focused .cp-graph__node:not(.is-lit) .cp-graph__label{fill:var(--cp-graph-label-dim)}
svg[data-graph] .cp-graph__node.is-lit .cp-graph__label{fill:var(--cp-graph-label-hub)}

@media (prefers-reduced-motion:no-preference){
  .cp-graph__edge{opacity:0;animation:cp-graph-wire .5s ease forwards}
  .cp-graph__node{opacity:0;animation:cp-graph-pop .4s ease forwards}
  @keyframes cp-graph-wire{to{opacity:1}}
  @keyframes cp-graph-pop{from{transform:scale(.92)}to{opacity:1}}
}

@media (prefers-reduced-motion:reduce){
  .cp-graph__edge,.cp-graph__node{opacity:1;animation:none}
  .cp-graph__edge,.cp-graph__dot,.cp-graph__label{transition:none}
}

@media (max-width:52rem){
  svg[data-graph]{--cp-graph-label-size:11px}
}