/* hd-explorer.css — Bodygraph-Explorer (akarion.de). Quelle: web/assets/hd-explorer.css.
 * Eigenständig (keine Abhängigkeit von Seitenstilen), Präfix .hx. Typen-Farben: hd-typen.css / HD_TYPE_COLORS. */
.hx { --hx-line: #4e3a78; --hx-off: #d9d0ea; --hx-ink: #2a2837; --hx-muted: #6f6a85; --hx-accent: #6b4fa0;
  position: relative; display: flex; flex-direction: column; gap: 14px; color: var(--hx-ink);
  font-family: 'Source Sans 3', system-ui, sans-serif; }
@media (min-width: 960px) {
  .hx:not(.hx--hero) { flex-direction: row-reverse; align-items: flex-start; gap: 40px; }
  .hx:not(.hx--hero) .hx-side { flex: 1 1 0; padding-top: 12px; }
  .hx:not(.hx--hero) .hx-stage { flex: 0 0 440px; }
}
.hx-stage { position: relative; width: 100%; max-width: 440px; margin: 0 auto; }
.hx-svg { display: block; width: 100%; height: auto; overflow: visible; -webkit-tap-highlight-color: transparent; }

/* Zentren */
.hx-zentrum path { fill: #fff; stroke: var(--cc); stroke-opacity: .6; stroke-width: 2.5;
  transition: fill .5s ease, stroke .5s ease, stroke-width .3s ease; }
.hx-zentrum.defined path { fill: var(--cc); stroke-opacity: 1; filter: drop-shadow(0 0 7px rgba(122, 94, 168, .35)); }
.hx-zentrum text { font-size: 12px; font-weight: 600; fill: #a89fc0; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-opacity: .65; pointer-events: none; }
.hx-zentrum.defined text { fill: #3a2f55; }
/* Kanäle + Tore */
.hx-fl { stroke: #000; stroke-opacity: 0; stroke-width: 18; }
.hx-half { stroke: var(--hx-off); stroke-width: 3; stroke-linecap: round; transition: stroke .5s ease, stroke-width .3s ease; }
.hx-half.on { stroke: var(--hx-line); stroke-width: 5; }
.hx-tor .hx-gfl { fill: #000; fill-opacity: 0; }
.hx-tor .hx-gc { fill: #fff; fill-opacity: .8; stroke: #d9d0ea; stroke-width: .8; transition: fill .4s ease; }
.hx-tor text { font-size: 9px; font-weight: 600; fill: #8f88a8; pointer-events: none; }
.hx-tor.defined text { fill: #2a2140; font-weight: 700; }
.hx-tor.defined .hx-gc { fill: #fff; stroke: var(--hx-line); stroke-width: 1.5; }

/* Typ-Ansicht („Zeig mir einen …"): definierte Elemente in Typenfarbe, Schlüssel-Elemente pulsieren */
.hx-typ .hx-zentrum.defined path { fill: var(--hx-typ); stroke: var(--hx-typ); filter: none; }
.hx-typ .hx-half.on { stroke: var(--hx-typ); }
.hx-typ .hx-tor.defined .hx-gc { stroke: var(--hx-typ); }
.hx-typ .hx-zentrum.hx-key path { stroke: #2a2140; stroke-opacity: .85; stroke-width: 4; animation: hx-key 1.6s ease-in-out infinite alternate; }
.hx-typ .hx-kanal.hx-key .hx-half { stroke-width: 8; animation: hx-keyline 1.6s ease-in-out infinite alternate; }
@keyframes hx-key { from { stroke-width: 3; } to { stroke-width: 7; } }
@keyframes hx-keyline { from { stroke-width: 6; } to { stroke-width: 10; } }

/* Interaktion */
.hx-hit { cursor: pointer; outline: none; }
.hx-hit:hover .hx-half, .hx-hit.hx-sel .hx-half { stroke-width: 7; }
.hx-zentrum.hx-hit:hover path, .hx-zentrum.hx-sel path { stroke: var(--hx-accent); stroke-width: 4; stroke-opacity: 1; }
.hx-tor.hx-hit:hover .hx-gc, .hx-tor.hx-sel .hx-gc { fill: #fff3d6; stroke: #c99a3c; stroke-width: 2; }
.hx-hit:focus-visible path, .hx-hit:focus-visible .hx-half, .hx-hit:focus-visible .hx-gc { stroke: #c99a3c; stroke-width: 6; stroke-opacity: 1; }
.hx-zentrum.hx-pulse path { animation: hx-pulse 1.1s ease-in-out 4; stroke: #c99a3c; stroke-opacity: 1; }
@keyframes hx-pulse { 0%, 100% { stroke-width: 2.5; } 50% { stroke-width: 12; } }
.hx-hinweis { position: absolute; transform: translate(-50%, -100%); background: #191233; color: #fff; font-size: 14px; font-weight: 600;
  padding: 6px 12px; border-radius: 999px; white-space: nowrap; pointer-events: none; box-shadow: 0 6px 18px rgba(25, 18, 51, .3); }
.hx-hinweis::after { content: ""; position: absolute; left: 50%; bottom: -5px; margin-left: -5px; border: 5px solid transparent; border-bottom: 0; border-top-color: #191233; }

/* Seite: Chips, Legende, Beschriftung */
.hx-zeig { margin: 0 0 8px; font-weight: 600; font-size: 15px; color: var(--hx-muted); }
.hx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hx-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 7px 14px; border-radius: 999px;
  border: 2px solid var(--hx-c); background: #fff; color: #2a2140; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  transition: background .2s ease, transform .15s ease; }
.hx-chip:hover { transform: translateY(-1px); }
.hx-chip[aria-pressed="true"] { background: var(--hx-c); color: #1d1633; }
.hx-chip:focus-visible { outline: 3px solid #6b4fa0; outline-offset: 2px; }
.hx-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--hx-c); }
.hx-chip[aria-pressed="true"] .hx-dot { background: #fff; }
.hx-caption { margin: 14px 0 6px; font-size: 16px; line-height: 1.5; }
.hx-caption .hx-cap-typ { color: color-mix(in srgb, var(--hx-typ) 62%, #1d1633); }
.hx-caption a { color: var(--hx-accent); font-weight: 600; }
.hx-reset { background: none; border: 0; padding: 0; font: inherit; color: var(--hx-accent); text-decoration: underline; cursor: pointer; }
.hx-legende { margin: 0; font-size: 13.5px; color: var(--hx-muted); }

/* Karte: Popover (Desktop) bzw. Blatt am unteren Rand (Mobil) */
.hx-card { box-sizing: border-box; position: absolute; z-index: 20; width: 320px; max-width: calc(100vw - 32px); background: #fff; color: var(--hx-ink);
  border: 1px solid #e4e0ef; border-radius: 12px; padding: 14px 16px 12px; box-shadow: 0 16px 40px rgba(25, 18, 51, .22); text-align: left; }
.hx-card[hidden] { display: none; }
.hx-card:focus { outline: none; }
.hx-card p { margin: 0 0 8px; font-size: 15px; line-height: 1.45; }
.hx-card .hx-art { margin: 0 24px 2px 0; font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--hx-muted); }
.hx-card .hx-titel { text-transform: none; letter-spacing: 0; margin: 0 24px 6px 0; font-family: 'Marcellus', serif; font-weight: 400; font-size: 19px; line-height: 1.25; color: #1d1633; }
.hx-card .hx-status { display: inline-block; font-size: 12.5px; font-weight: 700; color: #2f7d5b; background: #e6f4ee; border-radius: 999px; padding: 2px 10px; }
.hx-card .hx-status.aus { color: #6f6a85; background: #f0eef5; }
.hx-card .hx-kern { font-weight: 600; }
.hx-card .hx-mehr { margin: 4px 0 0; }
.hx-card .hx-mehr a { color: var(--hx-accent); font-weight: 700; text-decoration: none; }
.hx-card .hx-mehr a:hover { text-decoration: underline; }
.hx-x { position: absolute; top: 6px; right: 8px; width: 36px; height: 36px; border: 0; background: none; font-size: 24px; line-height: 1;
  color: #8a8798; cursor: pointer; border-radius: 50%; }
.hx-x:hover, .hx-x:focus-visible { background: #f0eef5; color: #1d1633; }
.hx-card.hx-sheet { position: fixed; left: 8px; right: 8px; bottom: 8px; top: auto !important; width: auto; max-width: none; max-height: 62vh;
  overflow: auto; border-radius: 16px; padding: 16px 18px 14px; animation: hx-up .22s ease-out; }
@keyframes hx-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Hero-Variante (dunkler Hintergrund, Deko, animiert) */
.hx--hero { align-items: center; gap: 6px; color: #fff; }
.hx--hero .hx-hero-graph { width: 100%; max-width: 360px; margin: 0 auto; }
@media (max-width: 639px) { .hx--hero .hx-hero-graph { max-width: 230px; } }
.hx--hero .hx-zentrum path { fill: rgba(255, 255, 255, .06); stroke: rgba(244, 224, 176, .55); stroke-width: 2.5; stroke-opacity: 1; }
.hx--hero .hx-zentrum.defined path { fill: var(--hx-typ, #e0b45c); stroke: rgba(255, 255, 255, .85); filter: drop-shadow(0 0 10px var(--hx-typ, #e0b45c)); }
.hx--hero .hx-half { stroke: rgba(255, 255, 255, .16); }
.hx--hero .hx-half.on { stroke: var(--hx-typ, #e0b45c); stroke-width: 6; }
.hx--hero .hx-zentrum.defined path { animation: hx-glow 3.2s ease-in-out infinite; }
.hx--hero .hx-zentrum.defined:nth-of-type(2n) path { animation-delay: -1.1s; }
.hx--hero .hx-zentrum.defined:nth-of-type(3n) path { animation-delay: -2.2s; }
.hx--hero .hx-kanal .hx-half.on { animation: hx-shimmer 3.2s ease-in-out infinite; }
@keyframes hx-glow { 0%, 100% { filter: drop-shadow(0 0 4px var(--hx-typ, #e0b45c)); } 50% { filter: drop-shadow(0 0 16px var(--hx-typ, #e0b45c)); } }
@keyframes hx-shimmer { 0%, 100% { stroke-opacity: .75; } 50% { stroke-opacity: 1; } }
.hx-hero-cap { margin: 4px 0 0; text-align: center; font-size: 14.5px; color: rgba(255, 255, 255, .78); }
.hx-hero-typ { color: var(--hx-typ, #e0b45c); font-weight: 700; transition: color .6s ease; }
.hx-hero-cap a { color: rgba(255, 255, 255, .9); text-decoration: underline; text-underline-offset: 3px; }
.hx-hero-cap a:hover { color: #fff; }
.hx-fehler { display: none; }

@media (prefers-reduced-motion: reduce) {
  .hx *, .hx *::before, .hx *::after { animation: none !important; transition: none !important; }
  .hx-typ .hx-zentrum.hx-key path { stroke-width: 6; }
  .hx-zentrum.hx-pulse path { stroke-width: 8; }
}