:root {
  --primary: #007ca3;
  --secondary: #05546e;
  --dark: #002c39;
  --gray: #646464;
  --light: #f4f4f4;
  --white: #ffffff;
  --p: 20px;
  --h1: 60px;
  --h2: 50px;
  --h3: 40px;
  --h4: 25px;
  --small: 16px;
  --font-regular: 400;
  --font-bold: 700;
  --maxWidth: 1200px;
  --paddingY: 150px;
  --paddingX: 30px;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box !important;
  font-family: "raleway", sans-serif;
  font-style: normal;
}
h2 {
  font-size: var(--h2);
  font-weight: var(--font-bold);
  color: var(--dark);
  line-height: 120%;
}
h3 {
  font-size: 30px;
  font-weight: var(--font-bold);
  color: var(--secondary);
  line-height: 120%;
  hyphens: auto;
  overflow-wrap: break-word;
}
h4 {
  font-size: var(--h4);
  font-weight: var(--font-bold);
  color: var(--secondary);
  line-height: 120%;
  hyphens: auto;
  overflow-wrap: break-word;
}
p {
  font-size: var(--p);
  font-weight: var(--font-regular);
  color: var(--gray);
  line-height: 160%;
}
.visually-hidden {
  display: none;
}
.max-width {
  max-width: var(--maxWidth);
  width: calc(100vw - (var(--paddingX) * 3));
}
.cols-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 30px;
}
.cols-3 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 30px;
}
body,
main {
  overflow-x: hidden;
}
nav.main-nav {
  display: grid;
  place-items: center;
  padding: 30px;
  z-index: 900;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
nav > div {
  max-width: var(--maxWidth);
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
nav .logo {
  width: 13vw;
  max-width: 180px;
  min-width: 130px;
}
nav .logo img {
  width: 100%;
  height: auto;
}
.nav-links {
  display: flex;
  gap: 2rem;
  white-space: nowrap;
  align-items: center;
  background-color: var(--white);
  padding: 10px 10px 10px 35px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  box-shadow: 0 0 20px -12px var(--dark);
  justify-content: space-between;
}
.nav-links ul {
  list-style: none;
  display: flex;
  gap: 2vw;
  justify-content: end;
  align-items: center;
  flex-wrap: wrap;
}
.nav-links ul li {
  display: block;
}
.nav-links ul li.parent {
  position: relative;
}
.nav-links > ul > li.parent > a {
  padding: 30px 0;
}
.nav-links img {
  width: 30px;
  height: 30px;
}
.nav-links .social-link {
  display: flex;
  justify-content: center;
  align-items: center;
}
.nav-links ul:has(.social-link) {
  padding-left: 30px;
  gap: 10px;
}
.nav-links ul li a {
  --p: 16px;
  text-decoration: none;
  color: var(--dark);
  font-size: var(--p);
  font-weight: 500;
}
nav .hamburger {
  display: none;
}
nav .nav-links ul li.parent:hover .mod-menu__sub {
  transform: rotateX(0deg);
}
nav .mod-menu__sub {
  position: absolute;
  bottom: -20px;
  left: 0;
  padding: 10px;
  translate: 0 100%;
  gap: 0;
  background-color: var(--white);
  border-radius: 15px;
  box-shadow: 2px 2px 10px -5px var(--gray);
  transform: rotateX(90deg);
  transform-origin: top;
  transition: all ease-out 0.3s;
}
nav .mod-menu__sub li {
  width: 100%;
  display: block;
  border-radius: 5px;
}
nav .mod-menu__sub li a {
  padding: 10px;
  border-radius: 5px;
  display: block;
}
nav .mod-menu__sub li:hover {
  --dark: var(--white);
  background-color: var(--primary);
}
nav .nav-links ul li.current a {
  font-weight: var(--font-bold);
}
section.referenzen:not(:has(div.referenz-item)) {
  display: none;
}
section.referenzen h2 {
  margin-bottom: 60px;
}
header {
  height: fit-content;
  min-height: auto;
  position: relative;
}
header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--white);
  -webkit-mask-image: radial-gradient(
    circle at 90vw 10vh,
    transparent 60vw,
    black 0
  );
  mask-image: radial-gradient(circle at 90vw 10vh, transparent 60vw, black 0);
  mask-mode: alpha;
  mask-repeat: no-repeat;
  mask-size: cover;
}
header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--white);
  opacity: 0.4;
}
header:has(.banner-overlay) {
  height: 300px;
}
header > div {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 250px 30px;
  z-index: 100;
}
header div p {
  color: var(--dark);
  padding-right: 30vw;
}
@media screen and (max-width: 600px) {
  header div p {
    padding-right: 0;
  }
}
header div p,
header div h1 {
  max-width: var(--maxWidth);
  width: 100%;
  font-weight: var(--font-regular);
  z-index: +1;
}
header div h1 {
  font-size: 22px;
  line-height: 1.2;
  font-weight: var(--font-bold);
}
header div h1 strong {
  font-size: var(--h1);
  font-weight: var(--font-bold);
  color: var(--primary);
}
header .banner-button {
  position: absolute;
  bottom: 30px;
  right: 30px;
  z-index: 900;
}
header .banner-button p {
  padding: 0;
  margin: 0;
}
header .banner-button a {
  background-color: var(--white);
  color: var(--gray);
  padding: 17px 20px 20px 20px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: grid;
  text-decoration: none;
  font-size: var(--h4);
  place-content: center;
  box-shadow: 0 0 50px -30px var(--gray);
  line-height: 130%;
  text-align: center;
  transition: all ease-out 0.2s;
  -webkit-animation: shake-lr 4s linear infinite;
  animation: shake-lr 4s linear infinite;
}
header .banner-button a:hover {
  rotate: 15deg;
  box-shadow: 0 0 50px -20px var(--gray);
}
header .banner-button a strong {
  color: var(--dark);
}
@-webkit-keyframes shake-lr {
  0% {
    transform: scale(1);
  }
  2.5% {
    transform: scale(0.9);
  }
  5% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes shake-lr {
  0% {
    transform: scale(1);
  }
  2.5% {
    transform: scale(0.9);
  }
  5% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}
section {
  display: grid;
  place-items: center;
  padding: var(--paddingY) var(--paddingX);
}
main:not(:has(header)) section.subpage {
  padding-top: 250px;
}
.section-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  column-gap: 60px;
  align-items: stretch;
  row-gap: 30px;
}
.section-content h2 {
  font-size: var(--h2);
  font-weight: var(--font-bold);
  color: var(--dark);
  line-height: 120%;
  text-align: right;
  position: relative;
}
.home.subpage .section-content h2,
.subpage .section-content .page-header {
  padding-right: 60px;
  position: relative;
}
.home.subpage .section-content h2,
.subpage .section-content .page-header h1 {
  font-size: var(--h2);
  font-weight: var(--font-bold);
  color: var(--dark);
  line-height: 120%;
}
.subpage .section-content .page-header * {
  text-align: right;
}
.subpage .section-content .page-header .uebersicht {
  margin-top: 60px;
}
.section-content h2::after,
.subpage .section-content .page-header::after {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 10px;
  height: 100%;
  background-color: var(--primary);
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  translate: 50% 0;
}
.subpage .section-content .page-header {
  grid-row: 1 / -1;
}
.home.subpage .section-content h2 {
  grid-column: 1;
}
.home.subpage .section-content > *:not(h2),
.subpage .section-content > *:not(.page-header) {
  grid-column: 2;
}
.subpage .section-content p strong {
  color: var(--dark);
}
.subpage .section-content p a[href*="tel:"],
.subpage .section-content p joomla-hidden-mail a[href*="mailto:"] {
  text-decoration: none;
  color: var(--dark);
  display: flex;
  align-items: center;
  gap: 10px;
}
.subpage .section-content p a[href*="tel:"]::before {
  content: url("/templates/klar/images/tel-icon.png");
  display: block;
}
body:not(.impressum):not(.datenschutz)
  .subpage
  .section-content
  p
  joomla-hidden-mail
  a[href*="mailto:"]::before {
  content: url("/templates/klar/images/email-icon.png");
  display: block;
}
body.datenschutz .section-content a,
body.impressum .section-content a {
  color: var(--dark);
  text-decoration: none;
  font-weight: var(--font-bold);
  hyphens: auto;
  overflow-wrap: anywhere;
}
body.impressum .section-content p {
  margin-bottom: 0;
}
body.datenschutz .section-content li {
  font-size: var(--p);
  color: var(--gray);
}
.subpage .section-content form h2 {
  font-size: var(--p);
  text-align: left;
  margin-bottom: 30px;
}
.subpage .section-content form h2::after {
  display: none;
}
.subpage .section-content form.formResponsive .formHorizontal .rsform-block {
  margin-bottom: 0;
}
.subpage
  .section-content
  form.formResponsive
  .formHorizontal
  .formControlLabel {
  display: none;
}
.subpage .section-content form.formResponsive .formHorizontal .formControls {
  margin-left: 0;
}
.subpage .section-content form .formSpan12 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
  column-gap: 20px;
}
.subpage
  .section-content
  form.formResponsive
  .formHorizontal
  .rsform-type-textarea {
  grid-column: 1 / -1;
}
.subpage
  .section-content
  form.formResponsive
  .formHorizontal
  .formControls
  input,
.subpage
  .section-content
  form.formResponsive
  .formHorizontal
  .formControls
  textarea {
  padding: 20px;
  margin: 0;
  width: 100%;
  border: 2px solid var(--primary);
  font-size: var(--small);
}
.subpage
  .section-content
  form.formResponsive
  .formHorizontal
  .formControls
  input::placeholder,
.subpage
  .section-content
  form.formResponsive
  .formHorizontal
  .formControls
  textarea::placeholder {
  color: var(--primary);
  font-weight: var(--font-bold);
}
.subpage
  .section-content
  form.formResponsive
  .formHorizontal
  .formControls
  .formDescription {
  display: none;
}
form .rsform-submit-button {
  background-color: var(--primary);
  color: var(--white);
  padding: 10px 20px;
  border-radius: 50px;
  text-decoration: none;
  font-size: var(--small);
  font-weight: var(--font-bold);
  outline: none;
  border: none;
}
.subpage .section-content .price * {
  text-align: end;
}
.subpage .section-content .price p {
  font-size: var(--small);
  color: var(--gray);
  margin-top: 10px;
}
.subpage .section-content .price h3 {
  font-size: var(--h4);
  color: var(--dark);
  text-align: end;
}
.subpage .section-content .price {
  width: fit-content;
  place-self: end;
  margin-top: 60px;
}
.subpage .section-content .price form {
  display: flex;
  justify-content: end;
  flex-direction: row;
  margin-top: 30px;
}
.subpage .section-content .price form .btn-primary {
  background-color: var(--primary);
  color: var(--white);
  padding: 10px 20px;
  border-radius: 50px;
  text-decoration: none;
  font-size: var(--small);
  font-weight: var(--font-bold);
  border: none;
  cursor: pointer;
}
.showcase {
  background-color: var(--light);
}
.showcase-item {
  display: flex;
  flex-direction: column;
  background-color: var(--white);
  border-radius: 50px;
  overflow: hidden;
}
.showcase-item .item-content {
  padding: 35px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  height: 100%;
}
.showcase-item .item-content div {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.showcase-item .item-content div p {
  font-size: var(--small);
}
.showcase div img {
  width: 100%;
  height: 160px;
  object-fit: cover;
}
.showcase-item .readmore {
  width: fit-content;
  margin-top: 30px;
  margin-bottom: 0;
}
.showcase-item .readmore a,
.subpage .section-content a[title="ref-button"] {
  display: block;
  color: var(--white);
  background-color: var(--primary);
  text-decoration: none;
  font-size: var(--small);
  padding: 2px 10px;
  border-radius: 50px;
  border: none;
  display: flex;
  align-items: center;
  gap: 20px;
  width: fit-content;
}
.subpage .section-content a[title="ref-button"] {
  margin-top: 60px;
}
section.swiper {
  padding: 30px var(--paddingX) !important;
  background-color: var(--light);
  margin: 0 !important;
}
.swiper-button-next.swiper-button-next,
.swiper-button-prev.swiper-button-prev {
  color: var(--primary);
}
.swiper-button-prev.swiper-button-prev {
  left: 50px;
}
.swiper-button-next.swiper-button-next {
  right: 50px;
}
.swiper-button-next.swiper-button-next,
.swiper-button-prev.swiper-button-prev {
  background-color: var(--white);
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  box-shadow: 0 0 20px -12px var(--dark);
  aspect-ratio: 1 / 1;
}
.swiper-button-next.swiper-button-next::after {
  font-size: 22px;
  translate: 2px 0;
}
.swiper-button-prev.swiper-button-prev::after {
  font-size: 22px;
  translate: -2px 0;
}
.team .team-title {
  color: var(--primary);
  line-height: 120%;
  text-align: center;
  margin-bottom: 60px;
}
.team .team-member,
.referenzen .referenz-item {
  --p: 16px;
  position: relative;
  border-radius: 50px;
  overflow: hidden;
  height: 350px;
}
.team .team-content,
.referenzen .referenz-content {
  --secondary: var(--white);
  --gray: var(--white);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px;
  transition: all ease-out 0.3s;
}
.team .team-content h4 {
  translate: 0 50% !important;
}
.team .team-member:hover .team-content h4 {
  translate: 0 0% !important;
}
.referenzen .team-content {
  translate: 0 100%;
}
.referenzen .referenz-readmore {
  background-color: var(--dark);
  padding: 10px 15px;
  border-radius: 20px;
  width: fit-content;
}
.referenzen .referenz-readmore a {
  color: var(--white);
  text-decoration: none;
}
.team .team-content .team-funktion,
.referenzen .referenz-readmore {
  translate: 0 100%;
  transition: all ease-out 0.3s;
  opacity: 0;
  margin-top: 10px;
}
.team .team-image,
.referenzen .referenz-image {
  position: relative;
  height: 100%;
}
.team .team-image::after,
.referenzen .referenz-image::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--secondary);
  opacity: 0.8;
  transition: top ease-out 0.3s;
}
.team .team-image img,
.referenzen .referenz-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.team .team-member:hover .team-image::after,
.referenzen .referenz-item:hover .referenz-image::after {
  top: 0;
}
.team .team-member:hover .team-content,
.team .team-member:hover .team-content .team-funktion,
.referenzen .referenz-item:hover .referenz-content,
.referenzen .referenz-item:hover .referenz-readmore {
  translate: 0 0% !important;
  opacity: 1;
  max-height: 500px;
}
.referenzen-filter {
  margin-bottom: 100px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.referenzen-filter button {
  font-weight: var(--font-bold);
  padding: 10px 20px;
  border-radius: 50px;
}
.referenzen-filter .btn-secondary {
  background-color: var(--white);
  color: var(--primary);
  border: 2px solid var(--primary);
}
.referenzen-filter .btn-primary {
  background-color: var(--primary);
  color: var(--white);
  border: 2px solid var(--primary);
}
.header-referenz {
  height: 400px;
}
.header-referenz::after {
  display: none;
}
.header-referenz img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
section.fotogalerie {
  padding-top: 0;
}
.fotogalerie .cols-4 a {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.fotogalerie .cols-4 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fotogalerie .cols-4 a {
  border-radius: 50px;
  overflow: hidden;
}
.section-360 {
  padding-top: 0;
}
.section-360 iframe {
  border: none;
  border-radius: 50px;
}
.shop {
  padding-top: 0;
}
.shop .cols-4 {
  margin-top: 100px;
  gap: 40px;
}
.shop .product {
  box-shadow: 0 3px 46px -30px var(--dark);
  border-radius: 50px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.shop .product-image {
  position: relative;
  aspect-ratio: 1 / 1;
  height: 240px;
}
.shop .product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.shop .product-image .kategorie {
  position: absolute;
  right: 10px;
  bottom: 10px;
  background-color: var(--dark);
  color: var(--white);
  padding: 2px 10px;
  border-radius: 50px;
  font-size: var(--small);
  font-weight: var(--font-regular);
}
.shop .product-content {
  padding: 30px;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
}
.shop .product-content h3 {
  font-size: var(--p);
  color: var(--dark);
  line-height: 120%;
  margin-bottom: 10px;
}
.shop .product-content p {
  font-size: var(--small);
  line-height: 120%;
}
.shop .product-content .price {
  font-size: var(--h4);
  font-weight: var(--font-bold);
  color: var(--dark);
  line-height: 120%;
  margin-top: 20px;
}
.shop .action-buttons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 50px;
}
.shop .product-content button {
  background-color: transparent;
  color: var(--dark);
  border: 1px solid var(--dark);
  padding: 5px 10px;
  border-radius: 50px;
  text-decoration: none;
  font-size: var(--small);
  font-weight: var(--font-bold);
  outline: none;
}
.shop .product-content button.btn-primary {
  background-color: var(--primary);
  color: var(--white);
  border: 1px solid var(--primary);
}
form {
  display: flex;
  align-items: center;
  flex-direction: column;
}
form h2 {
  width: 100%;
  max-width: 600px;
}
.kontakt form h2 {
  max-width: 100%;
}
form #rsform_4_page_0,
form #rsform_3_page_0 {
  width: 100%;
  display: grid;
  place-items: center;
}
form #rsform_3_page_0 {
  place-items: start;
}
form #rsform_4_page_0 > .row,
form #rsform_3_page_0 > .row {
  max-width: 600px;
  width: 100%;
}
form .formControls.col-sm-9 {
  width: 100%;
  padding-right: 0;
  padding-left: 0;
}
form .row {
  margin-right: 0;
  margin-left: 0;
}
form .row > * {
  padding-right: 0;
  padding-left: 0;
}
form .mb-3 {
  margin-bottom: 0 !important;
}
form .col-md-12 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: 20px;
}
form .col-md-12 .rsform-type-submitbutton,
form .col-md-12 .rsform-type-textarea {
  grid-column: 1 / -1;
}
form .formControls input,
form .formControls textarea {
  border: 2px solid var(--primary);
}
form .formControls input::placeholder,
form .formControls textarea::placeholder {
  color: var(--primary);
}
form #rsform_error_3,
form #rsform_error_4 {
  margin-bottom: 30px;
}
form #rsform_error_3:empty,
form #rsform_error_4:empty {
  display: none;
}
form #rsform_error_3,
form #rsform_error_4 {
  color: oklch(0.505 0.213 27.518);
  background-color: oklch(0.971 0.013 17.38);
  box-shadow: 0 0 1px oklch(0.505 0.213 27.518);
  padding: 10px;
  border-radius: 6px;
  max-width: 600px;
  width: 100%;
}
form #rsform_error_3 .formRed,
form #rsform_error_4 .formRed {
  margin-bottom: 0;
  padding: 0;
  font-size: var(--small);
  display: block;
}
form .formValidation .formError {
  display: none;
}
.rsfp_thankyou_popup_inner {
  border-radius: 50px;
  padding: 40px;
  margin-top: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  max-width: 600px;
  width: 100%;
}
.rsfp_thankyou_popup_inner p strong {
  color: var(--dark);
  font-weight: var(--font-bold);
}
.rsfp_thankyou_popup_inner p a {
  color: var(--primary);
  text-decoration: none;
  font-weight: var(--font-bold);
}
.rsfp_thankou_popup_close_btn {
  position: absolute;
  top: 22px;
  right: 23px;
  font-size: 50px;
  cursor: pointer;
  background-color: var(--primary);
  color: var(--white);
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  padding-bottom: 7px;
}
section.showcase .max-width {
  --maxWidth: 1400px;
}
section.social-wall {
  padding: var(--paddingY) var(--paddingX);
}
section.social-wall .max-width {
  --maxWidth: calc(1400px + 80px);
  width: 100%;
}
section.social-wall h2 {
  text-align: center;
  color: var(--primary);
}
footer {
  display: grid;
  place-items: center;
  padding: 80px 30px;
  background-color: var(--dark);
  container: footer / inline-size;
}
footer > div {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 20px;
}
footer .nav-links {
  background-color: transparent;
  width: fit-content;
  justify-content: start;
  padding: 0;
  gap: 10px;
}
footer .logo {
  grid-column: 1 / -1;
  margin-bottom: 60px;
}
footer .logo a {
  display: block;
  width: fit-content;
}
footer .kontaktinformationen p {
  font-size: var(--small);
  color: var(--white);
}
footer .kontaktinformationen {
  grid-column: span 3;
}
footer .siegel,
footer ul {
  grid-column: span 2;
}
footer .siegel a {
  display: block;
  background-color: var(--white);
}
footer .siegel a img {
  width: 100%;
  height: auto;
}
footer .siegel {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
footer .siegel p a {
    padding: 10px;
}
footer .kontaktinformationen,
footer > div > ul,
footer > div div:has(form) {
  border-right: 1px solid var(--white);
  padding-right: 20px;
}
footer .kontaktinformationen a,
footer ul li a {
  color: var(--white);
  text-decoration: none;
}
footer ul {
  list-style: none;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
footer > div div:has(form) {
  grid-column: span 3;
}
footer form .formContainer {
  margin-top: 10px;
}
footer form h2 {
  font-size: var(--small);
  color: var(--white);
}
footer form.formResponsive {
  margin: 0;
}
footer form.formResponsive .formHorizontal .formControls {
  margin-left: 0;
}
footer form.formResponsive .formHorizontal input,
footer form.formResponsive .formHorizontal textarea {
  padding: 10px;
  margin-bottom: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  border-radius: 0;
  border: 1px solid var(--white);
  border-radius: 6px;
}
footer form.formResponsive .formHorizontal input::placeholder,
footer form.formResponsive .formHorizontal textarea::placeholder {
  color: var(--white);
}
footer form.formResponsive .formHorizontal .formValidation,
.formResponsive .formHorizontal .input-append,
.formResponsive .formHorizontal .input-prepend,
.formResponsive .formHorizontal .uneditable-input,
.formResponsive .formHorizontal input,
.formResponsive .formHorizontal select,
.formResponsive .formHorizontal textarea {
  display: block;
}
footer form .formDescription,
footer form.formResponsive .formHorizontal .formControlLabel,
footer form .formNoError,
.subpage .section-content form .formNoError,
.subpage .section-content form .formDescription,
.subpage .section-content form .formControlLabel {
  display: none;
}
footer form.formResponsive .formHorizontal .rsform-block {
  margin-bottom: 0;
}
footer form.formResponsive .formRow .formSpan12 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 20px;
}
footer form .rsform-type-textarea {
  grid-column: 1 / -1;
}
footer .nav::before {
  content: "Sitemap";
  font-size: var(--small);
  color: var(--white);
  font-weight: var(--font-bold);
}
footer .formResponsive button[type="submit"]:hover {
  background-color: var(--secondary);
  color: var(--white);
}
footer .formResponsive button[type="submit"] {
  background-color: var(--primary);
  color: var(--white);
  padding: 5px 12px;
  border-radius: 50px;
  text-shadow: none;
  font-size: var(--small);
  box-shadow: none;
  border: none;
}
.map {
  width: 100%;
  height: 400px;
  overflow: hidden;
  position: relative;
}
.map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.subfooter {
  background-color: var(--dark);
  padding: 30px 30px;
}
.subfooter ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.subfooter a {
  color: var(--white);
  text-decoration: none;
}
.subfooter .klar {
  font-weight: var(--font-bold);
}
@container footer (max-width:800px) {
  footer > div {
    grid-template-columns: repeat(2, 1fr);
    gap: 60px;
  }
  footer .kontaktinformationen.kontaktinformationen,
  footer .siegel.siegel,
  footer ul,
  footer > div div:has(form) {
    grid-column: span 1;
  }
  footer .siegel.siegel img {
    width: 100%;
  }
  footer .kontaktinformationen,
  footer > div > ul,
  footer > div div:has(form) {
    padding-right: 60px;
  }
}
@container footer (max-width:500px) {
  footer > div {
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
  }
  footer .kontaktinformationen.kontaktinformationen,
  footer .siegel.siegel,
  footer ul,
  footer > div div:has(form) {
    grid-column: span 1;
    padding-right: 0 !important;
  }
  footer .siegel.siegel img {
    width: 100%;
  }
  footer .kontaktinformationen,
  footer > div > ul,
  footer > div div:has(form) {
    border-right: none;
  }
  footer ul {
    padding: 0;
  }
  footer .logo {
    grid-column: span 1;
    margin-bottom: 0;
  }
  footer .logo img {
    width: 100%;
    max-width: 200px;
    height: auto;
  }
  footer .kontaktinformationen,
  footer ul,
  footer > div div:has(form) {
    border-bottom: 1px solid var(--white);
    padding-bottom: 20px;
  }
}
@media screen and (max-width: 1300px) {
  nav div > img {
    width: 15vw;
  }
}
@media screen and (max-width: 900px) {
  h2 {
    hyphens: auto;
    overflow-wrap: break-word;
  }
  nav.main-nav {
    padding: 10px;
  }
  nav > div {
    flex-direction: column;
    background-color: var(--white);
    padding: 10px;
    border-radius: 100px;
    gap: 0;
  }
  nav .logo {
    width: 15vw;
    max-width: 180px;
    min-width: 120px;
  }
  .nav-links {
    box-shadow: none;
  }
  header > div {
    padding-top: 100px;
  }
  header .banner-button {
    --h4: 16px;
    bottom: 60px;
    right: 10px;
  }
  .section-content {
    grid-template-columns: 1fr;
  }
  .home.subpage .section-content h2,
  .subpage .section-content .page-header {
    margin-bottom: 60px;
  }
  .home.subpage .section-content > *:not(h2),
  .subpage .section-content > *:not(.page-header) {
    grid-column: 1 / -1;
  }
}
@media screen and (max-width: 1050px) {
  nav {
    --p: 16px;
  }
  .nav-links {
    padding: 10px 10px 10px 15px;
  }
  .nav-links ul:has(.social-link) {
    padding-left: 0;
  }
  .nav-links ul {
    gap: 20px;
    justify-content: center;
  }
}
@media screen and (max-width: 740px) {
  :root {
    --h1: clamp(3.125rem, 0.8814rem + 10.2564vw, 5.625rem);
    --h2: clamp(1.875rem, 0.7532rem + 5.1282vw, 3.125rem);
    --h3: clamp(1.25rem, 0.1282rem + 5.1282vw, 2.5rem);
    --paddingY: 50px;
  }
  h1 {
    hyphens: auto;
    overflow-wrap: break-word;
  }
  h2 {
    hyphens: auto;
    overflow-wrap: break-word;
  }
  nav {
    background-color: var(--white);
    padding: 10px 30px;
  }
  nav > div {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  nav div > img {
    width: 40vw;
    max-width: 150px;
    height: auto;
  }
  nav .hamburger {
    display: block;
    cursor: pointer;
    transform: rotate(180deg);
  }
  nav .hamburger-box {
    height: 15px;
  }
  nav .nav-links {
    position: fixed;
    right: 0;
    left: 0;
    flex-direction: column;
    border-radius: 0;
    height: 100vh;
    top: 0;
    padding: 0;
    padding-top: 120px;
    justify-content: start;
    z-index: -1;
    transition: all ease-out 0.3s;
  }
  nav.main-nav:has(.hamburger.is-active) {
    position: fixed;
  }
  .nav-links ul li a {
    --p: 25px;
  }
  nav .nav-links ul li.parent:hover .mod-menu__sub {
    display: none;
  }
  .nav-links ul:has(.social-link) {
    padding-left: 30px;
    align-self: start;
  }
  nav.main-nav > div:not(:has(.hamburger.is-active)) .nav-links {
    translate: 100% 0;
  }
  .nav-links ul:first-of-type {
    flex-direction: column;
    align-items: start;
    gap: 10px;
    padding: 0;
    margin: 0;
    width: 100%;
    padding-left: 20px;
  }
  .nav-links ul:first-of-type li {
    padding: 10px;
  }
  .nav-links img {
    width: 30px;
    height: 30px;
  }
  header {
    height: 100%;
    max-height: fit-content;
    margin-top: 70px;
  }
  .header-referenz {
    height: 320px;
  }
  .swiper-button-prev.swiper-button-prev {
    left: 10px;
  }
  .swiper-button-next.swiper-button-next {
    right: 10px;
  }
}
@media screen and (max-width: 400px) {
  .referenzen-filter button {
    width: 100%;
  }
}