/* KNOW/HOW/TO · Anatomy-Figuren (assets/js/kht-anatomy.js).
   Die Kit-Variablen (--anatomy-*) werden auf die Grüntöne der Seite gelegt. */
.kht-anatomy{margin:24px 0 30px;min-width:0;}
.kht-anatomy__card{
  border:1px solid rgba(172,179,164,.28);border-radius:12px;overflow:hidden;
  background:
    radial-gradient(70% 60% at 50% 42%, rgba(86,97,80,.28) 0%, rgba(86,97,80,0) 70%),
    var(--green-900,#1D2318);
}
.kht-anatomy .iso{
  --anatomy-paper:#1f261b;--anatomy-face:#262e21;--anatomy-top:#2c3527;
  --anatomy-shade-0:#181e14;--anatomy-shade-1:#1c2318;--anatomy-shade-2:#20271b;--anatomy-shade-3:#242c1f;
  --anatomy-lit-top:#3a4612;--anatomy-lit-shade:#2c360d;
  --anatomy-hi:#d9ddd2;--anatomy-mid:#7d8873;--anatomy-lo:#4c5644;--anatomy-faint:#343c2e;--anatomy-lit:#dcfb55;
  --anatomy-halo:#070906;--anatomy-halo-opacity:.85;--anatomy-dot:#c4ccbf;
  --anatomy-weight:.6px;
}
.kht-anatomy__head,.kht-anatomy__foot{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:12px 16px;font-family:var(--font-mono,"DM Mono",monospace);font-size:11px;letter-spacing:.06em;
  color:var(--graygreen-300,#ACB3A4);
}
.kht-anatomy__head strong{font-weight:500;color:#f7f5ef;text-align:right;letter-spacing:.04em;}
.kht-anatomy__foot{padding-top:6px;}
.kht-anatomy__readout{color:var(--neon-400,#DCFB55);text-align:right;font-variant-numeric:tabular-nums;}
.kht-anatomy__stage{position:relative;outline:none;touch-action:pan-y;}
.kht-anatomy__stage:focus-visible{box-shadow:inset 0 0 0 2px var(--neon-400,#DCFB55);}
.kht-anatomy__svg{display:block;width:100%;height:auto;overflow:visible;}
.kht-anatomy__loading{aspect-ratio:600/360;display:flex;align-items:center;justify-content:center;margin:0;
  font-family:var(--font-mono,"DM Mono",monospace);font-size:12px;color:var(--graygreen-300,#ACB3A4);}
.kht-anatomy__controls{display:flex;flex-wrap:wrap;gap:8px 18px;padding:4px 16px 2px;}
.kht-anatomy__group{display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
.kht-anatomy__group>span{font-family:var(--font-mono,"DM Mono",monospace);font-size:11px;letter-spacing:.06em;color:var(--graygreen-300,#ACB3A4);margin-right:2px;}
.kht-anatomy__group button{
  appearance:none;cursor:pointer;min-height:32px;padding:5px 12px;border-radius:999px;
  border:1px solid rgba(172,179,164,.34);background:transparent;color:#f7f5ef;
  font-family:var(--font-mono,"DM Mono",monospace);font-size:12px;letter-spacing:.03em;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.kht-anatomy__group button:hover{border-color:rgba(220,251,85,.6);}
.kht-anatomy__group button[aria-pressed="true"]{background:var(--neon-400,#DCFB55);border-color:var(--neon-400,#DCFB55);color:#141810;}
.kht-anatomy__group button:focus-visible{outline:2px solid var(--neon-400,#DCFB55);outline-offset:2px;}
.kht-anatomy figcaption p{margin:12px 0 8px;font-size:14px;font-weight:400;line-height:1.6;}
.kht-anatomy__keys{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-wrap:wrap;gap:4px 16px;font-size:12px;color:var(--graygreen-300,#ACB3A4);}
.kht-anatomy__keys li{display:flex;align-items:center;gap:6px;}
.kht-anatomy__keys li span{display:inline-block;width:14px;height:3px;border-radius:2px;background:#7d8873;}
.kht-anatomy__keys li[data-key="lit"] span{background:var(--neon-400,#DCFB55);}
.kht-anatomy__keys li[data-key="help"] span{background:#f7f5ef;}
.kht-anatomy__keys li[data-key="red"] span{background:#f07a6e;}
.kht-anatomy figcaption a{font-size:13px;color:var(--text-inverse,#F7F5EF);text-decoration:underline;text-underline-offset:3px;}
.kht-anatomy figcaption a:hover{color:var(--neon-400,#DCFB55);}
@media(max-width:600px){
  .kht-anatomy__head,.kht-anatomy__foot{padding:10px 12px;}
  .kht-anatomy__controls{padding:4px 12px 2px;}
  .kht-anatomy__group button{min-height:40px;padding:8px 13px;font-size:13px;}
  .kht-anatomy figcaption p{font-size:16px;}
  .kht-anatomy figcaption a{display:inline-block;min-height:44px;padding:10px 0;font-size:16px;}
}
@media (prefers-reduced-motion: reduce){.kht-anatomy__group button{transition:none;}}

/* Aus dem Anatomy-Kit (MIT), auf .kht-anatomy beschränkt. */
.kht-anatomy .iso-fill{fill:var(--anatomy-paper);stroke:none}
.kht-anatomy .iso-solid[data-lit]>.iso-fill{fill:var(--anatomy-face)}
.kht-anatomy .iso-shade,.kht-anatomy .iso-top{stroke:none}
.kht-anatomy .iso-shade[data-shade="0"]{fill:var(--anatomy-shade-0)}
.kht-anatomy .iso-shade[data-shade="1"]{fill:var(--anatomy-shade-1)}
.kht-anatomy .iso-shade[data-shade="2"]{fill:var(--anatomy-shade-2)}
.kht-anatomy .iso-shade[data-shade="3"]{fill:var(--anatomy-shade-3)}
.kht-anatomy .iso-top{fill:var(--anatomy-top)}
.kht-anatomy .iso-solid[data-lit]>.iso-top{fill:var(--anatomy-lit-top)}
.kht-anatomy .iso-solid[data-lit]>.iso-shade{fill:var(--anatomy-lit-shade)}
.kht-anatomy .iso-solid[data-seamless]>.iso-shade,.kht-anatomy .iso-solid[data-seamless]>.iso-top{stroke-width:.4;stroke-linejoin:round}
.kht-anatomy .iso-solid[data-seamless]>.iso-shade[data-shade="0"]{stroke:var(--anatomy-shade-0)}
.kht-anatomy .iso-solid[data-seamless]>.iso-shade[data-shade="1"]{stroke:var(--anatomy-shade-1)}
.kht-anatomy .iso-solid[data-seamless]>.iso-shade[data-shade="2"]{stroke:var(--anatomy-shade-2)}
.kht-anatomy .iso-solid[data-seamless]>.iso-shade[data-shade="3"]{stroke:var(--anatomy-shade-3)}
.kht-anatomy .iso-solid[data-seamless]>.iso-top{stroke:var(--anatomy-top)}
.kht-anatomy .iso-solid[data-seamless][data-lit]>.iso-top{stroke:var(--anatomy-lit-top)}
.kht-anatomy .iso-solid[data-seamless][data-lit]>.iso-shade{stroke:var(--anatomy-lit-shade)}
.kht-anatomy .iso-solid[data-lit]>.iso-edge{stroke:var(--anatomy-lit)}
.kht-anatomy .iso-halo{fill:var(--anatomy-halo);stroke:none;filter:blur(9px);opacity:var(--anatomy-halo-opacity);transform:translateY(3px)}
.kht-anatomy .iso-line{fill:none;stroke:var(--anatomy-lo);stroke-width:var(--anatomy-weight);stroke-linecap:round;stroke-linejoin:round}
.kht-anatomy .iso-line[data-tone="hi"]{stroke:var(--anatomy-hi)}
.kht-anatomy .iso-line[data-tone="mid"]{stroke:var(--anatomy-mid)}
.kht-anatomy .iso-line[data-tone="lo"]{stroke:var(--anatomy-lo)}
.kht-anatomy .iso-line[data-tone="faint"]{stroke:var(--anatomy-faint)}
.kht-anatomy .iso-line[data-tone="lit"]{stroke:var(--anatomy-lit)}
.kht-anatomy .iso-line[data-tone="red"]{stroke:var(--anatomy-red)}
.kht-anatomy .iso-line[data-tone="green"]{stroke:var(--anatomy-green)}
.kht-anatomy .iso-line[data-tone="blue"]{stroke:var(--anatomy-blue)}
.kht-anatomy .iso-line[data-dotted]{stroke-dasharray:.01 3.5;stroke-width:1}
.kht-anatomy .iso-line[data-dashed]{stroke-dasharray:3 3}
.kht-anatomy .iso-line[data-flow]{stroke-dasharray:2 6}
.kht-anatomy .iso-wire-end{fill:var(--anatomy-paper);stroke:var(--anatomy-lo);stroke-width:var(--anatomy-weight)}
.kht-anatomy .iso-wire[data-tone="hi"] .iso-wire-end{stroke:var(--anatomy-hi)}
.kht-anatomy .iso-wire[data-tone="mid"] .iso-wire-end{stroke:var(--anatomy-mid)}
.kht-anatomy .iso-wire[data-tone="faint"] .iso-wire-end{stroke:var(--anatomy-faint)}
.kht-anatomy .iso-wire[data-tone="lit"] .iso-wire-end{stroke:var(--anatomy-lit)}
.kht-anatomy .iso-dots circle{fill:var(--anatomy-dot);stroke:none;opacity:.32}
.kht-anatomy .iso-dots[data-tone="hi"] circle{opacity:.85}
.kht-anatomy .iso-dots[data-tone="mid"] circle{opacity:.45}
.kht-anatomy .iso-dots[data-tone="lo"] circle{opacity:.22}
.kht-anatomy .iso-dots[data-tone="faint"] circle{opacity:.12}
.kht-anatomy .iso-face-text{fill:var(--anatomy-mid);font-family:var(--anatomy-mono);letter-spacing:.04em}
.kht-anatomy .iso-face-text[data-tone="hi"]{fill:var(--anatomy-hi)}
.kht-anatomy .iso-face-text[data-tone="lo"]{fill:var(--anatomy-lo)}
.kht-anatomy .iso-face-text[data-tone="faint"]{fill:var(--anatomy-faint)}
.kht-anatomy__svg path,.kht-anatomy__svg circle{vector-effect:non-scaling-stroke}

/* Helles Thema für die How-To-Workflows: Papiergrund, schwarze Haarlinien,
   keine Rundungen, keine Schatten, Neon als einzige CI-Farbe. */
.kht-anatomy[data-theme="paper"] .kht-anatomy__card{
  border:1.5px solid var(--black,#0B0B09);border-radius:0;
  background:var(--paper-card,#FCFBF6);
}
.kht-anatomy[data-theme="paper"] .iso{
  --anatomy-paper:#f3f1ea;--anatomy-face:#efede5;--anatomy-top:#fbfaf5;
  --anatomy-shade-0:#cdcabe;--anatomy-shade-1:#d9d6cb;--anatomy-shade-2:#e4e1d7;--anatomy-shade-3:#eceae2;
  --anatomy-lit-top:#e8fe8e;--anatomy-lit-shade:#a8d414;
  --anatomy-hi:#0b0b09;--anatomy-mid:#4a4a43;--anatomy-lo:#7a776c;--anatomy-faint:#c2bfb3;--anatomy-lit:#a8d414;
  --anatomy-halo:#0b0b09;--anatomy-halo-opacity:0;--anatomy-dot:#0b0b09;
}
.kht-anatomy[data-theme="paper"] .kht-anatomy__head,
.kht-anatomy[data-theme="paper"] .kht-anatomy__foot,
.kht-anatomy[data-theme="paper"] .kht-anatomy__group>span,
.kht-anatomy[data-theme="paper"] .kht-anatomy__loading{color:#5f5d55;}
.kht-anatomy[data-theme="paper"] .kht-anatomy__head{border-bottom:1px solid rgba(11,11,9,.14);text-transform:uppercase;letter-spacing:.14em;}
.kht-anatomy[data-theme="paper"] .kht-anatomy__head strong{color:var(--black,#0B0B09);letter-spacing:.12em;}
.kht-anatomy[data-theme="paper"] .kht-anatomy__head span::before{content:"/";color:var(--neon-600,#A8D414);font-weight:500;margin-right:4px;}
.kht-anatomy[data-theme="paper"] .kht-anatomy__readout{color:var(--neon-ink,#5E7A08);}
.kht-anatomy[data-theme="paper"] .kht-anatomy__stage:focus-visible{box-shadow:inset 0 0 0 2px var(--black,#0B0B09);}
.kht-anatomy[data-theme="paper"] .kht-anatomy__group button{
  border-radius:0;border:1px solid rgba(11,11,9,.35);color:var(--black,#0B0B09);text-transform:uppercase;letter-spacing:.1em;font-size:11px;
}
.kht-anatomy[data-theme="paper"] .kht-anatomy__group button:hover{border-color:var(--black,#0B0B09);}
.kht-anatomy[data-theme="paper"] .kht-anatomy__group button[aria-pressed="true"]{background:var(--neon-500,#C8F52F);border-color:var(--black,#0B0B09);color:var(--black,#0B0B09);}
.kht-anatomy[data-theme="paper"] .kht-anatomy__group button:focus-visible{outline:2px solid var(--black,#0B0B09);}
.kht-anatomy[data-theme="paper"] figcaption p{color:var(--black,#0B0B09);}
.kht-anatomy[data-theme="paper"] .kht-anatomy__keys{color:#5f5d55;}
.kht-anatomy[data-theme="paper"] .kht-anatomy__keys li span{border-radius:0;background:#aeaa9d;}
.kht-anatomy[data-theme="paper"] .kht-anatomy__keys li[data-key="lit"] span{background:var(--neon-500,#C8F52F);outline:1px solid var(--black,#0B0B09);}
.kht-anatomy[data-theme="paper"] .kht-anatomy__keys li[data-key="help"] span,
.kht-anatomy[data-theme="paper"] .kht-anatomy__keys li[data-key="red"] span{background:var(--black,#0B0B09);}
@media(max-width:600px){.kht-anatomy[data-theme="paper"] .kht-anatomy__group button{font-size:12px;}}