:root { color-scheme: light; }

@font-face {
  font-family: "Jost*";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/jost-500-medium.woff2") format("woff2");
}
@font-face {
  font-family: "Jost*";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/jost-600-semi.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/Fraunces-VF-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html, body {
  margin: 0;
  height: 100%;
}
body {
  background: #EFA827;
  color: #1E3140;
  font-family: "Jost*", system-ui, sans-serif;
  overflow: hidden;
}
.buehne {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: clamp(1.25rem, 5vw, 3.5rem);
  flex-wrap: wrap;
  padding: 1.5rem;
  box-sizing: border-box;
}
img.kopf {
  width: clamp(190px, 32vmin, 330px);
  height: auto;
  transform: rotate(-7deg);
  pointer-events: none;
  user-select: none;
}
.text {
  text-align: center;
}
h1 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 4.5vw, 2.4rem);
  margin: 0 0 0.5rem 0;
  letter-spacing: 0.01em;
}
p.claim {
  font-size: clamp(1.1rem, 3vw, 1.45rem);
  font-weight: 500;
  margin: 0;
  opacity: 0.9;
}
nav.recht {
  margin-top: 1rem;
  font-size: 0.95rem;
}
nav.recht a {
  color: #1E3140;
  opacity: 0.75;
  text-decoration: none;
  border-bottom: 1px solid rgba(30, 49, 64, 0.35);
  margin: 0 0.55rem;
  padding-bottom: 1px;
}
nav.recht a:hover { opacity: 1; }

.motiv {
  position: fixed;
  pointer-events: none;
}
.motiv-1 { top: 4vh; left: 3vw; width: 110px; }
.motiv-2 { top: 6vh; right: 4vw; width: 120px; }
.motiv-3 { top: 46vh; left: 5vw; width: 64px; }
.motiv-4 { bottom: 6vh; left: 6vw; width: 120px; }
.motiv-5 { bottom: 8vh; right: 5vw; width: 110px; }

@media (max-width: 640px) {
  .motiv.klein-weg { display: none; }
}