@charset "UTF-8";
/*!
 * Violution GLOBAL THEME CSS
 * Copyright 2026 Violution GbR, Dortmund
 * Autor: Daniela Brigula
 */
/* Reset & Basics */
* {
  box-sizing: border-box;
}

html, body {
  overflow-x: hidden;
}

body, html {
  font-family: "Source Sans Pro", sans-serif;
  color: var(--text);
  font-weight: var(--regular);
  font-size: 19px;
  line-height: 1.7;
  margin: 0;
  padding: 0;
  position: relative;
  background-color: var(--background-white);
}

header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

/* Dark-Mode */
#darkModeToggle {
  display: none !important;
}

/* ACADEMY Button */
#academy_button a {
  color: var(--text) !important;
  border: 3px solid var(--text) !important;
  opacity: 0.75;
  background: 0 0;
  display: inline-block;
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  font-weight: var(--bold);
  font-style: normal;
  border-radius: 3px;
  transition: all 0.4s;
  line-height: 17px;
  letter-spacing: 0.05rem;
  font-size: 18px;
  padding: 8px 24px 8px 60px;
  text-transform: uppercase;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15), 0 1px 3px rgba(0, 0, 0, 0.15);
  position: relative;
  margin-top: -7px;
}
#academy_button a:before {
  transition: all 0.4s;
  content: "\ea4e";
  position: absolute;
  display: block;
  height: 19px;
  width: 18px;
  color: var(--text);
  font-size: 30px;
  font-family: "Lineicons", sans-serif;
  font-weight: var(--black);
  left: 15px;
}
#academy_button a:hover {
  opacity: 1;
  color: var(--button-hover) !important;
  border-color: var(--button-hover) !important;
}
#academy_button a:hover:before {
  color: var(--button-hover) !important;
}

#main .test-bg {
  background-color: #555;
  padding: 30px;
  margin: 15px 30px 15px 0;
}
#main .test-bg > *, #main .test-bg p, #main .test-bg h2, #main .test-bg h3, #main .test-bg h4 {
  color: #fff !important;
}

#main .test-bg-light {
  padding: 30px;
}

/* Mobile Features ausblenden */
.invisible {
  visibility: hidden !important;
  display: none !important;
}

.onlymobile, #hamburger-toggler, li.hide_desktop {
  display: none;
}

#mobile-topline-navigation {
  display: none !important;
}

/* Line-Icons */
i.lni {
  display: inline-block;
  position: relative;
  width: 30px;
  white-space: nowrap;
  color: transparent;
  font-size: 1px;
  font-family: "Lineicons", sans-serif;
  font-weight: var(--black);
}
i.lni:before {
  position: absolute;
  top: -18px;
  left: 0;
  font-size: 24px;
  text-indent: 0;
  color: var(--link-default);
}

/* Eigene Icons */
.vio_icon_links .lni {
  display: inline-block !important;
  position: relative;
  height: 1.2em;
  width: 1.2em;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.vio_icon_links .lni:before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: var(--black);
  font-size: 1.2em;
  text-indent: 0;
}

.icon-box {
  width: 100%;
  text-align: center;
}
.icon-box .icon {
  height: 60px;
  width: 60px;
  position: relative;
  display: block;
  margin: 0 auto 20px auto;
}
.icon-box .icon:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  height: 100%;
  width: 100%;
  background-size: contain;
  background-position: bottom center;
  background-repeat: no-repeat;
  transition: All 0.3s ease;
  -webkit-transition: All 0.3s ease;
}
.icon-box .icon:hover:before {
  transform: scale(1.1);
}
.icon-box.icon-software-development .icon:before {
  background-image: url("../layout/img/Vio_MarketIcons/Violution_Icon_Softwareentwicklung-w.svg");
  transform: scale(1.3);
  top: -8px;
}
.icon-box.icon-bpm .icon:before {
  background-image: url("../layout/img/Vio_MarketIcons/Violution_Icon_BPM-w.svg");
  transform: scale(1.05);
}
.icon-box.icon-apis .icon:before {
  background-image: url("../layout/img/Vio_MarketIcons/Violution_Icon_APIs-w.svg");
}
.icon-box.icon-contao .icon:before {
  background-image: url("../layout/img/Vio_MarketIcons/Violution_Icon_Contao-w.svg");
}
.icon-box.icon-e-commerce .icon:before {
  background-image: url("../layout/img/Vio_MarketIcons/Violution_Icon_Ecommerce-w.svg");
  top: 5px;
}
.icon-box.icon-apps .icon:before {
  background-image: url("../layout/img/Vio_MarketIcons/Violution_Icon_Apps-w.svg");
  transform: scale(1.25);
  top: -3px;
}

/* CD-Styles */
.prisma-bg-weiss, .prisma-bg, .prisma-bg-violett, .prisma-bg-dark {
  background-size: cover;
  background-repeat: no-repeat;
  background-color: rgba(255, 255, 255, 0.5);
  background-blend-mode: overlay;
  background-image: url("../layout/img/vio-prism-bg-weiss.svg");
}
.prisma-bg-weiss > h1, .prisma-bg-weiss h2, .prisma-bg-weiss p, .prisma-bg-weiss ul, .prisma-bg-weiss ol, .prisma-bg-weiss li, .prisma-bg > h1, .prisma-bg h2, .prisma-bg p, .prisma-bg ul, .prisma-bg ol, .prisma-bg li, .prisma-bg-violett > h1, .prisma-bg-violett h2, .prisma-bg-violett p, .prisma-bg-violett ul, .prisma-bg-violett ol, .prisma-bg-violett li, .prisma-bg-dark > h1, .prisma-bg-dark h2, .prisma-bg-dark p, .prisma-bg-dark ul, .prisma-bg-dark ol, .prisma-bg-dark li {
  color: var(--text) !important;
}
.prisma-bg-weiss > h1 .highlight-color, .prisma-bg-weiss h2 .highlight-color, .prisma-bg-weiss p .highlight-color, .prisma-bg-weiss ul .highlight-color, .prisma-bg-weiss ol .highlight-color, .prisma-bg-weiss li .highlight-color, .prisma-bg > h1 .highlight-color, .prisma-bg h2 .highlight-color, .prisma-bg p .highlight-color, .prisma-bg ul .highlight-color, .prisma-bg ol .highlight-color, .prisma-bg li .highlight-color, .prisma-bg-violett > h1 .highlight-color, .prisma-bg-violett h2 .highlight-color, .prisma-bg-violett p .highlight-color, .prisma-bg-violett ul .highlight-color, .prisma-bg-violett ol .highlight-color, .prisma-bg-violett li .highlight-color, .prisma-bg-dark > h1 .highlight-color, .prisma-bg-dark h2 .highlight-color, .prisma-bg-dark p .highlight-color, .prisma-bg-dark ul .highlight-color, .prisma-bg-dark ol .highlight-color, .prisma-bg-dark li .highlight-color {
  color: var(--highlight-color);
}
.prisma-bg-weiss h2 .highlight-color:not(.same-duktus), .prisma-bg h2 .highlight-color:not(.same-duktus), .prisma-bg-violett h2 .highlight-color:not(.same-duktus), .prisma-bg-dark h2 .highlight-color:not(.same-duktus) {
  margin-top: 10px;
  line-height: 33px;
  display: block;
  font-size: 27px;
}

.prisma-bg-violett {
  background-image: url("../layout/img/vio-prism-bg-violett.svg");
}

.prisma-bg-dark {
  background-image: url("../layout/img/vio-prism-bg-anthrazit.svg");
}

/* Links & Buttons */
a {
  color: var(--link-default);
  text-decoration: none;
  transition-property: all;
  transition-duration: 0.4s;
  transition-timing-function: linear;
}
a:hover {
  color: var(--link-default-hover);
}

a.text-link {
  display: block;
  margin-top: 12px;
  width: max-content;
  position: relative;
  font-weight: var(--semibold);
  text-transform: uppercase;
  letter-spacing: 0.03rem;
}
a.text-link.negative {
  color: var(--highlight);
}
a.text-link:hover {
  color: var(--link-default);
  text-decoration: none;
}
a.text-link:after {
  content: "\ea2a";
  display: inline-block;
  margin-left: 5px;
  padding-top: 5px;
  font-size: 23px;
  font-family: "Lineicons", sans-serif;
  font-weight: var(--black);
  right: -26px;
  position: absolute;
  top: -5px;
}

a[class*=button-],
.ce_hyperlink[class*=button-] a,
[class*=button-] a,
.contao-cookiebar .cc-btn,
button.submit.button-default {
  display: inline-block;
  position: relative;
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  font-weight: var(--semibold);
  font-style: normal;
  border-width: 0;
  border-style: solid;
  border-radius: 2px;
  transition: all 0.4s;
  line-height: 17px;
  font-size: 20px;
  padding: 15px 32px 16px 32px;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15), 0 1px 3px rgba(0, 0, 0, 0.15);
  background-size: 200% 200%;
  background-position: 0 0;
}
a[class*=button-]:hover,
.ce_hyperlink[class*=button-] a:hover,
[class*=button-] a:hover,
.contao-cookiebar .cc-btn:hover,
button.submit.button-default:hover {
  text-decoration: none !important;
  background-position: 100% 100%;
  box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.25), 0 4px 6px rgba(0, 0, 0, 0.3);
}

a.button-default,
.ce_hyperlink.button-default a,
.button-default a,
.contao-cookiebar .cc-btn.success,
.contao-cookiebar .cc-btn.save,
button.submit.button-default {
  color: var(--text_light);
  letter-spacing: 0.05rem;
  background: linear-gradient(135deg, var(--button) 25%, var(--button-hover) 65%);
}
a.button-default:hover,
.ce_hyperlink.button-default a:hover,
.button-default a:hover,
.contao-cookiebar .cc-btn.success:hover,
.contao-cookiebar .cc-btn.save:hover,
button.submit.button-default:hover {
  background: linear-gradient(10deg, var(--button-hover) 25%, var(--button) 65%);
  background-position: 100% 100%;
}

a.button-decent,
.ce_hyperlink.button-decent a,
.button-decent a,
.contao-cookiebar .cc-btn.deny,
.contao-cookiebar .cc-btn.info {
  color: var(--text_medium);
  background: linear-gradient(135deg, var(--background-decent) 25%, var(--text_transparent) 75%);
}
a.button-decent:hover,
.ce_hyperlink.button-decent a:hover,
.button-decent a:hover,
.contao-cookiebar .cc-btn.deny:hover,
.contao-cookiebar .cc-btn.info:hover {
  background: linear-gradient(10deg, var(--text_transparent) 25%, var(--background-decent) 75%);
  background-position: 100% 100%;
}

a.button-disabled,
.ce_hyperlink.button-disabled a,
.button-disabled a {
  color: #c2c2c2;
  font-weight: var(--regular);
  background: linear-gradient(135deg, var(--background-decent) 25%, var(--text_transparent) 75%);
  box-shadow: none;
  cursor: default;
  border: 1px dotted #c2c2c2;
}
a.button-disabled:hover,
.ce_hyperlink.button-disabled a:hover,
.button-disabled a:hover {
  color: #ccc;
  background: linear-gradient(135deg, var(--background-decent) 25%, var(--text_transparent) 75%);
  box-shadow: none;
}

a.button-outline,
.ce_hyperlink.button-outline a,
.button-outline a {
  color: var(--text_medium);
  border: 3px solid var(--highlight-color) !important;
  letter-spacing: 0.05rem;
  background: transparent;
}
a.button-outline:hover,
.ce_hyperlink.button-outline a:hover,
.button-outline a:hover {
  color: var(--button-hover);
  border-color: var(--button-hover);
}

a.button-outline,
.ce_hyperlink.button-outline a,
.button-outline a {
  color: var(--u-button);
  border: 3px solid var(--u-button);
  background: transparent;
}
a.button-outline:hover,
.ce_hyperlink.button-outline a:hover,
.button-outline a:hover {
  color: var(--u-button-hover);
  border-color: var(--u-button-hover);
}

a.button-outline-negative,
.ce_hyperlink.button-outline-negative a,
.button-outline-negative a {
  letter-spacing: 0.05rem;
  color: var(--full_white) !important;
  border: 3px solid var(--full_white);
  background: transparent;
}
a.button-outline-negative:hover,
.ce_hyperlink.button-outline-negative a:hover,
.button-outline-negative a:hover {
  color: var(--button-hover) !important;
  background: var(--full_white);
}

a.button-more,
.ce_hyperlink.button-more a,
.button-more a {
  color: var(--text_light);
  background: linear-gradient(135deg, var(--button) 25%, var(--button-hover) 75%);
  padding: 15px 46px 15px 20px;
}
a.button-more:hover,
.ce_hyperlink.button-more a:hover,
.button-more a:hover {
  background: linear-gradient(10deg, var(--button-hover) 25%, var(--button) 65%);
  background-position: 100% 100%;
}
a.button-more:before,
.ce_hyperlink.button-more a:before,
.button-more a:before {
  content: "";
  position: absolute;
  right: 14px;
  display: block;
  height: 19px;
  width: 18px;
  margin-top: -1px;
  background-image: url("../layout/img/arrow-white.svg");
  background-size: contain;
  background-repeat: no-repeat;
  top: 40%;
}

a.button-more.button-outline-negative,
.ce_hyperlink.button-more.button-outline-negative a,
.button-more.button-outline-negative a {
  background: transparent;
}
a.button-more.button-outline-negative:hover,
.ce_hyperlink.button-more.button-outline-negative a:hover,
.button-more.button-outline-negative a:hover {
  background: var(--full_white);
}
a.button-more.button-outline-negative:hover:before,
.ce_hyperlink.button-more.button-outline-negative a:hover:before,
.button-more.button-outline-negative a:hover:before {
  background-image: url("../layout/img/arrow.svg");
}

a.button-back,
.ce_hyperlink.button-back a,
.button-back a {
  color: var(--text_light);
  background: linear-gradient(135deg, var(--button) 25%, var(--button-hover) 75%);
  padding: 15px 20px 15px 46px;
}
a.button-back:hover,
.ce_hyperlink.button-back a:hover,
.button-back a:hover {
  background: linear-gradient(10deg, var(--button-hover) 25%, var(--button) 65%);
  background-position: 100% 100%;
}
a.button-back:before,
.ce_hyperlink.button-back a:before,
.button-back a:before {
  content: "";
  position: absolute;
  left: 14px;
  display: block;
  height: 19px;
  width: 18px;
  margin-top: -1px;
  background-image: url("../layout/img/arrow-white.svg");
  background-size: contain;
  background-repeat: no-repeat;
  top: 28%;
  transform: rotate(180deg);
}

.cc-close {
  font-size: 26px;
  right: 10px;
  top: 10px;
  width: 32px;
  height: 32px;
}

.contao-cookiebar .cc-btn {
  font-size: 17px;
  text-transform: none;
}

/* Binding */
.binding {
  margin: auto auto;
  max-width: 1400px;
}
.binding.small-binding, .binding.small_binding {
  max-width: 730px;
}
.binding.medium-binding, .binding.medium_binding {
  max-width: 960px;
}
.binding.menu-binding {
  max-width: 960px;
}
.binding .binding:not(.hero-content-binding) {
  max-width: 100%;
  min-width: 100%;
}

#main .mod_article.article-full-width .binding {
  max-width: 100%;
  min-width: 100%;
}

/* top line navigation */
#top-line-navigation {
  position: relative;
  height: 45px;
  color: var(--text_light);
  text-align: right;
  font-size: 13px;
  display: block;
  z-index: 10;
  width: 100%;
}
#top-line-navigation ul {
  display: flex;
  height: 100%;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
#top-line-navigation ul li {
  position: relative;
  height: 100%;
  width: 100%;
  list-style: none;
}
#top-line-navigation ul li.service-button a, #top-line-navigation ul li.service-button strong {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--full_white);
  text-align: center;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: var(--semibold);
  letter-spacing: 0.043rem;
}
#top-line-navigation ul li#logo, #top-line-navigation ul li#service1 a, #top-line-navigation ul li#service1 span {
  background-color: var(--m1_toplink_bg) !important;
}
#top-line-navigation ul li#service1 a:hover, #top-line-navigation ul li#service1 span:hover {
  background-color: var(--m2_toplink_bg_hover) !important;
}
#top-line-navigation ul li#service2 a {
  background-color: var(--m2_toplink_bg);
}
#top-line-navigation ul li#service2 a:hover {
  background-color: var(--m2_toplink_bg_hover);
}
#top-line-navigation ul li#service3 a {
  background-color: var(--m3_toplink_bg);
}
#top-line-navigation ul li#service3 a:hover {
  background-color: var(--m3_toplink_bg_hover);
}
#top-line-navigation ul li#service4 a {
  background-color: var(--m4_toplink_bg);
}
#top-line-navigation ul li#service4 a:hover {
  background-color: var(--m4_toplink_bg_hover);
}
#top-line-navigation ul li#service5 a {
  background-color: var(--m5_toplink_bg);
}
#top-line-navigation ul li#service5 a:hover {
  background-color: var(--m5_toplink_bg_hover);
}
#top-line-navigation ul li#service6 a {
  background-color: var(--m6_toplink_bg);
}
#top-line-navigation ul li#service6 a:hover {
  background-color: var(--m6_toplink_bg_hover);
}

/* Short-Cuts */
#vio_shortcuts {
  position: absolute;
  width: 160px;
  right: 50px;
  top: 60px;
  z-index: 1000;
  justify-content: space-between;
  align-items: center;
  align-content: center;
}
#vio_shortcuts.vio_icon_links .lni {
  height: 1.5em;
  width: 1.5em;
}
#vio_shortcuts.vio_icon_links .lni:before {
  font-size: 1.5em;
}
#vio_shortcuts .inner.row {
  height: auto;
  text-align: right;
  justify-content: flex-end;
  position: relative;
}
#vio_shortcuts .inner.row .col {
  height: 100%;
  position: relative;
  text-align: right;
  flex: 0 0 33.333%;
  max-width: 33.333%;
}
#vio_shortcuts .inner.row .col a {
  background-color: transparent;
  display: block;
  cursor: pointer;
  text-align: right;
  position: relative;
  color: var(--icons);
}
#vio_shortcuts .inner.row .col a:hover {
  color: var(--u-icons_hover);
  opacity: 0.5;
}
#vio_shortcuts.hamburger-open .inner .col a {
  color: var(--full_white);
}

/* Logo */
#logo {
  position: relative;
  overflow: visible;
}
#logo #logo-plate {
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  background-color: var(--full_white);
  text-align: center;
  height: auto;
  width: calc(100% - 68px);
  padding: 40px 0 40px 0;
  margin-left: 50px;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}
#logo img#full-logo {
  width: 160px;
  height: auto;
}

/* Main-Navigation (inkl. Logo) */
#navbar {
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  top: 0;
  backdrop-filter: blur(12px);
  position: relative;
  /* Sticky Navigation */
}
#navbar .row {
  height: 57px;
  align-items: center;
  justify-content: center;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  /* Main Navigation */
}
#navbar .row #main-navigation .mod_navigation {
  position: relative;
  z-index: 200;
  overflow: visible;
  display: block;
}
#navbar .row #main-navigation .mod_navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  /* Submenü */
}
#navbar .row #main-navigation .mod_navigation ul li {
  margin: 0 35px 0 35px;
  height: 100%;
  position: relative;
  cursor: pointer;
}
#navbar .row #main-navigation .mod_navigation ul li a {
  display: inline-block;
  width: 100%;
  font-size: 14px;
  line-height: 23px;
  box-sizing: border-box;
  letter-spacing: 0.08em;
  text-decoration: none;
  vertical-align: middle;
  transform: perspective(1px) translateZ(0);
  position: relative;
  overflow: visible;
}
#navbar .row #main-navigation .mod_navigation ul li:before {
  content: "";
  position: absolute;
  bottom: 9px;
  background-color: var(--primary4);
  border-radius: 2px;
  height: 2px;
  left: 51%;
  right: 51%;
  opacity: 0.4;
  transition-property: left, right;
  transition-duration: 0.25s;
  transition-timing-function: ease-out;
}
#navbar .row #main-navigation .mod_navigation ul li:hover:before, #navbar .row #main-navigation .mod_navigation ul li.active:before, #navbar .row #main-navigation .mod_navigation ul li.trail:before {
  left: 0;
  right: 0;
  display: block;
}
#navbar .row #main-navigation .mod_navigation ul li:hover a {
  color: var(--primary4);
}
#navbar .row #main-navigation .mod_navigation ul li a, #navbar .row #main-navigation .mod_navigation ul li strong.active, #navbar .row #main-navigation .mod_navigation ul li strong.forward, #navbar .row #main-navigation .mod_navigation ul li strong.trail {
  display: flex;
  height: 55px;
  color: var(--text);
  font-weight: var(--regular);
  letter-spacing: 1px;
  font-size: 22px;
  align-items: center;
  justify-content: center;
}
#navbar .row #main-navigation .mod_navigation ul li strong.active, #navbar .row #main-navigation .mod_navigation ul li strong.forward, #navbar .row #main-navigation .mod_navigation ul li strong.trail, #navbar .row #main-navigation .mod_navigation ul li a.trail {
  color: var(--primary4);
}
#navbar .row #main-navigation .mod_navigation ul .level_2, #navbar .row #main-navigation .mod_navigation ul .level_3 {
  position: absolute;
  left: 0;
  visibility: hidden;
  opacity: 0.75;
  z-index: 1;
  transition: opacity 0.2s ease-in;
  width: 280px;
  background-color: var(--bg-dark-violett);
  height: auto;
  top: 100%;
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.25);
  border-radius: 2px;
}
#navbar .row #main-navigation .mod_navigation ul .level_2 li, #navbar .row #main-navigation .mod_navigation ul .level_3 li {
  width: 100%;
  padding: 0;
  margin: 0;
  text-align: left;
  position: relative;
}
#navbar .row #main-navigation .mod_navigation ul .level_2 li:hover:before, #navbar .row #main-navigation .mod_navigation ul .level_2 li.active:before, #navbar .row #main-navigation .mod_navigation ul .level_3 li:hover:before, #navbar .row #main-navigation .mod_navigation ul .level_3 li.active:before {
  display: none;
}
#navbar .row #main-navigation .mod_navigation ul .level_2 li a, #navbar .row #main-navigation .mod_navigation ul .level_2 li strong.active, #navbar .row #main-navigation .mod_navigation ul .level_3 li a, #navbar .row #main-navigation .mod_navigation ul .level_3 li strong.active {
  color: var(--text_transparent);
  line-height: 1.25;
  letter-spacing: 0;
  font-style: normal;
  padding: 16px 30px 16px 30px;
  transition: all 0.2s ease-in-out;
  text-transform: none;
  font-size: 19px;
  text-align: left;
  font-weight: var(--regular);
  justify-content: left;
}
#navbar .row #main-navigation .mod_navigation ul .level_2 li a:hover, #navbar .row #main-navigation .mod_navigation ul .level_2 li strong.active:hover, #navbar .row #main-navigation .mod_navigation ul .level_3 li a:hover, #navbar .row #main-navigation .mod_navigation ul .level_3 li strong.active:hover {
  color: var(--background-white);
  background-color: var(--bg-dark-violett-lighter);
}
#navbar .row #main-navigation .mod_navigation ul .level_2 li:last-child a, #navbar .row #main-navigation .mod_navigation ul .level_2 li:last-child strong.active, #navbar .row #main-navigation .mod_navigation ul .level_3 li:last-child a, #navbar .row #main-navigation .mod_navigation ul .level_3 li:last-child strong.active {
  padding: 16px 30px 20px 30px;
}
#navbar .row #main-navigation .mod_navigation ul .level_2 li.active strong.active, #navbar .row #main-navigation .mod_navigation ul .level_3 li.active strong.active {
  color: var(--background-white);
  background-color: var(--bg-dark-violett-lighter);
}
#navbar .row #main-navigation .mod_navigation ul.level_1 li:hover > .level_2, #navbar .row #main-navigation .mod_navigation ul.level_2 li:hover > .level_3 {
  visibility: visible;
  opacity: 1;
}
#navbar .row #main-navigation .mod_navigation ul .level_3 {
  display: none;
}
#navbar.sticky-navigation {
  height: 102px;
  background: rgba(247, 248, 249, 0.6784313725) !important;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(12px);
  position: relative;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
}
#navbar.sticky-navigation.sticky {
  height: 60px;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
}
#navbar.sticky-navigation.sticky #logo-plate {
  transform: scale(0.7);
  margin-top: -20px;
  margin-left: 0;
  width: 240px;
}
#navbar.sticky-navigation.sticky #logo img#full-logo {
  width: 174px;
}
#navbar.sticky-navigation.sticky .row #main-navigation .mod_navigation {
  margin-top: -5px;
}
#navbar.sticky-navigation.sticky #vio_shortcuts {
  top: 12px;
}
#navbar.sticky-navigation.sticky #top-line-navigation {
  height: 0;
}
#navbar.sticky-navigation.sticky #service1,
#navbar.sticky-navigation.sticky #service2,
#navbar.sticky-navigation.sticky #service3,
#navbar.sticky-navigation.sticky #service4,
#navbar.sticky-navigation.sticky #service5,
#navbar.sticky-navigation.sticky #service6 {
  display: none;
}

/* Kontakt-Störer & Chat */
#contact-button {
  position: fixed;
  top: 50vh;
  right: 20px;
  cursor: pointer;
  border: 0;
  outline: 0;
  width: 80px;
  height: 60px;
  background-image: url("../layout/img/vio-contact-button.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
  transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out;
  opacity: 0;
  transform: translateY(500px);
  z-index: 999;
}
#contact-button.hidden {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  transform: translateY(0);
}
#contact-button.visible {
  opacity: 0.85;
  transform: translateY(0);
}
#contact-button.visible:hover {
  transform: scale(1.15);
  opacity: 1;
}

#contactWindow {
  color: var(--text);
  margin: 0;
  overflow: hidden;
  position: fixed;
  width: 520px;
  height: 330px;
  right: 0;
  bottom: 0;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  z-index: 10001;
  border-radius: 3px;
  transform: scale(0);
  transform-origin: top right;
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
  opacity: 0;
}
#contactWindow.active {
  transform: scale(1);
  opacity: 1;
}
#contactWindow .inner {
  position: relative;
  height: 100%;
  width: 100%;
  padding: 12px 30px 0 25px;
}
#contactWindow #contactWindowClose {
  position: absolute;
  top: 9px;
  right: -19px;
  border: none;
  outline: none;
  cursor: pointer;
  width: 30px;
  height: 30px;
  background: transparent;
}
#contactWindow #contactWindowClose i {
  position: relative;
  color: var(--bg-dark-violett-lighter);
}
#contactWindow #contactWindowClose i:before {
  position: absolute;
  top: -27px;
  left: -22px;
  font-size: 28px;
  opacity: 0.7;
}
#contactWindow #contactWindowClose i:hover:before {
  opacity: 1;
}
#contactWindow .contact-options {
  display: flex;
  margin-top: 25px;
}
#contactWindow .contact-options .col_6:last-child {
  text-align: right;
}
#contactWindow .contact-options .col_6:last-child .button-default {
  line-height: 11px;
  padding: 15px 25px 14px;
  font-size: 16px;
}
#contactWindow .contact-options a:not(.button-default) {
  display: block;
  font-size: 20px;
  font-weight: var(--semibold);
  color: var(--link-default);
  position: relative;
  padding-left: 40px;
  margin-bottom: 9px;
}
#contactWindow .contact-options a:not(.button-default):hover {
  color: var(--link-default-hover);
}
#contactWindow .contact-options a:not(.button-default) i {
  font-size: 30px;
  position: absolute;
  top: 22px;
  left: 0;
}
#contactWindow #vio-live-chat {
  display: block;
  width: 100%;
  height: 55%;
  margin: 0;
  border-radius: 3px;
  background-color: var(--whitefilter);
  box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.08);
}
#contactWindow #vio-live-chat .chat-not-availible {
  display: block;
  width: 100%;
  color: var(--text-medium);
  text-align: center;
  line-height: 21px;
  font-size: 16px;
  padding-top: 15%;
}

/* Suche Overlayer */
#search-input {
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s linear;
  display: block;
  z-index: -10000;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.85);
}
#search-input .label {
  font-weight: var(--regular);
  font-size: 38px;
  color: var(--full_white);
  margin-bottom: 0;
}
#search-input.show-search {
  -webkit-animation: none;
  animation: none;
  visibility: visible;
  opacity: 1;
  z-index: 10000;
}
#search-input.show-search .close-window i {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 66px;
  right: 30px;
  cursor: pointer;
  color: var(--full_white) !important;
}
#search-input.show-search .close-window i:before {
  font-size: 50px;
  color: var(--full_white) !important;
}
#search-input.show-search .close-window i:hover {
  color: var(--backdrop-filter-bg);
}
#search-input.show-search:before {
  content: "";
  height: 50%;
  display: block;
  margin-bottom: -120px;
  box-sizing: inherit;
}
#search-input.show-search h4 {
  font-weight: var(--semibold);
  font-size: 38px;
  text-align: center;
  display: block;
  color: var(--text_light);
  margin-bottom: 25px;
}
#search-input.show-search form {
  max-width: 650px;
  margin: 0 auto;
  height: 100%;
  text-align: center;
}
#search-input.show-search form input {
  background: rgba(255, 255, 255, 0.2);
  font-size: 20px;
  padding: 20px 40px;
  color: var(--full_white);
  border: 0;
  border-radius: 5px;
  transition: All 0.3s ease;
  -webkit-transition: All 0.3s ease;
  margin-top: 11px;
  margin-bottom: 30px;
  width: 100%;
}
#search-input.show-search form input:hover, #search-input.show-search form input:focus {
  border: 0;
  outline: 0;
  background: rgba(255, 255, 255, 0.5);
  color: var(--full_white);
}
#search-input.show-search form button.submit {
  background: transparent;
  color: var(--background-white);
  border-width: 3px;
  border-style: solid;
  border-color: var(--background-white);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 15px;
  border-radius: 3px;
  white-space: nowrap;
  display: inline-block;
  padding: 15px 20px;
  font-family: "Source Sans Pro", sans-serif;
  font-weight: var(--semibold);
  min-width: 240px;
  text-align: center;
  position: relative;
  -webkit-appearance: none;
  transition: All 0.3s linear;
  -webkit-transition: All 0.3s linear;
}
#search-input.show-search form button.submit:hover, #search-input.show-search form button.submit:focus {
  background-color: var(--background-white);
  border-color: var(--background-white);
  color: var(--button_hover);
}

/* Main & Article and backgrounds & Special Headlines, Hintergründe */
#main .mod_article {
  padding-top: 60px;
  padding-bottom: 60px;
  /* Zweispalter mit einem Seitenbild */
}
#main .mod_article > h1 .highlight-color, #main .mod_article h2 .highlight-color, #main .mod_article p .highlight-color, #main .mod_article ul .highlight-color, #main .mod_article ol .highlight-color, #main .mod_article li .highlight-color {
  color: var(--highlight-color);
}
#main .mod_article.article_shadow_bottom {
  box-shadow: 0 8px 6px 2px rgba(0, 0, 0, 0.03);
}
#main .mod_article.article_shadow_inset_top {
  box-shadow: inset 0 8px 6px 0px rgba(0, 0, 0, 0.03);
}
#main .mod_article.article_shadow_inset_bottom {
  box-shadow: inset 0 -8px 6px 0px rgba(0, 0, 0, 0.03);
}
#main .mod_article.article_no_padding {
  padding-top: 0;
  padding-bottom: 0;
}
#main .mod_article.article_bg_decent {
  background-color: var(--background-decent);
}
#main .mod_article.article_bg_decent > h1, #main .mod_article.article_bg_decent h2, #main .mod_article.article_bg_decent p, #main .mod_article.article_bg_decent ul, #main .mod_article.article_bg_decent ol, #main .mod_article.article_bg_decent li {
  color: var(--text);
}
#main .mod_article.article_bg_decent > h1 .highlight-color, #main .mod_article.article_bg_decent h2 .highlight-color, #main .mod_article.article_bg_decent p .highlight-color, #main .mod_article.article_bg_decent ul .highlight-color, #main .mod_article.article_bg_decent ol .highlight-color, #main .mod_article.article_bg_decent li .highlight-color {
  color: var(--highlight-color);
}
#main .mod_article.article_bg_decent .content-text:not(.h2_small) h2 {
  font-size: 40px;
}
#main .mod_article.article_bg_decent .content-text:not(.h2_small) h2 .highlight-color:not(.same-duktus) {
  margin-top: 10px;
  line-height: 33px;
  display: block;
  font-size: 27px;
}
#main .mod_article.article_bg_white {
  background-color: var(--background-white);
}
#main .mod_article.article_bg_white > h1, #main .mod_article.article_bg_white h2, #main .mod_article.article_bg_white p, #main .mod_article.article_bg_white ul, #main .mod_article.article_bg_white ol, #main .mod_article.article_bg_white li {
  color: var(--text);
}
#main .mod_article.article_bg_white > h1 .highlight-color, #main .mod_article.article_bg_white h2 .highlight-color, #main .mod_article.article_bg_white p .highlight-color, #main .mod_article.article_bg_white ul .highlight-color, #main .mod_article.article_bg_white ol .highlight-color, #main .mod_article.article_bg_white li .highlight-color {
  color: var(--highlight-color);
}
#main .mod_article.article_bg_white h2 .highlight-color:not(.same-duktus) {
  margin-top: 10px;
  line-height: 33px;
  display: block;
  font-size: 27px;
}
#main .mod_article.article_bg_decent_darkgrey {
  background-color: var(--background-atrazit);
}
#main .mod_article.article_bg_decent_darkgrey > h1, #main .mod_article.article_bg_decent_darkgrey h2, #main .mod_article.article_bg_decent_darkgrey p, #main .mod_article.article_bg_decent_darkgrey ul, #main .mod_article.article_bg_decent_darkgrey ol, #main .mod_article.article_bg_decent_darkgrey li {
  color: var(--full_white);
}
#main .mod_article.article_bg_decent_darkgrey > h1 .highlight-color, #main .mod_article.article_bg_decent_darkgrey h2 .highlight-color, #main .mod_article.article_bg_decent_darkgrey p .highlight-color, #main .mod_article.article_bg_decent_darkgrey ul .highlight-color, #main .mod_article.article_bg_decent_darkgrey ol .highlight-color, #main .mod_article.article_bg_decent_darkgrey li .highlight-color {
  color: var(--highlight);
}
#main .mod_article.article_bg_decent_darkgrey h2 {
  margin-bottom: 0;
}
#main .mod_article.article_bg_decent_darkgrey h2 .highlight-color:not(.same-duktus) {
  margin-top: 10px;
  line-height: 33px;
  display: block;
  font-size: 27px;
}
#main .mod_article.article_bg_dark_violett {
  background-color: var(--footer_bg);
}
#main .mod_article.article_bg_dark_violett > h1, #main .mod_article.article_bg_dark_violett h2, #main .mod_article.article_bg_dark_violett p, #main .mod_article.article_bg_dark_violett ul, #main .mod_article.article_bg_dark_violett ol, #main .mod_article.article_bg_dark_violett li {
  color: var(--full_white);
}
#main .mod_article.article_bg_dark_violett > h1 .highlight-color, #main .mod_article.article_bg_dark_violett h2 .highlight-color, #main .mod_article.article_bg_dark_violett p .highlight-color, #main .mod_article.article_bg_dark_violett ul .highlight-color, #main .mod_article.article_bg_dark_violett ol .highlight-color, #main .mod_article.article_bg_dark_violett li .highlight-color {
  color: var(--highlight);
}
#main .mod_article.article_bg_dark_violett h2 {
  margin-bottom: 0;
}
#main .mod_article.article_bg_dark_violett h2 .highlight-color:not(.same-duktus) {
  margin-top: 10px;
  line-height: 33px;
  display: block;
  font-size: 27px;
}
#main .mod_article.article_bg_galerie {
  background-color: var(--background-gallery);
}
#main .mod_article.article_bg_galerie > h1, #main .mod_article.article_bg_galerie h2, #main .mod_article.article_bg_galerie p, #main .mod_article.article_bg_galerie ul, #main .mod_article.article_bg_galerie ol, #main .mod_article.article_bg_galerie li {
  color: var(--full_white);
}
#main .mod_article.article_bg_galerie > h1 .highlight-color, #main .mod_article.article_bg_galerie h2 .highlight-color, #main .mod_article.article_bg_galerie p .highlight-color, #main .mod_article.article_bg_galerie ul .highlight-color, #main .mod_article.article_bg_galerie ol .highlight-color, #main .mod_article.article_bg_galerie li .highlight-color {
  color: var(--highlight);
}
#main .mod_article.article_bg_galerie h2 {
  margin-bottom: 0;
}
#main .mod_article.article_bg_galerie h2 .highlight-color:not(.same-duktus) {
  margin-top: 10px;
  line-height: 33px;
  display: block;
  font-size: 27px;
}
#main .mod_article.article_bg_fullwhite {
  background-color: var(--full_white);
}
#main .mod_article.article_bg_fullwhite > h1, #main .mod_article.article_bg_fullwhite h2, #main .mod_article.article_bg_fullwhite p, #main .mod_article.article_bg_fullwhite ul, #main .mod_article.article_bg_fullwhite ol, #main .mod_article.article_bg_fullwhite li {
  color: var(--text);
}
#main .mod_article.article_bg_fullwhite > h1 .highlight-color, #main .mod_article.article_bg_fullwhite h2 .highlight-color, #main .mod_article.article_bg_fullwhite p .highlight-color, #main .mod_article.article_bg_fullwhite ul .highlight-color, #main .mod_article.article_bg_fullwhite ol .highlight-color, #main .mod_article.article_bg_fullwhite li .highlight-color {
  color: var(--highlight-color);
}
#main .mod_article.article_bg_fullwhite h2 .highlight-color:not(.same-duktus) {
  margin-top: 10px;
  line-height: 33px;
  display: block;
  font-size: 27px;
}
#main .mod_article.same-height .row {
  align-items: stretch;
  flex-direction: row;
}
#main .mod_article.same-height .row .content-text {
  margin-bottom: 0;
}
#main .mod_article.article-full-width .binding {
  max-width: 100%;
}
#main .mod_article.article-full-width .row {
  align-items: stretch;
}
#main .mod_article.article-full-width .side-picture {
  border-radius: 0;
}
#main .mod_article.article-full-width .side-picture figure {
  margin: 0;
  padding: 0;
  display: block;
  height: 100%;
  width: 100%;
  position: relative;
  border-radius: 0;
}
#main .mod_article.article-full-width .side-picture figure img {
  display: block;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 0;
}
#main .mod_article.article_hero {
  height: 100vh;
  min-height: 800px;
  position: relative;
}
#main .mod_article:first-child:not(.article_hero) {
  padding-top: 240px !important;
}
#main .mod_article.cols-space-between div[class*=col] {
  margin: 10px;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
}
#main .mod_article.cols-space-between.three-cols .binding.row {
  max-width: 1420px;
}
#main .mod_article.cols-space-between.three-cols .binding.row .col_4 {
  flex: 0 0 calc(33.333% - 20px);
  max-width: calc(33.333% - 20px);
}
#main .mod_article .fullscreen {
  width: 100%;
  height: 100%;
}

/* News (alle Varianten) */
#main .mod_newslist {
  width: 100%;
  display: block;
  position: relative;
}

/* Spezial Layouts */
#main .benefit-item {
  position: relative;
  display: block;
  margin-bottom: 30px;
  padding-left: 50px;
  /* ROOMS Benefit List */
}
#main .benefit-item strong, #main .benefit-item h3 {
  font-size: 23px;
  line-height: 30px;
  display: block;
  margin-bottom: 10px;
  font-weight: var(--bold);
  color: var(--text);
  margin-top: 6px;
}
#main .benefit-item br {
  display: none;
}
#main .benefit-item:before {
  content: "\eb69";
  position: absolute;
  left: 0;
  top: 3px;
  display: block;
  font-family: "Lineicons", sans-serif;
  font-weight: var(--black);
  transition: All 0.3s ease;
  -webkit-transition: All 0.3s ease;
  color: var(--primary2);
  font-size: 38px;
  line-height: 38px;
}
#main .benefit-item.volumen:before {
  content: "\ec2f";
}
#main .benefit-item.location:before {
  content: "\eb45";
}
#main .benefit-item.travel:before {
  content: "\ea70";
}
#main .benefit-item.access:before {
  content: "\ec49";
}
#main .benefit-item.hoster:before {
  content: "\ea16";
}
#main .benefit-item.comfort:before {
  content: "\eaeb";
}
#main .benefit-item.technic-ready:before {
  content: "\eb35";
}
#main .benefit-item.cleaning:before {
  content: "\ec17";
}
#main .benefit-item.extras:before {
  content: "\ea6c";
  transform: rotate(-40deg);
}
#main .benefit-item.storno:before {
  content: "\eae2";
}
#main .price_list h2, #main .content_card_text_combi h2 {
  color: var(--text);
}
#main .price_list .price-button a.button-default, #main .content_card_text_combi .price-button a.button-default {
  width: 360px;
  padding: 24px 32px;
}
#main .price_list .price, #main .content_card_text_combi .price {
  margin-top: 40px;
}
#main .price_list .price:before, #main .content_card_text_combi .price:before {
  content: "";
  display: block;
  background-color: rgba(74, 74, 82, 0.25);
  width: 360px;
  height: 3px;
  margin-bottom: 18px;
  opacity: 0.5;
}
#main .price_list .price strong, #main .content_card_text_combi .price strong {
  color: var(--text);
  font-size: 42px;
  line-height: 50px;
  font-weight: var(--bold);
}

#main .mod_newslist .swiper.marquee-swiper {
  transition-timing-function: linear;
  align-items: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 100%;
  overflow: hidden;
}
#main .mod_newslist .swiper.marquee-swiper .swiper-wrapper.marquee-swiper {
  transition-timing-function: linear;
  align-items: center;
}
#main .mod_newslist .swiper.marquee-swiper .swiper-slide.marquee-swiper {
  width: 12rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
#main .mod_newslist .swiper.marquee-swiper .layout_latest {
  transition: all 0.3s ease-in-out;
  padding: 10px 10px 20px 10px;
}
#main .mod_newslist .swiper.marquee-swiper .layout_latest .inside {
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  position: relative;
}
#main .mod_newslist .swiper.marquee-swiper .layout_latest .inside figure {
  border-radius: 3px;
  padding: 0;
  margin: 0;
  height: 300px;
  width: 100%;
  display: block;
  justify-content: center;
  align-items: center;
}
#main .mod_newslist .swiper.marquee-swiper .layout_latest .inside figure img {
  border-radius: 3px;
  padding: 0;
  margin: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
#main .mod_newslist .swiper.marquee-swiper .layout_latest .inside .text {
  position: absolute;
  bottom: 0;
  display: flex;
  flex-direction: column;
  text-align: left;
  justify-content: flex-start;
  align-items: flex-start;
  height: 30%;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 15px 20px 0 20px;
  z-index: 2;
  transition: all 0.4s ease-in-out;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}
#main .mod_newslist .swiper.marquee-swiper .layout_latest .inside .text h3 {
  margin-top: 0;
  margin-bottom: 0;
  line-height: 23px;
  font-weight: var(--semibold);
  font-size: 19px;
  transition: transform 0.4s ease-out;
}
#main .mod_newslist .swiper.marquee-swiper .layout_latest .inside .text h3 a {
  color: var(--text);
}
#main .mod_newslist .swiper.marquee-swiper .layout_latest .inside .text p {
  font-size: 17px;
  line-height: 20px;
  font-weight: var(--regular);
  margin-bottom: 0;
  max-width: 100%;
  color: var(--text_medium);
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s ease-out;
  height: 0;
  overflow: visible;
}
#main .mod_newslist .swiper.marquee-swiper .layout_latest .inside:hover .text {
  height: 50%;
  background-color: rgb(255, 255, 255);
}
#main .mod_newslist .swiper.marquee-swiper .layout_latest .inside:hover .text h3 {
  transform: translateY(-10px);
}
#main .mod_newslist .swiper.marquee-swiper .layout_latest .inside:hover .text p {
  opacity: 1;
  height: 120px;
  transform: translateY(0);
}

/* News Teaser auf der Startseite */
#main #latestThree.mod_newslist {
  display: block;
  text-align: center;
  position: relative;
  height: 650px;
  padding: 20px 120px;
}
#main #latestThree.mod_newslist .latest_three_item {
  width: 50%;
  transition: all 0.3s ease-in-out;
  padding: 10px;
  float: left;
  position: relative;
}
#main #latestThree.mod_newslist .latest_three_item .inside {
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  position: relative;
  height: 100%;
}
#main #latestThree.mod_newslist .latest_three_item .inside figure {
  border-radius: 3px;
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  display: block;
  justify-content: center;
  align-items: center;
}
#main #latestThree.mod_newslist .latest_three_item .inside figure img {
  border-radius: 3px;
  padding: 0;
  margin: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
#main #latestThree.mod_newslist .latest_three_item .inside .text {
  position: absolute;
  bottom: 0;
  display: flex;
  flex-direction: column;
  text-align: left;
  justify-content: flex-start;
  align-items: flex-start;
  height: 30%;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.85);
  padding: 20px 22px 0 22px;
  z-index: 2;
  transition: all 0.4s ease-in-out;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}
#main #latestThree.mod_newslist .latest_three_item .inside .text h3 {
  margin-top: 0;
  line-height: 26px;
  font-weight: var(--semibold);
  font-size: 26px;
  margin-bottom: 4px;
  color: var(--primary);
}
#main #latestThree.mod_newslist .latest_three_item .inside .text p {
  font-size: 19px;
  line-height: 25px;
  font-weight: var(--regular);
  max-width: 90%;
  color: var(--text);
}
#main #latestThree.mod_newslist .latest_three_item .inside .text p.date {
  color: var(--h-default);
  font-size: 17px;
  margin-bottom: 10px;
  font-weight: var(--regular);
}
#main #latestThree.mod_newslist .latest_three_item:nth-child(1) {
  width: 50%;
  height: 600px;
}
#main #latestThree.mod_newslist .latest_three_item:nth-child(2), #main #latestThree.mod_newslist .latest_three_item:nth-child(3) {
  height: 300px;
  width: 25%;
}
#main #latestThree.mod_newslist .latest_three_item:nth-child(2) .text, #main #latestThree.mod_newslist .latest_three_item:nth-child(3) .text {
  height: 40%;
  padding: 10px 22px 0 22px;
}
#main #latestThree.mod_newslist .latest_three_item:nth-child(2) .text h3, #main #latestThree.mod_newslist .latest_three_item:nth-child(3) .text h3 {
  line-height: 22px;
  font-size: 20px;
}
#main #latestThree.mod_newslist .latest_three_item:nth-child(2) .text p:not(.date), #main #latestThree.mod_newslist .latest_three_item:nth-child(3) .text p:not(.date) {
  display: none;
}
#main #latestThree.mod_newslist .latest_three_item:nth-child(4) {
  height: 300px;
  width: 50%;
}
#main #latestThree.mod_newslist .latest_three_item:nth-child(4) .text {
  height: 40%;
  padding: 15px 22px 0 22px;
}
#main #latestThree.mod_newslist .latest_three_item:nth-child(4) .text h3 {
  line-height: 22px;
  font-size: 20px;
}
#main #latestThree.mod_newslist .latest_three_item:nth-child(4) .text p:not(.date) {
  display: none;
}
#main #latestThree.mod_newslist .latest_three_item:hover {
  transform: scale(1.1);
  z-index: 1000;
}

#main .mod_newslist .project_teaser, #main .mod_newslist .hottopic_teaser {
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
  background-color: var(--background-atrazit);
  position: relative;
  margin: 60px 0;
  border-radius: 5px;
}
#main .mod_newslist .project_teaser .inside .row, #main .mod_newslist .hottopic_teaser .inside .row {
  height: 520px;
  position: relative;
}
#main .mod_newslist .project_teaser .inside .row .text, #main .mod_newslist .hottopic_teaser .inside .row .text {
  background-image: url("../../violution-company/content/news_referenzen/projekt_vektor.svg");
  background-size: 24%;
  background-position: 95% 90%;
  background-repeat: no-repeat;
  padding-right: 2rem;
  padding-left: 5rem;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
#main .mod_newslist .project_teaser .inside .row .text h3, #main .mod_newslist .project_teaser .inside .row .text h4, #main .mod_newslist .project_teaser .inside .row .text p, #main .mod_newslist .hottopic_teaser .inside .row .text h3, #main .mod_newslist .hottopic_teaser .inside .row .text h4, #main .mod_newslist .hottopic_teaser .inside .row .text p {
  color: var(--full_white);
}
#main .mod_newslist .project_teaser .inside .row .text h3, #main .mod_newslist .hottopic_teaser .inside .row .text h3 {
  font-size: 32px;
  text-transform: uppercase;
  font-weight: var(--semibold);
  line-height: 1.3;
  color: var(--full_white);
  display: block;
  width: 100%;
  margin-bottom: 0.5em;
  margin-top: 0;
  max-width: 80%;
}
#main .mod_newslist .project_teaser .inside .row .text p.more, #main .mod_newslist .hottopic_teaser .inside .row .text p.more {
  margin-bottom: 0;
}
#main .mod_newslist .project_teaser .inside .row a.col_6 figure, #main .mod_newslist .hottopic_teaser .inside .row a.col_6 figure {
  height: 520px;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
#main .mod_newslist .project_teaser .inside .row a.col_6 figure img, #main .mod_newslist .hottopic_teaser .inside .row a.col_6 figure img {
  display: block;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  object-fit: cover;
  transition: all 0.3s linear;
}
#main .mod_newslist .project_teaser .inside .row a.col_6 figure:hover img, #main .mod_newslist .hottopic_teaser .inside .row a.col_6 figure:hover img {
  transform: scale(1.1);
}
#main .mod_newslist .hottopic_teaser {
  background-color: var(--background-decent_grey);
}
#main .mod_newslist .hottopic_teaser .inside .row .text {
  background-image: url("../../violution-company/content/news_hottopics/hottopic_vektor.svg");
}
#main .mod_newslist .hottopic_teaser .inside .row .text h3 {
  color: var(--primary);
}
#main .mod_newslist .hottopic_teaser .inside .row .text p {
  color: var(--text);
}
#main .mod_newslist .col-reverse.odd .row {
  flex-direction: row-reverse;
}

/* Flexbox elements ---------------------------------------------------------------------------------------------------------*/
.mod_article.row .inner, .row, #footer .inside.row {
  display: flex;
  flex-wrap: wrap;
}

.mod_article.row.vertical-centered .inner, .row.vertical-centered, .mod_article.vertical-centered .row, #footer .inside.row.vertical-centered {
  align-items: center;
}

[class*=col].vertical-centered {
  align-items: center;
  display: flex;
}
[class*=col].padding-right {
  padding-right: 20px;
}
[class*=col].padding-left {
  padding-left: 20px;
}
[class*=col].padding-left-large {
  padding-left: 80px;
}
[class*=col].padding-right-large {
  padding-right: 80px;
  padding-left: 80px;
}
[class*=col] figure {
  margin: 0;
}
[class*=col].align-right {
  text-align: right;
}
[class*=col].align-right figure {
  text-align: right !important;
}

.content [class*=col] {
  padding: 0;
}
.content [class*=col] figure {
  margin: 0;
}

.col-1, .col_1 {
  flex: 0 0 8.333%;
  max-width: 8.333%;
}

.col-2, .col_2 {
  flex: 0 0 16.666%;
  max-width: 16.666%;
}

.col-3, .col_3 {
  flex: 0 0 25%;
  max-width: 25%;
}

.col-4, .col_4 {
  flex: 0 0 33.333%;
  max-width: 33.333%;
}

.col-5, .col_5 {
  flex: 0 0 41.666%;
  max-width: 41.666%;
}

.col-6, .col_6 {
  flex: 0 0 50%;
  max-width: 50%;
}

.col-7, .col_7 {
  flex: 0 0 58.333%;
  max-width: 58.333%;
}

.col-8, .col_8 {
  flex: 0 0 66.666%;
  max-width: 66.666%;
}

.col-9, .col_9 {
  flex: 0 0 75%;
  max-width: 75%;
}

.col-10, .col_10 {
  flex: 0 0 83.333%;
  max-width: 83.333%;
}

.col-11, .col_11 {
  flex: 0 0 91.666%;
  max-width: 91.666%;
}

.col-12, .col_12 {
  flex: 0 0 100%;
  max-width: 100%;
}

.col-1 > .col-1, .col_1 > .col_1,
.col-2 > .col-2, .col_2 > .col_2,
.col-3 > .col-3, .col_3 > .col_3,
.col-4 > .col-4, .col_4 > .col_4,
.col-5 > .col-5, .col_5 > .col_5,
.col-6 > .col-6, .col_6 > .col_6,
.col-7 > .col-7, .col_7 > .col_7,
.col-8 > .col-8, .col_8 > .col_8,
.col-9 > .col-9, .col_9 > .col_9,
.col-10 > .col-10, .col_10 > .col_10,
.col-11 > .col-11, .col_11 > .col_11,
.col-12 > .col-12, .col_12 > .col_12 {
  flex: none;
  max-width: 100%;
  display: block;
  width: 100%;
}

/* Abstands-Optionen für Contao CE-Elemente */
.m-top-0 {
  margin-top: 0 !important;
}

.m-top-10 {
  margin-top: 10px !important;
}

.m-top-10 .m-top-10 {
  margin-top: 0 !important;
}

.m-top-15 {
  margin-top: 15px !important;
}

.m-top-15 .m-top-15 {
  margin-top: 0 !important;
}

.m-top-20 {
  margin-top: 20px !important;
}

.m-top-20 .m-top-20 {
  margin-top: 0 !important;
}

.m-top-30 {
  margin-top: 30px !important;
}

.m-top-30 .m-top-30 {
  margin-top: 0 !important;
}

.m-top-40 {
  margin-top: 40px !important;
}

.m-top-40 .m-top-40 {
  margin-top: 0 !important;
}

.m-top-50 {
  margin-top: 50px !important;
}

.m-top-50 .m-top-50 {
  margin-top: 0 !important;
}

.m-top-60 {
  margin-top: 60px !important;
}

.m-top-60 .m-top-60 {
  margin-top: 0 !important;
}

.m-top-70 {
  margin-top: 70px !important;
}

.m-top-70 .m-top-70 {
  margin-top: 0 !important;
}

.m-top-80 {
  margin-top: 80px !important;
}

.m-top-80 .m-top-80 {
  margin-top: 0 !important;
}

.m-top-90 {
  margin-top: 90px !important;
}

.m-top-90 .m-top-90 {
  margin-top: 0 !important;
}

.m-top-100 {
  margin-top: 100px !important;
}

.m-top-100 .m-top-100 {
  margin-top: 0 !important;
}

.m-top-110 {
  margin-top: 110px !important;
}

.m-top-110 .m-top-110 {
  margin-top: 0 !important;
}

.m-top-120 {
  margin-top: 120px !important;
}

.m-top-120 .m-top-120 {
  margin-top: 0 !important;
}

.m-top-130 {
  margin-top: 130px !important;
}

.m-top-130 .m-top-130 {
  margin-top: 0 !important;
}

.m-top-140 {
  margin-top: 140px !important;
}

.m-top-140 .m-top-140 {
  margin-top: 0 !important;
}

.m-top-150 {
  margin-top: 150px !important;
}

.m-top-150 .m-top-150 {
  margin-top: 0 !important;
}

.m-top-160 {
  margin-top: 160px !important;
}

.m-top-160 .m-top-160 {
  margin-top: 0 !important;
}

.m-top-170 {
  margin-top: 170px !important;
}

.m-top-170 .m-top-170 {
  margin-top: 0 !important;
}

.m-top-180 {
  margin-top: 180px !important;
}

.m-top-180 .m-top-180 {
  margin-top: 0 !important;
}

.m-top-190 {
  margin-top: 190px !important;
}

.m-top-190 .m-top-190 {
  margin-top: 0 !important;
}

.m-bottom-0 {
  margin-bottom: 0 !important;
}

.m-bottom-10 {
  margin-bottom: 10px !important;
}

.m-bottom-10 .m-bottom-10 {
  margin-bottom: 0 !important;
}

.m-bottom-15 {
  margin-bottom: 15px !important;
}

.m-bottom-15 .m-bottom-15 {
  margin-bottom: 0 !important;
}

.m-bottom-20 {
  margin-bottom: 20px !important;
}

.m-bottom-20 .m-bottom-20 {
  margin-bottom: 0 !important;
}

.m-bottom-30 {
  margin-bottom: 30px !important;
}

.m-bottom-30 .m-bottom-30 {
  margin-bottom: 0 !important;
}

.m-bottom-40 {
  margin-bottom: 40px !important;
}

.m-bottom-40 .m-bottom-40 {
  margin-bottom: 0 !important;
}

.m-bottom-50 {
  margin-bottom: 50px !important;
}

.m-bottom-50 .m-bottom-50 {
  margin-bottom: 0 !important;
}

.m-bottom-60 {
  margin-bottom: 60px !important;
}

.m-bottom-60 .m-bottom-60 {
  margin-bottom: 0 !important;
}

.m-bottom-70 {
  margin-bottom: 70px !important;
}

.m-bottom-70 .m-bottom-70 {
  margin-bottom: 0 !important;
}

.m-bottom-80 {
  margin-bottom: 80px !important;
}

.m-bottom-80 .m-bottom-80 {
  margin-bottom: 0 !important;
}

.m-bottom-90 {
  margin-bottom: 90px !important;
}

.m-bottom-90 .m-bottom-90 {
  margin-bottom: 0 !important;
}

.m-bottom-100 {
  margin-bottom: 100px !important;
}

.m-bottom-100 .m-bottom-100 {
  margin-bottom: 0 !important;
}

.m-bottom-110 {
  margin-bottom: 110px !important;
}

.m-bottom-110 .m-bottom-110 {
  margin-bottom: 0 !important;
}

.m-bottom-120 {
  margin-bottom: 120px !important;
}

.m-bottom-120 .m-bottom-120 {
  margin-bottom: 0 !important;
}

.m-bottom-130 {
  margin-bottom: 130px !important;
}

.m-bottom-130 .m-bottom-130 {
  margin-bottom: 0 !important;
}

.m-bottom-140 {
  margin-bottom: 140px !important;
}

.m-bottom-140 .m-bottom-140 {
  margin-bottom: 0 !important;
}

.m-bottom-150 {
  margin-bottom: 150px !important;
}

.m-bottom-150 .m-bottom-150 {
  margin-bottom: 0 !important;
}

.m-bottom-160 {
  margin-bottom: 160px !important;
}

.m-bottom-160 .m-bottom-160 {
  margin-bottom: 0 !important;
}

.m-bottom-170 {
  margin-bottom: 170px !important;
}

.m-bottom-170 .m-bottom-170 {
  margin-bottom: 0 !important;
}

.m-bottom-180 {
  margin-bottom: 180px !important;
}

.m-bottom-180 .m-bottom-180 {
  margin-bottom: 0 !important;
}

.m-bottom-190 {
  margin-bottom: 190px !important;
}

.m-bottom-190 .m-bottom-190 {
  margin-bottom: 0 !important;
}

.m-left-0 {
  margin-left: 0 !important;
}

.m-left-20 {
  margin-left: 20px !important;
}

.m-left-40 {
  margin-left: 40px !important;
}

.m-left-60 {
  margin-left: 60px !important;
}

.m-left-80 {
  margin-left: 80px !important;
}

.m-left-100 {
  margin-left: 100px !important;
}

.m-right-0 {
  margin-right: 0 !important;
}

.m-right-20 {
  margin-right: 20px !important;
}

.m-right-40 {
  margin-right: 40px !important;
}

.m-right-60 {
  margin-right: 60px !important;
}

.m-right-80 {
  margin-right: 80px !important;
}

.m-right-100 {
  margin-right: 100px !important;
}

.p-top-0 {
  padding-top: 0 !important;
}

.p-top-10 {
  padding-top: 10px !important;
}

.p-top-15 {
  padding-top: 15px !important;
}

.p-top-20 {
  padding-top: 20px !important;
}

.p-top-30 {
  padding-top: 30px !important;
}

.p-top-40 {
  padding-top: 40px !important;
}

.p-top-50 {
  padding-top: 50px !important;
}

.p-top-60 {
  padding-top: 60px !important;
}

.p-top-70 {
  padding-top: 70px !important;
}

.p-top-80 {
  padding-top: 80px !important;
}

.p-top-90 {
  padding-top: 90px !important;
}

.p-top-100 {
  padding-top: 100px !important;
}

.p-top-110 {
  padding-top: 110px !important;
}

.p-top-120 {
  padding-top: 120px !important;
}

.p-top-130 {
  padding-top: 130px !important;
}

.p-top-140 {
  padding-top: 140px !important;
}

.p-top-150 {
  padding-top: 150px !important;
}

.p-top-160 {
  padding-top: 160px !important;
}

.p-top-170 {
  padding-top: 170px !important;
}

.p-top-180 {
  padding-top: 180px !important;
}

.p-top-190 {
  padding-top: 190px !important;
}

.p-bottom-0 {
  padding-bottom: 0 !important;
}

.p-bottom-10 {
  padding-bottom: 10px !important;
}

.p-bottom-15 {
  padding-bottom: 15px !important;
}

.p-bottom-20 {
  padding-bottom: 20px !important;
}

.p-bottom-30 {
  padding-bottom: 30px !important;
}

.p-bottom-40 {
  padding-bottom: 40px !important;
}

.p-bottom-50 {
  padding-bottom: 50px !important;
}

.p-bottom-60 {
  padding-bottom: 60px !important;
}

.p-bottom-70 {
  padding-bottom: 70px !important;
}

.p-bottom-80 {
  padding-bottom: 80px !important;
}

.p-bottom-90 {
  padding-bottom: 90px !important;
}

.p-bottom-100 {
  padding-bottom: 100px !important;
}

.p-bottom-110 {
  padding-bottom: 110px !important;
}

.p-bottom-120 {
  padding-bottom: 120px !important;
}

.p-bottom-130 {
  padding-bottom: 130px !important;
}

.p-bottom-140 {
  padding-bottom: 140px !important;
}

.p-bottom-150 {
  padding-bottom: 150px !important;
}

.p-bottom-160 {
  padding-bottom: 160px !important;
}

.p-bottom-170 {
  padding-bottom: 170px !important;
}

.p-bottom-180 {
  padding-bottom: 180px !important;
}

.p-bottom-190 {
  padding-bottom: 190px !important;
}

/* Standard-Formatierungen des Contents */
#main {
  /* Blöcke / Content-Elemente */
  /* Absätze */
  /* Listen */
  /* Headlines */
  /* Standard-Card Swiper */
  /* Text-Bild Kombinationen */
  /* Process-Card (Bsp.: Märkten Startseite) */
  /* Content-Card (Bsp. Vergleich Anlässe, Rooms )*/
  /* Galerie */
  /* Formulare */
  /* Effekte */
  /* Hintergrund Infografiken BG-SVGs */
  /* Slider / Swiper */
  /* Technologien Icons */
  /* Waterfall Layout */
  /* Partnerlogos */
  /* Testimonials */
  /* Aktuelles und Stories */
  /* Akkordeons */
}
#main .content-text,
#main .content-headline {
  width: 100%;
  margin-bottom: 0.5rem;
}
#main .content-text .rte,
#main .content-headline .rte {
  display: block;
}
#main .content-text.set-center, #main .content-text.set_center,
#main .content-headline.set-center,
#main .content-headline.set_center {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  text-align: center;
}
#main .content-text.set-center p, #main .content-text.set_center p,
#main .content-headline.set-center p,
#main .content-headline.set_center p {
  margin: 0 auto;
  width: 60%;
}
#main h1.line-after, #main .line-after h1, #main h2.line-after, #main .line-after h2, #main h3.line-after, #main .line-after h3 {
  position: relative;
  margin-bottom: 0 !important;
}
#main h1.line-after:after, #main .line-after h1:after, #main h2.line-after:after, #main .line-after h2:after, #main h3.line-after:after, #main .line-after h3:after {
  content: "";
  display: block;
  background-color: #b2b1bb;
  border-radius: 2px;
  width: 120px;
  height: 5px;
  margin-top: 20px;
}
#main h1.line-after.line-center:after, #main h1.line-after.line-center h2:after, #main h1.line-after.line-centered:after, #main h1.line-after.line-centered h2:after, #main .line-after h1.line-center:after, #main .line-after h1.line-center h2:after, #main .line-after h1.line-centered:after, #main .line-after h1.line-centered h2:after, #main h2.line-after.line-center:after, #main h2.line-after.line-center h2:after, #main h2.line-after.line-centered:after, #main h2.line-after.line-centered h2:after, #main .line-after h2.line-center:after, #main .line-after h2.line-center h2:after, #main .line-after h2.line-centered:after, #main .line-after h2.line-centered h2:after, #main h3.line-after.line-center:after, #main h3.line-after.line-center h2:after, #main h3.line-after.line-centered:after, #main h3.line-after.line-centered h2:after, #main .line-after h3.line-center:after, #main .line-after h3.line-center h2:after, #main .line-after h3.line-centered:after, #main .line-after h3.line-centered h2:after {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  width: 85px;
}
#main h1.line-light:after, #main .line-light h1:after, #main h2.line-light:after, #main .line-light h2:after, #main h3.line-light:after, #main .line-light h3:after {
  background-color: rgba(255, 255, 255, 0.5);
}
#main h1.line-center:after, #main .line-center h1:after, #main h2.line-center:after, #main .line-center h2:after, #main h3.line-center:after, #main .line-center h3:after,
#main h1.line-centered:after, #main .line-centered h1:after, #main h2.line-centered:after, #main .line-centered h2:after, #main h3.line-centered:after, #main .line-centered h3:after {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  width: 85px;
  margin-bottom: 28px;
}
#main p, #main ul, #main ol {
  color: var(--text);
  font-weight: var(--regular);
  font-size: 19px;
  line-height: 1.7;
  margin-bottom: 1.8rem;
  margin-top: 0;
}
#main p strong, #main ul strong, #main ol strong {
  font-weight: var(--semibold);
}
#main p.quelle, #main ul.quelle, #main ol.quelle {
  font-size: 16px;
  color: var(--text_medium);
  margin-top: -15px;
}
#main p.over-title, #main ul.over-title, #main ol.over-title {
  font-size: 22px;
  text-transform: uppercase;
  font-weight: var(--regular);
  line-height: 1.6;
  color: var(--text_medium);
  margin: 60px 0 0 0;
}
#main p.over-title strong, #main ul.over-title strong, #main ol.over-title strong {
  font-weight: var(--semibold) !important;
}
#main p, #main .rte h2 {
  max-width: 70%;
}
#main .bigger-font p, #main .bigger-font ul, #main .bigger-font ol {
  font-size: 21px;
  line-height: 32px;
}
#main .set-center .rte h2 {
  max-width: 100% !important;
  line-height: 40px;
  padding-left: 40px;
  padding-right: 40px;
}
#main .col_7 p, #main .col_7 li, #main .col_6 p, #main .col_6 li, #main .col_5 p, #main .col_5 li, #main .col_4 p, #main .col_4 li, #main .col_3 > .col_2 p, #main .col_3 > .col_2 li, #main .col_1 p, #main .col_1 li,
#main .col-7 p,
#main .col-7 li, #main .col-6 p, #main .col-6 li, #main .col-5 p, #main .col-5 li, #main .col-4 p, #main .col-4 li, #main .col-3 > .col-2 p, #main .col-3 > .col-2 li, #main .col-1 p, #main .col-1 li {
  max-width: 80%;
}
#main .col_7.padding-right-large p, #main .col_7.padding-right-large li, #main .col_6.padding-right-large p, #main .col_6.padding-right-large li, #main .col_5.padding-right-large p, #main .col_5.padding-right-large li, #main .col_4.padding-right-large p, #main .col_4.padding-right-large li, #main .col_3 > .col_2.padding-right-large p, #main .col_3 > .col_2.padding-right-large li, #main .col_1.padding-right-large p, #main .col_1.padding-right-large li,
#main .col-7.padding-right-large p,
#main .col-7.padding-right-large li, #main .col-6.padding-right-large p, #main .col-6.padding-right-large li, #main .col-5.padding-right-large p, #main .col-5.padding-right-large li, #main .col-4.padding-right-large p, #main .col-4.padding-right-large li, #main .col-3 > .col-2.padding-right-large p, #main .col-3 > .col-2.padding-right-large li, #main .col-1.padding-right-large p, #main .col-1.padding-right-large li {
  max-width: 95%;
}
#main .col_7 .rte h2, #main .col_6 .rte h2, #main .col_5 .rte h2, #main .col_4 .rte h2, #main .col_3 > .col_2 .rte h2, #main .col_1 .rte h2,
#main .col-7 .rte h2, #main .col-6 .rte h2, #main .col-5 .rte h2, #main .col-4 .rte h2, #main .col-3 > .col-2 .rte h2, #main .col-1 .rte h2 {
  max-width: 80%;
}
#main [class*=button-] p {
  margin-bottom: 0;
}
#main ol {
  margin: 12px 0 2rem 1.5rem;
  padding: 0;
}
#main ol li::marker {
  color: var(--primary2);
  font-weight: 700;
}
#main ul {
  list-style-type: none;
  margin: 12px 0 2rem 1.5rem;
  padding: 0;
}
#main ul li {
  display: block;
  margin-bottom: 8px;
  position: relative;
  padding-left: 24px;
}
#main ul li:before {
  content: "";
  position: absolute;
  left: 0;
  display: block;
  height: 8px;
  width: 8px;
  background-image: url("../layout/img/list_dot.svg");
  background-size: contain;
  background-repeat: no-repeat;
  top: 15px;
  opacity: 0.7;
}
#main .checklist ul li, #main .checklist ol li {
  padding-left: 28px;
}
#main .checklist ul li:before, #main .checklist ol li:before {
  height: 16px;
  width: 16px;
  background-image: url("../layout/img/list_check.svg");
}
#main .checklist.checklist_space_below ul li, #main .checklist.checklist_space_below ol li {
  margin-bottom: 25px !important;
}
#main h1 {
  font-size: 46px;
  line-height: 1.1;
  font-weight: var(--bold);
  color: var(--h1);
  text-transform: uppercase;
  letter-spacing: 0.03rem;
  display: block;
  margin-bottom: 0.8em;
  margin-top: 0;
  width: 100%;
}
#main h1 .highlight-color {
  color: var(--highlight-color);
  font-size: 45px;
}
#main h1.content-headline {
  margin-bottom: 0.8em;
}
#main h2 {
  font-size: 34px;
  text-transform: uppercase;
  font-weight: var(--bold);
  line-height: 1.4;
  color: var(--h2);
  display: block;
  width: 100%;
  margin-bottom: 0.5em;
  margin-top: 1.8rem;
}
#main h2.content-headline {
  margin-bottom: 0.5em;
}
#main h2 .bigger {
  font-size: 130%;
  line-height: 1.1;
}
#main h3, #main h4, #main h5, #main h6 {
  font-weight: var(--semibold);
  font-size: 25px;
  line-height: 1.3;
  color: var(--h-default);
  margin-bottom: 0.5em;
  display: block;
  width: 100%;
}
#main h3.content-headline, #main h4.content-headline, #main h5.content-headline, #main h6.content-headline {
  margin-bottom: 0.5em;
}
#main .h2_small {
  max-width: 80%;
  font-size: 27px;
  font-weight: var(--bold);
}
#main .h2_small h2 {
  font-size: 28px;
  font-weight: var(--bold);
  margin-top: 2.1rem;
}
#main .h3_small {
  font-size: 23px;
  font-weight: var(--semibold);
}
#main .h3_small h3 {
  font-size: 23px;
  font-weight: var(--semibold);
}
#main .service-card-link-wrapper {
  position: relative;
  display: block;
  height: 320px;
  overflow: hidden;
  border-radius: 3px;
}
#main .service-card-link-wrapper .cover-image, #main .service-card-link-wrapper .content-wrapper {
  top: 0;
  left: 0;
  position: absolute;
  display: block;
  height: 100%;
  width: 100%;
  background-size: cover;
  z-index: 1;
}
#main .side_pic_left .rte, #main .side_pic_right .rte {
  padding-bottom: 80px;
}
#main .process-card-link-wrapper {
  position: relative;
  display: block;
  overflow: hidden;
  height: 360px;
  border-radius: 3px;
}
#main .process-card-link-wrapper .cover-image, #main .process-card-link-wrapper .content-wrapper {
  top: 0;
  left: 0;
  position: absolute;
  display: block;
  height: 100%;
  width: 100%;
  background-size: cover;
  z-index: 1;
}
#main .process-card-link-wrapper .content-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  padding: 0 40px 0 40px;
  z-index: 2;
  text-align: center;
  transition: all 0.3s ease-in-out;
}
#main .process-card-link-wrapper .content-wrapper .icon {
  display: block;
  margin-bottom: 15px;
  transition: transform 0.4s ease-out;
}
#main .process-card-link-wrapper .content-wrapper h2, #main .process-card-link-wrapper .content-wrapper h3, #main .process-card-link-wrapper .content-wrapper h4, #main .process-card-link-wrapper .content-wrapper h5 {
  margin-top: 0;
  margin-bottom: 15px;
  font-weight: var(--bold);
  font-size: 28px;
  text-transform: uppercase;
  letter-spacing: 0.03rem;
  color: var(--full_white);
  line-height: 1.15;
  margin-left: auto;
  margin-right: auto;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  transition: transform 0.4s ease-out;
}
#main .process-card-link-wrapper .content-wrapper p {
  font-size: 18px;
  line-height: 1.55;
  margin-bottom: 0;
  color: var(--full_white);
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s ease-out;
  height: 0;
  overflow: visible;
}
#main .process-card-link-wrapper .content-wrapper:hover .icon,
#main .process-card-link-wrapper .content-wrapper:hover h2, #main .process-card-link-wrapper .content-wrapper:hover h3, #main .process-card-link-wrapper .content-wrapper:hover h4, #main .process-card-link-wrapper .content-wrapper:hover h5 {
  transform: translateY(-10px); /* nach oben verschieben */
}
#main .process-card-link-wrapper .content-wrapper:hover p {
  opacity: 1;
  height: 120px;
  transform: translateY(0); /* p kommt von unten rein */
}
#main .content_card {
  background-color: var(--background-white);
  background: linear-gradient(10deg, rgba(255, 255, 255, 0.6) 25%, var(--background-decent) 75%);
  box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.25), 0 4px 6px rgba(0, 0, 0, 0.3);
  border: 1px solid rgb(223, 221, 221);
  text-align: left;
  display: inline-block;
  height: auto;
  margin: 25px;
  border-radius: 8px;
  padding: 50px 50px 40px 50px;
  background-size: 34%;
  background-position: 103% 104%;
  background-repeat: no-repeat;
}
#main .content_card h3 {
  display: inline-block;
  position: relative;
  white-space: nowrap;
  box-sizing: border-box;
  font-weight: var(--semibold);
  border-radius: 2px;
  transition: all 0.4s;
  line-height: 17px;
  font-size: 21px;
  letter-spacing: 0.05rem;
  padding: 21px 53px;
  color: var(--full_white);
  text-transform: uppercase;
  background-color: var(--m3_toplink_bg);
  width: 100%;
  margin-left: -55px;
  margin-bottom: 40px;
  margin-top: 0;
}
#main .content_card .checklist ul li:before {
  height: 19px;
  width: 19px;
  top: 8px;
  opacity: 1;
}
#main .content_card ul {
  margin-left: 0;
}
#main .content_card ul li {
  font-size: 20px;
  line-height: 30px;
  margin-bottom: 16px;
}
#main .content_card.col_6 {
  flex: 0 0 calc(50% - 52px);
  max-width: calc(50% - 52px);
}
#main .content-gallery {
  width: 100%;
}
#main .content-gallery .col_10 {
  flex: 0 0 calc(83.333% - 25px);
  max-width: calc(83.333% - 25px);
  margin-right: 25px;
}
#main .content-gallery .swiper-slide {
  text-align: left;
  font-size: 18px;
  line-height: 22px;
  display: block;
  justify-content: center;
  max-height: 80vh;
  height: 660px;
  width: 100%;
  position: relative;
  border-radius: 4px;
}
#main .content-gallery .swiper-slide .figcaption {
  padding: 18px 30px;
  background-color: rgba(0, 0, 0, 0.7);
  bottom: 0;
  left: 0;
  position: absolute;
  width: 100%;
  color: var(--full_white);
}
#main .content-gallery .swiper-slide .hidden {
  display: none;
}
#main .content-gallery .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}
#main .content-gallery .swiper.thumbnails {
  padding-top: 0;
}
#main .content-gallery .swiper.thumbnails .swiper-slide {
  height: 122px !important;
  opacity: 0.5;
  cursor: pointer;
  transition: all 0.3s;
}
#main .content-gallery .swiper.thumbnails .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#main .content-gallery .swiper.thumbnails .swiper-slide:hover, #main .content-gallery .swiper.thumbnails .swiper-slide.swiper-slide-thumb-active {
  opacity: 1;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.4);
}
#main .content-image, #main .content-image figure, #main .content-image figure img {
  border-radius: 4px;
}
#main .ce_form {
  display: block;
  position: relative;
  height: 100%;
  width: 80%;
  margin: 0 auto;
  background-color: var(--background-decent);
  padding: 60px 40px 80px 60px;
  border-radius: 5px;
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.15);
}
#main .ce_form .formbody, #main .ce_form .formbody .fields {
  display: flex;
  flex-wrap: wrap;
  justify-items: right;
  justify-content: flex-start;
  position: relative;
  height: auto;
  width: 100%;
}
#main .ce_form .widget {
  margin-bottom: 35px;
  /* Date- & Timepicker */
}
#main .ce_form .widget.widget-checkbox, #main .ce_form .widget.widget-radio {
  flex: 0 0 100%;
  max-width: 100%;
}
#main .ce_form .widget.widget-explanation {
  margin-top: -10px;
  margin-bottom: 15px;
}
#main .ce_form .widget.widget-explanation p {
  max-width: 90%;
  font-size: 17px;
  line-height: 31px;
  color: var(--text_medium);
}
#main .ce_form .widget input:not([type=checkbox]):not([type=radio]),
#main .ce_form .widget textarea,
#main .ce_form .widget select,
#main .ce_form .widget button {
  width: calc(100% - 20px);
}
#main .ce_form .widget.widget-submit {
  flex: 0 0 calc(100% - 31px);
  max-width: calc(100% - 31px);
  border-top: 1px solid var(--border-decent);
  padding-top: 32px;
  margin-top: 10px;
}
#main .ce_form .widget.widget-submit button {
  width: calc(47.5% + 15px);
  min-width: calc(47.5% + 15px);
  padding: 19px 25px;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 19px;
}
#main .ce_form .widget.widget-datepicker {
  position: relative;
}
#main .ce_form .widget.widget-datepicker button.ui-datepicker-trigger {
  width: 34px;
  height: 34px;
  background-color: transparent;
  position: absolute;
  top: 45px;
  right: 34px;
  border: 0 none;
  outline: none;
  cursor: pointer;
  color: transparent;
}
#main .ce_form .widget.widget-datepicker button.ui-datepicker-trigger:before {
  color: var(--primary);
  font-size: 28px;
}
#main .ce_form label {
  font-weight: var(--semibold);
  font-size: 17px;
  color: var(--primary);
  margin-bottom: 0.25rem;
  display: block;
}
#main .ce_form span.mandatory {
  color: var(--error);
  margin-left: 4px;
  display: inline-block;
}
#main .ce_form .checkbox_container legend, #main .ce_form .radio_container legend {
  font-weight: var(--semibold);
  font-size: 16px;
  color: var(--text_medium);
  margin-bottom: 0.6rem;
  display: block;
}
#main .ce_form .checkbox_container legend .mandatory, #main .ce_form .radio_container legend .mandatory {
  color: var(--error);
  margin-left: 5px;
  display: inline-block;
}
#main .ce_form .checkbox_container label, #main .ce_form .radio_container label {
  display: block;
  padding-left: 36px;
  padding-right: 30px;
  line-height: 23px;
  font-weight: var(--regular);
}
#main .ce_form input:not([type=checkbox]):not([type=radio]),
#main .ce_form textarea,
#main .ce_form select {
  width: 100%;
  padding: var(--form-padding);
  border: var(--form-border);
  border-radius: var(--form-radius);
  font-size: 17px;
  color: var(--text);
  background-color: var(--background-white);
  transition: var(--form-transition);
}
#main .ce_form input:not([type=checkbox]):not([type=radio]):focus,
#main .ce_form textarea:focus,
#main .ce_form select:focus {
  border: var(--form-border-hover);
  outline: none;
  box-shadow: 0 0 6px 3px rgba(0, 0, 0, 0.1);
  background-color: var(--full_white);
}
#main .ce_form input:not([type=checkbox]):not([type=radio])::placeholder,
#main .ce_form textarea::placeholder,
#main .ce_form select::placeholder {
  color: #9895a4;
}
#main .ce_form input:not([type=checkbox]):not([type=radio]):disabled,
#main .ce_form textarea:disabled,
#main .ce_form select:disabled {
  background-color: var(--background-white);
  color: #9895a4;
  cursor: not-allowed;
}
#main .ce_form fieldset:not(.checkbox_container), #main .ce_form fieldset:not(.radio_container) {
  border: 0;
  text-align: left;
  padding: 40px 0 0 0;
  margin-top: 40px;
}
#main .ce_form fieldset:not(.checkbox_container) legend, #main .ce_form fieldset:not(.radio_container) legend {
  text-transform: uppercase;
  font-size: 23px;
  font-weight: 700;
  padding: 0;
  color: #7d7a8c;
  letter-spacing: 0.05rem;
  line-height: 1;
  position: relative;
  width: calc(100% - 20px);
}
#main .ce_form fieldset:not(.checkbox_container) legend:after, #main .ce_form fieldset:not(.radio_container) legend:after {
  content: "";
  display: inline-block;
  background-color: #b2b1bb;
  border-radius: 2px;
  width: 100%;
  height: 4px;
}
#main .ce_form fieldset.checkbox_container, #main .ce_form fieldset.radio_container {
  padding: 0;
  border: 0;
  margin-top: 0 !important;
}
#main .ce_form fieldset.checkbox_container label, #main .ce_form fieldset.radio_container label {
  margin-bottom: 1rem !important;
}
#main .ce_form fieldset.checkbox_container legend, #main .ce_form fieldset.radio_container legend {
  font-weight: var(--semibold) !important;
  font-size: 17px !important;
  text-transform: none !important;
  color: var(--primary);
  margin-bottom: 1.5rem !important;
  letter-spacing: normal !important;
  display: block !important;
}
#main .ce_form fieldset.checkbox_container legend:after, #main .ce_form fieldset.radio_container legend:after {
  display: none;
}
#main .ce_form input[type=radio] {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--background-white);
  margin: 0;
  border-radius: 50%;
  border: var(--form-border);
  place-content: center;
  width: 24px;
  height: 24px;
  line-height: 24px;
  float: left;
  display: grid;
}
#main .ce_form input[type=radio]:before {
  content: "";
  border-radius: 50%;
  width: 12px;
  height: 12px;
  background-color: var(--text_medium);
  display: block;
  transform: scale(0);
  opacity: 0;
  transition: 120ms transform ease-in-out;
}
#main .ce_form input[type=checkbox] {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--background-white);
  margin: 0;
  border: var(--form-border);
  place-content: center;
  width: 24px;
  height: 24px;
  line-height: 24px;
  float: left;
  display: grid;
  border-radius: 2px;
}
#main .ce_form input[type=checkbox]:before {
  content: "";
  width: 12px;
  height: 12px;
  background-color: var(--text_medium);
  display: block;
  transform: scale(0);
  opacity: 0;
  border-radius: 2px;
  transition: 120ms transform ease-in-out;
}
#main .ce_form input[type=date] {
  cursor: pointer;
}
#main .ce_form input[type=radio]:checked:before,
#main .ce_form input[type=checkbox]:checked:before {
  transform: scale(1.1);
  opacity: 1;
}
#main .ce_form p.error {
  color: var(--error);
  font-size: 0.8rem;
  font-weight: var(--semibold);
  padding: 12px 23px;
  border: 2px solid var(--error);
  border-radius: 3px;
  background-color: rgba(183, 68, 68, 0.1);
  max-width: 100%;
  display: block;
  min-width: 100%;
}
#main .set_blur .cover-image {
  background-blend-mode: multiply;
  background-color: #a8a4b4;
  transform: scale(1.05);
  transition: All 0.5s ease;
  -webkit-transition: All 0.5s ease;
}
#main .set_blur .cover-image .inner {
  position: relative;
  display: block;
  height: 100%;
  width: 100%;
}
#main .set_blur .cover-image .inner .bg-color {
  display: block;
  top: 0;
  left: 0;
  position: absolute;
  height: 100%;
  width: 100%;
  background: var(--u-primary-transparent);
  z-index: 1;
}
#main .set_blur:hover .cover-image {
  filter: brightness(0) invert(28%) sepia(12%) saturate(234%) hue-rotate(230deg) brightness(92%) contrast(89%);
}
#main .bg_svg1 {
  background-image: url("../layout/img/bg_info_svgs/bgsvg_vektor_1.svg");
  background-size: 32%;
}
#main .bg_svg2 {
  background-image: url("../layout/img/bg_info_svgs/bgsvg_vektor_2.svg");
  background-size: 30%;
}
#main .bg_svg3 {
  background-image: url("../layout/img/bg_info_svgs/bgsvg_vektor_3.svg");
  background-size: 33%;
}
#main .bg_svg4 {
  background-image: url("../layout/img/bg_info_svgs/bgsvg_vektor_4.svg");
  background-size: 37%;
}
#main .bg_svg5 {
  background-image: url("../layout/img/bg_info_svgs/bgsvg_vektor_5.svg");
  background-size: 32%;
}
#main .bg_svg6 {
  background-image: url("../layout/img/bg_info_svgs/bgsvg_vektor_6.svg");
  background-size: 30%;
}
#main .bg_svg7 {
  background-image: url("../layout/img/bg_info_svgs/bgsvg_vektor_7.svg");
  background-size: 32%;
}
#main .bg_svg8 {
  background-image: url("../layout/img/bg_info_svgs/bgsvg_vektor_8.svg");
  background-size: 26%;
}
#main .bg_svg9 {
  background-image: url("../layout/img/bg_info_svgs/bgsvg_vektor_9.svg");
  background-size: 34%;
}
#main .swiper-pagination {
  position: absolute;
  text-align: center;
  z-index: 10;
  height: 14px;
  bottom: 30px;
  width: 100%;
}
#main .swiper-pagination .swiper-pagination-bullet {
  cursor: pointer;
  transition: 0.3s all ease-in-out;
  width: 14px;
  height: 14px;
  display: inline-block;
  border-radius: 50%;
  background: var(--full_white);
  opacity: 0.6;
  margin: 0 8px;
}
#main .swiper-pagination .swiper-pagination-bullet:hover, #main .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  opacity: 1;
  background: var(--highlight);
}
#main .tech-icons {
  padding: 0 60px;
  justify-content: center;
  align-items: center;
  gap: 26px;
}
#main .tech-icons .tech-icon {
  flex: 0 0 12%;
  aspect-ratio: 1/1;
}
#main .tech-icons .tech-icon figure {
  height: 100%;
  width: 100%;
  border-radius: 0;
}
#main .tech-icons .tech-icon figure img {
  border-radius: 0;
  transition: all 0.4s;
  height: 100%;
  object-fit: contain;
}
#main .tech-icons .tech-icon:hover img {
  transform: scale(1.2);
}
#main .waterfall-layout {
  padding: 0;
  width: 100%;
  height: auto;
  margin: 0 auto;
  visibility: visible;
  position: relative;
}
#main .waterfall-layout .item {
  background-color: var(--background-white);
  background: linear-gradient(10deg, rgba(255, 255, 255, 0.6) 25%, #f9f9f9 75%);
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
  text-align: left;
  display: inline-block;
  height: auto;
  width: 29.333% !important;
  min-width: 29.333% !important;
  margin: 1%;
  border-radius: 8px;
  padding: 30px 30px 0 30px;
}
#main .waterfall-layout .item.scroll-in-animation {
  opacity: 0;
}
#main .waterfall-layout .item.scroll-in-animation.visible {
  opacity: 1;
  animation-delay: 0.5s;
  -webkit-animation: waterfallScale 0.8s ease-in-out;
  animation: waterfallScale 0.8s ease-in-out;
}
#main .waterfall-layout .item p {
  max-width: 100%;
  line-height: 1.6;
  font-size: 17px;
  color: var(--text);
}
#main .logo-wrapper {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  box-sizing: border-box;
  width: 100%;
}
#main .logo-wrapper .logo-img {
  flex: 0 0 calc(14.285% - 6px);
  flex-grow: 0;
  max-width: calc(14.285% - 6px);
  height: 140px;
  text-align: center !important;
  border: 1px solid var(--border-decent);
  background-color: var(--full_white);
  margin: 6px;
}
#main .logo-wrapper .logo-img a {
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  width: 100%;
  height: 100%;
}
#main .logo-wrapper .logo-img a:hover img {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}
#main .logo-wrapper .logo-img figure {
  display: flex;
  justify-content: center;
  align-self: center;
  width: 100%;
  height: 100%;
  align-items: center;
  position: relative;
}
#main .logo-wrapper .logo-img figure img {
  width: auto;
  max-width: 88%;
  height: 100%;
  object-fit: contain;
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: linear;
}
#main .logo-wrapper .logo-img.logo-img-smaller figure img {
  max-width: 74%;
}
#main .testimonial p.autor {
  text-align: right;
}
#main .testimonial p.autor em {
  font-style: normal;
  font-weight: var(--bold);
  color: var(--primary);
}
#main .mod_newslist {
  overflow: visible;
}
#main .mod_newslist .news-highlight-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background-color: var(--backdrop-filter-bg);
  border-radius: 3px;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
}
#main .mod_newslist .news-highlight-wrapper h3 {
  color: var(--text);
  font-weight: var(--bold);
  margin-top: 50px;
}
#main .mod_newslist .news-highlight-wrapper h3 a {
  font-size: 28px;
  color: var(--primary);
  text-transform: uppercase;
  font-weight: var(--semibold);
}
#main .mod_newslist .news-highlight-wrapper h3 a:hover {
  color: var(--primary4);
}
#main .mod_newslist .news-highlight-wrapper .ce_text, #main .mod_newslist .news-highlight-wrapper h3, #main .mod_newslist .news-highlight-wrapper .more {
  padding-left: 60px;
}
#main .mod_newslist .news-highlight-wrapper img {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  height: 450px;
  width: 100%;
  object-fit: cover;
}
#main .mod_newslist .news-highlight-wrapper img, #main .mod_newslist .news-highlight-wrapper figure, #main .mod_newslist .news-highlight-wrapper figure a {
  margin: 0;
  padding: 0;
  display: block;
}
#main .content-accordion {
  overflow: visible !important;
}
#main .ce_accordion {
  overflow: visible !important;
  display: block;
  border-radius: 3px;
  background-color: var(--full_white);
  margin-bottom: 0 !important;
}
#main .ce_accordion h2.toggler {
  text-transform: none;
  width: 100%;
  display: block;
  font-size: 21px;
  line-height: 1.6;
  font-weight: var(--semibold);
  padding: 22px 25px 20px 25px;
  border: 0 none;
  margin: 0 auto;
  transition: all 0.4s;
  color: var(--text);
  cursor: pointer;
  border-radius: 0;
  background-color: transparent;
  border-bottom: 2px solid rgba(96, 50, 125, 0.4);
}
#main .ce_accordion h2.toggler:hover, #main .ce_accordion h2.toggler.ui-state-active {
  background-color: rgba(119, 118, 128, 0.1);
  background-position: right;
  filter: brightness(90%);
  color: var(--primary);
  border-bottom: 2px solid rgb(96, 50, 125);
}
#main .ce_accordion .ui-icon {
  margin-top: 0;
  text-indent: 0;
}
#main .ce_accordion .ui-accordion-header .ui-accordion-header-icon {
  white-space: nowrap;
  transition: all 0.4s;
  display: inline-block;
  background-image: none;
  width: 40px;
  height: 40px;
  position: relative;
  margin-right: 15px;
}
#main .ce_accordion .ui-accordion-header .ui-accordion-header-icon:before {
  content: "\ea2b";
  position: absolute;
  left: 0;
  top: 2px;
  display: block;
  font-family: "Lineicons", sans-serif;
  font-weight: var(--black);
  transition: All 0.3s ease;
  -webkit-transition: All 0.3s ease;
  color: var(--text);
  font-size: 38px;
  line-height: 32px;
  width: 100%;
  height: 100%;
}
#main .ce_accordion .ui-accordion-header.ui-state-active .ui-accordion-header-icon:before, #main .ce_accordion .ui-accordion-header:hover .ui-accordion-header-icon:before {
  color: var(--primary);
}
#main .ce_accordion .accordion {
  background-color: var(--background-white);
  color: var(--text);
  padding: 25px 80px 30px 82px;
  border: 0;
}
#main .ce_accordion .accordion p, #main .ce_accordion .accordion ul li {
  margin-top: 0 !important;
  max-width: 90%;
  font-size: 19px;
  line-height: 1.6;
}
#main .ce_accordion .accordion ul {
  margin-left: 2.6rem;
  margin-top: 0 !important;
  margin-bottom: 2rem;
  max-width: 90%;
}
#main .ce_accordion .accordion ul li {
  max-width: 90%;
}

/* News Reader Layouts */
#main .mod_article#article_project_reader {
  padding-top: 0 !important;
}
#main .mod_article#article_project_reader .mod_newsreader #news_reader_hero {
  box-shadow: 0 8px 6px 2px rgba(0, 0, 0, 0.03);
  position: relative;
  width: 100%;
  min-height: 680px !important;
  max-height: 65vh !important;
  overflow: hidden;
  padding-bottom: 0 !important;
}
#main .mod_article#article_project_reader .mod_newsreader #news_reader_hero .binding {
  max-width: 100%;
  min-width: 100%;
}
#main .mod_article#article_project_reader .mod_newsreader #news_reader_hero #hero-content {
  position: absolute;
  z-index: 3;
  top: 0;
  padding-top: 200px;
  left: 0;
  width: 100%;
}
#main .mod_article#article_project_reader .mod_newsreader #news_reader_hero #hero-content .binding {
  margin: auto auto;
  max-width: 1400px;
  min-width: unset;
  position: relative;
}
#main .mod_article#article_project_reader .mod_newsreader #news_reader_hero #hero-content .binding h1 {
  color: var(--full_white);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
#main .mod_article#article_project_reader .mod_newsreader #news_reader_hero #hero-content .binding p {
  color: var(--full_white);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  font-size: 23px;
  line-height: 37px;
}
#main .mod_article#article_project_reader .mod_newsreader #news_reader_hero #picture_case {
  width: 100%;
  min-height: 860px !important;
  max-height: 95vh !important;
  position: relative;
  overflow: hidden;
}
#main .mod_article#article_project_reader .mod_newsreader #news_reader_hero #picture_case:after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2;
  pointer-events: none;
}
#main .mod_article#article_project_reader .mod_newsreader #news_reader_hero #picture_case figure {
  position: absolute;
  bottom: 0;
  z-index: 1;
  width: 100%;
  min-height: 860px !important;
  max-height: 95vh !important;
  margin: 0;
}
#main .mod_article#article_project_reader .mod_newsreader #news_reader_hero #picture_case figure img {
  display: block;
  width: 100%;
  min-height: 860px !important;
  max-height: 95vh !important;
  object-fit: cover;
  object-position: bottom center;
  border-radius: 0 !important;
  position: relative;
  z-index: 1;
}
#main .mod_article#article_project_reader .mod_newsreader .news_keyfacts {
  width: 100%;
  padding-top: 30px;
}
#main .mod_article#article_project_reader .mod_newsreader .news_keyfacts .binding {
  margin: auto auto;
  max-width: 1400px;
  min-width: unset;
  position: relative;
}
#main .mod_article#article_project_reader .mod_newsreader .news_keyfacts .keyfact-card {
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
  background-color: var(--background-white);
  position: relative;
  border-radius: 5px;
  padding: 30px 25px 30px 80px;
  margin: 10px 10px;
}
#main .mod_article#article_project_reader .mod_newsreader .news_keyfacts .keyfact-card.col_4 {
  flex: 0 0 calc(33.333% - 40px);
  max-width: calc(33.333% - 40px);
}
#main .mod_article#article_project_reader .mod_newsreader .news_keyfacts .keyfact-card.benefit-item:before {
  left: 25px;
  top: 28px;
}
#main .mod_article#article_project_reader .mod_newsreader .news_keyfacts .keyfact-card p {
  margin-bottom: 0;
  max-width: 95%;
  font-size: 17px;
  line-height: 1.5;
}
#main .mod_article#article_project_reader .mod_newsreader .news_keyfacts .keyfact-card p strong {
  font-size: 21px;
  line-height: 24px;
}

/* To-Top-Link */
#top_link {
  bottom: 25px;
  position: fixed;
  text-align: center;
  width: 55px;
  height: 55px;
  opacity: 0;
  transition: All 0.3s ease;
  -webkit-transition: All 0.3s ease;
  right: 25px;
  z-index: 800;
}
#top_link a {
  background-color: rgba(255, 255, 255, 0.25); /* halbtransparentes Weiß */
  backdrop-filter: blur(10px); /* unscharfer Hintergrund */
  -webkit-backdrop-filter: blur(10px); /* Safari-Support */
  border-radius: 50%;
  border: 3px solid #b7b7b7;
  position: relative;
  display: block;
  transition: All 0.8s ease;
  -webkit-transition: All 0.8s ease;
  width: 100%;
  height: 100%;
  font-family: "Lineicons", sans-serif;
  text-align: center;
  font-size: 35px;
  line-height: 50px;
  cursor: pointer;
  color: #b7b7b7;
}
#top_link:hover {
  transform: scale(1.15);
  opacity: 1 !important;
}

body.fixed-header #top_link {
  opacity: 0.8;
}

/* Footer */
#footer_top {
  background-color: var(--footer_bg);
  padding-top: 25px;
}
#footer_top h2, #footer_top h3, #footer_top h4, #footer_top h5 {
  color: #e3e3e3;
  font-size: 26px;
  font-weight: var(--regular);
}
#footer_top h2:after, #footer_top h3:after, #footer_top h4:after, #footer_top h5:after {
  content: "";
  display: block;
  background-color: var(--bg-dark-violett-lighter);
  width: 80px;
  height: 2px;
  margin-top: 5px;
}
#footer_top p, #footer_top a, #footer_top li {
  color: var(--full_white);
  font-size: 17px;
}
#footer_top p {
  margin-bottom: 15px;
}
#footer_top a {
  color: rgba(255, 255, 255, 0.6);
}
#footer_top a:hover {
  color: var(--full_white);
}
#footer_top .content-text:not(.mod_socials) ul, #footer_top .mod_navigation ul {
  margin: 0 0 80px 0;
  padding: 0;
  width: 80%;
}
#footer_top .content-text:not(.mod_socials) ul li, #footer_top .mod_navigation ul li {
  margin-bottom: 10px;
  padding-left: 25px;
  padding-bottom: 8px;
  list-style-type: none;
  position: relative;
  font-size: 16px;
}
#footer_top .content-text:not(.mod_socials) ul li:after, #footer_top .mod_navigation ul li:after {
  border-bottom: 1px solid var(--full_white);
  opacity: 0.2;
  content: "";
  display: block;
  left: 0;
  width: 100%;
  bottom: 0;
  position: absolute;
}
#footer_top .content-text:not(.mod_socials) ul li a:before, #footer_top .mod_navigation ul li a:before {
  content: "";
  position: absolute;
  left: 0;
  display: block;
  height: 15px;
  width: 13px;
  margin-top: -1px;
  background-image: url("../layout/img/arrow-white.svg");
  background-size: contain;
  background-repeat: no-repeat;
  top: 31%;
}
#footer_top .footer-claim p {
  font-size: 38px;
  line-height: 1.3;
  font-weight: var(--bold);
  margin-top: 20px;
  text-align: center;
  text-transform: uppercase;
}
#footer_top .footer-claim p .highlighted {
  color: var(--highlight);
}

#footer_bottom {
  background-color: var(--primary);
}
#footer_bottom .row {
  padding: 20px 0 20px 0;
  justify-content: center;
}
#footer_bottom .row p {
  font-size: 15px !important;
  color: var(--full_white);
  margin-bottom: 0;
}

/* Social Media */
#main .mod_socials, #footer .mod_socials {
  margin: 15px 0 60px 0;
}
#main .mod_socials ul, #footer .mod_socials ul {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  width: 100%;
}
#main .mod_socials ul li, #footer .mod_socials ul li {
  display: flex;
  background-size: cover;
  width: 42px;
  height: 42px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  border: 3px solid var(--filter-lighter);
  margin: 0 16px 0 0;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  list-style: none;
  cursor: pointer;
}
#main .mod_socials ul li:before, #footer .mod_socials ul li:before {
  display: none;
}
#main .mod_socials ul li.facebook, #footer .mod_socials ul li.facebook {
  background-image: url("../layout/img/sm_facebook.svg");
}
#main .mod_socials ul li.facebook:hover, #footer .mod_socials ul li.facebook:hover {
  background-color: #1877F2;
}
#main .mod_socials ul li.instagram, #footer .mod_socials ul li.instagram {
  background-image: url("../layout/img/sm_insta.svg");
}
#main .mod_socials ul li.instagram:hover, #footer .mod_socials ul li.instagram:hover {
  background-color: #E1306C;
}
#main .mod_socials ul li.linkedin, #footer .mod_socials ul li.linkedin {
  background-image: url("../layout/img/sm_li.svg");
}
#main .mod_socials ul li.linkedin:hover, #footer .mod_socials ul li.linkedin:hover {
  background-color: #0A66C2;
}
#main .mod_socials ul li.xing, #footer .mod_socials ul li.xing {
  background-image: url("../layout/img/sm_xing.svg");
}
#main .mod_socials ul li.xing:hover, #footer .mod_socials ul li.xing:hover {
  background-color: #006567;
}

#main .mod_socials ul li {
  background-color: var(--bg-dark-violett-lighter);
}

/* Cookie Consent */
.contao-cookiebar.cc-left {
  --ccb-justify: unset;
}
.contao-cookiebar.cc-bottom {
  --ccb-align: unset;
}
.contao-cookiebar .cc-inner {
  font-size: 17px;
  line-height: 1.7;
  padding: 19px 30px 25px 30px;
  overflow: hidden;
}
.contao-cookiebar .cc-inner .cc-hide-focus:focus-visible {
  outline: 0 none !important;
}
.contao-cookiebar .cc-inner .cc-info {
  display: none;
}
.contao-cookiebar .cc-inner .cc-btn {
  transform: scale(0.92);
  margin-bottom: 10px;
  margin-left: -9px;
}
.contao-cookiebar .cc-inner .cc-btn.save {
  margin-top: 15px;
}
.contao-cookiebar .cc-inner h2 {
  font-size: 30px;
  font-weight: var(--semibold);
  line-height: 1.3;
  color: var(--u-h2);
  display: block;
  width: 100%;
  margin-bottom: 0.3em;
  margin-top: 0;
}
.contao-cookiebar .cc-inner p {
  color: var(--text);
}
.contao-cookiebar .cc-footer, .contao-cookiebar .cc-info {
  text-align: left;
}
.contao-cookiebar .cc-group {
  border: 1px solid #dedede;
  border-radius: 2px;
  padding: 15px;
}

#c-consent-trigger a {
  bottom: 20px;
  left: 20px;
  position: fixed;
  text-align: center;
  width: 45px;
  height: 45px;
  z-index: 9998;
  overflow: hidden;
  background-image: url("../layout/img/keks.svg");
  background-size: contain;
  text-indent: -100rem;
  min-width: 0;
  min-height: 41px;
  max-width: 100%;
  max-height: none;
  font-weight: inherit;
  font-style: inherit;
  font-size: inherit;
  line-height: 1;
  white-space: normal;
  transition: all 128ms ease-out 0s;
  appearance: none;
  opacity: 0.85;
}
#c-consent-trigger a:hover {
  transform: scale(1.15);
  opacity: 1;
}

/* Lightbox */
.fancybox__thumbs .carousel__slide .fancybox__thumb:after {
  border-color: var(--highlight);
}

/* Open Street Map */
.map-site-contentwrap {
  max-width: 604px;
  margin-left: auto;
  margin-right: 0;
  position: relative;
}

#main .mod_c4g_maps {
  width: 100%;
  height: 100%;
  /* Popup */
}
#main .mod_c4g_maps .c4g-control-container-top-left {
  top: 1em;
  left: 1em;
}
#main .mod_c4g_maps .c4g-control-container-top-left button {
  border-radius: 5px !important;
  margin: 10px 3px !important;
  background-color: var(--full_white);
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
  color: var(--primary) !important;
  opacity: 0.8;
}
#main .mod_c4g_maps .c4g-control-container-top-left button:hover {
  opacity: 1;
}
#main .mod_c4g_maps .c4g_map {
  width: 100% !important;
  height: 100% !important;
}
#main .mod_c4g_maps #c4g_popup_2168 {
  opacity: 0.8;
  outline: none !important;
  background-color: var(--full_white) !important;
  color: var(--text);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
  padding: 1px;
  text-align: left;
  border-radius: 12px;
  border: 1px solid var(--background-white);
}
#main .mod_c4g_maps #c4g_popup_2168 > div > div[class*=header] {
  height: 16px !important;
}
#main .mod_c4g_maps #c4g_popup_2168.c4g-popup-wrapper {
  filter: none;
  position: relative;
}
#main .mod_c4g_maps #c4g_popup_2168.c4g-popup-wrapper:before {
  display: none;
}
#main .mod_c4g_maps #c4g_popup_2168.c4g-popup-wrapper:after {
  top: 99%;
  left: 26%;
  right: -23px;
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid var(--full_white);
}
#main .mod_c4g_maps #c4g_popup_2168.c4g-popup-wrapper .c4g-popup-header-headline {
  display: none;
}
#main .mod_c4g_maps #c4g_popup_2168.c4g-popup-wrapper button.c4g-titlebar-close:before {
  color: var(--primary);
}
#main .mod_c4g_maps #c4g_popup_2168.c4g-popup-wrapper .c4g-popup-content {
  margin: 14px 15px 17px 15px;
  line-height: 1.4;
}
#main .mod_c4g_maps #c4g_popup_2168.c4g-popup-wrapper .c4g-popup-content p {
  max-width: 100%;
  font-size: 0.95em;
  line-height: 1.55em;
  margin-bottom: 0;
}
#main .mod_c4g_maps #c4g_popup_2168.c4g-popup-wrapper .c4g-popup-content p strong {
  color: var(--text);
}

/*JQuery UI-Widget Styles */
.ui-widget {
  font-family: "Source Sans Pro", sans-serif;
  color: var(--text);
  font-weight: var(--regular);
  font-size: 19px;
  line-height: 1.7;
  background-color: var(--background-white);
  box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.25), 0 4px 6px rgba(0, 0, 0, 0.3);
  border: 1px solid rgb(223, 221, 221);
  border-radius: 8px;
  padding: 18px 18px 18px 18px;
}
.ui-widget .ui-state-default {
  border: 1px solid #fafafa;
  background: var(--background-white);
  filter: brightness(0.92);
  text-align: center;
  border-radius: 2px;
  color: var(--text);
  font-weight: var(--semibold);
}
.ui-widget .ui-state-default:hover {
  filter: brightness(0.75);
}
.ui-widget .ui-state-default.ui-state-highlight {
  background-color: var(--primary);
  color: var(--full_white);
}
.ui-widget .ui-widget-header {
  border: 0;
  background: transparent;
  color: var(--primary);
  text-transform: uppercase;
}
.ui-widget.ui-datepicker td {
  padding: 3px;
}
.ui-widget.ui-datepicker td.ui-datepicker-week-end .ui-state-default {
  border: 1px solid #8c8c8c;
  background: var(--full-white);
  filter: brightness(1.4);
  text-align: center;
  color: var(--text_medium);
}
.ui-widget.ui-datepicker td.ui-datepicker-week-end .ui-state-default:hover {
  border: 1px solid #fafafa;
  filter: brightness(0.75);
}
.ui-widget.ui-datepicker .ui-datepicker-prev,
.ui-widget.ui-datepicker .ui-datepicker-next {
  cursor: pointer;
}
.ui-widget.ui-datepicker .ui-datepicker-prev:before,
.ui-widget.ui-datepicker .ui-datepicker-next:before {
  content: "\ea18";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  font-family: "Lineicons", sans-serif;
  font-weight: var(--black);
  transition: All 0.3s ease;
  -webkit-transition: All 0.3s ease;
  color: var(--m4_toplink_bg);
  font-size: 25px;
  line-height: 25px;
}
.ui-widget.ui-datepicker .ui-datepicker-prev.ui-state-hover,
.ui-widget.ui-datepicker .ui-datepicker-next.ui-state-hover {
  border: 0;
  background-color: transparent;
}
.ui-widget.ui-datepicker .ui-datepicker-prev.ui-state-hover:before,
.ui-widget.ui-datepicker .ui-datepicker-next.ui-state-hover:before {
  color: var(--primary);
}
.ui-widget.ui-datepicker .ui-datepicker-prev {
  left: 0;
  top: 6px;
}
.ui-widget.ui-datepicker .ui-datepicker-prev.ui-state-hover {
  left: 0;
  top: 6px;
}
.ui-widget.ui-datepicker .ui-datepicker-next {
  right: 0;
  top: 7px;
}
.ui-widget.ui-datepicker .ui-datepicker-next:before {
  right: 0;
  left: auto;
  transform: rotate(180deg);
}
.ui-widget.ui-datepicker .ui-datepicker-next.ui-state-hover {
  right: 0;
  top: 7px;
}

/* Animationen (Keyframes) */
.kenburns-animation {
  overflow: hidden;
}
.kenburns-animation figure {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  display: block;
}
.kenburns-animation figure img {
  object-fit: cover;
  animation: kenburns 25s linear forwards;
}

.bounceInLeft {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.6s ease-out;
}
.bounceInLeft.visible {
  opacity: 1;
  transform: translateY(0);
  animation-name: bounceInLeft;
  animation-duration: 1.2s;
  animation-delay: 0.5s;
  animation-fill-mode: both;
}

.bounceInRight {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.6s ease-out;
}
.bounceInRight.visible {
  opacity: 1;
  transform: translateY(0);
  animation-name: bounceInRight;
  animation-duration: 1.2s;
  animation-delay: 0.5s;
  animation-fill-mode: both;
}

.flyInUp {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.6s ease-out;
}
.flyInUp.visible {
  opacity: 1;
  animation-delay: 0.5s;
  transform: translateY(0);
}

.fadeIn {
  opacity: 0;
  visibility: hidden;
  transition: all 0.6s ease-out;
}
.fadeIn.visible {
  opacity: 1;
  visibility: visible;
  animation-name: fadeIn;
  animation-duration: 1.8s;
  animation-delay: 0.5s;
  animation-fill-mode: both;
}

.fade-in-box {
  opacity: 0;
}
.fade-in-box.fade-in-box-start {
  animation: fadeInBox 0.8s ease forwards;
}
.fade-in-box.fade-in-box-start.first {
  animation-delay: 0s;
}
.fade-in-box.fade-in-box-start.second {
  animation-delay: 0.4s;
}
.fade-in-box.fade-in-box-start.third {
  animation-delay: 0.8s;
}
.fade-in-box.fade-in-box-start.fourth {
  animation-delay: 1.2s;
}
.fade-in-box.fade-in-box-start.fifth {
  animation-delay: 1.6s;
}
.fade-in-box.fade-in-box-start.sixth {
  animation-delay: 2s;
}

.fly-in-button {
  bottom: -100px; /* Startet außerhalb des Viewports */
  right: 20px;
  opacity: 0;
  animation: flyInContact 0.6s ease-in-out 2.3s forwards;
}

@keyframes bounceScrollDown {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(10px);
  }
  60% {
    transform: translateY(5px);
  }
}
@keyframes kenburns {
  0% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes flyInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes bounceInLeft {
  0%, 60%, 75%, 90%, 100% {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }
  75% {
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    transform: translate3d(5px, 0, 0);
  }
  100% {
    transform: none;
  }
}
@keyframes bounceInRight {
  0%, 60%, 75%, 90%, 100% {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    transform: translate3d(10px, 0, 0);
  }
  90% {
    transform: translate3d(-5px, 0, 0);
  }
  100% {
    transform: none;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeInBox {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes flyInContact {
  from {
    bottom: -100px;
    right: 20px;
    opacity: 0;
  }
  to {
    bottom: 50vh;
    opacity: 0.85;
    right: 20px;
  }
}
@keyframes waterfallScale {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

/*# sourceMappingURL=vio-styles.css.map */