@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

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

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

body {
  margin: 0;
  background: var(--off-white);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: var(--tx-body);
  line-height: var(--zh-text);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }

picture { display: block; height: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }
figure, blockquote, dl, dd { margin: 0; }

h1, h2, h3, h4 {
  font-family: var(--schrift-display);
  font-weight: var(--gw-display);
  line-height: var(--zh-eng);
  letter-spacing: -.012em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--tx-h1); }
h2 { font-size: var(--tx-h2); line-height: 1.12; }
h3 { font-size: var(--tx-h3); line-height: 1.2; }

p { margin: 0 0 1.1em; max-width: var(--breite-text); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 650; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }

a:not([class]) {
  color: var(--rot);
  text-decoration-color: var(--rot-rand);
  transition: text-decoration-color var(--zeit-schnell) var(--kurve);
}
a:not([class]):hover { text-decoration-color: currentColor; }

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

.eyebrow {
  display: block;
  font-size: var(--tx-eyebrow);
  font-weight: 700;
  letter-spacing: var(--sp-eyebrow);
  text-transform: uppercase;
  color: var(--rot);
  margin: 0 0 var(--r-4);
}
.eyebrow--leise { color: var(--text-leise); }

.lead {
  font-size: var(--tx-lead);
  line-height: 1.6;
  color: var(--text-leise);
}

.aussage {
  font-family: var(--schrift-display);
  font-size: var(--tx-h3);
  line-height: 1.35;
  font-weight: var(--gw-display-leicht);
  max-width: 34ch;
}

.huelle {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}
.huelle--eng { max-width: var(--breite-eng); }

.sektion { padding-block: var(--sektion); }
.sektion--eng { padding-block: var(--sektion-eng); }

.sektion--dunkel {
  background: var(--schwarz);
  position: relative;
  overflow: hidden;
}

.duo {
  display: grid;
  gap: clamp(var(--r-6), 3.2vw, var(--r-8));
  align-items: center;
}
@media (min-width: 900px) {
  .duo            { grid-template-columns: 1.05fr .95fr; }
  .duo--bild-links { grid-template-columns: .95fr 1.05fr; }
  .duo--versetzt > :last-child { margin-block-start: var(--r-8); }
  .duo--gleich { grid-template-columns: 1fr 1fr; align-items: start; }
}

.stapel > * + * { margin-block-start: var(--r-5); }
.stapel--eng > * + * { margin-block-start: var(--r-3); }
.stapel--weit > * + * { margin-block-start: var(--r-7); }

.satzspalten { column-gap: clamp(var(--r-6), 4vw, var(--r-9)); }
.satzspalten > * {
  margin-block: 0 var(--r-5);
  break-inside: avoid;
  max-width: none;
}
.satzspalten > :last-child { margin-block-end: 0; }
@media (min-width: 900px)  { .satzspalten { columns: 2; } }

.nur-screenreader {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.sprungmarke {
  position: absolute; left: var(--r-4); top: -100px;
  z-index: var(--z-dialog);
  background: var(--rot); color: #fff;
  padding: var(--r-3) var(--r-5);
  border-radius: var(--radius-knopf);
  font-weight: 600;
  transition: top var(--zeit) var(--kurve);
}
.sprungmarke:focus { top: var(--r-4); }

.text-rot   { color: var(--rot); }
.text-leise { color: var(--text-leise); }
.mittig     { text-align: center; margin-inline: auto; }
.mittig p   { margin-inline: auto; }

.js-auftritt [data-auftritt] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--zeit-ruhig) var(--kurve),
    transform var(--zeit-ruhig) var(--kurve);
  transition-delay: var(--auftritt-verzug, 0ms);
}
.js-auftritt [data-auftritt].ist-da { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js-auftritt [data-auftritt] { opacity: 1; transform: none; }
}