/* ============ DESIGN TOKENS — retheme here when embedding ============ */
:root {
  --bg: #0a0e18;            /* page canvas */
  --bg-band-a: rgba(19,27,48,.5);
  --bg-band-b: rgba(19,27,48,.28);
  --bg-rail: rgba(16,24,44,.55);
  --bg-chrome: #0e1422;     /* header/footer/facetbar */
  --border: #1e2a44;
  --text: #e8eefc;
  --text-dim: #8a9ab8;
  --text-faint: #57647f;
  --accent: #0d7377;        /* QuaLCA petrol */
  --accent-bright: #14a3a8;
  --edge: #26314e;
  --edge-lit: #3f7df8;
  /* node colors by kind */
  --kind-norm: #8a7af4;
  --kind-pcr: #e88a3c;
  --kind-c-pcr: #f4b842;
  --kind-programmhalter-regelwerk: #4aa8f4;
  --kind-regulation: #f45b7a;
  --kind-initiative: #42d4a8;
  --kind-guideline: #48c8e8;
  --kind-unknown: #6a7a9a;
  --dim-opacity: .22;
  --fade-status: .45;       /* extra multiplier: abgelaufen/entwurf/out-of-scope */
  --glow: drop-shadow(0 0 5px currentColor);
  --radius: 10px;
  font-size: 16px;
}
/* ============ frame ============ */
* { box-sizing: border-box; margin: 0; }
body { background: var(--bg); color: var(--text); font-family: system-ui, "Segoe UI", sans-serif;
       display: flex; flex-direction: column; height: 100vh; }
.site-header { display: flex; justify-content: space-between; align-items: baseline;
  padding: 14px 22px; background: var(--bg-chrome); border-bottom: 1px solid var(--border); }
.site-header h1 { font-size: 1.25rem; letter-spacing: .3px; }
.tagline { color: var(--text-dim); font-size: .8rem; }
.brand { color: var(--accent-bright); font-weight: 700; text-decoration: none; }
#facetbar { display: flex; flex-wrap: wrap; gap: 18px; padding: 10px 22px;
  background: var(--bg-chrome); border-bottom: 1px solid var(--border); }
.stage-wrap { position: relative; flex: 1; min-height: 0; }
#stage { width: 100%; height: 100%; display: block; touch-action: none; }
#status-msg { position: absolute; inset: 40% 20% auto; text-align: center;
  color: var(--text-dim); font-size: 1rem; z-index: 5; }
#start-prompt { border-left: 2px solid var(--accent-bright); padding: 2px 14px;
  font-size: .82rem; align-self: center; }
#start-prompt .hint { color: var(--text-dim); font-size: .72rem; }
@media (max-width: 900px) { #start-prompt { display: none; } }
.site-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 22px; background: var(--bg-chrome); border-top: 1px solid var(--border);
  color: var(--text-dim); font-size: .78rem; }
.cta { background: var(--accent); color: #fff; padding: 5px 14px; border-radius: 6px;
  text-decoration: none; font-weight: 600; white-space: nowrap; }
.disclaimer { color: var(--text-faint); font-size: .65rem; margin-top: 2px; max-width: 720px; }
#fit-view { position: absolute; left: 14px; bottom: 12px; z-index: 4; font-size: .75rem;
  padding: 5px 12px; border-radius: 6px; border: 1px solid var(--border);
  background: rgba(14,20,34,.92); color: var(--text-dim); cursor: pointer; }
#fit-view:hover { color: var(--accent-bright); border-color: var(--accent); }
#legend { position: absolute; right: 14px; bottom: 12px; background: rgba(14,20,34,.92);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 12px;
  font-size: .75rem; z-index: 4; max-width: 260px; }
#panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(400px, 90vw);
  background: rgba(10,14,24,.97); border-left: 1px solid var(--border); padding: 18px;
  overflow-y: auto; z-index: 6; }
#edge-tip { position: fixed; background: #0e1626; border: 1px solid var(--edge-lit);
  border-radius: 6px; padding: 8px 10px; font-size: .75rem; max-width: 320px; z-index: 7;
  pointer-events: none; }
@media (max-width: 720px) {
  #panel { top: auto; left: 0; width: 100%; max-height: 55vh; border-left: none;
    border-top: 1px solid var(--border); }
  .site-header h1 { font-size: 1rem; }
}
/* ============ map ============ */
.band-bg { fill: var(--bg-band-a); }
.band-bg.alt { fill: var(--bg-band-b); }
.band-bg.faded, .rail-bg.faded { opacity: .5; }
.rail-bg { fill: var(--bg-rail); }
.band-label { fill: var(--text-faint); font-size: 11px; font-weight: 600;
  letter-spacing: 1.2px; text-transform: uppercase; }
.band-note { fill: #45536e; font-size: 9px; }
.edge-line { stroke: var(--edge); stroke-width: .9; opacity: .55; fill: none; }
.edge-hit { stroke: transparent; stroke-width: 12; fill: none; }
.edge.lit .edge-line { stroke: var(--edge-lit); stroke-width: 1.4; opacity: .75; }
.edge.lit:hover .edge-line { stroke-width: 2; opacity: 1; }
.edge.half .edge-line { stroke: var(--edge-lit); stroke-width: 1; opacity: .35; }
.edge.half:hover .edge-line { stroke-width: 1.6; opacity: .7; }
/* edge types tell different stories — make them look different (feedback round 8) */
.typ-verweist_auf .edge-line { stroke-dasharray: 5 4; }
.typ-konkretisiert .edge-line { stroke-dasharray: 1.5 3; }
.typ-ersetzt .edge-line { stroke-dasharray: 9 3; }
.typ-deliverable .edge-line { stroke: var(--accent-bright); stroke-width: 1.8; opacity: .9; }
.edge.dim { opacity: .18; }
/* dimmed edges are invisible-ish — no hover tooltips popping out of nowhere */
.edge.dim .edge-hit { pointer-events: none; }
.node { cursor: pointer; }
.node-dot { filter: var(--glow); }
.kind-norm .node-dot { fill: var(--kind-norm); color: var(--kind-norm); }
.kind-pcr .node-dot { fill: var(--kind-pcr); color: var(--kind-pcr); }
.kind-c-pcr .node-dot { fill: var(--kind-c-pcr); color: var(--kind-c-pcr); }
.kind-programmhalter-regelwerk .node-dot { fill: var(--kind-programmhalter-regelwerk); color: var(--kind-programmhalter-regelwerk); }
.kind-regulation .node-dot { fill: var(--kind-regulation); color: var(--kind-regulation); }
.kind-initiative .node-dot { fill: var(--kind-initiative); color: var(--kind-initiative); }
.kind-guideline .node-dot { fill: var(--kind-guideline); color: var(--kind-guideline); }
.node:not([class*="kind-norm"]):not([class*="kind-pcr"]):not([class*="kind-c-pcr"]):not([class*="kind-programmhalter"]):not([class*="kind-regulation"]):not([class*="kind-initiative"]):not([class*="kind-guideline"]) .node-dot
  { fill: var(--kind-unknown); color: var(--kind-unknown); }
.node-label { fill: var(--text); font-size: 10.5px; font-weight: 600;
  text-anchor: middle; opacity: 0; transition: opacity .2s; paint-order: stroke;
  stroke: rgba(10,14,24,.85); stroke-width: 3px; }
.node.lit .node-label, .zoomed .node-label { opacity: 1; }
.zoomed .node.dim .node-label { opacity: .35; }
.node.dim { opacity: var(--dim-opacity); }
.status-abgelaufen, .status-entwurf { opacity: calc(1 * var(--fade-status)); }
.status-abgelaufen .node-dot { stroke: var(--kind-c-pcr); stroke-dasharray: 3 2; stroke-width: 1.5; }
.status-entwurf .node-dot { stroke-dasharray: 2 2; stroke: var(--text-dim); stroke-width: 1.5; }
.node.dim.status-abgelaufen, .node.dim.status-entwurf { opacity: calc(var(--dim-opacity) * var(--fade-status)); }
.node.in-faded-band { opacity: calc(1 * var(--fade-status)); }
.fallback-ring { fill: none; stroke: #f45b7a; stroke-dasharray: 4 3; stroke-width: 1.2; }
/* ============ facets ============ */
.fgroup { display: flex; flex-direction: column; gap: 5px; }
.glabel { font-size: .6rem; text-transform: uppercase; letter-spacing: 1.4px; color: var(--text-faint); }
.glabel .soon { color: var(--accent-bright); text-transform: none; letter-spacing: 0; }
.frow { display: flex; gap: 4px; flex-wrap: wrap; }
.chip { font-size: .72rem; padding: 3px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid #2e3e5e; color: var(--text-dim); background: transparent; }
.chip.on { background: var(--accent); border-color: var(--accent-bright); color: #fff;
  box-shadow: 0 0 10px rgba(20,163,168,.45); }
.chip:disabled { opacity: .38; cursor: not-allowed; }
.subsel { font-size: .72rem; padding: 4px 8px; border-radius: 6px; background: #101a30;
  border: 1px solid #2e3e5e; color: var(--text); max-width: 230px; }
.fgroup.step-locked { opacity: .4; }
.chain-btn { font-size: .72rem; padding: 3px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--accent-bright); background: var(--accent); color: #fff; font-weight: 600; }
.chain-btn:disabled { opacity: .35; cursor: not-allowed; }
#focus { position: fixed; inset: 0; z-index: 5; background: var(--bg);
  padding: 18px 26px; overflow-y: auto; }
.focus-head { display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 14px; }
.focus-head h2 { font-size: 1.15rem; }
#focus-filters { color: var(--accent-bright); font-size: .8rem; margin-top: 4px; }
#focus-close { font-size: .78rem; padding: 5px 14px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--border); background: transparent; color: var(--text-dim); }
#focus-close:hover { color: var(--accent-bright); border-color: var(--accent); }
.focus-body { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; align-items: start; }
#focus-stage { width: 100%; height: calc(100vh - 150px); touch-action: none;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: radial-gradient(ellipse at 50% 30%, #101726 0%, var(--bg) 75%); }
#focus-table { max-height: calc(100vh - 150px); overflow-y: auto; }
#focus .node-label { opacity: 1; font-size: 12px; }
#focus .edge-line { stroke: var(--edge-lit); opacity: .5; }
#focus .edge:hover .edge-line { stroke-width: 2; opacity: .95; }
#focus-table table { width: 100%; border-collapse: collapse; font-size: .76rem; }
#focus-table th { text-align: left; color: var(--text-faint); font-weight: 600;
  text-transform: uppercase; font-size: .62rem; letter-spacing: 1px; padding: 6px 8px; }
#focus-table td { padding: 7px 8px; border-top: 1px solid var(--border); color: var(--text-dim); }
#focus-table td:first-child { color: var(--text); }
#focus-table .tsec td { color: var(--accent-bright); font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.2px; padding-top: 14px; border-top: none; }
#focus-table a { color: var(--accent-bright); text-decoration: none; }
@media (max-width: 900px) { .focus-body { grid-template-columns: 1fr; } }
.facet-toggle { margin-left: auto; align-self: flex-start; font-size: .72rem;
  padding: 3px 11px; border-radius: 6px; border: 1px solid var(--accent);
  background: transparent; color: var(--accent-bright); cursor: pointer; white-space: nowrap; }
#facetbar.collapsed .fgroup { display: none; }
.node.search-hit .node-dot { stroke: #fff; stroke-width: 2; }
.node.search-hit .node-label { opacity: 1; }
.node.selected .node-dot { stroke: #fff; stroke-width: 2.5;
  filter: drop-shadow(0 0 8px currentColor) drop-shadow(0 0 18px currentColor); }
.node.selected .node-label { opacity: 1; }
.node.selected { opacity: 1 !important; }
@media (max-width: 720px) { #facetbar { gap: 10px; } .subsel { max-width: 160px; } }
/* ============ panel + tooltip ============ */
.panel-close { float: right; background: none; border: none; color: var(--text-dim);
  font-size: 1.3rem; cursor: pointer; }
.panel-kind { color: var(--accent-bright); font-size: .72rem; text-transform: uppercase;
  letter-spacing: 1px; }
#panel h2 { font-size: 1rem; margin: 6px 0 10px; }
.panel-meta { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; font-size: .78rem; }
.panel-meta dt { color: var(--text-faint); }
.panel-profile { font-size: .82rem; line-height: 1.5; color: var(--text-dim); margin: 12px 0; }
#panel h3 { font-size: .8rem; margin: 10px 0 6px; color: var(--text-faint); }
.panel-edges { list-style: none; padding: 0; font-size: .78rem; }
.panel-edges li { margin-bottom: 8px; }
.panel-edges button { background: none; border: none; color: var(--text); cursor: pointer;
  text-align: left; padding: 0; font-size: .78rem; }
.panel-edges button:hover { color: var(--accent-bright); }
.etyp { color: var(--accent-bright); font-size: .7rem; }
.ewhy { color: var(--text-faint); font-size: .72rem; margin: 2px 0 0 14px; }
.panel-src { display: inline-block; margin-top: 10px; color: var(--accent-bright); }
#edge-tip .etyp { display: block; margin: 3px 0; }
#edge-tip p { color: var(--text-dim); }
/* ============ legend ============ */
.leg-sec { margin-bottom: 8px; color: var(--text-dim); line-height: 1.7; }
.leg-dot.kind-norm { color: var(--kind-norm); } .leg-dot.kind-pcr { color: var(--kind-pcr); }
.leg-dot.kind-c-pcr { color: var(--kind-c-pcr); }
.leg-dot.kind-programmhalter-regelwerk { color: var(--kind-programmhalter-regelwerk); }
.leg-dot.kind-regulation { color: var(--kind-regulation); }
.leg-dot.kind-initiative { color: var(--kind-initiative); }
.leg-dot.kind-guideline { color: var(--kind-guideline); }
.leg-faded { opacity: .25; } .leg-dashed { color: var(--text-dim); }
.leg-line { display: inline-block; width: 26px; height: 0; vertical-align: middle;
  border-top: 2px solid var(--edge-lit); margin-right: 4px; }
.leg-line.dashed { border-top-style: dashed; }
.kind-deliverable .node-dot { fill: var(--accent-bright); color: var(--accent-bright); }
#focus .kind-deliverable .node-label { font-size: 13px; }