:root {
    /* Nachtblau-Grund (Site-Identitaet), bewusst single-theme */
    --plane: #060911;
    --surface: #0b1120;
    --surface-2: #111a30;
    --line: rgba(122,166,255,0.14);
    --line-strong: rgba(122,166,255,0.30);
    --ink: #eef2fb;
    --ink-2: #aab4cd;
    --ink-3: #71809e;
    --accent: #3d7bff;
    --accent-hell: #7aa6ff;
    /* Entitaets-Hues (dataviz-validiert, dark) + Form als Zweitkodierung */
    /* Node-Palette "Warmer Absprung": kuehle Familie (Blau/Teal/Violett), der Beitrag als warmes Ziel */
    --t-serie: #6f9cef;   /* helles Blau  — Buendel */
    --t-thema: #3d7bff;   /* Accent-Blau  — Vernetzungs-Achse */
    --t-modell: #2a9d8f;  /* Teal         — Denkmodell */
    --t-person: #8a7bc0;  /* Violett      — Quelle (kuehl, gedaempft) */
    --t-beitrag: #e0a458; /* Bernstein    — Absprung-Ziel, der eine warme Punkt */
    --radius: 12px;
    --sans: 'Inter Variable', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --serif: 'Source Serif 4 Variable', Georgia, "Iowan Old Style", "Palatino Linotype", serif;
    color-scheme: dark;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; height: 100%; }
  body {
    font-family: var(--sans);
    background: var(--plane);
    color: var(--ink);
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
  }
  #app { display: grid; grid-template-rows: auto 1fr; height: 100vh; }

  /* ---- Kopf ---- */
  header {
    display: flex; align-items: baseline; gap: 1.2rem; flex-wrap: wrap;
    padding: 0.85rem 1.3rem 0.8rem;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, var(--surface) 0%, var(--plane) 100%);
  }
  header h1 {
    font-family: var(--serif); font-weight: 600; font-size: 1.24rem;
    margin: 0; letter-spacing: -0.01em; text-wrap: balance;
  }
  header .sub { color: var(--ink-3); font-size: 0.82rem; margin-right: auto; }
  header .count { color: var(--ink-3); font-size: 0.76rem; font-variant-numeric: tabular-nums; }

  /* ---- Buehne ---- */
  main { position: relative; overflow: hidden; }
  canvas { display: block; width: 100%; height: 100%; cursor: grab; }
  canvas.dragging { cursor: grabbing; }

  /* ---- Steuer-Leiste (links) ---- */
  .panel {
    position: absolute; top: 0.9rem; left: 0.9rem; width: 232px;
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    backdrop-filter: blur(9px);
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: 0.85rem 0.9rem; z-index: 5;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  }
  .panel h2 {
    font-family: var(--sans); font-size: 0.66rem; text-transform: uppercase;
    letter-spacing: 0.09em; color: var(--ink-3); margin: 0 0 0.55rem; font-weight: 600;
  }
  .panel h2:not(:first-child) { margin-top: 1.1rem; }
  .search {
    width: 100%; background: var(--plane); border: 1px solid var(--line);
    color: var(--ink); border-radius: 8px; padding: 0.5rem 0.6rem; font-size: 0.85rem;
    font-family: var(--sans);
  }
  .search:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
  .search::placeholder { color: var(--ink-3); }

  /* Linsen (Presets) */
  .lenses { display: flex; flex-direction: column; gap: 3px; }
  .lens {
    text-align: left; background: transparent; border: 1px solid transparent;
    color: var(--ink-2); border-radius: 8px; padding: 0.42rem 0.55rem; font-size: 0.84rem;
    cursor: pointer; font-family: var(--sans); display: flex; align-items: center; gap: 0.5rem;
    transition: background 0.12s, color 0.12s;
  }
  .lens:hover { background: var(--surface-2); color: var(--ink); }
  .lens[aria-pressed="true"] { background: var(--accent-soft, #16213f); color: var(--ink); border-color: var(--line-strong); }
  .lens .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-hell); flex: none; }
  .lens:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

  /* Typ-Filter (Legende + Toggle in einem) */
  .types { display: flex; flex-direction: column; gap: 2px; }
  .type {
    display: flex; align-items: center; gap: 0.6rem; width: 100%;
    background: transparent; border: 0; color: var(--ink-2);
    padding: 0.34rem 0.4rem; border-radius: 7px; cursor: pointer; font-size: 0.84rem;
    font-family: var(--sans); transition: background 0.12s, opacity 0.12s;
  }
  .type:hover { background: var(--surface-2); }
  .type[aria-pressed="false"] { opacity: 0.4; }
  .type:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  .type .glyph { width: 15px; height: 15px; flex: none; }
  .type .n { margin-left: auto; color: var(--ink-3); font-size: 0.74rem; font-variant-numeric: tabular-nums; }

  .hint { color: var(--ink-3); font-size: 0.72rem; line-height: 1.45; margin: 0.7rem 0 0; }
  .reset {
    margin-top: 0.6rem; width: 100%; background: transparent; border: 1px solid var(--line);
    color: var(--ink-2); border-radius: 8px; padding: 0.4rem; font-size: 0.78rem; cursor: pointer;
    font-family: var(--sans);
  }
  .reset:hover { background: var(--surface-2); color: var(--ink); }
  .reset:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

  /* ---- Detail-Panel (rechts) ---- */
  .detail {
    position: absolute; top: 0.9rem; right: 0.9rem; width: 366px; max-height: calc(100% - 1.8rem);
    background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(9px);
    border: 1px solid var(--line); border-radius: var(--radius); z-index: 6;
    padding: 1rem 1.05rem; overflow-y: auto; display: none;
    box-shadow: 0 12px 34px rgba(0,0,0,0.4);
  }
  .detail.open { display: block; }
  .detail .kicker { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.09em; font-weight: 600; }
  .detail h3 { font-family: var(--serif); font-size: 1.12rem; margin: 0.25rem 0 0.2rem; line-height: 1.2; text-wrap: balance; }
  .detail .role { color: var(--ink-3); font-size: 0.78rem; margin-bottom: 0.7rem; }
  .detail .reader { display: none; margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--line); font-family: var(--serif); font-size: 0.9rem; line-height: 1.62; color: var(--ink-2); }
  .detail .reader p { margin: 0 0 0.7rem; }
  .detail .reader h3 { font-family: var(--serif); font-size: 1rem; color: var(--ink); margin: 1.15rem 0 0.4rem; line-height: 1.25; }
  .detail .reader h4 { font-family: var(--sans); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3); margin: 1rem 0 0.3rem; }
  .detail .reader a { color: var(--accent-hell); text-decoration: none; border-bottom: 1px solid rgba(122,166,255,0.28); }
  .detail .reader a:hover { border-bottom-color: var(--accent-hell); }
  .detail .reader strong { color: var(--ink); font-weight: 600; }
  .detail .reader .fn { font-size: 0.82rem; color: var(--ink-3); font-style: italic; border-top: 1px solid var(--line); padding-top: 0.6rem; margin-top: 0.9rem; }
  .detail .reader .on-ramp { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 0.75rem 0.85rem; margin: 0.9rem 0; font-family: var(--sans); font-size: 0.86rem; line-height: 1.5; }
  .detail .reader .on-ramp p { margin: 0; }
  .detail .reader .on-ramp-label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-hell); margin: 0 0 0.45rem; font-weight: 600; }
  .detail .reader .on-ramp-icon { width: 15px; height: 15px; }
  .jump { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 1rem; background: var(--accent-btn); color: #fff; border-radius: 8px; padding: 0.55rem 0.9rem; font-size: 0.85rem; font-weight: 500; text-decoration: none; font-family: var(--sans); }
  .jump:hover { background: var(--accent-btn-hover); }
  .jump:focus-visible { outline: 2px solid var(--accent-hell); outline-offset: 2px; }
  .jump-draft { margin-top: 1rem; font-size: 0.8rem; color: var(--ink-3); font-style: italic; padding-top: 0.6rem; border-top: 1px solid var(--line); }
  .detail .grp { margin-top: 0.85rem; }
  .detail .grp h4 { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); margin: 0 0 0.4rem; font-weight: 600; }
  .neighbors { display: flex; flex-direction: column; gap: 1px; }
  .nb {
    display: flex; align-items: center; gap: 0.55rem; text-align: left; width: 100%;
    background: transparent; border: 0; color: var(--ink-2); cursor: pointer;
    padding: 0.32rem 0.35rem; border-radius: 6px; font-size: 0.84rem; font-family: var(--sans);
  }
  .nb.nb-aus { opacity: 0.5; }
  .nb.nb-aus:hover { opacity: 1; }
  .nb:hover { background: var(--surface-2); color: var(--ink); }
  .nb:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  .nb .glyph { width: 13px; height: 13px; flex: none; }
  .nb .rel { margin-left: auto; color: var(--ink-3); font-size: 0.68rem; }
  .detail .close {
    position: absolute; top: 0.7rem; right: 0.75rem; background: transparent; border: 0;
    color: var(--ink-3); font-size: 1.2rem; cursor: pointer; line-height: 1; padding: 0.1rem 0.3rem;
  }
  .detail .close:hover { color: var(--ink); }

  /* ---- Tooltip ---- */
  #tip {
    position: absolute; pointer-events: none; z-index: 9; opacity: 0;
    background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 8px;
    padding: 0.35rem 0.55rem; font-size: 0.8rem; color: var(--ink);
    transform: translate(-50%, calc(-100% - 12px)); transition: opacity 0.1s; white-space: nowrap;
    box-shadow: 0 6px 18px rgba(0,0,0,0.45); max-width: 260px; overflow: hidden; text-overflow: ellipsis;
  }
  #tip .tt { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3); }

  @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
  /* ---- Mobile Themen-Liste: dieselben Daten touch-nativ, statt des Graphen ---- */
  .mobile-list { display: none; padding: 1.15rem 1.15rem 4rem; max-width: 640px; margin: 0 auto; }
  .mobile-list .ml-intro { color: var(--ink-3); font-size: 0.85rem; line-height: 1.5; margin: 0 0 1.5rem; }
  .mobile-list .ml-section { font-family: var(--serif); font-size: 1.12rem; color: var(--ink); font-weight: 600; margin: 1.9rem 0 0.7rem; }
  .mobile-list .ml-section:first-of-type { margin-top: 0.2rem; }
  details.ml-group { border: 1px solid var(--line); border-radius: 10px; margin: 0 0 0.5rem; background: color-mix(in srgb, var(--surface) 88%, transparent); overflow: hidden; }
  details.ml-group summary { display: flex; align-items: center; gap: 0.6rem; padding: 0.9rem; cursor: pointer; list-style: none; font-size: 0.95rem; color: var(--ink); -webkit-tap-highlight-color: transparent; }
  details.ml-group summary::-webkit-details-marker { display: none; }
  details.ml-group summary .ml-label { font-weight: 600; flex: 1; line-height: 1.3; }
  details.ml-group summary .ml-n { color: var(--ink-3); font-size: 0.76rem; font-variant-numeric: tabular-nums; background: rgba(122,166,255,0.08); border-radius: 20px; padding: 0.1rem 0.5rem; flex: none; }
  details.ml-group summary .ml-chev { color: var(--ink-3); font-size: 1.15rem; line-height: 1; flex: none; transition: transform 0.2s ease; }
  details.ml-group[open] summary .ml-chev { transform: rotate(90deg); }
  details.ml-group summary svg, .ml-item svg { flex: none; }
  .ml-items { display: flex; flex-direction: column; padding: 0 0.55rem 0.35rem; }
  .ml-item { display: flex; align-items: center; gap: 0.55rem; padding: 0.72rem 0.5rem; color: var(--ink-2); text-decoration: none; font-size: 0.9rem; line-height: 1.4; border-top: 1px solid rgba(122,166,255,0.06); }
  a.ml-item:active { background: var(--surface-2); color: var(--ink); }
  .ml-item.ml-draft { color: var(--ink-3); font-style: italic; }

  @media (hover: none) and (pointer: coarse), (max-width: 680px) {
    html, body { height: auto; overflow: visible; }  /* Vollbild-Sperre aufheben — Liste soll scrollen */
    #app { height: auto; display: block; }
    main { display: none; }
    .mobile-list { display: block; }
    header h1 { font-size: 1.05rem; }
  }