/* AGENCY — Baukasten, seitenspezifisches Layout */

/* ── Kopfzeile ──────────────────────────────────────────────────────────── */

.site{
  position:sticky; top:0; z-index:40; background:var(--surface);
  border-bottom:1px solid var(--line);
}
.site .inner{display:flex; align-items:center; gap:22px; height:56px}
/* Auf .site eingegrenzt, und zwar nicht aus Ordnungsliebe: „mark" ist ein
 * zu häufiges Wort. Ungebremst traf diese Regel auch .card2.mark — die
 * hervorgehobene Karte auf der Startseite. Die wurde damit zu inline-flex
 * und legte Symbol, Überschrift, Text und Fußnote nebeneinander in eine
 * Zeile statt untereinander, samt einer fremden orangen Raute davor. Das
 * war die Ursache der 29 Pixel, um die die Seite seitlich überlief. */
.site .mark{
  font-family:var(--serif); font-size:20px; font-weight:600; letter-spacing:.04em;
  text-decoration:none; color:var(--ink); display:inline-flex; align-items:center; gap:7px;
}
/* Das Zeichen steht inline im HTML, nicht als ::before — nur so kann es
 * `currentColor` und `var(--accent)` lesen und damit dem Thema folgen. Ein
 * data-URI im Hintergrund könnte das nicht: der wäre in beiden Themen
 * dieselbe feste Farbe. */
.site .mark .mk{width:19px; height:19px; flex:none; display:block}
.site .mark span{display:block}
.site nav{display:flex; gap:3px; margin-left:8px}
.site nav a{
  padding:5px 10px; border-radius:var(--r-sm); font-size:13.5px;
  color:var(--muted); text-decoration:none;
}
.site nav a:hover{background:var(--surface-2); color:var(--ink)}
.site nav a[aria-current="page"]{color:var(--ink); font-weight:600; background:var(--surface-2)}
.site nav a.soon{opacity:.5; cursor:default}
.site nav a.soon:hover{background:none; color:var(--muted)}
.site .right{margin-left:auto; display:flex; align-items:center; gap:9px}

/* ── Seitenkopf ─────────────────────────────────────────────────────────── */

.page-head{padding:34px 0 22px; border-bottom:1px solid var(--line); margin-bottom:24px}
.page-head h1{margin:6px 0 10px}
.page-head .lede{font-size:16.5px; color:var(--ink-2); max-width:62ch}
.trust{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}

/* ── Zweispalter ────────────────────────────────────────────────────────── */

.grid{display:grid; grid-template-columns:minmax(0,1fr) 470px; gap:22px; align-items:start; padding-bottom:60px}
@media (max-width:1120px){ .grid{grid-template-columns:minmax(0,1fr)} }

/* ── Vorlagen ───────────────────────────────────────────────────────────── */

.tpl-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(184px,1fr)); gap:10px}
.tpl{
  text-align:left; cursor:pointer; padding:12px 13px; border-radius:var(--r);
  border:1px solid var(--line-2); background:var(--surface-2); transition:all .12s;
}
.tpl:hover{border-color:var(--muted); background:var(--surface)}
.tpl[aria-pressed="true"]{border-color:var(--accent); background:var(--accent-wash); box-shadow:inset 0 0 0 1px var(--accent)}
.tpl .n{font-family:var(--mono); font-size:13px; font-weight:600; letter-spacing:.02em}
.tpl .d{font-size:10.5px; color:var(--accent-ink); font-family:var(--mono);
  text-transform:uppercase; letter-spacing:.09em; margin:3px 0 5px}
.tpl .b{font-size:11.5px; color:var(--muted); line-height:1.4}

/* ── Universum ──────────────────────────────────────────────────────────── */

.uni-group{margin-bottom:11px}
.uni-group h4{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); font-weight:500; margin-bottom:6px;
}
.uni-chips{display:flex; flex-wrap:wrap; gap:5px}

/* ── Regeln ─────────────────────────────────────────────────────────────── */

.rule{
  border:1px solid var(--line-2); border-radius:var(--r); background:var(--surface-2);
  margin-bottom:9px; overflow:hidden;
}
.rule[data-off="1"]{opacity:.5}
.rule[data-drag="1"]{border-color:var(--accent); opacity:.6}
.rule-bar{
  display:flex; align-items:center; gap:8px; padding:6px 10px;
  background:var(--surface-3); border-bottom:1px solid var(--line-2);
}
.rule-bar .g{cursor:grab; color:var(--muted); font-size:13px; line-height:1; padding:0 2px}
.rule-bar .ord{font-family:var(--mono); font-size:10.5px; color:var(--muted)}
.rule-bar .lbl{
  background:none; border:none; padding:2px 4px; font-size:12.5px; font-weight:600;
  border-radius:3px; min-width:60px; flex:1;
}
.rule-bar .lbl:hover{background:var(--surface)}
.rule-bar .acts{display:flex; gap:1px; margin-left:auto}
.rule-body{padding:9px 11px}
.cond{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:6px}
.cond .kw{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--accent-ink); font-weight:600;
}
.then{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  padding-top:8px; margin-top:4px; border-top:1px dashed var(--line-2);
}
.mix{display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; width:100%}
.mix-row{
  display:inline-flex; align-items:center; gap:4px; padding:2px 4px 2px 8px;
  background:var(--surface); border:1px solid var(--line); border-radius:99px; font-size:12px;
}
.mix-row .s{font-family:var(--mono); font-size:11.5px}
.mix-row input{width:46px; text-align:right; font-family:var(--mono); font-size:11.5px;
  border:none; background:none; border-bottom:1px solid var(--line-2)}
.mix-sum{font-family:var(--mono); font-size:11px; color:var(--muted); align-self:center; padding-left:4px}
.mix-sum.over{color:var(--neg); font-weight:600}
.otherwise{
  display:flex; align-items:center; gap:8px; padding:9px 11px;
  border:1px dashed var(--line-2); border-radius:var(--r); background:transparent; font-size:13px;
}

/* ── Code ───────────────────────────────────────────────────────────────── */

.code-wrap{position:relative}
.code{
  width:100%; min-height:330px; resize:vertical; tab-size:2;
  font-family:var(--mono); font-size:12.5px; line-height:1.62;
  background:var(--surface-2); color:var(--ink);
  border:1px solid var(--line-2); border-radius:var(--r); padding:13px 15px; white-space:pre;
}
.code[readonly]{color:var(--ink-2); background:var(--surface-3)}
.code-msg{
  margin-top:9px; padding:9px 11px; border-radius:var(--r-sm); font-size:12.5px;
  font-family:var(--mono); line-height:1.5;
}
.code-msg.err{background:var(--neg-wash); color:var(--neg); border:1px solid var(--neg)}
.code-msg.ok{background:transparent; color:var(--pos); border:1px solid var(--pos)}

/* ── Grenzen ────────────────────────────────────────────────────────────── */

.guards{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:13px}
.guard label{display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--muted); margin-bottom:4px}
.guard .row{display:flex; align-items:center; gap:8px}
.guard input[type=range]{flex:1; min-width:0; accent-color:var(--accent)}
.guard .v{font-family:var(--mono); font-size:13px; font-weight:600; width:56px; text-align:right}
.guard .h{font-size:11px; color:var(--muted); margin-top:3px; line-height:1.35}

/* ── Vorschau ───────────────────────────────────────────────────────────── */

.preview{position:sticky; top:var(--head-clear)}
@media (max-width:1120px){ .preview{position:static} }
.preview-head{
  display:flex; align-items:center; gap:9px; padding:12px 16px;
  border-bottom:1px solid var(--line); background:var(--surface-2);
  border-radius:var(--r) var(--r) 0 0;
}
.preview-head .t{font-family:var(--serif); font-size:16px; font-weight:600}
.bt-note{
  padding:10px 16px; font-size:12px; color:var(--ink-2); line-height:1.45;
  border-bottom:1px solid var(--line);
}
.bt-note b{color:var(--ink)}
.notes{padding:0 16px 4px}
.note{
  display:flex; gap:8px; align-items:baseline; padding:6px 0;
  border-bottom:1px solid var(--line); font-size:12px;
}
.note:last-child{border-bottom:none}
.note .d{font-family:var(--mono); font-size:11px; color:var(--muted); flex:none; width:30px}
.note .k{font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase;
  padding:1px 5px; border-radius:3px; border:1px solid var(--line-2); color:var(--muted); flex:none}
.note.stop .k{border-color:var(--neg); color:var(--neg)}
.empty{padding:26px 16px; text-align:center; color:var(--muted); font-size:13px}

details.fold{border-top:1px solid var(--line)}
details.fold>summary{
  cursor:pointer; padding:10px 16px; font-size:13px; list-style:none;
  display:flex; align-items:center; gap:7px;
}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary::before{content:'▸'; color:var(--muted); font-size:10px}
details.fold[open]>summary::before{content:'▾'}
details.fold>summary:hover{background:var(--surface-2)}

/* ── Persona ────────────────────────────────────────────────────────────── */

.persona{display:flex; gap:14px; align-items:flex-start}
.avatar{
  width:60px; height:60px; border-radius:var(--r); flex:none;
  border:1px solid var(--line-2); overflow:hidden; background:var(--surface-2);
}
.persona-fields{flex:1; min-width:0; display:grid; gap:8px}
.persona-fields .row{display:flex; gap:8px; flex-wrap:wrap}
.persona-fields input[type=text]{flex:1; min-width:130px}

/* ── Fußzeile ───────────────────────────────────────────────────────────── */

.site-foot{border-top:1px solid var(--line); padding:26px 0 46px; color:var(--muted); font-size:12px}
.site-foot .disc{max-width:78ch; line-height:1.6; margin-top:10px}

/* ── Schmale Fenster ────────────────────────────────────────────────────── */

/* Die Kopfzeile ist das Einzige, was seitlich überläuft: Wortmarke, vier
 * Navigationspunkte und zwei Knöpfe passen unter ~720 px nicht nebeneinander.
 * Zuerst fliegen die noch nicht gebauten Punkte raus, dann die Navigation
 * ganz — der Baukasten selbst bricht ohnehin um. Eine Seite, die waagerecht
 * scrollt, ist auf dem Telefon unbedienbar. */
/* Fünf Navigationspunkte plus zwei Knöpfe passen unter ~980 px nicht mehr
   nebeneinander. Gestaffelt: zuerst fällt, was noch nicht gebaut ist, dann
   Token, dann Docs, dann die Navigation ganz. Board und Compare bleiben am
   längsten stehen — das sind die beiden, für die jemand herkommt. */
/* Die beiden Anker-Links fallen als Erstes: Sie zeigen auf Abschnitte
   derselben Seite, an denen man beim Scrollen ohnehin vorbeikommt. */
@media (max-width:1080px){
  .site nav a.nav-x{display:none}
}
@media (max-width:980px){
  .site nav a.soon{display:none}
  .site nav a{padding:5px 8px}
  .site .inner{gap:14px}
}
@media (max-width:860px){
  .site nav a[href$="token/"]{display:none}
}
@media (max-width:740px){
  .site nav a[href$="docs/"]{display:none}
}
@media (max-width:600px){
  .site nav{display:none}
  .site .inner{gap:12px}
  .site .mark{font-size:18px}
  .wrap{padding:0 14px}
}

/* ── Eigene Agenten ─────────────────────────────────────────────────────── */

.ros{
  display:flex; align-items:center; gap:12px; padding:10px 0;
  border-bottom:1px solid var(--line);
}
.ros:last-child{border-bottom:none}
.ros-av{width:32px; height:32px; border-radius:8px; overflow:hidden; flex:none;
  border:1px solid var(--line-2)}
.ros-main{flex:1; min-width:0}
.ros-main b{font-family:var(--mono); font-size:13px; display:block}
.ros-sub{font-size:11.5px; color:var(--muted)}
.ros-acts{display:flex; gap:6px; flex:none; align-items:center}
@media (max-width:560px){
  .ros{flex-wrap:wrap}
  .ros-acts{width:100%; justify-content:flex-end}
}

/* ── Bildfeld ───────────────────────────────────────────────────────────── */

/* Das Avatarfeld ist jetzt ein Knopf. Es sieht bis zum ersten Überfahren
   genauso aus wie vorher — der Hinweis erscheint erst, wenn jemand
   hinzeigt, weil ein dauerhaftes „add a picture" über der erzeugten Marke
   diese wie einen Platzhalter aussehen ließe. Sie ist keiner. */
.up-drop{position:relative; cursor:pointer; overflow:hidden; outline-offset:3px}
.up-drop:focus-visible{outline:2px solid var(--accent)}
.up-drop .av-img{width:100%; height:100%; object-fit:cover; display:block}
/* Der Hinweis als ::after, nicht als Kindknoten: das Feld wird bei jeder
   Namensänderung neu befüllt, und ein Kindknoten wäre danach weg. */
.up-drop::after{
  content:'add a picture';
  position:absolute; inset:auto 0 0 0;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  color:var(--ink); font-family:var(--mono); font-size:8.5px;
  letter-spacing:.06em; text-transform:uppercase; text-align:center;
  padding:3px 2px; line-height:1.2;
  opacity:0; transition:opacity .18s ease; pointer-events:none;
}
.up-drop:hover::after, .up-drop:focus-visible::after, .up-drop.is-over::after{opacity:1}
.up-drop.is-over{outline:2px dashed var(--accent); outline-offset:2px}
.up-drop.is-busy{opacity:.55}
#avatarMsg{margin-top:7px; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
#avatarMsg:empty{display:none}
@media (prefers-reduced-motion:reduce){ .up-drop::after{transition:none} }

/* ── Was noch kommt ─────────────────────────────────────────────────────── */

/* Ausgegraut, aber lesbar. Ein Katalog, den man nicht entziffern kann,
   beantwortet die Frage „gibt es das mal" nicht — und genau dafür steht er
   da. Nicht anklickbar heißt hier: kein Cursor, kein Fokus, kein
   aria-pressed, damit auch ein Screenreader ihn nicht für einen Schalter
   hält. */
.soon-fold{
  margin-top:16px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface-2); overflow:hidden;
}
.soon-fold > summary{
  cursor:pointer; padding:11px 14px; display:flex; align-items:center; gap:10px;
  font-size:13px; list-style:none; user-select:none;
}
.soon-fold > summary::-webkit-details-marker{display:none}
.soon-fold > summary::before{
  content:'+'; font-family:var(--mono); font-size:14px; color:var(--accent-ink);
  width:15px; text-align:center; flex:none;
}
.soon-fold[open] > summary::before{content:'\2212'}
.soon-fold > summary:hover{background:var(--surface-3)}
.soon-sum-t{font-weight:600}
.soon-sum-n{
  margin-left:auto; font-family:var(--mono); font-size:11px;
  color:var(--muted); letter-spacing:.02em;
}
.soon-body{padding:4px 14px 16px; border-top:1px solid var(--line)}
.soon-lede{font-size:12.5px; color:var(--ink-2); line-height:1.6; margin:12px 0 16px; max-width:66ch}
.soon-group h4{display:flex; align-items:center; gap:8px}
.soon-note{
  display:block; font-size:11.5px; color:var(--muted); margin:-4px 0 7px;
}
.soon-tag{
  font-family:var(--mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent-ink); border:1px solid var(--accent);
  border-radius:99px; padding:1px 7px; font-weight:500;
}
.chip.soon{
  opacity:.42; cursor:default; pointer-events:none;
  border-style:dashed; background:transparent;
}
.soon-rules{display:flex; flex-direction:column; gap:6px}
.soon-rule{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding:7px 10px; border:1px dashed var(--line-2); border-radius:var(--r-sm);
  opacity:.62;
}
.soon-rule code{font-size:12px; color:var(--ink-2)}
.soon-rule span{font-size:11px; color:var(--muted); margin-left:auto; font-family:var(--mono)}

/* ── Verwaschen ─────────────────────────────────────────────────────────── */

/* Was es geben wird, hinter Milchglas. Der Sinn ist, die Frage „kann ich das
   auch beschreiben statt klicken" zu beantworten, ohne so zu tun, als ginge
   es schon.
   
   Zwei Dinge daran sind nicht Kosmetik:
   
   `pointer-events:none` und `user-select:none` auf dem Inneren, damit
   niemand in ein Feld tippt, das nichts tut — und ganz besonders nicht in
   eines, das nach einem API-Schlüssel aussieht. Es sind DIVs, keine
   <input>: ein abgeschaltetes Eingabefeld für ein Geheimnis ist eine Falle,
   auch wenn es abgeschaltet ist.
   
   `aria-hidden` am Inneren, damit ein Screenreader nicht eine Bedienung
   vorliest, die es nicht gibt. Was zählt, steht in der Überschrift und im
   Absatz darüber — beide sind lesbar. */
.step.locked{opacity:.96}
.lock-wrap{position:relative; border-radius:var(--r); overflow:hidden}
.lock-inner{
  filter:blur(3.5px) saturate(.75); opacity:.55;
  pointer-events:none; user-select:none;
  padding:16px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface-2);
}
.lk-lab{display:block; font-size:11.5px; color:var(--muted); margin-bottom:5px}
.lk-field, .lk-area{
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  background:var(--surface); padding:9px 11px; font-size:13px; color:var(--ink-2);
}
.lk-mono{font-family:var(--mono); font-size:12px; letter-spacing:.02em}
.lk-area{line-height:1.6; min-height:76px}
.lk-row{display:flex; align-items:center; gap:11px; margin-top:11px; flex-wrap:wrap}
.lk-btn{
  background:var(--accent); color:var(--accent-on);
  border-radius:var(--r-sm); padding:8px 15px; font-size:12.5px; font-weight:600;
}
.lk-note{font-family:var(--mono); font-size:11px; color:var(--muted)}
.lk-chips{display:flex; gap:7px; flex-wrap:wrap}
.lk-chip{
  border:1px solid var(--line-2); border-radius:99px; padding:5px 11px;
  font-size:12px; color:var(--ink-2); background:var(--surface);
}
.lock-veil{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:9px; text-align:center;
  background:color-mix(in srgb, var(--surface) 34%, transparent);
}
.lock-tag{
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent-on); background:var(--accent);
  border-radius:99px; padding:4px 12px; font-weight:600;
}
.lock-veil p{
  margin:0; font-size:12.5px; color:var(--ink); max-width:36ch; line-height:1.55;
  text-shadow:0 1px 10px var(--surface);
}

/* ── Einfach oder fortgeschritten ───────────────────────────────────────── */

/* Der Schalter steht ganz oben und ist absichtlich groß: die Frage „muss ich
   das alles verstehen?" ist die erste, die jemand hier hat, und sie gehört
   beantwortet, bevor er scrollt. */
.mode-switch{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  margin:0 0 24px; max-width:560px;
}
.mode-btn{
  text-align:left; cursor:pointer; padding:13px 16px;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); color:var(--ink-2);
  transition:border-color .18s, background .18s, transform .12s;
}
.mode-btn b{display:block; font-size:14.5px; color:var(--ink); margin-bottom:2px}
.mode-btn span{display:block; font-size:11.5px; color:var(--muted); line-height:1.4}
.mode-btn:hover{border-color:var(--line-2)}
.mode-btn:active{transform:translateY(1px)}
.mode-btn[aria-selected="true"]{
  border-color:var(--accent); background:var(--accent-wash);
}
.mode-btn[aria-selected="true"] b{color:var(--accent-ink)}

/* Geschmacksrichtungen */
.flavours{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.flav{
  text-align:left; cursor:pointer; padding:13px 14px;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface-2); color:var(--ink-2);
  transition:border-color .18s, background .18s, transform .12s;
}
.flav:hover{border-color:var(--line-2)}
.flav:active{transform:translateY(1px)}
.flav.on{border-color:var(--accent); background:var(--accent-wash)}
.flav b{display:block; font-size:14px; color:var(--ink); margin-bottom:6px}
.flav-syms{display:flex; gap:5px; flex-wrap:wrap; margin-bottom:7px}
.flav-syms i{
  font-style:normal; font-family:var(--mono); font-size:10px;
  border:1px solid var(--line-2); border-radius:99px; padding:1px 7px; color:var(--ink-2);
}
.flav-note{display:block; font-size:11.5px; color:var(--muted); line-height:1.5}

/* Regler */
.dial{padding:14px 0; border-bottom:1px solid var(--line)}
.dial:first-child{padding-top:2px}
.dial:last-child{border-bottom:0; padding-bottom:2px}
.dial-top{display:flex; align-items:baseline; gap:12px}
.dial-lab{font-size:13.5px; color:var(--ink); font-weight:500}
.dial-out{
  margin-left:auto; font-family:var(--mono); font-size:15px; font-weight:600;
  color:var(--accent-ink); font-variant-numeric:tabular-nums;
}
/* Der Satz unter dem Regler ist der eigentliche Inhalt — die Zahl allein
   sagt niemandem, worauf er sich einlässt. Feste Höhe, damit die Seite beim
   Ziehen nicht springt. */
.dial-say{
  font-size:12px; color:var(--ink-2); line-height:1.5; margin-top:9px;
  min-height:2.2em;
}
.simple-say{
  font-size:14.5px; line-height:1.7; color:var(--ink); margin:0;
  padding:14px 16px; border-left:2px solid var(--accent);
  background:var(--surface-2); border-radius:0 var(--r) var(--r) 0;
}
@media (prefers-reduced-motion:reduce){
  .mode-btn, .flav{transition:none}
  .mode-btn:active, .flav:active{transform:none}
}

/* ── Text auf hervorgehobener Fläche ────────────────────────────────────── */

/* Überall dort, wo der Akzent als Wäsche unter dem Text liegt, rückt
   Nebentext eine Stufe hoch — über die VARIABLE, nicht über einzelne
   Klassen.
   
   Der Anlass war gemessen: --muted (#858fa4) auf der gewaschenen Fläche
   (#10303a) kam auf 4.29:1 statt der geforderten 4.5. Der erste Versuch
   listete die betroffenen Textklassen auf — .sub, .flav-note — und lief
   sofort in den nächsten Fund (.dv auf der Profilseite) und wäre in den
   übernächsten gelaufen. Klassen von Text aufzuzählen ist die falsche
   Richtung: es gibt beliebig viele davon, aber nur eine Handvoll Flächen,
   die überhaupt gewaschen sind.
   
   Also wird --muted auf DIESEN Flächen umdefiniert. Alles darin erbt es,
   heute und bei jedem Bauteil, das später dazukommt.
   
   Global aufhellen wäre die Alternative gewesen — dann liegt --muted aber
   fast auf --ink-2, und die Abstufung zwischen „wichtig" und „nebenbei"
   ist auf der ganzen Seite weg, um ein Problem zu lösen, das es nur auf
   ausgewählten Zeilen gibt. */
.tpl[aria-pressed="true"],
.flav.on,
.mode-btn[aria-selected="true"],
.cmp tr.me,
.rung.here,
.toc a.on,
.side-list a[aria-current="page"],
.ac-key.big,
.demo-badge,
.lock-tag,
.tag-warn,
[data-washed]{
  --muted:var(--ink-2);
}

/* Klassenüberschrift mit Anzahl und Erklärung darunter. */
.uni-group h4{display:flex; align-items:baseline; gap:8px; margin-bottom:2px}
.uni-n{
  font-family:var(--mono); font-size:10px; color:var(--muted);
  border:1px solid var(--line); border-radius:99px; padding:0 6px;
}
.uni-note{
  display:block; font-size:11.5px; color:var(--muted); line-height:1.5;
  margin:0 0 8px; max-width:64ch;
}