/*
 * Grundlage der Dokumente mit body.ts-body – die Arbeitsfläche des Studios und die öffentliche Reiseseite (die
 * Vorschau des Studios ist dieselbe Seite). Werte aus tokens.css. Vorher Abschnitte 1–2 von studio.css (bis 0.642).
 */

@keyframes ts-toast-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}
@keyframes ts-pulse {
  50% {
    opacity: 0.3;
  }
}

/* =================================================================================================================
   2 Base
   ================================================================================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}
/* An app, not a document: no rubber-band at the page edges, so header, sidebar and step bar stay put. */
html:has(> body.ts-body),
body.ts-body {
  overscroll-behavior: none;
}
body.ts-body {
  background: var(--tu-mist);
  color: var(--tu-text);
  font-family: var(--tu-font);
  font-size: var(--ts-text-md);
  line-height: 1.5;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}
.ts-body h1,
.ts-body h2,
.ts-body h3 {
  color: var(--tu-ink);
  line-height: 1.25;
  margin: 0;
}
.ts-body p {
  margin: 0;
}
:where(.ts-body) a {
  color: inherit;
}
.ts-body :focus-visible {
  border-radius: var(--tu-radius-sm);
  box-shadow: var(--ts-ring);
  outline: 0;
}
/* Text entry shows its own calm frame (fields, rich editor – see below), not the keyboard ring. */
.ts-body :where(input, textarea, select, [contenteditable="true"]):focus-visible {
  box-shadow: none;
}
.ts-body [hidden] {
  display: none !important;
}
.ts-icon {
  fill: none;
  flex: 0 0 auto;
  height: 18px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 18px;
}
.ts-visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
.ts-skip-link {
  background: var(--tu-ink);
  border-radius: var(--tu-radius-sm);
  color: var(--tu-on-dark);
  left: var(--tu-space-4);
  padding: var(--tu-space-2) var(--tu-space-4);
  position: fixed;
  top: -60px;
  z-index: 100;
}
.ts-skip-link:focus {
  top: var(--tu-space-4);
}
.ts-reduce-motion *,
.ts-reduce-motion *::before,
.ts-reduce-motion *::after {
  animation-duration: 0.01ms !important;
  transition-duration: 0.01ms !important;
}
@media (prefers-reduced-motion: reduce) {
  .ts-body *,
  .ts-body *::before,
  .ts-body *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}