*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 7rem; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--color-moos);
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 100, "WONK" 0;
  font-weight: 540;
  letter-spacing: -0.015em;
  line-height: 1.14;
}

/* Long German words would overflow on phones; larger screens keep whole words. */
@media (max-width: 23em) { h1, h2, h3 { hyphens: auto; } }

p { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--color-oliv); text-underline-offset: 0.18em; }
a:hover { color: var(--color-moos); }
address { font-style: normal; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }

:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: 4px; }
main:focus { outline: none; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -5rem;
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--color-moos);
  color: var(--color-on-dark);
  border-radius: var(--radius-sm);
}
.skip-link:focus { top: var(--space-4); color: var(--color-on-dark); }

.icon {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--lg { width: 1.6em; height: 1.6em; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}