body.onboarding-active {
  overflow-x: hidden;
  background: var(--tt-bg);
}

body.onboarding-active .topbar,
body.onboarding-active .bottom-nav {
  display: none;
}

body.onboarding-active .app-shell {
  width: 100%;
  max-width: none;
  min-height: 100dvh;
  padding: 0;
  border: 0;
  box-shadow: none;
}

body.onboarding-active #app {
  min-height: 100dvh;
}

.onboarding-page {
  min-height: 100dvh;
  padding: env(safe-area-inset-top) max(16px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(16px, env(safe-area-inset-left));
  background:
    linear-gradient(150deg, rgba(255, 196, 0, 0.055), transparent 34%),
    var(--tt-bg);
  color: var(--tt-text-primary);
}

.onboarding-frame {
  display: flex;
  width: min(100%, 620px);
  min-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  margin: 0 auto;
  flex-direction: column;
}

.onboarding-header {
  display: grid;
  min-height: 64px;
  grid-template-columns: minmax(44px, auto) minmax(100px, 1fr) minmax(44px, auto);
  align-items: center;
  gap: var(--tt-space-3);
}

.onboarding-icon-button,
.onboarding-skip {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--tt-text-secondary);
  cursor: pointer;
}

.onboarding-icon-button {
  display: grid;
  place-items: center;
}

.onboarding-skip {
  padding-inline: var(--tt-space-2);
  color: var(--tt-text-secondary);
  font-size: var(--tt-type-caption);
  font-weight: 740;
  text-align: right;
}

.onboarding-progress-copy {
  display: grid;
  gap: 7px;
  color: var(--tt-text-muted);
  font-size: var(--tt-type-micro);
  font-weight: 780;
  letter-spacing: var(--tt-tracking-label);
  text-align: center;
  text-transform: uppercase;
}

.onboarding-progress {
  height: 3px;
  overflow: hidden;
  border-radius: var(--tt-radius-pill);
  background: var(--tt-border-strong);
}

.onboarding-progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--tt-action);
  transition: width var(--tt-duration-slow) var(--tt-ease-standard);
}

.onboarding-content {
  display: flex;
  min-height: 0;
  flex: 1;
  animation: tt-page-enter var(--tt-duration-base) var(--tt-ease-enter) both;
}

.product-tour-frame {
  overflow: hidden;
}

.product-tour-header {
  display: grid;
  min-height: 64px;
  grid-template-columns: minmax(116px, 1fr) auto minmax(72px, 1fr);
  align-items: center;
  gap: var(--tt-space-3);
}

.product-tour-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--tt-space-2);
  color: var(--tt-text-primary);
}

.product-tour-brand > span {
  display: grid;
  width: 30px;
  height: 30px;
  border: var(--tt-border-width) solid color-mix(in srgb, var(--tt-action) 38%, transparent);
  border-radius: var(--tt-radius-sm);
  background: var(--tt-action-soft);
  color: var(--tt-action);
  place-items: center;
}

.product-tour-brand strong {
  display: flex;
  font-size: var(--tt-type-body);
  font-weight: 900;
  letter-spacing: -0.045em;
}

.product-tour-brand strong span:last-child {
  color: var(--tt-action);
}

.product-tour-step-copy {
  color: var(--tt-text-muted);
  font-size: var(--tt-type-micro);
  font-weight: 780;
  letter-spacing: var(--tt-tracking-label);
  text-align: center;
  text-transform: uppercase;
}

.product-tour-skip {
  justify-self: end;
}

.product-tour-content {
  display: grid;
  width: 100%;
  min-height: 0;
  flex: 1;
  padding: clamp(10px, 2vh, 22px) 0 var(--tt-space-3);
  grid-template-rows: minmax(230px, 1fr) auto;
  align-items: center;
  gap: clamp(20px, 4vh, 38px);
  animation: tt-page-enter 200ms var(--tt-ease-enter) both;
}

.product-tour-demo-stage {
  display: grid;
  width: 100%;
  min-height: 230px;
  align-items: center;
  place-items: center;
}

.product-tour-demo {
  width: min(100%, 480px);
  border: var(--tt-border-width) solid var(--tt-border-strong);
  border-radius: var(--tt-radius-lg);
  box-shadow: var(--tt-shadow-1);
}

.product-tour-copy {
  width: min(100%, 520px);
}

.product-tour-copy h1 {
  max-width: 18ch;
  margin: 0;
  color: var(--tt-text-primary);
  font-size: clamp(1.9rem, 8vw, 2.7rem);
  font-weight: 880;
  letter-spacing: -0.055em;
  line-height: 1.04;
}

.product-tour-copy p {
  max-width: 48ch;
  margin: var(--tt-space-3) 0 0;
  color: var(--tt-text-secondary);
  font-size: var(--tt-type-body);
  line-height: 1.5;
}

.product-tour-footer {
  display: grid;
  padding: var(--tt-space-3) 0 max(var(--tt-space-5), env(safe-area-inset-bottom));
  gap: var(--tt-space-4);
}

.product-tour-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.product-tour-dots span {
  width: 7px;
  height: 7px;
  border-radius: var(--tt-radius-pill);
  background: var(--tt-border-strong);
  transition: width 180ms var(--tt-ease-standard), background 180ms var(--tt-ease-standard);
}

.product-tour-dots span.is-active {
  width: 24px;
  background: var(--tt-action);
}

.product-tour-actions {
  display: grid;
  grid-template-columns: minmax(92px, auto) minmax(180px, 1fr);
  align-items: center;
  gap: var(--tt-space-3);
}

.product-tour-back {
  display: inline-flex;
  min-height: 48px;
  padding: 0 var(--tt-space-3);
  border: 0;
  background: transparent;
  color: var(--tt-text-secondary);
  align-items: center;
  gap: var(--tt-space-2);
  font-weight: 760;
  cursor: pointer;
}

.product-tour-primary {
  display: inline-flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: var(--tt-space-2);
}

.product-tour-calendar-demo {
  position: relative;
  padding: var(--tt-space-4);
  overflow: hidden;
  background: var(--tt-surface-elevated);
}

.product-tour-demo-toolbar,
.product-tour-live-progress-copy,
.product-tour-turnus-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tt-space-3);
}

.product-tour-demo-toolbar > span,
.product-tour-weekdays,
.product-tour-live-label,
.product-tour-live-progress-copy,
.product-tour-turnus-stats small {
  color: var(--tt-text-muted);
  font-size: var(--tt-type-micro);
  font-weight: 780;
  letter-spacing: var(--tt-tracking-label);
  text-transform: uppercase;
}

.product-tour-demo-toolbar strong {
  padding: 7px 11px;
  border: var(--tt-border-width) solid color-mix(in srgb, var(--tt-state-work) 62%, transparent);
  border-radius: var(--tt-radius-sm);
  background: color-mix(in srgb, var(--tt-state-work) 18%, var(--tt-surface));
  color: var(--tt-state-work);
  font-size: var(--tt-type-micro);
  letter-spacing: var(--tt-tracking-label);
}

.product-tour-weekdays,
.product-tour-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.product-tour-weekdays {
  margin-top: var(--tt-space-4);
  text-align: center;
}

.product-tour-calendar-grid {
  position: relative;
  margin-top: var(--tt-space-2);
  gap: 5px;
}

.product-tour-calendar-day {
  display: grid;
  min-width: 0;
  height: 68px;
  padding: 8px 3px;
  border: var(--tt-border-width) solid var(--tt-border);
  border-radius: 12px;
  background: var(--tt-surface-sunken);
  color: var(--tt-text-primary);
  align-content: space-between;
  justify-items: center;
}

.product-tour-calendar-day b {
  font-size: var(--tt-type-caption);
}

.product-tour-calendar-day small {
  overflow: hidden;
  color: white;
  font-size: clamp(0.45rem, 1.8vw, 0.62rem);
  font-weight: 820;
  letter-spacing: 0.02em;
  text-overflow: ellipsis;
}

.product-tour-calendar-day.is-painted-1 {
  animation: product-tour-paint-one 6.2s var(--tt-ease-standard) infinite;
}

.product-tour-calendar-day.is-painted-2 {
  animation: product-tour-paint-two 6.2s var(--tt-ease-standard) infinite;
}

.product-tour-calendar-day.is-painted-3 {
  animation: product-tour-paint-three 6.2s var(--tt-ease-standard) infinite;
}

.product-tour-touch {
  position: absolute;
  top: 39px;
  left: calc((100% / 7) * 1 + 5px);
  width: 30px;
  height: 30px;
  border: 2px solid var(--tt-action);
  border-radius: 50%;
  background: color-mix(in srgb, var(--tt-action) 14%, transparent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--tt-action) 8%, transparent);
  opacity: 0;
  transform: translate3d(0, 0, 0);
  animation: product-tour-touch-path 6.2s var(--tt-ease-standard) infinite;
  pointer-events: none;
}

.product-tour-confirmation {
  display: flex;
  min-height: 28px;
  margin-top: var(--tt-space-3);
  color: var(--tt-success);
  align-items: center;
  justify-content: center;
  gap: var(--tt-space-2);
  font-size: var(--tt-type-caption);
  font-weight: 740;
  opacity: 0;
  animation: product-tour-confirm 6.2s var(--tt-ease-standard) infinite;
}

.product-tour-live-demo {
  padding: clamp(24px, 7vw, 38px);
  border-color: color-mix(in srgb, var(--tt-action) 74%, black);
  background: var(--tt-action);
  color: var(--tt-text-on-action);
  box-shadow: 0 20px 48px rgba(255, 196, 0, 0.15);
}

.product-tour-live-label,
.product-tour-live-progress-copy {
  color: color-mix(in srgb, var(--tt-text-on-action) 72%, transparent);
}

.product-tour-live-amount {
  position: relative;
  height: clamp(64px, 18vw, 88px);
  margin-top: var(--tt-space-2);
}

.product-tour-live-amount span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  font-size: clamp(3rem, 14vw, 5rem);
  font-variant-numeric: tabular-nums;
  font-weight: 920;
  letter-spacing: -0.07em;
  opacity: 0;
}

.product-tour-live-amount span:nth-child(1) { animation: product-tour-money-one 6s linear infinite; }
.product-tour-live-amount span:nth-child(2) { animation: product-tour-money-two 6s linear infinite; }
.product-tour-live-amount span:nth-child(3) { animation: product-tour-money-three 6s linear infinite; }
.product-tour-live-amount span:nth-child(4) { animation: product-tour-money-four 6s linear infinite; }

.product-tour-live-progress-copy {
  margin-top: var(--tt-space-4);
}

.product-tour-live-progress-copy b {
  color: var(--tt-text-on-action);
  font-variant-numeric: tabular-nums;
}

.product-tour-live-progress {
  height: 5px;
  margin-top: var(--tt-space-2);
  overflow: hidden;
  border-radius: var(--tt-radius-pill);
  background: color-mix(in srgb, var(--tt-text-on-action) 22%, transparent);
}

.product-tour-live-progress span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--tt-text-on-action);
  transform: scaleX(0.54);
  transform-origin: left;
  animation: product-tour-live-progress 6s var(--tt-ease-standard) infinite;
}

.product-tour-turnus-demo {
  padding: clamp(24px, 7vw, 36px);
  border-color: color-mix(in srgb, var(--tt-action) 18%, var(--tt-border-strong));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--tt-action) 7%, transparent), transparent 52%),
    var(--tt-surface-elevated);
}

.product-tour-turnus-head span {
  font-size: clamp(1.7rem, 7vw, 2.4rem);
  font-weight: 880;
  letter-spacing: -0.045em;
}

.product-tour-turnus-head small {
  color: var(--tt-text-muted);
  font-size: var(--tt-type-caption);
  font-weight: 720;
}

.product-tour-turnus-progress {
  height: 7px;
  margin-top: var(--tt-space-5);
  overflow: hidden;
  border-radius: var(--tt-radius-pill);
  background: var(--tt-border-strong);
}

.product-tour-turnus-progress span {
  display: block;
  width: 43%;
  height: 100%;
  border-radius: inherit;
  background: var(--tt-action);
  transform: scaleX(0.81);
  transform-origin: left;
  animation: product-tour-turnus-progress 6s var(--tt-ease-standard) infinite;
}

.product-tour-turnus-stats {
  display: grid;
  margin-top: var(--tt-space-5);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--tt-space-4);
}

.product-tour-turnus-stats > span {
  display: grid;
  gap: var(--tt-space-2);
}

.product-tour-turnus-stats b {
  display: grid;
  font-size: clamp(2rem, 9vw, 3.2rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.055em;
}

.product-tour-turnus-stats i {
  grid-area: 1 / 1;
  font-style: normal;
}

.product-tour-turnus-stats i:first-child { animation: product-tour-days-old 6s linear infinite; }
.product-tour-turnus-stats i:last-child { animation: product-tour-days-new 6s linear infinite; }

.product-tour-turnus-stats strong {
  padding: 10px 12px;
  border-radius: var(--tt-radius-sm);
  background: var(--tt-action);
  color: var(--tt-text-on-action);
  font-size: var(--tt-type-caption);
  letter-spacing: var(--tt-tracking-label);
  text-align: center;
  animation: product-tour-home-emphasis 6s var(--tt-ease-standard) infinite;
}

@keyframes product-tour-paint-one {
  0%, 20%, 92%, 100% { background: var(--tt-surface-sunken); border-color: var(--tt-border); }
  25%, 78% { background: var(--tt-state-work); border-color: var(--tt-state-work); }
}

@keyframes product-tour-paint-two {
  0%, 27%, 92%, 100% { background: var(--tt-surface-sunken); border-color: var(--tt-border); }
  32%, 78% { background: var(--tt-state-work); border-color: var(--tt-state-work); }
}

@keyframes product-tour-paint-three {
  0%, 34%, 92%, 100% { background: var(--tt-surface-sunken); border-color: var(--tt-border); }
  39%, 78% { background: var(--tt-state-work); border-color: var(--tt-state-work); }
}

@keyframes product-tour-touch-path {
  0%, 11%, 82%, 100% { opacity: 0; transform: translate3d(0, 0, 0); }
  16% { opacity: 1; transform: translate3d(0, 0, 0); }
  41% { opacity: 1; transform: translate3d(calc((min(calc(100vw - 60px), 448px) / 7) * 2), 0, 0); }
  48%, 78% { opacity: 0; transform: translate3d(calc((min(calc(100vw - 60px), 448px) / 7) * 2), 0, 0); }
}

@keyframes product-tour-confirm {
  0%, 44%, 83%, 100% { opacity: 0; transform: translateY(3px); }
  50%, 76% { opacity: 1; transform: translateY(0); }
}

@keyframes product-tour-money-one { 0%, 20% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes product-tour-money-two { 0%, 20% { opacity: 0; } 25%, 42% { opacity: 1; } 47%, 100% { opacity: 0; } }
@keyframes product-tour-money-three { 0%, 42% { opacity: 0; } 47%, 64% { opacity: 1; } 69%, 100% { opacity: 0; } }
@keyframes product-tour-money-four { 0%, 64% { opacity: 0; } 69%, 91% { opacity: 1; } 96%, 100% { opacity: 0; } }

@keyframes product-tour-live-progress {
  0%, 8% { transform: scaleX(0.54); }
  82%, 100% { transform: scaleX(0.68); }
}

@keyframes product-tour-turnus-progress {
  0%, 18% { transform: scaleX(0.81); }
  52%, 100% { transform: scaleX(1); }
}

@keyframes product-tour-days-old { 0%, 39% { opacity: 1; } 46%, 100% { opacity: 0; } }
@keyframes product-tour-days-new { 0%, 39% { opacity: 0; } 46%, 100% { opacity: 1; } }
@keyframes product-tour-home-emphasis {
  0%, 48% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tt-action) 0%, transparent); }
  58%, 78% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--tt-action) 13%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tt-action) 0%, transparent); }
}

.onboarding-welcome,
.onboarding-form,
.onboarding-connection {
  width: 100%;
}

.onboarding-welcome {
  display: flex;
  min-height: calc(100dvh - 80px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  padding: clamp(40px, 10vh, 92px) 0 var(--tt-space-5);
  flex-direction: column;
}

.onboarding-brand {
  display: flex;
  align-items: center;
  gap: var(--tt-space-3);
}

.onboarding-brand-mark,
.onboarding-connection-icon {
  display: grid;
  width: 54px;
  height: 54px;
  border: var(--tt-border-width) solid color-mix(in srgb, var(--tt-action) 34%, transparent);
  border-radius: var(--tt-radius-md);
  background: var(--tt-action-soft);
  color: var(--tt-action);
  place-items: center;
}

.onboarding-brand strong {
  display: flex;
  font-size: clamp(2rem, 9vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.065em;
  line-height: 1;
}

.onboarding-brand strong span:last-child {
  color: var(--tt-action);
}

.onboarding-tagline {
  margin: var(--tt-space-3) 0 0 66px;
  color: var(--tt-text-secondary);
  font-size: var(--tt-type-body);
}

.onboarding-copy,
.onboarding-step-copy {
  margin-top: clamp(42px, 9vh, 76px);
}

.onboarding-copy h1,
.onboarding-step-copy h1,
.onboarding-connection h1 {
  margin: 0;
  font-size: clamp(2rem, 8vw, 2.85rem);
  font-weight: 860;
  letter-spacing: -0.055em;
  line-height: 1.04;
}

.onboarding-copy p,
.onboarding-step-copy p,
.onboarding-connection p {
  max-width: 44ch;
  margin: var(--tt-space-4) 0 0;
  color: var(--tt-text-secondary);
  font-size: var(--tt-type-subtitle);
  line-height: 1.55;
}

.onboarding-actions {
  display: flex;
  margin-top: auto;
  padding-top: var(--tt-space-6);
  gap: var(--tt-space-3);
}

.onboarding-actions-welcome {
  padding-top: clamp(44px, 10vh, 90px);
}

.onboarding-primary {
  width: 100%;
  min-height: 52px;
  padding: 0 var(--tt-space-5);
  border: var(--tt-border-width) solid var(--tt-action);
  border-radius: var(--tt-radius-md);
  background: var(--tt-action);
  color: var(--tt-text-on-action);
  font-weight: 840;
  cursor: pointer;
}

.onboarding-form {
  display: flex;
  min-height: 100%;
  padding: 6px 0 var(--tt-space-5);
  flex-direction: column;
}

.onboarding-form .onboarding-step-copy {
  margin-top: var(--tt-space-5);
  margin-bottom: var(--tt-space-6);
}

.onboarding-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--tt-space-3);
}

.onboarding-field {
  display: grid;
  min-width: 0;
  gap: var(--tt-space-2);
  color: var(--tt-text-secondary);
  font-size: var(--tt-type-caption);
  font-weight: 760;
}

.onboarding-field-wide {
  margin-bottom: var(--tt-space-3);
}

.onboarding-city-suggestions {
  display: grid;
  margin: calc(-1 * var(--tt-space-1)) 0 var(--tt-space-4);
  gap: var(--tt-space-2);
}

.onboarding-city-suggestions > span {
  color: var(--tt-text-muted);
  font-size: var(--tt-type-micro);
  font-weight: 760;
  letter-spacing: var(--tt-tracking-label);
  text-transform: uppercase;
}

.onboarding-city-suggestions > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tt-space-2);
}

.onboarding-city-suggestions button {
  min-height: 38px;
  padding: 0 var(--tt-space-3);
  border: var(--tt-border-width) solid var(--tt-border-strong);
  border-radius: var(--tt-radius-pill);
  background: var(--tt-surface-sunken);
  color: var(--tt-text-secondary);
  font-size: var(--tt-type-caption);
  font-weight: 720;
  cursor: pointer;
}

.onboarding-field input {
  width: 100%;
  min-width: 0;
  min-height: 50px;
  padding: 0 var(--tt-space-3);
  border: var(--tt-border-width) solid var(--tt-border-strong);
  border-radius: var(--tt-radius-sm);
  background: var(--tt-surface-elevated);
  color: var(--tt-text-primary);
  font-size: var(--tt-type-subtitle);
  font-weight: 700;
}

.onboarding-return-unknown {
  display: flex;
  min-height: 52px;
  padding: var(--tt-space-3) 0;
  align-items: flex-start;
  gap: var(--tt-space-3);
  cursor: pointer;
}

.onboarding-return-unknown input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--tt-action);
}

.onboarding-return-unknown span {
  display: grid;
  gap: 3px;
}

.onboarding-return-unknown strong {
  color: var(--tt-text-primary);
  font-size: var(--tt-type-body);
}

.onboarding-return-unknown small {
  color: var(--tt-text-secondary);
  font-size: var(--tt-type-caption);
}

.onboarding-input-unit {
  position: relative;
  display: block;
}

.onboarding-input-unit input {
  padding-right: 54px;
}

.onboarding-input-unit small {
  position: absolute;
  top: 50%;
  right: var(--tt-space-3);
  color: var(--tt-text-muted);
  font-size: var(--tt-type-caption);
  transform: translateY(-50%);
  pointer-events: none;
}

.onboarding-overnight {
  display: flex;
  margin: var(--tt-space-3) 0 0;
  align-items: center;
  gap: var(--tt-space-2);
  color: var(--tt-info);
  font-size: var(--tt-type-caption);
  font-weight: 700;
}

.onboarding-overnight[hidden] {
  display: none;
}

.onboarding-breaks {
  margin-top: var(--tt-space-6);
  padding-top: var(--tt-space-4);
  border-top: var(--tt-border-width) solid var(--tt-border);
}

.onboarding-subheading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tt-space-3);
}

.onboarding-subheading h2 {
  margin: 0;
  font-size: var(--tt-type-subtitle);
}

.onboarding-subheading button {
  display: inline-flex;
  min-height: 44px;
  padding: 0 var(--tt-space-3);
  border: var(--tt-border-width) solid var(--tt-border-strong);
  border-radius: var(--tt-radius-sm);
  background: var(--tt-surface);
  color: var(--tt-text-primary);
  align-items: center;
  gap: var(--tt-space-2);
  font-size: var(--tt-type-caption);
  font-weight: 760;
  cursor: pointer;
}

.onboarding-breaks .schedule-break-list {
  margin-top: var(--tt-space-3);
}

.onboarding-more {
  margin-top: var(--tt-space-5);
  padding: var(--tt-space-3) var(--tt-space-4);
  border: var(--tt-border-width) solid var(--tt-border);
  border-radius: var(--tt-radius-sm);
  background: var(--tt-surface-sunken);
}

.onboarding-more summary {
  min-height: 44px;
  color: var(--tt-text-primary);
  font-size: var(--tt-type-body);
  font-weight: 780;
  cursor: pointer;
  line-height: 44px;
}

.onboarding-more > p {
  margin: 0 0 var(--tt-space-4);
  color: var(--tt-text-muted);
  font-size: var(--tt-type-caption);
  line-height: 1.45;
}

.onboarding-error {
  min-height: 20px;
  margin: var(--tt-space-3) 0 0;
  color: var(--tt-error);
  font-size: var(--tt-type-caption);
  font-weight: 720;
}

.onboarding-final-actions {
  display: grid;
  margin-top: var(--tt-space-4);
  padding-top: 0;
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
  gap: var(--tt-space-3);
}

.onboarding-demo-choice {
  display: grid;
  padding-top: var(--tt-space-3);
  border-top: var(--tt-border-width) solid var(--tt-border);
  gap: var(--tt-space-3);
}

.onboarding-demo-choice p {
  margin: 0;
  color: var(--tt-text-secondary);
  font-size: var(--tt-type-caption);
  line-height: 1.45;
}

.onboarding-secondary,
.onboarding-tertiary {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--tt-space-4);
  border-radius: var(--tt-radius-md);
  font-weight: 780;
  cursor: pointer;
}

.onboarding-secondary {
  border: var(--tt-border-width) solid var(--tt-border-strong);
  background: var(--tt-surface-elevated);
  color: var(--tt-text-primary);
}

.onboarding-tertiary {
  border: 0;
  background: transparent;
  color: var(--tt-text-secondary);
}

.demo-mode-banner {
  display: flex;
  margin: var(--tt-space-3) var(--tt-space-3) 0;
  padding: var(--tt-space-3);
  border: var(--tt-border-width) solid color-mix(in srgb, var(--tt-action) 44%, var(--tt-border));
  border-radius: var(--tt-radius-md);
  background: var(--tt-action-soft);
  align-items: center;
  justify-content: space-between;
  gap: var(--tt-space-3);
}

.demo-mode-banner > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.demo-mode-banner strong {
  color: var(--tt-text-primary);
  font-size: var(--tt-type-micro);
  letter-spacing: var(--tt-tracking-label);
}

.demo-mode-banner span {
  color: var(--tt-text-secondary);
  font-size: var(--tt-type-micro);
  line-height: 1.35;
}

.demo-mode-banner button {
  min-height: 40px;
  padding: 0 var(--tt-space-3);
  border: 0;
  border-radius: var(--tt-radius-sm);
  background: var(--tt-surface-inverse);
  color: var(--tt-text-inverse);
  flex: none;
  font-size: var(--tt-type-micro);
  font-weight: 780;
  cursor: pointer;
}

.onboarding-connection-page .onboarding-frame {
  justify-content: center;
}

.onboarding-connection {
  display: grid;
  padding: var(--tt-space-7) 0;
  justify-items: start;
}

.onboarding-connection h1 {
  margin-top: var(--tt-space-6);
}

.onboarding-connection .onboarding-primary {
  margin-top: var(--tt-space-7);
}

.first-turnus-form.is-standalone {
  min-height: auto;
  padding: 0;
}

.first-turnus-form.is-standalone .onboarding-field input {
  background: var(--tt-surface-sunken);
}

.first-turnus-form.is-standalone .sheet-actions {
  margin-top: var(--tt-space-3);
}

.guided-empty-state {
  display: grid;
  padding: var(--tt-space-6) var(--tt-space-5);
  border: var(--tt-border-width) solid var(--tt-border);
  border-radius: var(--tt-radius-md);
  background: var(--tt-surface);
  gap: var(--tt-space-3);
}

.guided-empty-state h3,
.guided-empty-state p {
  margin: 0;
}

.guided-empty-state h3 {
  font-size: var(--tt-type-title);
  letter-spacing: -0.025em;
}

.guided-empty-state p {
  max-width: 48ch;
  color: var(--tt-text-secondary);
  font-size: var(--tt-type-body);
  line-height: 1.5;
}

.guided-empty-actions {
  display: flex;
  margin-top: var(--tt-space-2);
  flex-wrap: wrap;
  gap: var(--tt-space-2);
}

.guided-empty-actions button {
  min-height: 44px;
}

.calendar-first-run-note {
  display: flex;
  min-height: 44px;
  padding: var(--tt-space-2) var(--tt-space-3);
  border: var(--tt-border-width) solid var(--tt-border);
  border-radius: var(--tt-radius-sm);
  background: var(--tt-surface-sunken);
  align-items: center;
  justify-content: space-between;
  gap: var(--tt-space-3);
  color: var(--tt-text-secondary);
  font-size: var(--tt-type-caption);
  line-height: 1.35;
}

.calendar-first-run-note span {
  display: flex;
  align-items: center;
  gap: var(--tt-space-2);
}

.calendar-first-run-note button {
  min-width: 44px;
  min-height: 36px;
  padding: 0 var(--tt-space-2);
  border: 0;
  background: transparent;
  color: var(--tt-action);
  font-size: var(--tt-type-caption);
  font-weight: 760;
  cursor: pointer;
}

.calendar-empty-note {
  display: flex;
  padding: var(--tt-space-3);
  border-left: var(--tt-border-width-strong) solid var(--tt-action);
  background: var(--tt-surface-sunken);
  align-items: center;
  justify-content: space-between;
  gap: var(--tt-space-3);
}

.calendar-empty-note div {
  display: grid;
  gap: 3px;
}

.calendar-empty-note strong {
  font-size: var(--tt-type-body);
}

.calendar-empty-note small {
  color: var(--tt-text-muted);
  font-size: var(--tt-type-caption);
}

.calendar-empty-note button {
  min-height: 40px;
  flex: none;
}

.finance-empty-state {
  margin-top: var(--tt-space-4);
  padding: var(--tt-space-4);
  border: var(--tt-border-width) solid var(--tt-border);
  border-radius: var(--tt-radius-sm);
  background: var(--tt-surface-sunken);
  color: var(--tt-text-secondary);
  font-size: var(--tt-type-body);
  line-height: 1.45;
}

@media (max-width: 430px) {
  .onboarding-page {
    padding-right: 14px;
    padding-left: 14px;
  }

  .onboarding-header {
    gap: var(--tt-space-2);
  }

  .onboarding-skip {
    max-width: 92px;
    line-height: 1.2;
  }

  .product-tour-header {
    grid-template-columns: minmax(104px, 1fr) auto minmax(64px, 1fr);
    gap: var(--tt-space-2);
  }

  .product-tour-brand > span {
    width: 28px;
    height: 28px;
  }

  .product-tour-content {
    min-height: 0;
    padding-top: 4px;
    grid-template-rows: minmax(210px, 1fr) auto;
    gap: var(--tt-space-5);
  }

  .product-tour-demo-stage {
    min-height: 210px;
  }

  .product-tour-demo {
    border-radius: var(--tt-radius-md);
  }

  .product-tour-calendar-demo {
    padding: var(--tt-space-3);
  }

  .product-tour-calendar-day {
    height: 61px;
  }

  .product-tour-copy h1 {
    font-size: clamp(1.75rem, 7.7vw, 2.1rem);
  }

  .product-tour-copy p {
    font-size: 0.84rem;
  }

  .product-tour-footer {
    padding-top: var(--tt-space-2);
    gap: var(--tt-space-3);
  }

  .product-tour-actions {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .product-tour-turnus-stats {
    gap: var(--tt-space-2);
  }

  .product-tour-turnus-stats strong {
    max-width: 132px;
  }

  .onboarding-copy,
  .onboarding-step-copy {
    margin-top: var(--tt-space-6);
  }

  .onboarding-form .onboarding-step-copy {
    margin-bottom: var(--tt-space-5);
  }

  .onboarding-field-grid {
    gap: 10px;
  }

  .demo-mode-banner {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 370px) {
  .onboarding-field-grid:not(.onboarding-date-grid) {
    grid-template-columns: 1fr;
  }

  .schedule-break-row {
    grid-template-columns: minmax(70px, 1fr) 12px minmax(70px, 1fr) 42px;
  }
}

@media (min-width: 700px) {
  .onboarding-form {
    padding-bottom: var(--tt-space-8);
  }

  .onboarding-actions {
    justify-content: flex-end;
  }

  .onboarding-primary {
    width: auto;
    min-width: 220px;
  }

  .onboarding-final-actions .onboarding-primary {
    width: 100%;
  }

  .onboarding-actions-welcome {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .onboarding-content,
  .onboarding-progress > span,
  .product-tour-content,
  .product-tour-dots span,
  .product-tour-calendar-day,
  .product-tour-confirmation,
  .product-tour-live-amount span,
  .product-tour-live-progress span,
  .product-tour-turnus-progress span,
  .product-tour-turnus-stats i,
  .product-tour-turnus-stats strong {
    animation: none;
    transition: none;
  }

  .product-tour-touch {
    display: none;
  }

  .product-tour-calendar-day.is-painted {
    border-color: var(--tt-state-work);
    background: var(--tt-state-work);
  }

  .product-tour-confirmation {
    opacity: 1;
    transform: none;
  }

  .product-tour-live-amount span {
    opacity: 0;
  }

  .product-tour-live-amount span:last-child,
  .product-tour-turnus-stats i:last-child {
    opacity: 1;
  }

  .product-tour-live-progress span {
    transform: scaleX(0.68);
  }

  .product-tour-turnus-progress span {
    transform: scaleX(1);
  }

  .product-tour-turnus-stats i:first-child {
    opacity: 0;
  }
}