:root {
  --grund: #FFFFFF;
  --karte: #FFFFFF;
  --nebel: #F0F4FA;
  --tinte: #0A0D12;
  --tinte-leise: #435068;
  --linie: #E2E8F1;
  --marine: #062E63;
  --marine-tief: #031F45;
  --aktiv: #1E6BE6;
  --marine-tint: #E6EDF8;
  --nacht: #0B1220;
  --nacht-schrift: #F2F4F7;
  --nacht-leise: #A3AEC0;
  --marine-auf-nacht: #6FA3FF;
  --beispiel: #062E63;
  --schatten-farbe: 11 18 32;
  --start-text: 0.75;
  --start-leise: 0.9;
  --verlauf-quer:
    linear-gradient(
      90deg,
      rgb(var(--schatten-farbe) / .80) 0%,
      rgb(var(--schatten-farbe) / .62) 56%,
      rgb(var(--schatten-farbe) / 0) 74%);
  --verlauf-hoch:
    linear-gradient(
      0deg,
      rgb(var(--schatten-farbe) / .90) 0%,
      rgb(var(--schatten-farbe) / .66) 26%,
      rgb(var(--schatten-farbe) / 0) 52%);
  --r-1: 8px;
  --r-2: 14px;
  --r-3: 22px;
  --r-4: 32px;
  --r-rund: 999px;
  --s-1: 0 1px 2px rgb(var(--schatten-farbe) / .06), 0 2px 6px rgb(var(--schatten-farbe) / .04);
  --s-2:
    0 2px 4px rgb(var(--schatten-farbe) / .05),
    0 14px 36px -10px rgb(var(--schatten-farbe) / .14),
    inset 0 0 0 1px var(--linie);
  --s-3: 0 6px 12px rgb(var(--schatten-farbe) / .08), 0 28px 72px -16px rgb(var(--schatten-farbe) / .28);
  --kurve: cubic-bezier(0.22, 1, 0.36, 1);
  --d-1: 160ms;
  --d-2: 260ms;
  --d-3: 420ms;
  --d-4: 700ms;
  --weg-1: 8px;
  --weg-2: 24px;
  --druck: 0.97;
  --marke:
    "Montserrat",
    "Arial Black",
    Arial,
    sans-serif;
  --display:
    "Barlow Condensed",
    "Arial Narrow",
    sans-serif-condensed,
    sans-serif;
  --text:
    "Barlow",
    system-ui,
    sans-serif;
  --vw: 100vw;
  --rand: 60px;
  --abstand: 24px;
  --spalten: 12;
  --spalte: calc((var(--vw) - 2 * var(--rand) - (var(--spalten) - 1) * var(--abstand)) / var(--spalten));
  --abschnitt-y: 144px;
  --karte-pad: 32px;
  --karten-luecke: 24px;
  --r-gross: var(--r-4);
  --kopf-h: 60px;
  --kopf-oben: 16px;
}
@media (max-width: 767px) {
  :root {
    --rand: 20px;
    --abstand: 12px;
    --spalten: 4;
    --abschnitt-y: 96px;
    --karte-pad: 20px;
    --karten-luecke: 12px;
    --r-gross: 24px;
    --kopf-oben: 12px;
    --kopf-h: 56px;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --weg-1: 0px;
    --weg-2: 0px;
    --d-1: 150ms;
    --d-2: 150ms;
    --d-3: 150ms;
    --d-4: 150ms;
    --druck: 1;
  }
}