/**
* layout.css
*
* Copyright 2025, Alex Stroh
* Comvation AG
* https://www.comvation.com
*
* Released on: March 24, 2025
*/

/* ==========================================================================
   Import Settings
   ========================================================================== */
@import "custom.css";

/* ==========================================================================
   Font Setting
   ========================================================================== */
@font-face {
  font-family: 'Oswald';
  font-weight: 400;
  font-style: normal;
  src: url('../fonts/Oswald-Regular.woff2') format('woff2'), url('../fonts/Oswald-Regular.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'Oswald';
  font-weight: 500;
  font-style: normal;
  src: url('../fonts/Oswald-Medium.woff2') format('woff2'), url('../fonts/Oswald-Medium.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'RobotoFlex';
  font-style: normal;
  src: url('../fonts/RobotoFlex.woff2') format('woff2'), url('../fonts/RobotoFlex.woff') format('woff');
  font-display: swap;
}


h1 {
  font-family: 'Oswald', arial, sans-serif;
  font-size: clamp(3.4375rem, 3.1353rem + 1.2397vw, 4.375rem);
  font-weight: 400;
  line-height: 1.2;
  hyphens: auto;
  margin-bottom: 1.5rem;
}

h2 {
  font-family: 'Oswald', arial, sans-serif;
  font-size: clamp(3.125rem, 2.9236rem + 0.8264vw, 3.75rem);
  font-weight: 400;
  line-height: 1.2;
  hyphens: auto;
  margin-bottom: 1.5rem;
}

h3 {
  font-family: 'Oswald', arial, sans-serif;
  font-size: clamp(1.5rem, 1.4637rem + 0.1613vw, 1.625rem);
  font-weight: 400;
  line-height: 1.4;
  hyphens: auto;
}

h4 {
  font-family: 'Oswald', arial, sans-serif;
  font-size: clamp(1.125rem, 1.0887rem + 0.1613vw, 1.25rem);
  font-weight: 400;
  line-height: 1.4;
  hyphens: auto;
}

p {
  font-family: 'RobotoFlex', arial, sans-serif;
  font-size: clamp(1rem, 0.9637rem + 0.1613vw, 1.125rem);
  font-weight: 400;
  line-height: 1.4;
}


@media only screen and (min-width: 1600px) {
  .container {
    max-width: 1560px;
  }
}


p.lead {
  font-size: clamp(1.5rem, 1.4363rem + 0.2614vw, 1.75rem);
  line-height: normal;
  /* letter-spacing: 0.25px; */
  color: var(--body_color);
}

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

/* * { */
/*   -ms-touch-action: manipulation; */
/*   touch-action: manipulation; */
/* } */

body {
  width: 100%;
  height: 100%;
  font-family: 'RobotoFlex', arial, sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: var(--body_color);
  background-color: var(--body_bg);
  padding: 0;
  margin: 0;
  -moz-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  overflow-x: hidden;
  overflow-y: scroll;
  opacity: 0;
  pointer-events: all;
  -ms-overflow-style: none;
  scrollbar-width: none;
  scroll-behavior: smooth;
}

body.loaded {
  opacity: 1;
}

body::-webkit-scrollbar {
  display: none;
}

.noscroll {
  overflow: hidden;
}

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

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

/* ==========================================================================
   Bootstrap
   ========================================================================== */
.mb-n1 {
  margin-bottom: -0.25rem !important;
}

.mb-n2 {
  margin-bottom: -0.5rem !important;
}

.mb-n3 {
  margin-bottom: -1rem !important;
}

.mb-n4 {
  margin-bottom: -1.5rem !important;
}

.mb-n5 {
  margin-bottom: -3rem !important;
}

@media (min-width: 576px) {
  .mb-sm-n0 {
    margin-bottom: 0 !important;
  }

  .mb-sm-n1 {
    margin-bottom: -0.25rem !important;
  }

  .mb-sm-n2 {
    margin-bottom: -0.5rem !important;
  }

  .mb-sm-n3 {
    margin-bottom: -1rem !important;
  }

  .mb-sm-n4 {
    margin-bottom: -1.5rem !important;
  }

  .mb-sm-n5 {
    margin-bottom: -3rem !important;
  }

  .mb-sm-auto {
    margin-bottom: auto !important;
  }
}

@media (min-width: 768px) {
  .mb-md-n0 {
    margin-bottom: 0 !important;
  }

  .mb-md-n1 {
    margin-bottom: 0.25rem !important;
  }

  .mb-md-n2 {
    margin-bottom: 0.5rem !important;
  }

  .mb-md-n3 {
    margin-bottom: 1rem !important;
  }

  .mb-md-n4 {
    margin-bottom: 1.5rem !important;
  }

  .mb-md-n5 {
    margin-bottom: 3rem !important;
  }

  .mb-md-auto {
    margin-bottom: auto !important;
  }
}

@media (min-width: 992px) {
  .mb-lg-n0 {
    margin-bottom: 0 !important;
  }

  .mb-lg-n1 {
    margin-bottom: -0.25rem !important;
  }

  .mb-lg-n2 {
    margin-bottom: -0.5rem !important;
  }

  .mb-lg-n3 {
    margin-bottom: -1rem !important;
  }

  .mb-lg-n4 {
    margin-bottom: -1.5rem !important;
  }

  .mb-lg-n5 {
    margin-bottom: -3rem !important;
  }
}

@media (min-width: 1200px) {
  .mb-xl-n0 {
    margin-bottom: 0 !important;
  }

  .mb-xl-n1 {
    margin-bottom: -0.25rem !important;
  }

  .mb-xl-n2 {
    margin-bottom: -0.5rem !important;
  }

  .mb-xl-3 {
    margin-bottom: -1rem !important;
  }

  .mb-xl-n4 {
    margin-bottom: -1.5rem !important;
  }

  .mb-xl-n5 {
    margin-bottom: -3rem !important;
  }
}

@media (min-width: 1400px) {
  .mb-xxl-n0 {
    margin-bottom: 0 !important;
  }

  .mb-xxl-n1 {
    margin-bottom: -0.25rem !important;
  }

  .mb-xxl-n2 {
    margin-bottom: -0.5rem !important;
  }

  .mb-xxl-3 {
    margin-bottom: -1rem !important;
  }

  .mb-xxl-n4 {
    margin-bottom: -1.5rem !important;
  }

  .mb-xxl-n5 {
    margin-bottom: -3rem !important;
  }
}

@media (min-width: 1600px) {
  .col-xxxl {
    flex: 1 0 0%;
  }

  .col-xxxl-auto {
    flex: 0 0 auto;
    width: auto;
  }

  .col-xxxl-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }

  .col-xxxl-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }

  .col-xxxl-3 {
    flex: 0 0 auto;
    width: 25%;
  }

  .col-xxxl-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }

  .col-xxxl-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }

  .col-xxxl-6 {
    flex: 0 0 auto;
    width: 50%;
  }

  .col-xxxl-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }

  .col-xxxl-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }

  .col-xxxl-9 {
    flex: 0 0 auto;
    width: 75%;
  }

  .col-xxxl-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }

  .col-xxxl-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }

  .col-xxxl-12 {
    flex: 0 0 auto;
    width: 100%;
  }

  .offset-xxxl-0 {
    margin-left: 0;
  }

  .offset-xxxl-1 {
    margin-left: 8.33333333%;
  }

  .offset-xxxl-2 {
    margin-left: 16.66666667%;
  }

  .offset-xxxl-3 {
    margin-left: 25%;
  }

  .offset-xxxl-4 {
    margin-left: 33.33333333%;
  }

  .offset-xxxl-5 {
    margin-left: 41.66666667%;
  }

  .offset-xxxl-6 {
    margin-left: 50%;
  }

  .offset-xxxl-7 {
    margin-left: 58.33333333%;
  }

  .offset-xxxl-8 {
    margin-left: 66.66666667%;
  }

  .offset-xxxl-9 {
    margin-left: 75%;
  }

  .offset-xxxl-10 {
    margin-left: 83.33333333%;
  }

  .offset-xxxl-11 {
    margin-left: 91.66666667%;
  }
}

/* ==========================================================================
   Customs
   ========================================================================== */
a {
  text-decoration: none;
  color: var(--link_color);
  -moz-transition: all 0.125s ease-in-out;
  -ms-transition: all 0.125s ease-in-out;
  -o-transition: all 0.125s ease-in-out;
  -webkit-transition: all 0.125s ease-in-out;
  transition: all 0.125s ease-in-out;
}

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

a:focus {
  outline: 0 !important;
}

#home__svg a tspan {
  -moz-transition: all 0.125s ease-in-out;
  -ms-transition: all 0.125s ease-in-out;
  -o-transition: all 0.125s ease-in-out;
  -webkit-transition: all 0.125s ease-in-out;
  transition: all 0.125s ease-in-out;
  fill: var(--color_1);
}

#home__svg a:hover tspan {
  fill: var(--color_6);
}

::-webkit-scrollbar {
  display: none;
}

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

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

hr {
  color: inherit;
  margin: 1rem 0;
  border: 0;
  border-color: var(--color_5);
  border-top: 1px solid;
  opacity: 1;
}

#content {
  position: relative;
  min-height: calc(100vh - (clamp(28.125rem, 26.6912rem + 5.8824vw, 33.75rem) / 2));
}

#content {
  padding: var(--y) var(--x);
}

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

.breadcrumb span {
  margin-right: 3rem;
}

.navtree {
  margin-bottom: calc(var(--y) - 1rem);
}

.navtree.nobc {
  display: none;
}

ul.hook li::marker {
  font-size: 1.5rem;
  color: var(--color_3);
}

ul.hook li {
  padding-left: 1rem;
  list-style-type: '✓';
}

ul.hook {
  padding: 0 1rem;
}

ul.dots li::marker {
  color: var(--body_color);
}

ul.dots li {
  padding-left: 0.25rem;
  list-style-type: '...';
}

ul.dots {
  padding: 0 1rem;
}

ul.no-bullet {
  padding: 0;
  list-style: none;
}

.content-tpl {
  /* margin-bottom: clamp(0.125rem, -1.1176rem + 5.098vw, 5rem); */
}

#content.home {
  position: relative;
  min-height: 100%;
}

.opening__time td {
  display: table-cell;
  vertical-align: top;
}

.opening__time td.active {
  color: var(--color_3);
}

#content.imprint h3, #content.privacy h3, #content.agb h3 {
  color: var(--body_color);
  margin-bottom: 0.5rem;
}

.svg__font {
  font-size: 46.88px;
  text-transform: uppercase;
  color: #ffffff;
}

video {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
}

/* ==========================================================================
   Button
   ========================================================================== */
.button, .button:focus, a.service-button {
  font-family: 'Oswald', arial, sans-serif;
  font-weight: 400;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--button_color) !important;
  background-color: var(--button_bg);
  padding: 0.5rem 1rem;
  margin: 0;
  border: 1px solid var(--button_bg);
  -moz-transition: all 0.125s ease-in-out;
  -ms-transition: all 0.125s ease-in-out;
  -o-transition: all 0.125s ease-in-out;
  -webkit-transition: all 0.125s ease-in-out;
  transition: all 0.125s ease-in-out;
  -webkit-appearance: button;
  -moz-appearance: button;
  -ms-appearance: button;
  -o-appearance: button;
  appearance: button;
}

.button:hover, a.service-button:hover {
  color: var(--button_color_hover);
  background-color: var(--button_bg_hover);
  border: 1px solid var(--button_bg_hover);
  text-decoration: none;
}

/* ==========================================================================
   Bootstrap hidden
   ========================================================================== */
.row {
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-.5 * var(--bs-gutter-x));
  margin-left: calc(-.5 * var(--bs-gutter-x));
  --bs-gutter-x: 40px;
  --bs-gutter-y: 0;
}

.row > * {
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  margin-top: var(--bs-gutter-y);
  --bs-gutter-x: 40px;
  --bs-gutter-y: 0;
}

.container {
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  --bs-gutter-x: 40px;
  --bs-gutter-y: 0;
}

header .container-fluid {
  max-width: 1560px;
}

@media only screen and (min-width: 1600px) {
  header#desktop .container {
    max-width: 1560px;
  }
}

@media only screen and (min-width: 1920px) {
  header#desktop .container {
    max-width: 1800px;
  }
}

.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
  }

  .row {
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
    --bs-gutter-x: 30px;
    --bs-gutter-y: 0;
  }

  .row > * {
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-top: var(--bs-gutter-y);
    --bs-gutter-x: 30px;
    --bs-gutter-y: 0;
  }

  .container {
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    --bs-gutter-x: 30px;
    --bs-gutter-y: 0;
  }
}

@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
}

/* ==========================================================================
   Header
   ========================================================================== */
/* ==========================================================================
   Header
   ========================================================================== */
header {
  position: fixed;
  width: 100%;
  height: 60px;
  color: var(--body_color);
  background-color: var(--header_bg);
  border-bottom: 1px solid #e9ecef;
  z-index: 999;
}

header.c7n-small {
  -webkit-box-shadow: -4px 0 4px 0 rgba(75, 75, 75, 0.25);
  -moz-box-shadow: -4px 0 4px 0 rgba(75, 75, 75, 0.25);
  box-shadow: -4px 0 4px 0 rgba(75, 75, 75, 0.25);
}

.c7n-header_bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--header_bg);
  z-index: 1001;
}

.c7n-mobile-navigation {
  position: relative;
  z-index: 1001;
}

.c7n-logo {
  z-index: 1002;
}

.c7n-mobile-navigation {
  position: relative;
  z-index: 1001;
}

/* ==========================================================================
   Meta-Navigation
   ========================================================================== */
header .c7n-meta-navigation {
  position: fixed;
  background-color: var(--meta_bg);
  width: 100%;
  height: 30px;
  color: var(--meta) !important;
  z-index: 1000;
  font-size: 0.8em;
  text-transform: uppercase;
  font-weight: 500;
}

header .c7n-meta-navigation a {
  color: var(--meta_color);
  text-decoration: none;
}

header .c7n-meta-navigation a:hover {
  color: var(--meta_color_hover);
}

header .c7n-meta-navigation ul {
  position: absolute;
  list-style: none;
  display: flex;
  padding: 0 15px;
  margin: 0;
  right: 0;
  font-size: 0.8em;
}

li.c7n-meta.col {
  padding: 0 15px 0 0;
}

li.c7n-meta {
  margin-left: 2rem;
}

@media only screen and (min-width: 1920px) {
  header#desktop .container {
    padding: 0;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer__top {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 200px;
  background-color: var(--footer_bg);
  color: var(--footer_color);
  padding-top: 2rem;
}

.footer__top p {
  margin-bottom: clamp(1.5rem, 1.6452rem + -0.6452vw, 1rem);
}

.footer__top p:nth-child(2) {
  margin-bottom: 1rem;
}

.footer__top p:last-child {
  margin-bottom: clamp(2rem, 2.2903rem + -1.2903vw, 1rem);
}

.footer__top .newsletter {
  display: flex;
  min-height: 210px;
  padding: 2rem;
  background-color: var(--color_6);
  color: var(--color_5);
  flex-direction: column;
  align-items: center;
}

.footer__top ul {
  padding: 0;
  list-style: none;
  display: flex;
  margin-bottom: clamp(2rem, 2.2903rem + -1.2903vw, 1rem);
}

.footer__top li {
  margin-right: 1rem;
}

.footer__top a.facebook__icon svg, .footer__top a.instagram__icon svg {
  height: 35px;
  width: 35px;
  background-color: var(--color_6);
  padding: 0.25rem;
  fill: var(--color_3);
}

.footer__top a.facebook__icon svg:hover, .footer__top a.instagram__icon svg:hover {
  opacity: 0.8;
}

.footer__bottom {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 50px;
  background-color: var(--footer_bg);
  color: var(--footer_color);
  padding: clamp(0.5rem, 0.0645rem + 1.9355vw, 2rem) 0 clamp(0.5rem, 0.3548rem + 0.6452vw, 1rem) 0;
}

.footer__bottom p {
  margin-bottom: 0;
}

.opening__time {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--bs-gutter-x) * .5);
}

.opening__time td {
  padding-right: 1rem;
  padding-left: 1rem;
}


@media only screen and (min-width: 992px) {

  .opening__time {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: calc(var(--bs-gutter-x) * .5);
  }

  .opening__time td {
    padding-right: 2rem;
    padding-left: 0;
  }

}


/* ==========================================================================
   Hover-Effect
   ========================================================================== */
article {
  position: relative;
  list-style: none;
}

article figure {
  position: relative;
  width: 100%;
  overflow: hidden;
  cursor: pointer;
}

article figure img {
  position: relative;
  display: block;
  max-width: 100%;
  min-height: 100%;
}

article figure figcaption {
  font-size: 1.25em;
  padding: 1em;
  opacity: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

figcaption {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

figcaption a:hover {
  cursor: default;
}

article figure figcaption::before,
article figure figcaption::after {
  pointer-events: none;
}

article figure figcaption,
article figure figcaption > a {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  opacity: 1;
}

article figure figcaption {
  font-size: 1.25em;
  padding: 0.5rem;
  opacity: 1;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

figure {
  margin: 0 0 1.5rem;
}

@media only screen and (min-width: 1200px) {
  article figure figcaption {
    padding: 1rem;
  }

  article figure figcaption > a {
    font-size: 0;
    text-indent: 200%;
    white-space: nowrap;
    opacity: 0;
    z-index: 1000;
  }

  figure.hover-effect {
    background-color: rgba(255, 255, 255, 0.75);
  }

  figure.hover-effect img {
    width: -webkit-calc(100%);
    width: 100%;
    max-width: none;
    margin-bottom: 0 !important;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(0px, 0, 0) scale(1.05);
    transform: translate3d(0px, 0, 0) scale(1.05);
    opacity: 1;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  figure.hover-effect figcaption {
    opacity: 1;
  }

  figure.hover-effect:hover img {
    -moz-transform: translate3d(0, 0, 0) scale(1);
    -ms-transform: translate3d(0, 0, 0) scale(1);
    -o-transform: translate3d(0, 0, 0) scale(1);
    -webkit-transform: translate3d(0, 0, 0) scale(1);
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.125;
  }

  figure.hover-effect:hover figcaption {
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

/* ==========================================================================
   Formulare / Tables
   ========================================================================== */
.floating-input {
  width: 100%;
  font-weight: 300;
  font-style: normal;
  font-stretch: normal;
  /* letter-spacing: normal; */
  background-color: var(--color_8);
  padding: 1.5rem 1rem 0.5rem 1rem;
  margin-bottom: 0;
  border: 1px solid var(--color_7);
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  caret-color: var(--body_color);
}

.floating-upload {
  margin-bottom: 2rem;
}

#contactFormFieldId_109.form-control {
  height: 48px;
  font-weight: 300;
  /* letter-spacing: normal; */
  padding: 0.5rem 1rem 0.5rem 1rem;
  margin-bottom: 0;
  border: 1px solid var(--color_7);
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  caret-color: var(--body_color);
}

.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
  background-color: var(--color_7);
}

#contactFormUpload_109 {
  padding: 0;
}

#contactFormUpload_109 div.mediaBrowserfolderWidget ul {
  display: none;
}

#contactFormUpload_109 > .row {
  flex-direction: column;
}

#contactFormUpload_109 div.input-file-upload {
  width: auto;
}

legend {
  font-size: 2.5rem;
}

.form-control::file-selector-button {
  height: 48px;
  font-size: 1rem;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  vertical-align: middle;
  /* letter-spacing: normal; */
  text-transform: uppercase;
  color: var(--body_color);
  background-color: var(--color_8);
  padding: 0.5rem 1rem;
  margin: -0.5rem -1rem;
  border-width: 0;
  border-style: solid;
  border-color: inherit;
  border-radius: 0;
  transition: none;
  pointer-events: none;
  -webkit-margin-end: 0.75rem;
  margin-inline-end: 0.75rem;
  border-inline-end-width: 1px;
}

section#content.forms hr {
  color: inherit;
  margin: 2rem 0 3rem 0;
  border: 0;
  border-color: var(--color_5);
  border-top: 1px solid;
  opacity: 1;
}

section#c7n-content a {
    color: var(--body_color);
}

.mediaBrowserfolderWidget {
  display: block !important;
}

input > span {
  display: none !important;
}

.floating-input:hover,
.floating-input:focus-within,
textarea#contactFormFieldId_91:hover,
textarea#contactFormFieldId_100:hover,
select#contactFormFieldId_76:hover {
  background-color: var(--body_bg);
  border: 1px solid var(--color_3);
  cursor: pointer;
}

.floating {
  min-height: 48px;
  margin-bottom: 1rem;
  transition: background-color 0.2s ease;
}

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

.floating-label {
  position: relative;
  display: block;
  max-height: 0;
  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_6);
  transition: transform 0.2s ease;
  transform-origin: left top;
  content: attr(data-content);
  backface-visibility: hidden;
}

.floating-label.textarea:before {
  top: -3rem;
}

.floating-label::after {
  position: absolute;
  width: 100%;
  top: 100%;
  left: 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: "";
  opacity: 0;
}

.label-upload {
  display: flex;
  align-items: center;
  height: 100%;
  max-height: 100%;
}

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

.floating-input:placeholder-shown + .floating-label::before {
  font-size: 1rem;
  color: var(--body_color);
  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(--body_color);
}

.label-file-upload {
  height: 48px;
}

.mediaBrowserfolderWidget {
  display: inline-block;
  width: 100%;
  padding: 0;
}

#contactForm .contactFormUpload .mediaBrowserfolderWidget ul.filelist li, .mediaBrowserfolderWidget ul.filelist li {
  position: relative;
  width: 100%;
  font-size: 1rem;
  background: none;
  margin: 0 0 0.25rem !important;
  list-style: none;
  border: none !important;
  box-sizing: border-box;
}

.mediaBrowserfolderWidget .removeFile {
  background-color: transparent !important;
  border-left: none !important;
}

.mediaBrowserfolderWidget ul li span.actions {
  right: unset !important;
}

input {
  height: 48px;
}

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

textarea:focus {
  color: var(--body_color);
  outline: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
}

input.error,
textarea#contactFormFieldId_91.error, input#contactFormFieldId_109.error {
  background-color: var(--color_13);
  border-color: var(--color_5);
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
}

#contactFormError {
  display: none;
}

.clx-form-error-msg {
  display: block;
  width: auto;
  background-color: var(--color_13);
  padding: 0.5rem 1rem;
  border: 1px solid var(--color_5);
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
}

.clx-checkbox .error {
  color: var(--color_10) !important;
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
}

.clx-contact-form-label-checkbox.error,
.error .clx-contact-form-label-checkbox,
.error .clx-contact-form-label-radio {
  color: var(--color_1) !important;
}

.clx-checkbox {
  margin-bottom: 1rem;
}

input[type="radio"] {
  position: relative;
  width: unset;
  height: unset;
  font-size: initial;
  margin-left: 0;
  -webkit-appearance: radio;
  -moz-appearance: radio;
  -ms-appearance: radio;
  -o-appearance: radio;
  appearance: radio;
}

fieldset {
  background-color: transparent;
  padding: 0;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

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 var(--color_8);
  -moz-box-shadow: 0 0 0 1000px var(--color_1) inset;
  -ms-box-shadow: 0 0 0 1000px var(--color_1) inset;
  -o-box-shadow: 0 0 0 1000px var(--color_1) inset;
  -webkit-box-shadow: 0 0 0 1000px var(--color_1) inset;
  box-shadow: 0 0 0 1000px var(--color_1) inset;
  transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: var(--color_6);
}

form {
  margin-top: 2rem;
  margin-bottom: 5rem;
}

.clx-contact-form-field.clx-captcha {
  margin-top: 2rem;
}

.clx-contact-form-field.clx-captcha label {
  display: flex;
}

#contactFormFieldId_76 {
  width: 100%;
  height: 48px;
  font-size: 1rem;
  text-transform: uppercase;
  background: url(../img/arrow_black.svg) no-repeat 97% center;
  background-color: var(--color_8);
  background-size: 10px;
  padding: 1rem 1rem 0.5rem 1rem;
  margin-bottom: 0;
  border: 1px solid var(--color_7);
  border-radius: 0;
  transition: border-color 0.2s ease;
  outline: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

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

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

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

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

.radio-box {
  margin-bottom: 2rem;
}

.clx-contact-form-field.clx-buttons {
  margin-top: 3rem;
}

.clx-contact-form-upload {
  width: 100%;
  font-size: 1rem;
  font-weight: 300;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.67;
  /* letter-spacing: normal; */
  background-color: var(--color_8);
  margin-bottom: 1rem;
  border: 1px solid var(--color_7);
  transition: border-color 0.2s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
}

@media (min-width: 992px) {
  .form-style-137,
  .form-style-169,
  .form-style-197 {
    width: 16.6666666667%;
  }

  .form-style-71,
  .form-style-72,
  .form-style-106,
  .form-style-107,
  .form-style-108,
  .form-style-133,
  .form-style-134,
  .form-style-135,
  .form-style-138,
  .form-style-167,
  .form-style-170,
  .form-style-173,
  .form-style-174,
  .form-style-175,
  .form-style-176,
  .form-style-177,
  .form-style-178,
  .form-style-180,
  .form-style-181,
  .form-style-182,
  .form-style-183,
  .form-style-184,
  .form-style-193,
  .form-style-194,
  .form-style-195,
  .form-style-198,
  .form-style-199,
  .form-style-200,
  .form-style-201 {
    width: 33.33333333%;
  }

  .form-style-73,
  .form-style-76,
  .form-style-109,
  .form-style-136,
  .form-style-142,
  .form-style-168,
  .form-style-196 {
    width: 50%;
  }
}

/* ==========================================================================
   Sitemap
   ========================================================================== */
#sitemap ul {
  display: block;
  padding: 0;
  margin: 0;
  list-style: none;
}

li.sitemap_level_1 {
  color: var(--color_3);
  padding: 0;
  margin: 1rem 0 0.5rem 0;
}

li.sitemap_level_2 {
  display: flex;
  align-content: center;
  align-items: center;
  padding-left: 2rem;
}

#sitemap a {
  position: relative;
  display: inline-block;
  line-height: 2rem;
  text-decoration: none;
  color: var(--color_6);
  padding-left: 0.5rem;
  border: transparent;
  text-underline-offset: 5px;
}

#sitemap li.sitemap_level_1 a {
  font-size: clamp(1.5rem, 1.4363rem + 0.2614vw, 1.75rem);
  font-weight: 500;
  /* letter-spacing: 1px; */
}

#sitemap li.sitemap_level_1 a[title="Home"] {
  display: none;
}

#sitemap .sitemap_level_1 a:hover {
  text-decoration: underline;
  /* letter-spacing: 1px; */
  cursor: pointer;
  text-underline-offset: 5px;
}

#sitemap .sitemap_level_2 a:hover {
  text-decoration: underline;
  cursor: pointer;
  text-underline-offset: 5px;
}

#sitemap ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
  list-style: none;
}

li.sitemap_level_2 a:before,
li.sitemap_level_3 a:before {
  position: absolute;
  width: 2rem;
  height: 2rem;
  left: -1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23f44611' class='bi bi-caret-right' viewBox='0 0 16 16'%3E%3Cpath d='M6 12.796V3.204L11.481 8 6 12.796zm.659.753 5.48-4.796a1 1 0 0 0 0-1.506L6.66 2.451C6.011 1.885 5 2.345 5 3.204v9.592a1 1 0 0 0 1.659.753z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left center;
  content: "";
}

/* ==========================================================================
   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 {
  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);
  margin-bottom: 1rem;
}

privacybee-widget .prx_h3 {
  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);
  margin-bottom: 0.5rem;
}

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

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

p.prx_text a {
  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%;
  font-size: 1em;
  /* letter-spacing: 0.2px; */
  color: var(--body_color);
  margin-bottom: 0.5rem;
}

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

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

privacybee-widget a, privacybee-widget a.prx_link {
  text-decoration: underline;
  text-underline-offset: 5px;
}

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

/* ==========================================================================
   Banner
   ========================================================================== */
#banner {
  padding-top: calc(var(--y) * 2);
}

#banner img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* ==========================================================================
   Eyecatcher / Slider
   ========================================================================== */
#eyecatcher {
  position: relative;
}

#c7n-eyecatcher {
  position: relative;
  display: flex;
  width: 100%;
  height: 80vh;
  top: 0;
  flex-direction: column;
  z-index: 1;
}

#c7n-eyecatcher:before {
    background: #000;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
}

#c7n-eyecatcher.home {
  height: 100vh;
}

#c7n-eyecatcher img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#eyecatcher .container {
  max-width: 1920px;
  padding: 0;
}

#eyecatcher__image {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: clamp(28.125rem, 26.6912rem + 5.8824vw, 33.75rem);
}

#c7n-eyecatcher img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#c7n-eyecatcher.home img {
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

#c7n-eyecatcher.team img, #c7n-eyecatcher.about-us img, #c7n-eyecatcher.kontakt img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.eyecatcher__headline {
  position: absolute;
  bottom: clamp(2rem, 1.4902rem + 2.0915vw, 4rem);
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
}

.eyecatcher__headline h1 {
  text-shadow: 0px 5px 5px var(--color_6);
  color: var(--color_1);
}

#eyecatcher img {
  width: 100%;
  height: clamp(28.125rem, 26.6912rem + 5.8824vw, 33.75rem);
  object-fit: cover;
}

polyline,
polygon {
  fill: #f44611;
}

#slogan {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  bottom: -1rem;
}

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

h1.slogan__headline {
  width: 220px;
  font-size: 30px;
  line-height: 36px;
  text-align: justify;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

h2.slogan__subheadline {
  font-size: 22px;
  font-weight: 400;
  /* letter-spacing: 0.25px; */
  text-transform: uppercase;
  margin-bottom: 1rem;
}

#eyecatcher__home {
  display: block;
}

#eyecatcher__home .container {
  padding: 0;
}

.eyecatcher__content {
  flex-direction: column;
  justify-content: center;
  position: absolute;
  display: flex;
  align-items: center;
  width: 100%;
  bottom: 5rem;
}

.eyecatcher__content h1, .eyecatcher__content p.lead {
  color: var(--color_1);
}

.eyecatcher__element {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

.eyectacher__slider {
  position: relative;
  width: 100%;
  height: 100%;
}

.cycle-pager {
  position: absolute;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 5px;
  bottom: 1rem;
  z-index: 2000;
}

.cycle-pager-element {
  width: 2rem;
  height: 5px;
  background-color: var(--color_1);
  margin: 0 5px;
  -moz-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}

.cycle-pager-element:hover {
  background-color: var(--color_3);
  cursor: pointer;
}

.cycle-pager-element.cycle-pager-active {
  background-color: var(--color_3);
}

#cycle-slider {
  z-index: 2200;
}

#cycle-slider .cycle-prev, #cycle-slider .cycle-next {
  position: absolute;
  display: flex;
  align-items: center;
  height: 100%;
  top: 0;
  color: var(--color_1);
  -moz-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  opacity: 0;
  z-index: 2200;
}

#cycle-slider:hover .cycle-prev, #cycle-slider:hover .cycle-next {
  opacity: 1;
}

#cycle-slider .cycle-prev {
  left: 0;
}

#cycle-slider .cycle-next {
  right: 0;
}

svg.bi.bi-chevron-compact-left, svg.bi.bi-chevron-compact-right {
  background-color: var(--color_14);
  padding: 0.5rem;
  -moz-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}

svg.bi.bi-chevron-compact-left:hover, svg.bi.bi-chevron-compact-right:hover {
  color: var(--color_3);
  cursor: pointer;
}

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

.img-fluid {
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

#c7n-content.c7n-home .content-tpl:nth-child(odd) {
  margin-bottom: calc(var(--x) * 2);
}

#c7n-content.c7n-home .content-tpl:nth-child(even) {
  margin-top: calc(var(--x) * 2);

}

/* ==========================================================================
   Team
   ========================================================================== */
.team-name h3 {
  margin-bottom: 0;
}

.team-function {
  font-size: 1rem;
}

svg.bi.bi-telephone, svg.bi.bi-envelope {
  color: var(--body_color);
}

svg.bi.bi-telephone:hover, svg.bi.bi-envelope:hover {
  color: var(--color_3);
}

/* ==========================================================================
   Custom Definitions
   ========================================================================== */
#toolbar {
  display: none;
}

#toolbar {
  position: fixed;
  flex-direction: column;
  top: calc(50% - 90px);
  right: 0;
  box-shadow: 0px 2px 10px;
  z-index: 2001;
}

@media only screen and (min-width: 576px) {
  #toolbar {
    display: none;
  }
}

@media only screen and (min-width: 768px) {
  #toolbar {
    display: none;
  }
}

@media only screen and (min-width: 768px) and (orientation: portrait) {
  #toolbar {
    display: flex;
  }
}

@media only screen and (min-width: 768px) and (orientation: landscape) {
  #toolbar {
    display: none;
  }
}

@media only screen and (min-width: 834px) and (orientation: portrait) {
  #toolbar {
    display: flex;
  }
}

@media only screen and (min-width: 834px) and (orientation: landscape) {
  #toolbar {
    display: none;
  }
}

@media only screen and (min-width: 992px) {
  #toolbar {
    display: flex;
  }
}

#toolbar a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  color: var(--color_6);
}

#toolbar a:hover {
  color: var(--color_3);
  background-color: var(--color_11);
}

#toolbar .emergency, #toolbar .kontakt, #toolbar .download {
  width: 60px;
  height: 60px;
  background-color: var(--color_12);
}

.c7n-button:hover {
  text-decoration: none;
  background-color: rgb(175, 22, 2);
  cursor: pointer !important;
}

#c7n-content {
  min-height: 0;
  background-color: rgb(255, 255, 255);
  margin: var(--x) 0;
}

.c7n-home #c7n-content {
  min-height: auto !important;
  padding-bottom: 0;
}

iframe {
  width: 100%;
  background-color: rgba(255, 255, 255, 0);
  padding: 0;
  overflow: hidden;
}

@media (min-width: 768px) {
  .c7n-register-tab {
    height: 60px;
    left: -60px;
    line-height: 60px;
  }

  .c7n-register:first-child .c7n-register-tab {
    font-size: 1em;
    padding-right: 60px;
  }

  .c7n-register:first-child .c7n-register-tab:before {
    width: 60px;
  }
}

/* ==========================================================================
   Claims
   ========================================================================== */
#claim {
  position: relative;
  display: flex;
  background-color: var(--color_6);
  color: var(--color_5);
  padding: var(--y) 0;
  min-height: 550px;
}

.background__signet {
  position: relative;
  height: 100%;
  display: flex;
  justify-content: space-evenly;
  flex-direction: column;
  background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><style> .cls-1 { fill: %23fbf9f1; } .cls-2 { fill: %23fbd5da; } </style></defs><polygon class="cls-2" points="539.93 324.78 46.5 1000 497.98 0 733.71 572.49 539.93 324.78"/><polygon class="cls-1" points="745.69 626.43 321.38 626.43 313.51 637.2 699.75 724.32 954.34 983.5 745.69 626.43"/></svg>');
  background-repeat: no-repeat;
}

/* ==========================================================================
   Headlines
   ========================================================================== */
#headlines {
  position: relative;
  display: flex;
  background-color: var(--color_1);
  width: 100%;
  padding: var(--y) 0;
  color: var(--body_color);
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1 / 1;
}

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

.news__headline h2 {
  hyphens: none;
}

.news__button-prev, .news__button-next {
  position: relative;
  top: 0;
  margin: 0;
  z-index: 10;
  cursor: pointer;
  display: flex;
  right: initial;
  left: initial;
  width: 2rem;
  height: 2rem;
}

.news__button-all a {
  color: var(--color_3);
  text-transform: uppercase;
  font-family: 'Oswald', arial, sans-serif;
  font-size: clamp(1.125rem, 1.0887rem + 0.1613vw, 1.25rem);
  font-weight: 400;
  line-height: 1.4;
}

.news__button-prev {
  margin-left: 2rem;
}

.news__button-next {
  margin-left: 1rem;
}

.news__button-prev:after, .news__button-next:after {
  font-size: 2rem;
  text-transform: none !important;
  font-variant: initial;
  line-height: 1;
  content: '';
  width: 2rem;
  height: 2rem;
  background-color: var(--button_bg);
  font-family: initial;
  text-transform: none !important;
  /* letter-spacing: 0; */
  font-variant: initial;
  line-height: 1;
  content: '' !important;
  border-radius: 50px;
}

.news__button-prev:hover:after, .news__button-next:hover:after {
  background-color: var(--button_bg_hover);
}

.news__button-prev:after, .news__button-next:after {
  font-family: initial;
  font-size: 2rem;
  text-transform: none !important;
  /* letter-spacing: 0; */
  font-variant: initial;
  line-height: 1;
  color: var(--color_1);
  background-size: 2rem;
  background-repeat: no-repeat;
  -moz-transition: all 0.125s ease-in-out;
  -ms-transition: all 0.125s ease-in-out;
  -o-transition: all 0.125s ease-in-out;
  -webkit-transition: all 0.125s ease-in-out;
  transition: all 0.125s ease-in-out;
}

.news__button-prev:after {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23ffffff" class="bi bi-arrow-left-short" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5"/></svg>');
}

.news__button-next:after {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23ffffff" class="bi bi-arrow-right-short" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8"/></svg>');
}

.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}

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

.news__prev__next {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

@media only screen and (max-width: 767px) {
  .news__prev__next {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .news__button-prev {
    margin-left: 0;
    margin-right: 1rem;
  }

  .news__button-next {
    margin-left: 0;
    margin-right: 2rem;
  }
}

/* ==========================================================================
   Google Reviews
   ========================================================================== */
#google__reviews {
  position: relative;
  display: flex;
  background-color: var(--color_6);
  color: var(--color_5);
  padding: var(--y) 0;
}

/* ==========================================================================
   Opening hours
   ========================================================================== */
#opening__hour {
  position: relative;
  display: flex;
  background-color: var(--color_5);
  width: 100%;
  padding: var(--y) 0;
  color: var(--color_1);
  min-height: 550px;
  display: flex;
  align-items: center;
}

/* ==========================================================================
   CarSearch
   ========================================================================== */
#car__search {
  position: absolute;
  width: 100%;
  bottom: 0;
  z-index: 2200;
  background: #000;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0) 100%);
}

#car__search h1, #car__search h3 {
  color: var(--color_1);
}

#car__search select {
  width: 100%;
  height: 60px;
  border: none;
  box-shadow: none;
  padding: 1rem 0.5rem;
  outline: 0;
  font-family: 'RobotoFlex', arial, sans-serif;
  font-size: clamp(1rem, 0.9637rem + 0.1613vw, 1.125rem);
}

.range-labels {
  background-color: var(--color_1);
  width: 100%;
  height: 60px;
  border: none;
  box-shadow: none;
  padding: 1rem 0.5rem;
  outline: 0;
  font-family: 'RobotoFlex', arial, sans-serif;
  font-size: clamp(1rem, 0.9637rem + 0.1613vw, 1.125rem);
  display: flex;
  justify-content: space-between;
}

.range-wrapper {
  display: flex;
  flex-direction: column;
}

/* .range-labels { */
/*   display: flex; */
/*   justify-content: space-between; */
/*   font-size: 14px; */
/* } */

.range-slider {
  position: relative;
  width: 100%;
  border: 2px solid var(--color_1);
  position: relative;
  top: 1.5rem;
  margin-bottom: calc(3rem - 4px);
}


.range-slider input[type="range"] {
  position: absolute;
  pointer-events: none;
  width: 100%;
  height: 0;
  -webkit-appearance: none;
  background: none;
}

.range-slider input[type="range"]::-webkit-slider-thumb {
  pointer-events: all;
  -webkit-appearance: none;
  height: 18px;
  width: 18px;
  background: var(--color_1);
  border-radius: 50%;
  cursor: pointer;
  position: relative;
}

.button.disable {
  height: 60px;
  border: none;
  box-shadow: none;
  outline: 0;
  font-family: 'RobotoFlex', arial, sans-serif;
  font-size: clamp(1rem, 0.9637rem + 0.1613vw, 1.125rem);
  width: 100%;
  background-color: var(--color_1);
  color: var(--body_color) !important;
  text-decoration: none;
  pointer-events: none;
  opacity: 0.6;
  display: flex;
  align-items: center;
}

.button.disable.enabled {
  pointer-events: auto;
  opacity: 1;
}

.button.disable.enabled:hover {
  background-color: var(--color_3);
  color: var(--color_1) !important;
}

.search__button {
  display: flex;
  align-items: flex-end;
}

.brand__field, .model__field {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.car__wash {
  padding: 1rem;
  background-color: var(--color_6);
  text-align: center;
  /* margin-bottom: 5rem; */
}

#c7n-content.about-us {
  min-height: 0;
}

#c7n-content.team {
  min-height: 500px;
}

.team-image img {
  width: 100%;
}

.c7n-frame-size h2 {
  color: var(--body_color);
}

#c7n-eyecatcher.about-us, #c7n-eyecatcher.kontakt, #c7n-eyecatcher.team {
  height: 80vh;
}

@media (min-width: 768px) {
  #c7n-eyecatcher.about-us, #c7n-eyecatcher.kontakt, #c7n-eyecatcher.team {
    height: 80vh;
  }
}

@media (min-width: 992px) {
  #c7n-eyecatcher.about-us, #c7n-eyecatcher.kontakt, #c7n-eyecatcher.team {
    height: 75vh;
  }
}

input#contactFormFieldId2_89, input#contactFormFieldId2_101 {
  height: initial;
  display: inline-block;
}


/* ==========================================================================
   Isotope
   ========================================================================== */
/* ==========================================================================
     Filter
   ========================================================================== */
#filter-form {
  width: 100%;
}

.filter select {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.2s ease;
  caret-color: var(--body_color);
  color: var(--body_color);
  background: url(../img/arrow_black.svg) no-repeat 97% center;
  background-color: var(--color_6);
  border: 1px solid var(--color_6);
  height: 3rem;
  line-height: 3rem;
  width: 100%;
  background-size: 10px;
  display: flex;
  padding: 0 1rem;
  text-transform: uppercase;
  outline: 0;
}


a.button.set-isotope-filter {
  background-color: var(--color_6);
  border: 1px solid var(--color_6);
  color: var(--body_color);
}

a.button.set-isotope-filter:hover {
  background-color: var(--color_3);
  border: 1px solid var(--color_3);
  color: var(--color_1);
}

a.button.set-isotope-filter.active {
  background-color: var(--color_3);
  border: 1px solid var(--color_3);
  color: var(--color_1);
}

.isotope-content {
  padding: 0;
}

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

/* ==========================================================================
   Leistungen
   ========================================================================== */

#repair__shop {
    position: relative;
    display: flex;
    background-color: var(--color_6);
    color: var(--color_5);
    padding: calc(var(--y) * 2) 0 var(--y) 0;
    min-height: 550px;
  }

  #repair__shop a {
    text-decoration: underline;
    color: var(--color_5);
    text-underline-offset: 5px;
  }

  #repair__shop a:hover {
    color: var(--color_3);
    cursor: pointer;
    text-underline-offset: 5px;
  }

  #repair__shop img.second__image {
    position: relative;
    top: -5rem;
  }

  #body__shop {
    position: relative;
    display: flex;
    background-color: var(--body_bg);
    color: var(--color_5);
    padding: calc(var(--y) * 2) 0 var(--y) 0;
    min-height: 550px;
  }

  #body__shop a {
    text-decoration: underline;
    color: var(--color_5);
    text-underline-offset: 5px;
  }

  #body__shop a:hover {
    color: var(--color_3);
    cursor: pointer;
    text-underline-offset: 5px;
  }

  #body__shop img.second__image {
    position: relative;
    top: -5rem;
  }


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



/* ==========================================================================
   Media Queries
   ========================================================================== */
@media (max-width: 767px) {
  .c7n-logo {
    padding: 10px;
  }

  .c7n-logo img {
    width: auto;
    height: 40px;
    position: absolute;
    top: 10px;
  }
}

@media (min-width: 768px) {
  header {
    height: 90px;
  }

  .c7n-mobile-navigation {
    padding: 15px;
  }

  .c7n-logo {
    padding: 0;
  }

  .c7n-logo img {
    height: 70px;
    width: auto;
    position: absolute;
    bottom: 10px;
  }
}

@media (min-width: 1200px) {
  header .c7n-desktop-navigation {
    position: relative;
    display: block;
    height: 90px;
    padding: 15px;
    text-align: right;
  }

  header .c7n-mobile-navigation {
    display: none;
  }
}

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