:root {
  --bg: #ffffff; --fg: #1f2933; --muted: #64748b; --line: #e2e8f0; --side: #f8fafc; --link: #1d4ed8;
  --c-symptome: 220 38 38; --c-helfen: 22 163 74; --c-ursachen: 217 119 6; --c-therapie: 37 99 235;
  --c-komplikationen: 234 88 12; --c-arzt: 190 18 60; --c-verlauf: 147 51 234; --c-steckbrief: 13 148 136;
  --c-neutral: 100 116 139;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0f172a; --fg: #e2e8f0; --muted: #94a3b8; --line: #263449; --side: #111c33; --link: #93c5fd; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg);
  font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--link); }
header.top { position: sticky; top: 0; z-index: 10; display: flex; gap: 1rem; align-items: center;
  padding: .5rem 1rem; background: var(--bg); border-bottom: 1px solid var(--line); }
header.top .brand { font-weight: 700; text-decoration: none; color: var(--fg); white-space: nowrap; }
header.top #search { flex: 1; max-width: 34rem; margin-left: auto; position: relative; }

#menu { font-size: 1.2rem; line-height: 1; padding: .3rem .6rem; cursor: pointer; background: none; border: 1px solid var(--line); border-radius: 6px; color: var(--fg); }
#menu:hover { background: rgb(var(--c-neutral) / .15); }
/* Seitenleiste auf Desktop einklappbar */
html.nav-collapsed .layout { grid-template-columns: minmax(0, 1fr); }
html.nav-collapsed #sidebar { display: none; }
html.nav-collapsed main { margin: 0 auto; }
.layout { display: grid; grid-template-columns: 22rem minmax(0, 1fr); }
#sidebar { position: sticky; top: 3.3rem; align-self: start; height: calc(100vh - 3.3rem); overflow-y: auto;
  padding: .75rem 1rem 3rem; background: var(--side); border-right: 1px solid var(--line); font-size: .88rem; line-height: 1.35; }
#sidebar details { margin: .15rem 0; }
#sidebar summary { cursor: pointer; padding: .2rem 0; }
#sidebar details.part > summary { font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: .78rem; color: var(--muted); }
#sidebar details.chap > summary { font-weight: 600; }
#sidebar details.chap { margin-left: .6rem; }
#sidebar ul { list-style: none; margin: .1rem 0 .4rem; padding-left: 1rem; }
#sidebar li { margin: .1rem 0; }
#sidebar a { text-decoration: none; color: var(--fg); display: block; padding: .1rem .3rem; border-radius: 4px; }
#sidebar a:hover { background: rgb(var(--c-neutral) / .15); }
#sidebar a.cur { background: rgb(var(--c-therapie) / .18); font-weight: 600; }
main { padding: 1.5rem 2.5rem 5rem; max-width: 76rem; width: 100%; }
.crumb { font-size: .82rem; color: var(--muted); margin-bottom: .5rem; }
.themen { margin-top: 2rem; font-size: .85rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: .6rem; }
h1 { line-height: 1.2; margin-top: .3rem; }
h2 { margin-top: 2.2rem; padding-bottom: .2rem; border-bottom: 1px solid var(--line); }

/* Boxen aus ::: {.symptome titel="…"} */
div.symptome, div.helfen, div.ursachen, div.therapie, div.komplikationen, div.arzt, div.verlauf,
div.erreger, div.inkubationszeit, div.uebertragbarkeit, div.immunitaet, div.meldepflicht,
div.medikamente, div.pflege, div.vermeiden, div.unterpunkt, div.einschub {
  --c: var(--c-neutral);
  border-left: 5px solid rgb(var(--c)); background: rgb(var(--c) / .09);
  border-radius: 4px; padding: .6rem 1rem .2rem; margin: 1.1rem 0;
}
div.symptome { --c: var(--c-symptome); } div.helfen { --c: var(--c-helfen); }
div.ursachen { --c: var(--c-ursachen); } div.therapie { --c: var(--c-therapie); }
div.komplikationen { --c: var(--c-komplikationen); } div.verlauf { --c: var(--c-verlauf); }
div.arzt { --c: var(--c-arzt); border-left-style: double; border-left-width: 7px; background: rgb(var(--c) / .14); }
div.erreger, div.inkubationszeit, div.uebertragbarkeit, div.immunitaet, div.meldepflicht,
div.medikamente, div.pflege, div.vermeiden { --c: var(--c-steckbrief); }
div.einschub { background: rgb(var(--c) / .06); border-left-style: dotted; }
div.einschub div.symptome, div.einschub div.helfen, div.symptome div.einschub, div.helfen div.einschub { margin: .6rem 0; }
div[class] > p:first-child > strong:only-child { color: rgb(var(--c)); letter-spacing: .02em; }

/* Buchseite an Zwischenüberschriften: {seite="119"} -> data-seite */
h2[data-seite]::after, h3[data-seite]::after {
  content: "S. " attr(data-seite); margin-left: .7em; padding: .05em .5em; font-size: .55em; font-weight: 400;
  vertical-align: middle; border: 1px solid rgb(var(--c-neutral) / .6); border-radius: 999px; color: var(--muted);
}

/* Bilder */
main img { max-width: 100%; height: auto; border-radius: 4px; }
main figure { margin: 1.2rem 0; } main figcaption { font-size: .9em; color: var(--muted); }
main img { cursor: zoom-in; }
main img.zoom { position: fixed; inset: 3vh 3vw; margin: auto; max-width: 94vw; max-height: 94vh; width: auto;
  z-index: 50; cursor: zoom-out; box-shadow: 0 0 0 100vmax rgb(0 0 0 / .8); background: #fff; }
img.deko { cursor: default; display: block; width: 100%; max-height: 220px; object-fit: cover; margin: .5rem 0 1rem; }
td img { max-width: 110px; }
main table { display: block; overflow-x: auto; border-collapse: collapse; }
main td, main th { border: 1px solid var(--line); padding: .3rem .5rem; vertical-align: top; }
sup { line-height: 0; }
.footnotes { font-size: .88rem; color: var(--muted); border-top: 1px solid var(--line); margin-top: 2rem; }

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  #sidebar { display: none; position: fixed; inset: 3.3rem 0 0 0; height: auto; z-index: 20; width: 100%; }
  body.nav-open #sidebar { display: block; }
  main { padding: 1rem 1rem 4rem; }
}

/* Suche */
#search input#q { width: 100%; font: inherit; padding: .45rem .8rem; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--fg); }
#search input#q:focus { outline: 2px solid rgb(var(--c-therapie) / .6); }
#results { position: absolute; top: calc(100% + .4rem); right: 0; width: min(44rem, 94vw); max-height: 75vh; overflow: auto;
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 30px rgb(0 0 0 / .25); z-index: 30; }
#results[hidden] { display: none; }
#results .rh { padding: .5rem 1rem; font-size: .85rem; color: var(--muted); border-bottom: 1px solid var(--line); }
#results a.hit { display: block; padding: .6rem 1rem; text-decoration: none; color: var(--fg); border-bottom: 1px solid var(--line); }
#results a.hit:hover, #results a.hit:focus { background: rgb(var(--c-therapie) / .1); }
#results .ht { display: block; font-weight: 600; }
#results .hm { display: block; font-size: .78rem; color: var(--muted); }
#results .hs { display: block; font-size: .88rem; margin-top: .15rem; }
#results mark { background: #fde68a; color: #1f2933; border-radius: 2px; padding: 0 .1em; }

/* Chat-Panel */
#chatbtn { font: inherit; font-size: .9rem; padding: .35rem .75rem; border-radius: 8px; cursor: pointer; white-space: nowrap;
  background: rgb(var(--c-therapie) / .12); color: var(--fg); border: 1px solid rgb(var(--c-therapie) / .5); }
#chatbtn:hover { background: rgb(var(--c-therapie) / .22); }
#chat { position: fixed; top: 3.3rem; right: 0; bottom: 0; width: min(30rem, 100vw); z-index: 40; display: flex; flex-direction: column;
  background: var(--bg); border-left: 1px solid var(--line); box-shadow: -8px 0 24px rgb(0 0 0 / .18); }
#chat[hidden] { display: none; }
.ch-head { display: flex; justify-content: space-between; align-items: center; padding: .6rem .9rem; border-bottom: 1px solid var(--line); }
.ch-actions button { font: inherit; font-size: .85rem; margin-left: .4rem; padding: .2rem .55rem; border-radius: 6px; cursor: pointer;
  background: none; border: 1px solid var(--line); color: var(--fg); }
.ch-note { font-size: .78rem; line-height: 1.35; color: var(--muted); padding: .5rem .9rem; background: rgb(var(--c-ursachen) / .1);
  border-bottom: 1px solid var(--line); }
.ch-log { flex: 1; overflow-y: auto; padding: .8rem .9rem; }
.ch-msg { margin: 0 0 .9rem; font-size: .93rem; line-height: 1.5; }
.ch-msg.user { background: rgb(var(--c-therapie) / .14); padding: .5rem .75rem; border-radius: 10px 10px 2px 10px; margin-left: 2rem; white-space: pre-wrap; }
.ch-msg.assistant { padding-right: .3rem; }
.ch-msg.assistant p { margin: .35rem 0; } .ch-msg.assistant ul { margin: .35rem 0; padding-left: 1.2rem; }
.ch-msg.error { color: rgb(var(--c-symptome)); }
.ch-status { font-size: .8rem; color: var(--muted); font-style: italic; }
a.cite { font-size: .75em; vertical-align: super; text-decoration: none; margin-left: .1em; }
.ch-src { margin-top: .6rem; padding-top: .5rem; border-top: 1px dashed var(--line); font-size: .8rem; }
.ch-src-h { font-weight: 600; color: var(--muted); margin-bottom: .2rem; }
.ch-src ul { list-style: none; padding: 0; margin: .1rem 0; } .ch-src li { margin: .15rem 0; }
.ch-src li.cited a { font-weight: 600; } .ch-src li.flash { background: rgb(var(--c-ursachen) / .3); }
.ch-src summary { cursor: pointer; color: var(--muted); margin-top: .3rem; }
.ch-form { display: flex; gap: .5rem; padding: .6rem .9rem; border-top: 1px solid var(--line); }
.ch-form textarea { flex: 1; font: inherit; font-size: .93rem; resize: none; padding: .45rem .6rem; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg); color: var(--fg); }
.ch-form button { font: inherit; padding: 0 .9rem; border-radius: 8px; cursor: pointer; border: 1px solid rgb(var(--c-therapie) / .6);
  background: rgb(var(--c-therapie) / .85); color: #fff; }
.ch-form button:disabled { opacity: .5; cursor: wait; }
.ch-foot { font-size: .7rem; color: var(--muted); padding: 0 .9rem .5rem; }
@media (min-width: 1500px) { body.chat-open main { margin-right: 31rem; } }
@media (max-width: 900px) { #chat { top: 3.3rem; width: 100vw; } }