/**
* layout.css
*
* Copyright 2022, Alex Stroh
* Comvation AG
* https://www.comvation.com
*
* Released on: June 17, 2022
*/

/* ==========================================================================
   Colors Overview
   ========================================================================== */
:root {
  --body-color: #b2ad9e;
  --body-bg: #23221f;

  --link-color: #b2ad9e;
  --link-color-hover: #e2000b;

  --navi-color: #b2ad9e;
  --navi-bg: #2e2b28;
  --navi-meta-link: #b2ad9e;
  --navi-meta-link-hover: #800006;
  --navi-link: #b2ad9e;
  --navi-link-hover: green;

  --header-color: #000;
  --header-bg: #ebebeb;

  --footer-color: #4b4641;
  --footer-bg: #191919;
  --footer-link-color: #4b4641;
  --footer-link-color-hover: #aea397;

  --button-color: #fff;
  --button-bg: #e2000b;
  --button-color-hover: #fff;
  --button-bg-hover: #800006;

  --button-filter-color: #fff;
  --button-filter-bg: #44423c;
  --button-filter-color-hover: #fff;
  --button-filter-bg-hover: #e2000b;
  --button-filter-color-active: #fff;
  --button-filter-bg-active: #e2000b;
  --button-filter-color-active-hover: #fff;
  --button-filter-bg-active-hover: #e2000b;

  --heading-1: #f3f3f1;
  --heading-2: #e2000b;
  --heading-3: #f3f3f1;
  --heading-4: #f3f3f1;
  --heading-5: #f3f3f1;
  --heading-6: #f3f3f1;

  --color-1: #fff;
  --color-2: #f2f2f2;
  --color-3: #e9ecef;
  --color-4: #000;
  --color-5: #3b3931;
  --color-6: #e6e0db;

  --color-7: #e2000b;
  --color-8: rgba(226, 0, 11, 0.75);
  --color-9: #009778;
  --color-10: #f9b11e;
  --color-11: #c20012;
  --color-12: #dc3545;
  --color-13: #dddbd5;
  --color-14: #b2ad9e;
  --color-15: #514d48;
  --color-16: #35201f;

  --footer: 200px;
  --header: 200px;
  --logo-content: 200px;
  --logo-navigation: 200px;
  --logo: 200px;

  --font-p: clamp(1.125rem, 1.0931rem + 0.1307vw, 1.25rem);
  --font-lead: clamp(1.375rem, 1.2794rem + 0.3922vw, 1.75rem);
  --font-h1: clamp(2.625rem, 2.2745rem + 1.4379vw, 4rem);
  --font-h2: clamp(2.475rem, 2.652rem + 0.915vw, 3.75rem);
  --font-h3: clamp(2.375rem, 2.2157rem + 0.6536vw, 3rem);
  --font-h4: clamp(1.875rem, 1.652rem + 0.915vw, 2.75rem);
  --font-h5: clamp(1.625rem, 1.402rem + 0.915vw, 2.5rem);
  --font-h6: clamp(1.25rem, 1.0588rem + 0.7843vw, 2rem);
  --font-li: clamp(1.125rem, 1.0931rem + 0.1307vw, 1.25rem);
  --font-link: clamp(1.125rem, 1.0931rem + 0.1307vw, 1.25rem);
}

/* ==========================================================================
   TEMP-Anpassungen
   ========================================================================== */
a.ok:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23198754' class='bi bi-check2' viewBox='0 0 16 16'%3E%3Cpath d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 2rem;
  background-position: center center;
  padding: 0 1.25rem;
  content: ' ';
  }

a.pending:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23E7AD64' class='bi bi-pencil' viewBox='0 0 16 16'%3E%3Cpath d='M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 1.5rem;
  background-position: center center;
  padding: 0 1.25rem;
  content: ' ';
  }

a.no:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23DC3545' class='bi bi-x-lg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M13.854 2.146a.5.5 0 0 1 0 .708l-11 11a.5.5 0 0 1-.708-.708l11-11a.5.5 0 0 1 .708 0Z'/%3E%3Cpath fill-rule='evenodd' d='M2.146 2.146a.5.5 0 0 0 0 .708l11 11a.5.5 0 0 0 .708-.708l-11-11a.5.5 0 0 0-.708 0Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 2rem;
  background-position: center center;
  padding: 0 1.25rem;
  content: ' ';
  }

/* ==========================================================================
   Fonts
   ========================================================================== */
@font-face {
  font-family: 'Swiss_721_Condensed_BT';
  font-weight: 300;
  font-style: normal;
  src: url("../fonts/Swiss_721_Condensed_BT.eot");
  src: url("../fonts/Swiss_721_Condensed_BT.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Swiss_721_Condensed_BT.otf") format("opentype"),
    url("../fonts/Swiss_721_Condensed_BT.ttf") format("truetype"),
    url("../fonts/Swiss_721_Condensed_BT.woff") format("woff"),
    url("../fonts/Swiss_721_Condensed_BT.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: 'Swiss_721_Condensed_BT';
  font-weight: 500;
  font-style: normal;
  src: url("../fonts/Swiss_721_Bold_Condensed_BT.eot");
  src: url("../fonts/Swiss_721_Bold_Condensed_BT.eot?#iefix") format('embedded-opentype'),
    url("../fonts/Swiss_721_Bold_Condensed_BT.otf") format('opentype'),
    url("../fonts/Swiss_721_Bold_Condensed_BT.ttf") format('truetype'),
    url("../fonts/Swiss_721_Bold_Condensed_BT.woff") format('woff'),
    url("../fonts/Swiss_721_Bold_Condensed_BT.woff2") format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Swiss_721_Condensed_BT';
  font-weight: 700;
  font-style: normal;
  src: url("../fonts/Swiss_721_Black_Condensed_BT.eot");
  src: url("../fonts/Swiss_721_Black_Condensed_BT.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Swiss_721_Black_Condensed_BT.otf") format("opentype"),
    url("../fonts/Swiss_721_Black_Condensed_BT.ttf") format("truetype"),
    url("../fonts/Swiss_721_Black_Condensed_BT.woff") format("woff"),
    url("../fonts/Swiss_721_Black_Condensed_BT.woff2") format("woff2");
  font-display: swap;
}

/* ==========================================================================
   Custom Definitions
   ========================================================================== */
html {
  overflow-x: hidden;
  overflow-y: scroll;
  width: 100%;
  height: 100%;
  max-width: 100vw;
}

* {
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}

body {
  font-family: 'Swiss_721_Condensed_BT', arial, sans-serif;
  font-size: 20px !important;
  font-weight: 300;
  line-height: 1.4;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  opacity: 0;
  color: var(--body-color);
  background-color: var(--body-bg);
  pointer-events: all;
  overflow-y: scroll;
  overflow-x: hidden;
  -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;
  overflow: hidden;
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
  transition: none;
  pointer-events: none;
  padding: 0;
}

textarea::placeholder {
  color: var(--body-color) !important;
}

input[type=checkbox].calendarInputCheckbox {
  top: 0;
}

a {
  color: var(--link-color);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 0;
  cursor: pointer;
  line-height: 1.4;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 0;
  color: var(--link-color-hover);
  cursor: pointer;
}

.quelle a {
  text-decoration: none;
  color: var(--link-color);
  cursor: pointer;
  line-height: 1.4;
}

.quelle a:hover {
  text-decoration: none;
  color: var(--link-color-hover);
  cursor: pointer;
}

a:focus {
  outline: 0 !important;
}

.cke_editable {
  background-color: #fff;
}

#PoweredByFooter {
  display: none !important;
}

#preview-content {
  padding-bottom: 0 !important;
}

#browser-note {
  font-size: .9em;
  position: fixed;
  z-index: 9999;
  top: -200px;
  width: 100%;
  padding: 15px;
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  text-align: center;
  opacity: 0;
  color: var(--color-1);
  background-color: var(--color-12);
  -webkit-box-shadow: 0 2px 10px 0 rgba(29, 29, 29, .25);
  -moz-box-shadow: 0 2px 10px 0 rgba(29, 29, 29, .25);
  box-shadow: 0 2px 10px 0 rgba(29, 29, 29, .25);
}

#browser-note.show-browser-note {
  top: 0;
  opacity: 1;
}

h1,
h2,
h3 {
  text-shadow: 3px 3px 5px var(--color-4);
}

h1 {
  color: var(--heading-1);
}

h2 {
  color: var(--heading-2);
}

h3 {
  color: var(--heading-3);
}

h4 {
  color: var(--heading-4);
}

h5 {
  color: var(--heading-5);
}

h6 {
  color: var(--heading-6);
}

h1 {
  font-size: var(--font-h1);
  margin-bottom: 1rem;
}

h2 {
  font-family: 'Swiss_721_Condensed_BT', arial, sans-serif;
  font-size: var(--font-h2);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

h2:after {
  width: 75px;
  border-bottom: 3px solid var(--heading-2);
  content: "";
  display: block;
  margin-bottom: 1.5rem;
}

h3 {
  font-family: 'Swiss_721_Condensed_BT', arial, sans-serif;
  font-size: var(--font-h3);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: 1.4px;
}

h3:after {
  width: 75px;
  border-bottom: 3px solid var(--heading-3);
  content: "";
  display: block;
  margin-bottom: 1.5rem;
}

h4 {
  font-family: 'Swiss_721_Condensed_BT', arial, sans-serif;
  font-size: var(--font-h4);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: 1.4px;
}

h5 {
  font-family: 'Swiss_721_Condensed_BT', arial, sans-serif;
  font-size: var(--font-h5);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: 1.4px;
}

h6 {
  font-family: 'Swiss_721_Condensed_BT', arial, sans-serif;
  font-size: var(--font-h6);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: 1.4px;
}

p {
  font-family: 'Swiss_721_Condensed_BT', arial, sans-serif;
  font-size: var(--font-p);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: 0.8px;
  color: var(--body-color);
}

p.lead {
  font-size: var(--font-lead);
  color: var(--body-color);
  line-height: 1.4;
}

strong,
.strong {
  font-family: 'Swiss_721_Condensed_BT', arial, sans-serif;
  font-weight: 700;
}

.content-tpl {
  padding-bottom: 1.5rem;
}

.content-tpl:last-child {
  padding-bottom: 0;
}

.content-tpl li {
  list-style: square;
  line-height: 1.5;
  font-size: var(--font-li);
}

.isotope-grid {
  margin-right: -1px;
}

#myTabContent {
  padding: 30px 0;
}

.c7n-center-vertically {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.c7n-backend-only {
  display: block;
  visibility: hidden;
  clear: both;
  width: 100%;
  height: 0;
  margin: 0;
  padding: 0;
}

.imprint h5 {
  margin-top: 4rem;
}

.imprint img {
  margin: 1rem 0 1rem 0 !important;
}

.c7n-center-vertically {
  left: 50%;
  position: relative;
  top: 50%;
  transform: translate(-50%, -50%);
}

hr.c7n-backend-only {
  margin: 0;
  padding: 0;
  height: 0;
  visibility: hidden;
  display: block;
  width: 100%;
  clear: both;
}

.c7n-share-buttons,
.c7n-share-buttons li {
  list-style: none;
  display: inline-block;
  margin: 0;
  padding: 0;
}

.c7n-share-buttons li a {
  list-style: none;
  display: block;
  border: 1px solid #000;
  padding: 8px;
}

textarea,
input,
select {
  border-radius: 0;
}

.scroll-top {
  opacity: 0;
  -webkit-transition: all .25s ease-in-out;
  -moz-transition: all .25s ease-in-out;
  -ms-transition: all .25s ease-in-out;
  -o-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
  position: fixed;
  display: flex;
  bottom: 0.5rem;
  right: 0.5rem;
  z-index: 1;
  background-color: var(--color-15);
  width: 45px;
  height: 45px;
  align-items: center;
  justify-content: center;
}

.scroll-top.visible {
  opacity: 1;
  z-index: 999;
}

.scroll-top.visible:hover {
  cursor: pointer;
  color: var(--color-7);
}

/* ==========================================================================
   PrivacyBee
   ========================================================================== */
privacybee-widget .KFaIpG_text {
    max-width: 100%;
    color: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    line-height: inherit;
}

privacybee-widget .KFaIpG_h1, privacybee-widget .KFaIpG_h2 {
    color: inherit;
    margin-bottom: 10px;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    line-height: inherit;
}

privacybee-widget .CCca4W_expandableRight {
    cursor: pointer;
    color: inherit;
    justify-content: flex-end;
    align-items: center;
    display: flex;
    font-size: inherit;
}


privacybee-widget .CCca4W_expandableImage {
    height: 56px;
    width: 56px;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    margin-right: 16px;
    display: flex;
}

privacybee-widget .CCca4W_expandableWrapper {
    border: 1px solid;
    border-radius: 0;
    padding: 1rem;
}

privacybee-widget .oSc-KW_listWrapper {
    max-width: 100%;
}

privacybee-widget .CCca4W_expandableName {
    color: inherit;
    font-size: inherit!important;
    font-style: inherit;
    font-weight: inherit;
    line-height: inherit;
}

privacybee-widget .KFaIpG_link {
    color: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    line-height: inherit;
}

privacybee-widget .KFaIpG_listElement {
    color: initial;
    font-size: inherit;
    font-style: inherit;
    font-weight: initial;
    line-height: inherit;
    color: inherit;
}

privacybee-widget .KFaIpG_h3 {
    color: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    line-height: inherit;
}

privacybee-widget .CCca4W_expandableText {
    color: inherit;
    margin-top: 16px;
    font-size: inherit;
}

privacybee-widget .KFaIpG_wrapper {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 70px;
    container-type: inline-size;
    text-align: left!important;
}

privacybee-widget ._7Q79CG_techWrapper {
    max-width: 100%;
}
/* ==========================================================================
   Bootstrap hidden
   ========================================================================== */
.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
}

/* ==========================================================================
   Header
   ========================================================================== */
header {
  position: relative;
  width: 100%;
  height: calc(var(--header) - 110px);
  display: flex;
  color: var(--header-color);
  align-items: center;
  z-index: 900;
}

header .content-left {
  padding: 0 1rem;
}

nav#navigation .content-left {
  padding: 0 1rem;
}

.logo {
  position: relative;
  display: flex;
  justify-content: center;
  background-color: transparent;
  width: auto;
  height: calc(var(--logo-navigation) - 110px);
  padding: 0.5rem 0;
  align-items: flex-start;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  z-index: 990;
}

.logo img,
.header-logo img {
  width: auto;
  height: calc(var(--logo) - 110px);
}

.logo-primary {
  display: flex;
}

svg#logo-satus {
  width: 400px;
}

g#immobilien polygon#red {
  fill: #e3000b;
}

g#architektur polygon#blue {
  fill: #0068b4;
}

g#kuenzi polygon#green {
  fill: #009778;
}

g#holzbau polygon#yellow {
  fill: #f9b11e;
}

a.back-to-home {
  width: 100%;
  pointer-events: all;
}

svg a {
  pointer-events: none;
}

/* ==========================================================================
   Main
   ========================================================================== */
main {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: calc((var(--vh, 1vh) * 100) - calc(var(--header) - 110px));
  padding: 0;
  margin: 0;
  z-index: 800;
}

main.home {
  border: none;
}

main.nofilter .filter {
  display: none;
}

main.nofilter #filter-category {
  display: none;
}

main.home #content {
  min-height: auto;
}

#content {
  min-height: calc(100vh - 540px);
  padding: 3rem 0;
}

#content-bottom,
#content-additional {
  padding: 0 0 3rem 0;
}

/* ==========================================================================
   Footer
   ========================================================================== */
footer {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  height: auto;
  font-family: 'Swiss_721_Condensed_BT', arial, sans-serif;
  font-weight: 300;
  color: var(--footer-color);
  background-color: var(--footer-bg);
  padding: 1rem;
  margin: 0;
  z-index: 900;
}

footer a {
  color: var(--footer-link-color);
  text-decoration: none;
}

footer a:hover {
  color: var(--footer-link-color-hover);
  text-decoration: underline;
  text-underline-offset: 5px;
}

footer .bi-instagram:hover {
  opacity: 0.6;
}

footer .bi-facebook:hover {
  opacity: 0.6;
}

footer .bi-youtube:hover {
  opacity: 0.6;
}

.footer-links {
  display: flex;
  justify-content: space-between;
}

.footer-bottom-left ul {
  padding: 0;
  list-style: none;
  display: inline-flex;
  color: var(--footer-color);
  width: 100%;
  flex-direction: column;
}

.footer-bottom-left ul:first-child {
  margin-top: 0.5rem;
}

.footer-bottom-right ul {
  padding: 0;
  color: var(--footer-color);
  list-style: none;
}

.footer-bottom-right ul:first-child,
.footer-bottom-right ul:last-child {
  display: flex;
}

.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: 0;
}

.footer-bottom-left li {
  margin-right: 1.5rem;
}

#footer-navigation .menu_node {
  margin-bottom: 2.5rem;
}

#footer-navigation .menu_node:last-child {
  margin-bottom: 0;
}

.footer-top img {
  width: 50px;
}

.footer-bottom-right-content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.footer-top {
  margin-bottom: 2rem;
}

.footer-bottom-right.opening ul {
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
}

/* ==========================================================================
   Eyecatcher
   ========================================================================== */
#c7n-eyecatcher img {
  width: 100%;
  height: calc((var(--vh, 1vh) * 50) - 90px);
  object-fit: cover;
}

#eyecatcher {
  position: relative;
}

.eyecatcher-headline h1 {
  color: var(--color-1);
}

.eyecatcher-headline {
  position: absolute;
  bottom: 1rem;
  text-align: center;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.8);
  text-transform: uppercase;
  z-index: 900;
}

#eyecatcher #cycle-slider img {
  width: 100%;
  height: calc((var(--vh, 1vh) * 50) - 90px);
  object-fit: cover;
}

#google-maps,
#map {
  width: 100%;
  height: calc((var(--vh, 1vh) * 50) - 90px);
}

img.cycle-slide,
#eyecatcher .content-right {
  height: calc((var(--vh, 1vh) * 50) - 90px);
}

img.cycle-slide {
  width: 100%;
  object-fit: cover;
}

#eyecatcher .content-right {
  order: 0;
  position: relative;
  padding-left: 0;
  padding-right: 0;
}

#eyecatcher .content-left {
  order: 1;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--vh, 1vh) * 30);
  background-color: var(--color-5);
}

#eyecatcher .content-left p {
  font-size: var(--font-p);
  color: var(--color-7);
  line-height: 37px;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}

#eyecatcher .content-left h1 {
  font-family: 'Swiss_721_Condensed_BT', arial, sans-serif;
  font-weight: 700;
  color: var(--color-3);
  letter-spacing: 0;
  line-height: 1.2;
  text-shadow: 3px 3px 5px var(--color-4);
}

/* ==========================================================================
   Google Maps
   ========================================================================== */
#google-maps {
  position: relative;
  width: 100%;
  height: calc((var(--vh, 1vh) * 50) - 90px);
  color: var(--body_color);
}

#address-path {
  display: none;
  visibility: hidden !important;
}

#address-popupbox {
  display: none;
}

#map,
#map-range {
  width: 100%;
}

#google-maps strong {
  color: var(--color-5);
}

/* ==========================================================================
   Sitemap
   ========================================================================== */
#sitemap ul {
  padding: 0;
  margin: 0;
  display: block;
  list-style: none;
}

li.sitemap_level_1 {
  color: var(--color-4);
  padding: 0;
  margin: 0.5rem;
}

li.sitemap_level_2 {
  padding-left: 2rem;
  display: flex;
  align-items: center;
  align-content: center;
}

#sitemap a {
  text-decoration: none;
  position: relative;
  border: transparent;
  padding-left: 0.5rem;
  height: 2rem;
  line-height: 2rem;
  display: inline-block;
}

li.sitemap_level_1 a {
  font-family: 'Swiss_721_Condensed_BT', arial, sans-serif;
  font-size: var(--font-link);
  font-weight: 300;
}

#sitemap .sitemap_level_1 a:hover {
  font-family: 'Swiss_721_Condensed_BT', arial, sans-serif;
  font-size: var(--font-link);
  font-weight: 300;
  text-decoration: underline;
  text-underline-offset: 5px;
  cursor: pointer;
}

#sitemap .sitemap_level_2 a:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
  cursor: pointer;
}

#sitemap ul {
  padding: 0;
  margin: 0;
  display: block;
  list-style: none;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

li.sitemap_level_2 a:before,
li.sitemap_level_3 a:before {
  position: absolute;
  width: 2rem;
  height: 2rem;
  left: -1rem;
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23E7AD64' 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-position: left center;
  background-repeat: no-repeat;
}

/* ==========================================================================
   Forms
   ========================================================================== */
.floating-input {
  padding: 1.5rem 1rem 0.5rem 1rem;
  transition: border-color 0.2s ease;
  background-color: var(--color-5);
  border: 1px solid var(--color-5);
  color: var(--body-color);
  font-size: 1rem;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.67;
  letter-spacing: normal;
  margin-bottom: 0;
  -webkit-appearance: none;
  width: 100%;
  font-family: 'Swiss_721_Condensed_BT', arial, sans-serif;
  font-weight: 300;
}

.floating {
  margin-bottom: 1rem;
  transition: background-color 0.2s ease;
  height: 48px;
}

.floating-input:hover,
.floating-input:focus-within {
  background-color: var(--color-14);
  border: 1px solid var(--color-16);
  color: var(--color-5);
  cursor: pointer;
}

.floating-input:hover+.floating-label::before {
  font-size: 1rem;
  color: var(--color-5);
}

.floating-input.error {
  border: 1px solid var(--color-11);
  background-color: var(--color-16);
}

textarea.floating-input {
  padding: 0.5rem 1rem;
  height: 130px;
}

textarea.floating-input:hover,
textarea.floating-input:focus-within {
  background-color: var(--color-14);
  border: 1px solid var(--color-16);
  color: var(--color-5);
  cursor: pointer;
}

textarea.floating-input:hover+.floating-label::before {
  font-size: 1rem;
  color: var(--color-5);
}

label.form-label-style,
label.form-label-style-choice {
  font-weight: 700;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.67;
  letter-spacing: normal;
  margin-bottom: 0;
  padding: 0 1rem;
  text-transform: uppercase;
}

label.form-label-style {
  font-size: 0.7rem;
}

label.form-label-style-choice {
  font-size: 1rem;
}

.floating-input::placeholder {
  color: rgba(0, 0, 0, 0);
}

.floating-label {
  display: block;
  position: relative;
  max-height: 0;
  font-weight: 500;
  pointer-events: none;
  font-family: 'Swiss_721_Condensed_BT', arial, sans-serif;
  letter-spacing: normal;
}

.floating-label::before {
  color: var(--color-2);
  content: attr(data-content);
  display: inline-block;
  backface-visibility: hidden;
  transform-origin: left top;
  transition: transform 0.2s ease;
  left: 1rem;
  position: relative;
  font-weight: 500;
  font-size: 1rem;
  font-stretch: normal;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: normal;
  vertical-align: middle;
}

.floating-label::after {
  content: "";
  position: absolute;
  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;
  opacity: 0;
  left: 0;
  top: 100%;
  transform: scale3d(0, 1, 1);
  width: 100%;
}

.floating-input:focus+.floating-label::after {
  transform: scale3d(1, 1, 1);
  opacity: 1;
}

.floating-input:placeholder-shown+.floating-label::before {
  transform: translate3d(0, -2em, 0) scale3d(1, 1, 1);
  font-size: 1rem;
}

.floating-input:value-shown+.floating-label::before {
  transform: translate3d(0, -2em, 0) scale3d(1, 1, 1);
  font-size: 1rem;
}

.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 {
  color: var(--body-color);
  font-weight: 500;
  font-size: 1rem;
  font-stretch: normal;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: normal;
  vertical-align: middle;
}

input {
  height: 48px;
}

input:focus {
  color: var(--color-5);
  outline: 0;
  -webkit-appearance: 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 rgb(223, 223, 223);
  -webkit-text-fill-color: rgba(var(--marine-blue), 1);
  -webkit-box-shadow: 0 0 0 1000px rgb(255, 255, 255) inset;
  -moz-box-shadow: 0 0 0 1000px rgb(255, 255, 255) inset;
  box-shadow: 0 0 0 1000px rgb(255, 255, 255) inset;
  transition: background-color 5000s ease-in-out 0s;
}

.floating-label::before,
.floating-input:focus+.floating-label::before {
  transform: translate3d(0, -2.8rem, 0) scale3d(0.6, 0.6, 1);
  color: var(--color-5);
}

.floating-label::before {
  color: var(--color-14);
  content: attr(data-content);
  display: inline-block;
  backface-visibility: hidden;
  transform-origin: left top;
  transition: transform 0.2s ease;
  left: 1rem;
  position: relative;
  font-weight: 500;
  font-size: 1rem;
  font-stretch: normal;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: normal;
  vertical-align: middle;
}

article.search-article .search-content {
  padding: 1rem;
  background-color: var(--color-3);
  border: 1px solid var(--color-11);
  min-height: 180px;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

article.search-article .search-content:hover {
  background-color: #e0e0e0;
  border: 1px solid #e0e0e0;
  cursor: pointer;
}

article.search-article {
  margin: 0 0 1.5rem 0;
}

.search-headline {
  font-family: 'Swiss_721_Condensed_BT', arial, sans-serif;
  font-size: 1.5rem;
  font-weight: 300;
}

.search-count-match {
  font-family: 'Swiss_721_Condensed_BT', arial, sans-serif;
  font-size: 0.9rem;
  font-weight: 300;
  margin-bottom: 0.5rem;
}

.search-teaser {
  line-height: 1.4rem;
}

form.clx-search-form {
  margin-bottom: 2.5rem;
}

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"]+label {
  display: block;
  position: relative;
  padding-left: 25px;
  margin-bottom: -20px;
  color: var(--body-color);
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

input[type="checkbox"]+label:last-child {
  margin-bottom: 0;
}

body.contact input[type="checkbox"]+label:last-child {
  margin-bottom: 3rem;
}

input[type="checkbox"]+label:before {
  content: '';
  display: block;
  width: 15px;
  height: 15px;
  border: 1px solid var(--color-7);
  position: absolute;
  left: 0px;
  top: 8px;
  opacity: 1;
  -webkit-transition: all .12s, border-color .08s;
  transition: all .12s, border-color .08s;
}

input[type="checkbox"]:checked+label:before {
  width: 7px;
  top: 4px;
  left: 7px;
  border-radius: 0;
  opacity: 1;
  border-color: var(--color-9);
  border-top-color: transparent;
  border-left-color: transparent;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* ==========================================================================
   Button
   ========================================================================== */
a.button {
  text-decoration: none;
}

.button,
.button-inactive,
.isotope-filter-button {
  display: inline-block;
  border: none;
  border-radius: 0;
  font-family: 'Swiss_721_Condensed_BT', arial, sans-serif;
  font-weight: 300;
  line-height: normal;
  padding: 0.75rem 1.5rem;
  margin-right: 0.25rem;
  margin-bottom: 0.25rem;
  text-decoration: none;
  cursor: pointer;
  text-transform: uppercase;
  -webkit-transition: all 0.125s ease-in-out;
  -moz-transition: all 0.125s ease-in-out;
  -ms-transition: all 0.125s ease-in-out;
  -o-transition: all 0.125s ease-in-out;
  transition: all 0.125s ease-in-out;
}

.button,
.isotope-filter-button {
  background-color: var(--button-bg);
  color: var(--button-color);
  border-radius: 0;
}

.isotope-filter-button {
  background-color: var(--button-filter-bg);
  color: var(--button-filter-color);
  border-radius: 0;
}

.button:hover {
  background-color: var(--button-bg-hover);
  color: var(--button-color-hover);
  text-decoration: none;
}

.button.active {
  background-color: var(--button-bg-active);
  color: var(--button-color-active);
  border-radius: 0;
}

.button.active:hover {
  background-color: var(--button-bg-active-hover);
  color: var(--button-color-active-hover);
  border-radius: 0;
}

.button-inactive,
.button-inactive:hover {
  background-color: var(--color-10);
  color: var(--color-1);
  cursor: default;
  border-radius: 0;
}

.isotope-filter-button:hover {
  background-color: var(--button-filter-bg-hover);
  color: var(--button-filter-color-hover);
  text-decoration: none;
}

.isotope-filter-button.active {
  background-color: var(--button-filter-bg-active);
  color: var(--button-filter-color-active);
  border-radius: 0;
}

.isotope-filter-button.active:hover {
  background-color: var(--button-filter-bg-active-hover);
  color: var(--button-filter-color-active-hover);
  border-radius: 0;
}

#filter-form-az .button {
  padding: 0.75rem 1rem;
  border-radius: 0;
}

a.button.set-isotope-filter {
  display: none;
}

.button-check:checked+.btn-outline {
  background-color: var(--button-bg);
  color: var(--button-color);
}

.button-check {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

label.button.btn-outline {
  width: auto;
}

/* ==========================================================================
   Filter
   ========================================================================== */
#filter-form {
  width: 100%;
}

.filter select {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.2s ease;
  caret-color: var(--main_color);
  color: var(--body-color);
  background: url(../img/arrow.svg) no-repeat 97% center;
  background-color: var(--color-15);
  border: 1px solid var(--color-15);
  font-family: 'Swiss_721_Condensed_BT', arial, sans-serif;
  font-weight: 500;
  font-size: 1rem;
  height: 3rem;
  line-height: 3rem;
  background-size: 10px;
  padding: 0rem 1rem;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.filter select {
  display: block;
  width: 100%;
}

#dropdown-level-filter-buttons {
  display: none;
  margin-bottom: 0.75rem;
}

#dropdown-category-filter-buttons {
  display: none;
  margin-bottom: 0.75rem;
}

.isotope-filter-button {
  display: none;
  margin-bottom: 0.75rem;
}

/* ==========================================================================
   Hover Effect
   ========================================================================== */
article {
  position: relative;
  margin: 0 auto;
  list-style: none;
}

article figure {
  position: relative;
  overflow: hidden;
  width: 100%;
  cursor: pointer;
}

article figure img {
  position: relative;
  display: block;
  min-height: 100%;
  max-width: 100%;
  opacity: 0.8;
}

article figure figcaption {
  padding: 1em;
  font-size: 1.25em;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  opacity: 0;
}

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;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  display: flex;
}

article figure figcaption {
  padding: 0.5rem;
  font-size: 1.25em;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  opacity: 1;
}

figure {
  margin: 0 0 1.5rem;
}

/* ==========================================================================
   Beläge
   ========================================================================== */
img.belag-image {
  width: 100%;
}

article.belag-single-image {
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}

article.belag-single-image:hover {
  opacity: 0.7;
}

article.belag-single-image:first-child {
  display: block;
}

article.belag-single-image {
  display: none;
}

.bildquelle-text {
  color: var(--color-1);
}

/* ==========================================================================
   Team
   ========================================================================== */
#content.team {
  min-height: 800px;
}

article.team-box {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.5rem;
}

article.team-box .cell-content,
article.team-box .cell-side {
  opacity: 0;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}

article.team-box .team-image {
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}

article.team-box:hover .cell-content,
article.team-box:hover .cell-side {
  opacity: 1;
}

article.team-box:hover .team-image {
  opacity: 0.3;
}

.team-box,
.team-box .cell-side {
  height: 220px;
}

.team-box .cell-content {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--color-13);
  line-height: 1.375rem;
}

.team-box .cell-content a {
  text-decoration: none;
  color: var(--color-13);
}

.team-box .cell-content a:hover {
  color: var(--color-13);
  text-decoration: underline;
  text-underline-offset: 5px;
  cursor: pointer;
}

.team-box .cell-top {
  position: relative;
  top: 0;
  left: 0;
  padding: 0 0.75rem;
}

.team-box .cell-bottom {
  position: relative;
  bottom: 0;
  left: 0;
  padding: 0 0.75rem;
}

.team-box .cell-side {
  position: absolute;
  right: 0.75rem;
  height: 350px;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-13);
}

.team-image img {
  width: 100%;
  object-fit: cover;
  height: 340px;
}

.team-name {
  font-family: 'Swiss_721_Condensed_BT', arial, sans-serif;
  font-size: 1.5rem;
  font-weight: 500;
}

.team-name,
.team-funktion,
.team-email {
  margin-bottom: 0.25rem;
}

.team-funktion {
  margin-bottom: 0.5rem;
  width: calc(100% - 50px);
}

.team-zusatzfunktion {
  width: calc(100% - 50px);
}

.team-ausbildung {
  font-style: italic;
}

.team-zugehoerigkeit {
  transform: rotate(90deg);
  font-size: 2rem;
  position: absolute;
}

.team-anstellungsjahr {
  font-size: 0.8rem;
  display: flex;
  position: absolute;
  width: 100%;
  justify-content: flex-end;
  flex-wrap: wrap;
  bottom: 0;
}

@media only screen and (min-width: 360px) and (orientation: portrait) {

  .team-box,
  .team-box .cell-side {
    height: 275px;
  }

  .team-zugehoerigkeit {
    font-size: 1.5rem;
  }
}

@media only screen and (min-width: 360px) and (orientation: landscape) {

  .team-box,
  .team-box .cell-side {
    height: 360px;
  }

  .team-zugehoerigkeit {
    font-size: 1.5rem;
  }
}

@media only screen and (min-width: 390px) and (orientation: portrait) {

  .team-box,
  .team-box .cell-side {
    height: 275px;
  }

  .team-zugehoerigkeit {
    font-size: 1.5rem;
  }
}

@media only screen and (min-width: 768px) and (orientation: portrait) {

  .team-box,
  .team-box .cell-side {
    height: 250px;
  }

  .team-zugehoerigkeit {
    font-size: 1.5rem;
  }
}

@media only screen and (min-width: 768px) and (orientation: landscape) {
  .team-zugehoerigkeit {
    font-size: 1.5rem;
  }
}

@media only screen and (min-width: 834px) and (orientation: portrait) {
  .team-zugehoerigkeit {
    font-size: 1.5rem;
  }
}

@media only screen and (min-width: 834px) and (orientation: landscape) {

  .team-box,
  .team-box .cell-side {
    height: 250px;
  }

  .team-zugehoerigkeit {
    font-size: 1.5rem;
  }
}

@media only screen and (min-width: 992px) {
  .team-zugehoerigkeit {
    font-size: 1.5rem;
  }
}

@media only screen and (min-width: 992px) and (orientation: portrait) {
  .team-zugehoerigkeit {
    font-size: 1.5rem;
  }
}

@media only screen and (min-width: 992px) and (orientation: landscape) {
  .team-zugehoerigkeit {
    font-size: 1.5rem;
  }
}

@media only screen and (min-width: 1024px) and (orientation: portrait) {
  .team-zugehoerigkeit {
    font-size: 1.5rem;
  }
}

@media only screen and (min-width: 1024px) and (orientation: landscape) {

  .team-box,
  .team-box .cell-side {
    height: 340px;
  }

  .team-zugehoerigkeit {
    font-size: 1.5rem;
  }
}

@media only screen and (min-width: 1200px) {

  .team-box,
  .team-box .cell-side {
    height: 260px;
  }

  .team-zugehoerigkeit {
    font-size: 1.75rem;
  }
}

@media only screen and (min-width: 1400px) {

  .team-box,
  .team-box .cell-side {
    height: 350px;
  }

  .team-zugehoerigkeit {
    font-size: 2rem;
  }
}

@media only screen and (min-width: 1600px) {

  .team-box,
  .team-box .cell-side {
    height: 350px;
  }

  .team-zugehoerigkeit {
    font-size: 2rem;
  }
}

@media only screen and (min-width: 1920px) {

  .team-box,
  .team-box .cell-side {
    height: 350px;
  }

  .team-zugehoerigkeit {
    font-size: 2rem;
  }
}

/* ==========================================================================
   Stellenangebote
   ========================================================================== */
#job-accordion .accordion-button {
  color: var(--color-14);
  background-color: var(--color-5);
  border: 0;
  border-radius: 0;
  font-weight: 300;
  font-size: 1.25rem;
}

#job-accordion .accordion-button:hover {
  background-color: var(--color-15);
  cursor: pointer;
}

#job-accordion .accordion-button[aria-expanded="true"] {
  background-color: var(--color-15);

}

#job-accordion .accordion-body {
  padding: 2rem;
}

#job-accordion .accordion-body .content-tpl {
  padding-bottom: 3rem;

}

#job-accordion .accordion-body .job-ansprechperson-email {
  margin-bottom: 2rem;
}

#job-accordion .accordion-button:focus {
  border: 0;
  box-shadow: none;
}

#job-accordion .accordion-item,
#job-accordion .accordion-item:first-of-type,
#job-accordion .accordion-item:last-of-type {
  border: none;
  margin-bottom: 0.5rem;
}

#job-accordion .accordion-body {
  background-color: var(--color-14);
}

#job-accordion .accordion-body p,
#job-accordion .accordion-body ul,
#job-accordion .job-ansprechperson,
#job-accordion .job-ansprechperson-email {
  color: var(--color-4);
}

#job-accordion .accordion-body ul {
  list-style: square;
}

#job-accordion .accordion-body p.lead,
#job-accordion .accordion-body h5 {
  color: var(--color-6);
}

#job-accordion a {
  color: var(--color-4);
  text-decoration: underline;
  text-underline-offset: 5px;
}

#job-accordion a:hover {
  color: var(--color-3);
  cursor: pointer;
}

/* ==========================================================================
   Referenzen
   ========================================================================== */
#content.referenzen {
  min-height: 800px;
}

#content.referenzen.detail {
  min-height: auto;
}

.form-style-search {
  margin-bottom: 5rem;
}

/*img.referenz-image {
  width: auto;
  max-height: 850px;
}*/

img.referenz-image {
  width: 100%;
  max-height: 850px;
  object-fit: contain;
}

article.referenz-single-image {
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  text-align: center;
}

article.referenz-single-image:hover {
  opacity: 0.7;
}

article.referenz-box {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.5rem;
}

article.referenz-box .cell-content,
article.referenz-box .cell-side {
  opacity: 0;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}

article.referenz-box .referenz-image {
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}

article.referenz-box:hover .cell-content,
article.referenz-box:hover .cell-side {
  opacity: 1;
}

article.referenz-box:hover .referenz-image {
  opacity: 0.3;
}


article.referenz-box:hover {
  cursor: pointer;
}

article.referenz-box[onclick=""]:hover {
  cursor: not-allowed;
}

.referenz-box,
.referenz-box .cell-side,
.referenz-image img {
  height: 220px;
}

.referenz-box .cell-content {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--color-13);
  line-height: 1.375rem;
}

.referenz-box .cell-content a {
  text-decoration: none;
  color: var(--color-13);
}

.referenz-box .cell-content a:hover {
  color: var(--color-13);
  text-decoration: underline;
  text-underline-offset: 5px;
  cursor: pointer;
}

.referenz-box .cell-top {
  position: relative;
  top: 0;
  left: 0;
  padding: 0 0.75rem;
}

.referenz-box .cell-bottom {
  position: relative;
  bottom: 0;
  left: 0;
  padding: 0 0.75rem;
}

.referenz-box .cell-side {
  position: absolute;
  right: 0.75rem;
  height: 350px;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-13);
}

.referenz-image img {
  width: 100%;
  object-fit: cover;
}

.referenz-name {
  font-family: 'Swiss_721_Condensed_BT', arial, sans-serif;
  font-size: 1.5rem;
  font-weight: 500;
}

.referenz-name,
.referenz-funktion,
.referenz-email {
  margin-bottom: 0.25rem;
}

.referenz-funktion {
  margin-bottom: 0.5rem;
  width: calc(100% - 50px);
}

.referenz-zusatzfunktion {
  width: calc(100% - 50px);
}

.referenz-ausbildung {
  font-style: italic;
}

.referenz-zugehoerigkeit {
  transform: rotate(90deg);
  font-size: 2rem;
  position: absolute;
}

.referenz-anstellungsjahr {
  font-size: 0.8rem;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.referenz-gap {
  margin-bottom: 3rem;
}

.referenz-content-bottom-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 5rem;
}

.referenz-datenblatt {
  display: flex;
  align-items: center;
}

.referenz-beschreibung {
  margin-bottom: 3rem;
}

.referenz-beschreibung-bottom {
  display: flex;
}

a.pdf-download,
.footer-links a {
  text-decoration: none;
}

a.pdf-download:hover,
.footer-links a:hover {
  text-decoration: underline;
}

@media only screen and (min-width: 360px) and (orientation: portrait) {

  .referenz-box,
  .referenz-box .cell-side,
  .referenz-image img {
    height: 275px;
  }

  .referenz-zugehoerigkeit {
    font-size: 1.5rem;
  }
}

@media only screen and (min-width: 360px) and (orientation: landscape) {

  .referenz-box,
  .referenz-box .cell-side,
  .referenz-image img {
    height: 250px;
  }

  .referenz-zugehoerigkeit {
    font-size: 1.5rem;
  }
}

@media only screen and (min-width: 390px) and (orientation: portrait) {

  .referenz-box,
  .referenz-box .cell-side,
  .referenz-image img {
    height: 275px;
  }

  .referenz-zugehoerigkeit {
    font-size: 1.5rem;
  }
}

@media only screen and (min-width: 768px) and (orientation: portrait) {

  .referenz-box,
  .referenz-box .cell-side,
  .referenz-image img {
    height: 250px;
  }

  .referenz-zugehoerigkeit {
    font-size: 1.5rem;
  }
}

@media only screen and (min-width: 768px) and (orientation: landscape) {
  .referenz-zugehoerigkeit {
    font-size: 1.5rem;
  }
}

@media only screen and (min-width: 834px) and (orientation: portrait) {
  .referenz-zugehoerigkeit {
    font-size: 1.5rem;
  }
}

@media only screen and (min-width: 834px) and (orientation: landscape) {

  .referenz-box,
  .referenz-box .cell-side,
  .referenz-image img {
    height: 250px;
  }

  .referenz-zugehoerigkeit {
    font-size: 1.5rem;
  }
}

@media only screen and (min-width: 992px) {
  .referenz-zugehoerigkeit {
    font-size: 1.5rem;
  }
}

@media only screen and (min-width: 992px) and (orientation: portrait) {
  .referenz-zugehoerigkeit {
    font-size: 1.5rem;
  }
}

@media only screen and (min-width: 992px) and (orientation: landscape) {
  .referenz-zugehoerigkeit {
    font-size: 1.5rem;
  }
}

@media only screen and (min-width: 1024px) and (orientation: portrait) {
  .referenz-zugehoerigkeit {
    font-size: 1.5rem;
  }
}

@media only screen and (min-width: 1024px) and (orientation: landscape) {

  .referenz-box,
  .referenz-box .cell-side,
  .referenz-image img {
    height: 220px;
  }

  .referenz-zugehoerigkeit {
    font-size: 1.5rem;
  }
}

@media only screen and (min-width: 1200px) {

  .referenz-box,
  .referenz-box .cell-side,
  .referenz-image img {
    height: 260px;
  }

  .referenz-zugehoerigkeit {
    font-size: 1.75rem;
  }
}

@media only screen and (min-width: 1400px) {

  .referenz-box,
  .referenz-box .cell-side,
  .referenz-image img {
    height: 300px;
  }

  .referenz-zugehoerigkeit {
    font-size: 2rem;
  }
}

@media only screen and (min-width: 1600px) {

  .referenz-box,
  .referenz-box .cell-side,
  .referenz-image img {
    height: 350px;
  }

  .referenz-zugehoerigkeit {
    font-size: 2rem;
  }
}

@media only screen and (min-width: 1920px) {

  .referenz-box,
  .referenz-box .cell-side,
  .referenz-image img {
    height: 350px;
  }

  .referenz-zugehoerigkeit {
    font-size: 2rem;
  }
}


.table {
  color: var(--color-14);
  vertical-align: top;
  border-color: var(--color-14);
  }

.table-striped>tbody>tr:nth-of-type(odd)>* {
  color: var(--color-14);
  }




/* ==========================================================================
   News
   ========================================================================== */
#headlines {
  padding-bottom: 5rem;
}

.headline {
  position: relative;
  display: flex;
  flex-direction: row;
  width: 100%;
  margin: 0;
}

main.headline h1 {
  color: var(--heading-1);
}

.headline-image:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--color-8);
  background-repeat: no-repeat;
  background-size: 50px;
  color: var(--color-3);
  background-position: center;
  font-size: 4em;
  z-index: 99;
  content: "";
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffffff' class='bi bi-chevron-right' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}

figure.headline-image {
  margin: 0;
}

.headline:hover .headline-image:after {
  opacity: 1;
  cursor: pointer;
}

.headline-image {
  position: relative;
}

.headline-image:before {
  content: "";
  display: block;
  padding-top: 40%;
}

.headline-image img {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: inline-block;
  object-fit: cover;
  font-family: 'object-fit: cover;';
  top: 0;
  left: 0;
}

.headline-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  background-color: var(--color-5);
  padding: 30px;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  margin-bottom: 0.5rem;
}

.headline-content p:last-child {
  margin-bottom: 0;
}

.headline:hover .headline-content {
  background-color: var(--color-7);
  color: var(--color-2);
  cursor: pointer;
}

.headline .headline-content h4 {
  color: var(--color-7);
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  text-shadow: 1px 1px 3px var(--color-4);
}

.headline:hover .headline-content h4 {
  color: var(--color-1);
  cursor: pointer;
  text-shadow: 1px 1px 3px var(--color-4);
}

.headline:hover .headline-content time {
  color: var(--color-1);
  cursor: pointer;
}

.headline:hover .headline-content p {
  color: var(--color-1);
  cursor: pointer;
}

img.headline-image {
  margin-bottom: 1rem;
}

time {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

/* ==========================================================================
   Call to Action
   ========================================================================== */
#call-to-action-box,
#call-to-action-box.close {
  width: 345px;
  bottom: 0;
  right: -345px;
  padding: 1rem;
  background-color: #c6af87;
  z-index: 900;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  -webkit-box-shadow: 0 2px 10px 0 rgba(29, 29, 29, 0.25) !important;
  -moz-box-shadow: 0 2px 10px 0 rgba(29, 29, 29, 0.25) !important;
  box-shadow: 0 2px 10px 0 rgba(29, 29, 29, 0.25) !important;
  opacity: 0;
}

#call-to-action {
  position: -webkit-sticky;
  position: sticky;
  bottom: 1rem;
  z-index: 900;
}

#call-to-action.close {
  position: relative;
  pointer-events: all;
  z-index: 500;
}

#call-to-action-box.close {
  pointer-events: none;
}

body.loaded #call-to-action-box {
  position: relative;
  right: 0;
  opacity: 1;
  margin-left: auto;
  margin-right: auto;
}

#call-to-action-box h4 {
  line-height: normal;
  color: var(--color-3);
}

#call-to-action-box p {
  color: var(--color-3);
  font-size: 1rem;
  line-height: normal;
}

#call-to-action-box .button {
  background-color: #ad8c52;
  color: var(--color-3);
  border-radius: 0;
}

#call-to-action-box .button:hover {
  background-color: #b69763;
  color: var(--color-3);
}

a#call-to-action-box-close {
  right: 0;
  position: relative;
  display: inline-flex;
  justify-content: flex-end;
}

#call-to-action-box-close svg:hover line {
  stroke: var(--color-3);
}

#call-to-action-box.close {
  width: 345px;
  right: -345px !important;
  opacity: 0 !important;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  z-index: 500;
}

.call-to-action-close {
  text-align: right;
}

@media (min-width: 768px) {
  .call-to-action-close {
    text-align: right;
    margin-bottom: 0.5rem;
    display: block;
  }

  #call-to-action-box,
  #call-to-action-box.close {
    width: 400px;
    right: -400px;
  }

  body.loaded #call-to-action-box {
    right: 1rem;
    opacity: 1;
  }
}

@media only screen and (min-width: 768px) and (orientation: landscape) {
  body.loaded #call-to-action-box {
    position: absolute;
    right: 1rem;
    opacity: 1;
  }
}

@media (min-width: 992px) {
  body.loaded #call-to-action-box {
    right: 1rem;
    opacity: 1;
  }
}

@media (min-width: 1200px) {
  #call-to-action-box {
    width: 400px;
    right: -400px;
    opacity: 0;
  }

  body.loaded #call-to-action-box {
    right: 1rem;
    opacity: 1;
  }
}

/* ==========================================================================
   Media queries
   ========================================================================== */
@media only screen and (min-width: 360px) and (orientation: portrait) {
  header {
    height: calc(var(--header) - 110px);
  }

  .logo,
  .header-logo {
    height: calc(var(--logo) - 110px);
  }

  .logo img,
  .header-logo img {
    width: auto;
    height: calc(var(--logo) - 100px);
    padding: 0 1rem;
  }

  main {
    min-height: calc((var(--vh, 1vh) * 100) - calc(var(--header) - 110px));
    top: 0;
    margin-bottom: 0;
  }

  .footer-top {
    margin-bottom: 0;
  }

  .team-image img {
    height: 275px;
  }

  .filter select {
    display: block;
    width: 100%;
  }

  #dropdown-level-filter-buttons {
    display: none;
    flex-wrap: wrap;
  }

  #dropdown-category-filter-buttons {
    display: none;
    flex-wrap: wrap;
  }

  .isotope-filter-button {
    display: none;
    flex-wrap: wrap;
  }
}

@media only screen and (min-width: 360px) and (orientation: landscape) {
  main {
    min-height: calc((var(--vh, 1vh) * 100) - calc(var(--header) - 110px));
    top: calc(var(--header) - 110px);
    margin-bottom: 110px;
  }

  #c7n-eyecatcher img {
    width: 100%;
    height: calc(var(--vh, 1vh) * 70);
  }

  #eyecatcher #cycle-slider img {
    width: 100%;
    height: calc(var(--vh, 1vh) * 70);
  }

  #google-maps,
  #maps {
    width: 100%;
    height: calc(var(--vh, 1vh) * 70);
  }

  img.cycle-slide,
  #eyecatcher .content-right {
    height: calc(var(--vh, 1vh) * 70);
  }

  .team-image img {
    height: 360px;
  }

  .filter select {
    display: block;
    width: 50%;
  }

  #dropdown-level-filter-buttons {
    display: none;
  }

  #dropdown-category-filter-buttons {
    display: none;
  }

  .isotope-filter-button {
    display: none;
  }
}

@media only screen and (min-width: 390px) and (orientation: portrait) {
  header {
    height: calc(var(--header) - 110px);
  }

  .header-logo {
    height: calc(var(--logo-content) - 110px);
  }

  .logo img,
  .header-logo img {
    width: calc(var(--logo) - 100px);
    height: calc(var(--logo) - 100px);
    padding: 0 1rem;
  }

  .logo {
    height: calc(var(--logo-navigation) - 110px);
  }

  main {
    min-height: calc((var(--vh, 1vh) * 100) - calc(var(--header) - 110px));
    top: 0;
    margin-bottom: 0;
  }

  .filter select {
    display: block;
    width: 100%;
  }

  #dropdown-level-filter-buttons {
    display: none;
  }

  #dropdown-category-filter-buttons {
    display: none;
  }

  .isotope-filter-button {
    display: none;
  }
}

@media only screen and (min-width: 390px) and (orientation: landscape) {
  header {
    height: calc(var(--header) - 110px);
  }

  .logo,
  .header-logo {
    height: calc(var(--logo-content) - 110px);
  }

  .logo img,
  .header-logo img {
    width: auto;
    height: calc(var(--logo) - 110px);
    padding: 0.5rem;
  }

  main {
    min-height: calc((var(--vh, 1vh) * 100) - calc(var(--header) - 110px));
    top: calc(var(--header) - 110px);
    margin-bottom: 110px;
  }

  .filter select {
    display: block;
    width: 50%;
  }

  #dropdown-level-filter-buttons {
    display: none;
  }

  #dropdown-category-filter-buttons {
    display: none;
  }

  .isotope-filter-button {
    display: none;
  }
}

@media only screen and (min-width: 576px) {
  header {
    height: calc(var(--header) - 110px);
  }

  .logo,
  .header-logo {
    height: calc(var(--logo-content) - 110px);
  }

  .logo img,
  .header-logo img {
    width: auto;
    height: calc(var(--logo) - 110px);
    padding: 0.5rem;
  }

  main {
    min-height: calc((var(--vh, 1vh) * 100) - calc(var(--header) - 110px));
    top: calc(var(--header) - 110px);
    margin-bottom: 110px;
  }

  form.clx-search-form {
    margin-bottom: 2.5rem;
  }

  article.search-article .search-content {
    min-height: auto;
  }

  .search-intro p {
    text-align: center;
    margin-bottom: 2rem;
  }

  .team-content,
  .referenz-content {
    font-size: 1rem;
  }
}

@media only screen and (min-width: 576px) and (orientation: portrait) {
  header {
    height: calc(var(--header) - 110px);
  }

  .logo,
  .header-logo {
    height: calc(var(--logo-content) - 110px);
  }

  .logo img,
  .header-logo img {
    width: auto;
    height: calc(var(--logo) - 110px);
    padding: 0 0.5rem;
  }

  main {
    min-height: calc((var(--vh, 1vh) * 100) - calc(var(--header) - 110px));
    top: 0;
    margin-bottom: 0;
  }

  .filter select {
    display: block;
    width: 100%;
  }

  #dropdown-level-filter-buttons {
    display: none;
  }

  #dropdown-category-filter-buttons {
    display: none;
  }

  .isotope-filter-button {
    display: none;
  }
}

@media only screen and (min-width: 576px) and (orientation: landscape) {
  header {
    position: relative;
    height: calc(var(--header) - 110px);
    margin-bottom: calc((var(--header) * -1) + 110px);
    background-color: transparent;
  }

  .logo.holzbau.kontakt {
    display: none;
  }

  .logo,
  .header-logo {
    height: calc(var(--logo-content) - 110px);
  }

  .logo img,
  .header-logo img {
    width: calc(var(--logo) - 115px);
    height: calc(var(--logo) - 100px);
    padding: 0 0.5rem;
  }

  main {
    top: 0;
    min-height: calc((var(--vh, 1vh) * 100) - calc(var(--header) - 110px));
    margin-bottom: 0;
  }

  .footer-top {
    margin-bottom: 0;
  }

  #eyecatcher .content-left {
    order: 0;
  }

  img.cycle-slide,
  #eyecatcher .content-left {
    height: calc(var(--vh, 1vh) * 100);
  }

  #eyecatcher #cycle-slider img,
  #eyecatcher .content-left {
    height: calc(var(--vh, 1vh) * 100);
  }

  #google-maps,
  #map {
    width: 100%;
    height: calc(var(--vh, 1vh) * 100);
  }

  .content-left h1 {
    font-size: calc(1.6rem + 1.7vw);
  }

  .content-top {
    margin-top: 3rem;
  }

  .filter select {
    display: block;
    width: 100%;
  }

  #dropdown-level-filter-buttons {
    display: none;
  }

  #dropdown-category-filter-buttons {
    display: none;
  }

  .isotope-filter-button {
    display: none;
  }
}

@media only screen and (min-width: 768px) {
  header {
    position: relative;
    height: calc(var(--header) - 100px);
    background-color: transparent;
  }

  .logo,
  .header-logo {
    height: calc(var(--logo-content) - 100px);
  }

  .logo img,
  .header-logo img {
    width: auto;
    height: calc(var(--logo) - 100px);
    padding: 0.5rem;
  }

  #content {
    padding: 4rem 0;
  }

  #content-bottom,
  #content-additional {
    padding: 0 0 4rem 0;
  }

  content-additional main {
    top: 0;
    min-height: calc((var(--vh, 1vh) * 100) - calc(var(--header) - 100px));
  }

  form.clx-search-form {
    margin-bottom: 4rem;
  }

  .floating.form-style-71,
  .floating.form-style-72,
  .floating.form-style-73,
  .floating.form-style-76 {
    width: 50%;
  }

  article.search-article .search-content {
    min-height: 200px;
  }

  .floating.form-style-search {
    margin: 1rem auto;
  }

  .team-image img,
  .referenz-image img {
    height: 250px;
  }

  .headline-content {
    margin-bottom: 0;
  }

  .headline:nth-child(even) .headline-content {
    order: 0;
  }

  .headline:nth-child(even) .headline-image {
    order: 1;
  }

  .content-tpl {
    padding-bottom: 2rem;
  }

  .filter select {
    display: none;
  }

  #dropdown-level-filter-buttons {
    display: flex;
  }

  #dropdown-category-filter-buttons {
    display: flex;
  }

  .isotope-filter-button {
    display: inline-flex;
  }

  .referenz-content-bottom-left {
    margin-bottom: 0rem;
  }
}

@media only screen and (min-width: 768px) and (orientation: portrait) {
  header {
    height: calc(var(--header) - 100px);
    margin-bottom: calc((var(--header) * -1) + 100px);
  }

  .logo.holzbau.kontakt {
    display: none;
  }

  .logo,
  .header-logo {
    height: calc(var(--logo-content) - 100px);
  }

  .logo img,
  .header-logo img {
    width: auto;
    height: calc(var(--logo) - 100px);
    padding: 0 0.5rem;
  }

  main {
    min-height: calc((var(--vh, 1vh) * 100) - calc(var(--header) - 100px));
    margin-bottom: 0;
  }

  .footer-top {
    margin-bottom: 0rem;
  }

  img.cycle-slide,
  #eyecatcher .content-left,
  #eyecatcher .content-right {
    height: calc(var(--vh, 1vh) * 50);
  }

  #eyecatcher #cycle-slider img,
  #eyecatcher .content-left,
  #eyecatcher .content-right {
    height: calc(var(--vh, 1vh) * 50);
  }

  #google-maps,
  #map {
    width: 100%;
    height: calc(var(--vh, 1vh) * 50);
  }

  #eyecatcher .content-right {
    position: relative;
    padding-left: 0;
    padding-right: 0;
  }

  #eyecatcher .content-left {
    order: 0;
  }

  #c7n-eyecatcher #cycle-slider img {
    width: 100%;
    height: calc((var(--vh, 1vh) * 50) - 140px);
    object-fit: cover;
  }

  img.cycle-slide,
  #eyecatcher .content-right {
    height: calc((var(--vh, 1vh) * 50) - 140px);
  }

  a.button.set-isotope-filter {
    display: inline-block;
    border-radius: 0;
  }

  .filter select {
    display: block;
    width: 50%;
  }

  #dropdown-level-filter-buttons {
    display: none;
  }

  #dropdown-category-filter-buttons {
    display: none;
  }

  .isotope-filter-button {
    display: none;
  }

  body.loaded #call-to-action-box {
    margin-left: auto;
    margin-right: initial;
  }
}

@media only screen and (min-width: 768px) and (orientation: landscape) {
  header {
    height: calc(var(--header) - 100px);
    margin-bottom: calc((var(--header) * -1) + 100px);
  }

  .logo,
  .header-logo {
    height: calc(var(--logo-content) - 100px);
  }

  .logo img,
  .header-logo img {
    width: auto;
    height: calc(var(--logo) - 100px);
    padding: 0 0.5rem;
  }

  main {
    min-height: calc((var(--vh, 1vh) * 100) - calc(var(--header) - 100px));
    top: 0;
    margin-bottom: 0;
  }

  .footer-bottom-left ul {
    padding: 0;
    list-style: none;
    display: inline-flex;
    flex-direction: row;
  }

  #eyecatcher .content-right {
    position: relative;
    padding-left: 0;
    padding-right: 0;
    height: calc(var(--vh, 1vh) * 100);
  }

  #eyecatcher .content-left {
    order: 0;
    height: calc(var(--vh, 1vh) * 100);
  }

  #eyecatcher #cycle-slider img {
    height: calc(var(--vh, 1vh) * 100);
  }

  #google-maps,
  #map {
    width: 100%;
    height: calc(var(--vh, 1vh) * 100);
  }

  img.cycle-slide {
    height: calc(var(--vh, 1vh) * 100);
  }

  .content-left h1 {
    /*font-size: calc(1.8rem + 1.7vw);*/
    font-size: clamp(1.75rem, 1.6544rem + 0.3922vw, 2.125rem);
  }

  .content-top {
    margin-top: 3rem;
  }

  a.button.set-isotope-filter {
    display: inline-block;
    border-radius: 0;
  }

  .filter select {
    display: none;
  }

  #dropdown-level-filter-buttons {
    display: flex;
    flex-wrap: wrap;
  }

  #dropdown-category-filter-buttons {
    display: flex;
    flex-wrap: wrap;
  }

  .isotope-filter-button {
    display: inline-flex;
    flex-wrap: wrap;
  }
}

@media only screen and (min-width: 834px) and (orientation: portrait) {
  header {
    height: calc(var(--header) - 100px);
    margin-bottom: calc((var(--header) * -1) + 100px);
  }

  main {
    min-height: calc((var(--vh, 1vh) * 100) - calc(var(--header) - 100px));
    top: 0;
    margin-bottom: 0;
  }

  #eyecatcher #cycle-slider img {
    width: 100%;
    height: calc(var(--vh, 1vh) * 50);
    object-fit: cover;
  }

  #google-maps,
  #map {
    width: 100%;
    height: calc(var(--vh, 1vh) * 50);
  }

  img.cycle-slide,
  #eyecatcher .content-right {
    height: calc(var(--vh, 1vh) * 50);
  }

  .filter select {
    display: block;
    width: 50%;
  }

  #dropdown-level-filter-buttons {
    display: none;
  }

  #dropdown-category-filter-buttons {
    display: none;
  }

  .isotope-filter-button {
    display: none;
  }
}

@media only screen and (min-width: 834px) and (orientation: landscape) {
  header {
    height: calc(var(--header) - 100px);
    margin-bottom: calc((var(--header) * -1) + 100px);
  }

  .footer-top {
    margin-bottom: 0;
  }

  .logo.holzbau.kontakt {
    display: none;
  }

  #eyecatcher #cycle-slider img {
    width: 100%;
    height: calc(var(--vh, 1vh) * 100);
  }

  #google-maps,
  #map {
    width: 100%;
    height: calc(var(--vh, 1vh) * 100);
  }

  img.cycle-slide,
  #eyecatcher .content-right {
    height: calc(var(--vh, 1vh) * 100);
  }

  #eyecatcher .content-right {
    height: calc(var(--vh, 1vh) * 100);
  }

  .filter select {
    display: block;
  }

  #dropdown-level-filter-buttons {
    display: none;
    flex-wrap: wrap;
  }

  #dropdown-category-filter-buttons {
    display: none;
    flex-wrap: wrap;
  }

  .isotope-filter-button {
    display: none;
    flex-wrap: wrap;
  }
}

@media only screen and (min-width: 992px) {
  header {
    height: calc(var(--header) - 60px);
  }

  .logo,
  .header-logo {
    height: calc(var(--logo-content) - 60px);
  }

  .logo img,
  .header-logo img {
    width: auto;
    height: calc(var(--logo) - 60px);
    padding: 0.5rem;
  }

  main {
    min-height: calc((var(--vh, 1vh) * 100) - calc(var(--header) - 60px));
  }

  .footer-bottom-left {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: row;
  }

  .footer-bottom-left ul {
    width: unset;
    padding: 0;
    list-style: none;
    display: inline-flex;
    flex-direction: row;
  }

  .footer-bottom-right {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .footer-bottom-right ul {
    margin: 0;
  }

  .footer-bottom-right ul:first-child li,
  .footer-bottom-right ul:last-child li {
    margin-left: 0;
    margin-right: 1.5rem;
  }

  .footer-bottom-right.opening ul {
    display: flex;
    margin-top: 1rem;
    flex-direction: column;
    align-items: flex-start;
  }

  #sitemap ul {
    height: 600px;
    display: flex;
    width: 100%;
  }

  article.search-article .search-content {
    min-height: 180px;
  }

  .team-image img {
    height: 340px;
  }

  .referenz-image img {
    height: 220px;
  }

  .content-tpl {
    padding-bottom: 2.5rem;
  }
}

@media only screen and (min-width: 992px) and (orientation: portrait) {
  header {
    height: calc(var(--header) - 60px);
    margin-bottom: calc((var(--header) * -1) + 60px);
  }

  .logo,
  .header-logo {
    height: calc(var(--logo-content) - 60px);
  }

  .logo img,
  .header-logo img {
    width: auto;
    height: calc(var(--logo) - 60px);
    padding: 0.5rem;
  }

  main {
    min-height: calc((var(--vh, 1vh) * 100) - calc(var(--header) - 60px));
  }

  .footer-bottom-left {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    flex-direction: row;
  }

  .footer-bottom-left ul {
    width: unset;
    padding: 0;
    list-style: none;
    display: inline-flex;
    flex-direction: row;
    margin-top: 0.5rem;
    margin-bottom: 0;
  }

  .footer-bottom-right {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .footer-bottom-right ul {
    margin: 0;
  }

  .footer-bottom-right ul:first-child li,
  .footer-bottom-right ul:last-child li {
    margin-left: 0;
    margin-right: 1.5rem;
  }

  .footer-bottom-right.opening ul {
    display: flex;
    flex-direction: row;
    margin-top: 1rem;
  }

  #eyecatcher #cycle-slider img {
    width: 100%;
    height: calc(var(--vh, 1vh) * 50);
    object-fit: cover;
  }

  #google-maps,
  #map {
    width: 100%;
    height: calc(var(--vh, 1vh) * 50);
  }

  #eyecatcher .content-right {
    height: calc(var(--vh, 1vh) * 50);
  }

  img.cycle-slide,
  #eyecatcher .content-right {
    height: calc(var(--vh, 1vh) * 50);
  }
}

@media only screen and (min-width: 992px) and (orientation: landscape) {
  header {
    height: calc(var(--header) - 60px);
    margin-bottom: calc((var(--header) * -1) + 60px);
  }

  .logo,
  .header-logo {
    height: calc(var(--logo-content) - 60px);
  }

  .logo img,
  .header-logo img {
    width: auto;
    height: calc(var(--logo) - 60px);
    padding: 0.5rem;
  }

  main {
    min-height: calc((var(--vh, 1vh) * 100) - calc(var(--header) - 60px));
  }

  .footer-bottom-left {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    flex-direction: row;
  }

  .footer-bottom-left ul {
    width: unset;
    padding: 0;
    margin-bottom: 0;
    list-style: none;
    display: inline-flex;
    flex-direction: row;
  }

  .footer-bottom-left ul:first-child {
    margin-top: 0.5rem;
    margin-bottom: 0;
  }

  .footer-bottom-right {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 1rem;
  }

  .footer-bottom-right ul {
    margin: 0;
  }

  .footer-bottom-right ul:first-child li,
  .footer-bottom-right ul:last-child li {
    margin-left: 0;
    margin-right: 1.5rem;
  }

  #c7n-eyecatcher img {
    width: 100%;
    height: calc(var(--vh, 1vh) * 50);
    object-fit: cover;
  }

  img.cycle-slide,
  #eyecatcher .content-right {
    height: calc(var(--vh, 1vh) * 50);
  }

  main.home #eyecatcher.home #cycle-slider img {
    height: calc(var(--vh, 1vh) * 100);
  }

  #eyecatcher #cycle-slider img,
  #eyecatcher .content-right {
    height: calc(var(--vh, 1vh) * 50);
  }

  #google-maps,
  #map {
    width: 100%;
    height: calc(var(--vh, 1vh) * 50);
  }
}

@media only screen and (min-width: 1024px) and (orientation: portrait) {
  .filter select {
    display: none;
  }

  #dropdown-level-filter-buttons {
    display: flex;
    flex-wrap: wrap;
  }

  #dropdown-category-filter-buttons {
    display: flex;
    flex-wrap: wrap;
  }

  .isotope-filter-button {
    display: inline-flex;
    flex-wrap: wrap;
  }
}

@media only screen and (min-width: 1024px) and (orientation: landscape) {
  .filter select {
    display: none;
  }

  #dropdown-level-filter-buttons {
    display: flex;
    flex-wrap: wrap;
  }

  #dropdown-category-filter-buttons {
    display: flex;
    flex-wrap: wrap;
  }

  .isotope-filter-button {
    display: inline-flex;
    flex-wrap: wrap;
  }
}

@media only screen and (min-width: 1200px) {
  header {
    height: calc(var(--header) - 40px);
    margin-bottom: calc((var(--header) * -1) + 40px);
  }

  header .content-left {
    padding: 0 1rem;
  }

  a.back-to-home {
    width: 100%;
    pointer-events: none;
  }

  svg a {
    pointer-events: all;
  }

  polygon#red,
  polygon#blue,
  polygon#green,
  polygon#yellow {
    fill: #fff;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
  }

  g#immobilien polygon#red {
    fill: #fff;

  }

  g#architektur polygon#blue {
    fill: #fff;
  }

  g#kuenzi polygon#green {
    fill: #fff;
  }

  g#holzbau polygon#yellow {
    fill: #fff;
  }

  svg#logo-burn g#holzbau:hover polygon#yellow {
    fill: #f9b11e;
  }

  svg#logo-burn g#architektur:hover polygon#blue {
    fill: #0068b4;
  }

  svg#logo-burn g#immobilien:hover polygon#red {
    fill: #e3000b;
  }

  svg#logo-burn g#kuenzi:hover polygon#green {
    fill: #009778;
  }

  body.immobilien g#immobilien polygon#red {
    fill: #e3000b;
  }

  body.architektur g#architektur polygon#blue {
    fill: #0068b4;
  }

  body.kuenzi g#kuenzi polygon#green {
    fill: #009778;
  }

  body.holzbau g#holzbau polygon#yellow {
    fill: #f9b11e;
  }

  body.kontakt header#desktop {
    pointer-events: none;
  }

  nav#navigation .content-left {
    padding: 0 1rem;
  }

  .logo,
  .header-logo {
    height: calc(var(--logo-content) - 40px);
  }

  .logo img,
  .header-logo img {
    width: auto;
    height: calc(var(--logo) - 40px);
    padding: 0.5rem;
  }

  #content {
    padding: 5rem 0;
  }

  #content-bottom,
  #content-additional {
    padding: 0 0 5rem 0;
  }

  main {
    min-height: calc((var(--vh, 1vh) * 100) - calc(var(--header) - 40px));
  }

  .footer-bottom-left ul {
    display: inline-flex;
    width: unset;
    margin-bottom: 0;
  }

  #footer-navigation li:last-child {
    margin-bottom: 2rem;
  }

  img.cycle-slide {
    height: calc(var(--vh, 1vh) * 100);
  }

  #google-maps,
  #map {
    width: 100%;
    height: calc(var(--vh, 1vh) * 50);
  }

  #eyecatcher.home #cycle-slider img {
    height: calc(var(--vh, 1vh) * 100);
  }

  #eyecatcher .content-right {
    position: relative;
    padding-left: 0;
    padding-right: 0;
    height: calc(var(--vh, 1vh) * 70);
  }

  #eyecatcher .content-left {
    padding: 0 1rem;
    height: calc(var(--vh, 1vh) * 100);
  }

  #eyecatcher #cycle-slider img {
    width: 100%;
    height: calc(var(--vh, 1vh) * 50);
  }

  form.clx-search-form {
    margin-bottom: 5rem;
  }

  article.search-article .search-content {
    min-height: 160px;
  }

  .floating.form-style-search {
    margin: 1rem auto;
  }

  article figure figcaption,
  article figure figcaption>a {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  article figure figcaption {
    padding: 1rem;
  }

  article figure figcaption>a {
    z-index: 1000;
    text-indent: 200%;
    white-space: nowrap;
    font-size: 0;
    opacity: 0;
  }

  figure.hover-effect {
    background-color: rgba(255, 255, 255, 0.75);
  }

  figure.hover-effect img {
    max-width: none;
    width: -webkit-calc(100%);
    width: 100%;
    opacity: 1;
    -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);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    margin-bottom: 0 !important;
  }

  figure.hover-effect figcaption {
    text-align: left;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    -moz-transition: opacity 0.35s, -moz-transform 0.35s;
    -o-transition: opacity 0.35s, -o-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-40px, 0, 0);
    -moz-transform: translate3d(-40px, 0, 0);
    -ms-transform: translate3d(-40px, 0, 0);
    -o-transform: translate3d(-40px, 0, 0);
    transform: translate3d(-40px, 0, 0);
  }

  figure.hover-effect:hover img {
    opacity: 0.125;
    -webkit-transform: translate3d(0, 0, 0) scale(1);
    -moz-transform: translate3d(0, 0, 0) scale(1);
    -ms-transform: translate3d(0, 0, 0) scale(1);
    -o-transform: translate3d(0, 0, 0) scale(1);
    transform: translate3d(0, 0, 0) scale(1);
  }

  figure.hover-effect:hover figcaption {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  .team-image img,
  .referenz-image img {
    height: 260px;
  }

  .team-content,
  .referenz-content {
    height: 160px;
    font-size: 0.875em;
  }

  .content-tpl {
    padding-bottom: 2.75rem;
  }

  .filter select {
    display: none;
  }

  #dropdown-level-filter-buttons {
    display: flex;
    flex-wrap: wrap;
  }

  #dropdown-category-filter-buttons {
    display: flex;
    flex-wrap: wrap;
  }

  .isotope-filter-button {
    display: inline-flex;
    flex-wrap: wrap;
  }
}

@media only screen and (min-width: 1400px) {
  header {
    height: calc(var(--header) - 40px);
    margin-bottom: calc((var(--header) * -1) + 40px);
  }

  .logo,
  .header-logo {
    height: calc(var(--logo-content) - 40px);
    max-width: 350px;

  }

  .logo img,
  .header-logo img {
    width: auto;
    height: calc(var(--logo) - 40px);
    padding: 0.5rem;
  }

  main {
    min-height: calc((var(--vh, 1vh) * 100) - calc(var(--header) - 40px));
  }

  footer {
    height: calc(var(--footer) - 20px);
  }

  .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;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 0rem;
  }

  .footer-top {
    margin-bottom: 2rem;
  }

  .footer-logo {
    display: flex;
    align-items: flex-end;
  }

  .footer-bottom-right.opening ul {
    display: flex;
    margin-top: 1rem;
    flex-direction: column;
    align-items: flex-end;
  }

  .floating.form-style-search {
    margin: 1rem auto;
  }

  .team-image img,
  .referenz-image img {
    height: 300px;
  }

  .team-content,
  .referenz-content {
    font-size: 1rem;
  }

  .content-tpl {
    padding-bottom: 2.75rem;
  }
}

@media only screen and (min-width: 1600px) {
  header {
    height: calc(var(--header) - 40px);
    margin-bottom: calc((var(--header) * -1) + 40px);
  }

  header .content-left {
    padding: 0 2rem;
  }

  nav#navigation .content-left {
    padding: 0 2rem;
  }

  .logo,
  .header-logo {
    height: calc(var(--logo-content) - 40px);
  }

  .logo img,
  .header-logo img {
    width: auto;
    height: calc(var(--logo) - 40px);
    padding: 0.5rem;
  }

  main {
    min-height: calc((var(--vh, 1vh) * 100) - calc(var(--header) - 40px));
  }

  footer {
    height: calc(var(--footer) - 20px);
  }

  #eyecatcher .content-left {
    padding: 0 2rem;
  }

  article.search-article .search-content {
    min-height: 140px;
  }

  .team-image img,
  .referenz-image img {
    height: 350px;
  }

  .container {
    max-width: 1520px;
  }

  .content-tpl {
    padding-bottom: 3rem;
  }
}

@media only screen and (min-width: 1920px) {
  header {
    height: var(--header);
    margin: 0;
  }

  header .content-left {
    padding: 0 4rem;
  }

  nav#navigation .content-left {
    padding: 0 4rem;
  }

  .logo,
  .header-logo {
    height: var(--logo-content);
  }

  .logo img,
  .header-logo img {
    width: auto;
    height: var(--logo);
    padding: 0.5rem;
  }

  main {
    min-height: calc((var(--vh, 1vh) * 100) - var(--header));
    top: calc(var(--header) * -1);
    margin-bottom: calc(var(--header) * -1);
  }

  footer {
    height: var(--footer);
  }

  #eyecatcher .content-left {
    padding: 0 4rem;
  }

  #eyecatcher .content-left h1 {
    /*font-size: clamp(2.375rem, 1.9608rem + 1.6993vw, 4rem);*/
    font-size: clamp(2.375rem, 2.2953rem + 0.3268vw, 2.6875rem);
  }

  .content-tpl {
    padding-bottom: 3rem;
  }
}

@page {
  size: 210mm 297mm;
  margin: 20mm;
}

@media print {}

/* ==========================================================================
   End
   ========================================================================== */