@font-face {
  font-family: "SelectaVFI_Upright";
  src: url("https://website.zde.zuerich/assets/fonts/SelectaVFI_Upright..woff2")
      format("woff2"),
    url("https://website.zde.zuerich/assets/fonts/SelectaVFI_Upright.ttf")
      format("truetype");
  font-display: swap;
  font-weight: 100 900;
  font-style: normal;
}

/* For browsers that support clamp  */
@supports (font-size: clamp(1rem, 1vi, 1rem)) {
  :root {
    --fs-sm: clamp(1.16rem, 0.11vi + 1.13rem, 1rem);
    --fs-base: clamp(1.38rem, 0.45vi + 1.26rem, 1.63rem);
    --fs-md: clamp(1.63rem, 0.98vi + 1.39rem, 2.17rem);
    --fs-lg: clamp(1.93rem, 1.74vi + 1.5rem, 2.89rem);
    --fs-xl: clamp(2.29rem, 2.84vi + 1.58rem, 3.85rem);
    --fs-xxl: clamp(2.71rem, 4.4vi + 1.61rem, 5.13rem);
    --fs-xxxl: clamp(3.21rem, 6.59vi + 1.56rem, 6.84rem);
  }
}

/* For browsers that don't support clamp */
@supports not (font-size: clamp(1rem, 1vi, 1rem)) {
  :root {
    --fs-sm: 1rem;
    --fs-base: 1.38rem;
    --fs-md: 1.63rem;
    --fs-lg: 1.93rem;
    --fs-xl: 2.29rem;
    --fs-xxl: 2.71rem;
    --fs-xxxl: 3.21rem;
  }

  @media screen and (min-width: 1280px) {
    :root {
      --fs-sm: 1rem;
      --fs-base: 1.63rem;
      --fs-md: 2.17rem;
      --fs-lg: 2.89rem;
      --fs-xl: 3.85rem;
      --fs-xxl: 5.13rem;
      --fs-xxxl: 6.84rem;
    }
  }
}

:root {
  --fw-h1-base: 470;
  --fw-h2-base: 470;
  --fw-h3-base: 470;
  --fw-h4-base: 470;
  --fw-h5-base: 470;
  --fw-h6-base: 470;
  --fw-text-base: 415;

  --fw-difference: 40;

  --fw-h1: var(--fw-h1-base);
  --fw-h2: var(--fw-h2-base);
  --fw-h3: var(--fw-h3-base);
  --fw-h4: var(--fw-h4-base);
  --fw-h5: var(--fw-h5-base);
  --fw-h6: var(--fw-h6-base);
  --fw-text: var(--fw-text-base);

  font-feature-settings: "ss02";
}

.dark-mode,
.dark {
  --fw-h1: calc(var(--fw-h1-base) - var(--fw-difference));
  --fw-h2: calc(var(--fw-h2-base) - var(--fw-difference));
  --fw-h3: calc(var(--fw-h3-base) - var(--fw-difference));
  --fw-h4: calc(var(--fw-h4-base) - var(--fw-difference));
  --fw-h5: calc(var(--fw-h5-base) - var(--fw-difference));
  --fw-h6: calc(var(--fw-h6-base) - var(--fw-difference));
  --fw-text: calc(var(--fw-text-base) - var(--fw-difference));
}

html {
  font-size: 100%;
}

body {
  font-family: "SelectaVFI_Upright";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 1em 0 0.5em 0;
}

.interactive h1,
.interactive h2,
.interactive h3 {
  max-width: 24ch;
}

p + p {
  margin: 0.5em 0 0 0;
}

p {
  letter-spacing: 2%;
}

ul {
  margin: 1em 0;
}

h1 {
  font-size: var(--fs-xxxl);
  font-weight: var(--fw-h1);
  line-height: 1;
}

h2 {
  font-size: var(--fs-xxl);
  font-weight: var(--fw-h2);
  line-height: 1.05;
}

h3 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-h3);
  line-height: 1.05;
}

h4 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-h4);
  line-height: 1.2;
}

h5 {
  font-size: var(--fs-md);
  font-weight: var(--fw-h5);
  line-height: 1.15;
}

h6 {
  font-size: var(--fs-base);
  font-weight: var(--fw-h6);
  line-height: 1.15;
}

p,
ul,
a {
  font-size: var(--fs-base);
  font-weight: var(--fw-text);
  line-height: 1.1;
}

a:hover {
  color: var(--main-color);
}

a.link-small {
  font-size: var(--fs-sm);
  font-weight: var(--fw-text);
}

.dark a:hover {
  color: var(--main-color-bright);
}

small,
.small {
  font-size: var(--fs-sm);
}

.hyphens {
  hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  -webkit-hyphenate-limit-after: 2;
  -webkit-hyphenate-limit-before: 3;
}

.text-align-center {
  text-align: center;
}

.text-align-left {
  text-align: left;
}

.text-align-right {
  text-align: right;
}

mark {
  background-color: transparent;
  color: var(--main-color-bright);
}

address {
  font-style: normal;
}

address > p {
  margin: 0;
}

footer * {
  font-size: 1rem;
}

hgroup > *,
button h1,
button h2,
button h3,
button h4,
button h5,
button h6,
button p {
  margin: 0 0 0 0;
}

h4 {
  hyphens: auto;
}