:root {
  --osmium-gruen: #064a1d;
  --osmium-gruen-tief: #053b17;
  --osmium-sand: #efe6d6;
  --osmium-sand-hell: #f7f2e9;
  --osmium-messing: #B09D51;
  --osmium-messing-hell: #d3c385;
  --osmium-kastanie: #8a4b2f;
  --osmium-tinte: #13201a;
  --osmium-weiss: #ffffff;
  --osmium-linie: rgba(19, 32, 26, 0.14);
  --osmium-shadow-soft: 0 18px 40px -18px rgba(13, 44, 29, 0.35);
  --osmium-section-space: clamp(4rem, 8vw, 6rem);
}

html {
  scroll-behavior: smooth;
}

body {
  color: var(--osmium-tinte);
  overflow-x: hidden;
}

::selection {
  background: var(--osmium-messing);
  color: var(--osmium-gruen-tief);
}

a {
  color: var(--osmium-gruen);
}

:focus-visible {
  outline: 3px solid var(--osmium-messing);
  outline-offset: 3px;
  border-radius: 2px;
}

.osmium-section {
  padding: var(--osmium-section-space) 0;
}

.osmium-section--sand {
  background: var(--osmium-sand-hell);
}

.osmium-btn {
  border: none;
  border-radius: 0;
  background: var(--osmium-messing);
  color: var(--osmium-weiss);
  line-height: inherit;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.65rem 1.4rem;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 0.15s ease, background 0.15s ease;
}

.osmium-btn:hover,
.osmium-btn:focus-visible {
  background: var(--osmium-messing-hell);
  color: var(--osmium-gruen-tief);
  transform: translateY(-2px);
}

.osmium-btn-outline-sand {
  border: 2px solid var(--osmium-sand-hell);
  border-radius: 0;
  color: var(--osmium-sand-hell);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.65rem 1.4rem;
  text-decoration: none;
  text-transform: uppercase;
}

a.osmium-btn-outline-sand:hover,
a.osmium-btn-outline-sand:focus-visible {
  background: var(--osmium-sand-hell);
  color: var(--osmium-gruen-tief);
}

.osmium-btn-outline-dark {
  border: 2px solid var(--osmium-tinte);
  border-radius: 0;
  color: var(--osmium-tinte);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.65rem 1.4rem;
  text-decoration: none;
  text-transform: uppercase;
}

.osmium-btn-outline-dark:hover,
.osmium-btn-outline-dark:focus-visible {
  background: var(--osmium-tinte);
  color: var(--osmium-sand-hell);
}

.osmium-btn-lg {
  font-size: 0.95rem;
  padding: 0.8rem 1.8rem;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }

  html {
    scroll-behavior: auto;
  }
}