@font-face { font-family: Inter; font-style: normal; font-weight: 400; font-display: swap;
             src: url(../schriften/Inter-400.woff2) format("woff2"); }
@font-face { font-family: Inter; font-style: normal; font-weight: 500; font-display: swap;
             src: url(../schriften/Inter-500.woff2) format("woff2"); }
@font-face { font-family: Inter; font-style: normal; font-weight: 600; font-display: swap;
             src: url(../schriften/Inter-600.woff2) format("woff2"); }
@font-face { font-family: Inter; font-style: normal; font-weight: 700; font-display: swap;
             src: url(../schriften/Inter-700.woff2) format("woff2"); }
@font-face { font-family: Inter; font-style: normal; font-weight: 800; font-display: swap;
             src: url(../schriften/Inter-800.woff2) format("woff2"); }

html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, strong, b, em, i,
ul, ol, li, fieldset, form, label, legend, article, aside, canvas, figure,
footer, header, nav, section, video, button, input {
  font: inherit;
  vertical-align: baseline;
  border: 0;
  margin: 0;
  padding: 0;
  font-size: 100%;
}
ul, ol { list-style: none; }
img {
  border-style: none;
  max-width: 100%;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}
button { background-color: var(--farbe-klar); border: none; outline: 0; margin: 0; padding: 0; }
input { box-shadow: none; background-color: var(--farbe-klar); background-image: none;
        border: none; outline: 0; padding: 0; }
a { color: inherit; text-decoration: inherit; background-color: var(--farbe-klar); }
*, *::before, *::after { box-sizing: border-box; }

html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  background-color: var(--farbe-weiss);
  height: 100%;
  font-family: Inter, sans-serif;
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  scroll-behavior: smooth;
}

body {
  color: var(--farbe-tinte);
  --oberer-balken: 20px;
  background: var(--farbe-weiss);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  position: relative;
}
@media screen and (width >= 1025px) { body { --oberer-balken: 48px; } }
@media screen and (width >= 1025px) { html { font-size: 7.5px; } }

body b, body strong { font-weight: 600; }

.seite { isolation: isolate; width: 100%; height: 100%; }

body { --behaelter-breite: min(100% - 4rem, 40rem); }
@media screen and (width >= 641px) { body { --behaelter-breite: min(100% - 8rem, 86rem); } }
@media screen and (width >= 1025px) { body { --behaelter-breite: min(100% - 64px, 1180px); } }
@media screen and (width >= 1441px) { body { --behaelter-breite: 1240px; } }
@media screen and (width >= 1729px) { body { --behaelter-breite: 1320px; } }

.behaelter {
  width: var(--behaelter-breite);
  margin-left: auto;
  margin-right: auto;
}

.raster { display: flex; flex-direction: column; }
@media screen and (width >= 1025px) {
  .raster {
    display: grid;
    grid-template-columns: repeat(var(--raster-spalten), 1fr);
    gap: var(--raster-abstand);
    padding: 0;
  }
}

.nur-vorlesen {
  white-space: nowrap;
  clip: rect(0, 0, 0, 0);
  border-width: 0;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  position: absolute;
  overflow: hidden;
}

@media screen and (width >= 1025px) { .nur-mobil   { display: none; } }
@media screen and (width <= 1024px) { .nur-desktop { display: none; } }

.haupt .abschnitt          { margin: 11rem 0; position: relative; }
@media screen and (width >= 1025px) { .haupt .abschnitt { margin: 14rem 0; } }
@media screen and (width >= 1729px) { .haupt .abschnitt { margin: 17rem 0; } }

.haupt > :last-child { margin-bottom: 6rem; }
@media screen and (width >= 1025px) { .haupt > :last-child { margin-bottom: 9rem; } }
@media screen and (width >= 1441px) { .haupt > :last-child { margin-bottom: 14rem; } }
@media screen and (width >= 1729px) { .haupt > :last-child { margin-bottom: 18rem; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
}