/* Wundschluss – Live-Imaging. Die Bühne ist das einzige laute Element. */

@font-face { font-family: 'WS Text'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/ws-text-400.woff2') format('woff2'); }
@font-face { font-family: 'WS Text'; font-weight: 600; font-style: normal; font-display: swap; src: url('fonts/ws-text-600.woff2') format('woff2'); }
@font-face { font-family: 'WS Text'; font-weight: 400; font-style: italic; font-display: swap; src: url('fonts/ws-text-400i.woff2') format('woff2'); }
@font-face { font-family: 'WS Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/ws-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'WS Sans'; font-weight: 700; font-style: normal; font-display: swap; src: url('fonts/ws-sans-700.woff2') format('woff2'); }

:root {
  --glas: #E9EEEC;
  --glas-tief: #DDE4E1;
  --tusche: #16211F;
  --stativ: #56635F;
  --linie: rgba(22, 33, 31, .16);
  --kammer: #000;

  /* Kanäle: hell für die Bühne, dunkel für Kurven auf Glas */
  --k-kerne: #5C7CFF;   --k-kerne-t: #3552D6;
  --k-kera: #4CE08A;    --k-kera-t: #1E8A4C;
  --k-neutro: #E85BFF;  --k-neutro-t: #A62BC0;
  --k-makro: #3FD6E0;   --k-makro-t: #127F88;
  --k-fibrin: #FFC23D;  --k-fibrin-t: #9A6A00;
  --k-keime: #F2F2F2;   --k-keime-t: #56635F;

  --schrift-text: 'WS Text', 'STIX Two Text', Georgia, serif;
  --schrift-ui: 'WS Sans', 'Atkinson Hyperlegible Next', system-ui, sans-serif;

  --rand: clamp(16px, 3vw, 40px);
  --breite: 1520px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --glas: #141B1A; --glas-tief: #1C2523; --tusche: #E3EAE7; --stativ: #93A29D; --linie: rgba(227, 234, 231, .16);
    --k-kerne-t: #8FA5FF; --k-kera-t: #6FE3A0; --k-neutro-t: #EE8BFF; --k-makro-t: #6FDFE7; --k-fibrin-t: #FFCF66; --k-keime-t: #93A29D;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --glas: #141B1A; --glas-tief: #1C2523; --tusche: #E3EAE7; --stativ: #93A29D; --linie: rgba(227, 234, 231, .16);
  --k-kerne-t: #8FA5FF; --k-kera-t: #6FE3A0; --k-neutro-t: #EE8BFF; --k-makro-t: #6FDFE7; --k-fibrin-t: #FFCF66; --k-keime-t: #93A29D;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--glas); color: var(--tusche);
  font-family: var(--schrift-ui); font-size: 15px; line-height: 1.45;
  font-variant-numeric: tabular-nums lining-nums;
}
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--tusche); outline-offset: 2px; }

/* ---------- Kopf ---------- */
.kopf {
  max-width: var(--breite); margin: 0 auto; padding: 28px var(--rand) 18px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap;
}
.kopf h1 {
  font-family: var(--schrift-text); font-weight: 600; margin: 0;
  font-size: clamp(2.5rem, 5.2vw, 4.2rem); line-height: .95; letter-spacing: -.015em;
}
.kopf__unter { font-family: var(--schrift-text); font-size: 1.25rem; margin: 8px 0 0; color: var(--stativ); }
.kopf__schalter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.kopf__szenario { display: grid; gap: 3px; font-size: 12.5px; color: var(--stativ); }
.kopf__szenario[hidden] { display: none; }
.kopf__szenario select { background: var(--glas); color: var(--tusche); border: 1px solid var(--linie); border-radius: 3px; padding: 6px 8px; min-height: 34px; font-size: 15px; }
.ab-marke { font-weight: 700; color: var(--tusche); }
.klanglegende { flex-basis: 100%; margin: 0; color: var(--stativ); font-size: 13.5px; max-width: 60em; }
.klanglegende[hidden] { display: none; }

/* ---------- Knöpfe ---------- */
.knopf {
  appearance: none; background: transparent; border: 1px solid var(--linie); border-radius: 3px;
  padding: 6px 12px; cursor: pointer; line-height: 1.2; min-height: 34px;
}
.knopf:hover { border-color: var(--tusche); }
.knopf[aria-pressed="true"], .knopf[aria-checked="true"] { background: var(--tusche); color: var(--glas); border-color: var(--tusche); }
.knopf--klein { padding: 3px 8px; min-height: 28px; font-size: 13px; }

/* ---------- Arbeitsplatz ---------- */
.arbeitsplatz { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }

.leiste {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 28px;
  padding: 10px 0; border-top: 1px solid var(--linie);
}
.kanaele { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.kanal {
  appearance: none; background: none; border: 0; padding: 4px 0; cursor: pointer;
  display: inline-flex; align-items: baseline; gap: 6px; color: var(--tusche);
}
.kanal__punkt {
  width: 10px; height: 10px; border-radius: 50%; align-self: center;
  background: var(--k); box-shadow: 0 0 0 1px rgba(0, 0, 0, .25);
}
.kanal__filter { color: var(--stativ); font-size: 12.5px; }
.kanal[aria-pressed="false"] { color: var(--stativ); }
.kanal[aria-pressed="false"] .kanal__punkt { background: transparent; box-shadow: inset 0 0 0 1.5px var(--stativ); }
.kanal[aria-pressed="false"]:not(.kanal--felder) .kanal__filter { text-decoration: line-through; }
.kanal--felder { padding-left: 14px; border-left: 1px solid var(--linie); }
.kanal--felder[aria-pressed="true"] { font-weight: 700; }

.messwerte { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; }
.messwerte div { display: flex; flex-direction: column; min-width: 4.5em; }
.messwerte dt { font-size: 12.5px; color: var(--stativ); }
.messwerte dd { margin: 0; font-weight: 700; font-size: 15px; white-space: nowrap; }
.messwerte dd small { font-weight: 400; color: var(--stativ); font-size: 12px; }
.messwerte .mw-b { font-weight: 400; color: var(--stativ); }
.messwerte .mw-b b { color: var(--tusche); }

.buehne { position: relative; background: var(--kammer); width: 100%; display: grid; grid-template-columns: 1fr; gap: 2px; }
.buehne[data-vergleich="1"] { grid-template-columns: 1fr 1fr; }
.buehne__bild { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--kammer); }
.buehne__bild[hidden] { display: none; }
.buehne canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.buehne[data-werkzeug="keime"] canvas { cursor: cell; }
.buehne[data-werkzeug="zoom"] canvas { cursor: zoom-in; }
.farbskala {
  position: absolute; left: 14px; top: 12px; color: #fff; font-size: 12.5px;
  display: grid; gap: 3px; width: min(220px, 40%); text-shadow: 0 1px 2px #000;
}
.farbskala[hidden] { display: none; }
.farbskala__balken {
  height: 8px;
  background: linear-gradient(90deg, #00224E, #123570, #3B496C, #575D6D, #707173, #8A8778, #A69D75, #C4B56C, #FEE838);
}
.farbskala__enden { display: flex; justify-content: space-between; }

.transport { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 0; }
.transport__trenner { width: 1px; height: 24px; background: var(--linie); margin: 0 6px; }
.gruppe { display: flex; gap: 4px; }
.transport__hinweis { margin: 0 0 0 auto; color: var(--stativ); font-size: 13.5px; }

.zeit { border-top: 1px solid var(--linie); padding: 12px 0 4px; }
.zeit__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
.zeit__titel { font-family: var(--schrift-text); font-weight: 600; font-size: 1.25rem; margin: 0; }
.zeit__legende { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 13px; color: var(--stativ); flex: 1; }
.zeit__legende span { display: inline-flex; align-items: center; gap: 5px; }
.zeit__legende i { display: inline-block; width: 18px; height: 0; border-top: 2px solid var(--f); }
.zeit__legende i.gestrichelt { border-top-style: dashed; }
.zeit__legende i.gepunktet { border-top-style: dotted; }
#zeitbild { display: block; width: 100%; height: 190px; margin-top: 6px; }

.regler {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 28px;
  padding: 16px 0; border-top: 1px solid var(--linie);
}
.regler__feld { display: grid; gap: 6px; align-content: start; }
.regler__fuer { display: grid; gap: 6px; align-content: start; }
.regler__fuer[hidden] { display: none; }
.regler__feld--schalter { grid-template-columns: auto 1fr; align-items: center; align-content: center; }
.regler__name { font-size: 13.5px; color: var(--stativ); display: flex; justify-content: space-between; gap: 8px; }
.regler__name output { color: var(--tusche); font-weight: 700; }
.regler input[type="range"] { width: 100%; accent-color: var(--tusche); }
.regler input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--tusche); margin: 0; }
.regler select {
  background: var(--glas); border: 1px solid var(--linie); border-radius: 3px; padding: 6px 8px; min-height: 34px;
}

.experte { border-top: 1px solid var(--linie); padding: 10px 0 16px; }
.experte summary { cursor: pointer; font-family: var(--schrift-text); font-weight: 600; font-size: 1.125rem; }
.experte__hinweis { color: var(--stativ); font-size: 13.5px; margin: 8px 0; }
.experte__tabelle { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.experte__tabelle th { text-align: left; font-weight: 400; color: var(--stativ); border-bottom: 1px solid var(--linie); padding: 4px 10px 4px 0; }
.experte__tabelle td { border-bottom: 1px solid var(--linie); padding: 5px 10px 5px 0; vertical-align: baseline; }
.experte__tabelle td:nth-child(3), .experte__tabelle td:nth-child(4) { white-space: nowrap; }
.experte__tabelle input { width: 6.5em; background: var(--glas); border: 1px solid var(--linie); border-radius: 3px; padding: 2px 5px; }
.experte__tabelle .sym { font-family: var(--schrift-text); font-style: italic; font-size: 15px; }
.experte__tabelle .geaendert { font-weight: 700; }

.status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Text: eine Spalte zum Lesen, Randnoten daneben ---------- */
.text { max-width: var(--breite); margin: 0 auto; padding: 28px var(--rand) 64px; border-top: 1px solid var(--linie); }
.text__vorspann { font-family: var(--schrift-text); font-size: 1.25rem; line-height: 1.6; max-width: 36em; margin: 0 0 1em; }
.text__hinweis { color: var(--stativ); max-width: 44em; }
.abschnitt {
  display: grid; grid-template-columns: minmax(0, 36em) minmax(12em, 17em); column-gap: 40px; align-items: start;
  margin-top: 48px; font-family: var(--schrift-text); font-size: 1.125rem; line-height: 1.62;
}
.abschnitt > * { grid-column: 1; }
.abschnitt > .randnote { grid-column: 2; font-family: var(--schrift-ui); font-size: 13px; line-height: 1.45; color: var(--stativ); margin-top: .35em; }
.abschnitt h2 { font-weight: 600; font-size: 1.75rem; line-height: 1.15; margin: 0 0 .6em; }
.abschnitt p { margin: 0 0 .9em; }
.abschnitt a, .text a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.abschnitt math[display="block"] { display: block math; margin: .4em 0 1em; font-size: 1.15em; overflow-x: auto; overflow-y: hidden; }
.gleichung { margin: 0 0 1em; }
.gleichung summary { cursor: pointer; font-family: var(--schrift-ui); font-size: 15px; font-weight: 700; }
.tabelle { width: 100%; border-collapse: collapse; font-family: var(--schrift-ui); font-size: 14px; line-height: 1.45; margin: .4em 0 1.2em; }
.tabelle th { text-align: left; font-weight: 400; color: var(--stativ); border-bottom: 1px solid var(--linie); padding: 4px 12px 4px 0; }
.tabelle td { border-bottom: 1px solid var(--linie); padding: 7px 12px 7px 0; vertical-align: top; }
.liste { padding-left: 1.1em; margin: 0 0 1em; }
.liste li { margin-bottom: .4em; }
.quellen { font-family: var(--schrift-ui); font-size: 14px; line-height: 1.5; padding-left: 1.6em; margin: 0 0 1em; }
.quellen li { margin-bottom: .45em; }
.tasten { margin-top: 40px; color: var(--stativ); font-size: 13.5px; max-width: 60em; }

@media (max-width: 980px) {
  .abschnitt { grid-template-columns: minmax(0, 1fr); }
  .abschnitt > .randnote { grid-column: 1; border-left: 2px solid var(--linie); padding-left: 10px; margin: -.3em 0 1em; }
  .buehne[data-vergleich="1"] { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .kopf { padding-top: 20px; }
  .kopf__unter { font-size: 1.05rem; }
  .buehne__bild { aspect-ratio: 4 / 3; }
  .transport__hinweis { margin-left: 0; flex-basis: 100%; }
  .experte__tabelle th:nth-child(6), .experte__tabelle td:nth-child(6) { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }