/* Agenten-Patterns Index
   Farben und Typografie als Token, damit beide Themen aus derselben Quelle kommen. */

:root{
  --bg:#eceef0;
  --surface:#ffffff;
  --surface-2:#e3e6e9;
  --ink:#171a1d;
  --ink-2:#565d66;
  --ink-3:#7d858e;
  --rule:#d1d6db;
  --rule-strong:#b3bac1;
  --accent:#a83518;
  --accent-ink:#ffffff;
  --accent-soft:#f5e4df;
  --teal:#1c5b57;
  --amber:#8a6106;
  --focus:#1d5fd6;

  /* Dichtestufen der Kreuztabelle: ein Farbton, hell nach dunkel */
  --heat-0:transparent;
  --heat-1:#f6e6e1;
  --heat-2:#e8bcae;
  --heat-3:#cd7c66;
  --heat-4:#a83518;
  --heat-1-ink:#171a1d;
  --heat-2-ink:#171a1d;
  --heat-3-ink:#1a0d09;
  --heat-4-ink:#ffffff;

  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"Source Serif 4",Georgia,"Times New Roman",serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;

  --step--1:0.78rem;
  --step-0:0.95rem;
  --step-1:1.1rem;
  --step-2:1.45rem;
  --step-3:2.1rem;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#14171a;
    --surface:#1b1f23;
    --surface-2:#23282d;
    --ink:#e9ebed;
    --ink-2:#a0a8b0;
    --ink-3:#7d858e;
    --rule:#2c3238;
    --rule-strong:#3d454d;
    --accent:#e2724f;
    --accent-ink:#181113;
    --accent-soft:#33211c;
    --teal:#5cb8ae;
    --amber:#d3a02f;
    --focus:#78a6ff;

    --heat-0:transparent;
    --heat-1:#33221c;
    --heat-2:#5f3527;
    --heat-3:#9c5138;
    --heat-4:#e2724f;
    --heat-1-ink:#e9ebed;
    --heat-2-ink:#e9ebed;
    --heat-3-ink:#f6e6e1;
    --heat-4-ink:#181113;
  }
}
:root[data-theme="dark"]{
  --bg:#14171a;
  --surface:#1b1f23;
  --surface-2:#23282d;
  --ink:#e9ebed;
  --ink-2:#a0a8b0;
  --ink-3:#7d858e;
  --rule:#2c3238;
  --rule-strong:#3d454d;
  --accent:#e2724f;
  --accent-ink:#181113;
  --accent-soft:#33211c;
  --teal:#5cb8ae;
  --amber:#d3a02f;
  --focus:#78a6ff;

  --heat-0:transparent;
  --heat-1:#33221c;
  --heat-2:#5f3527;
  --heat-3:#9c5138;
  --heat-4:#e2724f;
  --heat-1-ink:#e9ebed;
  --heat-2-ink:#e9ebed;
  --heat-3-ink:#f6e6e1;
  --heat-4-ink:#181113;
}

*{box-sizing:border-box}

/* Ohne diese Zeile setzt sich jedes display aus einer Komponentenregel gegen
   das hidden-Attribut durch, und ausgeblendete Elemente bleiben sichtbar. */
[hidden]{display:none !important}

html{color-scheme:light dark}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-display);
  font-size:var(--step-0);
  line-height:1.5;
  margin:0;
  padding:0;
  -webkit-font-smoothing:antialiased;
}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px}

.wrap{
  max-width:1180px;
  margin:0 auto;
  padding-inline:20px;
  padding-block:0;
}

/* ---------- Kopf ---------- */
.masthead{
  border-bottom:1px solid var(--rule-strong);
  background:var(--surface);
}
.masthead .wrap{padding-block:26px 20px}
.eyebrow{
  font-family:var(--f-mono);
  font-size:var(--step--1);
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 8px;
}
h1{
  font-family:var(--f-display);
  font-variation-settings:"wdth" 112;
  font-weight:750;
  font-size:var(--step-3);
  line-height:1.05;
  letter-spacing:-.015em;
  text-wrap:balance;
  margin:0 0 10px;
}
.standfirst{
  font-family:var(--f-body);
  font-size:var(--step-1);
  line-height:1.5;
  color:var(--ink-2);
  margin:0;
}
.masthead-foot{
  display:flex;
  flex-wrap:wrap;
  gap:10px 20px;
  align-items:baseline;
  margin-top:16px;
  font-family:var(--f-mono);
  font-size:var(--step--1);
  color:var(--ink-3);
}
.masthead-foot a{color:var(--ink-2)}

/* ---------- Layout ---------- */
.layout{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:0;
  align-items:start;
}
@media (min-width:900px){
  .layout{grid-template-columns:255px minmax(0,1fr);gap:38px}
}

/* ---------- Filterschiene ---------- */
.railwrap{padding-block:18px 0}
@media (min-width:900px){
  .railwrap{
    position:sticky;
    top:0;
    max-height:100vh;
    overflow-y:auto;
    padding-block:26px 30px;
    border-right:1px solid var(--rule);
  }
}
.rail-toggle{
  display:flex;
  width:100%;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-family:var(--f-mono);
  font-size:var(--step--1);
  letter-spacing:.08em;
  text-transform:uppercase;
  background:var(--surface);
  color:var(--ink);
  border:1px solid var(--rule-strong);
  padding:11px 14px;
  cursor:pointer;
}
@media (min-width:900px){.rail-toggle{display:none}}
.rail[hidden]{display:none}
@media (min-width:900px){.rail{display:block !important}}
.rail{padding-top:16px}
@media (min-width:900px){.rail{padding-top:0}}

.fgroup + .fgroup{margin-top:24px}
.fgroup h2{
  font-family:var(--f-mono);
  font-size:0.7rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:600;
  margin:0 0 9px;
  padding-bottom:7px;
  border-bottom:1px solid var(--rule);
}
.fgroup .def{
  font-family:var(--f-body);
  font-size:0.82rem;
  line-height:1.45;
  color:var(--ink-3);
  margin:-3px 0 9px;
}
.fgroup ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.opt{
  display:flex;
  width:100%;
  align-items:center;
  gap:9px;
  text-align:left;
  background:none;
  border:0;
  border-left:3px solid transparent;
  padding:6px 7px 6px 8px;
  font:inherit;
  font-size:var(--step--1);
  color:var(--ink-2);
  cursor:pointer;
  line-height:1.3;
}
.opt:hover{background:var(--surface-2);color:var(--ink)}
.opt .box{
  flex:0 0 auto;
  width:13px;height:13px;
  border:1.5px solid var(--rule-strong);
  display:grid;place-items:center;
}
.opt .box::after{
  content:"";
  width:7px;height:7px;
  background:var(--accent);
  transform:scale(0);
  transition:transform .12s ease;
}
.opt[aria-pressed="true"]{
  color:var(--ink);
  font-weight:600;
  border-left-color:var(--accent);
  background:var(--accent-soft);
}
.opt[aria-pressed="true"] .box{border-color:var(--accent)}
.opt[aria-pressed="true"] .box::after{transform:scale(1)}
.opt .lbl{flex:1 1 auto;min-width:0}
.opt .farbe{
  flex:0 0 auto;
  width:10px;height:10px;
  background:var(--rule-strong);
  margin-left:-2px;
}
.opt .farbe[data-farbe="teal"]{background:var(--teal)}
.opt .farbe[data-farbe="grau"]{background:var(--ink-3)}
.opt .farbe[data-farbe="amber"]{background:var(--amber)}
.opt .farbe[data-farbe="rost"]{background:var(--accent)}
.opt .n{
  font-family:var(--f-mono);
  font-variant-numeric:tabular-nums;
  font-size:0.7rem;
  color:var(--ink-3);
  flex:0 0 auto;
}
.opt.zero{opacity:.38}
.opt.zero:hover{background:none}

.reset{
  margin-top:22px;
  width:100%;
  font-family:var(--f-mono);
  font-size:var(--step--1);
  letter-spacing:.05em;
  background:none;
  color:var(--ink-2);
  border:1px dashed var(--rule-strong);
  padding:9px;
  cursor:pointer;
}
.reset:hover{color:var(--accent);border-color:var(--accent)}
.reset[disabled]{opacity:.4;cursor:default}
.reset[disabled]:hover{color:var(--ink-2);border-color:var(--rule-strong)}

/* ---------- Ergebnisspalte ---------- */
.results{padding-block:26px 60px;min-width:0}

.searchrow{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.searchfield{position:relative;flex:1 1 260px;min-width:0}
.searchfield input{
  width:100%;
  font:inherit;
  font-size:var(--step-0);
  color:var(--ink);
  background:var(--surface);
  border:1px solid var(--rule-strong);
  padding:11px 40px 11px 13px;
}
.searchfield input::placeholder{color:var(--ink-3)}
.searchfield .kbd{
  position:absolute;
  right:11px;top:50%;
  transform:translateY(-50%);
  font-family:var(--f-mono);
  font-size:0.68rem;
  color:var(--ink-3);
  border:1px solid var(--rule);
  padding:1px 5px;
  pointer-events:none;
}
.steuerfeld{display:flex;align-items:center;gap:8px}
.steuerfeld label{
  font-family:var(--f-mono);
  font-size:0.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.steuerfeld select{
  font:inherit;
  font-size:var(--step--1);
  color:var(--ink);
  background:var(--surface);
  border:1px solid var(--rule-strong);
  padding:9px 10px;
}

.statusbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-top:16px;
  padding-bottom:14px;
  border-bottom:2px solid var(--rule-strong);
}
.count{
  font-family:var(--f-mono);
  font-size:var(--step--1);
  font-variant-numeric:tabular-nums;
  color:var(--ink-2);
  margin-right:4px;
}
.count b{color:var(--ink);font-weight:600}
.chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family:var(--f-mono);
  font-size:0.72rem;
  background:var(--accent);
  color:var(--accent-ink);
  border:0;
  padding:5px 8px 5px 9px;
  cursor:pointer;
  line-height:1.3;
}
.chip .x{font-size:0.85rem;line-height:1;opacity:.75}
.chip:hover .x{opacity:1}

/* ---------- Liste ---------- */
.list{list-style:none;margin:0;padding:0}
.item{
  border-bottom:1px solid var(--rule);
  margin-inline:-14px;
  padding-inline:14px;
}
.item.open{background:var(--surface)}

.head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:0 14px;
  width:100%;
  text-align:left;
  background:none;
  border:0;
  padding:0;
  font:inherit;
  color:inherit;
  cursor:pointer;
}
.head:hover .name{color:var(--accent)}
.item.open .name{color:var(--accent)}

.headmain{padding:17px 0;min-width:0;display:block}
.headmain > span{display:block}
.name{
  font-family:var(--f-display);
  font-variation-settings:"wdth" 108;
  font-weight:700;
  font-size:var(--step-2);
  line-height:1.18;
  letter-spacing:-.01em;
  text-wrap:balance;
  margin:0 0 3px;
  transition:color .12s ease;
}
.orig{font-family:var(--f-mono);font-size:0.72rem;color:var(--ink-3);margin:0 0 8px}
.tagline{
  font-family:var(--f-body);
  font-size:var(--step-1);
  line-height:1.5;
  color:var(--ink-2);
  margin:0;
  max-width:72ch;
  text-wrap:pretty;
}
.meta{display:flex !important;flex-direction:column;gap:5px;margin-top:11px}
.metazeile{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.meta-lbl{
  flex:0 0 auto;
  font-family:var(--f-mono);
  font-size:0.62rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
  min-width:58px;
}
.tag{
  font-family:var(--f-mono);
  font-size:0.68rem;
  letter-spacing:.04em;
  color:var(--ink-2);
  border:1px solid var(--rule-strong);
  padding:2px 6px;
  white-space:nowrap;
}
.tag.hit{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

.headside{padding:19px 0 17px;display:flex;align-items:flex-start;justify-content:flex-end}
.plus{
  font-family:var(--f-mono);
  font-size:1.1rem;
  line-height:1;
  color:var(--ink-3);
  border:1px solid var(--rule-strong);
  width:26px;height:26px;
  display:grid;place-items:center;
}
.item.open .plus{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

.body{display:block}
.body[hidden]{display:none}
.bodyin{
  padding:2px 0 26px;
  margin-bottom:4px;
  max-width:70ch;
}
.sec + .sec{margin-top:18px}
.sec h3{
  font-family:var(--f-mono);
  font-size:0.7rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--accent);
  margin:0 0 5px;
}
.sec p{font-family:var(--f-body);font-size:var(--step-1);line-height:1.62;margin:0;color:var(--ink);text-wrap:pretty}
.sec p + p{margin-top:.7em}

/* Aufzaehlungen in den Abschnitten. Die Zeichen stehen im Rand, damit der
   Text aller Punkte an derselben Kante beginnt wie die Absaetze darueber. */
.sec ul,.sec ol{
  font-family:var(--f-body);
  font-size:var(--step-1);
  line-height:1.62;
  color:var(--ink);
  margin:.7em 0 0;
  padding-left:1.45em;
}
.sec ul{list-style:none;padding-left:1.1em}
.sec li{margin:0;text-wrap:pretty}
.sec li + li{margin-top:.5em}
.sec ul > li{position:relative}
.sec ul > li::before{
  content:"";
  position:absolute;
  left:-1.1em;
  top:.62em;
  width:.42em;
  height:1px;
  background:var(--accent);
}
.sec ol > li::marker{font-family:var(--f-mono);font-size:.85em;color:var(--accent)}
.sec p + ul,.sec p + ol{margin-top:.6em}
.sec ul + p,.sec ol + p{margin-top:.8em}
/* Unterpunkte: eine Ebene reicht, tiefer wird nicht geschachtelt. */
.sec li > ul{margin-top:.45em}
.sec li > ul > li::before{background:var(--ink-3)}

/* Das Stichwort am Anfang eines Punktes traegt den Punkt. Es bleibt in der
   Textfarbe, nur im Gewicht abgesetzt, damit die Zeile ein Satz bleibt. */
.sec strong{font-weight:600;color:var(--ink)}
.sec em{font-style:italic}
.sec code{
  font-family:var(--f-mono);
  font-size:0.86em;
  background:var(--surface-2);
  border:1px solid var(--rule);
  border-radius:3px;
  padding:.05em .35em;
  overflow-wrap:anywhere;
}

.srcline{
  margin-top:22px;
  padding-top:12px;
  border-top:1px solid var(--rule);
  font-family:var(--f-mono);
  font-size:0.72rem;
  color:var(--ink-3);
}
.srcline a{color:var(--accent)}

.empty{
  padding:56px 0;
  text-align:center;
  font-family:var(--f-body);
  font-size:var(--step-1);
  color:var(--ink-2);
}
.empty button{
  display:block;margin:14px auto 0;
  font-family:var(--f-mono);font-size:var(--step--1);
  background:var(--accent);color:var(--accent-ink);
  border:0;padding:9px 14px;cursor:pointer;
}


/* ---------- Kreuztabelle ---------- */
.matrix{
  border:1px solid var(--rule-strong);
  background:var(--surface);
  padding:16px 16px 12px;
  margin-bottom:26px;
}
.matrix-kopf{
  display:flex;
  flex-wrap:wrap;
  gap:10px 16px;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:12px;
}
.matrix h2{
  font-family:var(--f-mono);
  font-size:0.7rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--ink-3);
  margin:0;
}
.segmented{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--rule-strong)}
.segmented button{
  font-family:var(--f-mono);
  font-size:0.7rem;
  letter-spacing:.03em;
  background:none;
  color:var(--ink-2);
  border:0;
  border-left:1px solid var(--rule-strong);
  padding:6px 10px;
  cursor:pointer;
  white-space:nowrap;
}
.segmented button:first-child{border-left:0}
.segmented button:hover{background:var(--surface-2);color:var(--ink)}
.segmented button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}

/* Bei zwoelf mal elf Werten passt die Tabelle nicht mehr in jede Fensterbreite.
   Sie darf deshalb waagerecht scrollen; die Zeilenbeschriftungen bleiben dabei
   stehen, sonst weiss man nach zwei Spalten nicht mehr, welche Zeile man liest. */
.matrix-scroll{overflow-x:auto;overscroll-behavior-x:contain}
.matrix-tab{
  border-collapse:separate;
  border-spacing:0;
  font-family:var(--f-mono);
  font-size:0.72rem;
  width:auto;
  min-width:100%;
}
.matrix-tab th,
.matrix-tab td{padding:0;border:0;box-shadow:inset 0 0 0 1px var(--rule)}
.matrix-tab thead th{
  font-weight:500;
  color:var(--ink-2);
  vertical-align:bottom;
  box-shadow:inset 0 -1px 0 var(--rule-strong);
  padding:0 0 6px;
  background:var(--surface);
}
.matrix-tab thead th.ecke{box-shadow:none}
.matrix-tab th button,
.matrix-tab td button{
  font:inherit;
  background:none;
  border:0;
  cursor:pointer;
  color:inherit;
  width:100%;
  padding:7px 6px;
  line-height:1.2;
}
.matrix-tab thead th button{
  padding:4px 6px;
  color:var(--ink-2);
  white-space:normal;
  min-width:104px;
  max-width:150px;
  hyphens:auto;
}
.matrix-tab thead th button:hover{color:var(--accent);text-decoration:underline}
.matrix-tab thead th.aktiv button{color:var(--accent);font-weight:600}
.matrix-tab thead th.gehoehrt button{color:var(--ink);font-weight:600}

.matrix-tab tbody th{
  text-align:left;
  font-weight:500;
  color:var(--ink-2);
  box-shadow:inset -1px 0 0 var(--rule-strong);
  white-space:normal;
  vertical-align:middle;
  position:sticky;
  left:0;
  z-index:2;
  background:var(--surface);
}
.matrix-tab tbody th button{text-align:left;padding-left:0;padding-right:12px;min-width:150px;max-width:225px;line-height:1.25}
.matrix-tab tbody th button:hover{color:var(--accent);text-decoration:underline}
.matrix-tab tbody th.aktiv button{color:var(--accent);font-weight:600}
.matrix-tab tbody th.gehoehrt button{color:var(--ink);font-weight:600}

.zelle{text-align:center;background:var(--heat-0)}
.zelle[data-stufe="1"]{background:var(--heat-1);color:var(--heat-1-ink)}
.zelle[data-stufe="2"]{background:var(--heat-2);color:var(--heat-2-ink)}
.zelle[data-stufe="3"]{background:var(--heat-3);color:var(--heat-3-ink)}
.zelle[data-stufe="4"]{background:var(--heat-4);color:var(--heat-4-ink)}
.zelle button{font-variant-numeric:tabular-nums;font-weight:600}
.zelle.leer{color:var(--ink-3);font-weight:400}
.zelle.leer span{display:block;padding:7px 6px;opacity:.5}
.zelle.aktiv{outline:2px solid var(--focus);outline-offset:-2px}
.zelle button:hover{box-shadow:inset 0 0 0 2px var(--ink)}

.matrix-tab .summe{
  background:none;
  box-shadow:none;
  color:var(--ink-3);
  text-align:center;
  font-variant-numeric:tabular-nums;
  box-shadow:inset 1px 0 0 var(--rule-strong);
  padding:7px 6px;
}
.matrix-tab tfoot td,
.matrix-tab tfoot th{
  box-shadow:inset 0 1px 0 var(--rule-strong);
  color:var(--ink-3);
  text-align:center;
  font-variant-numeric:tabular-nums;
  font-weight:500;
  padding:6px;
}
.matrix-tab tfoot th{
  text-align:left;
  padding-left:0;
  position:sticky;
  left:0;
  z-index:2;
  background:var(--surface);
}

.matrix-fuss{
  display:flex;
  flex-wrap:wrap;
  gap:8px 16px;
  align-items:center;
  justify-content:space-between;
  margin-top:10px;
}
.matrix-readout{
  font-family:var(--f-body);
  font-size:0.88rem;
  line-height:1.45;
  color:var(--ink-2);
  margin:0;
  flex:1 1 260px;
  min-width:0;
}
.matrix-readout b{color:var(--ink);font-weight:600}
.matrix-skala{
  display:flex;
  align-items:center;
  gap:6px;
  font-family:var(--f-mono);
  font-size:0.66rem;
  color:var(--ink-3);
  flex:0 0 auto;
}
.matrix-skala i{width:18px;height:11px;display:block;font-style:normal}
.matrix-skala i[data-stufe="1"]{background:var(--heat-1)}
.matrix-skala i[data-stufe="2"]{background:var(--heat-2)}
.matrix-skala i[data-stufe="3"]{background:var(--heat-3)}
.matrix-skala i[data-stufe="4"]{background:var(--heat-4)}

/* Eckfeld: benennt, welche Achse in den Zeilen und welche in den Spalten steht */
.matrix-tab thead th.ecke{
  position:sticky;
  left:0;
  z-index:3;
  background:var(--surface);
  border:0;
  padding:0 14px 6px 0;
  text-align:left;
  vertical-align:bottom;
  white-space:nowrap;
}
.matrix-tab thead th.ecke span{
  display:block;
  font-family:var(--f-mono);
  font-size:0.66rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--accent);
  line-height:1.5;
}

/* Erklaerzeile ueber der Tabelle */
.matrix-rahmen{
  display:flex;
  flex-wrap:wrap;
  gap:4px 18px;
  margin:0 0 12px;
  padding-bottom:11px;
  border-bottom:1px solid var(--rule);
  font-family:var(--f-body);
  font-size:0.88rem;
  line-height:1.45;
  color:var(--ink-2);
}
.rm-teil{display:inline-flex;align-items:baseline;gap:7px;min-width:0}
.rm-marke{
  font-family:var(--f-mono);
  font-size:0.62rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
  flex:0 0 auto;
}

/* Ablesekasten unter der Tabelle */
.matrix-readout{flex:1 1 300px;min-width:0;min-height:4.6em}
.ro-kopf{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin:0 0 3px;
  font-family:var(--f-display);
  font-size:var(--step-0);
  color:var(--ink);
}
.ro-kopf b{font-weight:700}
.ro-vor{
  font-family:var(--f-mono);
  font-size:0.62rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
}
/* Beschriftung und Wert stehen unmittelbar nebeneinander. Eine feste Breite
   der Beschriftungsspalte hatte hinter der kuerzeren eine Luecke gelassen. */
.ro-tab{
  font-family:var(--f-body);
  font-size:0.88rem;
  line-height:1.5;
}
.ro-zeile{
  display:flex;
  align-items:baseline;
  gap:9px;
  margin:0 0 2px;
}
.ro-lbl{
  flex:0 0 auto;
  font-family:var(--f-mono);
  font-size:0.62rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--accent);
}
.ro-wert{color:var(--ink);min-width:0}

/* ---------- Farbpunkt an der Kostenangabe in der Zeile ---------- */
.tag.punkt{display:inline-flex;align-items:center;gap:5px}
.tag.punkt::before{
  content:"";
  width:8px;height:8px;
  background:var(--rule-strong);
  flex:0 0 auto;
}
.tag.punkt[data-farbe="teal"]::before{background:var(--teal)}
.tag.punkt[data-farbe="grau"]::before{background:var(--ink-3)}
.tag.punkt[data-farbe="amber"]::before{background:var(--amber)}
.tag.punkt[data-farbe="rost"]::before{background:var(--accent)}
.tag.punkt.hit::before{background:var(--accent-ink)}

/* ---------- Kompakte Ansicht ---------- */
.list.kompakt .orig,
.list.kompakt .tagline{display:none}
.list.kompakt .headmain{padding:10px 0}
.list.kompakt .name{font-size:var(--step-1);margin-bottom:0}
.list.kompakt .meta{margin-top:6px}
.list.kompakt .headside{padding:11px 0 10px}
.list.kompakt .item.open .orig,
.list.kompakt .item.open .tagline{display:block}
.list.kompakt .item.open .headmain{padding:17px 0}
.list.kompakt .item.open .name{font-size:var(--step-2);margin-bottom:3px}

/* ---------- Legende ---------- */
.legend{
  margin-top:44px;
  padding-top:20px;
  border-top:2px solid var(--rule-strong);
  display:grid;
  gap:18px;
}
.legend h3{
  font-family:var(--f-mono);
  font-size:0.7rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;margin:0 0 8px;
}
.legend p{
  font-family:var(--f-body);font-size:var(--step-0);line-height:1.6;
  color:var(--ink-2);margin:0 0 8px;
}

/* ---------- Fehlerhinweis ---------- */
.fehlerbox{
  position:fixed;
  left:16px;right:16px;bottom:16px;
  max-width:560px;
  margin-inline:auto;
  background:var(--accent);
  color:var(--accent-ink);
  padding:16px 18px;
  font-size:var(--step-0);
  line-height:1.5;
}
.fehlerbox p{margin:6px 0 0}
.fehlerbox code{font-family:var(--f-mono);font-size:0.85em}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important}
}

/* Kurzer Hinweis oben in der Filterschiene. Erklaert die Und-Verknuepfung,
   damit eine leere Liste nach zwei Klicks nicht wie ein Fehler wirkt. */
.rail-hinweis{
  margin:0 0 1rem;
  padding-bottom:.9rem;
  border-bottom:1px solid var(--rule);
  font-size:.8125rem;
  line-height:1.5;
  color:var(--ink-2);
}

/* Hinweis auf das waagerechte Schieben. Wird nur eingeblendet, wenn die
   Tabelle tatsaechlich breiter ist als das Fenster. */
.matrix-schieben{
  margin:0 0 8px;
  font-family:var(--f-mono);
  font-size:0.68rem;
  letter-spacing:.04em;
  color:var(--ink-3);
}