/* 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}
.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}
main{flex:1;display:flex;min-height:0}
footer{flex:none;border-top:1px solid var(--line);background:var(--card);
  padding:7px 20px;font-size:11.5px;line-height:1.45;color:var(--ink-3);
  display:flex;gap:6px 18px;flex-wrap:wrap;align-items:baseline}
footer b{font-weight:600;color:var(--ink-2)}
footer a{color:var(--ink-2)}
footer a:hover{color:var(--focus)}
footer .zusatz{color:var(--ink-3)}
@media(max-width:820px){footer{font-size:11px;padding:6px 14px}}
#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}
#baum.an{display:block}
#baum{font-size:13.5px}
.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}}