/* Koerperatlas — Darstellung. Enthaelt keinen Stoff. */
:root{
  --papier:#F2F1EC; --flaeche:#FBFAF6; --tinte:#1A1D1B; --weich:#55605A; --linie:#C3C6BD;
  --akzent:#1F5D4C; --gut:#2C6E49; --warn:#8A4B1F; --neutral:#D9D6CC; --knochen:#EFE6CF;
  --rot:#C0392B; --blau:#3D5A98; --haut:#F3E6DA;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --text:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{--papier:#141715;--flaeche:#1C201D;--tinte:#ECEFE9;--weich:#A5AFA8;--linie:#333A35;
        --akzent:#5FBFA1;--gut:#6FBF8F;--warn:#D98B4A;--neutral:#3A3F3B;--knochen:#5A5344;
        --rot:#E0685A;--blau:#7D9BE0;--haut:#2B2622}
}
*{box-sizing:border-box}
body{margin:0;background:var(--papier);color:var(--tinte);font:16px/1.6 var(--text)}
.rand{max-width:68rem;margin:0 auto;padding:0 1rem}
header{border-bottom:1px solid var(--linie);background:var(--flaeche);padding:.9rem 0}
.kopfzeile{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:space-between;align-items:baseline}
.wortmarke{font-family:var(--mono);letter-spacing:.14em;font-size:.95rem;border-bottom:2px solid var(--akzent);padding-bottom:2px}
.mono{font-family:var(--mono);font-size:.76rem;color:var(--weich)}
h1{font-size:1.6rem;margin:1.4rem 0 .3rem}
h2{font-size:1.1rem;margin:1rem 0 .4rem}
.lead{color:var(--weich);margin:.2rem 0 1rem}
.hinweis{background:var(--flaeche);border-left:4px solid var(--akzent);padding:.7rem 1rem;margin:1rem 0}
.hinweis p{margin:.2rem 0}
nav.reiter{display:flex;flex-wrap:wrap;gap:.4rem;margin:1rem 0}
nav.reiter button{font:inherit;font-size:.92rem;cursor:pointer;padding:.45rem 1rem;border-radius:999px;border:1px solid var(--linie);background:var(--flaeche);color:var(--tinte)}
nav.reiter button[aria-selected=true]{background:var(--akzent);border-color:var(--akzent);color:var(--papier)}
button{font:inherit;font-size:.9rem;cursor:pointer;padding:.4rem .9rem;border-radius:6px;border:1px solid var(--akzent);background:var(--akzent);color:var(--papier)}
button.zweit{background:transparent;color:var(--akzent)}
.knopfzeile{display:flex;flex-wrap:wrap;gap:.4rem}
.buehne{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:1.2rem;align-items:start}
@media (max-width:760px){.buehne{grid-template-columns:1fr}}
.bild{background:var(--flaeche);border:1px solid var(--linie);border-radius:10px;padding:.6rem}
.bild svg{width:100%;height:auto;display:block;max-height:78vh}
.seiten{display:flex;justify-content:space-between;margin:.2rem .4rem 0}
.seite{min-width:0}
.tafel{background:var(--flaeche);border:1px solid var(--linie);border-radius:10px;padding:.4rem 1rem .9rem;margin:0 0 1rem}
#schicht-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,10rem),1fr));gap:.2rem .8rem}
#schicht-liste label{display:flex;gap:.45rem;align-items:center;cursor:pointer}
.chip{display:inline-block;width:.9rem;height:.9rem;border-radius:3px;border:1px solid var(--linie);vertical-align:-2px}
#info-bezug{display:flex;flex-wrap:wrap;gap:.35rem}
#info-bezug button{font-size:.82rem;padding:.25rem .6rem;background:transparent;color:var(--akzent)}
.frage-gross{font-size:1.15rem;font-weight:600;min-height:1.6em}
.wahl{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
.wahl button{background:var(--flaeche);color:var(--tinte);border-color:var(--linie);text-align:left}
.rueck{min-height:1.4em}
.rueck.gut{color:var(--gut)} .rueck.nochnicht{color:var(--warn)}
.palette{display:flex;flex-wrap:wrap;gap:.4rem;margin:.5rem 0}
.palette button{background:var(--flaeche);color:var(--tinte);border-color:var(--linie)}
.palette button[aria-pressed=true]{outline:3px solid var(--akzent);outline-offset:1px}
.regler{display:flex;gap:.6rem;align-items:center;margin:.8rem 0 .4rem}
.regler input{flex:1}
.werte{border-collapse:collapse;font-size:.92rem}
.werte th{text-align:left;font-weight:400;color:var(--weich);padding:.15rem 1rem .15rem 0}
.stationen{padding-left:1.4rem;margin:0}
.stationen li{margin:.2rem 0;padding:.1rem .3rem;border-radius:4px}
.stationen li.jetzt{background:var(--akzent);color:var(--papier)}
footer{margin:2.5rem 0 2rem;color:var(--weich)}
[hidden]{display:none!important}

/* ---------- Atlas ---------- */
#atlas .schicht[hidden]{display:none}
#atlas .umriss path,#atlas .umriss ellipse{fill:var(--haut);stroke:var(--linie);stroke-width:1.2}
#atlas .teil{cursor:pointer;outline:none}
#atlas .teil *{fill:var(--farbe);fill-opacity:.62;stroke:var(--tinte);stroke-opacity:.55;stroke-width:.8;transition:fill-opacity .15s}
#atlas .sys-skelett *{fill:var(--knochen);fill-opacity:1}
#atlas .teil .linie{fill:none;stroke:var(--farbe);stroke-opacity:1;stroke-width:2.4;stroke-linecap:round}
#atlas .sys-skelett .linie{stroke:#B89B5E}
#atlas .teil .linie.dick{stroke-width:4}
#atlas .teil .linie.fein{stroke-width:.9;stroke:var(--tinte);stroke-opacity:.5}
#atlas .teil .loch{fill:var(--papier);fill-opacity:1}
#atlas .teil .strang{fill:none;stroke:var(--farbe);stroke-opacity:.95;stroke-width:4;stroke-linecap:round}
#atlas .teil .strang.breit{stroke-width:6}
#atlas .teil .strang.dick{stroke-width:9;stroke-opacity:.75}
#atlas .teil .gefaess{fill:none;stroke-width:4.5;stroke-opacity:1;stroke-linecap:round;stroke-linejoin:round}
#atlas .teil .gefaess.duenn{stroke-width:2.2}
#atlas .teil .gefaess.rot{stroke:var(--rot)} #atlas .teil .gefaess.blau{stroke:var(--blau)}
#atlas .teil .hinten{fill-opacity:.25;stroke-dasharray:3 2}
#atlas .teil .hinten-organ{stroke-dasharray:3 2}
#atlas .teil:hover *,#atlas .teil:focus *{fill-opacity:.9}
#atlas .teil.aktiv *{stroke:var(--akzent);stroke-opacity:1;stroke-width:2}
#atlas .teil.aktiv .linie,#atlas .teil.aktiv .strang,#atlas .teil.aktiv .gefaess{stroke:var(--akzent)}
#atlas .teil.bezug *{stroke:var(--akzent);stroke-opacity:.8;stroke-dasharray:2 2}
#atlas .teil.richtig *{stroke:var(--gut);stroke-width:2.4;stroke-opacity:1}
#atlas .teil.falsch *{stroke:var(--warn);stroke-width:2.4;stroke-opacity:1}
#atlas.neutral .teil *{fill:var(--neutral);fill-opacity:1}
#atlas.neutral .teil .linie,#atlas.neutral .teil .strang,#atlas.neutral .teil .gefaess{stroke:var(--weich)}
#atlas.neutral .teil.gefaerbt *{fill:var(--gefaerbt);fill-opacity:.85}
#atlas.neutral .teil.gefaerbt .linie,#atlas.neutral .teil.gefaerbt .strang,#atlas.neutral .teil.gefaerbt .gefaess{stroke:var(--gefaerbt)}
@media (prefers-reduced-motion:no-preference){
  #atlas.lebt .sys-atmung.atmet{animation:atmen var(--atemdauer,4s) ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
  #atlas.lebt [data-id=herz]{animation:schlag var(--schlagdauer,.86s) ease-in-out infinite;transform-box:fill-box;transform-origin:50% 50%}
}
@keyframes atmen{0%,100%{transform:scale(1)}45%{transform:scale(1.04,1.06)}}
@keyframes schlag{0%,100%{transform:scale(1)}12%{transform:scale(1.07)}28%{transform:scale(.98)}}

#atlas .teil .nerv{fill:none;stroke:var(--farbe);stroke-opacity:.95;stroke-width:1.6;stroke-linecap:round}
#atlas.neutral .teil .nerv{stroke:var(--weich)}
#atlas.neutral .teil.gefaerbt .nerv{stroke:var(--gefaerbt)}

/* ---------- Bewegung ---------- */
#bewegung .knochen{fill:var(--knochen);stroke:var(--tinte);stroke-opacity:.5}
#bewegung .gelenk{fill:var(--flaeche);stroke:var(--akzent);stroke-width:2}
#bewegung .muskel{fill:#9C5B3C;fill-opacity:.75;stroke:var(--tinte);stroke-opacity:.4}
#bewegung .sehne{fill:none;stroke:var(--weich);stroke-width:2.5;stroke-linecap:round}
#bewegung text{font:12px var(--text);fill:var(--tinte)}

/* ---------- Auge und Ohr ---------- */
#s-zustaende button[aria-pressed=true],#b-gelenke button[aria-pressed=true]{background:var(--akzent);color:var(--papier)}
nav.reiter.klein{margin:.2rem 0 .6rem}
nav.reiter.klein button{font-size:.85rem;padding:.3rem .8rem}
.schnitt .st{cursor:pointer;outline:none}
.schnitt .st *{fill:var(--flaeche);stroke:var(--tinte);stroke-opacity:.6;stroke-width:1.2}
.schnitt .huelle{fill:var(--haut)!important}
.schnitt .glas{fill:#DCEBF2!important;fill-opacity:.6}
.schnitt .netz{fill:none!important;stroke:#C0392B!important;stroke-width:4!important;stroke-opacity:.8!important}
.schnitt [data-id=gelberfleck] *{fill:#E5C04A!important}
.schnitt [data-id=sehnerv] *,.schnitt [data-id=hoernerv] *{fill:#E8D48A!important}
.schnitt .dick{fill:none!important;stroke-width:4!important;stroke:#4C93B8!important;stroke-opacity:.9!important}
.schnitt [data-id=iris] *{fill:#6B8E5A!important}
.schnitt .luecke{fill:#1A1D1B!important;fill-opacity:.85}
.schnitt .kanal{fill:#F3E6DA!important}
.schnitt .raum{fill:#EEF2F4!important}
.schnitt .haut{fill:none!important;stroke:#C08A2B!important;stroke-width:3.5!important;stroke-opacity:1!important}
.schnitt .knoechelchen{fill:var(--knochen)!important;stroke:#8A6D3B!important;stroke-width:3!important;stroke-opacity:1!important;stroke-linejoin:round}
.schnitt .spirale,.schnitt .ring{fill:none!important;stroke:#2E9E9A!important;stroke-width:5!important;stroke-opacity:.85!important}
.schnitt .st:hover *,.schnitt .st:focus *{stroke:var(--akzent)!important;stroke-opacity:1!important}
.schnitt .st.aktiv *{stroke:var(--akzent)!important;stroke-opacity:1!important;stroke-width:3!important}
.schnitt .linse{fill:#BFE0EE;stroke:#2B4C7E;stroke-width:1.2}
.schnitt .strahl{fill:none;stroke:#E0A030;stroke-width:1.6;stroke-linecap:round}
.schnitt .ding{fill:none;stroke:var(--gut);stroke-width:3;stroke-linecap:round}
.schnitt .bild-netz{fill:none;stroke:var(--gut);stroke-width:3;stroke-linecap:round}
.schnitt .unscharf{fill:var(--gut);fill-opacity:.35}
.schnitt .brille{fill:#BFE0EE;fill-opacity:.7;stroke:#2B4C7E;stroke-width:1.2}
.schnitt .achse{stroke:var(--linie);stroke-dasharray:4 4}
.schnitt .welle{fill:none;stroke:var(--akzent);stroke-width:2;stroke-opacity:.8}
.schnitt text{font:10.5px var(--text);fill:var(--tinte);pointer-events:none}

/* ---------- Kreislaufschema ---------- */
#kreislauf .kasten{fill:var(--flaeche);stroke:var(--linie);stroke-width:1.2}
#kreislauf .kammer{stroke:var(--tinte);stroke-width:1;stroke-opacity:.5}
#kreislauf .bahn{fill:none;stroke:var(--linie);stroke-width:10;stroke-linejoin:round;stroke-linecap:round}
#kreislauf text{font:11px var(--text);fill:var(--tinte)}
#kreislauf text.klein{font-size:9.5px;fill:var(--weich)}
#kreislauf .jetzt{stroke:var(--akzent);stroke-width:3}

/* Ansicht von vorn oder von hinten */
#atlas:not(.rueckansicht) [data-ansicht="hinten"],#atlas.rueckansicht [data-ansicht="vorn"]{display:none}
.ansicht-wahl{margin:0 0 .5rem}
.ansicht-wahl button[aria-pressed="true"]{background:var(--akzent);color:var(--papier)}