/* Gemeinsames Stylesheet aller Seiten. Wird einmal geladen und ueber alle
   1153 Seiten hinweg gecacht. */
/* Hell ist der Standard: ohne gespeicherte Wahl und ohne JavaScript gilt diese
   Palette. --dim und --accent erreichen auf allen drei Untergruenden
   (--bg, --panel, --rail) WCAG AA 4.5:1.

   color-scheme faerbt die nativen Bedienelemente mit: ohne das zeichnet Chrome
   Systemscrollbalken im falschen Ton. Betrifft auch die Loeschtaste im
   Suchfeld und die Fokusringe.

   --fs ist der Zoom, den die Knoepfe A− / A+ im Kopf setzen. zoom skaliert die
   ganze Seite — Schrift, Polsterung, Spaltenbreiten —, genau wie der Zoom des
   Browsers. Nur die Schrift zu vergroessern reichte nicht: die Objektspalte
   blieb 230px breit und schnitt die Namen ab.

   Einziger Haken: 100vh rechnet den Zoom nicht mit. Im skalierten
   Koordinatenraum stehen nur 100vh/--fs zur Verfuegung, deshalb steht das so
   in .grid und .side. */
:root {
  zoom: var(--fs);
  color-scheme: light;
  /* 1.15 ist die neue 100%-Stufe: der Standard war zu klein. Die Knoepfe
     beschriften relativ dazu, 100% heisst also zoom 1.15. */
  --fs: 1.15;
  --sb: #ccd3de;
  --sb-h: #aab4c4;
  /* Rahmen von Eingabefeldern. --line ist fuer Tabellenlinien gedacht und
     liegt bei 1,1:1 gegen die Leiste — als Umriss eines Bedienelements
     unsichtbar. WCAG 1.4.11 will dort 3:1, dieser Ton liefert 3,1. */
  --field: #848b96;

  --bg: #fdfdfe;
  --panel: #f5f7fa;
  --rail: #f0f3f7;
  --ink: #131720;
  --dim: #5f6878;
  --line: #e0e5ee;
  --accent: hsl(100, 61%, 27%);
  --accent-soft: #e4eefc;
  --warn: #8a5415;
  --ro: #5f6878;
  --rw: hsl(16, 69%, 20%);
  --enum: #6a339b;
  --ev: #a8431f;

  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Dunkle Palette, ueber den Knopf im Kopf. */
:root[data-t="dark"] {
  color-scheme: dark;
  --sb: #2f3745;
  --sb-h: #414c5e;
  --field: #6b7381;
  --bg: #2a2f39;
  --panel: #21252d;
  --rail: #232730;
  --ink: #a6abb4;
  --dim: #888f9b;
  --line: #232935;
  --accent: hsl(100, 61%, 37%);
  --accent-soft: #16283f;
  --warn: #e0a458;
  --ro: #8b94a6;
  --rw: hsl(11, 50%, 45%);
  --enum: #c08cf0;
  --ev: #f2836b;
}

* {
  box-sizing: border-box
}

/* Schlanke, ruhige Balken. scrollbar-* ist der Standard (Firefox ab 64,
   Chrome ab 121); die ::-webkit-Regeln decken aeltere WebKit-Staende ab.
   scrollbar-color wird vererbt, scrollbar-width nicht — daher das Sternchen. */
* {
  scrollbar-width: thin
}

:root {
  scrollbar-color: var(--sb) transparent
}

::-webkit-scrollbar {
  width: 11px;
  height: 11px
}

::-webkit-scrollbar-track {
  background: transparent
}

::-webkit-scrollbar-thumb {
  background: var(--sb);
  border-radius: 8px;
  border: 3px solid transparent;
  background-clip: content-box
}

::-webkit-scrollbar-thumb:hover {
  background: var(--sb-h);
  background-clip: content-box
}

::-webkit-scrollbar-corner {
  background: transparent
}

/* Container statt Media Query: zoom skaliert das Layout, aber Media Queries
   sehen weiter die echte Fensterbreite. Bei 150% auf 1000px haette die Seite
   logisch nur 667px, wuerde aber die Regeln fuer 1000px nehmen. Ein Container
   misst im skalierten Koordinatenraum und trifft damit das Richtige. */
body {
  container: page / inline-size;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 13.5px/1.5 var(--sans)
}

a {
  color: var(--accent);
  text-decoration: none
}

a:hover {
  text-decoration: underline
}

[hidden] {
  display: none !important
}

/* ---------- Kopfzeile ---------- */
/* baseline statt center: bei 16px Wortmarke neben 11px Steuerelementen zentriert
   "center" nur die Boxen, die Textgrundlinien laufen dann um ~2px auseinander.
   Der gleiche Versatz auf alle Kinder setzt die Gruppe wieder mittig. */
.top {
  height: 44px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  background: var(--rail);
  position: sticky;
  top: 0;
  z-index: 20
}

.top>* {
  position: relative;
  top: 8px;
  line-height: 1
}

.top .logo {
  font: 600 16px/1 var(--mono);
  letter-spacing: -.01em;
  color: var(--ink);
  white-space: nowrap
}

.top .logo:hover {
  text-decoration: none
}

.top .logo b {
  color: var(--accent);
  font-weight: 600
}

.rt {
  display: flex;
  gap: 2px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 2px
}

.rt button {
  border: 0;
  background: transparent;
  color: var(--dim);
  font: 11px/1 var(--sans);
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 5px;
  white-space: nowrap
}

.rt button:hover {
  color: var(--ink)
}

.rt button.on {
  background: var(--accent);
  color: #fff;
  font-weight: 600
}

.apiver {
  font: 11px/1 var(--mono);
  color: var(--dim);
  white-space: nowrap;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 99px
}

.apiver .sep {
  opacity: .5
}

/* Produktumschalter als <details>: braucht kein Skript und ist per Tastatur
   bedienbar. Ohne JavaScript klappt er ebenso auf. */
.prod {
  position: relative
}

.prod>summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 7px;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 7px;
  padding: 5px 11px;
  font: 11px/1 var(--sans);
  color: var(--ink);
  white-space: nowrap
}

.prod>summary::-webkit-details-marker {
  display: none
}

.prod>summary::after {
  content: "▾";
  color: var(--dim);
  font-size: 10px
}

.prod>summary:hover {
  border-color: var(--accent)
}

.prod .pv {
  font: 10.5px/1 var(--mono);
  color: var(--dim)
}

.prodmenu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  min-width: 230px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 5px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .45)
}

.prodmenu a {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  padding: 6px 9px;
  border-radius: 6px;
  font: 12px/1.3 var(--sans);
  color: var(--ink)
}

.prodmenu a:hover {
  background: var(--bg);
  text-decoration: none
}

.prodmenu a.on {
  background: var(--accent-soft);
  color: var(--accent)
}

.prodmenu a i {
  font-style: normal;
  font: 10.5px var(--mono);
  color: var(--dim)
}

.prodmenu a.on i {
  color: var(--accent);
  opacity: .8
}

/* Zuletzt besucht. Eine Recency-Spur, keine Hierarchie — ohne die Beschriftung
   liest sich die Reihe wie ein Breadcrumb und behauptet damit etwas Falsches.
   min-width:0 ist noetig, damit die Flexbox sie vor dem Suchfeld kuerzt. */
.trail {
  display: flex;
  align-items: baseline;
  gap: 9px;
  min-width: 0;
  overflow: hidden
}

.trail .h {
  flex: none;
  font: 600 10px/1 var(--sans);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--dim);
  opacity: .7
}

/* flex:0 1 auto mit min-width:0 laesst die Namen erst kuerzen, wenn der Kopf
   eng wird — statt sie immer auf eine feste Breite zu stutzen. Das Suchfeld
   hat Vorrang: es haelt seine min-width, die Spur gibt zuerst nach. */
.trail a {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 21ch;
  font: 11.5px/1 var(--mono);
  color: var(--dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

/* Trenner zwischen den Eintraegen. Schmaler Abstand als die Flex-Luecke,
   damit der Strich zu beiden Namen gleich weit steht. */
.trail .sep {
  flex: none;
  color: var(--dim);
  opacity: .4;
  margin: 0 -3px;
  font: 11.5px/1 var(--mono)
}

.trail a:hover {
  color: var(--accent);
  text-decoration: none
}

.kbtn {
  /* align-self:center haelt das Suchfeld aus der gemeinsamen Grundlinie
     heraus. Sonst bestimmt seine Innenpolsterung, wo die Grundlinie der
     Kopfzeile liegt — und die Wortmarke sass auf der Startseite, wo es das
     Suchfeld nicht gibt, 3,7px hoeher als sonst.

     top:0 hebt dafuer den Versatz aus .top>* auf: der schiebt die
     grundlinienausgerichteten Elemente um 8px nach unten, damit die Gruppe
     mittig sitzt. Zentriert ist das Suchfeld schon — beides addierte sich
     und es sass 9px zu tief. */
  align-self: center;
  top: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--dim);
  border-radius: 7px;
  padding: 6px 11px;
  cursor: pointer;
  font: 12px/1 var(--sans);
  min-width: 265px
}

.kbtn:hover {
  border-color: var(--accent)
}

.kbtn .keys {
  margin-left: auto;
  display: flex;
  gap: 3px
}

kbd {
  font: 10px var(--mono);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--dim);
  background: var(--bg)
}

/* flex:none und nowrap, sonst staucht die Kopfzeile den Knopf und "dark mode"
   bricht auf zwei Zeilen — bei 44 px Kopfhoehe sofort sichtbar. Gleiches gilt
   fuer die Zoomgruppe daneben: beide sind schmal und geben nichts her. */
.tg {
  flex: none;
  white-space: nowrap;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--dim);
  border-radius: 6px;
  padding: 6px 10px;
  font: 11px/1 var(--sans);
  cursor: pointer
}

/* Knoepfe fuer die Schriftgroesse. Sie skalieren mit allem anderen mit — der
   Zoom wirkt auf die ganze Seite, siehe :root. */
/* Auf der Startseite gibt es kein Suchfeld, das die Bedienelemente nach rechts
   schiebt — hier uebernimmt das die Zoomgruppe. */
.home .top .fs {
  margin-left: auto
}

.fs {
  display: flex;
  flex: none;
  white-space: nowrap;
  gap: 2px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 2px
}

.fs button {
  border: 0;
  background: transparent;
  color: var(--dim);
  font: 11px/1 var(--sans);
  padding: 5px 8px;
  cursor: pointer;
  border-radius: 5px
}

.fs button:hover:not(:disabled) {
  color: var(--ink);
  background: var(--bg)
}

/* Am Anschlag abgeblendet statt verschwunden — sonst springt der Kopf. */
.fs button:disabled {
  opacity: .35;
  cursor: default
}

.fs .lvl {
  align-self: center;
  min-width: 3.4em;
  text-align: center;
  font: 10px/1 var(--mono);
  color: var(--dim)
}

/* ---------- Raster ---------- */
.grid {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  min-height: calc(100vh / var(--fs) - 44px)
}

.side {
  background: var(--rail);
  border-right: 1px solid var(--line);
  padding: 10px 0;
  position: sticky;
  top: 44px;
  height: calc(100vh / var(--fs) - 44px);
  overflow-y: auto
}

.side .h {
  padding: 10px 14px 5px;
  font: 600 10px var(--sans);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--dim)
}

.side a {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  padding: 3px 14px;
  font: 12px var(--mono);
  color: var(--ink)
}

/* Lange Namen kuerzen statt am Rand abschneiden; die Zahl rechts bleibt stehen. */
.side a>span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.side a:hover {
  background: var(--panel);
  text-decoration: none
}

.side a.on {
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: inset 2px 0 0 var(--accent)
}

.side a i {
  flex: none;
  font-style: normal;
  color: var(--dim);
  font-size: 10px
}

.side a.e i {
  color: var(--enum)
}

.side a.co i {
  color: var(--warn)
}

.side .allobjects {
  font: 12px var(--sans);
  color: var(--accent);
  padding: 8px 14px
}

/* Filter der Objektspalte. Klebt oben, weil .side selbst der Scrollbereich ist
   — sonst waere er nach ein paar Zeilen Liste weggescrollt. */
.side .sidef {
  position: sticky;
  top: -10px;
  z-index: 2;
  background: var(--rail);
  padding: 4px 11px 8px;
  border-bottom: 1px solid var(--line)
}

.side .sidef input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--field);
  border-radius: 7px;
  padding: 6px 10px;
  color: var(--ink);
  font: 11.5px var(--mono)
}

.side .sidef input:focus {
  outline: none;
  border-color: var(--accent)
}

.side .sidef input::placeholder {
  color: var(--dim)
}

/* Gefilterte Anzahl neben der Gesamtzahl, damit eine kurze Liste erklaert ist. */
.side .h .of {
  opacity: .55;
  font-weight: 400
}

.side .none {
  padding: 14px;
  font: 11.5px var(--sans);
  color: var(--dim)
}

.doc {
  min-width: 0;
  /* Zwei Drittel der frueheren Werte (24/30/40): der Inhalt soll die Flaeche
     nutzen, der Rand nur trennen. */
  padding: 16px 20px 27px;
  display: flex;
  flex-direction: column
}

.dmain {
  flex: 1
}

.kind {
  font: 11px var(--mono);
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: .1em
}

.kind .of {
  opacity: .6
}

h1 {
  margin: 5px 0 0;
  font: 600 26px var(--mono)
}

.lede {
  color: var(--dim);
  margin: 8px 0 0;
  max-width: 78ch
}

.chain {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 13px;
  font: 11.5px var(--mono);
  color: var(--dim)
}

.subs {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 7px;
  font: 11.5px var(--mono);
  color: var(--dim)
}

.subs .h {
  font: 600 10px var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dim);
  opacity: .75
}

.subs .sep {
  opacity: .4
}

.chain .sep {
  opacity: .5
}

.bar {
  /* --namerow ist die Hoehe der Namenszeile. Sie erscheint erst beim Kleben,
     und ohne Ausgleich waechst die Leiste in diesem Moment um genau diesen
     Betrag — der Inhalt darunter sprang gemessen um 30 px. Der negative Rand
     nimmt das zurueck: die Leiste beansprucht im Fluss immer dasselbe. */
  --namerow: 30px;
  position: sticky;
  top: 44px;
  z-index: 4;
  background: var(--bg);
  padding: 11px 0;
  margin-top: 20px;
  border-bottom: 1px solid var(--line)
}

.bar.stuck {
  margin-top: calc(20px - var(--namerow))
}

/* Der Objektname bleibt beim Blaettern sichtbar: nach ein paar Bildschirmen
   Properties ist die Ueberschrift weg, und viele Namen aehneln sich
   (TextFrame, TextFramePreference). Kleiner als die Ueberschrift mit ihren
   26 px, aber dieselbe Schrift und dasselbe Gewicht — es ist derselbe Name,
   keine Beschriftung. */
/* Nur wenn die Leiste wirklich klebt: am Seitenanfang stuende der Name
   doppelt da, direkt unter der Ueberschrift. site.js setzt .stuck, sobald der
   Waechter darueber aus dem Blick geraet. */
.barname {
  display: none;
  height: var(--namerow);
  font: 600 17px/1.2 var(--mono);
  color: var(--ink);
  padding-bottom: 9px
}

.bar.stuck .barname {
  display: block
}

/* Die Art hinter dem Namen, in derselben Auszeichnung wie oben am Kopf.
   Inline, damit die Zeile ihre feste Hoehe behaelt — waere es eine zweite
   Zeile, muesste der Ausgleich in .bar.stuck mitwachsen. */
.barname .bkind {
  margin-left: 10px;
  font: 600 10px var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  vertical-align: 1px
}

/* Nullhoher Waechter fuer den IntersectionObserver. */
.barwatch {
  height: 0
}

.barrow {
  display: flex;
  gap: 10px;
  align-items: center
}

/* Traegt das Tastaturkuerzel im Feld. Als <label> zeigt schon der Klick auf
   das Kuerzel ins Feld, statt ins Leere zu gehen. */
.fwrap {
  position: relative;
  display: flex;
  min-width: 0
}

/* Nur ueber den Tabellen teilt sich das Feld die Zeile mit den Pillen und
   braucht eine Untergrenze. In der Objektliste steht es allein und muss mit
   der Leiste schmaler werden koennen. */
.bar .fwrap {
  flex: 1;
  min-width: 200px
}

.fwrap kbd {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none
}

/* Beim Tippen waere das Kuerzel nur noch Kulisse — und stuende irgendwann
   hinter dem Text. */
.fwrap:focus-within kbd {
  display: none
}

.bar input {
  flex: 1;
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--field);
  border-radius: 7px;
  padding: 8px 12px;
  color: var(--ink);
  font: 12.5px var(--mono)
}

.bar input:focus {
  outline: none;
  border-color: var(--accent)
}

.pill kbd {
  margin-left: 5px;
  padding: 0 4px;
  font-size: 9.5px;
  opacity: .75
}

.pill {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--dim);
  border-radius: 99px;
  padding: 5px 12px;
  font: 11.5px var(--sans);
  cursor: pointer;
  white-space: nowrap
}

.pill:hover {
  color: var(--ink)
}

.pill.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff
}

.sechead {
  margin: 26px 0 0;
  font: 600 11px var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
  display: flex;
  align-items: baseline;
  gap: 8px
}

.sechead b {
  color: var(--ink);
  font: 600 11px var(--mono)
}

.hint {
  color: var(--dim);
  font-size: 12px;
  margin: 5px 0 0
}

/* ---------- Hierarchie: worin steckt es, was steckt darin ----------
   Drei zentrierte Zeilen um den eigenen Namen. Die Beschriftung steht darueber
   und nicht daneben: bei 18 Elternnamen liefe die erste Zeile sonst darunter. */
/* Kopfbereich: links Name, Beschreibung und Vererbung, rechts die Hierarchie.
   Die Flaeche neben dem Titel stand sonst leer, und die Hierarchie schob die
   Tabellen nach unten. Passt beides nicht nebeneinander, rutscht der Kasten
   unter den Text und bleibt rechtsbuendig. */
.head {
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 8px 26px
}

/* Feste Haelften statt einer Breite nach Inhalt: sonst springt der Kasten von
   Seite zu Seite in eine andere Groesse, und das Blaettern wird unruhig.
   Die 13 px sind die halbe Luecke, damit beide Haelften wirklich gleich sind. */
.headmain {
  flex: 1 1 calc(50% - 13px);
  min-width: 0
}

/* Erst wenn die Spalte wirklich schmal wird, rutscht der Kasten unter den
   Kopf — nebeneinander bliebe fuer den Namen zu wenig uebrig. */
/* .head .tree, nicht .tree: die Regel fuer die halbe Breite steht weiter unten
   im Stylesheet und gewaenne sonst bei gleicher Spezifitaet. */
@container page (max-width: 900px) {
  .head {
    flex-wrap: wrap
  }

  .head .tree {
    flex-basis: auto;
    width: 100%
  }
}

/* Nur so breit wie sein Inhalt: bei zwei Eltern und ohne Kinder waere ein Block
   ueber die ganze Spalte fast leer. Der Inhalt bleibt zentriert — die drei
   Zeilen beziehen sich aufeinander. */
/* Der Kasten sitzt oben rechts und nimmt die rechte Haelfte — immer dieselbe,
   unabhaengig davon, wieviele Namen darin stehen. */
.tree {
  flex: 0 0 calc(50% - 13px);
  min-width: 0;
  margin: 0 0 4px auto;
  padding: 11px 14px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel)
}

.tree .h {
  display: block;
  margin-bottom: 7px;
  font: 600 10px/1 var(--sans);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--dim);
  opacity: .75
}

.tree p {
  margin: 0;
  text-align: center;
  font: 12px/1.75 var(--mono)
}

/* Die Namenszeile traegt die Betonung — sie ist der Bezugspunkt der beiden
   anderen und wiederholt bewusst die Ueberschrift. */
.tree .self {
  font-weight: 700;
  color: var(--ink);
  padding: 2px 0
}

/* Die Kinderliste wird lang (Application: 176 Namen). Zeilenhoehe knapp,
   Trenner blass, damit die Namen die Aufmerksamkeit tragen. */
.tree .up,
.tree .down {
  color: var(--dim)
}

.tree .sep {
  color: var(--dim);
  opacity: .4
}

/* Die Preference-Familie steht getrennt und eingeklappt: 172 der 423 Objekte
   gehoeren dazu und haengen an fast jedem Objekt. Wer nach Struktur sucht,
   will Article und Story sehen, nicht 53 mal "…Preference". */
.tree .prefs {
  margin-top: 7px;
  border-top: 1px solid var(--line);
  padding-top: 7px
}

.tree summary {
  text-align: center;
  color: var(--dim);
  font: 11.5px var(--sans);
  cursor: pointer
}

.tree summary:hover {
  color: var(--accent)
}

/* Eine eingeklappte Namensliste bekommt oben etwas Luft, damit sie nicht an
   der Namenszeile klebt. */
.tree .viele > p {
  margin-top: 5px
}

.tree .prefs .down {
  margin-top: 5px
}

/* Der Codeblock ist zugleich Kopierknopf: sein Inhalt soll in eine Datei
   wandern, nicht abgetippt werden. */
.snip {
  margin: 9px 0 0;
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow-x: auto;
  font: 12px/1.55 var(--mono);
  color: var(--ink)
}

.snip .cpx {
  white-space: pre;
  display: block
}

/* ---------- Tabellen ---------- */
/* table-layout:fixed haelt die deklarierten Spaltenbreiten ein. Ohne das
   bestimmt der laengste Bezeichner die Namensspalte: allowFontSizeAndLeading-
   Adjustment erzwang 229 px, und bei schmalem Fenster blieb der Beschreibung
   nichts mehr — die Seite lief seitlich ueber. Bezeichner duerfen dafuer
   umbrechen (siehe td.n). Breiten aus den Laengen im Modell: Name p90 = 23,
   Typ p90 = 22 Zeichen. */
/* Sprungziele brauchen Abstand nach oben: die Kopfzeile klebt, mit Skript
   zusaetzlich die Filterzeile. Ohne den Abstand landet ein Verweis aus der
   rechten Spalte, aus der Palette oder aus einem Deep-Link unter der
   Filterzeile — sichtbar ist dann der naechste Member, und man haelt ihn fuer
   den gesuchten. Der Wert kommt gemessen aus site.js (--sticky), weil die
   Filterzeile bei schmalem Fenster in zwei Reihen umbricht. Der Vorgabewert
   gilt ohne JavaScript: dann ist die Filterzeile ausgeblendet und nur die
   44 px der Kopfzeile kleben. */
.dmain [id],
.mlist {
  scroll-margin-top: var(--sticky, 50px)
}

table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  margin-top: 9px;
  font-size: 13px
}

th {
  text-align: left;
  font: 600 10px var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dim);
  padding: 6px 9px;
  border-bottom: 1px solid var(--line)
}

/* baseline statt top: die vier Spalten haben verschiedene Schriftgroessen
   (Name 12.5, Typ 11.5, Zugriff 10.5, Beschreibung 13.5 px). Mit top stehen
   die Kaesten buendig und die Schriften sitzen versetzt — das flimmert beim
   Ueberfliegen. baseline richtet die erste Zeile jeder Zelle aneinander aus. */
td {
  padding: 2px 0px 2px 6px;
  border-bottom: 1px solid var(--line);
  vertical-align: baseline
}

tr:hover td {
  background: var(--panel)
}

.c-n {
  width: 22%
}

.c-t {
  width: 24%
}

/* Feste Breite, keine Prozente: "read/write" braucht immer dieselben ~63px,
   und mit table-layout:fixed liefe es sonst bei mittlerer Fensterbreite in die
   Beschreibung hinein. Der Kopf "ACCESS" braucht mit Polsterung noch mehr. */
.c-a {
  width: 78px
}

td.n {
  font: 12.5px var(--mono);
  font-weight: 600;
  overflow-wrap: anywhere
}

/* Mehr Polster unten als die uebrigen Zellen: bricht die Typangabe um
   (CompositeFonts<CompositeFont>), bestimmt diese Zelle die Zeilenhoehe, und
   unter der zweiten Zeile blieben nur 2,8 px statt der 5,2 px, die einzeilige
   Zeilen von der Beschreibungsspalte geschenkt bekommen. Gemessen gleicht 4 px
   das genau aus und kostet nur an den umgebrochenen Zeilen Hoehe. */
td.t {
  font: 11.5px var(--mono);
  padding-bottom: 4px;
  overflow-wrap: anywhere
}

td.t {
  color: var(--warn)
}

td.t .or {
  opacity: .4
}

td.t .none {
  opacity: .45
}

td.t .lit {
  opacity: .55
}

/* Spitze Klammern in derselben Signalfarbe wie die [] der Arrays. Luft daneben,
   sonst verschmilzt "AutoCorrectTables<AutoCorrectTable>" zu einem Wort. */
.gen, .arr {
  color: var(--warn);
  padding-left: 0.18em;
  font-weight: 400
}

/* Aus fixDom.xsl abgeleitet: Wertebereich und "auch als Masseinheit schreibbar". */
.rngv {
  color: var(--rw);
  white-space: nowrap
}

.muv {
  color: var(--warn);
  cursor: help
}

/* Nur im UXP-Modus: File und Folder haben dort dieselben Namen, aber eine
   Promise-API. Kleiner und kursiv, sonst liest sich "Folder async" wie ein
   zweiter Typname — die Farbe der Zelle behaelt es. */
.uxpv {
  font-size: .85em;
  font-style: italic;
  cursor: help;
  white-space: nowrap
}

td.a {
  font: 10.5px var(--mono);
  overflow-wrap: anywhere
}

td.a.ro {
  color: var(--ro)
}

td.a.rw {
  color: var(--rw)
}

td.d {
  color: var(--dim)
}

.stat {
  font: 9.5px var(--mono);
  color: var(--warn);
  border: 1px solid var(--warn);
  border-radius: 3px;
  padding: 0 3px;
  margin-left: 5px;
  opacity: .8
}

/* Der Name selbst ist das Kopierziel — kein zusaetzlicher Knopf, der die Tabelle
   unruhig macht. Gepunktete Linie beim Hovern als Hinweis. */
.cpx {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  border-bottom: 1px dotted transparent
}

.cpx:hover {
  border-bottom-color: currentColor
}

.cpx:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px
}

.cpx.ok {
  color: var(--rw);
  border-bottom-color: transparent
}

/* Gemessen lagen zwischen den Chips und dem Zeilentrenner nur 3 bis 5 px;
   der letzte Chip sah dadurch aus, als sitze er auf der Linie. Jetzt oben und
   unten je 6 px, in beiden Richtungen sichtbar getrennt. */
.vals {
  margin: 6px 0 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px
}

.vals .vchip {
  font: 10.5px var(--mono);
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 1px 6px;
  cursor: pointer
}

.vals .vchip:hover {
  border-color: var(--accent)
}

.vals .vchip.ok {
  background: var(--rw);
  color: var(--bg);
  border-color: var(--rw)
}

.vals .more {
  font: 10.5px var(--mono);
  color: var(--dim)
}

/* ---------- Methoden ---------- */
/* Keine Leseweiten-Begrenzung: einzelne Adobe-Beschreibungen sind mehrere tausend
   Zeichen lang. Bei 72ch wurden daraus 30 Zeilen bei halb leerer Spalte. */
.mem {
  border-bottom: 1px solid var(--line);
  padding: 12px 2px
}

.mem .top1 {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap
}

.mem .id {
  font: 600 13.5px var(--mono)
}

.mem .id .d {
  color: var(--dim);
  font-weight: 400
}

.mem .id .opt {
  opacity: .6
}

.mem .ret {
  font: 11.5px var(--mono);
  color: var(--dim)
}

.mem .ret b {
  color: var(--ink);
  font-weight: 400
}

.mem .desc {
  color: var(--dim);
  margin: 5px 0 0
}

/* Parameterliste als echtes Grid: mit Flex und min-width sprengt ein breiter Typ
   wie "File | JavaScriptFunction" nur seine eigene Zeile und die Spalten verspringen. */
.args {
  margin-top: 8px;
  border-left: 2px solid var(--line);
  padding-left: 12px;
  display: grid;
  /* minmax(0,auto) statt auto: die beiden ersten Spalten richten sich weiter am
     breitesten Namen und Typ aus, duerfen aber schrumpfen. Mit blossem auto
     wuchsen sie bei grosser Schrift ueber den Rand hinaus — und die Schrift ist
     seit den A-Knoepfen einstellbar. */
  grid-template-columns: minmax(0, auto) minmax(0, auto) minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 3px;
  align-items: baseline
}

.arg {
  display: contents
}

.arg .an {
  font: 12px var(--mono);
  color: var(--ink);
  white-space: nowrap
}

.arg .an.o {
  color: var(--dim)
}

.arg .at {
  font: 11.5px var(--mono);
  color: var(--warn);
  max-width: 34ch;
  overflow-wrap: anywhere
}

.arg .ad {
  color: var(--dim);
  font-size: 12.5px
}

/* ---------- Rueckwaertsverweise ---------- */
.rev {
  margin-top: 26px
}

.revbox {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 14px;
  margin-top: 8px;
  max-height: 150px;
  overflow-y: auto;
  padding: 9px 11px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px
}

.revbox a {
  font: 11.5px var(--mono);
  white-space: nowrap
}

.revbox em {
  color: var(--dim);
  font-style: normal
}

.revbox .argn {
  opacity: .7
}

/* ---------- Listenansicht ----------
   Loest die frueher rechts stehende Spalte ab: die nahm dauerhaft 210 px, zeigte
   dasselbe und war nur so breit wie ein Name. Hier stehen die Member dort, wo
   sonst die Tabellen sind — mehrspaltig, damit 341 Namen auf einen Blick
   passen. Ein Klick fuehrt zurueck in die Tabelle an die richtige Stelle. */
.mlist {
  margin: 14px 0 6px
}

.mlist .h {
  font: 600 10px var(--sans);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 18px 0 7px
}

.mlist .h:first-child {
  margin-top: 4px
}

.mlist .h .n {
  opacity: .6;
  letter-spacing: 0
}

/* Spaltenbreite nach dem laengsten Bezeichner, nicht nach fester Zahl:
   allowFontSizeAndLeadingAdjustment braucht mehr als eine Enum-Konstante. */
.mlist .cols {
  columns: 300px;
  column-gap: 26px
}

.mlist a {
  display: block;
  padding: 1px 0;
  font: 12px var(--mono);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

/* Der Typ steht dezent hinter dem Namen — zweite Frage nach dem Namen,
   aber nicht die erste. */
.mlist a i {
  font-style: normal;
  color: var(--dim);
  opacity: .85
}

.mlist a:hover {
  color: var(--accent);
  text-decoration: none
}

/* ---------- Index ---------- */
.grid ul.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1px 16px;
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  min-height: 0
}

ul.grid li {
  font: 12.5px var(--mono)
}

/* Beschreibungen sind Fliesstext, koennen aber einzelne sehr lange Zeichenfolgen
   enthalten (Adobe schreibt dort auch mal einen Pfad oder Bezeichner am Stueck).
   Ohne diese Reserve sprengt so ein Wort bei grosser Schrift die Spalte. */
.mem .desc,
td.d,
.arg .ad {
  overflow-wrap: anywhere
}

/* Abgeschalteter Verweis: die Klasse gibt es unter UXP nicht, und ein Ziel
   dafuer auch nicht. Durchgestrichen, weil "existiert hier nicht" gemeint ist
   und nicht "gerade nicht anklickbar". */
a[data-uxp="off"]:not([href]) {
  color: var(--dim);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  cursor: default
}

/* Hinweis an einer einzelnen Tabellenzeile. Eigene Zeile unter der
   Beschreibung, damit er nicht mit ihr verschwimmt. */
.mwarn {
  display: block;
  margin-top: 4px;
  padding-left: 8px;
  border-left: 2px solid var(--warn);
  font-size: 11.5px;
  color: var(--warn)
}

/* Bekannte Eigenheiten, die nicht im Objektmodell stehen. Auffaellig, aber
   nicht schreiend — es ist ein Hinweis, keine Fehlermeldung. */
.warn {
  margin: 14px 0 0;
  padding: 10px 13px;
  border-left: 3px solid var(--warn);
  background: var(--panel);
  border-radius: 0 7px 7px 0;
  font-size: 12.5px;
  color: var(--ink);
}

/* Einstiegspunkte und Kurzreferenz nebeneinander: beide beantworten „wo fange
   ich an?". Bei schmalem Fenster untereinander. */
.startrow {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-top: 10px
}

/* Raster mit justify-items:start — beides zugleich: die Spalten fluchten
   (flex-wrap liess die Zeilen rechts ausfransen), und jede Blase umschliesst
   nur ihr Wort (ein gestrecktes Raster machte aus "Page" eine 193px breite
   Blase). 168px ist die Breite des laengsten Namens, ChangeGrepPreference. */
.quick {
  flex: 0 1 auto;
  max-width: 528px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  justify-items: start;
  gap: 6px;
  align-content: start
}

/* Runde Kacheln, damit sie sich von den Listen darunter absetzen. */
.quick a {
  display: block;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--panel);
  font: 12px var(--mono);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.quick a:hover {
  border-color: var(--accent);
  color: var(--accent);
  text-decoration: none
}

@container page (max-width: 1150px) {
  .startrow { flex-direction: column }
  .quick { max-width: none }
}

/* Kurzreferenz: Vorschaubild links, Text rechts; bei schmalem Fenster
   untereinander. Das Bild traegt die Karte, deshalb darf es gross sein. */
/* Kein eigenes margin-top: den Abstand zur Ueberschrift setzt .startrow fuer
   beide Spalten. Sonst begann die Karte 11px unter den Blasen. */
.refcard a {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--ink)
}

.refcard a:hover {
  border-color: var(--accent);
  text-decoration: none
}

.refcard img {
  flex: none;
  width: 320px;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff
}

.refcard b {
  display: block;
  font: 600 13px var(--sans);
  color: var(--accent)
}

.refcard .d {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--dim);
  line-height: 1.5;
  max-width: 52ch
}

@container page (max-width: 950px) {
  .refcard a {
    flex-direction: column
  }

  .refcard img {
    width: 100%
  }
}

/* Maschinenlesbare Ausgaben auf der Produktseite. Kein Blickfang: wer sie
   sucht, sucht gezielt. */
.dl {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 9px
}

.dl a {
  display: block;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
  color: var(--ink)
}

.dl a:hover {
  border-color: var(--accent);
  text-decoration: none
}

.dl b {
  display: block;
  font: 12.5px var(--mono);
  color: var(--accent);
  font-weight: 600
}

.dl span {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: var(--dim);
  line-height: 1.45
}

/* ---------- Fussbereich ---------- */
/* Bewusst ruhig: eine Textfarbe, keine Rahmen, kein Fettdruck. */
footer {
  border-top: 1px solid var(--line);
  margin-top: 40px;
  padding: 18px 0 8px;
  color: var(--dim);
  font-size: 11.5px;
  line-height: 1.6
}

footer p {
  margin: 0 0 7px
}

footer p:last-child {
  margin-bottom: 0
}

footer .legal {
  font-size: 11px
}

footer .meta {
  font-size: 11px;
  margin-top: 10px
}

/* Signatur- und Rechtszeile schliessen den Footer ab, in einer Zeile. */
footer .by {
  font-size: 11px;
  color: var(--ink);
  margin-top: 10px
}

footer .by .hrt {
  color: inherit
}

footer .by .sep {
  opacity: .45;
  margin: 0 4px
}

/* ---------- Suchpalette ---------- */
.scrim {
  position: fixed;
  inset: 0;
  background: rgba(4, 6, 10, .62);
  display: none;
  z-index: 50;
  align-items: flex-start;
  justify-content: center;
  padding-top: 11vh
}

.scrim.on {
  display: flex
}

.pal {
  width: min(760px, 93vw);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
  overflow: hidden
}

.pal input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: 15px var(--mono);
  padding: 15px 18px
}

.pal input:focus {
  outline: none
}

.res {
  max-height: 56vh;
  overflow-y: auto
}

.res .r {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 18px;
  cursor: pointer;
  border-left: 2px solid transparent
}

.res .r.sel {
  background: var(--accent-soft);
  border-left-color: var(--accent)
}

.res .r .t {
  font: 10px var(--mono);
  color: var(--dim);
  width: 42px;
  flex: none;
  text-transform: uppercase
}

.res .r .t.k1 {
  color: var(--rw)
}

.res .r .t.k3 {
  color: var(--accent)
}

.res .r .t.k0 {
  color: var(--enum)
}

.res .r .t.k2 {
  color: var(--ev)
}

.res .r .n {
  font: 12.5px var(--mono);
  white-space: nowrap
}

.res .r .n b {
  color: var(--accent);
  font-weight: 600
}

.res .r .n em {
  color: var(--dim);
  font-style: normal
}

.res .r .d {
  color: var(--dim);
  font-size: 11.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1
}

.palfoot {
  display: flex;
  gap: 14px;
  padding: 8px 18px;
  border-top: 1px solid var(--line);
  font: 10.5px var(--sans);
  color: var(--dim)
}

/* Wieviele der fuenf Eintraege hineinpassen, entscheidet site.js nach der
   wirklichen Breite der Namen und setzt .gone auf den Rest. Eine Schwelle nach
   Fensterbreite kann das nicht: fuenfmal "Page" braucht weniger Platz als
   einmal "AutoCorrectPreference". */
.trail .gone {
  display: none
}

@container page (max-width: 1100px) {
  .grid {
    grid-template-columns: 200px minmax(0, 1fr)
  }

  .trail {
    display: none
  }

  /* Der Beschreibung mehr Raum geben, sie traegt hier die meiste Last. */
  .c-n {
    width: 26%
  }

  .c-t {
    width: 22%
  }

  .c-a {
    width: 46px
  }

  /* Zugriff abgekuerzt statt gestrichen: 41% der Properties sind readonly,
     die Angabe traegt zu viel, um sie wegzulassen. Der volle Wortlaut steht
     weiter im title und in der Spaltenueberschrift. */
  td.a,
  .c-a {
    font-size: 0
  }

  td.a::after {
    font-size: 10.5px
  }

  .c-a::after {
    content: "ACC";
    font-size: 10px
  }

  td.a.ro::after {
    content: "ro"
  }

  td.a.rw::after {
    content: "rw"
  }
}

/* Gemessen: der Kopf passt bis 950 px logischer Breite, bei 925 px ragt er
   11 px heraus — die A-Knoepfe brauchen ihren Platz. Ab hier schrumpft das
   Suchfeld, Tastenkuerzel und API-Version treten ab. */
@container page (max-width: 950px) {

  /* Parameter untereinander statt in drei Spalten: die beiden auto-Spalten
     richten sich am breitesten Namen und Typ aus und drueckten die Seite sonst
     ueber den Rand. Gefluchtete Spalten sind hier weniger wert als eine
     Beschreibung, die man lesen kann. */
  .args {
    display: block
  }

  .arg {
    display: block;
    margin-bottom: 7px
  }

  .arg .an,
  .arg .at {
    display: inline;
    margin-right: 9px
  }

  .arg .at {
    max-width: none
  }

  .arg .ad {
    display: block
  }

  /* .barrow, nicht .bar: seit der Objektname darueber steht, ist die Leiste
     kein Flexcontainer mehr. Ohne den Umbruch lief die Pillenreihe bei 750 px
     um 313 px aus der Spalte und die Seite scrollte seitlich. */
  .barrow {
    flex-wrap: wrap
  }

  .bar input {
    min-width: 140px
  }

  .kbtn {
    min-width: 0;
    overflow: hidden
  }

  .kbtn>span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
  }

  .kbtn .keys,
  .apiver {
    display: none
  }
}

@media print {

  .top,
  .side,
  .bar,
  .mlist,
  .scrim {
    display: none
  }

  .grid {
    display: block
  }

  body {
    background: #fff;
    color: #000
  }
}

/* ---------- Startseite ---------- */
body.home .doc {
  max-width: 1000px;
  margin: 0 auto;
  padding: 34px 30px 40px
}

body.home .top {
  position: static
}

ul.cards {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px
}

ul.cards a {
  display: block;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  background: var(--panel);
  color: var(--ink)
}

ul.cards a:hover {
  border-color: var(--accent);
  text-decoration: none
}

ul.cards b {
  display: block;
  font: 600 15px var(--mono)
}

ul.cards .v {
  display: block;
  font: 11px var(--mono);
  color: var(--dim);
  margin-top: 2px
}

ul.cards .c {
  display: block;
  font: 11px var(--sans);
  color: var(--dim);
  margin-top: 6px
}

ul.cards .note {
  display: block;
  font: 11px var(--sans);
  color: var(--warn);
  margin-top: 8px;
  line-height: 1.45
}

.note {
  color: var(--warn);
  font-size: 12.5px;
  margin: 10px 0 0
}