/* Montserrat liegt lokal bei, ohne Verbindung zu Google. Es ist eine
   Variable-Schrift, eine Datei deckt alle Strichstärken ab.          */
@font-face{
  font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('fonts/montserrat-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('fonts/montserrat-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF;
}
:root{
  --paper:#FBFAF8; --ink:#1F1E1C; --ink-2:#6A665E; --ink-3:#969187;
  --line:#E4E0D8; --card:#FFFFFF; --focus:#2160AE;
  --ui:'Montserrat',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--ui);font-size:15px;line-height:1.5;
  display:flex;flex-direction:column}
header{padding:14px 20px 12px;border-bottom:1px solid var(--line);background:var(--card)}
h1{margin:0;font-size:22px;font-weight:600;letter-spacing:-0.015em;line-height:1.25}
h1 span{color:var(--ink-2);font-weight:400;font-size:15px}
.bar{display:flex;gap:10px;align-items:center;margin-top:10px;flex-wrap:wrap}
.search{position:relative;flex:1 1 260px;max-width:420px}
input[type=search]{width:100%;height:34px;padding:0 10px;font:inherit;font-size:14px;
  border:1px solid var(--line);border-radius:6px;background:var(--paper);color:var(--ink)}
input[type=search]:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px rgba(33,96,174,.12)}
/* Die Trefferliste richtet sich nach dem längsten Eintrag, statt auf die
   Breite des Suchfelds beschränkt zu bleiben. Sie wächst bis an den
   Fensterrand und bricht keine Zeile um.                             */
.hits{position:absolute;z-index:20;left:0;top:38px;background:var(--card);
  width:max-content;min-width:100%;max-width:min(1100px,calc(100vw - 48px));
  border:1px solid var(--line);border-radius:6px;max-height:290px;
  overflow-y:auto;overflow-x:hidden;display:none;
  box-shadow:0 6px 20px rgba(0,0,0,.08)}
.hits.on{display:block}
.hit{padding:7px 12px;cursor:pointer;font-size:13.5px;border-bottom:1px solid var(--line);
  display:flex;gap:10px;align-items:baseline}
/* Der Code bleibt in einer Zeile und bildet eine Spalte, die Bezeichnung
   darf umbrechen, falls die Fensterbreite nicht reicht. Abgeschnitten
   wird nichts.                                                       */
.hit span{white-space:normal;overflow-wrap:anywhere}
.hit:last-child{border-bottom:0}
.hit:hover,.hit.sel{background:#F2EFE8}
.hit b{font-weight:600;font-variant-numeric:tabular-nums;flex:none;
  white-space:nowrap;min-width:66px}
.dehnt{flex:1 1 auto;min-width:12px}
@media(max-width:820px){.dehnt{display:none}}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
/* Die Aufschriften der Knöpfe stehen in der vollen Textfarbe und in
   Halbfett-nah (500). Vorher waren sie im gedämpften Grau der
   Nebentexte gesetzt und dadurch schwerer zu lesen als das, was sie
   bedienen.                                                        */
.seg button{border:0;background:var(--card);font:inherit;font-size:13.5px;
  padding:7px 13px;cursor:pointer;color:var(--ink)}
.seg button+button{border-left:1px solid var(--line)}
.seg button[aria-pressed=true]{background:var(--ink);color:#fff}
/* Ein Knopf mit Klappliste darunter. */
.menuhalter{position:relative;display:inline-block}
.menuliste{position:absolute;z-index:30;top:calc(100% + 4px);left:0;
  min-width:230px;background:var(--card);border:1px solid var(--line);
  border-radius:8px;padding:6px;box-shadow:0 8px 24px rgba(0,0,0,.14)}
.menuliste[hidden]{display:none}
.menuliste label{display:flex;gap:8px;align-items:flex-start;
  padding:7px 8px;border-radius:6px;cursor:pointer;font-size:13.5px}
.menuliste label:hover{background:var(--paper)}
.menuliste input{margin:2px 0 0}
/* Ein Knopf im Menü sieht aus wie eine Zeile. Sein Zustand steht in
   aria-pressed und erscheint als Haken davor; die Spalte ist immer da,
   damit die Aufschriften untereinander bündig stehen. */
.menuzeile{display:flex;align-items:center;gap:8px;width:100%;
  border:0;background:none;font:inherit;font-size:13.5px;font-weight:500;
  color:var(--ink);text-align:left;padding:8px;border-radius:6px;cursor:pointer}
.menuzeile:hover{background:var(--paper)}
.menuzeile::before{content:"";width:14px;flex:0 0 14px;color:var(--ink)}
.menuzeile[aria-pressed=true]::before{content:"✓"}
.menuliste em{display:block;font-style:normal;font-size:12px;color:var(--ink-3)}

/* Die Auswahllisten der Ebenen sehen aus wie ein Knopf — dieselbe
   Regel für die Mindmap und die Schlüsseltafel, sonst sitzt in der
   einen Leiste ein Knopf und in der anderen ein Systemfeld. Der
   Behälter trägt zwar `seg`, gibt dessen Rahmen und Beschnitt aber ab:
   die aufgeklappte Liste ragt darüber hinaus. */
#mm-ebenen select,#st-ebenen select{border:1px solid var(--line);
  background:var(--card);border-radius:6px;font:inherit;font-size:13.5px;
  font-weight:500;padding:6px 8px;color:var(--ink);cursor:pointer}
#mm-ebenen select:hover,#st-ebenen select:hover{border-color:var(--ink-3)}
#mm-ebenen,#st-ebenen{border:0;overflow:visible}

.btn{border:1px solid var(--line);background:var(--card);border-radius:6px;font:inherit;font-size:13.5px;
  padding:7px 12px;cursor:pointer;color:var(--ink)}
/* Das Gewicht steht in einer eigenen Regel nach den beiden oberen, nicht
   in ihnen drin. In derselben Regel stünde es hinter dem font:inherit
   und müsste sich gegen die Kurzschreibweise durchsetzen; das ist zwar
   so vorgesehen, aber unnötig heikel. Eine spätere Regel gewinnt
   ohnehin. Wer es kräftiger will, setzt hier 600.                    */
.bar .btn,.bar .seg button{font-weight:500}
/* Beim Überfahren tritt nur noch der Rahmen hervor; die Schrift ist
   schon dunkel und kann nicht mehr dunkler werden.                   */
.btn:hover{border-color:var(--ink-3)}
.spende{display:none;align-items:center;gap:6px;text-decoration:none;
  border:1px solid var(--focus);color:var(--focus);border-radius:6px;
  font-size:13.5px;font-weight:600;padding:6px 13px;white-space:nowrap}
.spende:hover{background:var(--focus);color:#fff}
.spende svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.4;stroke-linejoin:round}
.spende.an{display:inline-flex}
.bar .btn.rund{width:32px;padding:0;text-align:center;font-weight:600}
/* Der Umschalter auf die andere Klassifikation. Sieht aus wie ein Knopf,
   ist aber ein Link, deshalb die beiden Zusatzregeln. Ohne .an bleibt er
   verborgen — so wie der Spendenknopf.                                */
a.btn{text-decoration:none;display:none;align-items:center;gap:6px}
a.btn.an{display:inline-flex}
a.btn strong{font-weight:600;color:var(--ink)}
#hilfe{position:fixed;inset:0;z-index:100;display:flex;align-items:center;
  justify-content:center;padding:24px;background:rgba(31,30,28,.42)}
#hilfe[hidden]{display:none}
#hilfe .karte{background:var(--card);border-radius:12px;max-width:580px;width:100%;
  max-height:calc(100vh - 48px);overflow:auto;padding:30px 32px 24px;
  box-shadow:0 18px 60px rgba(0,0,0,.22)}
#hilfe h2{margin:0;font-size:21px;font-weight:600;letter-spacing:-.015em}
#hilfe .lead{margin:10px 0 0;color:var(--ink-2);font-size:14px;line-height:1.55}
#hilfe .schritte{list-style:none;margin:22px 0 0;padding:0}
#hilfe .schritte li{display:flex;gap:15px;padding:13px 0;
  border-top:1px solid var(--line)}
#hilfe .schritte svg{width:32px;height:32px;flex:none;margin-top:1px;
  fill:none;stroke:var(--ink-3);stroke-width:1.5;stroke-linecap:round;
  stroke-linejoin:round}
#hilfe .schritte svg .voll{fill:var(--ink-3);stroke:none}
#hilfe .schritte div{font-size:13.5px;line-height:1.5;color:var(--ink-2)}
#hilfe .schritte b{display:block;color:var(--ink);font-weight:600;margin-bottom:2px}
#hilfe .fuss{display:flex;align-items:center;gap:14px;margin-top:22px;
  padding-top:18px;border-top:1px solid var(--line);flex-wrap:wrap}
#hilfe .fuss span{font-size:12.5px;color:var(--ink-3)}
.btn.stark{background:var(--ink);color:#fff;border-color:var(--ink);
  font-size:14px;padding:9px 20px}
.btn.stark:hover{background:#000;color:#fff;border-color:#000}
/* Hinweis im Detailfeld bei einer Ergänzung der WHO. */
.ergaenzt-hinweis{margin:8px 0 0;padding:8px 10px;border-radius:6px;
  background:var(--paper);border:1px solid var(--line);
  font-size:12.5px;line-height:1.5;color:var(--ink-2)}

/* In der Mindmap ist das Suchfeld schmaler. Es wird dort seltener
   gebraucht als in Karte und Liste, kostete aber mit 335 Punkten den
   grössten Platz in der Leiste. Die Trefferliste darunter richtet sich
   weiterhin nach dem längsten Eintrag, nicht nach dem Feld. */
body.mm .search{flex:0 0 190px;max-width:190px}

main{flex:1;display:flex;min-height:0}

/* Fusszeile, dieselbe wie auf der Webseite: Weg zurück, Copyright,
   Impressum, Datenschutz. Im Ausdruck der Mindmap ist sie
   ausgeblendet, dort steht #druckfuss. */
footer.fuss{flex:none;border-top:1px solid var(--line);background:var(--card);
  padding:8px 20px;font-size:12px;line-height:1.45;color:var(--ink-3);
  display:flex;gap:6px 18px;flex-wrap:wrap;align-items:baseline}
footer.fuss .dehnt{flex:1}
footer.fuss a{color:var(--ink-2);text-decoration:none}
footer.fuss a:hover{color:var(--focus)}
footer.fuss .marke{font-weight:700;letter-spacing:-.02em;color:var(--ink)}
footer.fuss .marke em{font-style:normal;font-weight:500;color:var(--ink-3)}
@media(max-width:820px){footer.fuss{font-size:11px;padding:7px 14px}}

/* Die Fusszeile des Ausdrucks. Am Bildschirm unsichtbar, im Druck
   zentriert und je Angabe eine Zeile. Der Schriftgrad kommt beim
   Drucken aus der jeweiligen Ansicht und richtet sich nach der
   Blattgrösse; der Wert hier ist nur die Rückfallebene. Bricht eine
   Zeile um, wächst die Fusszeile über den freigehaltenen Platz hinaus
   und der Ausdruck rutscht auf ein Blatt mehr.

   In der Mindmap steht sie im Fluss unter der einen Seite, in der
   Schlüsseltafel fest am unteren Blattrand — dort gibt es mehrere
   Seiten, und die Angabe zur WHO gehört auf jede.               */
#druckfuss{display:none}
@media print{
  /* `html,body{height:100%}` ist am Bildschirm richtig und im Ausdruck
     falsch: mehrseitiges wird daran abgeschnitten. Die frühere Regel
     stand als `body.mm html` da und griff nie — `html` ist kein
     Nachfahre von `body`. */
  html{height:auto}
  body.mm #druckfuss,body.st #druckfuss{display:block;border-top:1px solid #ccc;
    font-size:7.5pt;line-height:1.3;padding:3px 0 0;color:#666;text-align:center}
  body.mm #druckfuss{margin-top:3px}
  body.st #druckfuss{position:fixed;left:0;right:0;bottom:0;background:#fff}
  body.mm #druckfuss .eigen,body.st #druckfuss .eigen{margin-top:1px;color:#888}
}
#stage{flex:1;position:relative;min-width:0}
svg{display:block;width:100%;height:100%;cursor:grab;touch-action:none;font-family:var(--ui)}
/* Der Mittelkreis führt eine Ebene zurück; beim Überfahren tritt er hervor. */
g.mitte circle{transition:stroke-width .12s}
g.mitte:hover circle{stroke-width:3}
g.mitte:hover path,g.mitte:hover text[opacity]{opacity:1}
svg.drag{cursor:grabbing}
#crumb{position:absolute;top:10px;left:14px;font-size:13px;color:var(--ink-2);display:flex;gap:6px;
  flex-wrap:wrap;max-width:70%}
#crumb button{border:0;background:none;font:inherit;font-size:13px;color:var(--focus);cursor:pointer;padding:0}
#crumb span{color:var(--ink-3)}
#baum{position:absolute;inset:0;overflow:auto;padding:12px 16px 40px;
  display:none;font-size:13.5px}
#baum.an{display:block}
.zeile{display:flex;align-items:flex-start;gap:9px;padding:3px 6px;border-radius:5px;
  cursor:pointer;font-size:inherit;line-height:1.45}
.zeile:hover{background:#F2EFE8}
.zeile.aktiv{background:#EAE4D6}
.punkt{width:.72em;height:.72em;border-radius:50%;flex:none;margin-top:.42em;
  border:1.6px solid transparent;box-sizing:border-box}
.gruppe{font-weight:500;color:var(--ink-2)}
/* Die Breite setzt baumZeichnen() je Ebene, aus dem breitesten Kode
   dieser Ebene. Hier darf deshalb kein min-width mehr stehen: ein
   Mindestmass gewinnt gegen eine kleinere gesetzte Breite und machte
   die Spalte auf tiefen Ebenen wieder zu breit.

   padding-right statt allein auf den Abstand der Zeile zu bauen: der
   Abstand sitzt zwischen den Feldern, ein Kode aber, der breiter
   ausfällt als seine gesetzte Breite, ragt darüber hinaus und stösst
   an die Bezeichnung. Das Polster liegt innerhalb der Spalte und geht
   nicht verloren.                                                    */
.kode{font-weight:600;font-variant-numeric:tabular-nums;flex:none;
  min-width:0;white-space:nowrap;padding-right:4px;box-sizing:content-box}
.zeile.quer .txt{color:var(--ink-3)}
.zeile.quer .kode{opacity:.7}
#griff{width:7px;flex:none;cursor:col-resize;background:var(--line);
  border-left:1px solid var(--line);border-right:1px solid var(--line)}
#griff:hover,#griff.aktiv{background:var(--ink-3)}
aside{width:300px;flex:none;border-left:1px solid var(--line);background:var(--card);
  padding:16px 18px;overflow:auto}
aside .code{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.02em}
aside h2{margin:6px 0 10px;font-size:16px;font-weight:600;line-height:1.35}
aside dl{margin:0;font-size:13.5px}
aside dt{color:var(--ink);font-weight:600;margin-top:14px;font-size:12.5px}
aside dd{margin:2px 0 0;color:var(--ink-2)}
aside .path{color:var(--ink-2);font-size:13px}
aside .fliess{color:var(--ink);line-height:1.55;margin-top:3px}
aside dd ul{margin:4px 0 0;padding-left:17px}
aside dd li{margin:2px 0}
aside dd li>.werte{margin-top:2px}
aside .who{color:var(--focus);font-size:13px}
aside .herkunft{color:var(--ink-3);font-size:12px}
aside .werte{color:var(--ink-3);font-size:12.5px;margin:2px 0 4px;line-height:1.45}
aside .achsname{display:block;color:var(--ink-2)}
aside .mitkode{color:var(--ink-3);font-variant-numeric:tabular-nums}
#kopie{display:flex;gap:6px;margin:2px 0 4px;flex-wrap:wrap}
#kopie .kopf{display:inline-flex;align-items:center;gap:5px;
  border:1px solid var(--line);background:var(--paper);border-radius:5px;
  font:inherit;font-size:12px;padding:3px 9px 3px 7px;cursor:pointer;color:var(--ink-2)}
#kopie .kopf svg{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.3;stroke-linejoin:round;stroke-linecap:round}
#kopie .kopf:hover{border-color:var(--ink-3);color:var(--ink)}
#kopie .kopf.erfolg{border-color:var(--focus);color:var(--focus)}
aside .xref{display:block;text-align:left;border:0;background:none;font:inherit;font-size:13.5px;
  color:var(--focus);cursor:pointer;padding:3px 0}
@media(max-width:820px){main{flex-direction:column}
  #griff{display:none}
  aside{width:auto!important;border-left:0;border-top:1px solid var(--line);max-height:42vh}}