@charset "UTF-8";
/*!
 * Violution Webseiten
 * Copyright 2025 Violution GbR, Dortmund
 * Autor: Daniela Brigula
 */
/*!
 * Violution Webseiten
 * Copyright 2025 Violution GbR, Dortmund
 * Autor: Daniela Brigula
 */
/* ### COLOR SETS - Violution GbR ### */
body {
  --primary: #361b6a;
  --primary2: #7E4290;
  --primary3: #5f4f77;
  --primary4: #60327d;
  --text: #242229;
  --text_medium: #4c4a56;
  --footer_bg: #1f103c;
  --info: #ff9f43;
  --error: #ff6f61;
  --text_light: #f1f0f8;
  --highlight: #bc8fd4;
  --background-white: #fdfdfd;
  --m1_toplink_bg: rgba(54, 27, 106, 0.8);
  --m1_toplink_bg_hover: rgba(54, 27, 106, 1);
  --m2_toplink_bg: rgba(72, 49, 116, 0.8);
  --m2_toplink_bg_hover: rgba(60, 46, 87, 1);
  --m3_toplink_bg: rgba(90, 70, 127, 0.8);
  --m3_toplink_bg_hover: rgba(90, 70, 127, 1);
  --m4_toplink_bg: rgba(107, 92, 137, 0.8);
  --m4_toplink_bg_hover: rgba(107, 92, 137, 1);
  --m5_toplink_bg: rgba(125, 114, 147, 0.8);
  --m5_toplink_bg_hover: rgb(109, 99, 128, 1);
  --m6_toplink_bg: rgba(143, 135, 158, 0.8);
  --m6_toplink_bg_hover: rgba(119, 118, 128, 1);
  --link-default: #7E4290;
  --link-default-hover: #1f103c;
  --filter-lighter: rgba(255,255,255,0.1);
  --backdrop-filter-bg: rgba(247, 248, 249, 0.6784313725) !important;
  --backdrop-filter: blur(12px);
  --bg-dark-violett: rgba(44, 44, 49, 0.95);
  --bg-dark-violett-lighter: rgba(74, 74, 82, 0.6);
  --primary-transparent: rgba(34, 17, 68, 0.5);
  --button: #70418d;
  --button-hover: #593573;
  --icons: #361b6a;
  --icons-hover: #60327d;
  --h1: #361b6a;
  --h2: #60327d;
  --highlight-color: #8a499d;
  --h-default: #46434f;
  --background-decent: #f9f9f9;
  --background-atrazit: #3f3b48;
  --background-gallery: #232323;
  --text_transparent: rgba(255,255,255, 0.6);
  --whitefilter: rgba(255,255,255,0.8);
  --border-decent: #e6e6e6;
  --full_white: #ffffff;
}

@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-display: swap;
  src: local("Source Sans Pro"), url("../../fonts/SourceSansPro-Light.woff2") format("woff2");
  font-weight: 300;
}
@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-display: swap;
  src: local("Source Sans Pro"), url("../../fonts/SourceSansPro-Regular.woff2") format("woff2");
  font-weight: 400;
}
@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-display: swap;
  src: local("Source Sans Pro"), url("../../fonts/SourceSansPro-SemiBold.woff2") format("woff2");
  font-weight: 500;
}
@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-display: swap;
  src: local("Source Sans Pro"), url("../../fonts/SourceSansPro-Bold.woff2") format("woff2");
  font-weight: 700;
}
@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-display: swap;
  src: local("Source Sans Pro"), url("../../fonts/SourceSansPro-Black.woff2") format("woff2");
  font-weight: 900;
}
/* Line-Icons */
@font-face {
  font-family: "Lineicons";
  src: url("regular-icon-font-free/fonts/Lineicons.eot");
  src: url("regular-icon-font-free/fonts/Lineicons.eot") format("embedded-opentype"), url("regular-icon-font-free/fonts/Lineicons.woff2") format("woff2"), url("regular-icon-font-free/fonts/Lineicons.woff") format("woff"), url("regular-icon-font-free/fonts/Lineicons.ttf") format("truetype"), url("regular-icon-font-free/fonts/Lineicons.svg") format("svg");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
/* Dark-Mode */
#darkModeToggle {
  display: none !important;
}

.test-bg {
  background-color: #555;
  padding: 30px;
}

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

/* 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: 400;
  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%;
}

/* 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;
}
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: 900;
  font-size: 1.2em;
  text-indent: 0;
}

.icon-box {
  width: 100%;
  text-align: center;
}
.icon-box .icon {
  height: 80px;
  width: 80px;
  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("../img/Vio_MarketIcons/Violution_Icon_Softwareentwicklung-w.svg");
  transform: scale(1.2);
}
.icon-box.icon-bpm .icon:before {
  background-image: url("../img/Vio_MarketIcons/Violution_Icon_BPM-w.svg");
}
.icon-box.icon-apis .icon:before {
  background-image: url("../img/Vio_MarketIcons/Violution_Icon_APIs-w.svg");
}
.icon-box.icon-contao .icon:before {
  background-image: url("../img/Vio_MarketIcons/Violution_Icon_Contao-w.svg");
}
.icon-box.icon-e-commerce .icon:before {
  background-image: url("../img/Vio_MarketIcons/Violution_Icon_Ecommerce-w.svg");
  top: 5px;
}
.icon-box.icon-apps .icon:before {
  background-image: url("../img/Vio_MarketIcons/Violution_Icon_Apps-w.svg");
}

/* 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("../img/vio-prism-bg-weiss.svg");
}

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

.prisma-bg-dark {
  background-image: url("../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);
}

#main a:not([class*=button-]):hover {
  text-decoration: underline;
}

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;
  font-weight: 500;
  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;
  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: 400;
  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(--button);
  border: 3px solid var(--button);
  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 {
  color: var(--text_light) !important;
  border: 3px solid var(--text_light);
  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(--text_light);
}

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("../img/arrow-white.svg");
  background-size: contain;
  background-repeat: no-repeat;
  top: 40%;
}

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("../img/arrow-white.svg");
  background-size: contain;
  background-repeat: no-repeat;
  top: 28%;
  transform: rotate(180deg);
}

/* Binding */
.binding {
  margin: auto auto;
  max-width: 1400px;
}
.binding.small-binding {
  max-width: 730px;
}
.binding.menu-binding {
  max-width: 960px;
}
.binding .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: 500;
  letter-spacing: 0.043rem;
}
#top-line-navigation ul li#service1 a, #top-line-navigation ul li#service1 span {
  background-color: var(--m1_toplink_bg);
}
#top-line-navigation ul li#service1 a:hover, #top-line-navigation ul li#service1 span:hover {
  background-color: var(--m2_toplink_bg_hover);
}
#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: 120px;
  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 .col {
  height: 100%;
  position: relative;
  text-align: right;
  width: 100%;
}
#vio_shortcuts .col a {
  background-color: transparent;
  display: block;
  cursor: pointer;
  text-align: right;
  position: relative;
  color: var(--icons);
}
#vio_shortcuts .col a:hover {
  color: var(--u-icons_hover);
  opacity: 0.5;
}
#vio_shortcuts.hamburger-open .col a {
  color: var(--full_white);
}

/* Logo */
#logo {
  background-color: var(--m1_toplink_bg);
  position: relative;
  overflow: visible;
}
#logo #logo-plate {
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  background-color: var(--full_white);
  width: calc(100% - 50px);
  text-align: center;
  height: auto;
  padding: 45px 0 45px 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: 185px;
  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: 65px;
  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(--icons);
  font-weight: 400;
  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: 400;
  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: 110px;
  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: 64px;
  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: 16px;
}
#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("../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: 7px 25px 0 20px;
}
#contactWindow #contactWindowClose {
  position: absolute;
  top: 20px;
  right: 0;
  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 a:not(.button-default) {
  display: block;
  font-size: 20px;
  font-weight: 600;
  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: 3px;
  left: 0;
}
#contactWindow #vio-live-chat {
  display: block;
  width: 100%;
  height: 55%;
  margin: 0;
  border-radius: 3px;
  background-color: var(--whitefilter);
}
#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: 13%;
}

/* 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.75);
}
#search-input .label {
  font-weight: 400;
  font-size: 38px;
  color: var(--full_white);
  margin-bottom: 20px;
}
#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: 1.5rem;
  right: 2.5rem;
  cursor: pointer;
  color: var(--full_white);
}
#search-input.show-search .close-window i:before {
  font-size: 50px;
}
#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: 500;
  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;
  transition: All 0.3s ease;
  -webkit-transition: All 0.3s ease;
  margin-top: 15px;
  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 {
  font-family: "Source Sans Pro", sans-serif;
  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: 2px;
  white-space: nowrap;
  display: inline-block;
  padding: 15px 20px;
  font-weight: 700;
  min-width: 140px;
  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 */
#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 0 2px 2px rgba(0, 0, 0, 0.1);
}
#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.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%;
}

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

.mod_article.row.vertical-centered .inner, .row.vertical-centered, #footer .inside.row.vertical-centered {
  align-items: center;
}
.mod_article.row.vertical-centered .inner [class*=col], .row.vertical-centered [class*=col], #footer .inside.row.vertical-centered [class*=col] {
  display: flex !important;
  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 */
  /* Preislisten und Content-Card Text Kombinationen */
  /* Text-Bild Kombinationen */
  /* Process-Card (Bsp.: Märkten Startseite) */
  /* Content-Card (Bsp. Vergleich Anlässe, Rooms )*/
  /* Galerie */
  /* Effekte */
  /* Hintergrund Infografiken BG-SVGs */
  /* Slider / Swiper */
  /* Waterfall Layout */
  /* Partnerlogos */
  /* Testimonials */
  /* Aktuelles und Stories */
  /* Akkordeons */
}
#main .content-text,
#main .content-headline {
  width: 100%;
  margin-bottom: 2rem;
}
#main .content-text .rte,
#main .content-headline .rte {
  display: block;
}
#main .content-text.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-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 .line-after h1.line-center:after, #main .line-after h1.line-center h2:after, #main h2.line-after.line-center:after, #main h2.line-after.line-center h2:after, #main .line-after h2.line-center:after, #main .line-after h2.line-center h2:after, #main h3.line-after.line-center:after, #main h3.line-after.line-center h2:after, #main .line-after h3.line-center:after, #main .line-after h3.line-center 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 {
  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: 400;
  font-size: 19px;
  line-height: 1.8;
  margin-bottom: 1.4rem;
  margin-top: 0;
}
#main p strong, #main ul strong, #main ol strong {
  font-weight: 600;
}
#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: 400;
  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: 400 !important;
}
#main p, #main .rte h2 {
  max-width: 70%;
}
#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: 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: 95%;
}
#main [class*=button-] p {
  margin-bottom: 0;
}
#main ul, #main ol {
  list-style-type: none;
  margin: 12px 0 2rem 1.5rem;
  padding: 0;
}
#main ul li, #main ol li {
  display: block;
  margin-bottom: 8px;
  position: relative;
  padding-left: 24px;
}
#main ul li:before, #main ol li:before {
  content: "";
  position: absolute;
  left: 0;
  display: block;
  height: 8px;
  width: 8px;
  background-image: url("../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("../img/list_check.svg");
}
#main .checklist.checklist_space_below ul li, #main .checklist.checklist_space_below ol li {
  margin-bottom: 25px !important;
}
#main .benefit-item {
  position: relative;
  display: block;
  margin-bottom: 30px;
  padding-left: 50px;
}
#main .benefit-item strong {
  font-size: 23px;
  line-height: 30px;
  display: block;
  margin-bottom: 10px;
}
#main .benefit-item br {
  display: none;
}
#main .benefit-item:before {
  content: "\eb69";
  position: absolute;
  left: 0;
  top: 3px;
  display: block;
  font-family: "Lineicons";
  transition: All 0.3s ease;
  -webkit-transition: All 0.3s ease;
  color: var(--primary) 2;
  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 h1 {
  font-size: 52px;
  line-height: 1.1;
  font-weight: 600;
  color: var(--h1);
  text-transform: uppercase;
  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: 600;
  line-height: 1.4;
  color: var(--h2);
  display: block;
  width: 100%;
  margin-bottom: 0.5em;
  margin-top: 0;
}
#main h2.content-headline {
  margin-bottom: 0.5em;
}
#main h3, #main h4, #main h5, #main h6 {
  font-weight: 500;
  font-size: 25px;
  line-height: 1.3;
  color: var(--h-default);
  margin-bottom: 0.5em;
  margin-top: 0;
  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 {
  font-size: 30px;
  font-weight: 500;
}
#main .h2_small h2 {
  font-size: 30px;
  font-weight: 500;
}
#main .h3_small {
  font-size: 22px;
  font-weight: 500;
}
#main .h3_small h3 {
  font-size: 22px;
  font-weight: 500;
}
#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 .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: 600;
}
#main .side_pic_left .rte, #main .side_pic_right .rte {
  padding-bottom: 80px;
}
#main .process-card-link-wrapper {
  position: relative;
  display: block;
  height: 380px;
  overflow: hidden;
  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 {
  padding: 60px 40px 35px 40px;
  z-index: 2;
}
#main .process-card-link-wrapper .content-wrapper p {
  max-width: 100%;
  font-size: 17px;
  line-height: 1.55;
  margin-bottom: 0;
  color: var(--full_white);
}
#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-bottom: 15px;
  font-size: 26px;
  color: var(--full_white);
  line-height: 1.15;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
#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: 500;
  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;
}
#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 .set_blur .cover-image {
  filter: blur(10px) saturate(50%);
  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: blur(0) saturate(50%);
}
#main .bg_svg1 {
  background-image: url("../img/bg_info_svgs/bgsvg_vektor_1.svg");
  background-size: 32%;
}
#main .bg_svg2 {
  background-image: url("../img/bg_info_svgs/bgsvg_vektor_2.svg");
  background-size: 30%;
}
#main .bg_svg3 {
  background-image: url("../img/bg_info_svgs/bgsvg_vektor_3.svg");
  background-size: 33%;
}
#main .bg_svg4 {
  background-image: url("../img/bg_info_svgs/bgsvg_vektor_4.svg");
  background-size: 37%;
}
#main .bg_svg5 {
  background-image: url("../img/bg_info_svgs/bgsvg_vektor_5.svg");
  background-size: 32%;
}
#main .bg_svg6 {
  background-image: url("../img/bg_info_svgs/bgsvg_vektor_6.svg");
  background-size: 30%;
}
#main .bg_svg7 {
  background-image: url("../img/bg_info_svgs/bgsvg_vektor_7.svg");
  background-size: 32%;
}
#main .bg_svg8 {
  background-image: url("../img/bg_info_svgs/bgsvg_vektor_8.svg");
  background-size: 26%;
}
#main .bg_svg9 {
  background-image: url("../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 .topic-slider {
  margin: 36px 40px 0 40px;
  padding-bottom: 30px;
  overflow: hidden;
}
#main .topic-slider .swiper-slide {
  position: relative;
}
#main .topic-slider .swiper-slide .content-wrapper {
  overflow: hidden;
  background-color: var(--whitefilter);
  width: 100%;
  padding: 12px 25px 25px 25px;
  position: absolute;
  z-index: 20;
  margin: 0 auto;
  left: 0;
  top: 270px;
  transition: top 0.4s ease, opacity 0.4s ease;
  text-align: left;
  height: 200px;
  opacity: 0.8;
}
#main .topic-slider .swiper-slide .content-wrapper h3 {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.3;
  color: var(--primary);
  margin-bottom: 0.7em;
  margin-top: 0;
  display: block;
  width: 100%;
  text-transform: uppercase;
  letter-spacing: 0.04rem;
  min-height: 30px;
}
#main .topic-slider .swiper-slide .content-wrapper p {
  width: 100%;
  max-width: 100%;
  line-height: 1.3;
  font-size: 16px;
  color: var(--text);
}
#main .topic-slider .swiper-slide:hover .content-wrapper {
  top: 175px;
  opacity: 1;
}
#main .icon-slider {
  overflow: hidden;
  width: 50%;
  max-height: 100px;
  margin: 0 auto;
  display: block;
}
#main .icon-slider .swiper-wrapper {
  transition-timing-function: linear !important;
}
#main .icon-slider .swiper-slide {
  position: relative;
  flex-shrink: 0;
  width: 80px;
}
#main .icon-slider .swiper-slide .hidden {
  display: none;
}
#main .mod_article#team {
  padding: 20px 50px 0 50px;
  overflow: hidden;
}
#main .mod_article#team .content-text {
  margin-bottom: 0;
}
#main .mod_article#team #teamSlider {
  overflow: hidden;
}
#main .mod_article#team #teamSlider .swiper-slide {
  text-align: center;
  position: relative;
  font-size: 18px;
  height: 420px;
  width: 200px;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.5;
  background-size: 30%;
  background-position: 73% center;
  background-repeat: no-repeat;
}
#main .mod_article#team #teamSlider .swiper-slide.matthias {
  background-image: url("../img/team_vektor_1.svg");
}
#main .mod_article#team #teamSlider .swiper-slide.dennis {
  background-image: url("../img/team_vektor_2.svg");
}
#main .mod_article#team #teamSlider .swiper-slide.daniela {
  background-image: url("../img/team_vektor_3.svg");
}
#main .mod_article#team #teamSlider .swiper-slide figure {
  transition: transform 0.5s ease, bottom 0.5s ease;
  display: block;
  position: absolute;
  transform: scale(0.9);
  bottom: -15%;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 420px;
}
#main .mod_article#team #teamSlider .swiper-slide figure img {
  object-fit: contain;
  object-position: bottom left;
  width: 100%;
  height: 100%;
}
#main .mod_article#team #teamSlider .swiper-slide .rte {
  display: block;
  width: 45%;
  text-align: left;
  position: absolute;
  bottom: calc(-5% + 22px);
  left: 55%;
  z-index: 20;
}
#main .mod_article#team #teamSlider .swiper-slide .rte p {
  font-size: 17px;
  line-height: 1.5;
  width: 100%;
  max-width: 100%;
}
#main .mod_article#team #teamSlider .swiper-slide .rte p.person {
  margin-top: 80px;
}
#main .mod_article#team #teamSlider .swiper-slide .rte p.person strong {
  font-size: 18px;
  font-weight: 700;
  width: 100%;
}
#main .mod_article#team #teamSlider .swiper-slide .rte h2 {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  font-size: 23px;
  line-height: 31px;
  letter-spacing: 0;
  right: 0;
}
#main .mod_article#team #teamSlider .swiper-slide .rte p:not(.person), #main .mod_article#team #teamSlider .swiper-slide .rte h2 {
  transition: transform 0.5s ease, bottom 0.5s ease, opacity 0.5s ease 1s;
  transform: translateY(20px) scale(0.9);
  opacity: 0;
  visibility: hidden;
}
#main .mod_article#team #teamSlider .swiper-slide.swiper-slide-active, #main .mod_article#team #teamSlider .swiper-slide.swiper-slide-visible {
  opacity: 0.5;
}
#main .mod_article#team #teamSlider .swiper-slide.swiper-slide-active figure, #main .mod_article#team #teamSlider .swiper-slide.swiper-slide-visible figure {
  transform: scale(0.9);
  bottom: -15%;
}
#main .mod_article#team #teamSlider .swiper-slide.swiper-slide-active .rte, #main .mod_article#team #teamSlider .swiper-slide.swiper-slide-visible .rte {
  bottom: calc(-5% + 22px);
}
#main .mod_article#team #teamSlider .swiper-slide.swiper-slide-active .rte p:not(.person), #main .mod_article#team #teamSlider .swiper-slide.swiper-slide-active .rte h2, #main .mod_article#team #teamSlider .swiper-slide.swiper-slide-visible .rte p:not(.person), #main .mod_article#team #teamSlider .swiper-slide.swiper-slide-visible .rte h2 {
  transition: transform 0.5s ease, bottom 0.5s ease, opacity 0.5s ease 1s;
  transform: translateY(20px) scale(0.9);
  opacity: 0;
  visibility: hidden;
}
#main .mod_article#team #teamSlider .swiper-slide.swiper-slide-next {
  background: none !important;
  opacity: 1;
}
#main .mod_article#team #teamSlider .swiper-slide.swiper-slide-next figure, #main .mod_article#team #teamSlider .swiper-slide.swiper-slide-next .rte {
  transform: scale(1);
  bottom: 0;
}
#main .mod_article#team #teamSlider .swiper-slide.swiper-slide-next .rte {
  bottom: 0;
}
#main .mod_article#team #teamSlider .swiper-slide.swiper-slide-next .rte p:not(.person), #main .mod_article#team #teamSlider .swiper-slide.swiper-slide-next .rte h2 {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: transform 0.5s ease, bottom 0.5s ease, opacity 0.5s ease 1s;
}
#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: 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;
  width: 29.333% !important;
  min-width: 29.333% !important;
  margin: 1%;
  border-radius: 8px;
  padding: 30px 30px 0 30px;
  -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-items: 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: 3px;
}
#main .logo-wrapper .logo-img a {
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  width: 100%;
  height: auto;
}
#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%;
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: linear;
}
#main .logo-wrapper .logo-img figure img:hover {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}
#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: 700;
  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: 700;
  margin-top: 50px;
}
#main .mod_newslist .news-highlight-wrapper h3 a {
  font-size: 28px;
  color: var(--primary);
  text-transform: uppercase;
  font-weight: 500;
}
#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 .mod_faqlist {
  margin: 30px auto;
  width: 80%;
  overflow: visible !important;
}
#main .content-accordion {
  overflow: visible !important;
}
#main .ce_accordion {
  overflow: visible !important;
  display: block;
  border-radius: 3px;
  background-color: var(--full_white);
}
#main .ce_accordion h3.toggler {
  text-transform: none;
  width: 100%;
  display: block;
  font-size: 22px;
  white-space: nowrap;
  height: 64px;
  line-height: 1.6;
  font-weight: 500;
  padding: 14px 27px;
  border: 0 none;
  margin: 0 auto;
  transition: all 0.4s;
  color: var(--primary);
  cursor: pointer;
  background-color: rgba(247, 248, 249, 0.6784313725);
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.08);
}
#main .ce_accordion h3.toggler:hover, #main .ce_accordion h3.toggler.ui-state-active {
  background: var(--primary);
  background-position: right;
  filter: brightness(90%);
  color: var(--full_white);
}
#main .ce_accordion .ui-icon {
  margin-top: 0;
  text-indent: 0;
}
#main .ce_accordion .ui-accordion-header .ui-accordion-header-icon {
  transition: all 0.4s;
  display: inline-block;
  background-image: none;
  width: 32px;
  height: 32px;
  position: relative;
}
#main .ce_accordion .ui-accordion-header .ui-accordion-header-icon:before {
  content: "\ea4c";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  font-family: "Lineicons";
  transition: All 0.3s ease;
  -webkit-transition: All 0.3s ease;
  color: var(--primary);
  font-size: 32px;
  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(--full_white);
}
#main .ce_accordion .accordion {
  background-color: var(--background-white);
  color: var(--text);
  padding: 25px 80px 30px 40px;
  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%;
}

/* 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-weight: 900;
  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: 400;
}
#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("../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: 700;
  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("../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("../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("../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("../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: 600;
  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("../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);
}

/* Formulare */
#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;
}
#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: 500;
  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: 500;
  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: 400;
}
#main .ce_form input:not([type=checkbox]):not([type=radio]),
#main .ce_form textarea,
#main .ce_form select {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 2px solid rgba(144, 144, 147, 0.4);
  border-radius: 3px;
  font-size: 17px;
  color: var(--text);
  background-color: var(--background-white);
  transition: all 0.25s ease;
  font-family: "Source Sans Pro", sans-serif;
}
#main .ce_form input:not([type=checkbox]):not([type=radio]):focus,
#main .ce_form textarea:focus,
#main .ce_form select:focus {
  border-color: 1px solid var(--text_light);
  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: 500 !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: 2px solid rgba(144, 144, 147, 0.4);
  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: 2px solid rgba(144, 144, 147, 0.4);
  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: 500;
  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%;
}

/*JQuery UI-Widget Styles */
.ui-widget {
  font-family: "Source Sans Pro", sans-serif;
  color: var(--text);
  font-weight: 400;
  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: 500;
}
.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";
  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;
}

/* Add-on für Violution Rooms */
body.rooms #main #violution-rooms {
  background-blend-mode: overlay;
  height: 620px;
  min-height: 620px;
  padding-bottom: 0;
  padding-top: 105px;
}
body.rooms #main #violution-rooms .binding {
  height: 100%;
}
body.rooms #main #violution-rooms #picture_case {
  position: relative;
  flex: 0 0 60%;
  max-width: 60%;
  height: 100%;
}
body.rooms #main #violution-rooms #picture_case.content-image, body.rooms #main #violution-rooms #picture_case.content-image figure, body.rooms #main #violution-rooms #picture_case.content-image figure img {
  border-radius: 0;
  height: 100%;
  display: block;
}
body.rooms #main #violution-rooms #content-case {
  position: relative;
  flex: 0 0 40%;
  max-width: 40%;
  background-image: url("../img/vio-prism-bg-weiss.svg");
  background-color: rgba(255, 255, 255, 0.5);
  background-size: 150%;
  height: 100%;
}
body.rooms #main #violution-rooms #content-case .dark {
  background-image: url("../img/vio-prism-bg-anthrazit.svg");
}
body.rooms #main #violution-rooms #content-case .violett {
  background-image: url("../img/vio-prism-bg-violett.svg");
}
body.rooms #main #violution-rooms #content-case .inner {
  position: absolute;
  top: 60px;
  left: 50px;
  height: 400px;
  width: 105%;
  z-index: 100;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  padding: 50px 100px 60px 60px;
  border-radius: 3px;
}
body.rooms #main #violution-rooms #content-case .inner:after {
  content: "";
  position: absolute;
  top: 50%;
  right: -40px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 40px solid transparent;
  border-bottom: 40px solid transparent;
  border-left: 40px solid rgba(255, 255, 255, 0.9);
}
body.rooms #main #violution-rooms #content-case .inner h1 {
  font-size: 42px;
  line-height: 1;
}
body.rooms #main #violution-rooms #content-case .inner h1 .highlight-color {
  font-size: 32px;
}
body.rooms a#buchen-button {
  color: var(--m4_toplink_bg) !important;
  border: 3px solid var(--m4_toplink_bg) !important;
  background: transparent;
  display: inline-block;
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  font-weight: 700;
  font-style: normal;
  border-radius: 3px;
  transition: all 0.4s;
  line-height: 17px;
  letter-spacing: 0.05rem;
  font-size: 18px;
  padding: 10px 32px;
  text-transform: uppercase;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15), 0 1px 3px rgba(0, 0, 0, 0.15);
  top: 56px;
  position: absolute;
  right: 116px;
  z-index: 1000;
}
body.rooms a#buchen-button:hover {
  color: var(--button-hover) !important;
  border-color: var(--button-hover) !important;
}
body.rooms #top-line-navigation ul li#logo {
  max-width: 320px;
  background-color: var(--footer_bg);
}
body.rooms #top-line-navigation ul li#claim-line {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  justify-content: right;
  padding-right: 53px;
  align-items: center;
  color: var(--full_whit);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.043rem;
  background-color: var(--footer_bg);
  white-space: nowrap;
  text-align: right;
  text-transform: none;
}
body.rooms #top-line-navigation ul li#claim-line .claim-text {
  font-weight: 400;
}
body.rooms #top-line-navigation ul li#claim-line .claim-text:after {
  content: " | ";
  display: inline-block;
  margin: 0 30px;
}
body.rooms #top-line-navigation ul li#claim-line a {
  color: var(--full_white);
  font-weight: 400;
}
body.rooms #top-line-navigation ul li#claim-line a i.lni {
  width: 26px;
}
body.rooms #top-line-navigation ul li#claim-line a i.lni:before {
  color: var(--full_white);
}
body.rooms #top-line-navigation ul li#claim-line a:hover {
  filter: brightness(1.6);
  text-decoration: underline;
}
body.rooms #navbar.sticky-navigation.sticky a#buchen-button {
  top: 10px;
}
body.rooms #navbar.sticky-navigation.sticky #top-line-navigation ul li#claim-line {
  display: none;
}
body.rooms #navbar .row #main-navigation .mod_navigation ul li {
  margin: 0 30px 0 30px;
}
body.rooms #navbar .row #main-navigation .mod_navigation ul li a, body.rooms #navbar .row #main-navigation .mod_navigation ul li strong.active, body.rooms #navbar .row #main-navigation .mod_navigation ul li strong.forward, body.rooms #navbar .row #main-navigation .mod_navigation ul li strong.trail {
  font-size: 21px;
}

/* 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;
}

@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 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);
  }
}
.fly-in-button {
  bottom: -100px; /* Startet außerhalb des Viewports */
  right: 20px;
  opacity: 0;
  animation: flyInContact 0.6s ease-in-out 2.3s forwards;
}

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