@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("fonts/open-sans-var.woff2") format("woff2");
}
:root {
  color-scheme: light;
  --blau: #3f71ad;
  --blau-text: #1d508b;
  --blau-tief: #0b3069;
  --blau-flaeche: #e8eff7;
  --aktion: #3f71ad;
  --aktion-druck: #1d508b;
  --grund: #eef1f6;
  --flaeche: #ffffff;
  --flaeche-tief: #f4f6fa;
  --nav: #17385f;
  --nav-tief: #102943;
  --nav-tinte: #ffffff;
  --nav-tinte-leise: #b9cadd;
  --nav-linie: rgba(255, 255, 255, .13);
  --rand-fein: #e4e8ee;
  --rand: #d8dee6;
  --rand-stark: #bfc8d3;
  --tinte: #2f363c;
  --tinte-leise: #59636e;
  --tinte-still: #656e78;
  --takt-1: 0.5rem;
  --takt-2: 1rem;
  --takt-3: 2rem;
  --takt-4: 4rem;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Open Sans", system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(1rem, 0.97rem + 0.15vw, 1.075rem);
  line-height: 1.65;
  color: var(--tinte);
  background: var(--flaeche);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-weight: 700; line-height: 1.14; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--blau-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--blau-tief); }
::selection { background: var(--blau-flaeche); color: var(--blau-tief); }
:focus-visible { outline: 2px solid var(--blau); outline-offset: 3px; border-radius: 2px; }
* { scrollbar-color: var(--rand-stark) transparent; }
.nur-lesend {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.sprung {
  position: fixed; top: 0; left: 50%; translate: -50% -120%; z-index: 90;
  padding: var(--takt-1) var(--takt-3);
  background: var(--aktion); color: #fff; font-weight: 700; text-decoration: none;
  border-radius: 0 0 4px 4px;
  transition: translate 160ms var(--ease);
}
.sprung:focus-visible { translate: -50% 0; color: #fff; }
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--takt-1);
  font: inherit; font-weight: 700; line-height: 1.2;
  padding: 0.8em 1.5em;
  border: 1px solid transparent; border-radius: 3px;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background 140ms var(--ease), border-color 140ms var(--ease), translate 100ms var(--ease);
}
.knopf--voll { background: var(--aktion); color: #fff; }
.knopf--voll:hover { background: var(--aktion-druck); color: #fff; }
.knopf--voll:active { translate: 0 1px; }
.knopf--rand { border-color: var(--rand-stark); color: var(--blau-text); background: transparent; }
.knopf--rand:hover { border-color: var(--blau); background: var(--flaeche-tief); color: var(--blau-text); }
.knopf--hell { border-color: rgba(255,255,255,.45); color: #fff; background: transparent; }
.knopf--hell:hover { background: rgba(255,255,255,.12); color: #fff; }
.knopf--auf-dunkel { background: #fff; color: var(--blau-tief); border-color: #fff; }
.knopf--auf-dunkel:hover { background: var(--blau-flaeche); color: var(--blau-tief); border-color: var(--blau-flaeche); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}