/**
 * onboarding.css
 * Der einmalige Einrichtungs-Dialog: zentrierte Karte mit
 * Fortschrittspunkten (eine echte Sequenz, daher hier als Marker
 * gerechtfertigt) ueber einer schrittweisen Abfrage.
 */
.tk-onboarding {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) var(--space-4);
}

.tk-onboarding-progress {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.tk-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--void-4);
  transition: background-color var(--transition-base), width var(--transition-base);
}
.tk-dot.is-active { background: var(--dusk); width: 22px; }
.tk-dot.is-done { background: var(--dusk-dim); }

.tk-onboarding-card {
  width: 100%;
  max-width: 460px;
  background: var(--void-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glow);
  padding: var(--space-10) var(--space-8);
  text-align: center;
  animation: tk-fade-up 420ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.tk-step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--dusk-soft);
  color: var(--dusk);
  margin: 0 auto var(--space-5);
}

.tk-onboarding-card h1.tk-display {
  font-size: 26px;
  margin-bottom: var(--space-3);
}

.tk-step-subtitle {
  color: var(--mist);
  font-size: 14.5px;
  line-height: 1.55;
  margin-bottom: var(--space-6);
}

.tk-onboarding-card .tk-field { text-align: left; }

.tk-onboarding-card .tk-pill-group,
.tk-onboarding-card .tk-chip-group {
  justify-content: center;
}

.tk-step-actions { margin-top: var(--space-2); }
.tk-step-actions-split {
  display: flex;
  gap: var(--space-3);
}
.tk-step-actions-split .tk-btn-primary { flex: 1; }

@media (max-width: 480px) {
  .tk-onboarding-card { padding: var(--space-8) var(--space-5); }
  .tk-field-grid { grid-template-columns: 1fr; }
}