/* Schriften */
@font-face {
  font-family:"Fraunces";
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url("../fonts/fraunces-var.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;
}
@font-face {
  font-family:"Fraunces Fallback";
  src:local("Georgia");
  size-adjust:105.68%;
}
@font-face {
  font-family:"Karla";
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url("../fonts/karla-var.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;
}
@font-face {
  font-family:"Karla Fallback";
  src:local("Arial");
  size-adjust:101.94%;
}
/* Farben und Abstände */
:root {
  --color-night:#12161D;
  --color-surface:#1B212B;
  --color-surface-raised:#222935;
  --color-rule:#2C3442;
  --color-mist:#9AA3B0;
  --color-light:#E9ECF1;
  --color-oxblood:#B5525B;
  --color-oxblood-deep:#93404a;
  --color-steel:#8FA9C4;
  --color-steel-soft:rgba(143, 169, 196, 0.14);
  --color-white:#FFFFFF;
  --color-alarm:#e8a0a6;
  --color-umriss:rgba(233, 236, 241, 0.3);
  --color-shade:rgba(5, 7, 10, 0.72);
  --font-display:"Fraunces", "Fraunces Fallback", Georgia, serif;
  --font-text:"Karla", "Karla Fallback", Arial, sans-serif;
  --space-xs:0.5rem;
  --space-s:0.875rem;
  --space-m:1.5rem;
  --space-l:2.5rem;
  --space-xl:4rem;
  --space-xxl:6.5rem;
  --space-gutter:clamp(1rem, 4vw, 2.5rem);
  --space-wrap:1240px;
  --space-offset:10px;
  --space-reach:38px;
  --space-kopf:72px;
  --shadow-soft:0 14px 30px -14px rgba(5, 7, 10, 0.75);
  --radius-button:8px;
  --radius-chip:999px;
  --radius-field:4px;
}
/* Grundlage */
*, *::before, *::after {
  box-sizing:border-box;
}
html {
  background:var(--color-night);
  color:var(--color-light);
  -webkit-text-size-adjust:100%;
  scroll-padding-top:calc(var(--space-kopf) + 16px);
}
body {
  margin:0;
  font-family:var(--font-text);
  font-size:1.0625rem;
  line-height:1.65;
  background:var(--color-night);
  color:var(--color-light);
}
img {
  display:block;
  max-width:100%;
  height:auto;
}
[hidden][hidden] {
  display:none;
}
h1, h2, h3, h4 {
  margin:0 0 var(--space-s);
  font-family:var(--font-display);
  font-weight:500;
  line-height:1.15;
  letter-spacing:-0.015em;
  color:var(--color-light);
  overflow-wrap:break-word;
}
h1 {
  font-size:clamp(2rem, 1.45rem + 1.8vw, 3rem);
}
h2 {
  font-size:clamp(1.3rem, 1.05rem + 0.9vw, 1.8rem);
  text-transform:uppercase;
  letter-spacing:-0.005em;
  hyphens:auto;
}
h3 {
  font-size:1.2rem;
}
p, ul, ol, dl, table, blockquote, figure {
  margin:0 0 var(--space-s);
}
ul, ol {
  padding-left:1.2rem;
}
a {
  color:var(--color-steel);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
a:hover {
  color:var(--color-light);
}
strong {
  font-weight:700;
}
:focus-visible {
  outline:2px solid var(--color-steel);
  outline-offset:3px;
}
button, input, select, textarea {
  font:inherit;
  color:inherit;
}
.fw-sr {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .fw-lage, .fw-knopf, .fw-pill-knopf, .fw-toast, .pill-fw {
    transition:none;
  }
}