@font-face {
  font-family: 'Roboto';
  src: url('https://assets-v1.termin32.de/fonts/roboto/Roboto-Regular.woff2') format('woff2'),
  url('https://assets-v1.termin32.de/fonts/roboto/Roboto-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-cta: #66a5d8;
  --color-cta-hover: #4c96d1;
  --color-cta-text: #000000;
  --color-heading: #454545;
  --color-body-text: #000000;
  --color-bg: #ffffff;
  --color-bg-alt: #dbeaf5;
  --color-bg-alt-text: #000000;
  --font-heading: 'Roboto', Arial, sans-serif;
  --font-weight-heading: 400;
  --font-body: 'Roboto', Arial, sans-serif;
  --font-weight-body: 400;
  --color-footer-bg: #000000;
  --color-footer-text: #ffffff;
  --color-icon1: #a5cae8;
}

body {
  background-color: var(--color-bg) !important;
  color: var(--color-body-text) !important;
  font-family: var(--font-body) !important;
  font-weight: var(--font-weight-body);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading) !important;
  font-weight: var(--font-weight-heading);
  color: var(--color-heading) !important;
}

.bg-body {
  background-color: var(--color-bg) !important
}

.bg-alt {
 background-color: var(--color-bg-alt) !important
}

.bg-cta {
  background-color: var(--color-cta) !important;
  color: var(--color-cta-text) !important
}

.bg-cta:hover {
 background-color: var(--color-cta-hover) !important
}

.text-body {
  color: var(--color-body-text) !important
}

.text-heading {
  color: var(--color-heading) !important
}

.footer-bg {
  background-color: var(--color-footer-bg) !important;
  color: var(--color-footer-text) !important
}

.footer-bg a {
  color: var(--color-footer-text) !important
}

@layer base {
  * {
    font-family: var(--font-body)
  }

  body {
    @apply text-base leading-relaxed;
    background-color: var(--color-bg);
    color: var(--color-body-text)
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: var(--color-heading);
    font-family: var(--font-heading)
  }

  h1 {
    @apply text-5xl font-bold mb-4
  }

  h2 {
    @apply text-4xl font-bold
  }

  h3 {
    @apply text-3xl font-semibold mb-4
  }

  img.object-cover {
    @apply w-full h-full object-cover
  }

  footer h3 {
    color: white !important
  }
}

i[class*="fa-"] {
  --fa-primary-color: var(--color-icon1) !important;
  --fa-secondary-color: var(--color-icon2, #fff) !important;
  --fa-secondary-opacity: 0.9 !important;
  color: var(--color-icon1) !important;
  filter: grayscale(100%)
}

.bullet-icon {
  filter: none !important;
  color: var(--color-body-text) !important
}

#preferenceDiv button {
  font-size: 16px !important
}

#bannerContent {
  left: 50% !important;
  transform: translateX(-50%) !important;
  right: auto !important;
  margin: 0 !important
}

.no-scrollbar::-webkit-scrollbar {
  display: none
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none
}

.fa-calendar:after {
  color: white !important
}