/* =====================================================================
 * styles-ui.css — ZENTRALE Design-Primitiven (Single Source of Truth).
 *
 * Hier — und NUR hier — werden die wiederkehrenden UI-Elemente gestaltet.
 * Seiten/Module DEKLARIEREN diese Elemente (window.UI.* / .ui-*-Klassen),
 * sie definieren KEINE eigenen Header-/Button-/Karten-/Suchfeld-Styles mehr.
 *
 * Alle Werte leiten sich aus den Brand-Tokens (:root in styles.css) ab.
 * Wird als ERSTES Stylesheet geladen; modul-spezifisches CSS ist Alt-Last
 * und wird schrittweise entfernt.
 * ===================================================================== */

/* ── Kanonisches Seiten-Padding (Rail-Nachbar-Container) ──────────────── */
/* Jede Modul-Seite gibt ihrem Inhalts-Container .ui-page-pad — damit sind
 * Kantenabstaende (oben/seitlich) an EINER Stelle definiert, nicht pro Modul. */
.ui-page-pad { padding: var(--sp-32) 40px 72px; box-sizing: border-box; }

/* ── PageHeader: Breadcrumb + Titel + Untertitel + Aktionen ──────────── */
/* Liefert NUR den Header-Inhalt; die Kantenabstaende kommen vom Container. */
.ui-ph {
  margin: 0 0 var(--sp-24);
}
/* Family-B-Seiten (Wrapper ohne Padding, Body self-padded): Header polstert selbst. */
.ui-ph-pad { padding: var(--sp-32) 40px 0; margin-bottom: var(--sp-24); }
.ui-ph-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-24);
}
.ui-ph-titles { min-width: 0; }
.ui-ph-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-4xl);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--ink-900);
}
.ui-ph-sub {
  margin: var(--sp-6) 0 0;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-500);
}
.ui-ph-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  flex: 0 0 auto;
}
.ui-ph-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-16);
  margin-top: var(--sp-14);
  font-size: var(--fs-xs);
  color: var(--ink-500);
}

/* ── Button: primary / ghost (EIN Satz Regeln fuer alle Module) ──────── */
.ui-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1;
  padding: var(--sp-8) var(--sp-16);
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
  appearance: none;
}
.ui-btn:focus-visible { outline: 2px solid var(--pink-500); outline-offset: 2px; }
.ui-btn-primary { background: var(--navy-900); color: #fff; border-color: var(--navy-900); }
.ui-btn-primary:hover { background: var(--navy-800); border-color: var(--navy-800); }
.ui-btn-ghost { background: var(--surface); color: var(--ink-700); border-color: var(--paper-3); padding: var(--sp-8) var(--sp-14); }
.ui-btn-ghost:hover { background: var(--paper-2, #F2EFE7); }
.ui-btn:disabled { opacity: .55; cursor: default; }

/* ── Card: einheitlicher Container ───────────────────────────────────── */
.ui-card {
  background: var(--surface);
  border: 1px solid var(--paper-3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: var(--sp-20);
  box-sizing: border-box;
}

/* ── SearchInput: einheitliches Suchfeld ─────────────────────────────── */
.ui-search {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  background: var(--surface);
  border: 1px solid var(--paper-3);
  border-radius: var(--radius);
  padding: var(--sp-8) var(--sp-12);
}
.ui-search:focus-within { border-color: var(--ink-400); }
.ui-search-icon { color: var(--ink-400); display: flex; flex: 0 0 auto; }
.ui-search input {
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--ink-900);
  width: 100%;
  min-width: 200px;
}
.ui-search input::placeholder { color: var(--ink-400); }

/* ── Sidebar-Treffer-Highlight (geteilt) — funktioniert auf jedem TOC-Eintrag ── */
.sb-hit {
  background: color-mix(in srgb, var(--accent, var(--pink-500)) 14%, transparent);
  color: var(--ink-900);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--accent, var(--pink-500));
  border-radius: var(--radius-sm);
}

/* ── Reader: zugeordnete Evidence/Beispiele (ReaderKit.EvidenceList) ── */
.rk-ev { margin-top: var(--sp-8); }
.rk-ev-group + .rk-ev-group { margin-top: var(--sp-10); }
.rk-ev-h { display: flex; align-items: center; gap: var(--sp-6); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .02em; color: var(--ink-500); margin-bottom: var(--sp-6); text-transform: none; }
.rk-ev-count { font-weight: 600; color: var(--ink-400); }
.rk-ev-items { display: flex; flex-direction: column; gap: var(--sp-4); }
.rk-ev-item { display: flex; align-items: center; gap: var(--sp-8); text-align: left; width: 100%;
  border: 1px solid var(--paper-3); background: var(--surface); border-radius: var(--radius); padding: var(--sp-6) var(--sp-8);
  cursor: pointer; font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--ink-900); }
.rk-ev-item:hover { border-color: var(--ink-400); }
.rk-ev-dot { width: 7px; height: 7px; border-radius: 999px; flex: 0 0 auto; background: var(--fam-eu); }
.rk-ev-verification .rk-ev-dot { background: var(--fam-en); }
.rk-ev-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }