/* M³GIM Archiv Tab Styles */

/* Tab container: flex column so toolbar stays fixed and view scrolls */
#tab-archiv.tab-content.active {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.archiv-view-container {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* =========================================================================
   Toolbar
   ========================================================================= */

.archiv-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  flex-wrap: wrap;
  background: var(--color-paper);
  flex-shrink: 0;
}

/* Toggle-Facette (buildToolbar kind: 'toggle') */
.archiv-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  user-select: none;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: var(--border-radius);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.archiv-toggle:hover { background: var(--color-cream); border-color: var(--border-color-light); }
.archiv-toggle__input { cursor: pointer; accent-color: var(--color-kug-blau); }

.archiv-search {
  flex: 1;
  min-width: 200px;
  max-width: 400px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  background: white;
  transition: border-color var(--transition-fast);
}

.archiv-search:focus {
  outline: none;
  border-color: var(--color-kug-blau);
  box-shadow: 0 0 0 2px rgba(0, 74, 143, 0.15);
}

.archiv-select {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  background: white;
  cursor: pointer;
}

.archiv-reset {
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  font-family: var(--font-ui);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background: var(--color-text-inverse);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.archiv-reset:hover {
  background: var(--color-parchment);
  color: var(--color-text-primary);
}

.archiv-count {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  margin-left: auto;
}

/* Schaerfegrad-Banner (M4): aktiver enger Modus + Differenznennung. */
.archiv-schaerfe {
  display: flex;
  align-items: baseline;
  gap: var(--space-2, 8px);
  padding: 6px 10px;
  margin: 6px 0;
  font-size: var(--text-sm);
  border-left: 3px solid var(--color-kug-blau, #004A8F);
  background: var(--color-parchment, #f6f1e7);
}
.archiv-schaerfe__mode {
  font-weight: 600;
  color: var(--color-kug-blau, #004A8F);
}
.archiv-schaerfe__diff {
  color: var(--color-text-tertiary);
}

/* =========================================================================
   View Toggle (Bestand / Chronik)
   ========================================================================= */

.archiv-view-toggle {
  display: flex;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  overflow: hidden;
}

.archiv-view-toggle__btn {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border: none;
  background: white;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.archiv-view-toggle__btn:not(:last-child) {
  border-right: 1px solid var(--border-color);
}

.archiv-view-toggle__btn--active {
  background: var(--color-kug-blau);
  color: white;
}

.archiv-view-toggle__btn:not(.archiv-view-toggle__btn--active):hover {
  background: var(--color-cream);
}

.archiv-view-toggle__icon {
  display: flex;
  align-items: center;
}

/* =========================================================================
   Table (shared by Bestand)
   ========================================================================= */

.archiv-table {
  width: 100%;
  border-collapse: collapse;
}

.archiv-table thead {
  position: sticky;
  top: 0;
  z-index: 10;
}

.archiv-table th {
  background: var(--color-cream);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid var(--border-color);
  white-space: nowrap;
}

.archiv-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-color-light);
  vertical-align: top;
}

.archiv-table tbody tr {
  cursor: pointer;
  transition: background var(--transition-fast);
}

.archiv-table tbody tr:hover {
  background: var(--color-cream);
}

.archiv-table tbody tr.selected {
  background: var(--color-gold-light);
}

/* F-6: Konvolut Rows — hierarchy via typography, not background */
.archiv-row--konvolut {
  font-weight: var(--weight-semibold);
}

.archiv-row--konvolut td:first-child {
  position: relative;
  padding-left: var(--space-3);
}

.archiv-row--child td:first-child {
  padding-left: var(--space-10);
}

/* F-10: Child rows — hierarchy via indentation only, no background */
.archiv-row--child {
  font-size: var(--text-sm);
}

.archiv-row--hidden {
  display: none;
}

/* E-116: Nicht erschlossene Records (nur im "alle"-Modus sichtbar). Ausgegraut,
   damit der Erschliessungsstand sichtbar bleibt statt kaschiert (Zielbild
   Linie 3): die Daten sind erreichbar, aber als unbearbeitet erkennbar. */
.archiv-row--unerschlossen {
  color: var(--color-text-tertiary);
}
.archiv-row--unerschlossen .archiv-titel {
  font-style: italic;
  color: var(--color-text-tertiary);
}

/* Active / expanded row */
.archiv-row--active {
  background: var(--color-gold-light) !important;
}

.archiv-row--active td:first-child {
  border-left: 3px solid var(--color-kug-blau);
}

/* Detail expansion row */
.archiv-row--detail {
  cursor: default;
}

.archiv-row--detail:hover {
  background: transparent;
}

.archiv-row--detail td {
  padding: 0;
  border-bottom: 2px solid var(--color-kug-blau);
}

/* Konvolut Toggle — klar als interaktiver Chevron erkennbar (E-90) */
.konvolut-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: rgba(0, 74, 143, 0.08);
  cursor: pointer;
  color: var(--color-kug-blau);
  margin-right: var(--space-2);
  transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.konvolut-toggle svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.25;
}

.konvolut-toggle:hover,
tr.archiv-row--konvolut:hover .konvolut-toggle {
  background: rgba(0, 74, 143, 0.18);
  box-shadow: 0 0 0 1px rgba(0, 74, 143, 0.18);
}

.konvolut-toggle:focus-visible {
  outline: 2px solid var(--color-kug-blau);
  outline-offset: 2px;
}

.konvolut-toggle.collapsed {
  transform: rotate(-90deg);
}

/* Column Widths */
.archiv-col-signatur { width: 160px; }
.archiv-col-titel { width: auto; }
.archiv-col-typ { width: 140px; }
.archiv-col-datum { width: 160px; }
.archiv-col-links { width: 120px; text-align: center; }

.archiv-signatur {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-kug-blau);
}

.archiv-titel {
  max-width: 500px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.archiv-folio-hint {
  display: inline;
  margin-left: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  font-style: italic;
}

.archiv-folio-hint::before {
  content: '— ';
}

/* Konvolut-Metadaten direkt unter dem Titel: Top-Dokumenttypen (Chips) +
   dezenter Status-Mix. Ersetzt die frueher aufklappbare Konvolut-
   Detailansicht -- siehe knowledge/data.md § 17. */
.archiv-konvolut-meta {
  display: block;
  margin-top: var(--space-1);
  white-space: normal;
  line-height: 1.4;
}

.archiv-konvolut-meta .chip--compact {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  margin-right: var(--space-1);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  background: var(--color-surface-subtle, #f1f5f9);
  color: var(--color-text-secondary);
  border-radius: 3px;
}

.archiv-konvolut-status {
  margin-left: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  font-style: italic;
}

.archiv-datum {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* Ü-3: Consistent absence pattern */
.archiv-datum--undated {
  font-style: italic;
  color: var(--color-absent);
}

.archiv-links {
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

/* F-3: Signal green for linked records */
.archiv-links--has-links {
  color: var(--color-signal-green);
  font-weight: var(--weight-medium);
}

.archiv-links--zero {
  color: var(--color-absent);
  opacity: 0.5;
}

/* =========================================================================
   Inline Detail (shared by Bestand + Chronik)
   ========================================================================= */

.inline-detail {
  padding: var(--space-4) var(--space-5);
  background: white;
  border-left: 3px solid var(--color-kug-blau);
}

.inline-detail__header {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.inline-detail__signatur {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-kug-blau);
  font-weight: var(--weight-semibold);
}

.inline-detail__title {
  flex: 1;
  margin: 0;
  font-family: var(--font-title);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}

.inline-detail__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border-color-light);
  border-radius: var(--border-radius);
  background: white;
  cursor: pointer;
  color: var(--color-text-tertiary);
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.inline-detail__close:hover {
  background: var(--color-cream);
  color: var(--color-text-primary);
}

.inline-detail__korb-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  font-family: var(--font-ui);
  border: 1px solid var(--border-color-light);
  border-radius: var(--border-radius);
  background: white;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.inline-detail__korb-btn:hover {
  border-color: var(--color-kug-blau);
  color: var(--color-kug-blau);
}

.inline-detail__korb-btn--active {
  background: var(--color-kug-blau);
  border-color: var(--color-kug-blau);
  color: white;
}

.inline-detail__korb-btn--active:hover {
  opacity: 0.85;
  color: white;
}

.inline-detail__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

@media (max-width: 700px) {
  .inline-detail__body {
    grid-template-columns: 1fr;
  }
}

.inline-detail__section {
  margin-bottom: var(--space-3);
}

.inline-detail__section-title {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-2);
}

.inline-detail__meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
}

.inline-detail__meta-label {
  color: var(--color-text-secondary);
  font-weight: var(--weight-medium);
}

.inline-detail__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

/* =========================================================================
   Rolle-Prefix-Chip-Pattern (Session 32: E-75 Mockup-Stil)
   Einheitliche Darstellung fuer Finanzen, AgRelOn-Beziehungen,
   SpatiotemporalEvents. Aufbau: Uppercase-Mono-Prefix + Serif-Wert
   + optionale Provenance-Pille + optionales Wikidata-Badge.
   Farbfamilien ueber .chip--c-<cluster>-Klassen (ort, person, rolle,
   beziehung, finanz, datum, neutral).
   ========================================================================= */

.chip--role-pair {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 8px;
  border-radius: var(--border-radius);
  border: 1px solid transparent;
  font-size: var(--text-xs);
  line-height: 1.4;
}

.chip--role-pair .chip-rolle {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.72;
}

.chip--role-pair .chip-wert {
  font-family: var(--font-title);
  font-weight: var(--weight-medium);
}

.chip--role-pair .prov-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-text-secondary);
  letter-spacing: 0.02em;
  cursor: help;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.chip--role-pair .prov-pill:hover {
  background: rgba(0, 74, 143, 0.14);
  color: var(--color-kug-blau);
}
.prov-pill__icon {
  display: inline-flex;
  align-items: center;
  opacity: 0.7;
}
.prov-pill__icon svg {
  width: 10px;
  height: 10px;
}
.prov-pill__label {
  user-select: all;
}

.chip--role-pair.chip--clickable { cursor: pointer; }
.chip--role-pair.chip--clickable:hover { filter: brightness(0.97); }

/* Kompakte Variante fuer Aggregat-Tabellen (Repertoire, Netzwerk) */
.chip--role-pair.chip--compact {
  padding: 2px 6px;
  font-size: 0.72rem;
  gap: 4px;
}
.chip--role-pair.chip--compact .chip-rolle { font-size: 9px; }

/* Cluster-Farbfamilien — semantische Gruppierung der Prefix-Typen. */
.chip--c-ort       { background: #e8f0f4; border-color: #c7d8e2; color: #2a4b62; }
.chip--c-person    { background: #e4ebf4; border-color: #bdc9dc; color: #1e3a5c; }
.chip--c-rolle     { background: #f4e8e4; border-color: #d8bfb7; color: #6a2c22; }
.chip--c-beziehung { background: #ecf0e4; border-color: #c7d2b5; color: #3e5a2c; }
.chip--c-finanz    { background: #ece8e0; border-color: #c9c1ad; color: #4a4236; }
.chip--c-datum     { background: #ede9e1; border-color: #c9c1ad; color: #5c5651; }
.chip--c-neutral   { background: #f1ede6; border-color: #d4ccbd; color: #5c5651; }

.inline-detail__konvolut {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-color-light);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  font-style: italic;
}

/* Empty state for unlinked records */
.inline-detail__empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  color: var(--color-text-tertiary);
  font-style: italic;
  text-align: center;
}

.inline-detail__empty-state p {
  margin: 0;
}

.inline-detail__empty-hint {
  font-size: var(--text-xs);
  margin-top: var(--space-1) !important;
  opacity: 0.7;
}

/* Unclassified type badge */
.badge--unclassified {
  color: var(--color-absent);
  font-style: italic;
}

/* E-116: Statusmarke fuer nicht erschlossene Records im "alle"-Modus. */
.badge--unerschlossen {
  color: var(--color-text-tertiary);
  border: 1px dashed var(--color-sand);
  font-style: italic;
  font-size: var(--text-xs);
}

/* =========================================================================
   Chronik View — scrollender Jahres-Zeitstrahl
   ========================================================================= */

/* Chronik: Die Filter-Toolbar bleibt beim Scrollen der langen Zeitleiste oben
   sichtbar. Jede .tab-content ist ihr eigener Scroll-Container, also klebt
   top:0 am oberen Rand des Chronik-Bereichs (unter der Tab-Leiste). Nur hier
   gescopet, damit Bestand unberuehrt bleibt; .archiv-toolbar ist bereits opak. */
#tab-chronik .archiv-toolbar {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--border-color);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.chronik-timeline-container {
  padding: var(--space-3) var(--space-2);
}

.chronik-timeline {
  position: relative;
  padding-left: 96px;  /* Platz fuer Jahres-Label links + Achse */
}

.chronik-timeline__axis {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 96px;
  width: 2px;
  background: var(--border-color-light);
  pointer-events: none;
}

.chronik-year {
  position: relative;
  display: grid;
  grid-template-columns: 0 1fr;  /* Label + Marker sind absolut positioniert */
  align-items: start;
  min-height: 28px;
  padding: 2px 0 2px var(--space-3);
}

.chronik-year__label {
  position: absolute;
  left: -96px;
  top: 4px;
  width: 80px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-tertiary);
  letter-spacing: 0.02em;
}

.chronik-year--decade .chronik-year__label {
  color: var(--color-kug-blau);
  font-size: var(--text-sm);
}

.chronik-year--empty .chronik-year__label {
  color: var(--color-text-tertiary);
  opacity: 0.5;
}

/* Dichte-adaptive Hoehe: leere Nicht-Dekaden-Jahre werden zur duennen Linie,
   belegte Jahre behalten volle Hoehe. Lueckenstruktur bleibt sichtbar, ohne
   endloses Scrollen durch Jahrzehnte ohne Belege (siehe E-88). */
.chronik-year--empty:not(.chronik-year--decade) {
  min-height: 6px;
  padding-top: 0;
  padding-bottom: 0;
}

.chronik-year--empty:not(.chronik-year--decade) .chronik-year__label {
  display: none;
}

.chronik-year--empty:not(.chronik-year--decade) .chronik-year__marker {
  top: 0;
  height: 6px;
}

.chronik-year--empty:not(.chronik-year--decade) .chronik-year__points {
  min-height: 0;
}

.chronik-year__marker {
  position: absolute;
  left: -10px;
  top: 10px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.chronik-year__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-kug-blau);
  transition: transform var(--transition-fast);
}

.chronik-year__dot--empty {
  background: transparent;
  border: 1px solid var(--border-color);
  transform: scale(0.4);
}

.chronik-year__dot--undated {
  background: var(--color-text-tertiary);
}

.chronik-year--decade .chronik-year__marker::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 9px;
  width: 28px;
  height: 2px;
  background: var(--border-color);
}

.chronik-year__points {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  min-height: 20px;
}

.chronik-year--undated {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--border-color);
}

.chronik-year--undated .chronik-year__label {
  font-family: var(--font-title);
  font-style: italic;
  color: var(--color-text-tertiary);
}

/* Record-Punkt: kompakter Chip an der Zeitachse. Klickbar -> selectRecord. */
.chronik-point {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
  padding: 3px var(--space-2);
  border: 1px solid var(--border-color-light);
  border-radius: var(--border-radius);
  background: white;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
  text-align: left;
  max-width: 420px;
}

.chronik-point:hover {
  border-color: var(--color-kug-blau);
  box-shadow: 0 1px 3px rgba(0, 74, 143, 0.15);
}

.chronik-point__date {
  font-family: var(--font-mono);
  color: var(--color-text-tertiary);
  flex-shrink: 0;
}

.chronik-point__sig {
  font-family: var(--font-mono);
  color: var(--color-kug-blau);
  flex-shrink: 0;
}

.chronik-point__title {
  font-family: var(--font-title);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.chronik-point__place {
  color: var(--color-text-secondary);
  font-style: italic;
  flex-shrink: 0;
}

.chronik-point__badge {
  font-size: 9px;
  flex-shrink: 0;
}

/* =========================================================================
   Mobilitäts-Chronik: Sicht-Akzent, Achsenkopf, Dekaden-Header (E-124)
   ========================================================================= */

/* Sicht-Akzent sitzt absolut in der linken Polsterung, damit er die
   Baseline-Ausrichtung der Chip-Texte nicht stört. Kein Akzent = kein STE. */
.chronik-point {
  position: relative;
  padding-left: calc(var(--space-2) + 7px);
}
.chronik-point__accent {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 2px 0 0 2px;
}

/* Sekundär datierter Chip: gestrichelte Kontur + Herkunfts-Badge signalisieren
   "Jahr nicht aus dem Hauptdatum". */
.chronik-point--secondary { border-style: dashed; }
.chronik-point__secondary {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-tertiary);
  flex-shrink: 0;
}

/* Header-Segment-Highlight: Treffer hervor, Rest gedämpft. */
.chronik-point--hit {
  border-color: var(--color-kug-blau);
  box-shadow: 0 0 0 2px rgba(0, 74, 143, 0.18);
}
.chronik-point--dim { opacity: 0.3; }

/* --- Achsenkopf-Caption: Dichte = Erschließung, nicht Aktivität --- */
.chronik-head {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-parchment);
  border-radius: var(--border-radius);
  border-left: 3px solid var(--color-kug-blau);
}
.chronik-head__line {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-primary);
}
.chronik-head__sub { color: var(--color-text-tertiary); }
.chronik-head__hint {
  margin: 4px 0 0;
  font-size: var(--text-xs);
  font-style: italic;
  color: var(--color-text-tertiary);
}

/* --- Dekaden×Sicht-Header --- */
.chronik-decades {
  margin: 0 0 var(--space-5);
  padding: var(--space-3) var(--space-4) var(--space-4);
  border: 1px solid var(--border-color-light);
  border-radius: var(--border-radius);
  background: white;
}
.chronik-decades__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-3);
}
.chronik-decades__title {
  font-family: var(--font-title);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.chronik-decades__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.chronik-decades__legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}
.chronik-decades__swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}
.chronik-decades__row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 40px;
  align-items: center;
  gap: var(--space-3);
  padding: 2px 0;
}
.chronik-decades__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-kug-blau);
  text-align: right;
}
.chronik-decades__track {
  display: flex;
  height: 18px;
  border-radius: 2px;
  overflow: hidden;
  background: var(--color-parchment);
}
.chronik-decades__seg {
  height: 100%;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: opacity var(--transition-fast);
}
.chronik-decades__seg:hover { opacity: 0.78; }
.chronik-decades__seg:focus-visible {
  outline: 2px solid var(--color-kug-blau);
  outline-offset: 1px;
}
.chronik-decades__empty {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(45deg, transparent, transparent 4px, var(--border-color-light) 4px, var(--border-color-light) 5px);
}
.chronik-decades__total {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  text-align: left;
}

/* --- Undatiert-Block: Sicht-Mini-Stapel als Kopf, dann Chips --- */
.chronik-year__points--undated {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
}
.chronik-undated-mini-line { width: 100%; }
.chronik-undated-mini {
  display: flex;
  width: 240px;
  max-width: 100%;
  height: 8px;
  border-radius: 2px;
  overflow: hidden;
  background: var(--color-parchment);
}
.chronik-undated-mini__seg { height: 100%; }
.chronik-undated-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

/* =========================================================================
   Sortable Table Headers
   ========================================================================= */

.archiv-th--sortable {
  cursor: pointer;
  user-select: none;
  transition: color var(--transition-fast);
}

.archiv-th--sortable:hover {
  color: var(--color-kug-blau);
}

.archiv-th--active {
  color: var(--color-kug-blau);
}

/* =========================================================================
   Person Combobox (Autocomplete Filter)
   ========================================================================= */

.archiv-combobox {
  position: relative;
  min-width: 180px;
}

.archiv-combobox__input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  padding-right: var(--space-8);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  background: white;
  transition: border-color var(--transition-fast);
}

.archiv-combobox__input:focus {
  outline: none;
  border-color: var(--color-kug-blau);
  box-shadow: 0 0 0 2px rgba(0, 74, 143, 0.15);
}

.archiv-combobox__clear {
  position: absolute;
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  padding: 2px;
  cursor: pointer;
  color: var(--color-text-tertiary);
  line-height: 1;
}

.archiv-combobox__clear:hover {
  color: var(--color-text-primary);
}

.archiv-combobox__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  background: white;
  border: 1px solid var(--border-color);
  border-top: none;
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  box-shadow: var(--shadow-md);
  z-index: 20;
}

.archiv-combobox__item {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
}

.archiv-combobox__item:hover {
  background: var(--color-cream);
}

.archiv-combobox__item--active {
  background: var(--color-gold-light);
}

.archiv-combobox__count {
  color: var(--color-text-tertiary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.archiv-combobox__more {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  font-style: italic;
}