:root {
  font-size: 100%;
  /* Inhalt */
  --content: 1376px;
  --grid: 80px;
  --gap: 8px;
  /* Farben */
  --graphit-100: #4b4239;
  --graphit-40: #b3ada7;
  --graphit-30: #c3bfb7;
  --graphit-20: #d4d1c9;
  --graphit-10: #e9e7dc;
  --graphit-5: #edece4;
  --background: #f6f5ed;
  --black: #25221f;
  --hover: #77593a;
  /* Zeilenabstand */
  --lineheight-00: 90%;
  --lineheight-01: 100%;
  --lineheight-02: 120%;
  --lineheight-03: 140%;
  --lineheight-04: 160%;
  /* Laufweite */
  --letterspacing-01: 0.06rem;
  --letterspacing-02: 0.04rem;
  --letterspacing-03: 0.02rem;
  /* Radius */
  --cornerradius: 4px;
  /* Spacer */
  --spacer-8: 8px;
  --spacer-12: 12px;
  --spacer-16: 16px;
  --spacer-24: 24px;
  --spacer-32: 32px;
  --spacer-48: 48px;
  --spacer-64: 64px;
  --spacer-96: 96px;
  --spacer-128: 128px;
  --spacer-192: 192px;
}

/* Schriftgrössen */

.font-mobile-nav {
  font-size: 1.125rem;
  letter-spacing: var(--letterspacing-02);
  line-height: var(--lineheight-03);
}

.font-xs {
  font-size: 0.75rem;
  letter-spacing: var(--letterspacing-01);
  line-height: var(--lineheight-04);
}
.font-sm {
  font-size: 0.875rem;
  letter-spacing: var(--letterspacing-01);
  line-height: var(--lineheight-04);
}
.font-ss {
  font-size: 1rem;
  letter-spacing: var(--letterspacing-02);
  line-height: var(--lineheight-03);
}
.font-base {
  font-size: 1.125rem;
  letter-spacing: var(--letterspacing-02);
  line-height: var(--lineheight-03);
}
.font-xl {
  font-size: 1.25rem;
  letter-spacing: var(--letterspacing-03);
  line-height: var(--lineheight-03);
}
.font-2xl {
  font-size: 1.5rem;
  letter-spacing: var(--letterspacing-03);
  line-height: var(--lineheight-03);
}
.font-3xl {
  font-size: 1.875rem;
  line-height: var(--lineheight-02);
}
.font-4xl {
  font-size: 2.25rem;
  line-height: var(--lineheight-02);
}
.font-5xl {
  font-size: 3rem;
  line-height: var(--lineheight-01);
}
.font-6xl {
  font-size: 3.5rem;
  line-height: var(--lineheight-01);
}
.font-7xl {
  font-size: 4rem;
  line-height: var(--lineheight-01);
}
.font-8xl {
  font-size: 7rem;
  line-height: var(--lineheight-00);
}
.font-9xl {
  font-size: 8.25rem;
  line-height: var(--lineheight-00);
}

/* Schriftstile */
.font-base {
  font-weight: 300;
}
.font-semibold {
  font-weight: 600;
}
.font-bold {
  font-weight: 700;
}
.font-extrabold {
  font-weight: 800;
}

.font-uppercase {
  text-transform: uppercase;
}

/* Schriftfarbe */
.font-dark {
  color: var(--black);
}
.font-brown {
  color: var(--graphit-100);
}
.font-light {
  color: var(--graphit-5);
}

/* Abstände nach unten */
.spacer-8 {
  margin-bottom: var(--spacer-8);
}
.spacer-12 {
  margin-bottom: var(--spacer-12);
}
.spacer-16 {
  margin-bottom: var(--spacer-16);
}
.spacer-24 {
  margin-bottom: var(--spacer-24);
}
.spacer-32 {
  margin-bottom: var(--spacer-32);
}
.spacer-48 {
  margin-bottom: var(--spacer-48);
}
.spacer-64 {
  margin-bottom: var(--spacer-64);
}
.spacer-96 {
  margin-bottom: var(--spacer-96);
}
.spacer-128 {
  margin-bottom: var(--spacer-128);
}
.spacer-192 {
  margin-bottom: var(--spacer-192);
}