/**
* layout.css
*
* Copyright 2026, Alex Stroh
* SimpleCake GmbH
* https://www.comvation.com
*
* Released on: März 12, 2026
*/
/* ==========================================================================
   Colors Overview
   ========================================================================== */
:root {
  --body-color: #000000;
  --body-bg: #ffffff;
  --navi-color: #000000;
  --navi-bg: #ededed;
  --navi-headline: #004c9b;
  --navi-links: #4e4e4e;
  --navi-links-hover: #004c9b;
  --footer-color: #ffffff;
  --footer-bg: #004c9b;
  --button-color: #004c9b;
  --button-bg: transparent;
  --button-color-hover: #ffffff;
  --button-bg-hover: #004c9b;
  --button-color-active: #ffffff;
  --button-bg-active: #004c9b;
  --button-color-active-hover: #ffffff;
  --button-bg-active-hover: #004c9b;
  --color-1: #ffffff;
  --color-2: #004c9b;
  --color-3: #608cba;
  /* --color-4: #70808e; */
  /* --color-5: #819895; */
  /* --color-6: #e7ad64; */
  /* --color-7: #d25643; */

  --color-4: #a9b3bc;
  --color-5: #b8c5c4;
  --color-6: #edc491;
  --color-7: #e6a398;







  --color-8: #f2f2f2;
  --color-9: #ffffff;
  --color-10: #dc3545;
  --color-11: #dbdbdb;
  --color-12: #000000;
  --color-13: #6c6c6c;
  --color-14: #1fb871;
  --color-15: #dc3545;
  --color-16: #ededed;
  --color-17: #fafafa;
  --color-18: #da0021;
  --navi-header: 160px;
  --navi-footer: 160px;
  --navi-content: calc(100vh - (var(--navi-header) + var(--navi-footer)));
  --x: clamp(0rem, -2.0392rem + 8.366vw, 8rem);
  --y: clamp(1.5rem, 0.6923rem + 3.5897vw, 5rem);
  --transition: 0.25s;
  --headline-1: clamp(2.1875rem, 1.4824rem + 2.8926vw, 4.375rem);
  --headline-2: clamp(2.1875rem, 1.4824rem + 2.8926vw, 4.375rem);
  --headline-3: clamp(1.6875rem, 1.3249rem + 1.4876vw, 2.8125rem);
  --headline-4: calc(2.2243083rem + .1284585vw);
  --headline-5: calc(1.08152174rem + .2173913vw);
  --headline-6: calc(.95454545rem + .22727273vw);
  --headline-anlagen: clamp(1.875rem, 1.7543rem + 0.495vw, 2.1875rem);
  --p: clamp(1.25rem, 1.2097rem + 0.1653vw, 1.375rem);
  --p-lead: clamp(2.125rem, 1.9975rem + 0.5229vw, 2.625rem);
  --p-caption: calc(clamp(1.25rem, 1.2097rem + 0.1653vw, 1.375rem) / 1.5);
  --button: clamp(1.0625rem, 1.0021rem + 0.2479vw, 1.25rem);
}

/* ==========================================================================
   Fonts
   ========================================================================== */
@font-face {
  font-family: 'FontAwesome';
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  src: url('../vendor/font-awesome-v4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
  url('../vendor/font-awesome-v4.7.0/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff');
}

@font-face {
  font-family: 'Roboto';
  src: url('/themes/bmspower_2026/fonts/Roboto-Thin.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('/themes/bmspower_2026/fonts/Roboto-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('/themes/bmspower_2026/fonts/Roboto-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('/themes/bmspower_2026/fonts/Roboto-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Customs
   ========================================================================== */
html {
  width: 100%;
  max-width: 100vw;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
}

a,
button,
input,
select,
textarea,
[role="button"] {
  touch-action: manipulation;
}

body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  font-family: 'Roboto', arial, sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: 0;
  background-color: var(--body-bg);
  color: var(--body-color);
  opacity: 0.01;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-transition: all var(--transition) ease-in-out;
  transition: all var(--transition) ease-in-out;
  pointer-events: all;
  z-index: 100;
  -ms-overflow-style: auto;
  scrollbar-width: auto;
}

body.loaded {
  opacity: 1;
}

#landscape__mode {
  position: fixed;
  display: flex;
  width: 100%;
  height: 100vh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: var(--color-1);
  overflow: hidden;
  -webkit-transition: all var(--transition) ease-in-out;
  transition: all var(--transition) ease-in-out;
  z-index: 9000;
}

.landscape_mode_text {
  margin-top: 1rem;
  color: var(--body-color);
}

.noscroll {
  overflow: hidden;
}

@media (min-device-width: 1025px) {
  .noscroll {
    padding-right: 15px;
  }
}

body.noscroll {
  position: fixed;
  max-height: 100vh;
  padding: 0;
  overflow: hidden;
  -webkit-transition: none;
  transition: none;
  pointer-events: none;
}

a {
  color: var(--body-color);
  -webkit-transition-duration: calc(var(--transition) / 2);
  transition-duration: calc(var(--transition) / 2);
  cursor: pointer;
  text-decoration-color: transparent;
  text-underline-offset: 5px;
}

a:hover {
  text-decoration: underline;
  color: var(--body-color);
  cursor: pointer;
  text-underline-offset: 5px;
  text-decoration-color: var(--body-color);
}

a.blue {
  color: var(--body-color);
  -webkit-transition-duration: calc(var(--transition) / 2);
  transition-duration: calc(var(--transition) / 2);
  cursor: pointer;
  text-decoration-color: transparent;
  text-underline-offset: 5px;
}

a.blue:hover {
  text-decoration: underline;
  color: var(--color-2);
  cursor: pointer;
  text-underline-offset: 5px;
  text-decoration-color: transparent;
}

nav a,
nav a:hover {
  text-decoration: none;
}

u {
  text-decoration: underline;
  text-underline-offset: 5px;
}

li {
  font-family: 'Roboto', arial, sans-serif;
  font-size: clamp(1.25rem, 1.2097rem + 0.1653vw, 1.375rem);
  font-weight: 300;
  letter-spacing: .8px;
}

.cke_editable {
  background-color: #ffffff;
}

#PoweredByFooter {
  display: none !important;
}

#preview-content {
  padding-bottom: 0 !important;
}

#browser-note {
  position: fixed;
  width: 100%;
  top: -200px;
  padding: 15px;
  font-size: .9em;
  text-align: center;
  background-color: var(--color-10);
  color: var(--color-1);
  opacity: 0;
  -webkit-box-shadow: 0 2px 10px 0 rgba(29, 29, 29, .25);
  box-shadow: 0 2px 10px 0 rgba(29, 29, 29, .25);
  -webkit-transition: all calc(var(--transition) * 2) ease-in-out;
  transition: all calc(var(--transition) * 2) ease-in-out;
  z-index: 9999;
}

#browser-note.show-browser-note {
  top: 0;
  opacity: 1;
}

h1 {
  font-family: 'Roboto', arial, sans-serif;
  font-size: var(--headline-1);
  line-height: normal;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-2);
  font-weight: 300;
}

h1.content-title {
  margin-bottom: 5rem;
}

h2 {
  margin-bottom: clamp(2rem, 10vw, 3rem);
  font-family: 'Roboto', arial, sans-serif;
  font-size: var(--headline-2);
  line-height: normal;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-2);
  font-weight: 300;
}

h3 {
  margin-bottom: clamp(0rem, 10vw, 1rem);
  font-family: 'Roboto', arial, sans-serif;
  font-size: var(--headline-3);
  line-height: normal;
  letter-spacing: 0.5px;
  color: var(--color-2);
  font-weight: 300;
}

h4 {
  font-family: 'Roboto', arial, sans-serif;
  font-size: var(--headline-4);
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

h5 {
  font-family: 'Roboto', arial, sans-serif;
  font-size: var(--headline-5);
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

h6 {
  font-family: 'Roboto', arial, sans-serif;
  font-size: var(--headline-6);
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

p,
li {
  font-family: 'Roboto', arial, sans-serif;
  font-size: var(--p);
  font-weight: 300;
  letter-spacing: .8px;
  color: var(--body-color);
}

strong,
.strong {
  font-family: 'Roboto', arial, sans-serif;
  font-weight: 700;
}

p.lead {
  font-family: 'Roboto', arial, sans-serif;
  font-size: var(--p-lead);
  font-weight: 300;
  line-height: normal;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  hyphens: auto;
  color: var(--color-2);
}

p.caption {
  font-family: 'Roboto', arial, sans-serif;
  font-size: var(--p-caption);
  font-weight: 300;
  line-height: normal;
  letter-spacing: 0.5px;
  color: var(--color-13);
}

.default,
.default > * {
  color: var(--body-color);
}

.rot,
.rot > * {
  color: var(--color-7);
}

.gelb,
.gelb > * {
  color: var(--color-6);
}

.gruen,
.gruen > * {
  color: var(--color-5);
}

.blau,
.blau > * {
  color: var(--color-4);
}

.normal,
.normal > * {
  color: var(--color-2);
}

.button.white {
  margin-right: 2rem;
  margin-bottom: 1rem;
  background-color: var(--color-1);
  color: var(--color-2);
  border-color: var(--color-1);
}

.button.white:hover {
  background-color: var(--color-2);
  color: var(--color-1);
  border-color: var(--color-2);
}

.button.white.disable,
.button.white.disable:hover {
  background-color: var(--color-1);
  color: var(--color-11);
  border-color: var(--color-1);
  cursor: not-allowed;
}

.content-tpl {
  padding-bottom: calc(var(--y) / 2);
}

.content-tpl ul {
  margin-bottom: 2rem;
}

.content-tpl ul.no-li li {
  list-style: none;
}

ul.no-li {
  padding-left: 0;
}

.content-tpl li {
  line-height: 1.4;
  list-style: square;
}

.content-tpl li li {
  line-height: 1.4;
  list-style: circle;
}

.content-tpl a {
  text-decoration: none;
  color: var(--color-2);
  cursor: pointer;
  text-underline-offset: 5px;
}

.content-tpl a:hover {
  text-decoration: underline;
  color: var(--color-2);
  cursor: pointer;
  text-underline-offset: 5px;
}

.content-tpl:last-child {
  padding-bottom: 1rem;
}

.content-tpl p:last-child {
  margin-bottom: 2rem;
}

.content-tpl img {
  width: auto;
  max-width: 100%;
}

img {
  max-width: 100%;
  height: auto;
}

#content {
  min-height: 75vh;
  padding: var(--y) calc(var(--x) / 4);
}

iframe[allowfullscreen=""] {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 1px 1px 0 0;
  aspect-ratio: 16 / 9;
}

.c7n-center-vertically {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.c7n-backend-only {
  display: block;
  width: 100%;
  height: 0;
  padding: 0;
  margin: 0;
  visibility: hidden;
  clear: both;
}

#c7n-scroll-down {
  position: absolute;
  display: block;
  width: 30px;
  height: 30px;
  bottom: 30px;
  left: calc(50% - 15px);
  -moz-animation-name: up-down;
  -webkit-animation-name: up-down;
  animation-name: up-down;
  -moz-animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  cursor: pointer;
  z-index: 200;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
}

#c7n-scroll-down img {
  width: 30px;
  height: auto;
}

.imprint a {
  text-decoration: none;
  color: var(--color-2);
}

.imprint img {
  margin: 2rem 0 2rem 0 !important;
}

#content-home {
  padding: var(--y) var(--x);
  background-color: var(--color-8);
}

.offset-img img {
  width: 100%;
  margin-bottom: 1rem;
}

#content-news {
  padding: clamp(1rem, -0.7843rem + 7.3203vw, 8rem) var(--x);
}

input {
  height: 48px;
}

input:focus {
  color: var(--color-2);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: 0;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid rgb(223, 223, 223);
  border-radius: 0;
  -webkit-box-shadow: 0 0 0 1000px rgb(255, 255, 255) inset;
  box-shadow: 0 0 0 1000px rgb(255, 255, 255) inset !important;
  transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: rgba(var(--marine-blue), 1);
}

.breadcrumb {
  display: flex;
  padding: 0 0;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
}

/* ==========================================================================
   PrivacyBee
   ========================================================================== */
.KFaIpG_h1 {
  display: none;
}

.KFaIpG_wrapper {
  max-width: 100% !important;
}

.KFaIpG_text, .KFaIpG_listElement, .CCca4W_expandableName, .KFaIpG_link {
  max-width: 100% !important;
  font-size: var(--p) !important;
  line-height: 1.4 !important;
  color: var(--color-12) !important;
}

.KFaIpG_h2 {
  margin-bottom: clamp(0rem, 10vw, 1rem) !important;
  font-family: 'Roboto', arial, sans-serif !important;
  font-size: var(--headline-3) !important;
  font-weight: 500 !important;
  line-height: normal !important;
  letter-spacing: 0.5px !important;
  color: var(--body-color) !important;
}

.oSc-KW_listWrapper, ._7Q79CG_techWrapper {
  max-width: 100% !important;
}

.CCca4W_expandableWrapper {
  padding: 0.5rem 1rem !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 0 !important;
}

.KFaIpG_text.undefined {
  margin-top: 2rem !important;
}

.KFaIpG_h3 {
  font-family: 'Roboto', arial, sans-serif !important;
  font-size: var(--headline-5) !important;
  font-weight: 600 !important;
  line-height: normal !important;
  letter-spacing: 1.4 !important;
  text-transform: uppercase !important;
  color: var(--body-color) !important;
}

.CCca4W_expandableRightText {
  font-size: var(--p) !important;
  line-height: 1.4 !important;
  color: var(--color-12) !important;
}

.CCca4W_expandableTag {
  line-height: 1.4 !important;
  color: var(--color-12) !important;
}

/* ==========================================================================
   Boostrap
   ========================================================================== */
.container {
  max-width: 1400px;
}

.c7n-center-vertically {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

hr.c7n-backend-only {
  display: block;
  width: 100%;
  height: 0;
  padding: 0;
  margin: 0;
  visibility: hidden;
  clear: both;
}

hr {
  margin: 2rem 0;
  background-color: var(--color-2);
  color: inherit;
  opacity: 1;
  border: 0;
}

/* ==========================================================================
   Accordion FAQ
   ========================================================================== */
#accordionFAQ button.accordion-button {
  font-size: var(--headline-5);
  font-weight: 300;
  line-height: normal;
  letter-spacing: 1.4px;
  background-color: var(--color-17);
  color: var(--color-2);
  box-shadow: none;
}

#accordionFAQ button.accordion-button.collapsed {
  background-color: var(--color-17);
  box-shadow: none;
}

#accordionFAQ .accordion-item {
  margin-bottom: 0.25rem;
}

#accordionFAQ button.accordion-button.collapsed:hover, #accordionFAQ button.accordion-button:hover {
  background-color: var(--color-16) !important;
}

/* ==========================================================================
   Share
   ========================================================================== */
.c7n-share-buttons,
.c7n-share-buttons li {
  display: inline-block;
  padding: 0;
  margin: 0;
  list-style: none;
}

.c7n-share-buttons li a {
  display: block;
  padding: 8px;
  list-style: none;
  border: 1px solid #000000;
}

#c7n-scroll-down {
  position: absolute;
  display: block;
  width: 30px;
  height: auto;
  bottom: 30px;
  left: calc(50% - 15px);
  -webkit-animation-name: up-down;
  animation-name: up-down;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  cursor: pointer;
  z-index: 200;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

#c7n-scroll-down img {
  width: 30px;
  height: auto;
}

/* ==========================================================================
   Button / Filter
   ========================================================================== */
.button,
.content-tpl .button {
  position: relative;
  display: inline-block;
  padding: 0.5rem 2rem;
  font-family: 'Roboto', arial, sans-serif;
  font-size: var(--button);
  font-weight: 300;
  text-decoration: none;
  letter-spacing: .8px;
  text-transform: uppercase;
  background-color: var(--button-bg);
  border: 1px solid;
  border-radius: 0;
  -webkit-transition: all var(--transition) ease-in-out;
  transition: all var(--transition) ease-in-out;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-color: var(--color-2);
  color: var(--color-2);
}

.button:hover,
.content-tpl .button:hover {
  text-decoration: none;
  background-color: var(--button-bg-hover);
  color: var(--button-color-hover);
  border: 1px solid var(--button-bg-hover);
}

.button.active,
.content-tpl .button.active {
  background-color: var(--button-bg-active);
  color: var(--button-color-active);
  border: 1px solid var(--button-bg-active);
}

.button.active:hover,
.content-tpl .button.active:hover {
  background-color: var(--button-bg-active-hover);
  color: var(--button-color-active-hover);
  border: 1px solid var(--button-bg-active-hover);
}

form#filter-form-news {
  margin-bottom: 2rem;
}

form#filter-form-news .button {
  margin-right: 0.5rem;
}

form#filter-form-netzwerk {
  margin-bottom: 2rem;
}

form#filter-form-netzwerk .button {
  margin-right: 0.5rem;
}

select {
  position: relative;
  display: block;
  width: 100%;
  max-width: 375px;
  padding: 0.5rem 1rem;
  font-family: 'Roboto', arial, sans-serif;
  font-size: clamp(1.25rem, 1.2097rem + 0.1653vw, 1.375rem);
  font-weight: 300;
  letter-spacing: .8px;
  background: url(/themes/bmspower_2026/img/arrow_black.svg) no-repeat 97% center;
  background-size: 0.75rem;
  background-color: var(--body-bg);
  color: var(--body-color);
  border: 1px solid var(--color-2);
  border-radius: 0;
  transition: border-color var(--transition) ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  caret-color: var(--body-color);
}

select.clx-contact-form-select {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 48px;
  padding: 1rem 1rem 0.5rem 1rem;
  margin-bottom: 0;
  font-family: 'Roboto', arial, sans-serif;
  font-size: clamp(1.25rem, 1.2097rem + 0.1653vw, 1.375rem);
  font-weight: 300;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.4;
  letter-spacing: .8px;
  background-color: var(--body-bg);
  color: var(--body-color);
  border: 1px solid var(--color-2);
  border-radius: 0;
  transition: border-color 0.2s ease;
  caret-color: var(--body-color);
}

select:focus-visible {
  border-radius: 0;
  outline: 2px solid var(--color-2);
  outline-offset: 2px;
}

a.set-isotope-filter {
  display: none;
}

.isotope-grid {
  margin: 0 -1px 0 0;
}

.isotope-content {
  padding: 0;
}

/* ==========================================================================
   Hover-Effect | OK
   ========================================================================== */
@media only screen and (min-width: 1200px) {
  .hover--effect img {
    width: -webkit-calc(100%);
    width: 100%;
    max-width: none;
    margin-bottom: 0 !important;
    opacity: 1;
    -webkit-transition: opacity var(--transition), -webkit-transform var(--transition);
    transition: opacity var(--transition), transform var(--transition);
    -moz-transform: translate3d(0px, 0, 0) scale(1);
    -ms-transform: translate3d(0px, 0, 0) scale(1);
    -webkit-transform: translate3d(0px, 0, 0) scale(1);
    transform: translate3d(0px, 0, 0) scale(1);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .hover--effect:hover img {
    -webkit-transform: none;
    transform: none;
    cursor: default;
  }

  .hover--effect.ja:hover img {
    -webkit-transform: translate3d(0, 0, 0) scale(1.05);
    transform: translate3d(0, 0, 0) scale(1.05);
    cursor: pointer;
  }

  .hover--effect > * {
    pointer-events: none;
    cursor: default;
  }

  .hover--effect.ja > * {
    pointer-events: all;
    cursor: pointer;
  }

  .hover--effect:hover {
    cursor: default;
  }

  .hover--effect.ja:hover {
    cursor: pointer;
  }

  .hover--effect:hover .anlagen__services {
    cursor: pointer;
  }

  .hover--effect .anlagen__details {
    display: none;
  }

  .hover--effect.ja .anlagen__details {
    display: inline-flex;
  }

  article:hover {
    cursor: pointer;
  }

  article[onclick=""]:hover {
    cursor: default;
  }
}

/* ==========================================================================
   Social Media
   ========================================================================== */
.socialmedia__content.home {
  padding-top: var(--y);
  padding-bottom: var(--y);
}

/* ==========================================================================
   Header + Logo | OK
   ========================================================================== */
header {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  max-height: calc(var(--navi-header) - 80px);
  align-items: center;
  z-index: 1000;
}

.logo {
  position: relative;
  display: block;
  max-height: calc(var(--navi-header) - 80px);
  padding: 0.5rem calc(var(--x) + 0.75rem);
  justify-content: flex-start;
}

img.logo__image {
  width: auto;
  height: 100%;
  aspect-ratio: 16 / 9;
}

@media only screen and (min-width: 360px) and (orientation: portrait) {
  header {
    max-height: calc(var(--navi-header) - 80px);
  }

  .logo {
    height: calc(var(--navi-header) - 80px);
    max-height: calc(var(--navi-header) - 80px);
    padding: 0.5rem calc(var(--x) + 0.75rem);
  }
}

@media only screen and (min-width: 360px) and (orientation: landscape) {
  header {
    max-height: calc(var(--navi-header) - 80px);
  }

  .logo {
    height: calc(var(--navi-header) - 80px);
    max-height: calc(var(--navi-header) - 80px);
    padding: 0.5rem calc(var(--x) / 2);
  }
}

@media only screen and (min-width: 390px) and (orientation: portrait) {
  header {
    max-height: calc(var(--navi-header) - 80px);
  }

  .logo {
    height: calc(var(--navi-header) - 80px);
    max-height: calc(var(--navi-header) - 80px);
    padding: 0.5rem calc(var(--x) + 0.75rem);
  }
}

@media only screen and (min-width: 390px) and (orientation: landscape) {
  header {
    max-height: calc(var(--navi-header) - 80px);
  }

  .logo {
    height: calc(var(--navi-header) - 80px);
    max-height: calc(var(--navi-header) - 80px);
    padding: 0.5rem calc(var(--x) / 2);
  }
}

@media only screen and (min-width: 576px) and (orientation: portrait) {
  header {
    max-height: calc(var(--navi-header) - 70px);
  }

  .logo {
    height: calc(var(--navi-header) - 70px);
    max-height: calc(var(--navi-header) - 70px);
    padding: 0.5rem calc(var(--x) / 2);
  }
}

@media only screen and (min-width: 576px) and (orientation: landscape) {
  header {
    max-height: calc(var(--navi-header) - 70px);
  }

  .logo {
    height: calc(var(--navi-header) - 70px);
    max-height: calc(var(--navi-header) - 70px);
    padding: 0.5rem calc(var(--x) / 2);
  }
}

@media only screen and (min-width: 768px) and (orientation: portrait) {
  header {
    max-height: calc(var(--navi-header) - 70px);
  }

  .logo {
    height: calc(var(--navi-header) - 70px);
    max-height: calc(var(--navi-header) - 70px);
    padding: 0.5rem calc(var(--x) + 0.75rem);
  }
}

@media only screen and (min-width: 768px) and (orientation: landscape) {
  header {
    max-height: calc(var(--navi-header) - 70px);
  }

  .logo {
    max-height: calc(var(--navi-header) - 70px);
    padding: 0.5rem calc(var(--x) / 2);
  }
}

@media only screen and (min-width: 1024px) and (orientation: portrait) {
  header {
    max-height: calc(var(--navi-header) - 60px);
  }

  .logo {
    height: calc(var(--navi-header) - 60px);
    max-height: calc(var(--navi-header) - 60px);
    padding: 0.5rem calc(var(--x) / 2);
  }
}

@media only screen and (min-width: 1112px) and (orientation: landscape) {
  header {
    max-height: calc(var(--navi-header) - 60px);
  }

  .logo {
    height: calc(var(--navi-header) - 60px);
    max-height: calc(var(--navi-header) - 60px);
    padding: 0.5rem calc(var(--x) / 2);
  }
}

@media only screen and (min-width: 1200px) {
  header {
    max-height: calc(var(--navi-header) - 40px);
  }

  .logo {
    height: calc(var(--navi-header) - 40px);
    max-height: calc(var(--navi-header) - 40px);
    padding: 0.5rem calc(var(--x) / 2);
  }
}

@media only screen and (min-width: 1400px) {
  header {
    max-height: calc(var(--navi-header) - 40px);
  }

  .logo {
    height: calc(var(--navi-header) - 40px);
    max-height: calc(var(--navi-header) - 40px);
    padding: 0.5rem calc(var(--x) / 2);
  }
}

@media only screen and (min-width: 1600px) {
  header {
    max-height: calc(var(--navi-header) - 20px);
  }

  .logo {
    height: calc(var(--navi-header) - 20px);
    max-height: calc(var(--navi-header) - 20px);
    padding: 0.5rem calc(var(--x) / 2);
  }
}

@media only screen and (min-width: 1920px) {
  header {
    max-height: var(--navi-header);
  }

  .logo {
    height: var(--navi-header);
    max-height: var(--navi-header);
    padding: 0.5rem calc(var(--x) / 2);
  }
}

/* ==========================================================================
   Eyecatcher | OK
   ========================================================================== */
.eyecatcher__right {
  position: relative;
  display: flex;
  height: 100vh;
  padding: 0;
}

.eyecatcher__right.home img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.eyecatcher__right.main {
  position: relative;
  display: flex;
  height: 100vh;
  padding: 0;
}

.eyecatcher__left {
  /*padding: var(--y) var(--x);*/
  display: flex;
  padding: var(--y) calc(var(--x) + 0.75rem);
  flex-direction: column;
  justify-content: center;
}

.eyecatcher__headline {
  margin-bottom: clamp(1.875rem, 1.7543rem + 0.495vw, 2.1875rem);
}

.eyecatcher__desc {
  font-family: 'Roboto', arial, sans-serif;
  font-size: var(--p);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: .8px;
  color: var(--color-2);
}

.eyecatcher__right.blau {
  background-color: var(--color-4);
}

.eyecatcher__right.gruen {
  background-color: var(--color-5);
}

.eyecatcher__right.gelb {
  background-color: var(--color-6);
}

.eyecatcher__right.rot {
  background-color: var(--color-7);
}

.eyecatcher__header__image {
  position: relative;
  width: 100%;
  height: 100%;
  max-height: 40vh;
  background-color: var(--color-2);
  border-bottom: 4px solid var(--color-9);
}

.eyecatcher__header__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
}

.eyecatcher__element {
  position: absolute;
  display: flex;
  width: 100%;
  height: 100%;
  padding: var(--y) var(--x);
  z-index: 1;
}

.eyecatcher__element img {
  display: flex;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.eyecatcher__claim {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: var(--y) var(--x);
  font-size: clamp(1.375rem, 1.2318rem + 0.6402vw, 2rem);
  line-height: 1.2;
  text-align: right;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-1);
}

@media only screen and (min-width: 360px) and (orientation: portrait) {
  .eyecatcher__left {
    min-height: calc(var(--vh, 1vh) * 40);
  }

  .eyecatcher__left.home {
    height: calc(var(--vh, 1vh) * 40);
    padding: var(--y) calc(var(--x) + 0.75rem);
  }

  .eyecatcher__right {
    height: calc(var(--vh, 1vh) * 60);
  }

  .eyecatcher__right.main {
    display: flex;
    height: calc(var(--vh, 1vh) * 100);
    padding: 0;
  }

  #cycle__slider {
    width: 100%;
  }

  img.cycle-slide {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .eyecatcher__header__image {
    max-height: 40vh;
    border-bottom: 2px solid var(--color-9);
  }

  .eyecatcher__claim {
    padding: calc(var(--x) + 0.75rem);
  }
}

@media only screen and (min-width: 390px) and (orientation: portrait) {
  .eyecatcher__left {
    min-height: calc(var(--vh, 1vh) * 40);
  }

  .eyecatcher__left.home {
    height: calc(var(--vh, 1vh) * 40);
    padding-top: var(--y);
    padding-right: calc(var(--x) + .75rem);
    padding-bottom: var(--y);
    padding-left: calc(var(--x) + .75rem);
  }

  .eyecatcher__right {
    height: calc(var(--vh, 1vh) * 60);
  }

  .eyecatcher__right.main {
    display: flex;
    height: calc(var(--vh, 1vh) * 100);
    padding: 0;
  }

  #cycle__slider {
    width: 100%;
  }

  img.cycle-slide {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .eyecatcher__header__image {
    max-height: 40vh;
    border-bottom: 2px solid var(--color-9);
  }

  .eyecatcher__claim {
    padding: 0.5rem calc(var(--x) + 0.75rem);
  }
}

@media only screen and (min-width: 576px) and (orientation: portrait) {
  .eyecatcher__left {
    height: calc(var(--vh, 1vh) * 40);
  }

  .eyecatcher__left.home {
    height: calc(var(--vh, 1vh) * 40);
    padding: var(--y) var(--x);
  }

  .eyecatcher__right {
    height: calc(var(--vh, 1vh) * 60);
  }

  .eyecatcher__right.main {
    display: flex;
    height: calc(var(--vh, 1vh) * 100);
    padding: 0;
  }

  #cycle__slider {
    width: 100%;
  }

  img.cycle-slide {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .eyecatcher__header__image {
    max-height: 40vh;
    border-bottom: 2px solid var(--color-9);
  }

  .eyecatcher__claim {
    padding: var(--x);
  }
}

@media only screen and (min-width: 576px) and (orientation: landscape) {
  .eyecatcher__left.home {
    height: calc((var(--vh, 1vh) * 100) - calc(var(--navi-header) - 40px));
    padding: var(--y) var(--x);
  }

  .eyecatcher__left.main {
    height: calc(var(--vh, 1vh) * 100);
  }

  .eyecatcher__right {
    height: calc(var(--vh, 1vh) * 70);
  }

  .eyecatcher__right.home {
    height: calc((var(--vh, 1vh) * 100));
  }

  .eyecatcher__right.main {
    display: flex;
    height: calc(var(--vh, 1vh) * 100);
    padding: 0;
  }

  #cycle__slider {
    width: 100%;
  }

  img.cycle-slide {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .eyecatcher__header__image {
    max-height: 40vh;
    border-bottom: 2px solid var(--color-9);
  }

  .eyecatcher__claim {
    padding: var(--x);
  }
}

@media only screen and (min-width: 768px) and (orientation: portrait) {
  .eyecatcher__left.home {
    height: calc(var(--vh, 1vh) * 35);
  }

  .eyecatcher__left.main {
    height: calc(var(--vh, 1vh) * 100);
  }

  .eyecatcher__right {
    height: calc(var(--vh, 1vh) * 65);
  }

  .eyecatcher__right.main {
    display: flex;
    height: calc(var(--vh, 1vh) * 100);
    padding: 0;
  }

  #cycle__slider {
    width: 100%;
  }

  img.cycle-slide {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .eyecatcher__header__image {
    max-height: 40vh;
    border-bottom: 2px solid var(--color-9);
  }

  .eyecatcher__claim {
    padding: var(--x);
  }
}

@media only screen and (min-width: 768px) and (orientation: landscape) {
  .eyecatcher__left.home {
    height: calc((var(--vh, 1vh) * 75));
    padding: var(--y) var(--x);
  }

  .eyecatcher__left.main {
    height: calc(var(--vh, 1vh) * 100);
  }

  .eyecatcher__right {
    height: calc(var(--vh, 1vh) * 70);
  }

  .eyecatcher__right.home {
    height: calc((var(--vh, 1vh) * 100));
  }

  .eyecatcher__right.main {
    display: flex;
    height: calc(var(--vh, 1vh) * 100);
    padding: 0;
  }

  #cycle__slider {
    width: 100%;
  }

  img.cycle-slide {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .eyecatcher__header__image {
    max-height: 40vh;
    border-bottom: 2px solid var(--color-9);
  }

  .eyecatcher__claim {
    padding: var(--x);
  }
}

@media only screen and (min-width: 834px) and (orientation: portrait) {
  .eyecatcher__left.home {
    height: calc(var(--vh, 1vh) * 30);
    padding: var(--y) calc(var(--x) / 2);
  }

  .eyecatcher__left.main {
    height: calc(var(--vh, 1vh) * 100);
    padding: var(--y) calc(var(--x) / 2);
  }

  .eyecatcher__right {
    height: calc(var(--vh, 1vh) * 70);
  }

  .eyecatcher__right.main {
    display: flex;
    height: calc(var(--vh, 1vh) * 100);
    padding: 0;
  }

  #cycle__slider {
    width: 100%;
  }

  img.cycle-slide {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .eyecatcher__header__image {
    max-height: 40vh;
    border-bottom: 2px solid var(--color-9);
  }

  .eyecatcher__claim {
    padding: var(--x);
  }
}

@media only screen and (min-width: 834px) and (orientation: landscape) {
  .eyecatcher__left.home {
    height: calc((var(--vh, 1vh) * 75));
    padding: var(--y) var(--x);
  }

  .eyecatcher__left.main {
    height: calc(var(--vh, 1vh) * 100);
  }

  .eyecatcher__right {
    height: calc(var(--vh, 1vh) * 70);
  }

  .eyecatcher__right.home {
    height: calc((var(--vh, 1vh) * 100));
  }

  .eyecatcher__right.main {
    display: flex;
    height: calc(var(--vh, 1vh) * 100);
    padding: 0;
  }

  #cycle__slider {
    width: 100%;
  }

  img.cycle-slide {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .eyecatcher__header__image {
    max-height: 40vh;
    border-bottom: 2px solid var(--color-9);
  }

  .eyecatcher__claim {
    padding: var(--x);
  }
}

@media only screen and (min-width: 992px) and (orientation: portrait) {
  .eyecatcher__left.home {
    height: calc(var(--vh, 1vh) * 70);
    padding: var(--y) calc(var(--x) / 2);
  }

  .eyecatcher__left.main {
    height: calc(var(--vh, 1vh) * 100);
    padding: var(--y) calc(var(--x) / 2);
  }

  .eyecatcher__right {
    height: calc(var(--vh, 1vh) * 70);
  }

  .eyecatcher__right.main {
    display: flex;
    height: calc(var(--vh, 1vh) * 100);
    padding: 0;
  }

  #cycle__slider {
    width: 100%;
  }

  img.cycle-slide {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .eyecatcher__header__image {
    max-height: 40vh;
    border-bottom: 2px solid var(--color-9);
  }

  .eyecatcher__claim {
    padding: var(--x);
  }
}

@media only screen and (min-width: 992px) and (orientation: landscape) {
  .eyecatcher__left.home {
    height: calc((var(--vh, 1vh) * 100));
    padding: var(--y) calc(var(--x) / 2);
  }

  .eyecatcher__left.main {
    height: calc(var(--vh, 1vh) * 100);
  }

  .eyecatcher__right {
    height: calc(var(--vh, 1vh) * 70);
  }

  .eyecatcher__right.home {
    height: calc((var(--vh, 1vh) * 100));
  }

  .eyecatcher__right.main {
    display: flex;
    height: calc(var(--vh, 1vh) * 100);
    padding: 0;
  }

  #cycle__slider {
    width: 100%;
  }

  img.cycle-slide {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .eyecatcher__header__image {
    max-height: 40vh;
    border-bottom: 2px solid var(--color-9);
  }

  .eyecatcher__claim {
    padding: var(--x);
  }
}

@media only screen and (min-width: 1024px) and (orientation: portrait) {
  .eyecatcher__left.home {
    height: calc((var(--vh, 1vh) * 100) - calc(var(--navi-header) - 60px));
    padding: var(--y) calc(var(--x) / 2);
  }

  .eyecatcher__left.main {
    height: calc(var(--vh, 1vh) * 100);
    padding: var(--y) calc(var(--x) / 2);
  }

  .eyecatcher__right {
    height: calc(var(--vh, 1vh) * 70);
  }

  .eyecatcher__right.home {
    height: calc((var(--vh, 1vh) * 100) - calc(var(--navi-header) - 60px));
  }

  .eyecatcher__right.main {
    display: flex;
    height: calc(var(--vh, 1vh) * 100);
    padding: 0;
  }

  #cycle__slider {
    width: 100%;
  }

  img.cycle-slide {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .eyecatcher__header__image {
    max-height: 40vh;
    border-bottom: 2px solid var(--color-9);
  }

  .eyecatcher__claim {
    padding: var(--x);
  }
}

@media only screen and (min-width: 1024px) and (orientation: landscape) {
  .eyecatcher__left.home {
    height: calc((var(--vh, 1vh) * 100) - calc(var(--navi-header) - 70px));
    padding: var(--y) calc(var(--x) / 2);
  }

  .eyecatcher__left.main {
    height: calc(var(--vh, 1vh) * 100);
    padding: var(--y) calc(var(--x) / 2);
  }

  .eyecatcher__right {
    height: calc(var(--vh, 1vh) * 70);
  }

  .eyecatcher__right.home {
    height: calc((var(--vh, 1vh) * 100) - calc(var(--navi-header) - 70px));
  }

  .eyecatcher__right.main {
    display: flex;
    height: calc(var(--vh, 1vh) * 100);
    padding: 0;
  }

  #cycle__slider {
    width: 100%;
  }

  img.cycle-slide {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .eyecatcher__header__image {
    max-height: 40vh;
    border-bottom: 2px solid var(--color-9);
  }

  .eyecatcher__claim {
    padding: var(--x);
  }
}

@media only screen and (min-width: 1112px) and (orientation: portrait) {
  .eyecatcher__left.home {
    height: calc((var(--vh, 1vh) * 100) - calc(var(--navi-header) - 60px));
    padding: var(--y) calc(var(--x) / 2);
  }

  .eyecatcher__left.main {
    height: calc(var(--vh, 1vh) * 100);
    padding: var(--y) calc(var(--x) / 2);
  }

  .eyecatcher__right {
    height: calc(var(--vh, 1vh) * 70);
  }

  .eyecatcher__right.home {
    height: calc((var(--vh, 1vh) * 100) - calc(var(--navi-header) - 60px));
  }

  .eyecatcher__right.main {
    display: flex;
    height: calc(var(--vh, 1vh) * 100);
    padding: 0;
  }

  #cycle__slider {
    width: 100%;
  }

  img.cycle-slide {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .eyecatcher__header__image {
    max-height: 40vh;
    border-bottom: 2px solid var(--color-9);
  }

  .eyecatcher__claim {
    padding: var(--x);
  }
}

@media only screen and (min-width: 1112px) and (orientation: landscape) {
  .eyecatcher__left.home {
    height: calc((var(--vh, 1vh) * 100) - calc(var(--navi-header) - 60px));
    padding: var(--y) calc(var(--x) / 2);
  }

  .eyecatcher__left.main {
    height: calc(var(--vh, 1vh) * 100);
  }

  .eyecatcher__right {
    height: calc(var(--vh, 1vh) * 70);
  }

  .eyecatcher__right.home {
    height: calc((var(--vh, 1vh) * 100) - calc(var(--navi-header) - 60px));
  }

  .eyecatcher__right.main {
    display: flex;
    height: calc(var(--vh, 1vh) * 100);
    padding: 0;
  }

  #cycle__slider {
    width: 100%;
  }

  img.cycle-slide {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .eyecatcher__header__image {
    max-height: 40vh;
    border-bottom: 2px solid var(--color-9);
  }

  .eyecatcher__claim {
    padding: var(--x);
  }
}

@media only screen and (min-width: 1200px) {
  .eyecatcher__left.home {
    height: calc((var(--vh, 1vh) * 100) - calc(var(--navi-header) - 40px));
    padding: var(--y) calc(var(--x) / 2);
  }

  .eyecatcher__left.main {
    height: calc(var(--vh, 1vh) * 100);
  }

  .eyecatcher__right {
    height: calc(var(--vh, 1vh) * 70);
  }

  .eyecatcher__right.home {
    height: calc((var(--vh, 1vh) * 100) - calc(var(--navi-header) - 40px));
  }

  .eyecatcher__right.main {
    display: flex;
    height: calc(var(--vh, 1vh) * 100);
    padding: 0;
  }

  #cycle__slider {
    width: 100%;
  }

  img.cycle-slide {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .eyecatcher__header__image {
    max-height: 40vh;
    border-bottom: 2px solid var(--color-9);
  }

  .eyecatcher__claim {
    padding: var(--x);
  }
}

@media only screen and (min-width: 1400px) {
  .eyecatcher__left.home {
    height: calc((var(--vh, 1vh) * 100) - calc(var(--navi-header) - 40px));
    padding: var(--y) calc(var(--x) / 2);
  }

  .eyecatcher__left.main {
    height: calc(var(--vh, 1vh) * 100);
  }

  .eyecatcher__right {
    height: calc(var(--vh, 1vh) * 70);
  }

  .eyecatcher__right.home {
    height: calc((var(--vh, 1vh) * 100) - calc(var(--navi-header) - 40px));
  }

  .eyecatcher__right.main {
    display: flex;
    height: calc(var(--vh, 1vh) * 100);
    padding: 0;
  }

  #cycle__slider {
    width: 100%;
  }

  img.cycle-slide {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .eyecatcher__header__image {
    max-height: 40vh;
    border-bottom: 2px solid var(--color-9);
  }

  .eyecatcher__claim {
    padding: var(--x);
  }
}

@media only screen and (min-width: 1600px) {
  .eyecatcher__left.home {
    height: calc((var(--vh, 1vh) * 100) - calc(var(--navi-header) - 20px));
    padding: var(--y) calc(var(--x) / 2);
  }

  .eyecatcher__left.main {
    height: calc(var(--vh, 1vh) * 100);
  }

  .eyecatcher__right {
    height: calc(var(--vh, 1vh) * 70);
  }

  .eyecatcher__right.home {
    height: calc((var(--vh, 1vh) * 100) - calc(var(--navi-header) - 20px));
  }

  .eyecatcher__right.main {
    display: flex;
    height: calc(var(--vh, 1vh) * 100);
    padding: 0;
  }

  #cycle__slider {
    width: 100%;
  }

  img.cycle-slide {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .eyecatcher__header__image {
    max-height: 40vh;
    border-bottom: 2px solid var(--color-9);
  }

  .eyecatcher__claim {
    padding: var(--x);
  }
}

@media only screen and (min-width: 1920px) {
  .eyecatcher__left.home {
    height: calc((var(--vh, 1vh) * 100) - var(--navi-header));
    padding: var(--y) var(--x);
  }

  .eyecatcher__left.main {
    height: calc(var(--vh, 1vh) * 100);
  }

  .eyecatcher__right {
    height: calc(var(--vh, 1vh) * 70);
  }

  .eyecatcher__right.home {
    height: calc((var(--vh, 1vh) * 100) - var(--navi-header));
  }

  .eyecatcher__right.main {
    display: flex;
    height: calc(var(--vh, 1vh) * 100);
    padding: 0;
  }

  #cycle__slider {
    width: 100%;
  }

  img.cycle-slide {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .eyecatcher__header__image {
    max-height: 40vh;
    border-bottom: 2px solid var(--color-9);
  }

  .eyecatcher__claim {
    padding: var(--x);
  }
}

/* ==========================================================================
   Slider + Controll | OK
   ========================================================================== */
.swiper-container.testimonials {
  overflow: hidden;
}

.swiper-container.samples {
  overflow: hidden;
}

.swiper-slide {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0 auto;
  flex-shrink: 0;
  transition-property: transform;
  cursor: default !important;
}

.swiper-wrapper {
  position: relative;
  display: flex;
  width: 100%;
  height: auto;
  box-sizing: content-box;
  transition-property: transform;
  z-index: 1;
}

.blau .testimonial__prev,
.blau .sample__image__prev {
  background-color: #535e6a;
}

.blau .testimonial__next,
.blau .sample__image__next {
  background-color: #5e6b78;
}

.gruen .testimonial__prev,
.gruen .sample__image__prev {
  background-color: #5a6d6b;
}

.gruen .testimonial__next,
.gruen .sample__image__next {
  background-color: #677e7c;
}

.gelb .testimonial__prev,
.gelb .sample__image__prev {
  background-color: #d48621;
}

.gelb .testimonial__next,
.gelb .sample__image__next {
  background-color: #e09738;
}

.rot .testimonial__prev,
.rot .sample__image__prev {
  background-color: #9b463a;
}

.rot .testimonial__next,
.rot .sample__image__next {
  background-color: #b14c3d;
}

.testimonials__controll,
.samples__controll {
  position: absolute;
  display: flex;
  top: 0;
  right: 0;
  z-index: 100;
}

.testimonial__prev,
.sample__image__prev,
.testimonial__next,
.sample__image__next {
  display: inline-flex;
  width: clamp(2.1875rem, 1.6299rem + 2.2876vw, 4.375rem);
  height: clamp(2.1875rem, 1.6299rem + 2.2876vw, 4.375rem);
  align-items: center;
  justify-content: center;
}

.testimonial__prev:hover,
.sample__image__prev:hover,
.testimonial__next:hover,
.sample__image__next:hover {
  opacity: 0.7;
  transition: opacity var(--transition);
  cursor: pointer;
}

.top__content .testimonial__prev,
.top__content .testimonial__next,
.bottom__content .sample__image__prev,
.bottom__content .sample__image__next {
  color: var(--color-1);
}

.top__content .swiper-button-disabled,
.top__content .swiper-button-disabled:hover {
  opacity: 0.3;
  cursor: not-allowed;
}

.bottom__content .swiper-button-disabled,
.bottom__content .swiper-button-disabled:hover {
  opacity: 0.3;
  cursor: not-allowed;
}

/* temporäre Ausblendung */
.top__content .swiper-button-disabled,
.top__content .swiper-button-disabled:hover {
  opacity: 0;
  cursor: default;
}

/* temporäre Ausblendung */
.bottom__content .swiper-button-disabled,
.bottom__content .swiper-button-disabled:hover {
  opacity: 0;
  cursor: default;
}

/* ==========================================================================
   Home | OK
   ========================================================================== */
#content__1 {
  position: relative;
  padding: 0;
}

#content__2 {
  position: relative;
  min-height: 600px;
  padding: var(--y) var(--x);
  background-color: var(--color-8);
}

.content__left,
.content__right {
  display: flex;
  flex-direction: column;
}

.content__claim {
  display: flex;
  height: 100%;
  padding: var(--y) calc(var(--x) + 0.75rem);
  font-family: 'Roboto', arial, sans-serif;
  font-size: clamp(1.25rem, 0.9615rem + 1.2821vw, 2.5rem);
  font-weight: 100;
  line-height: 1.4;
  letter-spacing: 0.125rem;
  background-color: var(--color-2);
  color: var(--color-1);
}

.content__text {
  padding-right: 0.75rem;
  padding-left: 0.75rem;
}

.content__text p {
  margin-bottom: 2rem;
  font-size: clamp(1.25rem, 1.2097rem + 0.1653vw, 1.375rem);
  letter-spacing: 0.5px;
  color: var(--color-12);
}

.content__left img {
  width: 100%;
  min-height: 35vh;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

/* ==========================================================================
   Main / Content | OK
   ========================================================================== */
main {
  position: relative;
  width: 100%;
  margin: 0;
}

main.home {
  padding: 0;
  border: none;
}

main.main {
  top: calc((var(--navi-header) - 80px) * -1);
  margin-bottom: calc((var(--navi-header) - 80px) * -1);
}

main .content__left .bottom__content {
  height: 100%;
}

main.blau .top__content {
  background-color: var(--color-4);
}

main.gruen .top__content {
  background-color: var(--color-5);
}

main.gelb .top__content {
  background-color: var(--color-6);
}

main.rot .top__content {
  background-color: var(--color-7);
}

#main__content {
  padding: 0;
  background-color: var(--color-8);
}

.top__content {
  min-height: 30vh;
}

.content__left {
  padding: 0;
}

.content__right {
  padding: var(--y) calc(var(--x) + 0.75rem);
}

.testimonial__content {
  padding: var(--y) calc(var(--x) + 0.75rem);
}

.testimonial__content p {
  color: var(--color-1);
}

.blau .content__right h2 {
  color: var(--color-4);
}

.gruen .content__right h2 {
  color: var(--color-5);
}

.gelb .content__right h2 {
  color: var(--color-6);
}

.rot .content__right h2 {
  color: var(--color-7);
}

.blau .content__right h3 {
  color: var(--color-4);
}

.gruen .content__right h3 {
  color: var(--color-5);
}

.gelb .content__right h3 {
  color: var(--color-6);
}

.rot .content__right h3 {
  color: var(--color-7);
}

.sample__image {
  display: flex;
  width: 100%;
  height: 100%;
}

.sample__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

video {
  height: 350px;
}

@media only screen and (min-width: 360px) and (orientation: portrait) {
  main.home {
    top: calc((var(--navi-header) - 80px) * -1);
    margin-bottom: calc((var(--navi-header) - 80px) * -1);
  }

  main.main {
    top: calc((var(--navi-header) - 80px) * -1);
    margin-bottom: calc((var(--navi-header) - 80px) * -1);
  }
}

@media only screen and (min-width: 360px) and (orientation: landscape) {
  main.main {
    top: calc((var(--navi-header) - 80px) * -1);
    margin-bottom: calc((var(--navi-header) - 80px) * -1);
  }
}

@media only screen and (min-width: 390px) and (orientation: portrait) {
  main.home {
    top: calc((var(--navi-header) - 80px) * -1);
    margin-bottom: calc((var(--navi-header) - 80px) * -1);
  }

  main.main {
    top: calc((var(--navi-header) - 80px) * -1);
    margin-bottom: calc((var(--navi-header) - 80px) * -1);
  }
}

@media only screen and (min-width: 390px) and (orientation: landscape) {
  main.main {
    top: calc((var(--navi-header) - 80px) * -1);
    margin-bottom: calc((var(--navi-header) - 80px) * -1);
  }
}

@media only screen and (min-width: 576px) and (orientation: portrait) {
  main.home {
    top: calc((var(--navi-header) - 70px) * -1);
  }

  main.main {
    top: calc((var(--navi-header) - 70px) * -1);
    margin-bottom: calc((var(--navi-header) - 70px) * -1);
  }

  video {
    height: 410px;
  }
}

@media only screen and (min-width: 576px) and (orientation: landscape) {
  main.home {
    top: calc((var(--navi-header) - 70px) * -1);
  }

  main.main {
    top: calc((var(--navi-header) - 70px) * -1);
    margin-bottom: calc((var(--navi-header) - 70px) * -1);
  }
}

@media only screen and (min-width: 768px) and (orientation: portrait) {
  main.home {
    top: calc((var(--navi-header) - 70px) * -1);
    margin-bottom: calc((var(--navi-header) - 70px) * -1)
  }

  main.main {
    top: calc((var(--navi-header) - 70px) * -1);
    margin-bottom: calc((var(--navi-header) - 70px) * -1);
  }

  video {
    height: 280px;
  }
}

@media only screen and (min-width: 768px) and (orientation: landscape) {
  main.home {
    top: calc((var(--navi-header) - 70px) * -1);
    margin-bottom: calc((var(--navi-header) - 70px) * -1)
  }

  main.main {
    top: calc((var(--navi-header) - 70px) * -1);
    margin-bottom: calc((var(--navi-header) - 70px) * -1);
  }
}

@media only screen and (min-width: 834px) and (orientation: landscape) {
  main.home {
    top: calc((var(--navi-header) - 70px) * -1);
    margin-bottom: calc((var(--navi-header) - 70px) * -1)
  }

  main.main {
    top: calc((var(--navi-header) - 70px) * -1);
    margin-bottom: calc((var(--navi-header) - 70px) * -1);
  }
}

@media only screen and (min-width: 1024px) and (orientation: portrait) {
  main.home {
    top: 0;
    margin-bottom: 0;
  }

  main.main {
    top: calc((var(--navi-header) - 70px) * -1);
    margin-bottom: calc((var(--navi-header) - 70px) * -1);
  }
}

@media only screen and (min-width: 1024px) and (orientation: landscape) {
  main.home {
    top: 0;
    margin-bottom: 0;
  }

  main.main {
    top: calc((var(--navi-header) - 70px) * -1);
    margin-bottom: calc((var(--navi-header) - 70px) * -1);
  }
}

@media only screen and (min-width: 1112px) and (orientation: landscape) {
  main.home {
    top: 0;
    margin-bottom: 0;
  }
}

@media only screen and (min-width: 1200px) {
  main.home {
    top: 0;
    margin-bottom: 0;
  }

  main.main {
    top: calc((var(--navi-header) - 40px) * -1);
    margin-bottom: calc((var(--navi-header) - 40px) * -1);
  }
}

@media only screen and (min-width: 1400px) {
  main.home {
    top: 0;
    margin-bottom: 0;
  }

  main.main {
    top: calc((var(--navi-header) - 40px) * -1);
    margin-bottom: calc((var(--navi-header) - 40px) * -1);
  }
}

@media only screen and (min-width: 1600px) {
  main.home {
    top: 0;
    margin-bottom: 0;
  }

  main.main {
    top: calc((var(--navi-header) - 20px) * -1);
    margin-bottom: calc((var(--navi-header) - 20px) * -1);
  }
}

@media only screen and (min-width: 1920px) {
  main.home {
    top: 0;
    margin-bottom: 0;
  }

  main.main {
    top: calc(var(--navi-header) * -1);
    margin-bottom: calc(var(--navi-header) * -1);
  }
}

@media only screen and (min-width: 360px) and (orientation: portrait) {
  #content {
    top: calc(var(--navi-header) - 80px);
    margin-bottom: calc(var(--navi-header) - 80px);
  }
}

@media only screen and (min-width: 360px) and (orientation: landscape) {
  #content {
    top: calc(var(--navi-header) - 80px);
    margin-bottom: calc(var(--navi-header) - 80px);
  }
}

@media only screen and (min-width: 390px) and (orientation: portrait) {
  #content {
    top: calc(var(--navi-header) - 80px);
    margin-bottom: calc(var(--navi-header) - 80px);
  }
}

@media only screen and (min-width: 390px) and (orientation: landscape) {
  #content {
    top: calc(var(--navi-header) - 80px);
    margin-bottom: calc(var(--navi-header) - 80px);
  }
}

@media only screen and (min-width: 576px) and (orientation: portrait) {
  #content {
    top: calc(var(--navi-header) - 70px);
    margin-bottom: calc(var(--navi-header) - 70px);
  }
}

@media only screen and (min-width: 576px) and (orientation: landscape) {
  #content {
    top: calc(var(--navi-header) - 70px);
    margin-bottom: calc(var(--navi-header) - 70px);
  }
}

@media only screen and (min-width: 768px) and (orientation: portrait) {
  #content {
    top: calc(var(--navi-header) - 70px);
    margin-bottom: calc(var(--navi-header) - 70px);
  }
}

@media only screen and (min-width: 768px) and (orientation: landscape) {
  #content {
    top: calc(var(--navi-header) - 70px);
    margin-bottom: calc(var(--navi-header) - 70px);
  }
}

@media only screen and (min-width: 1024px) and (orientation: portrait) {
  #content {
    top: calc(var(--navi-header) - 60px);
    margin-bottom: calc(var(--navi-header) - 60px);
  }
}

@media only screen and (min-width: 1112px) and (orientation: landscape) {
  #content {
    top: calc(var(--navi-header) - 60px);
    margin-bottom: calc(var(--navi-header) - 60px);
  }
}

@media only screen and (min-width: 1200px) {
  #content {
    top: calc(var(--navi-header) - 40px);
    margin-bottom: calc(var(--navi-header) - 40px);
  }
}

@media only screen and (min-width: 1400px) {
  #content {
    top: calc(var(--navi-header) - 40px);
    margin-bottom: calc(var(--navi-header) - 40px);
  }
}

@media only screen and (min-width: 1600px) {
  #content {
    top: calc(var(--navi-header) - 20px);
    margin-bottom: calc(var(--navi-header) - 20px);
  }
}

@media only screen and (min-width: 1920px) {
  #content {
    top: var(--navi-header);
    margin-bottom: var(--navi-header);
  }
}

/* ==========================================================================
   News | OK
   ========================================================================== */
body.no-news #content__2 {
  display: none;
}

.news__box {
  margin-right: -1px;
}

.news__headline {
  font-family: 'Roboto', arial, sans-serif;
  font-size: clamp(1.125rem, 1.0294rem + 0.3922vw, 1.5rem);
  text-transform: uppercase;
  color: var(--color-12);
}

.news__title {
  margin-bottom: 1rem;
  font-family: 'Roboto', arial, sans-serif;
  font-size: clamp(1.25rem, 0.9951rem + 1.0458vw, 2.25rem);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--color-2);
}

.news__teaser {
  font-size: var(--p);
}

.news--archiv {
  font-size: var(--p);
  text-decoration: none;
  text-transform: uppercase;
  color: var(--body-color);
}

.news--archiv:hover {
  font-size: var(--p);
  text-decoration: none;
  text-transform: uppercase;
  color: var(--color-2);
}

.news__link a {
  color: var(--body-color);
  -webkit-transition: color var(--transition) ease-in-out;
  transition: color var(--transition) ease-in-out;
}

.news__content {
  padding: 0;
}

.news__content__top {
  hyphens: auto;
}

.news__box__content {
  display: flex;
  padding: calc(var(--y) / 2.25);
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  background-color: var(--color-1);
}

.news__box__content a {
  text-decoration: none;
}

.news__box__content a:hover {
  text-decoration: none;
}

main.news .news__box__content {
  background-color: var(--color-8);
}

.news__box__content:hover {
  cursor: pointer;
}

.news__image {
  margin-bottom: 1rem;
}

.news__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news__date {
  margin-bottom: calc(var(--y) / 2);
}

time {
  font-family: 'Roboto', arial, sans-serif;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-2);
}

article.news__box {
  margin-bottom: 1rem;
}

article.news__box:hover a svg {
  color: var(--color-18);
  cursor: pointer;
}

article.news__box[onclick="location.href='';"] {
  pointer-events: none;
  cursor: default;
}

article.news__box[onclick="location.href='';"] svg {
  display: none;
}

@media only screen and (min-width: 360px) and (orientation: portrait) {
  .news__box__content {
    min-height: 400px;
  }
}

@media only screen and (min-width: 360px) and (orientation: landscape) {
  .news__box__content {
    min-height: 350px;
  }
}

@media only screen and (min-width: 390px) and (orientation: portrait) {
  .news__box__content {
    min-height: 350px;
  }
}

@media only screen and (min-width: 390px) and (orientation: landscape) {
  .news__box__content {
    min-height: 300px;
  }
}

@media only screen and (min-width: 576px) and (orientation: portrait) {
  .news__box__content {
    min-height: 475px;
  }
}

@media only screen and (min-width: 576px) and (orientation: landscape) {
  .news__box__content {
    min-height: 475px;
  }
}

@media only screen and (min-width: 768px) and (orientation: portrait) {
  .news__box__content {
    min-height: 460px;
  }
}

@media only screen and (min-width: 768px) and (orientation: landscape) {
  .news__box__content {
    min-height: 450px;
  }
}

@media only screen and (min-width: 992px) and (orientation: portrait) {
  .news__box__content {
    min-height: 475px;
  }
}

@media only screen and (min-width: 992px) and (orientation: landscape) {
  .news__box__content {
    min-height: 475px;
  }
}

@media only screen and (min-width: 1024px) and (orientation: portrait) {
  .news__box__content {
    min-height: 475px;
  }
}

@media only screen and (min-width: 1024px) and (orientation: landscape) {
  .news__box__content {
    min-height: 400px;
  }
}

@media only screen and (min-width: 1112px) and (orientation: portrait) {
  .news__box__content {
    min-height: 460px;
  }
}

@media only screen and (min-width: 1112px) and (orientation: landscape) {
  .news__box__content {
    min-height: 400px;
  }
}

@media only screen and (min-width: 1200px) {
  .news__box__content {
    min-height: 550px;
  }
}

@media only screen and (min-width: 1400px) {
  .news__box__content {
    min-height: 500px;
  }
}

@media only screen and (min-width: 1600px) {
  .news__box__content {
    min-height: 500px;
  }
}

@media only screen and (min-width: 1920px) {
  .news__box__content {
    min-height: 500px;
  }
}

/* ==========================================================================
   Newsletter | OK
   ========================================================================== */
.floating-input {
  width: 100%;
  padding: 1.5rem 1rem 0.5rem 1rem;
  margin-bottom: 0;
  font-family: 'Roboto', arial, sans-serif;
  font-size: clamp(1.25rem, 1.2097rem + 0.1653vw, 1.375rem);
  font-weight: 300;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.4;
  letter-spacing: .8px;
  background-color: var(--body-bg);
  color: var(--body-color);
  border: 1px solid var(--color-2);
  border-radius: 0;
  transition: border-color 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
  caret-color: var(--body-color);
}

.field_errors .floating-label::before {
  position: relative;
  display: inline-block;
  left: 1rem;
  font-size: 1rem;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  vertical-align: middle;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--color-7);
  transition: transform 0.2s ease;
  transform-origin: left top;
  content: attr(data-content);
  backface-visibility: hidden;
}

.floating {
  display: flex;
  margin-bottom: 1rem;
  flex-direction: column;
  justify-content: flex-end;
  transition: background-color 0.2s ease;
}

.floating-input:hover,
.floating-input:focus-within {
  background-color: var(--color-8);
  color: var(--color-2);
  border: 1px solid var(--color-2);
  cursor: pointer;
}

.clx-contact-form-label-checkbox:hover,
.clx-contact-form-label-radio:hover {
  color: var(--color-3);
  cursor: pointer;
}

label {
  font-family: 'Roboto', arial, sans-serif;
  font-size: clamp(1.25rem, 1.2097rem + 0.1653vw, 1.375rem);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: .8px;
}

label.form-label-style,
label.form-label-style-choice {
  padding: 0 1rem;
  margin-bottom: 0;
  font-weight: 700;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.67;
  letter-spacing: normal;
  text-transform: uppercase;
}

label.form-label-style {
  padding: 0;
  font-size: 1.5rem;
  font-weight: 300;
  text-transform: math-auto;
  color: var(--color-2);
}

label.form-label-style-choice {
  font-size: 1rem;
}

.floating-input::placeholder {
  color: rgba(0, 0, 0, 0);
}

.floating-label {
  position: relative;
  display: block;
  max-height: 0;
  font-family: 'Roboto', arial, sans-serif;
  font-weight: 500;
  letter-spacing: normal;
  pointer-events: none;
}

.floating-label::before {
  position: relative;
  display: inline-block;
  left: 1rem;
  font-size: 1rem;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  vertical-align: middle;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--color-2);
  transition: transform 0.2s ease;
  transform-origin: left top;
  content: attr(data-content);
  backface-visibility: hidden;
}

.floating-label::after {
  position: absolute;
  width: 100%;
  top: 100%;
  left: 0;
  opacity: 0;
  transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), opacity 180ms cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
  transform: scale3d(0, 1, 1);
  content: "";
}

.floating-input:focus + .floating-label::after {
  opacity: 1;
  transform: scale3d(1, 1, 1);
}

.floating-input:placeholder-shown + .floating-label::before {
  font-size: 1rem;
  transform: translate3d(0, -2em, 0) scale3d(1, 1, 1);
}

.floating-input:value-shown + .floating-label::before {
  font-size: 1rem;
  transform: translate3d(0, -2em, 0) scale3d(1, 1, 1);
}

.floating-label::before,
.floating-input:focus + .floating-label::before {
  transform: translate3d(0, -2.8rem, 0) scale3d(0.6, 0.6, 1);
}

.floating-input:focus + .floating-label::before {
  font-size: 1rem;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  vertical-align: middle;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--color-2);
}

.floating-label::before,
.floating-input:focus + .floating-label::before {
  transform: translate3d(0, -2.8rem, 0) scale3d(0.6, 0.6, 1);
}

.field_errors input {
  background-color: var(--body-bg) !important;
  border: 1px solid var(--color-7) !important;
}

input.floating-input.error {
  background-color: rgba(255, 0, 0, 0.1);
  border: 1px solid rgba(255, 0, 0, 1);
}

input.floating-input.feld_ok {
  background-color: rgba(31, 184, 113, 0.1);
  border: 1px solid #1fb871;
}

#custom_field_30_container {
  height: 48px;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 2rem;
}

.clx-contact-form-field.clx-checkbox {
  padding-bottom: 0;
  margin-bottom: 2rem;
}

textarea {
  height: 150px;
}

input[type="checkbox"],
input[type="radio"] {
  width: 15px;
  height: auto;
  padding: 0;
  box-sizing: border-box;
}

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"] + label {
  position: relative;
  display: block;
  padding-left: 2rem;
  margin-bottom: -20px;
  color: var(--body-color);
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
}

input[type="checkbox"] + label:last-child {
  margin-bottom: 0;
}

body.contact input[type="checkbox"] + label:last-child {
  margin-bottom: 3rem;
}

input[type="checkbox"]:checked + label:before {
  width: 7px;
  top: 1px;
  left: 7px;
  opacity: 1;
  border-color: var(--color-14);
  border-top-color: transparent;
  border-left-color: transparent;
  border-radius: 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.field_errors input[type="checkbox"] + label:before {
  opacity: 1;
  border-color: var(--color-7);
}

.field_errors input[type="checkbox"]:checked + label:before {
  width: 7px;
  top: 1px;
  left: 7px;
  opacity: 1;
  border-color: #0bbe0b;
  border-top-color: transparent;
  border-left-color: transparent;
  border-radius: 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.field_errors input[type="checkbox"] + label,
.field_errors input[type="checkbox"] + label a {
  color: var(--color-7);
}

label.form-label-style-choice {
  padding: 0 1rem 0 0;
  font-weight: 500;
}

input#contactFormFieldId2_89 {
  height: auto;
}

label a {
  text-decoration: none;
  color: var(--color-2);
  cursor: pointer;
  text-underline-offset: 5px;
}

label a:hover {
  text-decoration: underline;
  color: var(--color-2);
  cursor: pointer;
  text-underline-offset: 5px;
}

legend {
  display: none;
}

ul.field_errors {
  display: none;
}

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"],
input[type="radio"] {
  width: 15px;
  height: auto;
  padding: 0;
  box-sizing: border-box;
}

input[type="checkbox"] + label:last-child {
  margin-bottom: 0;
}

input[type="checkbox"] + label:before {
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  top: 4px;
  left: 0;
  opacity: 1;
  border: 1px solid var(--color-2);
  -webkit-transition: all .12s, border-color .08s;
  transition: all .12s, border-color .08s;
  content: '';
}

.checkbox.field_errors label:before {
  border-color: var(--color-10);
}

select#data_contact_title {
  display: block;
  max-width: 100%;
  padding: 1rem 1rem 0.5rem 1rem;
  font-family: 'Roboto', arial, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--color-2);
}

.newsletter a {
  text-decoration: none;
  color: var(--color-2);
  cursor: pointer;
  text-underline-offset: 5px;
}

.newsletter a:hover {
  text-decoration: underline;
  color: var(--color-2);
  cursor: pointer;
  text-underline-offset: 5px;
}

/* ==========================================================================
   Footer
   ========================================================================== */
footer {
  position: relative;
  width: 100%;
  min-height: 700px;
  padding: var(--y) var(--x) 1rem var(--x);
  font-family: 'Roboto', arial, sans-serif;
  font-weight: 300;
  background-color: var(--footer-bg);
  color: var(--footer-color);
}

footer a {
  color: var(--color-1);
}

footer a:hover {
  text-decoration: underline;
  color: var(--color-1);
  text-underline-offset: 5px;
}

footer .bi-linkedin:hover {
  opacity: 0.7;
}

footer .bi-facebook:hover {
  opacity: 0.7;
}

footer .bi-youtube:hover {
  opacity: 0.7;
}

footer li {
  color: var(--color-1);
}

#footer-navigation ul {
  display: flex;
  padding: 0;
  flex-wrap: wrap;
  list-style: none;
}

#footer-navigation ul.level_2 {
  display: flex;
  flex-direction: column;
}

#footer-navigation .home,
#footer-navigation .none {
  display: none;
}

#footer-navigation a.level-1 {
  font-family: 'Roboto', arial, sans-serif;
  line-height: 35px;
  color: var(--color-1);
  pointer-events: none;
}

#footer-navigation a.level-1:hover {
  text-decoration: none;
  cursor: default;
}

#footer-navigation a.level-2 {
  font-family: 'Roboto', arial, sans-serif;
  font-size: 1.063rem;
  line-height: 35px;
  color: var(--color-1);
}

.footer-bottom-left ul {
  display: inline-flex;
  width: 100%;
  padding: 0;
  flex-direction: column;
  list-style: none;
  color: var(--color-1);
}

.footer-bottom-left ul:first-child {
  margin-top: 1rem;
}

.footer-bottom-right ul {
  padding: 0;
  list-style: none;
  color: var(--color-1);
}

.footer-bottom-right ul:first-child,
.footer-bottom-right ul:last-child {
  display: flex;
  margin-bottom: 1.5rem;
}

.footer-bottom-right ul:first-child li,
.footer-bottom-right ul:last-child li {
  margin-right: 1.5rem;
}

.footer-bottom-left ul:last-child {
  margin-bottom: 1.5rem;
}

.footer-bottom-left li {
  margin-right: 1.5rem;
  margin-bottom: 0.5rem;
}

#footer-navigation .menu_node {
  margin-bottom: 2.5rem;
}

#footer-navigation .menu_node:last-child {
  margin-bottom: 0;
}

ul.footer-imprint {
  display: flex;
  flex-direction: column;
}

/* ==========================================================================
   Boostrap
   ========================================================================== */
.invisible {
    visibility: hidden!important
}

.hidden-xs-up {
    display: none!important
}

@media (max-width:575px) {
    .hidden-xs-down {
        display: none!important
    }
}
@media (min-width:576px) {
    .hidden-sm-up {
        display: none!important
    }
}
@media (max-width:767px) {
    .hidden-sm-down {
        display: none!important
    }
}
@media (min-width:768px) {
    .hidden-md-up {
        display: none!important
    }
}
@media (max-width:991px) {
    .hidden-md-down {
        display: none!important
    }
}
@media (min-width:992px) {
    .hidden-lg-up {
        display: none!important
    }
}
@media (max-width:1199px) {
    .hidden-lg-down {
        display: none!important
    }
}
@media (min-width:1200px) {
    .hidden-xl-up {
        display: none!important
    }
}
@media (max-width:1599px) {
    .hidden-xl-down {
        display: none!important
    }
}
@media (min-width:1600px) {
    .hidden-xxl-up {
        display: none!important
    }
}

.hidden-xl-down {
    display: none!important
}

/* ==========================================================================
   Anlagen | OK
   ========================================================================== */
#anlagen {
  padding: var(--y) var(--x);
}

.anlagen__content {
  padding: 0;
}

.hover--effect {
  margin-bottom: 0;
  overflow: hidden;
}

.anlagen__headline.default {
  background-color: var(--color-2);
}

.anlagen__headline.blau {
  background-color: var(--color-4);
}

.anlagen__headline.gruen {
  background-color: var(--color-5);
}

.anlagen__headline.gelb {
  background-color: var(--color-6);
}

.anlagen__headline.rot {
  background-color: var(--color-7);
}

.blau h3 {
  color: var(--color-4);
}

.gruen h3 {
  color: var(--color-5);
}

.gelb h3 {
  color: var(--color-6);
}

.rot h3 {
  color: var(--color-7);
}

.anlagen__headline {
  display: flex;
  height: 150px;
  padding: clamp(1rem, 0.7451rem + 1.0458vw, 2rem);
  align-items: center;
  font-size: var(--headline-anlagen);
  line-height: var(--headline-anlagen);
  color: var(--color-1);
}

.anlagen__services {
  display: flex;
  flex-direction: column;
}

.anlagen__headline h2 {
  display: flex;
  height: 150px;
  padding: 0;
  margin: 0;
  align-items: center;
  font-size: var(--headline-anlagen);
  line-height: var(--headline-anlagen);
  text-transform: none;
  color: var(--color-1);
}

.anlagen__headline a {
  color: var(--color-1);
}

.anlagen__headline a:hover {
  text-decoration: none;
}

.anlagen__services a {
  font-family: 'Roboto', arial, sans-serif;
  font-size: var(--p);
  font-weight: 300;
  letter-spacing: .8px;
  color: var(--body-color);
}

.anlagen__services a:hover {
  text-decoration: underline;
  color: var(--color-2);
  text-underline-offset: 5px;
}

.anlagen__image {
  overflow: hidden;
}

.anlagen__image img {
  width: 100%;
}

.anlagen__text {
  color: var(--body-color);
}

.anlagen__services ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.anlagen__details a {
  color: var(--body-color);
}

.anlagen__details a:hover {
  color: var(--color-2);
}

.hover--effect:hover .anlagen__details a {
  color: var(--color-2);
  cursor: pointer;
}

.anlagen__footer {
  display: flex;
  height: 350px;
  padding: clamp(1rem, 0.7451rem + 1.0458vw, 2rem);
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--color-16);
}

.anlagen__links {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.anlagen__services > ul > li > div:hover {
  text-decoration: underline;
  color: var(--color-2);
  text-underline-offset: 5px;
}

.anlagen__links {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  pointer-events: all;
}

.anlagen-controll {
  position: relative;
  display: flex;
  justify-content: flex-start;
  z-index: 500;
}

.anlagen__next,
.anlagen__prev {
  display: inline-flex;
  width: clamp(1.5rem, 0.5733rem + 3.8017vw, 4.375rem);
  height: 70px;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  color: var(--body-color);
}

.anlagen__next:hover,
.anlagen__prev:hover {
  color: var(--color-2);
}

.anlagen__next.swiper-button-disabled,
.anlagen__prev.swiper-button-disabled,
.anlagen__next.swiper-button-disabled:hover,
.anlagen__prev.swiper-button-disabled:hover {
  color: var(--color-11);
  cursor: not-allowed;
}

.anlage.additional-content-box {
  padding: 0.75rem;
}

/* ==========================================================================
   Ansprechpartner | OK
   ========================================================================== */
#ansprechpartner {
  padding: var(--y) var(--x);
  background-color: var(--color-8);
}

#ansprechpartner.home {
  background-color: var(--color-1);
}

.ansprechpartner__left,
.ansprechpartner__right {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  background-color: var(--color-8);
}

.home .ansprechpartner__left,
.home .ansprechpartner__right {
  background-color: var(--color-1);
}

.ansprechpartner__left {
  padding-top: calc(var(--y) / 2);
  padding-bottom: var(--y);
  align-content: flex-end;
}

.ansprechpartner__right {
  padding-top: calc(var(--y) / 2);
  padding-bottom: var(--y);
  align-content: center;
}

.ansprechpartner__name {
  font-size: clamp(1.6875rem, 1.3249rem + 1.4876vw, 2.8125rem);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-2);
}

.ansprechpartner__name.blau {
  color: var(--color-4);
}

.ansprechpartner__name.gruen {
  color: var(--color-5);
}

.ansprechpartner__name.gelb {
  color: var(--color-6);
}

.ansprechpartner__name.rot {
  color: var(--color-7);
}

.ansprechpartner__function {
  margin-bottom: clamp(1.875rem, 1.7543rem + 0.495vw, 2.1875rem);
  font-size: clamp(1.6875rem, 1.3249rem + 1.4876vw, 2.8125rem);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--body-color);
}

.ansprechpartner__text {
  margin-bottom: clamp(1.875rem, 1.7543rem + 0.495vw, 2.1875rem);
}

.ansprechpartner__image img {
  width: auto;
  max-height: 650px;
}

.ansprechpartner__right {
  padding-top: calc(var(--y) / 2);
  padding-bottom: var(--y);
  align-content: center;
}

@media only screen and (min-width: 360px) and (orientation: portrait) {
  .ansprechpartner__image img {
    width: 100%;
    max-height: 650px;
  }
}

@media only screen and (min-width: 768px) and (orientation: portrait) {
  #ansprechpartner {
    padding: 0 var(--x);
    background-color: var(--color-8);
  }

  .ansprechpartner__right {
    padding: 0;
  }

  .ansprechpartner__left {
    padding: calc(var(--y)) 0 0 0;
    align-content: flex-end;
  }

  ul.footer-imprint {
    display: flex;
    flex-direction: row;
  }

  .ansprechpartner__image img {
    width: auto;
    max-height: 650px;
  }
}

@media only screen and (min-width: 768px) and (orientation: landscape) {
  ul.footer-imprint {
    display: flex;
    flex-direction: row;
  }

  .ansprechpartner__image img {
    width: auto;
    max-height: 650px;
  }
}

@media only screen and (min-width: 834px) and (orientation: landscape) {
  #ansprechpartner {
    padding: 0 var(--x);
    background-color: var(--color-8);
  }

  .ansprechpartner__right {
    padding: 0;
  }
}

@media only screen and (min-width: 1200px) {
  #ansprechpartner {
    padding: var(--y) var(--x) 0 var(--x);
    background-color: var(--color-8);
  }
}

/* ==========================================================================
   Stellenangebote
   ========================================================================== */
#job-content h2.accordion-header,
#job-content .accordion-body,
#job-content button.accordion-button {
  font-family: 'Roboto', arial, sans-serif;
  font-size: clamp(1.125rem, 1.0847rem + 0.1653vw, 1.25rem);
  font-weight: 100;
}

#job-content h2.accordion-header,
#job-content .accordion-body,
#job-content button.accordion-button {
  font-family: 'Roboto', arial, sans-serif;
  font-size: clamp(1.125rem, 1.0847rem + 0.1653vw, 1.25rem);
  font-weight: 100;
  background-color: var(--color-8);
}

#job-content button.job {
  background-color: var(--color-8);
  color: var(--color-2);
}

#job-content button.job.collapsed {
  background-color: var(--color-8);
  color: var(--navi-color);
  border-radius: 0;
  box-shadow: none;
}

#job-content button {
  background-color: var(--color-8);
  color: var(--navi-color);
}

#job-content .accordion-item,
#job-content .accordion-item:last-of-type {
  margin-bottom: 0.5rem;
  border: 0;
  border-bottom: 1px solid var(--color-11);
  border-radius: 0;
}

#job-content button h5 {
  padding: 0;
  margin: 0;
}

#job-content button.job h5 {
  font-weight: 700;
  letter-spacing: 1.4px;
  color: var(--color-2);
  -webkit-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
}

#job-content button.job.collapsed h5 {
  font-size: calc(1.08152174rem + .2173913vw);
  background-color: transparent;
  color: var(--navi-color);
  -webkit-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
}

.job-teaser {
  padding-bottom: 2rem;
}

.job-beschreibung {
  padding-bottom: 2rem;
}

/* ==========================================================================
   Calendar
   ========================================================================== */
#calendar {
  padding: 45px 12px;
}

.calendar-ov {
  width: 100%;
  padding: 4rem 12px;
  margin: 15px auto;
  background-color: var(--navi-bg);
}

.calendar-ov-content {
  max-width: calc(1460px - 90px);
  margin: 0 auto;
}

.calendar-ov h1,
.calendar-slider-content h1 {
  margin-top: 2rem;
  font-size: 29px;
  font-weight: 100;
  line-height: 40px;
  letter-spacing: 0.5px;
  color: var(--color-2);
}

.calendar-ov h2,
.calendar-slider-content h2 {
  font-size: 36px;
  font-weight: bold;
  line-height: 50px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--color-2);
}

.calendar-ov p,
.calendar-slider-content p,
.description {
  max-width: 975px;
  padding-bottom: 2rem;
  font-size: 20px;
  line-height: 37px;
  letter-spacing: 1px;
}

a.button-white,
a.button-blue {
  padding: 15px 50px;
  margin-right: 30px;
  font-size: 17px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  letter-spacing: 0.85px;
  text-transform: uppercase;
  background-color: var(--body-bg);
  color: var(--color-2);
  border: 2px solid var(--body-bg);
}

a.button-blue {
  max-width: 200px;
  border: 2px solid var(--color-2);
}

a.button-white:hover,
a.button-blue:hover {
  text-decoration: none;
  opacity: .85;
}

.calendar-slider-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.calendar-slider-content {
  position: relative;
  /*  padding: var(--y) calc(var(--x) + 0.75rem);*/
  padding: calc(var(--y) * 2) calc(var(--x) + 0.75rem) var(--y) calc(var(--x) + 0.75rem);
}

.calendar-slider-image {
  padding: 0;
}

.swiper-button-next-event {
  position: relative;
  top: 0;
}

.swiper-button-prev-event {
  position: relative;
  top: 0;
}

.swiper-navigation-content {
  display: inline-flex;
}

@media (min-width: 1200px) {
  .calendar-ov h1,
  .calendar-slider-content h1 {
    margin-top: 2rem;
    font-size: 56px;
    font-weight: 300;
    line-height: 70px;
    letter-spacing: 2.8px;
    color: var(--color-2);
  }
}

/* ==========================================================================
   Team
   ========================================================================== */
.team-top-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.team-name,
.team-function,
.team-phone,
.team-email {
  position: relative;
  padding: 0;
  line-height: 30px;
  text-decoration: none;
  color: var(--body-color);
}

.team-name {
  font-family: 'Roboto-Medium', arial, sans-serif;
  font-size: 20px;
  line-height: 32px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-2);
}

.team-content .team-function,
.team-content .team-phone,
.team-content .team-email,
.team-content .team-year {
  font-size: 17px;
  line-height: 28px;
  letter-spacing: 0.1px;
}

.team-email a,
.team-phone a {
  text-decoration: none;
  color: var(--body-color);
}

.team-email a:hover,
.team-phone a:hover {
  text-decoration: underline;
  color: var(--body-color);
  text-underline-offset: 5px;
}

.team-content {
  display: flex;
  height: 140px;
  padding: 0.5rem 0 3rem 0;
  flex-direction: column;
}

.team-email-linkedin {
  margin-bottom: 0.25rem;
}

.team-email-linkedin a {
  margin-left: 1rem;
}

.filter {
  padding: 0;
  margin-bottom: 2rem;
}

#filters a.set-isotope-filter {
  position: relative;
  display: inline-flex;
  padding: 1rem;
  margin: 0;
  font-size: 20px;
  font-weight: bold;
  line-height: 32px;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--navi-links);
}

#filters a.set-isotope-filter:first-child {
  padding: 1rem 1rem 1rem 0;
  margin: 0;
}

#filters a.set-isotope-filter:last-child {
  padding: 1rem 1rem 1rem 0;
  margin: 0;
}

#filters a.set-isotope-filter:hover,
#filters a.set-isotope-filter.active {
  position: relative;
  padding-bottom: 0.5rem;
  color: var(--color-2);
  cursor: pointer;
  text-underline-offset: 8px;
  text-decoration-thickness: 3px;
}

main.team .filter {
  display: none;
}

.isotope-content {
  padding: 0;
}

.team-image {
  position: relative;
  padding: 0;
  margin: 0 auto;
}

.team-image img {
  width: 100%;
  left: 0;
  margin: 0 !important;
  overflow: hidden;
  object-fit: cover;
}

p.team-crossfade-second {
  width: 100%;
  top: 50%;
  left: 50%;
  padding: 25px;
  font-size: 20px;
  font-weight: bold;
  line-height: 32px;
  text-align: center;
  text-transform: uppercase;
  color: var(--body-bg);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.team-crossfade-second {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
}

.team-crossfade-hover:hover .team-crossfade-first {
  opacity: 0;
  -webkit-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
}

.category-desc p {
  font-size: 30px;
  line-height: 35px;
  text-transform: uppercase;
  color: var(--color-2);
}

select#firstSelector {
  width: 100%;
  height: 48px;
  padding: 0 10px;
  font-size: 1em;
  font-style: normal;
  font-stretch: normal;
  line-height: 48px;
  letter-spacing: normal;
  background: url(/themes/bms_2021/img/arrow_black.svg) no-repeat 97% center;
  background-size: 10px;
  background-color: var(--body-bg);
  border: 1px solid var(--color-2);
  border-radius: 0;
  transition: border-color 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
  caret-color: var(--body-color);
}

svg.bi.bi-envelope,
svg.bi.bi-linkedin {
  color: var(--color-2);
}

svg.bi.bi-envelope:hover,
svg.bi.bi-linkedin:hover {
  opacity: 0.7;
}

@media only screen and (min-width: 1200px) {
  .team-content .team-function,
  .team-content .team-phone,
  .team-content .team-email,
  .team-content .team-year {
    font-size: 20px;
    line-height: 30px;
  }

  .category-desc p {
    font-size: 45px;
    line-height: 57px;
  }
}

/* ==========================================================================
   Google Maps
   ========================================================================== */
#google-maps {
  position: relative;
  display: block;
}

#c7n-address-path {
  display: none;
  visibility: hidden !important;
}

#c7n-address-popupbox {
  display: none;
}

#c7n-map,
#c7n-map-contact {
  width: 100%;
}

#c7n-map {
  width: 100%;
  height: 60vh;
}

.gm-style-iw.gm-style-iw-c {
  display: none;
  padding: 15px !important;
}

#google__maps, #google__maps iframe {
  min-height: 40vh;
}

.uk-section-small {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

img.c7n-google-maps-logo {
  margin-bottom: 15px;
  margin-left: -20px;
}

.c7n-google-maps-box {
  position: relative;
  width: 100%;
  line-height: normal;
  background-color: var(--master_bg_color);
  z-index: 1;
}

.c7n-google-maps-quote {
  margin-bottom: 30px;
  font-family: 'Swift', arial, sans-serif;
  font-size: 1.75em;
  font-weight: 100;
  color: var(--slave_color);
}

.c7n-google-maps-box p,
.c7n-google-maps-box a {
  margin-bottom: 15px;
  color: var(--slave_color);
}

.c7n-google-maps-box a:hover {
  text-decoration: none;
  color: var(--master_color_t);
}

#c7n-contact {
  margin-top: 5rem;
}

section#c7n-contact .container-fluid {
  max-width: 100vw;
  padding: 0;
}

.map iframe {
  width: 100%;
  height: 75vh;
}

main.kontakt {
  padding-bottom: 5rem;
}

main.kontakt fieldset {
  padding: 2rem;
  background-color: #f6f6f6;
}

main.kontakt strong {
  color: var(--color-2);
}

@media only screen and (max-width: 575px) {
  img.c7n-google-maps-logo {
    width: 180px;
  }

  .c7n-google-maps-box {
    padding: 45px;
  }

  .c7n-google-maps-quote {
    margin-bottom: 30px;
    font-size: 1.75em;
  }

  .c7n-google-maps-box p {
    font-size: 1em;
  }
}

@media only screen and (min-width: 576px) {
  img.c7n-google-maps-logo {
    width: 180px;
  }

  .c7n-google-maps-box {
    padding: 30px 45px;
  }

  .c7n-google-maps-quote {
    margin-bottom: 30px;
    font-size: 1.75em;
  }

  .c7n-google-maps-box p,
  .c7n-google-maps-box a {
    font-size: 1em;
  }
}

@media only screen and (min-width: 768px) {
  img.c7n-google-maps-logo {
    width: 180px;
  }

  .c7n-google-maps-box {
    padding: 30px 45px;
  }

  .c7n-google-maps-quote {
    margin-bottom: 30px;
    font-size: 1.75em;
  }

  .c7n-google-maps-box p,
  .c7n-google-maps-box a {
    font-size: 1em;
  }
}

@media only screen and (min-width: 992px) {
  img.c7n-google-maps-logo {
    width: 250px;
  }

  .c7n-google-maps-box {
    position: absolute;
    width: 400px;
    height: 440px;
    top: calc(30vh - 220px);
    left: 5vw;
    padding: 30px 45px;
  }

  .c7n-google-maps-quote {
    margin-bottom: 30px;
    font-size: 1em;
  }

  .c7n-google-maps-box p,
  .c7n-google-maps-box a {
    font-size: 0.9em;
  }
}

@media only screen and (min-width: 1200px) {
  img.c7n-google-maps-logo {
    width: 250px;
  }

  .c7n-google-maps-box {
    position: absolute;
    width: 400px;
    height: 510px;
    top: calc(30vh - 255px);
    left: 3vw;
    padding: 45px;
  }

  .c7n-google-maps-quote {
    margin-bottom: 45px;
    font-size: 1.25em;
  }

  section#c7n-contact .container-fluid {
    width: 100%;
    max-width: 80vw;
    padding: 0;
  }
}

@media only screen and (min-width: 1600px) {
  section#c7n-contact .container-fluid {
    width: 100%;
    max-width: 58vw;
    padding: 0;
  }
}

.gm__background {
  padding: 2rem;
  text-align: center;
  background-color: rgb(246, 246, 246);
}

/* ==========================================================================
   Downloads
   ========================================================================== */
#download-content button {
  line-height: clamp(1.125rem, 1.0847rem + 0.1653vw, 1.25rem);
  color: var(--navi-color);
}

#download-content button h5 {
  padding: 0;
  margin: 0;
}

#download-content button.download h5 {
  font-size: calc(2.2243083rem + .1284585vw);
  font-weight: 700;
  line-height: calc(1em + .3vw);
  letter-spacing: 1.4px;
  color: var(--color-2);
  -webkit-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
}

#download-content button.download.collapsed h5 {
  font-size: calc(1.08152174rem + .2173913vw);
  line-height: clamp(1.125rem, 1.0847rem + 0.1653vw, 1.25rem);
  background-color: transparent;
  color: var(--navi-color);
  -webkit-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
}

#download-content .download-icon img {
  width: 20px;
}

#download-content .accordion-item,
#download-content .accordion-item:last-of-type {
  border: 0;
  border-bottom: 0.2px solid var(--color-11);
  border-radius: 0;
}

#download-content .download-file {
  border-bottom: 1px solid var(--color-8);
}

#download-content .download-file:last-of-type {
  margin-bottom: 2rem;
  border-bottom: none;
}

#download-content .accordion-body {
  padding: 0;
}

#download-content .download-description {
  margin-bottom: 2rem;
}

#download-content .download-box-content {
  height: 400px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  background-color: var(--color-8);
}

#download-content .navtree {
  margin-bottom: 2rem;
}

#download-content .download-file {
  font-size: clamp(1.125rem, 1.0847rem + 0.1653vw, 1.25rem);
  line-height: clamp(2.625rem, 2.5041rem + 0.4959vw, 3rem);
}

#download-content button.download {
  line-height: clamp(1.125rem, 1.0847rem + 0.1653vw, 1.25rem);
  color: var(--navi-color);
}

#download-content h2.accordion-header,
#download-content .accordion-body,
#download-content button.accordion-button {
  font-family: 'Roboto', arial, sans-serif;
  font-size: clamp(1.125rem, 1.0847rem + 0.1653vw, 1.25rem);
  font-weight: 100;
  line-height: clamp(2.625rem, 2.5041rem + 0.4959vw, 3rem);
}

#download-content .accordion-item,
#download-content .accordion-item:last-of-type {
  border: 0;
  border-bottom: 1px solid var(--color-11);
  border-radius: 0;
}

#download-content button.accordion-button,
#download-content .accordion-body {
  padding: 15px 0;
}

#download-content .accordion-button:not(.collapsed) {
  color: var(--color-2);
}

#download-content .accordion-button:focus {
  box-shadow: none;
}

.download-box {
  display: flex;
  width: 100%;
  min-height: 150px;
  padding: 0.75rem;
  margin: 0.75rem 0;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  word-break: break-word;
  background-color: var(--color-8);
  -webkit-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
}

.download-box:hover {
  background-color: var(--color-11);
  cursor: pointer;
}

.download-title {
  margin-bottom: 1rem;
  font-family: 'Roboto', arial, sans-serif;
  font-size: clamp(1.125rem, 1.0613rem + 0.2614vw, 1.375rem);
  letter-spacing: 0.5px;
  color: var(--color-2);
}

.download-plus-link svg {
  float: right;
  fill: var(--color-2);
}

.download-plus-link svg:hover {
  fill: var(--color-2);
}

#language-box {
  position: absolute;
  display: flex;
  width: 100px;
  height: 2rem;
  top: 0;
  right: 0;
  align-items: center;
  justify-content: space-evenly;
  font-size: 1rem;
  text-align: center;
  background-color: var(--color-1);
}

#language-box-mobile {
  display: flex;
  width: 100px;
  margin: auto;
  align-items: flex-end;
  justify-content: space-evenly;
}

#language-box a.selected {
  text-decoration: underline;
  color: var(--body-color);
  cursor: pointer;
  text-underline-offset: 5px;
  text-decoration-color: var(--body-color);
}

#language-box-mobile a.selected {
  font-family: 'Roboto', arial, sans-serif;
  font-size: 1.2rem;
}

#language-box-frontend-mobile {
  position: absolute;
  display: flex;
  width: 100%;
  top: 1rem;
  right: 1rem;
  justify-content: flex-end;
}

#language-box-frontend-mobile a {
  margin-left: 1rem;
  font-family: 'Roboto', arial, sans-serif;
  font-size: 1.2rem;
  /* text-shadow: 2px 2px 0px #000000; */
  text-decoration: none;
  color: var(--body-color);
}

#language-box-frontend-mobile a.selected {
  text-decoration: underline !important;
}

/* ==========================================================================
   Sponsoren
   ========================================================================== */
#content.netzwerk {
  min-height: 800px;
}

img.netzwerk-image {
  width: 100%;
  height: 120px;
  padding: 1.5rem;
  background-color: var(--color-8);
  -webkit-transition: all 0.125s ease-in-out;
  transition: all 0.125s ease-in-out;
  cursor: pointer;
  object-fit: contain;
}

img.netzwerk-image:hover {
  background-color: var(--color-11);
}

@media only screen and (min-width: 576px) {
  img.netzwerk-image {
    height: 100px;
    padding: 1rem;
  }
}

@media only screen and (min-width: 992px) {
  img.netzwerk-image {
    height: 150px;
    padding: 1.25rem;
  }
}

@media only screen and (min-width: 1200px) {
  img.netzwerk-image {
    height: 120px;
    padding: 1.5rem;
  }
}

/* ==========================================================================
   PrivacyBee
   ========================================================================== */
privacybee-widget .prx_listWrapper {
  max-width: 100%;
  gap: 0.5rem;
}

privacybee-widget .prx_techWrapper {
  max-width: 100%;
  gap: 0.5rem;
}

privacybee-widget .prx_expandableWrapper {
  padding: 0 1rem;
  border-radius: 0;
}

privacybee-widget .prx_h1 {
  display: none;
}

privacybee-widget .prx_h2 {
  margin-bottom: 1rem;
  font-size: clamp(1.5rem, 1.4363rem + 0.2614vw, 1.75rem);
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.25px;
  color: var(--h3_color);
}

privacybee-widget .prx_h3 {
  margin-bottom: 0.5rem;
  font-size: clamp(1.5rem, 1.4363rem + 0.2614vw, 1.75rem);
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.25px;
  color: var(--h2_color);
}

privacybee-widget .prx_h4, privacybee-widget .prx_h5 {
  margin-top: 24px;
  margin-bottom: 0.5rem;
  font-size: inherit;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.25px;
  color: var(--h2_color);
}

privacybee-widget .prx_text, privacybee-widget .CCca4W_expandableText {
  max-width: 100%;
  margin-bottom: 2rem;
  font-size: 1em;
  letter-spacing: 0.2px;
  color: var(--body_color);
}

privacybee-widget .prx_text.undefined {
  max-width: 699px;
  font-size: 1rem;
  font-weight: 400;
  font-style: normal;
  line-height: 24px;
  color: var(--body_color);
}

privacybee-widget .prx_listElement, privacybee-widget a.prx_link {
  max-width: 100%;
  margin-bottom: 0.5rem;
  font-size: 1em;
  letter-spacing: 0.2px;
  color: var(--body_color);
}

privacybee-widget .prx_expandableName {
  max-width: 100%;
  margin-bottom: 0.5rem;
  letter-spacing: 0.2px;
  color: var(--body_color);
}

privacybee-widget .prx_expandableImage {
  background-color: transparent !important;
}

privacybee-widget .prx_expandableImage svg {
  max-width: 45px;
  max-height: 45px;
}

privacybee-widget a, privacybee-widget a.prx_link {
  text-decoration: underline;
  color: var(--color-2);
  text-underline-offset: 5px;
}

privacybee-widget a:hover {
  text-decoration: underline;
  color: var(--color-3);
  text-underline-offset: 5px;
}

privacybee-widget .prx_wrapper {
  max-width: 100rem;
  padding-bottom: 70px;
  margin-right: auto;
  margin-left: auto;
  text-align: left !important;
  container-type: inline-size;
}

/* ==========================================================================
   added 02.09.2025
   ========================================================================== */
.col-12.image__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #dbdbdb;
  border-bottom: transparent;
}

.col-12.image__content img {
  max-height: 200px;
}

.col-12.caption {
  display: flex;
  min-height: 80px;
  padding: 1rem;
  flex-direction: column;
  font-size: 1rem;
  background-color: var(--color-8);
  border: 1px solid var(--color-8);
  border-top: transparent;
}

.col-12.caption p {
  margin: 0;
  font-size: 1rem;
}

/* ==========================================================================
   Media Queries
   ========================================================================== */
@media only screen and (min-width: 360px) and (orientation: portrait) {
  #landscape__mode {
    position: relative;
    display: none;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
  }
}

@media only screen and (min-width: 360px) and (orientation: landscape) {
  #landscape__mode {
    position: fixed;
    display: flex;
    z-index: 9000;
  }
}

@media (min-width: 768px) {
  header#desktop {
    display: flex;
  }

  header#mobile {
    display: none;
  }
}

@media (min-width: 768px) and (orientation: landscape) {
  .footer-bottom-left ul {
    display: inline-flex;
    padding: 0;
    margin-bottom: 0.5rem;
    flex-direction: row;
    list-style: none;
    color: var(--color-1);
  }
}

@media (min-width: 992px) {
  select {
    display: none;
  }

  a.set-isotope-filter {
    display: inline-block;
  }
}

@media (min-width: 992px) and (orientation: portrait) {
  #footer-navigation .menu_node:last-child {
    margin-bottom: 2rem;
  }
}

@media (min-width: 992px) and (orientation: landscape) {
  #footer-navigation .menu_node:last-child {
    margin-bottom: 2rem;
  }

  .footer-bottom-left {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .footer-bottom-left ul {
    display: inline-flex;
    width: unset;
  }

  .footer-bottom-left ul:first-child {
    margin-top: 0;
  }

  .footer-bottom-right {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .footer-bottom-right ul {
    margin: 0;
  }

  .footer-bottom-right ul:first-child li,
  .footer-bottom-right ul:last-child li {
    margin-right: 1.5rem;
    margin-left: 0;
  }
}

@media only screen and (min-width: 1024px) and (orientation: portrait) {
  #landscape__mode {
    position: relative;
    display: none;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
  }
}

@media only screen and (min-width: 1024px) and (orientation: landscape) {
  #landscape__mode {
    position: relative;
    display: none;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
  }
}

@media only screen and (min-width: 1200px) {
  .offset-img img:nth-of-type(1) {
    width: 80%;
  }

  .offset-img img:nth-of-type(2) {
    display: block;
    width: 80%;
    right: 0;
    margin-top: -20%;
    margin-left: 20%;
  }

  #main-navigation {
    height: 100vh;
  }

  #footer-navigation .menu_node {
    margin-bottom: 0;
  }

  .footer-bottom-left ul {
    display: inline-flex;
    width: unset;
  }

  #footer-navigation li:last-child {
    margin-bottom: 2rem;
  }
}

@media (min-width: 1400px) {
  #content-home p {
    margin-bottom: 2rem;
  }

  .footer-bottom-right ul:first-child li,
  .footer-bottom-right ul:last-child li {
    margin-right: 0;
    margin-left: 1.5rem;
  }

  .footer-bottom-right {
    display: flex;
    justify-content: flex-end;
  }
}

@media print {
  @page {
    margin: 2cm
  }

  * {
    background: transparent !important;
  }

  h1,
  h2,
  h3,
  h4,
  h5 {
    page-break-after: avoid;
  }

  table,
  figure {
    page-break-inside: avoid;
  }

  a:after {
    font-style: italic;
    content: " ( " attr(href) ") ";
  }

  #clx-dropdown-navigation,
  #clx-mobile-navigation,
  #clx-open-mobile-navigation,
  #clx-close-mobile-navigation,
  #c7n-scroll-down,
  footer,
  aside,
  form,
  .c7n-button,
  .c7n-share-buttons,
  #cookie-note,
  .swal-overlay {
    display: none !important;
  }

  #c7n-content {
    padding: 0;
  }

  #c7n-content > .container > .row > .col-12 {
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}

@-webkit-keyframes up-down {
  0% {
    -webkit-transform: translateY(0%);
  }
  50% {
    -webkit-transform: translateY(-20%);
  }
  100% {
    -webkit-transform: translateY(0%);
  }
}

@keyframes up-down {
  0% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(-20%);
  }
  100% {
    transform: translateY(0%);
  }
}

/* ==========================================================================
   End
   ========================================================================== */