.glide {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}
.glide * {
  box-sizing: inherit;
}
.glide__track {
  overflow: hidden;
}
.glide__slides {
  position: relative;
  width: 100%;
  list-style: none;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  touch-action: pan-Y;
  overflow: hidden;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  display: flex;
  flex-wrap: nowrap;
  will-change: transform;
}
.glide__slides--dragging {
  user-select: none;
}
.glide__slide {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  white-space: normal;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.glide__slide a {
  user-select: none;
  -webkit-user-drag: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.glide__arrows {
  -webkit-touch-callout: none;
  user-select: none;
}
.glide__bullets {
  -webkit-touch-callout: none;
  user-select: none;
}
.glide--rtl {
  direction: rtl;
}

.font-weight-thin,
.font-weight-100,
.font-thin,
.font-100 {
  font-weight: 100;
}

.font-weight-extra-light,
.font-weight-200,
.font-extra-light,
.font-200 {
  font-weight: 200;
}

.font-weight-light,
.font-weight-300,
.font-light,
.font-300 {
  font-weight: 300;
}

.font-weight-regular,
.font-weight-400,
.font-regular,
.font-400 {
  font-weight: 400;
}

.font-weight-medium,
.font-weight-500,
.font-medium,
.font-500 {
  font-weight: 500;
}

.font-weight-semi-bold,
.font-weight-600,
.font-semi-bold,
.font-600 {
  font-weight: 600;
}

.font-weight-bold,
.font-weight-700,
.font-bold,
.font-700 {
  font-weight: 700;
}

.font-weight-extra-bold,
.font-weight-800,
.font-extra-bold,
.font-800 {
  font-weight: 800;
}

.font-weight-black,
.font-weight-900,
.font-black,
.font-900 {
  font-weight: 900;
}

.font-weight-extra-black,
.font-weight-950,
.font-extra-black,
.font-950 {
  font-weight: 950;
}

.font-normal,
.font-style-normal {
  font-style: normal;
}

.font-italic,
.font-style-italic {
  font-style: italic;
}

.font-none,
.text-transform-none {
  text-transform: none;
}

.font-lowercase,
.text-transform-lowercase {
  text-transform: lowercase;
}

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

.font-capitalize,
.text-transform-capitalize {
  text-transform: capitalize;
}

.font-0-1-rem,
.font-size-0-1-rem {
  font-size: 0.1rem;
}

.font-0-2-rem,
.font-size-0-2-rem {
  font-size: 0.2rem;
}

.font-0-3-rem,
.font-size-0-3-rem {
  font-size: 0.3rem;
}

.font-0-4-rem,
.font-size-0-4-rem {
  font-size: 0.4rem;
}

.font-0-5-rem,
.font-size-0-5-rem {
  font-size: 0.5rem;
}

.font-0-6-rem,
.font-size-0-6-rem {
  font-size: 0.6rem;
}

.font-0-7-rem,
.font-size-0-7-rem {
  font-size: 0.7rem;
}

.font-0-8-rem,
.font-size-0-8-rem {
  font-size: 0.8rem;
}

.font-0-9-rem,
.font-size-0-9-rem {
  font-size: 0.9rem;
}

.font-1-rem,
.font-size-1-rem {
  font-size: 1rem;
}

.font-1-0-rem,
.font-size-1-0-rem {
  font-size: 1rem;
}

.font-1-1-rem,
.font-size-1-1-rem {
  font-size: 1.1rem;
}

.font-1-2-rem,
.font-size-1-2-rem {
  font-size: 1.2rem;
}

.font-1-3-rem,
.font-size-1-3-rem {
  font-size: 1.3rem;
}

.font-1-4-rem,
.font-size-1-4-rem {
  font-size: 1.4rem;
}

.font-1-5-rem,
.font-size-1-5-rem {
  font-size: 1.5rem;
}

.font-1-6-rem,
.font-size-1-6-rem {
  font-size: 1.6rem;
}

.font-1-7-rem,
.font-size-1-7-rem {
  font-size: 1.7rem;
}

.font-1-8-rem,
.font-size-1-8-rem {
  font-size: 1.8rem;
}

.font-1-9-rem,
.font-size-1-9-rem {
  font-size: 1.9rem;
}

.font-2-rem,
.font-size-2-rem {
  font-size: 2rem;
}

.font-2-0-rem,
.font-size-2-0-rem {
  font-size: 2rem;
}

.font-2-1-rem,
.font-size-2-1-rem {
  font-size: 2.1rem;
}

.font-2-2-rem,
.font-size-2-2-rem {
  font-size: 2.2rem;
}

.font-2-3-rem,
.font-size-2-3-rem {
  font-size: 2.3rem;
}

.font-2-4-rem,
.font-size-2-4-rem {
  font-size: 2.4rem;
}

.font-2-5-rem,
.font-size-2-5-rem {
  font-size: 2.5rem;
}

.font-2-6-rem,
.font-size-2-6-rem {
  font-size: 2.6rem;
}

.font-2-7-rem,
.font-size-2-7-rem {
  font-size: 2.7rem;
}

.font-2-8-rem,
.font-size-2-8-rem {
  font-size: 2.8rem;
}

.font-2-9-rem,
.font-size-2-9-rem {
  font-size: 2.9rem;
}

.font-3-rem,
.font-size-3-rem {
  font-size: 3rem;
}

.font-3-0-rem,
.font-size-3-0-rem {
  font-size: 3rem;
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 900;
  src: url("/fonts/roboto/Roboto-Black.ttf");
}
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 900;
  src: url("/fonts/roboto/Roboto-BlackItalic.ttf");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  src: url("/fonts/roboto/Roboto-Bold.ttf");
}
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 700;
  src: url("/fonts/roboto/Roboto-BoldItalic.ttf");
}
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 400;
  src: url("/fonts/roboto/Roboto-Italic.ttf");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300;
  src: url("/fonts/roboto/Roboto-Light.ttf");
}
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 300;
  src: url("/fonts/roboto/Roboto-LightItalic.ttf");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  src: url("/fonts/roboto/Roboto-Medium.ttf");
}
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 500;
  src: url("/fonts/roboto/Roboto-MediumItalic.ttf");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/roboto/Roboto-Regular.ttf");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100;
  src: url("/fonts/roboto/Roboto-Thin.ttf");
}
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 100;
  src: url("/fonts/roboto/Roboto-ThinItalic.ttf");
}
@font-face {
  font-family: "Metropolis";
  font-style: normal;
  font-weight: 900;
  src: url("/fonts/metropolis/Metropolis-Black.otf");
}
@font-face {
  font-family: "Metropolis";
  font-style: italic;
  font-weight: 900;
  src: url("/fonts/metropolis/Metropolis-BlackItalic.otf");
}
@font-face {
  font-family: "Metropolis";
  font-style: normal;
  font-weight: 700;
  src: url("/fonts/metropolis/Metropolis-Bold.otf");
}
@font-face {
  font-family: "Metropolis";
  font-style: italic;
  font-weight: 700;
  src: url("/fonts/metropolis/Metropolis-BoldItalic.otf");
}
@font-face {
  font-family: "Metropolis";
  font-style: normal;
  font-weight: 800;
  src: url("/fonts/metropolis/Metropolis-ExtraBold.otf");
}
@font-face {
  font-family: "Metropolis";
  font-style: italic;
  font-weight: 800;
  src: url("/fonts/metropolis/Metropolis-ExtraBoldItalic.otf");
}
@font-face {
  font-family: "Metropolis";
  font-style: normal;
  font-weight: 200;
  src: url("/fonts/metropolis/Metropolis-ExtraLight.otf");
}
@font-face {
  font-family: "Metropolis";
  font-style: italic;
  font-weight: 200;
  src: url("/fonts/metropolis/Metropolis-ExtraLightItalic.otf");
}
@font-face {
  font-family: "Metropolis";
  font-style: normal;
  font-weight: 300;
  src: url("/fonts/metropolis/Metropolis-Light.otf");
}
@font-face {
  font-family: "Metropolis";
  font-style: italic;
  font-weight: 300;
  src: url("/fonts/metropolis/Metropolis-LightItalic.otf");
}
@font-face {
  font-family: "Metropolis";
  font-style: normal;
  font-weight: 500;
  src: url("/fonts/metropolis/Metropolis-Medium.otf");
}
@font-face {
  font-family: "Metropolis";
  font-style: italic;
  font-weight: 500;
  src: url("/fonts/metropolis/Metropolis-MediumItalic.otf");
}
@font-face {
  font-family: "Metropolis";
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/metropolis/Metropolis-Regular.otf");
}
@font-face {
  font-family: "Metropolis";
  font-style: italic;
  font-weight: 400;
  src: url("/fonts/metropolis/Metropolis-RegularItalic.otf");
}
@font-face {
  font-family: "Metropolis";
  font-style: normal;
  font-weight: 600;
  src: url("/fonts/metropolis/Metropolis-SemiBold.otf");
}
@font-face {
  font-family: "Metropolis";
  font-style: italic;
  font-weight: 600;
  src: url("/fonts/metropolis/Metropolis-SemiBoldItalic.otf");
}
@font-face {
  font-family: "Metropolis";
  font-style: normal;
  font-weight: 100;
  src: url("/fonts/metropolis/Metropolis-Thin.otf");
}
@font-face {
  font-family: "Metropolis";
  font-style: italic;
  font-weight: 100;
  src: url("/fonts/metropolis/Metropolis-ThinItalic.otf  ");
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 900;
  src: url("/fonts/lato/Lato-Black.ttf");
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  src: url("/fonts/lato/Lato-Bold.ttf");
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 300;
  src: url("/fonts/lato/Lato-Regular.ttf");
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 600;
  src: url("/fonts/lato/Lato-Semibold.ttf");
}
html {
  --font-family-roboto: roboto, sans-serif;
  --font-family-metropolis: metropolis, sans-serif;
  --font-family-lato: Lato, sans-serif;
  --font-family-base: var(--font-family-lato);
  --font-family-headlines: var(--font-family-base);
  font-family: var(--font-family-base, sans-serif);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 800;
}

.font-roboto {
  font-family: var(--font-family-roboto, sans-serif);
}

.font-metropolis {
  font-family: var(--font-family-metropolis, sans-serif);
}

.font-lato {
  font-family: var(--font-family-lato, sans-serif);
}

*,
*::after,
*::before {
  box-sizing: border-box;
}

a,
a:hover,
a:visited,
a:focus,
a:active {
  color: inherit;
  text-decoration: none;
}

html,
body {
  padding: 0;
  margin: 0;
  min-height: 100%;
}

body {
  padding-top: var(--header-height);
  transition: padding 0.3s ease-in;
}

body, section {
  min-width: 320px;
}

.ignore-header {
  --section-min-height: var(--real-100vh, 100vh);
  margin-top: calc(var(--header-height) * -1);
  transition: top 0.3s ease-in;
}
.ignore-header .section-content .content {
  padding-top: var(--header-height) !important;
}
.ignore-header .section-content.flex-align-self-center {
  position: relative;
  top: var(--header-height);
}

[image-view] {
  cursor: pointer;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--headline-font);
  line-height: 1.2em;
}

h1 {
  font-size: var(--headline-1-size);
  color: var(--headline-1-color, inherit);
}

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
  color: var(--text-color);
}
@media screen and (min-width: 900px) {
  body {
    font-size: 2.1rem;
  }
}

.prose {
  max-width: 65ch;
  --prose-text-line-height: var(--text-line-height, 1.3);
  display: block;
  line-height: var(--prose-text-line-height, 1.4);
}
.prose table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}
.prose td {
  border: 0;
  border-bottom: 1px solid #ccc;
  padding: 1rem;
}
.prose-nomaxwidth {
  max-width: none;
}
.prose [href] {
  --fancyunderline-color: var(--link-underline-color, var(--link-color, #00f));
  color: var(--link-color);
  word-break: break-all;
}
.prose [href] {
  display: inline-flex;
  flex-direction: column;
}
.prose [href]::after {
  content: "";
  transition: var(--transition-fast);
  width: 0;
  margin-left: 50%;
  position: relative;
  top: 0.2rem;
  border-bottom: var(--fancyunderline-height, 0.2rem) solid var(--fancyunderline-color, currentColor);
  margin-bottom: calc(var(--fancyunderline-height, 0.2rem) * -1);
}
.prose [href]::after {
  width: 100%;
  margin-left: 0;
}
.prose [href]:hover {
  --fancyunderline-color: var(--link-underline-color-hover, var(--link-color, #00f));
}
.prose [href]::after {
  top: -0.1em;
  --fancyunderline-height: 0.1rem;
}
.prose p {
  word-break: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.prose sub,
.prose sup {
  line-height: 1em;
}
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  line-height: var(--prose-headline-line-height, 1.4);
  margin-bottom: calc(var(--prose-text-line-height) * 1em);
}
.prose h1:last-child, .prose h2:last-child, .prose h3:last-child, .prose h4:last-child, .prose h5:last-child, .prose h6:last-child {
  margin-bottom: 0;
}
.prose p + h6, .prose p + h5, .prose p + h4, .prose p + h3, .prose p + h2, .prose p + h1 {
  margin-top: calc(var(--prose-text-line-height) * 2em);
}
:root {
  --box-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  --box-shadow-2: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  --box-shadow-3: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  --box-shadow-4: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  --box-shadow-5: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
  --box-shadow-6: 0 24px 45px rgba(0, 0, 0, 0.35), 0 18px 16px rgba(0, 0, 0, 0.24);
  --box-shadow-7: 0 29px 54px rgba(0, 0, 0, 0.4), 0 21px 18px rgba(0, 0, 0, 0.24);
  --box-shadow-8: 0 34px 63px rgba(0, 0, 0, 0.45), 0 26px 20px rgba(0, 0, 0, 0.24);
  --content-area-width: var(--real-100vw, 100vw);
  --content-width: var(--real-100vw, 100vw);
  --content-area-margin: calc((var(--real-100vw, 100vw) - var(--content-area-width)) / 2);
  --background-width: var(--real-100vw, 100vw);
  --background-content-width: var(--background-width);
  --text-padding-x: 2rem;
  --text-padding: var(--text-padding-x, --text-padding-y);
  --headline-1-size: 200%;
  --headline-1-color: var(--jona-color);
  --small-header-height: 7rem;
  --big-header-height: 10rem;
  --small-header-padding: 2rem var(--text-padding-x);
  --big-header-padding: 2rem var(--text-padding-x);
  --navigation-entry-padding: 1rem 0rem;
  --header-height: var(--big-header-height);
  --header-padding: var(--big-header-padding);
  --logo-height: 6rem;
  --eufina-primary: #39709d;
  --eufina-secondary: #eeac02;
  --jona-color: #e20071;
  --text-color: var(--text-on-light-bg);
  --headline-font: var(--font-family-lato);
  --link-color: var(--eufina-primary);
  --link-underline-color-hover: var(--eufina-secondary);
  --text-on-dark-bg: #fff;
  --text-on-light-bg: #2d3f51;
  --section-padding-x: 5rem;
  --section-padding-y: 5rem;
  --section-padding: var(--section-padding-y) var(--section-padding-y);
  --section-space-between: 0;
  --text-line-height: 1.4;
  --video-background: #eee;
  --transition: all .3s ease-in;
  --transition-fast: all .15s ease-in;
  --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --border-radius: 1.5rem;
  --border-radius-small: 0.75rem;
  --input-border-radius: 0.5rem;
  --input-border-color: #d1c7c7;
  --input-border-color-focus: var(--eufina-secondary);
  --input-background: #fdfdfd;
  --glide-menu-gap: 1rem;
  --glider-bullet-background-color: rgba(26,84,123,.65);
  --glider-bullet-border-width: 1px;
  --glider-bullet-border-color: rgba(255,255,255,.25);
  --glider-bullet-padding: 0.5em 1em;
  --glider-bullet-text-color: #fff;
  --glider-bullet-active-background-color: var(--text-on-dark-bg);
  --glider-bullet-active-border-color: var(--text-on-dark-bg);
  --glider-bullet-active-text-color: var(--text-on-light-bg);
  --headline-color: var(--jona-color);
  --button-bg: #fff;
  --button-color: var(--text-color);
  --button-border-color: var(--eufina-primary);
  --button-bg-hover: var(--eufina-secondary);
  --button-border-color-hover: var(--eufina-secondary);
  --error-color: #cd0000;
}
@media screen and (min-width: 480px) {
  :root {
    --content-width: 700px;
    --background-content-width: var(--content-width);
  }
}
@media screen and (min-width: 480px) and (max-width: 899px) {
  :root {
    --font-size: 4rem;
  }
}
@media screen and (min-width: 1500px) {
  :root {
    --content-area-width: 1300px;
    --content-width: calc(var(--content-area-width) * 2 / 3);
    --background-width: calc(var(--content-area-width) - var(--content-width) + var(--content-area-margin));
    --background-content-width: var(--background-width);
    --text-padding-x: 0rem;
  }
}
@media screen and (min-width: 900px) {
  :root {
    --small-header-height: 10rem;
    --navigation-entry-padding: 1rem;
  }
}
@media screen and (max-width: 1499px) {
  :root {
    --logo-height: 6rem;
  }
}

body.scrolled {
  --header-height: var(--small-header-height);
  --header-padding: var(--small-header-padding);
}

header {
  --header-width: var(--content-area-width, 100vw);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height, 5rem);
  z-index: 1000;
  transition: all 0.3s ease-in;
  color: var(--text-on-light-bg);
}
.scrolled header {
  background: #fff;
}
header a :not(a) {
  pointer-events: none;
}

.header-container {
  width: var(--header-width);
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  padding: var(--header-padding);
  font-size: 19px;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.logo {
  display: flex;
  transition: all 0.15s ease-in;
  margin: 0;
  padding: 0;
  max-height: var(--logo-height, none);
  height: 100%;
  transition: all 0.3s ease-in;
}
.logo:hover, .logo:active, .logo:focus,
.logo .active {
  outline: none;
}
.logo svg {
  height: 100%;
  transition: all 0.3s ease-in;
  border-radius: 25%;
}
.logo-text {
  margin: auto 10px;
  font-size: 24px;
  font-weight: 700;
}

.mobile-menu.active {
  outline: none;
}
@media screen and (min-width: 900px) {
  .mobile-menu {
    display: none;
  }
}

#mobile-menu {
  display: none;
}

ul.navigation {
  --fancyunderline-height: 0.2rem;
  --fancyunderline-color: var(--eufina-secondary);
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  font-weight: 500;
  white-space: nowrap;
  margin: 0 0 0 auto;
  padding: 0;
}
ul.navigation > li > a {
  font-weight: bold;
}
@media screen and (max-width: 999px) and (min-width: 900px) {
  ul.navigation {
    font-size: 80%;
  }
}
@media screen and (max-width: 899px) {
  ul.navigation {
    position: absolute;
    right: 0;
    left: 0;
    top: var(--header-height, 0);
    padding: 0 var(--text-padding-x);
    flex-direction: column;
    align-items: flex-start;
    transition: all 0.3s ease-in;
    overflow: hidden;
    min-height: 100vh;
    height: 100vh;
    background-color: #fff;
  }
  header:not(.mobile-active) ul.navigation {
    min-height: 0;
    height: 0;
    max-height: 0;
    pointer-events: none;
  }
}
@media screen and (min-width: 900px) {
  ul.navigation {
    line-height: calc(var(--header-height) - var(--header-padding) * 2);
  }
}
ul.navigation li {
  list-style: none;
  position: relative;
  width: 100%;
}
ul.navigation li.active > a,
ul.navigation li a.active {
  outline: none;
  color: var(--text-on-light-bg);
  background-color: white;
}
@media screen and (max-width: 899px) {
  ul.navigation li.active > a,
  ul.navigation li a.active {
    background: transparent;
    color: inherit;
  }
}
ul.navigation li a {
  display: block;
  padding: var(--navigation-entry-padding);
  transition: all 0.15s ease-in;
  border-radius: var(--border-radius-small);
}
ul.navigation li a.has-submenu {
  border-radius: var(--border-radius-small) var(--border-radius-small) 0 0;
}
ul.navigation li a.active > span::after, ul.navigation li a.current-navigation > span::after {
  width: 100%;
  margin-left: 0;
}
ul.navigation li a > span {
  line-height: 1.2em;
}
ul.navigation li a > span {
  display: inline-flex;
  flex-direction: column;
}
ul.navigation li a > span::after {
  content: "";
  transition: var(--transition-fast);
  width: 0;
  margin-left: 50%;
  position: relative;
  top: 0.2rem;
  border-bottom: var(--fancyunderline-height, 0.2rem) solid var(--fancyunderline-color, currentColor);
  margin-bottom: calc(var(--fancyunderline-height, 0.2rem) * -1);
}
ul.navigation li ul {
  transition: all 0.15s ease-in;
  margin: 0 0 0 auto;
  padding: 0;
  line-height: 1.5em;
  --header-padding: 1rem;
}
@media screen and (max-width: 899px) {
  ul.navigation li ul :not(.active) > ul.navigation-level-1 {
    height: 0;
  }
}
@media screen and (min-width: 900px) {
  ul.navigation li ul.navigation-level-1 {
    position: absolute;
    left: 0;
    background-color: rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    color: rgb(51, 51, 51);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 30px rgba(51, 51, 51, 0.1);
    background: #fff;
    box-shadow: 0 4px 30px rgba(51, 51, 51, 0.1);
    border-radius: 0 var(--border-radius-small) var(--border-radius-small) var(--border-radius-small);
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  ul.navigation li ul.navigation-level-2 a {
    padding-left: 3rem;
  }
}
@media screen and (max-width: 899px) {
  ul.navigation li ul {
    max-height: 100vh;
    overflow: hidden;
  }
  ul.navigation li:not(.active) ul:not(.navigation-level-2) {
    max-height: 0;
  }
}
@media screen and (min-width: 900px) {
  ul.navigation li:not(.active) ul.navigation-level-1 {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }
}

.navigation-group-headline {
  padding: 0.5rem 3rem !important;
  font-weight: 600;
  font-family: var(--font-family-lato);
}
@media screen and (min-width: 900px) {
  .navigation-group-headline {
    margin-top: 3rem;
  }
}
li:first-child > .navigation-group-headline {
  margin-top: 0;
}
.navigation-group-entry {
  padding: 0.5rem 3rem 0.5rem 3rem !important;
  font-weight: 400;
}

.default-section {
  position: sticky;
  top: calc(var(--header-height, 0rem) + var(--productnav-height, 0rem));
  background: var(--section-background-color, #fff);
}
.section-wide + section ~ section .default-section::before, section:not(.section-wide) ~ section .default-section::before {
  content: "";
  display: block;
  height: var(--section-space-between);
}
.default-section .section-wrapper {
  position: relative;
  display: flex;
  min-height: calc(100vh - var(--header-height));
  flex-direction: column-reverse;
  padding-top: 3rem;
}
.default-section .section-wrapper .section-background {
  position: relative;
  width: var(--background-width);
  min-width: var(--background-width);
  max-width: var(--background-width);
}
.default-section .section-wrapper .section-background .content {
  position: sticky;
  top: calc(var(--header-height, 0rem) + var(--productnav-height, 0rem));
}
.default-section .section-wrapper .section-content {
  align-self: center;
  width: 100%;
  position: relative;
  z-index: 100;
  background-color: var(--section-background-color, white);
  max-width: var(--content-width);
  width: 100%;
}
.default-section .section-wrapper .section-content.flex-align-self-center .section-heading {
  margin-top: 0;
}
.default-section .section-wrapper .section-content .content {
  width: 100%;
  max-width: var(--content-width);
  padding: var(--text-padding);
}
@media screen and (min-width: 1500px) {
  section:nth-of-type(2n) .default-section .section-wrapper {
    flex-direction: row;
    justify-content: flex-end;
  }
  section:nth-of-type(2n + 1) .default-section .section-wrapper {
    flex-direction: row-reverse;
    justify-content: start;
  }
  section:nth-of-type(2n) .default-section .section-wrapper .section-background .content {
    right: 0;
  }
  section:nth-of-type(2n + 1) .default-section .section-wrapper .section-background .content {
    left: 0;
  }
  .default-section .section-wrapper .section-content {
    align-self: start;
  }
  .default-section .section-wrapper .section-content .content {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  section:nth-of-type(2n) .default-section .section-wrapper .section-content .content {
    padding-right: var(--section-padding-x, 3rem);
  }
  section:nth-of-type(2n + 1) .default-section .section-wrapper .section-content .content {
    padding-left: var(--section-padding-x, 3rem);
  }
}

.wide-section {
  min-height: var(--section-min-height);
  position: relative;
}
.wide-section .section-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  min-height: var(--section-min-height);
}
.wide-section.lock-background .section-background {
  position: fixed;
}

.wide-section .section-content {
  min-height: var(--section-min-height);
  margin: 0 auto;
  width: var(--content-area-width);
  max-width: var(--content-area-width);
  min-width: var(--content-area-width);
  display: flex;
  justify-content: center;
  align-items: start;
  position: relative;
}
.wide-section .section-content .content {
  margin: 0 auto;
  max-width: 100%;
  width: 100%;
  padding: var(--text-padding);
}
.wide-section .section-content .content h1 {
  font-size: 1rem;
}
@media screen and (min-width: 480px) {
  .wide-section .section-content .content h1 {
    font-size: 1.5rem;
  }
}
@media screen and (min-width: 768px) {
  .wide-section .section-content .content h1 {
    font-size: 2rem;
  }
}
@media screen and (min-width: 900px) {
  .wide-section .section-content .content h1 {
    font-size: 3rem;
  }
}

section,
.section {
  max-width: 100vw;
  --section-min-height: calc(var(--real-100vw, 100vw) / 16 * 9);
  /*
  todo: bug animation bei erster section, die berechnung (ziel) stimmt aber so
  header + & {
    --section-min-height: 100vh;
  }*/
}
@media screen and (min-width: 1500px) {
  section,
  .section {
    --section-min-height: calc(var(--real-100vh, 100vh) - var(--header-height, 0px));
  }
}

section [anchor] {
  position: relative;
  top: calc(-1 * (var(--small-header-height, 0px) + var(--productnav-height, 0px)));
}
section:first-of-type [anchor] {
  top: calc(-1 * (var(--big-header-height, 0px) + var(--productnav-height, 0px)));
}

.section-heading {
  font-weight: 800;
  font-family: var(--font-family-lato);
  color: var(--headline-color);
  /*@include breakpoints.min(desktop) {
    margin-left: -0.75em;
    margin-top: -3rem;
  }*/
}
@media screen and (min-width: 900px) and (max-width: 1499px) {
  .section-hasbackground .section-heading {
    position: absolute;
    top: calc((var(--background-height, 100vh) / 3 + var(--header-height)) * -1);
    transition: var(--transition-fast);
    text-align: center;
    left: 0;
    right: 0;
  }
  .section-hasbackground .section-heading, .section-hasbackground .section-heading-small {
    text-shadow: 0px 2px 12px rgba(0, 0, 0, 0.8);
    color: var(--text-on-dark-bg);
  }
}
.section-heading, .section-heading * {
  font-size: var(--mobile-font-size, var(--font-size, 3.2rem));
}
@media screen and (min-width: 900px) {
  .section-heading, .section-heading * {
    font-size: var(--desktop-font-size, var(--font-size, 4.8rem));
  }
}
.section-heading-subline {
  --prose-headline-line-height: 1.5em;
  font-style: italic;
}
.section-highlight {
  position: relative;
  z-index: 10;
  margin: 4rem 0;
  padding: 0.5em;
  border-radius: 14px;
  border: 1px solid var(--highlight-border-color, #eee);
  background: radial-gradient(at bottom right, var(--background-gradient-color-1, white), var(--background-gradient-color-2, #eee));
}
@media screen and (min-width: 480px) {
  .section-highlight {
    padding: 2em;
  }
}
.section-highlight-li-title {
  display: block;
}
.section-highlight .fa-ul {
  margin-left: 3em;
}
.section-highlight .fa-ul li {
  display: flex;
  align-items: center;
  margin-bottom: 1em;
  line-height: 1.5;
}
.section-highlight .fa-ul .fa-li {
  font-size: 200%;
}
@media screen and (max-width: 899px) {
  .section-highlight .fa-ul .fa-li {
    font-size: 150%;
  }
}
.section-highlight .fa-ul .fa-li svg {
  color: var(--icon-color);
}

dialog {
  border: none;
  padding: 2em;
  box-shadow: var(--box-shadow-3);
  background: #fff;
  border-radius: var(--border-radius);
  max-width: calc(65ch + 4em);
  margin: 2em;
  outline: 0;
  align-self: center;
  justify-self: center;
  animation: fadeInDialog 0.3s ease;
}
dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.dialog-title {
  font-size: 1.4em;
  margin: 0;
}
.dialog-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
}

@keyframes fadeInDialog {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media screen and (max-width: 899px) {
  .background .background-video {
    display: none !important;
  }
}
.background .html-background {
  max-width: var(--background-content-width);
  margin: 0 auto;
}
.background > .base-background {
  background: var(--base-background, white);
}
@media screen and (max-width: 1499px) {
  .background > * {
    width: 100%;
  }
  .background .html-background {
    padding: var(--text-padding);
  }
}
.section-wide .background > * {
  position: absolute;
  height: 100%;
  width: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  top: 0;
  left: 0;
  right: 0;
}
.background > .background-image,
.background > .background-video {
  height: 100vh !important;
}
@media screen and (min-width: 1500px) {
  .background > * {
    position: absolute;
    display: block;
    object-fit: cover;
    width: var(--background-width);
    height: calc(100vh - var(--header-height, 0px));
    top: 0;
  }
}

.icongrid {
  display: grid;
  gap: var(--icongrid-gap, 0.5em);
  grid-template-columns: repeat(var(--icongrid-columns, 3), minmax(0px, 1fr));
}
@media screen and (max-width: 749px) {
  .icongrid {
    --icongrid-columns: 2;
  }
}
@media screen and (max-width: 499px) {
  .icongrid {
    --icongrid-columns: 1;
  }
}
.icongrid-entry {
  display: flex;
  flex-direction: column;
  gap: var(--icongrid-inner-gap, var(--icongrid-gap, 0.5em));
}
.icongrid-entry > * {
  text-align: center;
}
.icongrid-entry-icon {
  font-size: 250%;
}
.icongrid-entry-title {
  font-size: 110%;
  margin: 1rem 0;
}
.icongrid-entry-subtitle {
  font-size: 90%;
  margin: 0;
  line-height: var(--text-line-height);
}

.image-grid {
  display: grid;
  gap: 6rem;
  align-items: center;
  justify-content: center;
  margin: 5rem 0;
  background: #fff;
  padding: 4rem;
  border-radius: var(--border-radius-small);
  grid-template-columns: 1fr;
}
@media screen and (min-width: 768px) {
  .image-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (min-width: 900px) {
  .image-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.image-grid > * {
  height: 100%;
  max-height: 8rem;
  display: block;
  margin: 0 auto;
}
@media screen and (min-width: 900px) {
  .image-grid > * {
    width: 100%;
    max-width: 100%;
    max-height: none;
    height: auto;
    max-height: 6rem;
  }
}

body.is-loading {
  overflow-y: scroll;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(1080deg);
  }
}
@-o-keyframes spin {
  0% {
    -o-transform: rotate(0deg);
  }
  50% {
    -o-transform: rotate(360deg);
  }
  100% {
    -o-transform: rotate(1080deg);
  }
}
@-ms-keyframes spin {
  0% {
    -ms-transform: rotate(0deg);
  }
  50% {
    -ms-transform: rotate(360deg);
  }
  100% {
    -ms-transform: rotate(1080deg);
  }
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(1080deg);
  }
}
@-moz-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
  }
  50% {
    -moz-transform: rotate(360deg);
  }
  100% {
    -moz-transform: rotate(1080deg);
  }
}
#loader {
  background-color: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: rgb(51, 51, 51);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 30px rgba(51, 51, 51, 0.1);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease-in;
  transition-delay: 0.25s;
}
body:not(.is-loading) #loader {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
#loader:before {
  content: "";
  border-radius: 50%;
  width: 7.5rem;
  height: 7.5rem;
  border-width: 4px 2px;
  border-style: solid;
  border-color: rgb(255, 255, 255) rgba(247, 247, 247, 0.3);
  animation: spin 3.45s infinite;
}

.link-to-contact {
  --button-border-width: 0.1rem;
  border-radius: 15px;
  background: #f5f5f5;
  display: inline-block;
  float: right;
  margin-top: 5vh;
  margin-bottom: 5vh;
  line-height: 1.5;
  transition: var(--transition-fast);
  /*speech-bubble
  position: relative;

  &:before {
    content: "";
    width: 0px;
    height: 0px;
    position: absolute;
    border-right: 24px solid #f5f5f5;
    border-left: 12px solid transparent;
    border-top: 12px solid #f5f5f5;
    border-bottom: 20px solid transparent;
    right: 32px;
    bottom: -30px;
  }*/
}
.link-to-contact.button {
  padding: 1em;
}
@media screen and (max-width: 1499px) {
  .link-to-contact {
    width: 100%;
    text-align: center;
    margin: 1em 0;
  }
}
.link-to-contact h4 {
  margin: 0;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-50%);
    overflow: visible;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    overflow: hidden;
  }
}
.hero {
  overflow: hidden;
}
.hero h1 {
  font-size: clamp(2rem, 3.25cqw, 5rem) !important;
  margin-top: 0;
  /*font-size: 180% !important;
  margin-top: 0;

  @include breakpoints.min(tablet) {
    // font-size: 230% !important;
    font-size: 270% !important;
  }

  @include breakpoints.max(400px) {
    font-size: 140% !important;
  }*/
}
@media screen and (max-width: 767px) {
  .hero h1 {
    font-size: 180% !important;
  }
}
.hero.sub-hero {
  padding-bottom: 10vh;
}
.hero-image-caption {
  margin-top: 0;
  padding: 2rem;
  border-radius: 2rem;
  background: hsl(from var(--eufina-primary) h s 95);
  box-shadow: var(--box-shadow);
  position: relative;
}
@media screen and (max-width: 479px) {
  .hero-image-caption {
    margin-top: -25%;
  }
}
.hero-image-caption > div {
  display: flex;
  flex-direction: column;
  line-height: 1.4;
  text-align: center;
}
@media screen and (min-width: 900px) {
  .hero-image-caption > div b {
    display: block;
  }
}
.hero-image-caption .button {
  font-size: 0.75em;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1em;
}
.hero-image-wrapper {
  height: 55rem;
  position: relative;
  text-align: center;
  border-radius: 2rem 2rem 0 0;
}
.hero-image-wrapper::after {
  content: "";
  inset: 0;
  height: 50rem;
  bottom: -50rem;
  position: absolute;
  top: auto;
  background: linear-gradient(0deg, hsl(from var(--eufina-primary) h s 85), hsl(from var(--eufina-primary) h s 95)) fixed;
}
.hero .content {
  width: 100%;
  padding-bottom: 30px !important;
}
.hero .content:nth-child(2) {
  opacity: 0;
}
@media screen and (max-width: 479px) {
  .hero .content:nth-child(2) {
    opacity: 1;
  }
  .hero .content h1 {
    margin-top: 6rem;
  }
}
.hero .section-background {
  background: transparent;
}
.hero .section-background .background > img {
  left: 52%;
  right: 10%;
  width: 38%;
  object-position: left center;
  object-fit: contain;
}
@media screen and (max-width: 899px) {
  .hero .section-background .background > img {
    display: none;
  }
}
.hero .section-content {
  align-items: center;
}
.hero .section-content h1 b {
  color: var(--jona-color);
}
.hero .section-content .badges {
  margin-top: 6rem;
  display: flex;
  gap: 2rem;
}
.hero .section-content .badges img {
  width: 20rem;
}
@media screen and (max-width: 479px) {
  .hero .section-content {
    flex-direction: column;
  }
}
.hero .section-content .content {
  margin: 0 !important;
}
.hero .section-content .section-highlight {
  color: var(--text-on-light-bg);
  text-shadow: none;
}
@media screen and (min-width: 900px) {
  .hero .section-content .content:first-child {
    width: 61.804697157%;
    padding-right: var(--section-padding-x);
  }
  .hero .section-content .content:first-child + .content {
    width: 38.195302843%;
  }
}
.hero .section-content p {
  -webkit-hyphens: none;
  hyphens: none;
}
.hero .section-content p {
  line-height: 1.5;
  font-size: 120%;
}

.footer {
  position: relative;
  background: #06131e;
  color: #fff;
  min-height: 250px;
  padding: 6rem 2rem;
  display: flex;
}
.footer .content {
  margin: 0 auto;
  width: var(--content-area-width);
  align-items: center;
  justify-content: center;
}
.footer-logo {
  height: 70px;
  padding: 0.5em 0.5em 1em 0.5em;
  margin-top: -1em;
  display: flex;
}
.footer-logo .svg-eufina > path {
  fill: #fff;
}
.footer-logo svg {
  height: 100%;
  transition: all 0.3s ease-in;
  border-radius: 25%;
}
.footer .sup {
  vertical-align: super;
  font-size: 50%;
  align-self: flex-start;
}
.footer ul {
  display: flex;
  flex-wrap: nowrap;
  font-weight: 500;
  white-space: nowrap;
  margin: 0 auto;
  text-align: center;
  --fa-display: inline;
  padding: 0;
  font-weight: 300;
}
@media screen and (max-width: 899px) {
  .footer ul {
    flex-direction: column;
  }
}
.footer ul > li {
  list-style: none;
  padding: 0.5em;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 899px) {
  .footer ul > li.separator {
    display: none;
  }
}
.footer ul a {
  --fancyunderline-height: 0.1rem;
  --fancyunderline-color: var(--eufina-secondary);
}
.footer ul a {
  display: inline-flex;
  flex-direction: column;
}
.footer ul a::after {
  content: "";
  transition: var(--transition-fast);
  width: 0;
  margin-left: 50%;
  position: relative;
  top: 0.2rem;
  border-bottom: var(--fancyunderline-height, 0.2rem) solid var(--fancyunderline-color, currentColor);
  margin-bottom: calc(var(--fancyunderline-height, 0.2rem) * -1);
}
.footer ul a:hover::after {
  width: 100%;
  margin-left: 0;
}

.screenshot {
  width: 100%;
}
.screenshot-container {
  background: #eee;
  padding: 2rem;
  border-radius: var(--border-radius-small);
  text-align: center;
}
.screenshot-description {
  padding-top: 0.5em;
  font-weight: bold;
}
.screenshot-wrapper {
  position: relative;
  max-width: 40%;
  margin: 0 auto;
}
.screenshot-wrapper .screenshot-icon {
  position: absolute;
  top: calc(50% - 0.5em);
  left: calc(50% - 0.5em);
  right: 0;
  bottom: 0;
  text-align: center;
  font-size: 300%;
  opacity: 0.5;
  pointer-events: none;
}

.button,
a.button {
  border-radius: var(--button-border-radius, 0.75em);
  display: inline-block;
  background: var(--button-bg, #333);
  color: var(--button-color, #fff);
  padding: var(--button-padding, 0.5em 1em);
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
  border: var(--button-border-width, 2px) solid var(--button-border-color, var(--button-bg, #333));
  cursor: pointer;
  transition: all ease-in 0.25s;
}
.button[href],
a.button[href] {
  text-decoration: none;
}
.button:hover, .button:focus, .button:active,
a.button:hover,
a.button:focus,
a.button:active {
  background: var(--button-bg-hover, #fff);
  color: var(--button-color-hover, #333);
  border-color: var(--button-border-color-hover, var(--button-bg-hover, #333));
  outline: none;
}
.button .icon,
a.button .icon {
  padding-right: 0.5em;
}

.button-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
}
.button.cta {
  /*background: linear-gradient(
    0deg,
    var(--eufina-secondary),
    hsl(from (var(--eufina-secondary) h s 80%))
  );*/
  font-size: 125%;
  --button-bg: var(--jona-color);
  --button-color: var(--text-on-dark-bg);
  border: 0 none;
  --button-border-color: transparent;
  --button-bg-hover: hsl(from var(--eufina-primary) h s 20);
  --button-color-hover: var(--text-on-dark-bg);
  --button-border-color-hover: transparent;
}
.button.cta svg {
  margin-left: 0.5em;
  color: inherit;
}
.button.cta:hover {
  transform: scale(1.15);
}

.glide {
  --section-background: #eee;
}
.glide__heading {
  padding: var(--section-padding-y) var(--container-padding-x);
  margin: 0;
  text-align: center;
  display: block;
}
.glide__menu {
  display: grid;
  gap: var(--glide-menu-gap, 0.25rem);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-top: 1rem;
  padding-bottom: 1rem;
}
@media screen and (max-width: 767px) {
  .glide__menu {
    display: none;
  }
}
.glide__bullet {
  background: var(--glider-bullet-background-color, #fff);
  color: var(--glider-bullet-text-color, #333);
  text-align: center;
  padding: var(--glider-bullet-padding, 0.5rem);
  border-radius: var(--border-radius-small, 0.5rem);
  border: var(--glider-bullet-border-width, 2px) solid var(--glider-bullet-border-color, #333);
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  justify-content: center;
  align-items: center;
}
.glide__bullet--active, .glide__bullet:hover {
  background: var(--glider-bullet-active-background-color, #333);
  color: var(--glider-bullet-active-text-color, #fff);
  border-color: var(--glider-bullet-active-border-color, #333);
}
.glide__wrapper {
  background: var(--background-layer-highest);
  color: var(--text-layer-highhest);
}
.glide__container {
  display: flex;
  flex-direction: row;
  width: 100%;
}
.glide__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--container-padding-x);
  color: var(--primary);
  background: transparent;
  border: 0;
  padding: 0 0.5rem;
  font-size: 250%;
  cursor: pointer;
}
.glide__slide {
  min-width: 300px;
  min-height: 100px;
  height: 100%;
}

.slide {
  padding: 1em;
}
.slide__title h2 {
  font-size: 300%;
  text-align: center;
}
.slide__body {
  display: flex;
  gap: 1em;
  justify-content: center;
  align-items: center;
}
.slide__body > * {
  flex: 1;
}
.slide__body--column {
  flex-direction: column;
}
.slide__body--center {
  text-align: center;
}
.slide__content {
  font-size: 25px;
  line-height: 150%;
}
.slide__content li {
  margin-bottom: 0.5em;
}
.slide__content ul {
  list-style-type: disc;
}
.slide__content ul ul {
  list-style-type: circle;
}
.slide__buttons {
  display: flex;
  margin-top: 2rem;
}
.slide__buttons--center {
  justify-content: center;
}

[form-field-wrapper] {
  position: relative;
}

[form-field] {
  display: block;
  position: relative;
  width: 100%;
  padding: 8px;
  font-size: 1.6rem;
  line-height: 1.25;
  color: inherit;
  background-color: var(--input-background, #fff);
  border-radius: var(--input-border-radius, --border-radius-small);
  margin-bottom: 16px;
  transform: all 0.1s ease-in;
  z-index: 100;
  border: 1px solid var(--input-border-color, currentColor);
  font-family: inherit;
}
[form-field]:focus {
  outline: none;
  border: 1px solid var(--input-border-color-focus, currentColor);
}
[form-field][error] {
  border-color: red;
  outline-color: red;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
[form-field] ~ [error-message] {
  border-radius: 0 0 var(--border-radius-small) var(--border-radius-small);
  margin-top: -16px;
  display: none;
  color: red;
  background-color: rgba(255, 0, 0, 0.25);
  padding: 0.5em 1em;
  font-size: 80%;
}
[form-field][error=""] ~ [error-message=""] {
  display: block;
}
[form-field][error=required] ~ [error-message=required] {
  display: block;
}
[form-field][error=pattern] ~ [error-message=pattern] {
  display: block;
}
[form-field][error=max] ~ [error-message=max] {
  display: block;
}
[form-field][error=min] ~ [error-message=min] {
  display: block;
}
[form-field][error=type] ~ [error-message=type] {
  display: block;
}
[form-field][error=step] ~ [error-message=step] {
  display: block;
}
[form-field][error=maxlength] ~ [error-message=maxlength] {
  display: block;
}
[form-field][error=minlength] ~ [error-message=minlength] {
  display: block;
}

[form-button] {
  border-radius: var(--button-border-radius, 0.75em);
  display: inline-block;
  background: var(--button-bg, #333);
  color: var(--button-color, #fff);
  padding: var(--button-padding, 0.5em 1em);
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
  border: var(--button-border-width, 2px) solid var(--button-border-color, var(--button-bg, #333));
  cursor: pointer;
  transition: all ease-in 0.25s;
  margin: 1em auto 0;
  font-size: 1.2em;
  transition: var(--transition-fast);
}
[form-button][href] {
  text-decoration: none;
}
[form-button]:hover, [form-button]:focus, [form-button]:active {
  background: var(--button-bg-hover, #fff);
  color: var(--button-color-hover, #333);
  border-color: var(--button-border-color-hover, var(--button-bg-hover, #333));
  outline: none;
}
[form-button] .icon {
  padding-right: 0.5em;
}

[form-button][disabled] {
  --button-bg: #eee;
  --button-border-color: #ccc;
  --button-color: #999;
  --button-bg-hover: #eee;
  --button-border-color-hover: #ccc;
  --button-color-hover: #999;
  cursor: not-allowed;
}

.grecaptcha-badge {
  z-index: 99999;
}

textarea {
  resize: vertical;
}

.form-element > label {
  display: block;
  line-height: 1.5;
}
.form-cookiedisclaimer {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  z-index: 101;
}
.form-cookiedisclaimer-text {
  margin: auto;
  background: #fff;
  border-radius: var(--border-radius);
  max-width: calc(65ch + 4em);
  padding: 2em;
  position: relative;
  z-index: 102;
}
@media screen and (max-width: 899px) {
  .form-cookiedisclaimer-text {
    margin-top: 2em;
  }
}
.form-cookiedisclaimer::after {
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  z-index: 101;
  background: rgba(0, 0, 0, 0.15);
  border-radius: var(--border-radius-small);
  backdrop-filter: blur(3px);
}

.video {
  --base-background: var(--video-background, var(--primary-lightest));
}
@media screen and (max-width: 1499px) {
  .video .section-wrapper {
    flex-direction: column;
  }
}
.video .content {
  width: 100%;
}
.video__title {
  text-align: center;
  margin-top: 0;
}
.video__wrapper {
  padding-bottom: 56.25%;
  position: relative;
  width: 100%;
  min-width: 33%;
}
.video__wrapper > div {
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
}
.video__wrapper .video-js {
  background: transparent;
}
.video__wrapper .video-js .vjs-poster,
.video__wrapper .video-js .vjs-tech {
  border-radius: var(--border-radius);
}
.video__wrapper .video-js .vjs-poster {
  background-color: #fff;
}
.video__wrapper .video-js .vjs-control-bar {
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
}
.video__container {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
}
.video__box {
  margin: 0 auto;
  width: 100%;
}
.video__description {
  flex: 1;
  padding: 0 5rem;
}
.video iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
}

.timeline {
  --middle-size: 5rem;
  --label-size: 1.4rem;
  --icon-size: 150%;
  display: flex;
  position: relative;
  margin: 6rem 0 0;
}
.timeline-steps {
  display: flex;
  width: 100%;
}
.timeline-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  flex: 1;
}
.timeline-step svg {
  margin-bottom: var(--middle-size);
  font-size: var(--icon-size);
  color: var(--icon-color);
}
.timeline-step p {
  font-size: var(--label-size);
  font-weight: bold;
  text-align: center;
  margin: 0;
  padding: 0 0.5rem;
}
.timeline-middle {
  display: flex;
  align-items: center;
  flex: 1;
  position: absolute;
  inset: calc(50% - var(--middle-size) / 2) 0 0;
  height: var(--middle-size);
}
.timeline-middle .line {
  height: 2px;
  flex: 1;
  background: var(--border-color, #ccc);
  margin: 0 0.2rem;
  border-radius: 2px;
}

.button-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1rem;
  flex-grow: 1;
  align-items: center;
}
@media screen and (max-width: 899px) {
  .button-row {
    /*&.navigation {
      height: auto;
      min-height: auto;
      top: 0;
      background: #fff;

      flex-direction: row;
      // flex-wrap: wrap;
      font-size: 80%;
      overflow-x: auto;

      li {
        flex: 0;
        width: auto;
        display: inline-flex;
      }
    }*/
  }
}
.button-row li {
  flex: 1;
  display: flex;
}
.button-row .active a,
.button-row a.current-navigation {
  background: var(--button-bg-hover, #fff);
  color: var(--button-color-hover, #333);
  border-color: var(--button-border-color-hover, var(--button-bg-hover, #333));
}
.button-row li:hover {
  --button-bg-hover: #fff;
  --button-border-color-hover: var(--eufina-secondary);
}
.button-row li:hover a.current-navigation {
  --button-bg-hover: hsl(from var(--eufina-secondary) h s 80);
}
@media screen and (min-width: 900px) {
  .button-row a {
    border-radius: var(--button-border-radius, 0.75em);
    display: inline-block;
    background: var(--button-bg, #333);
    color: var(--button-color, #fff);
    padding: var(--button-padding, 0.5em 1em);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
    border: var(--button-border-width, 2px) solid var(--button-border-color, var(--button-bg, #333));
    cursor: pointer;
    transition: all ease-in 0.25s;
    flex-grow: 1;
    text-align: center;
    --button-border-color: transparent;
  }
  .button-row a[href] {
    text-decoration: none;
  }
  .button-row a:hover, .button-row a:focus, .button-row a:active {
    background: var(--button-bg-hover, #fff);
    color: var(--button-color-hover, #333);
    border-color: var(--button-border-color-hover, var(--button-bg-hover, #333));
    outline: none;
  }
  .button-row a .icon {
    padding-right: 0.5em;
  }
}

.construction {
  display: none;
}

.page-index {
  --productnav-height: 10rem;
}
.page-index .stacked-images {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.page-index .stacked-images > * {
  max-width: 40%;
  max-height: 80%;
}
.page-index .stacked-images > :not(:first-child) {
  margin-left: -10%;
}
.page-index .stacked-images > :nth-child(1) {
  margin-top: 0%;
}
.page-index .stacked-images > :nth-child(2) {
  margin-top: 2%;
}
.page-index .stacked-images > :nth-child(3) {
  margin-top: 4%;
}
.page-index .stacked-images > :nth-child(4) {
  margin-top: 6%;
}
.page-index .stacked-images > :nth-child(5) {
  margin-top: 8%;
}
.page-index .stacked-images > :nth-child(6) {
  margin-top: 10%;
}
.page-index .stacked-images > :nth-child(7) {
  margin-top: 12%;
}
.page-index .stacked-images > :nth-child(8) {
  margin-top: 14%;
}
.page-index .stacked-images > :nth-child(9) {
  margin-top: 16%;
}
.page-index .stacked-images > :nth-child(10) {
  margin-top: 18%;
}
.page-index .stacked-images > :nth-child(11) {
  display: none;
}
@media screen and (min-width: 900px) {
  .page-index .more .base-background {
    border-top-left-radius: 2em;
  }
}
.page-index .more .background > img {
  object-fit: contain;
  border-radius: 15%;
}
@media screen and (max-width: 1499px) {
  .page-index .more .background > img {
    max-height: 50vh;
  }
}
@media screen and (min-width: 900px) {
  .page-index .background .html-background {
    padding: 3rem;
  }
  .page-index .background .html-background {
    object-fit: contain;
    height: auto;
  }
}
.page-index .checklist li {
  margin-bottom: 0.5em;
}
.page-index .checklist li svg {
  font-size: 120%;
  color: green;
}

#productlistintro {
  top: calc(var(--header-height) * -1);
  position: relative;
}

.iconlist {
  display: flex;
  list-style: none;
  padding: 0;
  gap: 4rem;
  margin: 4rem 0 8rem;
}
@media screen and (max-width: 899px) {
  .iconlist {
    flex-wrap: wrap;
  }
}
.iconlist li {
  display: flex;
  gap: 2rem;
  align-items: center;
}
.iconlist li .fa-stack {
  font-size: 0.5em;
}
.iconlist li > .fa-stack,
.iconlist li > svg {
  width: 5rem;
}
.iconlist li .fa-clock,
.iconlist li .fa-sack,
.iconlist li .fa-gear {
  color: var(--eufina-secondary);
}
.iconlist li svg {
  font-size: 175%;
}
.iconlist li .fa-euro-sign {
  font-size: 175%;
  bottom: -0.5em;
}
.iconlist li span {
  font-weight: bold;
}

.produktauflistung {
  --section-min-height: var(--productnav-height);
  --base-background: hsl(from var(--eufina-primary) h s 95);
  top: var(--header-height);
  position: sticky;
  z-index: 1;
  --base-background: transparent;
  background-color: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: rgb(51, 51, 51);
  border: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow: 0 4px 30px rgba(51, 51, 51, 0.1);
  background: hsla(from var(--eufina-primary) h s 95/0.7);
  border-color: transparent;
  box-shadow: none;
}
@media screen and (max-width: 899px) {
  .produktauflistung {
    display: none;
  }
}
.produktauflistung .section-content {
  padding: 2rem 0;
}
.produktauflistung-ueberschrift {
  --base-background: hsl(from var(--eufina-primary) h s 95);
  --section-min-height: var(--productnav-height);
}
.produktauflistung-ueberschrift .prose {
  margin: 0 auto 4rem;
  text-align: center;
}
.produktauflistung-ueberschrift .prose h2 {
  font-size: 4rem;
  margin: 0;
}
.produktauflistung-ueberschrift .section-content {
  align-items: start;
  padding-top: var(--section-padding-y);
  padding-bottom: 0;
}

.portal-image {
  display: flex;
  align-items: center;
  justify-content: center;
}
.portal-image .button-wrapper {
  margin-top: 2em;
}
.portal-image img {
  max-width: 100%;
}

body.page.page-produkte header + section .background > * {
  object-position: 92%;
}
body.page.page-produkte .stacked-images {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
body.page.page-produkte .stacked-images > * {
  max-width: 40%;
  max-height: 80%;
}
body.page.page-produkte .stacked-images > :not(:first-child) {
  margin-left: -10%;
}
body.page.page-produkte .stacked-images > :nth-child(1) {
  margin-top: 0%;
}
body.page.page-produkte .stacked-images > :nth-child(2) {
  margin-top: 2%;
}
body.page.page-produkte .stacked-images > :nth-child(3) {
  margin-top: 4%;
}
body.page.page-produkte .stacked-images > :nth-child(4) {
  margin-top: 6%;
}
body.page.page-produkte .stacked-images > :nth-child(5) {
  margin-top: 8%;
}
body.page.page-produkte .stacked-images > :nth-child(6) {
  margin-top: 10%;
}
body.page.page-produkte .stacked-images > :nth-child(7) {
  margin-top: 12%;
}
body.page.page-produkte .stacked-images > :nth-child(8) {
  margin-top: 14%;
}
body.page.page-produkte .stacked-images > :nth-child(9) {
  margin-top: 16%;
}
body.page.page-produkte .stacked-images > :nth-child(10) {
  margin-top: 18%;
}
body.page.page-produkte .stacked-images > :nth-child(11) {
  display: none;
}
@media screen and (min-width: 900px) {
  body.page.page-produkte .background .html-background {
    padding: 3rem;
  }
}
body.page.page-produkte .checklist li {
  margin-bottom: 0.5em;
}
body.page.page-produkte .checklist li svg {
  font-size: 120%;
  color: green;
}
body.page.page-produkte .glide .slide-responsive img {
  max-width: 100%;
}
body.page.page-produkte .glide .slide {
  gap: 0.5rem;
  align-items: center;
}
body.page.page-produkte .section-background .centered-background {
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
}
body.page.page-produkte .section-background .centered-background img {
  max-height: 80%;
  max-width: 100%;
}

@media screen and (max-width: 899px) {
  .glider-section {
    display: none;
  }
}
.glider-section + section {
  --section-space-between: 0;
}

body.page.page-login form {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0 auto;
}
body.page.page-login h1 {
  text-align: center;
  text-shadow: none !important;
  color: var(--text-color) !important;
  text-transform: uppercase;
}
body.page.page-login .error {
  color: var(--error-color);
  font-weight: normal;
  background: white;
  text-align: center;
  border: 1px solid;
  border-radius: var(--border-radius-small);
  padding: 0.5em;
}
body.page.page-login .login-form {
  background-color: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: rgb(51, 51, 51);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 30px rgba(51, 51, 51, 0.1);
  max-width: 400px;
  margin: 0 auto;
  padding: 2em;
  border-radius: var(--border-radius-small);
}
body.page.page-login .login-form h1 {
  margin: 0 0 0.25em;
  font-size: 300%;
}
body.page.page-login .login-form [form-field] {
  font-size: 2.5rem;
}
body.page.page-login .login-form [form-button] {
  margin: 0;
}
body.page.page-login #cc--main {
  display: none;
}

.page-kontakt .section-heading {
  margin-top: 5rem;
}
.page-kontakt .section-content {
  padding-bottom: 5rem;
}
.page-kontakt .form-grid {
  display: grid;
  gap: 0.5rem 4rem;
  grid-template-columns: 1fr 1fr;
  background: #fff;
  padding: 4rem;
  border-radius: var(--border-radius-small);
  position: relative;
}
@media screen and (min-width: 900px) {
  .page-kontakt .form-grid .span-full {
    grid-column: auto/span 2;
  }
  .page-kontakt .form-grid .span-two {
    grid-column: auto/span 2;
  }
}
@media screen and (max-width: 899px) {
  .page-kontakt .form-grid {
    grid-template-columns: 1fr;
  }
}
.page-kontakt .form-box {
  display: flex;
  flex-flow: column;
}

body:not(.page-kontakt) .grecaptcha-badge {
  display: none;
}

.error-headline {
  font-size: 200%;
}
.error-code {
  display: block;
  font-size: 300%;
  padding-bottom: 0.5em;
  color: var(--error-color, #f00);
}

.page-error {
  --header-height: 0;
}

@media screen and (max-width: 767px) {
  .page-datenschutz .prose p {
    text-align: justify;
    text-align-last: left;
  }
  .page-datenschutz .prose [href] {
    display: inline;
    text-decoration: underline;
  }
}

.page-unterauftragnehmer .visible-small {
  margin-right: 0.25em;
}
@media screen and (min-width: 900px) {
  .page-unterauftragnehmer .visible-small {
    display: none;
  }
}
.page-unterauftragnehmer td,
.page-unterauftragnehmer th {
  border: 1px solid #ccc;
  text-align: left;
  padding: 0.5em 0;
}
@media screen and (min-width: 900px) {
  .page-unterauftragnehmer td,
  .page-unterauftragnehmer th {
    padding: 1rem;
  }
}
@media screen and (max-width: 899px) {
  .page-unterauftragnehmer th {
    display: none;
  }
  .page-unterauftragnehmer table td {
    display: block;
    width: auto;
    border: 0 none;
  }
  .page-unterauftragnehmer td:nth-child(4) {
    border-bottom: 1px solid #ccc;
  }
  .page-unterauftragnehmer tr:nth-child(2) {
    border-top: 1px solid #ccc;
  }
}

.page-maklerhub .section-background img {
  object-position: 73%;
}

.preise-text {
  background: #fff;
  border-radius: var(--border-radius-small);
  padding: 4rem;
  max-width: 100%;
}

.ueber-uns .background > img {
  object-fit: contain;
  object-position: center calc(50% - var(--header-height));
}

@media screen and (max-width: -1px) {
  .device-min-smartphone {
    display: none;
  }
}
@media screen and (min-width: 1px) {
  .device-max-smartphone {
    display: none;
  }
}
@media screen and (min-width: 0) {
  .device-smaller-than-smartphone {
    display: none;
  }
}
@media screen and (max-width: 0) {
  .device-bigger-than-smartphone {
    display: none;
  }
}
@media screen and (max-width: 479px) {
  .device-min-tablet {
    display: none;
  }
}
@media screen and (min-width: 481px) {
  .device-max-tablet {
    display: none;
  }
}
@media screen and (min-width: 480px) {
  .device-smaller-than-tablet {
    display: none;
  }
}
@media screen and (max-width: 480px) {
  .device-bigger-than-tablet {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .device-min-tabletLarge {
    display: none;
  }
}
@media screen and (min-width: 769px) {
  .device-max-tabletLarge {
    display: none;
  }
}
@media screen and (min-width: 768px) {
  .device-smaller-than-tabletLarge {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .device-bigger-than-tabletLarge {
    display: none;
  }
}
@media screen and (max-width: 899px) {
  .device-min-desktop {
    display: none;
  }
}
@media screen and (min-width: 901px) {
  .device-max-desktop {
    display: none;
  }
}
@media screen and (min-width: 900px) {
  .device-smaller-than-desktop {
    display: none;
  }
}
@media screen and (max-width: 900px) {
  .device-bigger-than-desktop {
    display: none;
  }
}
@media screen and (max-width: 1199px) {
  .device-min-desktopLarge {
    display: none;
  }
}
@media screen and (min-width: 1201px) {
  .device-max-desktopLarge {
    display: none;
  }
}
@media screen and (min-width: 1200px) {
  .device-smaller-than-desktopLarge {
    display: none;
  }
}
@media screen and (max-width: 1200px) {
  .device-bigger-than-desktopLarge {
    display: none;
  }
}
@media screen and (max-width: 1499px) {
  .device-min-desktopXLarge {
    display: none;
  }
}
@media screen and (min-width: 1501px) {
  .device-max-desktopXLarge {
    display: none;
  }
}
@media screen and (min-width: 1500px) {
  .device-smaller-than-desktopXLarge {
    display: none;
  }
}
@media screen and (max-width: 1500px) {
  .device-bigger-than-desktopXLarge {
    display: none;
  }
}

.flex, .flex-column-reverse, .flex-column, .flex-row-reverse, .flex-reverse, .flex-row {
  display: flex;
  gap: var(--flex-gap, 0);
}
.flex, .flex-column-reverse, .flex-column, .flex-row-reverse, .flex-reverse, .flex-row {
  flex-direction: row;
}
.flex-row-reverse, .flex-reverse {
  flex-direction: row-reverse;
}
.flex-column {
  flex-direction: column;
}
.flex-column-reverse {
  flex-direction: column-reverse;
}
.flex-stretch {
  justify-content: stretch;
}
.flex-stretch > * {
  flex-grow: 1;
}
.flex-align-start {
  align-items: flex-start !important;
}
.flex-align-self-start {
  align-self: flex-start !important;
}
.flex-align-center {
  align-items: center !important;
}
.flex-align-self-center {
  align-self: center !important;
}
.flex-align-end {
  align-items: flex-end !important;
}
.flex-align-self-end {
  align-self: flex-end !important;
}

.object-position-left, .object-position-left-children > * {
  object-position: left;
}
.object-position-center, .object-position-center-children > * {
  object-position: center;
}
.object-position-right, .object-position-right-children > * {
  object-position: right;
}

.text-center {
  text-align: center;
}
.text-nowrap {
  white-space: nowrap;
}
.text-on-dark-bg {
  color: var(--text-on-dark-bg);
}
.text-on-light-bg {
  color: var(--text-on-light-bg);
}
.text-page {
  padding-bottom: 5rem;
}
.text-page .section-heading {
  margin-top: 5rem;
}

.margin-x-auto {
  margin-left: auto;
  margin-right: auto;
}

/*# sourceMappingURL=base.css.map */