/* termin-karte */
.termin-karte {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-4);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-sm);
}

.termin-karte__zeit {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-width: 56px;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  font-family: var(--font-family-num);
}
.termin-karte__zeit-uhr { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); line-height: 1; }
.termin-karte__zeit-rel { font-size: var(--font-size-xs); color: var(--text-muted); margin-top: var(--space-1); }

.termin-karte__inhalt { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.termin-karte__titel { font-size: var(--font-size-base); font-weight: var(--font-weight-medium); line-height: var(--line-height-tight); }
.termin-karte__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: var(--font-size-sm); color: var(--text-muted); }
.termin-karte__beteiligte { display: inline-flex; align-items: center; gap: var(--space-1); }
.termin-karte__rechts { display: flex; align-items: center; gap: var(--space-2); }

.termin-pille {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.termin-pille[data-profil="tom"]   { background: var(--tom-tint);   border-left: 3px solid var(--tom); }
.termin-pille[data-profil="julia"] { background: var(--julia-tint); border-left: 3px solid var(--julia); }
.termin-pille[data-profil="carlo"] { background: var(--carlo-tint); border-left: 3px solid var(--carlo); }
.termin-pille[data-profil="lola"]  { background: var(--lola-tint);  border-left: 3px solid var(--lola); }