/* Seite „Funktionsweise" (/beispiel) — Illustration des Reconciliation-
   Ablaufs am konkreten Beispiel. Baut auf den Tokens aus style.css auf. */

.intro{margin:2px 0 20px}
.intro p{max-width:78ch;color:var(--text-2);margin:4px 0}

/* Ergebnis-Badges (gleiche Konvention wie import.css) */
.badge.identisch{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-border)}
.badge.mehrdeutig{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-border)}
.badge.verschieden{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-border)}

/* Karteikarte des Registereintrags */
.kartei{border-top:3px solid var(--accent);border-radius:var(--radius-s);
  border-left:1px solid var(--border);border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);background:var(--surface-2);padding:14px 16px}
.kartei-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  flex-wrap:wrap;border-bottom:1px dashed var(--border-strong);padding-bottom:8px;margin-bottom:10px}
.kartei-kopf .name{font-size:1.12rem;font-weight:700;color:var(--navy)}
.kartei-nr{font-family:var(--mono);color:var(--text-3);font-size:.82rem}
dl.felder{display:grid;grid-template-columns:max-content 1fr;gap:3px 18px;margin:0;font-size:.9rem}
dl.felder dt{color:var(--text-3)}
dl.felder dd{margin:0}
.verweis{color:var(--accent-strong);font-weight:600;font-family:var(--mono);font-size:.85em}

/* JSON-Block */
pre.json{background:#20395e;color:#dbe5f2;border-radius:var(--radius-s);padding:13px 16px;
  overflow-x:auto;font-family:var(--mono);font-size:.82rem;line-height:1.55;margin:10px 0}
pre.json .k{color:#8fc0f5}
pre.json .neu{background:rgba(125,200,160,.16);outline:2px solid rgba(125,200,160,.35);border-radius:3px}

/* Tier-Leiter */
.tiers{display:flex;flex-direction:column;gap:8px;margin:8px 0}
.tier{display:grid;grid-template-columns:64px 1fr max-content;gap:4px 14px;align-items:baseline;
  background:var(--surface-2);border:1px solid var(--border);border-left:3px solid var(--accent);
  border-radius:var(--radius-s);padding:9px 13px}
.tier .t-name{font-weight:700;font-size:.8rem;font-family:var(--mono);color:var(--accent-strong)}
.tier .t-desc{font-size:.89rem}
.tier .t-out{white-space:nowrap}
@media (max-width:640px){.tier{grid-template-columns:64px 1fr}.tier .t-out{grid-column:2}}

/* Score-Tabelle */
.score-tbl{overflow-x:auto}
.score-tbl table{border-collapse:collapse;width:100%;font-size:.9rem}
.score-tbl th,.score-tbl td{text-align:left;padding:7px 12px;border-bottom:1px solid var(--border)}
.score-tbl th{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--text-3)}
.score-tbl td.num,.score-tbl th.num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--mono)}
.score-tbl tr.summe td{border-top:2px solid var(--navy);border-bottom:none;font-weight:700}

/* Vorher/Nachher-Vergleich */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0}
@media (max-width:640px){.duo{grid-template-columns:1fr}}
.duo .half{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-s);padding:12px 14px}
.duo h4{margin:0 0 8px;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3)}
.kand{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:6px 0;border-bottom:1px dashed var(--border)}
.kand:last-child{border-bottom:none}
.kand .wer{font-size:.9rem}
.kand .score{font-family:var(--mono);font-size:.85rem;color:var(--text-2)}
.kand .grund{font-size:.78rem;color:var(--text-3);width:100%}

/* Merk-Kasten */
.merke{background:var(--accent-soft);border:1px solid var(--accent-border);
  border-left:3px solid var(--accent);border-radius:var(--radius-s);
  padding:11px 15px;margin:14px 0;font-size:.92rem;max-width:78ch}
.merke b:first-child{color:var(--accent-strong)}

.fussnote{color:var(--text-3);font-size:.82rem;margin-top:22px;max-width:78ch}