/* ------------------------------------------------------------------ *
 *  tafel.css — die Schlüsseltafel
 *
 *  Zwei Teile: die Auswahl am Bildschirm (dieselbe Liste wie in der
 *  Hierarchieansicht, mit einem Kästchen davor) und das Blatt, das in
 *  wirklicher Grösse aufgebaut und für den Bildschirm nur kleiner
 *  gezeichnet wird.
 * ------------------------------------------------------------------ */

.nur-st{display:none}
body.st .nur-st{display:inline-flex}

#tafel{position:absolute;inset:0;overflow:auto;display:none}
#tafel.an{display:block}
#st-baum{padding:12px 16px 40px;font-size:13.5px}

/* Das Kästchen steht vor dem Punkt und hat dieselbe Höhe wie die
   Zeile. `accent-color` genügt, um es in die Farbwelt zu holen; ein
   nachgebautes Kästchen verlöre den dritten Zustand und die
   Tastaturbedienung. */
#st-baum .hk{flex:none;margin:.28em 0 0;width:15px;height:15px;
  accent-color:var(--ink);cursor:pointer}

/* --- Das Blatt ---
   Am Bildschirm nie zu sehen: die Abbildung im Druckdialog zeigt
   Abschriften davon, und gedruckt wird das Blatt selbst. Ausgeblendet
   über eine Klasse und nicht über das Attribut `hidden`, weil sich
   `hidden` im Ausdruck nur mit einem `!important` übergehen liesse. */
#st-halter.aus{display:none}
#st-blatt{transform-origin:top left}
#st-mess{position:absolute;left:-99999px;top:0;visibility:hidden}

.st-seite{position:relative;background:#fff;overflow:hidden;
  box-shadow:0 2px 14px rgba(0,0,0,.14);margin-bottom:14px;
  font-family:var(--ui);color:#1F1E1C;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.st-spalte{position:absolute;overflow:hidden}
/* Der Titel läuft über die ganze Blattbreite; rechts davon bleibt Platz
   frei, und das ist Absicht — ein Plakattitel braucht Luft. */
.st-kopf{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;
  font-weight:600;letter-spacing:-.02em}

/* Ein Eintrag. Die Bezeichnung steht im vollen Wortlaut und bricht mit
   hängendem Einzug unter sich selbst um, nicht unter den Kode —
   sonst liefe die zweite Zeile in die Kodespalte hinein. */
.st-zeile,.st-fett{line-height:1.34;padding-bottom:.16em}
.st-fett{font-weight:600}
.st-k{display:inline-block;font-weight:600;text-indent:0}
.st-quer{color:#969187}
.st-quer .st-k{opacity:.75}

/* Die Überschriften sind die Einträge auf der Farbebene: bei der
   ICD-11 die 23 Blöcke, bei der ICF die Kapitel. Weisse Schrift auf
   der Farbe der Gruppe, abgedunkelt bis Weiss darauf lesbar ist. */
.st-titel{color:#fff;font-weight:700;line-height:1.3;
  padding:.28em .45em;margin:.5em 0 .35em;border-radius:.2em}
.st-spalte>.st-titel:first-child{margin-top:0}

/* --- Dialog --- */
#st-dialog{position:fixed;inset:0;z-index:110;display:flex;align-items:center;
  justify-content:center;padding:24px;background:rgba(31,30,28,.42)}
#st-dialog[hidden]{display:none}
#st-dialog .fenster{background:var(--card);border-radius:12px;max-width:640px;width:100%;
  max-height:calc(100vh - 48px);overflow:auto;padding:26px 28px 20px;
  box-shadow:0 18px 60px rgba(0,0,0,.22)}
#st-dialog h2{margin:0 0 8px;font-size:20px;font-weight:600;letter-spacing:-.015em}
#st-dialog .hinweis{color:var(--ink-2);line-height:1.55;font-size:13px;margin:6px 0}
#st-dialog .reihe{display:flex;align-items:center;gap:10px;margin:10px 0;flex-wrap:wrap}
#st-dialog select{border:1px solid var(--line);background:var(--card);border-radius:6px;
  font:inherit;font-size:13.5px;padding:6px 8px;color:var(--ink)}
#st-info{font-size:13px;color:var(--ink);font-weight:500;margin:12px 0 0}
#st-warnung{color:var(--ink-2)}
#st-warnung:empty,#st-info:empty{display:none}
#st-dialog .fuss{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;
  padding-top:16px;border-top:1px solid var(--line)}
#st-dialog .haupt{background:var(--ink);color:#fff;border-color:var(--ink)}

/* Abbildung der ersten beiden Blätter. Es sind Abschriften des
   wirklichen Blattes; was hier steht, kommt so aus dem Drucker. */
#st-vorschau{display:flex;gap:10px;align-items:flex-end;margin:12px 0 0}
.st-mini{overflow:hidden;border:1px solid var(--line);background:#fff;flex:none}
.st-mini .st-seite{margin:0;box-shadow:none}
.st-mehr{font-size:12px;color:var(--ink-3)}

/* --- Drucken ---
   Gedruckt wird nur das Blatt. Die Seiten tragen ihre Höhe selbst und
   lassen unten den Streifen frei, in dem die Fusszeile steht. */
@media print{
  body.st header, body.st aside, body.st #griff, body.st #st-dialog,
  body.st > footer, body.st #st-baum, body.st #crumb, body.st #map,
  body.st #baum, body.st #mm{display:none !important}
  body.st, body.st html{height:auto;overflow:visible;background:#fff}
  body.st main{display:block;margin:0;padding:0}
  body.st #stage{position:static;flex:none;min-width:0}
  body.st #tafel{position:static;overflow:visible}
  body.st #st-halter,body.st #st-halter.aus{display:block;padding:0;
    overflow:visible;height:auto !important}
  body.st #st-blatt{transform:none !important}
  body.st .st-seite{box-shadow:none;margin:0;break-after:page}
  body.st .st-seite:last-child{break-after:auto}
}