:root {
  --stadtundspiel-ink: #17231d;
  --stadtundspiel-forest: #102019;
  --stadtundspiel-forest-2: #173328;
  --stadtundspiel-green: #186c48;
  --stadtundspiel-moss: #aacc91;
  --stadtundspiel-moss-light: #dcebcf;
  --stadtundspiel-cream: #fff9ea;
  --stadtundspiel-paper: #f5efdf;
  --stadtundspiel-red: #a20103;
  --stadtundspiel-project-red: #b84a45;
  --stadtundspiel-line: rgb(23 35 29 / 16%);
  --stadtundspiel-radius-sm: 0.875rem;
  --stadtundspiel-radius: 1.5rem;
  --stadtundspiel-radius-lg: 2.25rem;
  --stadtundspiel-shadow: 0 1.25rem 4rem rgb(16 32 25 / 14%);
  --stadtundspiel-content: 88rem;
  --stadtundspiel-section-space: clamp(5rem, 9vw, 9rem);
}

html {
  overflow-x: clip;
  scroll-behavior: smooth;
}

body {
  overflow-x: clip;
}

body {
  background: var(--stadtundspiel-cream);
  color: var(--stadtundspiel-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--stadtundspiel-moss);
  color: var(--stadtundspiel-forest);
}

:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--stadtundspiel-red);
  outline-offset: 3px;
}

.stadtundspiel-icon {
  display: inline-block;
  height: 1.1em;
  pointer-events: none;
  width: 1.1em;
}

.stadtundspiel-eyebrow {
  align-items: center;
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: 600;
  gap: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.stadtundspiel-eyebrow::before {
  background: currentColor;
  content: "";
  height: 1px;
  width: 2rem;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}