@charset "UTF-8";

/*
Theme Name: Hutter & Helden
Author: AH-Effect
Author URI: https://www.a-h-effect.de
Description: Custom Theme
Requires at least: 6.1
Tested up to: 8.3
Requires PHP: 8.2
Version: 1.1
Text Domain: customtheme
*/


/* Basics START */
:root {
  --primary-color: #16BEDF;
  --secondary-color:#0A5260;
  --light-color: #F5F5F5;
  --grey-color: #ffffff; 
  --text-color: #000000;
}


@font-face {
  font-family: 'Overpass';
  font-style: normal;
  font-weight: 100;
  src: url('assets/webfonts/Overpass-Thin.ttf') format('truetype');
}

@font-face {
  font-family: 'Overpass';
  font-style: italic;
  font-weight: 100;
  src: url('assets/webfonts/Overpass-ThinItalic.ttf') format('truetype');
}

@font-face {
  font-family: 'Overpass';
  font-style: normal;
  font-weight: 200;
  src: url('assets/webfonts/Overpass-ExtraLight.ttf') format('truetype');
}

@font-face {
  font-family: 'Overpass';
  font-style: italic;
  font-weight: 200;
  src: url('assets/webfonts/Overpass-ExtraLightItalic.ttf') format('truetype');
}

@font-face {
  font-family: 'Overpass';
  font-style: normal;
  font-weight: 300;
  src: url('assets/webfonts/Overpass-Light.ttf') format('truetype');
}

@font-face {
  font-family: 'Overpass';
  font-style: italic;
  font-weight: 300;
  src: url('assets/webfonts/Overpass-LightItalic.ttf') format('truetype');
}

@font-face {
  font-family: 'Overpass';
  font-style: normal;
  font-weight: 400;
  src: url('assets/webfonts/Overpass-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Overpass';
  font-style: italic;
  font-weight: 400;
  src: url('assets/webfonts/Overpass-Italic.ttf') format('truetype');
}

@font-face {
  font-family: 'Overpass';
  font-style: normal;
  font-weight: 500;
  src: url('assets/webfonts/Overpass-Medium.ttf') format('truetype');
}

@font-face {
  font-family: 'Overpass';
  font-style: italic;
  font-weight: 500;
  src: url('assets/webfonts/Overpass-MediumItalic.ttf') format('truetype');
}

@font-face {
  font-family: 'Overpass';
  font-style: normal;
  font-weight: 600;
  src: url('assets/webfonts/Overpass-SemiBold.ttf') format('truetype');
}

@font-face {
  font-family: 'Overpass';
  font-style: italic;
  font-weight: 600;
  src: url('assets/webfonts/Overpass-SemiBoldItalic.ttf') format('truetype');
}

@font-face {
  font-family: 'Overpass';
  font-style: normal;
  font-weight: 700;
  src: url('assets/webfonts/Overpass-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'Overpass';
  font-style: italic;
  font-weight: 700;
  src: url('assets/webfonts/Overpass-BoldItalic.ttf') format('truetype');
}

@font-face {
  font-family: 'Overpass';
  font-style: normal;
  font-weight: 800;
  src: url('assets/webfonts/Overpass-ExtraBold.ttf') format('truetype');
}

@font-face {
  font-family: 'Overpass';
  font-style: italic;
  font-weight: 800;
  src: url('assets/webfonts/Overpass-ExtraBoldItalic.ttf') format('truetype');
}

@font-face {
  font-family: 'Overpass';
  font-style: normal;
  font-weight: 900;
  src: url('assets/webfonts/Overpass-Black.ttf') format('truetype');
}

@font-face {
  font-family: 'Overpass';
  font-style: italic;
  font-weight: 900;
  src: url('assets/webfonts/Overpass-BlackItalic.ttf') format('truetype');
}

@font-face {
  font-family: 'Bebas';
  font-style: normal;
  font-weight: 400;
  src: url('assets/webfonts/BebasNeue-Regular.ttf') format('truetype');
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-margin-top: 100px; 
  cursor: none !important;
}

body {
  font-family: 'Overpass', sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 35px;
  margin: 0; 
  padding: 0;
  color: var(--text-color);
  hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  -webkit-hyphens: none;
  -o-hyphens: none;
  background-color: #ffffff;
  /* background-color: var(--grey-color); */
  /* cursor: url('assets/images/customcursor.svg'), pointer; */
}

.preline {
  font-weight: 700; 
  margin-bottom: 13px;
}

.thetitle + .preline.sub {
  margin-bottom: 46px;
  margin-top: -35px;
}

.displaynone {
  display: none;
}

b, strong {
  font-weight: 600;
}

input:focus,
:focus {
  outline: none !important;
}

a:hover,
a:active,
a:visited,
a:focus,
a {
  color: var(--primary-color);
  text-decoration: underline;
}

a:hover {
  text-decoration: none; 
}

.like-a,
.like-a:hover,
p > a:hover,
p > a:active,
p > a:visited,
p > a:focus,
p > a {
  color:#ffffff;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--primary-color);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

p > a:hover,
p > a:active,
p > a:visited,
p > a:focus,
p > a {
  color: var(--text-color);
}

.like-a:hover,
p > a:hover {
  text-decoration: none; 
  text-decoration-color: var(--text-color);

}

.like-a {
  display: inline-block;
  /* cursor: url('assets/images/customcursor-active.svg'), pointer; */
}


/* a:-webkit-any-link,
.like-a:hover, */
/* *:hover {
  cursor: url('assets/images/customcursor-active.svg'), pointer;
} */

.like-h1,
.like-h2, 
.like-h3,
h1, 
h2, 
h3 {
  font-family: "Bebas", sans-serif;
  font-weight: 400;
  margin-bottom: 0;
}

.like-h1,
h1 > code,
h1 {
  font-size: 220px;
  line-height: 264px;
}

.like-h2,
h2 {
  font-size: 150px;
  line-height: 180px;
}

.like-h2small {
  font-size: 80px; 
  line-height: 1;
  margin-bottom: 38px;
}

.like-h3,
h3 {
  font-size: 50px;
  line-height: 1;
  letter-spacing: 1px;
  margin-bottom: 13px;
}

.like-h4, 
h4 {
  font-size: 30px; 
  line-height: 35px; 
  font-weight: 700;
  margin-bottom: 15px;
  text-transform: unset;
  font-family: 'Overpass', sans-serif;
  letter-spacing: 0px;
}

input[type="search"] ,
form input[type="text"],
form input[type="submit"] {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
}

input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

img {
  max-width: 100%;
}

.mobile-menu {
  display: none;
}

section.bg-primary:before,
.bg-primary {
  background-color: var(--primary-color) !important;
}

section.bg-secondary:before,
.bg-secondary {
  background-color: var(--secondary-color) !important;
  color: #ffffff;
}

section.bg-primary,
section.bg-secondary {
  position: relative;
}

section.bg-primary:before,
section.bg-secondary:before {
  content: ""; 
  width: 300%; 
  height: 100%; 
  display: block;
  z-index: -1;
  position: absolute;
  left: -100%; 
  top: 0;
}
.bg-grey {
  background-color: var(--grey-color);
}

.bg-white {
  background-color: #ffffff;
}

.color-primary {
  color: var(--primary-color) !important;
}

.color-secondary {
  color: var(--secondary-color);
}

.color-white {
  color: #ffffff;
}

.center-text {
  text-align: center;
}

.right-text {
  text-align: right;
}

.image-wrapper img {
  max-width: 100%;
}

a.button,
button,
.wp-block-button__link,
.button {
  color: var(--text-color); 
  /* background: #ffffff; */
  border: 1px solid var(--primary-color);
  padding: 5px 25px 1px 25px;
  /* border: 1px solid #ffffff; */
  text-decoration: none;
  /* cursor: url('assets/images/customcursor-active.svg'), pointer; */
  margin: 25px 0;
  display: inline-block;
  transition: all 0.5s ease-in-out;
  font-size: 20px; 
  line-height: 31px;
  overflow: hidden; 
  position: relative;
  letter-spacing: 2px; 
  text-transform: uppercase;
  display: inline-block;
}

button.secondary,
.secondary .wp-block-button__link,
.button.secondary {
  background-color: #ffffff; 
  color: var(--text-color); 
  border-color: var(--primary-color);
}

button:hover,
.wp-block-button__link:hover,
.button:hover {
  text-decoration: none;
  background-color: var(--primary-color);
  border-radius: 12px !important;
  color: #ffffff;
}

.bg-primary {
  background-color: var(--primary-color) !important;
}

.bg-secondary {
  background-color: var(--secondary-color) !important;
}

.bg-light {
  background-color: var(--light-color) !important;
}

.bg-white {
  background-color: #ffffff;
}
.small {
  font-size: 18px; 
  line-height: 22px;
}

.specialarrow {
  top: -180px;
  width: auto;
  display: flex;
  flex-direction: row-reverse;
  position: absolute;
  right: 0;
  text-decoration: none;
  align-items: center;
}

.wp-block-button.specialarrow {
  position: relative;
  top: unset;
}

body .wp-block-button.specialarrow  > a {
  padding: 0; 
  margin: 0; 
  border: 0; 
  border-radius: 0;
  display: flex;
  flex-direction: row-reverse;
  right: 0;
  text-decoration: none;
  align-items: center;
}

body .wp-block-button.specialarrow  > a:hover {
  background-color: transparent;
}

.specialarrow .arrow {
  background-image: url(assets/images/arrow-special-right.svg);
  display: block;
  width: 43px;
  height: 48px; 
  min-width: 43px;
  background-position: right center; 
  background-repeat: no-repeat;
  background-size: contain;
}

.bg-secondary .specialarrow .arrow {
  background-image: url(assets/images/arrow-special-right-white.svg);
}

.bg-secondary .specialarrow .text {
  color: #ffffff;
}

.specialarrow:hover .arrow {
  background-image: url(assets/images/arrow-special-right-hover.svg);
}

.specialarrow .text {
  white-space: nowrap;
  font-size: 26px; 
  line-height: 1; 
  text-transform: uppercase;
  color: var(--text-color);
  max-width: 0px;
  overflow: hidden;
  width: auto;
  transition: max-width 1s;
}

.specialarrow:hover .text {
  max-width: 2000px;
}

#breadcrumbs,
.container,
.entry-content {
  max-width: 100%;
  margin: 0 auto;
  width: 100%;
  padding-left: 32px; 
  padding-right: 32px;
}

.right-part-wrapper .entry-content {
  padding-left: 80px; 
  padding-right: 80px;
}

.right-part-wrapper .entry-content .fullwidth {
  margin-left: -48px; 
  margin-right: -48px;
}

.wp-block-columns h2, 
.wp-block-columns h1, 
.wp-block-columns h3,
.entry-content .container {
  padding-left: 0; 
  padding-right: 0;
}

body #page {
  overflow: hidden;
}

.page-outer-wrapper {
  display: flex;
  transition: margin 1s ease-in-out;
  overflow: hidden;
  min-height: 100dvh;
}

body.openedpopup {
  height: 100dvh;
  overflow: hidden;
}


body.openedpopup .page-outer-wrapper {
  /* transform: translateX(-100%); */
  margin-left: -100%; 
  margin-right: 100%; 
}

body.openedpopup header {
  left: -500px;
}

.flex-end {
  display: flex;
  justify-content: flex-end;
}

/* Header START */ 
header {
  position: fixed;
  top: 0; 
  left: 0; 
  width: 400px; 
  height: 100dvh;
  border-right: 1px solid var(--primary-color);
  background-color: var(--grey-color);
  padding: 70px 32px 100px 32px;
  z-index: 12;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: left 1s ease-in-out;

}

header .navigation {
  padding-left: 32px; 
  padding-right: 32px;
  position: relative;
}

header #contactwrapper {
  margin-top: 140px;
}

header #contactlink {
  width: 124px; 
  height: 124px;
  background-color: var(--primary-color);
  color: #ffffff; 
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  font-size: 16px; 
  line-height: 35px; 
  font-weight: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.5s ease-in-out; 
  transform: rotate(-13deg);
  text-decoration: none;
  position: absolute;
  right: calc(-62px); 
  top: 25%;
  z-index: 11;
}

header #contactlink .big {
  text-transform: uppercase;
  font-weight: 900;
  font-size: 20px; 
  line-height: 1;
  margin-bottom: -2px;
}

header #contactlink:hover {
  transform: rotate(0deg);
  text-decoration: none;
}

body.admin-bar header {
  top: 32px;
  height: calc(100dvh - 32px);
}

header .primary-navigation ul {
  list-style: none;
  padding: 0; 
  margin: 0;
}

header .primary-navigation ul a {
  text-decoration: none;
  text-transform: uppercase;
  color: var(--text-color); 
  font-size: 19px; 
  line-height: 29px;
  letter-spacing: 0.95px;
  display: inline-block;
  margin-bottom: 24px;
}

header #primary-menu-list-bottom > li > a:hover,
header .primary-navigation > div > ul > li.current-menu-item.menu-item-object-page > a,
header .primary-navigation > div > ul > li:hover > a,
header .primary-navigation > div > ul > li > a:hover {
  color: var(--primary-color);
}


#primary-menu-list > li {
  position: relative;
}


header .primary-navigation ul.sub-menu  {
  position: absolute;
  left: 100%;
  max-height: 0px; 
  top: 0;
  overflow: hidden;
  background-color: #ffffff;
  border-bottom-right-radius: 22px;
  border-bottom-left-radius: 22px;
  border-top-right-radius: 22px;
  /* transition: all 0.5s ease-in-out; */
  z-index: 12;
}

header .primary-navigation li:hover ul.sub-menu,
header .primary-navigation ul.sub-menu:hover,
header .primary-navigation a:hover + ul.sub-menu {
  max-height: 5000px;
}

header .primary-navigation ul.sub-menu li {
  display: flex;
}

header .primary-navigation ul.sub-menu > li > a {
  width: 100%;
  font-size: 17px; 
  line-height: 25px; 
  text-transform: none;
  /* padding: 4px 20px 1px 13px;  */
  padding: 9px 20px 0px 20px;
  margin: 0;
  border-left: 1px solid var(--primary-color);
  border-right: 1px solid var(--primary-color);
  position: relative;
  /* border-bottom: 1px solid var(--primary-color); */
}

header .primary-navigation ul.sub-menu > li:last-child > a {
  padding-bottom: 10px;
}


header .primary-navigation ul.menu-wrapper > li:not(.menu-item-has-children) > a:after,
header .primary-navigation ul.sub-menu > li > a:after {
  content: "";
  width: calc(100% - 20px);
  left: 10px;
  position: absolute;
  bottom: 8px;
  display: block;
  background-image: url(assets/images/underlined.png);
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 15px;
  z-index: -1;
  max-width: 0;
  transition: max-width 0.5s ease-in-out;
}

header .primary-navigation ul.menu-wrapper > li:not(.menu-item-has-children) > a:after {
  width: calc(100% + 10px);
  left: -10px;
  bottom: 24px;
}

header .primary-navigation ul.sub-menu li.current-menu-item > a:after,
header .primary-navigation ul.sub-menu > li > a:hover:after {
  max-width:  calc(100% - 20px);
}

header .primary-navigation ul.sub-menu li.current-menu-item > a,
header .primary-navigation ul.sub-menu a:hover {
  /* padding: 4px 13px 1px 13px;  */
  /* font-weight: 600; */
  /* border-bottom: 2px solid var(--primary-color); */

}



header .primary-navigation ul.sub-menu li:last-child a {
  border-bottom-right-radius: 22px;
  border-bottom: 1px solid var(--primary-color);
  border-bottom-left-radius: 22px;
}

header .primary-navigation ul.sub-menu li:first-child a {
  border-top-right-radius: 22px;
  border-top: 1px solid var(--primary-color);
}

header .primary-navigation ul li.menu-item-has-children > a {
  padding-right: 24px;
  background-size: 6px auto; 
  background-position: right top 8px;
  background-repeat: no-repeat;
  background-image: url(assets/images/menu-arrow-right.svg);
}

header #primary-menu-list-bottom a {
  font-size: 17px; 
  line-height: 20px; 
  color: #A2A2A2;
  margin-bottom: 5px;
  text-transform: none;
}

#contactwrapper {
  color: var(--text-color); 
  font-weight: 600; 
  text-decoration: none;
  font-size: 26px; 
  line-height: 31px;
  text-transform: uppercase;
}

#contactwrapper:hover {
  border-bottom: 2px solid var(--primary-color);
}

/* 
body:not(.home) .page-outer-wrapper .right-part-wrapper {
  width: 100%;
  padding-top: 160px; 
  padding-bottom: 50px;
}

html.with-featherlight .page-outer-wrapper .right-part-wrapper,
body.single .page-outer-wrapper .right-part-wrapper {
  width: 100%;
  padding-top: 0; 
  padding-bottom: 0;
}

html.with-featherlight .page-outer-wrapper .left-part-wrapper,
body.single .page-outer-wrapper .left-part-wrapper,
body:not(.home) .page-outer-wrapper .left-part-wrapper {
  width: auto;
}

html.with-featherlight .page-outer-wrapper .left-part-wrapper header,
body.single .page-outer-wrapper .left-part-wrapper header,
body:not(.home) .page-outer-wrapper .left-part-wrapper header {
  justify-content: flex-end;
}

html.with-featherlight .page-outer-wrapper .left-part-wrapper header:not(.active),
body.single .page-outer-wrapper .left-part-wrapper header:not(.active),
body:not(.home) .page-outer-wrapper .left-part-wrapper header:not(.active) {
  left: -500px;
  transition: left 0.5s ease-in-out;
}

html.with-featherlight .page-outer-wrapper .left-part-wrapper header.active,
body.single .page-outer-wrapper .left-part-wrapper header.active,
body:not(.home) .page-outer-wrapper .left-part-wrapper header.active {
  left: 0;
} 

html.with-featherlight .page-outer-wrapper .left-part-wrapper header a.custom-logo-link,
body.single .page-outer-wrapper .left-part-wrapper header a.custom-logo-link,
body:not(.home) .page-outer-wrapper .left-part-wrapper header a.custom-logo-link {
  position: fixed;
  left: 95px;
  top: 21px;
  max-width: 200px;
  z-index: -1;
  transition: all 0.5s ease-in-out;
}

html.with-featherlight .bg-secondary header .custom-logo-link img, 
html.with-featherlight .bg-primary header .custom-logo-link img, 
body.single header .bg-secondary .custom-logo-link img,
body.single header .bg-primary .custom-logo-link img,
body:not(.home) header .bg-secondary .custom-logo-link img
body:not(.home) header .bg-primary .custom-logo-link img {
  filter: brightness(0) invert(1);
  transition: filter 0.5s ease-in-out;
}

html.with-featherlight header.active .custom-logo-link img,
body.single header.active .custom-logo-link img,
body:not(.home) header.active .custom-logo-link img {
  filter: unset;
}

html.with-featherlight  .show-mobile.header-wrapper,
body.single .show-mobile.header-wrapper,
body:not(.home) .show-mobile.header-wrapper {
  display: block;
  position: fixed;
  top: 70px;
  left: 32px;
  z-index: 13;
} */

#sitewrapper {
  position: fixed;
  right: 0; 
  bottom: 130px; 
  display: flex;
  flex-direction: column;
  width: 50px;
  z-index: 15;
}

#sitewrapper .image-wrapper {
  width: 50px; 
  height: 50px; 
  margin-bottom: 2px; 
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primary-color);
}

#sitewrapper .doctolib .image-wrapper{
  padding: 0;
}

#sitewrapper .sidelink {
  position: relative;
}

#sitewrapper .moreinfo {
  position: absolute;
  background-color: var(--primary-color);
  width: auto;
  white-space: nowrap;
  right: 0;
  height: 50px;
  color: #ffffff;
  padding: 6px 15px 0 25px;
  display: flex;
  align-items: center;
  top: 0;
  right: 70%;
  opacity: 0;
  visibility: hidden;
  transition: right .3s, opacity .3s;
}

#sitewrapper a:hover .moreinfo,
#sitewrapper .sidelink:hover .moreinfo {
  right: 50px;
  opacity: 1;
  visibility: visible;
  cursor: pointer;
}


label.hamburg {
  display: block;
  background: transparent;
  width: 24px;
  height: 13px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  border-radius: 4px;
  /* cursor: url('assets/images/customcursor-active.svg'), pointer; */
}

.line {
  position: absolute;
  left:0;
  height: 2px;
  width: 24px;
  /* background: var(--text-color); */
  display: block;
  transition: 0.5s;
  transform-origin: center;
  backdrop-filter:  invert(1) sepia(1) hue-rotate(300deg);
  /* background-color: rgba(22, 190, 223, 0.75);*/
  fill: rgba(255, 0, 0, 0.75);
  pointer-events: none;
  z-index: 9999;
  print-color-adjust: exact;
}

.bg-secondary .line,
.bg-primary .line {
  background: #ffffff;

}


.line:nth-child(1) { top: 0px; }
.line:nth-child(2) { top: 6px; }
.line:nth-child(3) { top: 12px; }

#hamburg:checked + .hamburg .line:nth-child(1){
  transform: translateY(15px) translateX(-3px) rotate(45deg);
}

#hamburg:checked + .hamburg .line:nth-child(3){
  transform: translateY(-15px) translateX(-3px) rotate(-45deg);
}

#hamburg:checked + .hamburg .line {
  background: var(--text-color);
}

.invert-lupe {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  /* backdrop-filter: invert(1); */
  backdrop-filter:  invert(1) sepia(1) hue-rotate(300deg);
  /* background-color: rgba(22, 190, 223, 0.75);*/
  fill: rgba(255, 0, 0, 0.75);
  pointer-events: none;
  z-index: 9999;
  print-color-adjust: exact;
}

.invert-lupe:not(.active) {
  opacity: 0;
}

.invert-lupe.active {
  opacity: 1;
}



/* Header END */

/* HomeIntro START */
#homeintro {
  position: fixed;
  height: 100dvh; 
  width: 100dvw; 
  left: 0; 
  top: 0; 
  z-index: 100;
  padding: 100px;
  display: none;
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

#homeintro .logo-wrapper {
  position: absolute;
  height: 100dvh; 
  width: 100dvw; 
  left: 0; 
  top: 0; 
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.5s ease-in-out;
  z-index: 1;
  animation-fill-mode: forwards;
}

#homeintro .logo-wrapper img {
  width: 100%;
}

#homeintro .textrow-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height:100%;
}

#homeintro .textrow {
  font-size: 200px; 
  line-height: 233px; 
  color: #ffffff; 
  font-family: "Bebas", sans-serif;
  opacity: 0;
  transition: all 0.5s ease-in-out;
  animation-fill-mode: forwards;
}
/* HomeIntro END */

/* Headerbanner START */
.headerbanner {
  background-size: auto 50%; 
  background-repeat: no-repeat;
  background-position: center center;
  height: 100dvh;
  padding: 80px 108px; 
  display: flex;
  align-items: center;
}

.headerbanner .container {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.headerbanner .more-text {
  position: absolute;
  right: 0; 
  bottom: 0;
  font-size: 18px; 
  line-height: 1;
  display: flex;
  align-items: flex-end;
}

.headerbanner .more-text:before {
  content: ""; 
  width: 12px; 
  height: 24px; 
  display: block;
  margin-right: 11px;
  background-image: url(assets/images/und-zeichen-hutter-und-helden.svg); 
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

.headerbanner h2,
.headerbanner h1 {
  /* text-shadow: 0 1px 3px rgba(0,0,0,0.16); */
  color: var(--primary-color);
  margin-bottom: 0;
  padding-left: 0; 
  padding-right: 0;
  display: inline;
}

.headerbanner a {
  text-decoration: none;
  color: #ffffff;
}

.headerbanner a:hover,
.headerbanner h2:hover,
.headerbanner h1:hover {
  color: var(--secondary-color);
}
/* Headerbanner END */

/* Headertext START */
.headertextbanner {
  padding-top: 225px;
  padding-bottom: 175px;
  background-image: url(assets/images/bg-icon-blue.svg); 
  background-position:  top 140px right 0;
  background-repeat: no-repeat;
  background-size: 262px auto;
}


.headertextbanner h1 > strong, 
.headertextbanner h1 > b,
.headertextbanner h1 {
  font-size: 150px; 
  line-height: 1; 
  font-weight: 400;
}

.headertextbanner h1 > strong, 
.headertextbanner h1 > b {
  display: inline-block;
  padding-left: 28px; 
  padding-right: 28px; 
  margin-left: -28px; 
  margin-right: -28px;
  position: relative;
  z-index: 1;
}

.headertextbanner h1 > strong:after, 
.headertextbanner h1 > b:after {
  content: ""; 
  width: 100%;
  height: 65px; 
  display: block;
  position: absolute;
  left: 0; 
  bottom: 0; 
  background-image: url(assets/images/underlined.png); 
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: -1;
}

.headertextbanner h1 {
  padding-left: 60px;
  margin-bottom: 90px;
}

#typedtext,
.typingtext {
  font-size: 50px;
  line-height: 70px; 
  font-weight: 600;
  /* color:#E5E5E5; */
  color: rgba(0,0,0,0.5);
}

.descriptiontext {
  margin-top: 65px;
}


/* Headertext END */

/* Headerbanner Sub START */
.headerbannersub .image-wrapper {
  height: 533px;
  background-size: cover; 
  background-position: center center;
  margin-left: -80px; 
  margin-right: -80px;
} 

.headerbannersub .like-h1,
.headerbannersub h1 {
  font-size: 350px; 
  line-height: 420px;
  margin-top: -70px;
}

.headerbannersub .image-wrapper + .container .like-h1,
.headerbannersub .image-wrapper + .container h1 {
  margin-top: -180px;
}

.headerbannersub .like-h2,
.headerbannersub h2 {
  font-size: 250px; 
  line-height: 230px;
  margin-top: -15px;
}

.headerbannersub .image-wrapper + .container .like-h2,
.headerbannersub .image-wrapper + .container h2 {
  margin-top: -295px;
}

.headerbannersub .like-h3,
.headerbannersub h3 {
  font-size: 120px; 
  line-height: 100px;
}

.headerbannersub .image-wrapper + .container .like-h3,
.headerbannersub .image-wrapper + .container h3 {
  margin-top: -75px ;
}

/* Headerbanner Sub END */

/* Listing START */
.listing .list-wrapper {
  padding: 11px 0 6px 0;
  border-bottom: 1px solid var(--primary-color);
}

.listing .list-row {
  margin-bottom: 10px;
}

.listing.withenumeration .list-wrapper {
  border: 0; 
  background-color: #EBEBEB; 
  border-radius: 34px;
  padding: 25px 80px 15px 80px;
  position: relative;
    margin-bottom: 47px;
}

.listing.withenumeration .list-wrapper .number {
  font-family: "Bebas", sans-serif;
  font-size: 80px; 
  line-height: 1;
  position: absolute;
  left: 17px;
  top: -28px;
}
/* Listing END */

/* Großes Bild START */
.bigimage {
  height: 425px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.bigimage img {
  object-fit: cover;
  min-height: 100%;
}
/* Großes Bild END */

/* teaserboxes START */

.wp-block-video {
  z-index: 1;
  position: relative;
} 

.teaserboxes {
  z-index: 0;
}

.teaserboxes.hasvideo {
  margin-top: -170px;
  padding-top: 240px;
}

.teaserboxes .container {
  padding-top: 100px;
  padding-bottom: 70px;
}

.teaserboxes.hasvideo .container {
  border-top: 1px solid #ffffff; 
}

.teaserboxes.bg-secondary .thetitle.with-after-line:after {
  background-color: #ffffff;
}

.intro-text {
  margin-bottom: 50px;
}

.intro-text > a {
  color: var(--text-color);
}

.intro-text > a:hover {
  color: var(--primary-color);
}

.bg-secondary .intro-text {
  font-weight: 700; 
}

.teaserbox-row {
  align-items: center;
  margin-bottom: 65px;
}

.teaserbox-row .image-outer-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
}

.teaserbox-row.text-left .image-outer-wrapper {
  align-items: flex-end;
}

.teaserbox-row .image-outer-wrapper:before {
  content: ""; 
  width: 150%; 
  height: 1px; 
  background-color: #ffffff; 
  position: absolute;
  display: block;
  left: 45px; 
  top: calc(50% - 0.5px);
  z-index: 0;
}

.teaserbox-row.text-right .image-outer-wrapper:before {
  left: unset; 
  right: 45px;
}

.teaserbox-row .image-outer-wrapper .image-wrapper {
  aspect-ratio: 1 / 1;
  display: block;
  border-radius: 50%;
  overflow: hidden;
  width: calc(100% - 125px);
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover; 
  background-position: center center;
  z-index: 1;
  position: relative;
}

.teaserbox-row a {
  color: #ffffff;
  border-color: #ffffff;
}

.teaserbox-row  .button {
  margin-bottom: 0;
  padding: 5px 45px 1px 45px;
}

.bg-wrapper {
  position: absolute;
  left: 0; 
  top: 0; 
  width: 100%; 
  height: 100%;
  background-size: cover;
  background-position: center center;
  transition: all 0.5s ease-in-out;
}

.teaserboxes .image-outer-wrapper .imagetitle,
.teaserbox-row .imagetitle {
  z-index: 1;
  transition: all 0.5s ease-in-out;
  color: #ffffff; 
  text-decoration: none;
  text-align: center;
}

.teaserbox-row .imagetitle.like-h3 {
  font-size: 100px; 
  line-height: 90px;
  margin-bottom: 0;
}
.teaserboxes .image-outer-wrapper .bg-wrapper.hover,
.teaserboxes .image-outer-wrapper:hover .bg-wrapper.hover + .imagetitle,
.teaserbox-row:hover .imagetitle,
.bg-wrapper.hover {
  opacity: 0;
}

.teaserboxes .teaserbox-outer:hover .bg-wrapper.hover,
.teaserboxes .image-outer-wrapper:hover .bg-wrapper.hover,
.teaserbox-row:hover .bg-wrapper.hover {
  opacity: 1;
}

.teaserbox-outer h3.center-text, 
.teaserbox-outer h2.center-text,
.teaserbox-outer h1.center-text {
  width: 100%;
}

.teaserboxes .detail-infos .container {
  border-top: 0; 
  padding: 160px 32px 50px 32px; 
}

body .teaserboxes .specialarrow.showall {
  top: unset; 
  bottom: 30px;
  position: absolute;
}

.teaserboxes .specialarrow.showall .text {
  max-width: 2000px;
  margin-top: 5px;
  font-weight: 700;
}

.teaserboxes .specialarrow.showall .arrow {
  background-image: url(assets/images/arrow-special-right-black.svg);
}

.teaserboxes .specialarrow.showall:hover .arrow {
  background-image: url(assets/images/arrow-special-right-hover.svg);
}

section.buttonwrapper .specialarrow.showall {
  justify-content: flex-end;
}

section.buttonwrapper .specialarrow.showall .text {
  max-width: unset;
  padding-top:5px; 
  padding-right: 5px;
}

.detail-infos {
  position: fixed;
  width: 100%; 
  height:100dvh;
  z-index: 11;
  top: 0; 
  right: -100%; 
  transition: right 1s ease-in-out;
  background-image: url(assets/images/logo-hutter-und-helden-white.svg); 
  background-repeat: no-repeat;
  background-position: top 65px left 65px;
  background-size: 185px auto;
  overflow: scroll;
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none;  /* Firefox */
}

.detail-infos::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

.detail-infos.bg-grey,
.detail-infos.bg-white {
  background-image: url(assets/images/logo-hutter-und-helden.svg); 
}


.content-wrapper > .wp-block-columns, 
.detail-infos .row {
  margin-left: -30px; 
  margin-right: -30px;
}

.content-wrapper > .wp-block-columns > .wp-block-column,
.detail-infos .row > .col-sm {
  padding-left: 30px; 
  padding-right: 30px;
}

.detail-infos .specialarrow {
  position: relative;
  top: 0;
  float: left;
}

.detail-infos.open {
  right: 0;
}

body .featherlight .featherlight-content .featherlight-close,
.backbutton {
  position: fixed;
  top: 130px;
  left: 35px;
  width: 43px; 
  height: 48px;
  display: block;
  overflow: hidden;
  /* cursor: url('assets/images/customcursor-active.svg'), pointer; */
  background-color: transparent;
  background-image: url(assets/images/backbutton.svg); 
  background-size: auto 100%; 
  background-position: left center;
  background-repeat: no-repeat;
  transition: all 0.5s ease-in-out; 
}

body .featherlight .featherlight-content .featherlight-close:hover,
.backbutton:hover {
  width: 65px;
}

body .featherlight .featherlight-content .bg-secondary .featherlight-close,
.bg-secondary .backbutton {
  background-image: url(assets/images/backbutton-white.svg); 
}

.detail-infos .like-h2, 
.detail-infos h2 {
  padding: 0;
}

.detail-infos.open .backbutton {
  position: fixed;
}

.wp-block-lazyblock-teaser-element-3.nopaddingbottom .container {
  padding-bottom: 0; 
}

.wp-block-lazyblock-teaser-element-3.nopaddingbottom  + .projekte-outer-wrapper {
  padding-top: 0;
}

/* teaserboxes END */

/* Teaserboxes 4 cols START */
.teaserboxes.cols4 .row {
  margin-left: -21px; 
  margin-right: -21px;
}

.teaserboxes.cols4 .row .col-sm {
  padding-left: 21px; 
  padding-right: 21px;
}

.teaserboxes .text-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.teaserboxes.roundimage .text-wrapper {
  justify-content: center;
  align-items: center;
  text-align: center;
}

.teaserboxes.cols4 .container {
  padding-top: 40px;
}

.teaserboxes.cols4  .intro-text {
  margin-bottom: 80px;
}

.with-after-line {
  position: relative;
  margin-bottom: 72px; 
}

.with-after-line:after {
  content: ""; 
  display: block;
  height: 1px; 
  background-color: var(--primary-color);
  width: 500%; 
  position: absolute;
  left: -200%; 
  bottom: 5px;
}

.wp-block-separator {
  margin: 0;
  opacity: 1;
  border: 0; 
  background-color: var(--primary-color);
  width: 500%; 
  margin-left: -200%;
  height: 1px;
}

.teaserboxes .image-wrapper {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  margin-bottom: 32px;
}

.teaserboxes.roundimage .image-wrapper {
  border-radius: 50%;
  overflow: hidden;
}

.teaserboxes.iconimages .image-wrapper {
  max-width: 50%;
  margin-left: auto; 
  margin-right: auto;
}

.teaserboxes .button {
  margin-bottom: 20px; 
  margin-top: 35px;
}

.teaserbox-outer {
  margin-bottom: 60px;
}

.teaserboxes .imagetitle {
  z-index: 1;
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}

@media screen and (max-width: 1800px) {
  .teaserboxes.cols4 .col-xl-4.col-xxl-3 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
}

@media screen and (max-width: 990px) {
  .teaserboxes.cols4 .col-xl-4.col-xxl-3 {
    flex: 0 0 auto;
    width: 50%;
  }
}

@media screen and (max-width: 600px) {
  .teaserboxes.cols4 .col-xl-4.col-xxl-3 {
    width: 100%;
  }
}
/* Teaserboxes 4 cols END */


/* teamwrapper START */
.teamwrapper .button.secondary {
  margin-left: 65px;
}

.teamwrapper.mobile {
  display: none;
}



.teamwrapper {
  position: relative;
  padding-top: 30px;
  z-index: 12;
  /* padding-bottom: 165px; */
}

.teamwrapper:before {
  content: "";
  background-color: var(--grey-color);
  width: 200%; 
  height: 100%; 
  display: block;
  position: absolute;
  left: -50%; 
  top: 0;
  z-index: -1;
  border-top: 1px solid var(--primary-color);
}  

.teamwrapper .teamimage {
  margin-left: -80px; 
  margin-right: -80px; 
  padding-left: 32px; 
  padding-right: 32px; 
  padding-top: 32px;
  border-top: 1px solid var(--primary-color);
  position: relative;
  padding-bottom: 0px;
}

.teamwrapper .teamimage:before {
  content: "";
  width: 1px;
  /* height: 200%; */
  height: calc(100% + 215px);
  display: block;
  background-color: var(--primary-color);
  position: absolute;
  left: -1px;
  bottom: -1px;
}

.teamwrapper .leftsideteam {
  border-top: 1px solid var(--primary-color);
  position: absolute;
  display: block;
  width: 400px; 
  left: -481px; 
  top: 0px;
  height: auto;
  pointer-events: none;
  background-color: #ffffff;
  /* border: 1px solid red; */
  /* background-color: var(--grey-color); */
  /* border-right: 1px solid var(--primary-color);*/
} 

.teamwrapper  .teammember {
  padding: 0 40px 22px 40px;
  border-bottom: 1px solid var(--primary-color);
  position: relative;
  z-index: 10;
  background-color: var(--grey-color);
  pointer-events: all;
}

.teamwrapper  .teammember .image-wrapper {
  /* aspect-ratio: 352 / 387; */
  aspect-ratio:  1 / 1;
  display: block;
  background-size: cover;
  background-position: center center;
  width: calc(100% + 40px + 40px); 
  margin-left: -40px;
  margin-right: -40px;
  margin-bottom: 28px;
}

.teamwrapper .teammember .image-wrapper.hover {
  position: absolute;
  top: 0px; 
  opacity: 0;
  margin-left: 0; 
  margin-right: 0; 
  width: 100%;
  left: 0;
  transition: all 0.5s ease-in-out;
}

.teamwrapper .teammember:hover .image-wrapper.hover {
  opacity: 1;
}


.teamwrapper  .teammember h3 {
  font-size: 30px; 
  line-height: 36px; 
  text-transform: unset;
  font-weight: 700;
  margin-bottom: 0;
}

.teamwrapper .teammember .position {
  font-size: 20px; 
  line-height: 26px;
  font-weight: 500; 
}

.teammember.lastchild {
  padding: 0; 
  border-bottom: 0 !important;
  min-height: 125px;
}


.teamwrapper .leftsideteam  .teammember:first-child {
  padding-top: 0;
}

.teamwrapper .leftsideteam  .teammember:first-child .image-wrapper {
  top: 0;
}

/* teamwrapper END */

/* Customer Row START */
.customer-row {
  column-count: 6; 
  column-gap: 115px;
  padding: 145px 80px 10px 80px;
  border-top: 1px solid var(--primary-color);
  /* border-bottom: 1px solid var(--primary-color); */
  position: relative;
  display: flex;
  margin-left: -80px; 
  margin-right: -80px;
  flex-wrap: wrap;
}


.customer-row .customer-image {
  aspect-ratio: 140 / 55;
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  margin-bottom: 100px;
  width: 10%;
  /* cursor: url('assets/images/customcursor-active.svg'), pointer; */

}

.customer-row .customer-image > img {
  display: none;
}

.customer-row div.customer-image,
.customer-row a.customer-image:not(:hover) {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
  opacity: 0.42;
}

.specialarrow.showall.projects {
  top: unset; 
  position: relative;
}


#dasmachenwir {
  margin-bottom: 0;
}


/* Text Page START */
.entry-content.text-page {
  /* font-size: 18px; 
  line-height: 22px; */
  padding-top: 100px;
  padding-bottom: 100px;
  /* background-image: url(assets/images/hutter-und-helden-undzeichen.svg);
  background-repeat: no-repeat;
  background-size: auto 84dvh;
  background-position: right 32px top 100px; */
}
/* Text Page END */

/* News START */
.news-wrapper h2, 
.news-wrapper .like-h2{
  font-size: 100px; 
  line-height: 116px;
}

.news-wrapper {
  margin-bottom: 30px; 
  padding-bottom: 30px;
  border-bottom: 1px solid var(--primary-color);
}
/* News END */

/* Projects START */
.projekte-outer-wrapper {
  padding-top: 50px; 
  padding-bottom: 50px;
  background-image: none !important;
}

.project-image-wrapper {
  display: block;
  height: 450px; 
  width: 100%; 
  background-size: cover; 
  background-position: center center;
  margin-bottom: 10px; 
}
.project-wrapper h2 {
  font-size: 50px; 
  line-height: 80px;
  padding-left: 0; 
  padding-right: 0;
}

.project-wrapper:hover h2 {
  color: var(--primary-color);
}

.project-wrapper:hover, 
.project-wrapper:visited, 
.project-wrapper:active,
.project-wrapper {
  position: relative;
  color: var(--text-color);
  text-decoration: none;
}

/* .project-wrapper:before {
  content: ""; 
  width: 100%; 
  height: 1px; 
  display: block;
  background-color: var(--primary-color); 
  position: absolute;
  left: 0;
  bottom: 0;
}

.project-wrapper:nth-child(odd):before {
  width: calc(100% + 32px); 
} */

.projekte-outer-wrapper .col-sm {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}


.projekte-outer-wrapper .col-sm > .project-wrapper:nth-child(4n),
.projekte-outer-wrapper .col-sm > .project-wrapper:nth-child(4n + 1) {
  max-width: calc(60% - 16px);
  width: calc(60% - 16px);
}
.projekte-outer-wrapper .col-sm > .project-wrapper:nth-child(4n + 3),
.projekte-outer-wrapper .col-sm > .project-wrapper:nth-child(4n + 2) {
  max-width: calc(40% - 16px);
  width: calc(40% - 16px);
}

.project-wrapper:hover h2 {
  color: var(--primary-color);
}
/* Projects END */

/* Project Details START */
.projekte-detail-wrapper  {
  background-image:none;
  padding-bottom: 30px;
}

.featherlight .pagename-customer + footer#colophon,
body.single-customer footer#colophon {
  padding-top: 30px; 
  border-top: 0px;
}

.projekte-detail-wrapper .backbutton{
  top: unset; 
  margin-top: 45px;
  z-index: 11;
}

.projekte-detail-wrapper .header-project-details {
  display: block;
  aspect-ratio: 1943 / 802;
  background-size: cover; 
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  margin-left: -80px; 
  margin-right: -80px;
}

.projekte-detail-wrapper h1,
.projekte-detail-wrapper h2 {
  font-size: 273px; 
  line-height: 318px;
  margin-top: -180px;
}

.projekte-detail-wrapper .project-wrapper {
  padding-bottom: 80px;
}



.projekte-detail-wrapper .project-wrapper:before {
  display: none;
}

.projekte-detail-wrapper .project-detail-row {
  color: #ffffff;
  position: relative;
  align-items: flex-start !important;
  padding: 15px 0;
}

.projekte-detail-wrapper .project-detail-row:before {
  content: ""; 
  width: calc(100% - 12px - 12px); 
  position: absolute;
  left: 12px; 
  bottom: 0; 
  display: block;
  height: 1px;
  background-color: #ffffff;
}

.projekte-detail-wrapper .project-detail-row h3 {
  margin-bottom: 0;
  text-transform: uppercase;
  font-size: 23px; 
  line-height: 27px; 
  font-weight: 700;
  font-family: 'Overpass', sans-serif; 
  letter-spacing:2.3px;
  font-family: 
}

.projekte-detail-wrapper img {
  width: 100%;
}

.projekte-detail-wrapper .col-sm.col-sm-12 {
  position: relative;
}

.projekte-detail-wrapper .button.external {
  /* position: absolute;
  right: 80px;
  bottom: -50px; */
  z-index: 14;
  color: #ffffff; 
  border-color: #ffffff;
}

.button-wrapper {
  display: flex;
  align-items: center;
}

.projekte-detail-wrapper .backbutton {
  margin-right: 30px;
  position: relative;
  top: unset;
  bottom: unset;
  margin-top: 0;
  left: unset;
}

.projekte-detail-wrapper .project-detail-row .label {
  font-family: "Bebas", sans-serif;
  font-size: 35px; 
  line-height: 41px; 
  color: #ffffff;
}

.projekte-detail-wrapper .project-detail-row:last-child:before {
  display: none;
}

.projekte-detail-wrapper:after {
  content: ""; 
  width: 300%; 
  height: 1px; 
  background-color: #ffffff;
  display: block;
  position: absolute;
  left: -100%; 
  bottom: 0;
}

.cat-wrapper {
  display: flex;
  gap: 45px;
}

.cat-wrapper .cat {
  display: flex;
  align-items: center;
  justify-self: center;
  position: relative;
  padding-bottom: 40px;
}

.cat-wrapper .cat .icon {
  transition: opacity 0.5s ease-in-out;
  width: 50px; 
  aspect-ratio: 1 / 1;
}

.cat-wrapper .cat img {
  width: 100%;
}

.cat-wrapper .cat .title {
  position: absolute;
  font-size: 18px; 
  line-height: 1;
  white-space: nowrap;
  text-transform: none;
  /* transform: translate(-25%, 0); */
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  bottom: 0;
  font-weight: 400;
}

.cat-wrapper .cat:hover .title {
  opacity: 1;
}

/* .cat-wrapper .cat:hover .icon {
  opacity: 0.1;
} */
/* Project Details END */

/* Scrollwebsite START */ 
.scrollwebsite .website-wrapper {
  aspect-ratio: 1425 / 896;
  display: block;
  margin: 60px 0px 20px 0px;
  position: relative;
  overflow: scroll;
  z-index: 1;
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none;  /* Firefox */
}

.scrollwebsite .website-wrapper img {
  width: 100%; 
}

.scrollwebsite .col-sm {
  position: relative;
}

.scrollwebsite .website-border {
  width: 100%; 
  height: 100%; 
  display: block;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: top center;
  background-image: url(assets/images/website-border.png); 
  z-index: 0;
  position: absolute;
  top: 0; 
  left: 0; 
}
/* SCrollwebsite END */

/* Contact Form START */
#contact-outer-wrapper {
  position: fixed;
  bottom: 50px; 
  left: 450px;
  border: 2px solid var(--primary-color);
  border-radius: 13px;
  background-color: #ffffff;
  width: 767px; 
  max-width: 100%;
  font-size: 18px; 
  line-height: 28px;
  z-index: 100;
  display: none;
}

#contact-outer-wrapper.active {
  display: block;
}

#contact-outer-wrapper h2 {
  padding-left: 0; 
  font-size: 45px; 
  line-height: 54px;
  margin-bottom: 10px;
  margin-top: 48px;
}

#contact-outer-wrapper form {
  display: flex;
  align-items: flex-end;
  flex-wrap:wrap;
}

#contact-outer-wrapper textarea,
#contact-outer-wrapper input {
  border: 1px solid var(--primary-color);
  margin-bottom: 15px;
  line-height: 1;
  padding: 19px 15px 5px 15px; 
  width: 400px;
  max-width: 100%;
}

#contact-outer-wrapper textarea {
  margin-bottom: 0;
}

#contact-outer-wrapper input[type="submit"] {
  font-weight: 600;
  font-family: "Bebas", sans-serif;
  font-size: 20px; 
  line-height: 24px;
  border: 1px solid var(--text-color); 
  padding: 10px 25px;
  margin-bottom: 5px;
  text-transform: uppercase;
  margin-left: 32px;
  width: auto;
  background-color: var(--grey-color);
  color: var(--text-color);
  transition: all 0.5s ease-in-out;
}

#contact-outer-wrapper input[type="submit"]:hover {
  background-color: var(--primary-color);
  color: #ffffff;
  border-radius: 13px;
}

#contact-outer-wrapper .introtext, 
#contact-outer-wrapper .left-contact {
  width: 388px;
  max-width: 100%;
}

.contact-body {
  padding: 25px 45px;
  position: relative;
}


#contact-outer-wrapper .contact-header {
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px; 
  border-bottom: 1px solid var(--primary-color);
  padding: 25px 45px 0px 45px;
}

#contact-outer-wrapper .contact-header a {
  text-decoration: none;
  color: var(--text-color);
}

.close {
  width: 25px; 
  height: 25px; 
  display: block;
  position: absolute;
  right: 45px; 
  top: 25px; 
  /* cursor: url('assets/images/customcursor-active.svg'), pointer; */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url(assets/images/icon-close.svg);
}

.close:hover {
  background-image: url(assets/images/icon-close-primary.svg);
}

.wpcf7-not-valid-tip {
  margin: -11px 0 5px 0;
}

textarea + .wpcf7-not-valid-tip {
  margin-top: 0;
}

.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
  margin: 0;
}
/* Contact Form END */

/* Text START */
.col-2 {
  columns: 2; 
  column-gap: 70px;
}

.textleft {
  font-size: 18px; 
  line-height: 29px;
}

.textleft  a {
  color: var(--text-color);
}
/* Text END */

/* News START */

.news-outer-wrapper .news-row {
  margin-left: -50px; 
  margin-right: -50px;
}

.news-outer-wrapper .news-row > .col-sm {
  padding-left: 50px; 
  padding-right: 50px;
}

.news-outer-wrapper .news-row:nth-child(even){
    flex-direction: row-reverse;
}

.news-outer-wrapper .news-row:nth-child(even) .col-lg-8 {
  padding-left: 75px;
}

.news-outer-wrapper .news-row:nth-child(odd) .col-lg-8 {
  padding-right: 75px;
}

.news-outer-wrapper .news-row {
  align-items: center;
  padding: 145px 80px 140px 80px;
  border-bottom: 1px solid var(--primary-color);
  margin-left: -130px; 
  margin-right: -130px;
}

.news-outer-wrapper .news-row:last-child {
  border-bottom: 0;
}

.news-outer-wrapper a {
  color: var(--text-color); 
  text-decoration: none;
}

.news-row .image-wrapper {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.news-row .image-wrapper img {
  /* aspect-ratio: 1 / 1; */
    object-fit: cover;
    height: 100%;
}

.news-outer-wrapper .news-row .button {
  margin-bottom: 0;
  margin-top: 11px;
}

.backbutton-wrapper .button {
  margin-top: 0;
}
/* News END */

/* FAQSs START */
details {
  border: 1px solid var(--primary-color);
}

details:first-child {
  border-top-left-radius: 13px; 
  border-top-right-radius: 13px;
}

details:last-child {
  border-bottom-left-radius: 13px; 
  border-bottom-right-radius: 13px;
}

details:not(:last-child) {
  border-bottom: 0;
}

details summary {
  padding: 28px 28px 17px 28px;
  font-weight: 700;
  list-style: none;
}

details > summary::-webkit-details-marker {
  display: none;
}

details .inner {
  padding: 0 28px 28px 28px;
}
/* FAQSs END */

/* Contactperson START */
.contactperson .row {
  align-items: center;
}
.contactperson .image-wrapper {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  width: calc(100% - 10px);
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover; 
  background-position: center center;
}


.contactperson a {
  color: var(--text-color); 
  text-decoration: none;
}
/* Contactperson eND */


/* Footer START */
footer.entry-footer {
  display: none;
}

footer .col-xl-3 p  {
  line-height: 30px;
}

footer.project-footer,
footer#colophon {
  padding: 83px 45px 0px 45px;
  position: relative;
  display: flex;
  font-size: 18px; 
  line-height: 22px; 
  z-index: 12;
}

footer ul {
  padding: 0; 
  margin: 0; 
  list-style-type: none;
}

footer a:visited,
footer a:focus, 
footer a:active,
footer a:hover,
footer a {
  color: #ffffff;
  text-decoration: none;
}

footer a:hover {
  color: #ffffff;
}



.left-part-wrapper {
  width: 400px; 
  height: 100%;
}

.right-part-wrapper {
  width: calc(100% - 400px);
}

footer figure {
  margin-bottom: 0;
}

footer .wp-block-social-links {
  margin-top: 25px;
}

.right-part-wrapper .row {
  display: flex;
}

.right-part-wrapper .col-sm > p:last-child {
  margin-bottom: 0;
}

footer .entry-content {
  position: relative;
}

footer  .wp-block-social-link.xing svg {
  visibility: hidden;
}

footer  .wp-block-social-link.xing a {
  background-image: url(assets/images/xing.svg); 
  background-repeat: no-repeat;
  background-position: center center;
  background-size: auto 20px;
}

footer .col-sm.col-xl-9 {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 28px;
}

footer .col-sm.col-xl-9 a {
  padding: 15px 25px 5px 5px;
  border-bottom: 1px solid rgba(255,255,255,0.47);
  display: block;
  width: 248px;
}

footer .col-sm.col-xl-9 .current-menu-item a,
footer .col-sm.col-xl-9 a:hover {
  font-weight: 600; 
  border-bottom: 1px solid rgba(255,255,255,1);
  padding: 15px 19px 5px 5px;
}

footer .col-sm.col-xl-9 li.buttonwrapper a {
  text-transform: uppercase;
  font-weight: 500; 
  letter-spacing: 1.8px;
  padding: 13px 13px 9px 13px; 
  text-align: center;
  border-radius: 15px;
  border: 0; 
  background-color: var(--primary-color);
  position: absolute;
  bottom: 0; 
  left: 0; 
  width: 100%;
} 

footer .col-sm.col-xl-9 li.buttonwrapper a:hover {
  background-color: #ffffff;
  color: var(--secondary-color);
}

body.touch-device header .navigation::-webkit-scrollbar,
#contact-outer-wrapper::-webkit-scrollbar {
  display: none; /* Versteckt Scrollbalken */
}

.title {
  font-size: 18px; 
  line-height: 28px; 
  font-weight: 600; 
  text-transform: uppercase;
  margin-bottom: 6px;
}

#to-the-top {
  position: absolute; 
  top: -150px; 
  z-index: 15;
  /* cursor: url('assets/images/customcursor-active.svg'), pointer; */
  right: 25px; 
  width: 34px; 
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

#to-the-top .arrow {
  display: block;
  width: 100%;
  height: 48px; 
  background-image: url(assets/images/arrow-to-the-top.svg);
  background-position: top center; 
  background-repeat: no-repeat;
  background-size: contain;
}

#to-the-top:hover .arrow {
  background-image: url(assets/images/arrow-to-the-top-hover.svg);
}

#to-the-top .text {
  writing-mode: vertical-lr;
  font-size: 24px; 
  line-height: 1;
  height: auto; 
  max-height: 0px; 
  overflow: hidden;
  transition: max-height 1s;
}

#to-the-top:hover .text {
  max-height: 5000px;
}

footer.project-footer {
  color: var(--text-color);
  border-top: 38px solid var(--primary-color);
  margin-top: 0;
}

footer.project-footer #to-the-top {
  top: -120px; 
}

#to-the-top.white .arrow {
  background-image: url(assets/images/arrow-to-the-top-white.svg);
}

#to-the-top.white:hover .arrow {
  background-image: url(assets/images/arrow-to-the-top-hover.svg);
}

.bottom-footer {
  font-size: 15px; 
  line-height: 23px;
  padding-top: 40px; 
  padding-bottom: 30px;
}

.legal-navigation ul,
.bottom-footer .col-sm {
  display: flex;
}

.bottom-footer .copyright {
  opacity: 0.5;
}

.bottom-footer a {
  display: block;
  margin-left: 27px;
}

.menu-footer-rechts-container {
  height: 100%; 
  position: relative;
  height: calc(100% - 34px);
}

/* Footer END */

.show-mobile,
input#hamburg {
  display:none
}



@media screen and (max-width: 1500px) {
  /* header .custom-logo-link svg,
  header .custom-logo-link img {
    backdrop-filter: invert(1) sepia(1) hue-rotate(300deg);
    /* background-color: rgba(22, 190, 223, 0.75); */
    /* fill: rgba(255, 0, 0, 0.75);
    pointer-events: none;
    z-index: 9999;
    print-color-adjust: exact;
    max-width: 100%; */
  /*} */
  
  .right-part-wrapper {
    width: 100%;
  }

  .left-part-wrapper {
    width: auto;
  }
/* 
  .left-part-wrapper header {
    justify-content: flex-end;
  } */

  .left-part-wrapper header:not(.active) {
    left: -500px;
    transition: left 0.5s ease-in-out;
  }

  .left-part-wrapper header.active {
    left: 0;
  } 

  .left-part-wrapper header a.custom-logo-link {
    position: fixed;
    left: calc(50% - 100px);
    top: 13px; 
    max-width: 200px;
    z-index: -1;
    transition: all 0.5s ease-in-out;
  }

  .left-part-wrapper header a.custom-logo-link.sticky {
    opacity: 0;
  }

  .left-part-wrapper header.active a.custom-logo-link.sticky,
  .left-part-wrapper header.active a.custom-logo-link {
    left: 95px;
    opacity: 1;
  }

  .show-mobile.header-wrapper {
    display: block;
    position: fixed;
    top: 30px;
    left: 30px;
    z-index: 13;
  }


  header #primary-menu-list-bottom > li > a:hover, header .primary-navigation > div > ul > li.current-menu-item > a, header .primary-navigation > div > ul > li > a:hover {
    color: #ffffff;
  }


  header {
    background-color: var(--primary-color); 
    color: #ffffff;
    padding-top: 140px;
    padding-bottom: 0;
  }

  header .primary-navigation ul a {
    color: #ffffff;
  }

  header.active #hamburg:checked + .hamburg .line {
    background: #ffffff;
  }

  header.active .custom-logo-link img {
    filter: brightness(0) invert(1);
  }

  body.touch-device header .navigation {
    max-height: 100%;
    margin-bottom: 0;
  }

  header .primary-navigation ul li.menu-item-has-children > a {
    background-image: url(assets/images/menu-arrow-right-white.svg);
  }

  header .primary-navigation ul.sub-menu > li > a {
    line-height: 17px;
    line-height: 25px; 
    padding-bottom: 5px;
  }

  header .primary-navigation ul.sub-menu {
    background-color: transparent;
    border: 0; 
    border-radius: 0;
  }

  header .primary-navigation ul.sub-menu li:first-child a {
    border: 0; 
    border-radius: 0;
  }

  header .primary-navigation ul a,
  body.touch-device header .primary-navigation ul.sub-menu {
    margin-bottom: 15px;
  }

  header #contactlink {
    display: none;
  }

  body header .primary-navigation ul.menu-wrapper > li:hover > a,
  header .primary-navigation ul.menu-wrapper > li > a:hover,
  body header .primary-navigation ul.menu-wrapper > li.current-menu-item.menu-item-object-page > a,
  header .primary-navigation ul.sub-menu li.current-menu-item.menu-item-object-page  > a, 
  header .primary-navigation ul.sub-menu > li > a:hover {
    color: var(--text-color);
  }

  /* header .primary-navigation ul.menu-wrapper > li > a:hover, */
  header .primary-navigation ul.menu-wrapper > li:not(.menu-item-has-children):not(.menu-item-21).current-menu-item > a:after,
  header .primary-navigation ul.sub-menu > li > a:after {
    background-image: url(assets/images/underlined-white.png);
  }

    header .primary-navigation ul.menu-wrapper > li:not(.menu-item-has-children):not(.menu-item-21).current-menu-item > a:hover,
  header .primary-navigation ul.menu-wrapper > li:not(.menu-item-has-children):not(.menu-item-21).current-menu-item > a:after {
    max-width:  calc(100% - 20px);
  }

  body.touch-device header .primary-navigation ul.sub-menu, 
  body header .primary-navigation ul.sub-menu {
    position: relative;
    max-height: 100%;
    left: 0;
    /* padding-bottom: 24px; */
    margin-bottom: 0 !important;
    z-index: 1;
    max-height: 0;
    overflow: hidden;
  }

  header .primary-navigation li:hover ul.sub-menu, 
  header .primary-navigation ul.sub-menu:hover, 
  header .primary-navigation a:hover + ul.sub-menu {
     max-height: 0;
  }

  header .primary-navigation li.active ul.sub-menu {
    max-height: 5000px;
    margin-top: -12px;
    margin-bottom: 15px !important;
  }

  header .primary-navigation li.active.menu-item-has-children > a {
    background-image: url(assets/images/menu-arrow-down-white.svg);
    background-size: auto 6px;
  }

  header .primary-navigation li.menu-item-has-children:not(.active) > a {
    pointer-events: none;
  } 

  body header .navigation,
  body.touch-device header .navigation {
    max-height: calc(100% - 70px);
    overflow: scroll;
    margin-bottom: -115px;
    padding-bottom: 70px;
  }

  body header .navigation::-webkit-scrollbar {
    display: none; /* Versteckt Scrollbalken */
  }


  .teamwrapper {
    padding-left: 350px;
  }

  .teamwrapper .leftsideteam {
    /* left: -32px; */
    left: -80px;
    width: 350px;
  }

  .teamwrapper .leftsideteam .teammember {
    min-height: 200px;
  }
  .news-outer-wrapper.detail-infos {
    background-image: none;
  }

  .project-image-wrapper {
    height: 300px;
  }

  footer#colophon .right-part-wrapper .row {
    flex-direction: column;
  }

  footer .col-sm.col-xl-3 {
    width: 100%; 
    margin-bottom: 32px;
  }

  footer .col-sm.col-xl-9 {
    width: 100%;
    justify-content: space-between;
  }

  footer .menuwrapper {
    width: 33.3333%;
  }

  footer .col-sm.col-xl-9 a {
    width: 100%;
  }
}


@media screen and (max-width: 1370px) {
  #homeintro .textrow,
  .like-h1,
  h1 > code,
  h1 {
    font-size: 130px;
    line-height: 151px;
  }

  .news-wrapper h2, .news-wrapper .like-h2,
  .like-h2,
  h2 {
    font-size: 80px;
    line-height: 90px;
  }

  .like-h3,
  h3 {
    font-size: 38px;
  }

  .like-h2small {
    font-size: 60px;
    margin-bottom: 15px;
  }

  .teamwrapper .teammember h3,
  .like-h4, h4 {
    font-size: 26px;
    line-height: 31px;
    margin-bottom: 10px;
  }

  .preline {
    margin-bottom: 0;
  }


  .thetitle + .preline.sub {
    margin-bottom: 16px;
    margin-top: -15px;
  }

  a.button, button, .wp-block-button__link, .button {
    font-size: 18px;
  }



  .headerbannersub .like-h1, .headerbannersub h1 {
    font-size: 240px;
    line-height: 320px;
  }

  .projekte-detail-wrapper h1, .projekte-detail-wrapper h2,
  .headerbannersub .like-h2, .headerbannersub h2 {
    font-size: 150px;
    line-height: 130px;
  }

  .headerbannersub .image-wrapper + .container .like-h1, 
  .headerbannersub .image-wrapper + .container h1 {
    margin-top: -140px;
  }

  .headerbannersub .image-wrapper + .container .like-h2, 
  .headerbannersub .image-wrapper + .container h2 {
    margin-top: -185px;
  }

    .projekte-detail-wrapper h1, .projekte-detail-wrapper h2 {
      margin-top: -55px;
    }


  #contact-outer-wrapper {
    bottom: 32px;
    left: 32px;
    width: calc(100% - 32px - 32px);
    max-height: calc(100% - 32px - 32px);
    overflow-y: scroll;
  }

  body {
    font-size: 21px;
    line-height: 32px;
  }

  .teamwrapper {
    padding-left: 250px;
  }

  footer .left-part-wrapper,
  .teamwrapper .leftsideteam {
    width: 250px;
  }

}

@media screen and (max-width: 1200px) {

  h1, 
  h2, 
  h3, 
  h4 {
    hyphens: auto;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
  }
  header {
    z-index: 13;
  }

  .headerbanner .container {
    justify-content: space-around;
  }

  .teaserbox-row .image-outer-wrapper .button {
    top: calc(50% - (60px / 2));
  }

  .intro-text {
    font-size: 21px; 
    line-height: 28px;
    margin-bottom: 32px;
  }

  .headerbanner {
    padding-left: 0; 
    padding-right: 0;
  }

  .content-wrapper > .wp-block-columns, .detail-infos .row {
    margin-left: 0;
    margin-right: 0;
  }

  .content-wrapper > .wp-block-columns > .wp-block-column, 
  .detail-infos .row > .col-sm {
    padding-left: 0; 
    padding-right: 0;
  }

  .right-part-wrapper .row.teaser-row {
    align-items: center;
    margin: 50px 0 100px 0;
  }

  .teaserbox-row .image-outer-wrapper .button {
    left: 10px;
  }

  .teaserbox-row.text-right .image-outer-wrapper .button {
    right: 10px;
  }

  .teaserbox-row .image-outer-wrapper .image-wrapper {
    width: calc(100% - 40px);
  }

  .teaserbox-row .image-outer-wrapper:before {
    left: -5px;
  }

  .teaserbox-row.text-right .image-outer-wrapper:before {
    right: -5px;
    left: unset;
  }

  .projekte-detail-wrapper .header-project-details {
    background-attachment: unset;
  }

  .with-after-line {
    margin-bottom: 32px;
  }

  /* .teaserboxes.cols4 .row {
    margin-left: -12px; 
    margin-right: -12px;
  }

  .teaserboxes.cols4 .row .col-sm {
    padding-left: 12px;
    padding-right: 12px;
  } */

  .with-after-line:after {
    bottom: -10px;
  }

  .right-part-wrapper .entry-content {
    padding-left: 40px;
    padding-right: 40px;
  }

  .news-outer-wrapper .news-row,
  .right-part-wrapper .entry-content .fullwidth {
      margin-left: -40px;
      margin-right: -40px;
  }

  .teamwrapper .leftsideteam {
    left: -40px;
  }

  .customer-row {
    column-gap: 75px;
    padding: 37px 40px 0 40px; 
    margin-left: -40px; 
    margin-right: -40px;
  }

  .news-outer-wrapper .news-row {
    padding: 50px 0px 32px 0px;
  }

  .headerbannersub .image-wrapper {
    margin-left: -40px; 
    margin-right: -40px;
  }

  #typedtext, .typingtext {
    font-size: 40px; 
    line-height: 55px;
  }

  .headertextbanner {
    padding-top: 125px;
    padding-bottom: 32px;
    background-position: top 110px right 40px;
    background-size: 200px auto;
  }

  .headertextbanner h1 > strong, .headertextbanner h1 > b, .headertextbanner h1 {
    font-size: 120px;
  }

  .headertextbanner h1 {
    margin-bottom: 60px;
    padding-left: 32px;
  }

  .teamwrapper .teammember:last-child {
    border-bottom: 0;
  }

  .teamwrapper .teamimage:before {
    height: calc(100% + 120px);
    left: 40px;
    top: -120px;
  }

  #contact-outer-wrapper h2 {
    margin-top: 0;
  }

  footer .menuwrapper {
     width: 30%;
  }
}


@media screen and (max-width: 1024px) {
  .news-wrapper h2, .news-wrapper .like-h2,
  .like-h2, h2 {
    padding: 0;
  }

  .headerbannersub .like-h1, .headerbannersub h1 {
    font-size: 200px;
    line-height: 300px;
  }

  .customer-row .customer-image {
    margin-bottom: 75px;
  }

  .teamwrapper.desktop {
    display: none;
  }

  .teamwrapper.mobile {
    display: block;
    padding-left: 0;
    padding-bottom: 32px;
  }

  button.slick-arrow {
    margin: 0; 
    position: absolute;
    right: -40px;; 
    top: calc(50% - (50px / 2));
    z-index: 10;
    font-size: 0; 
    line-height: 0; 
    height: 50px; 
    width: 50px; 
    padding: 0;
    color: transparent; 
    background-image: url(assets/images/arrow-right.svg); 
    background-size: 22px auto; 
    background-position: center center;
    background-repeat: no-repeat;
    background-color: var(--primary-color);
  }

  button.slick-arrow.slick-prev {
    right: unset; 
    left: -40px;
    background-image: url(assets/images/arrow-left.svg); 
  }


  .teamwrapper.mobile,
  .teamwrapper .teamimage {
    padding: 0;
  }

  .teamwrapper .teammember .image-wrapper.hover {
    position: absolute;
  }

  .teamwrapper .teammember {
    border-bottom: 0;
  }

  .teamwrapper.mobile .bottom-col {
    align-items: center;
    display: flex;
    flex-direction: column;
  }

  .teamwrapper .button.secondary {
    margin-left: 0;
  }

  .scrollwebsite > .container {
    padding-left: 0; 
    padding-right: 0;
  }  

  .projekte-detail-wrapper .project-detail-row:before {
    width: 100%;
    left: 0;
  }

  footer.project-footer, footer#colophon {
    align-items: flex-start;
    padding: 32px;
  }

  footer.project-footer .row > .col-sm:not(:last-child),
  footer#colophon .row > .col-sm:not(:last-child) {
    margin-bottom: 15px;
  }
}


@media screen and (max-width: 990px) {
  #homeintro .textrow, .like-h1, h1 > code, h1 {
    font-size: 110px;
    line-height: 131px;
  }

  details summary {
    padding: 23px 28px 17px 28px;
  }

  .headerbannersub .like-h1, .headerbannersub h1 {
    font-size: 180px;
    line-height: 280px;
} 

  .teaserboxes .container {
    padding-top: 32px; 
    padding-bottom: 32px;
  }
  .teaserbox-row {
    margin-bottom: 32px;
  }

  .teaserbox-row.text-left {
    flex-direction: column-reverse;
  }

  .customer-row {
    column-count: 3;
  }

  .projekte-outer-wrapper {
    padding-top: 72px;
  }

  .page-id-109 
  .projekte-outer-wrapper {
    padding-top: 110px;
  }

  .detail-infos{
    background-position: top 75px left 32px;
  }

  .headerbannersub .image-wrapper {
    height: 325px;
  }

  .cat-wrapper .cat .title {
    opacity: 1;
  }

  body .teaserboxes .specialarrow.showall {
    position: relative;
    bottom: unset;
  }

  .detail-infos.open .backbutton {
    top: 25px;
    left: 73px;
    width: 27px;
    height: 28px;
  }

  .detail-infos.open.projekte-detail-wrapper .backbutton {
    left: 32px;
    margin-top: 0; 
    top: 75px;
  }

  .projekte-detail-wrapper h2 {
    font-size: 150px;
    line-height: 1;
    margin-top: -80px;
  }

  .projekte-detail-wrapper .project-detail-row .label {
    font-size: 25px;
    line-height: 1;
  }

  .projekte-detail-wrapper .project-detail-row .wp-block-columns {
    flex-direction: column;
    gap: 0;
    margin-bottom: 0;
  }

  .projekte-detail-wrapper .project-wrapper {
    padding-bottom: 32px;
  }

  .project-image-wrapper {
    height: 270px;
  }

  .teaserbox-row .image-outer-wrapper .image-wrapper {
    width: 64%;
    margin-left: auto;
    margin-right: auto;
  }

  body.admin-bar header {
    top: 26px;
    height: calc(100dvh - 26px);
  }

  html #wpadminbar {
    height: 26px;
    overflow: hidden;
  }
 
  #wpadminbar .quicklinks .ab-empty-item, #wpadminbar .quicklinks>ul>li>a {
    height: 26px !important
  }

  .customer-row .customer-image {
    margin-bottom: 55px;
    width: 11%;
  }

  body #wpadminbar .ab-item .ab-icon:before {
    height: 26px !important; 
    font-size: 24px !important;
    top: 0!important;
  }

  .news-outer-wrapper .news-row:nth-child(even),
  .news-outer-wrapper .news-row {
    padding: 32px 0px;
    flex-direction: column-reverse;;
  }

  .news-outer-wrapper .news-row .image-wrapper {
    margin-bottom: 32px;
    max-width: 60%; 
    margin-left: auto; 
    margin-right: auto;
  }

  .col-2 {
    column-gap: 32px;
  }

  section.projectwrapper .projekte-outer-wrapper {
    padding-top:0;
  }

    body footer .col-sm.col-xl-3 {
    margin-bottom: 32px !important;
  }

  .teamwrapper.mobile  > .container > .row > .col-sm:first-child {
    order: 1;
  }

    .teamwrapper.mobile  > .container > .row > .col-sm:nth-child(2) {
    order: 3;
  }

  .teamwrapper.mobile  > .container > .row > .col-sm.bottom-col {
    order: 2;
  }

  .teamwrapper .teammember {
    padding: 20px;
  }

  .teamwrapper.mobile .container {
    padding-top: 32px;
  }

  .teamwrapper.mobile .teamimage {
    margin-bottom: 20px;
  }

   .teamwrapper.mobile .teamslider {
    padding-right: 100px;
    margin-bottom: 50px;
   }

   .teamwrapper.mobile .teamslider .slick-list {
    padding-right: 150px; 
    margin-right: -150px;
    margin-left: -40px;
    padding-left: 20px;
   }

  footer.project-footer, footer#colophon {
    flex-direction: column;
  }

  footer#colophon .right-part-wrapper .entry-content {
    padding-left: 0; 
    padding-right: 0;
  }

  footer#colophon .left-part-wrapper {
    margin-bottom: 32px;
  }

}


@media screen and (max-width: 600px) {
  .intro-text,
  body {
    font-size: 18px;
    line-height: 29px;
  }

  .headertextbanner {
    background-image: none;
  }

  .headertextbanner h1 {
    padding-left: 0; 
    margin-bottom: 20px;
  }

  .headertextbanner h1 > strong, .headertextbanner h1 > b, .headertextbanner h1 {
    font-size: 60px;
  }

  .projekte-outer-wrapper {
    padding-bottom: 0;
  }

  .headertextbanner h1 > strong, .headertextbanner h1 > b {
    padding-left: 10px;
    padding-right: 10px;
    margin-left: -10px;
    margin-right: -10px;
  }

  #typedtext, .typingtext {
    font-size: 30px;
    line-height: 42px;
  }

  .right-part-wrapper .entry-content {
    padding-left: 30px;
    padding-right: 30px;
  }

  .news-outer-wrapper .news-row,
  .right-part-wrapper .entry-content .fullwidth {
      margin-left: -30px;
      margin-right: -30px;
  }

  .bigimage {
    margin-top: -5px;
  }

  section.textblock .row {
    gap: 32px;
  }

  body.touch-device header .navigation {
    max-height: calc(100% - 0px);
    margin-bottom: -100px;
    padding-bottom: 50px;
  }


  .projekte-detail-wrapper h1, .projekte-detail-wrapper h2, .headerbannersub .like-h2, .headerbannersub h2 {
    font-size: 80px;
    line-height: 70px;
  }

  .headerbannersub.justtext {
    background-color: #ffffff;
    z-index: 100;
    position: relative;
  }

  .headerbannersub .like-h1, .headerbannersub h1 {
    font-size: 80px;
    line-height: 1;
  }

  .projekte-detail-wrapper h1, .projekte-detail-wrapper h2,
  .headerbannersub .image-wrapper + .container .like-h1, 
  .headerbannersub .image-wrapper + .container h1 {
    margin-top: -36px;
  }

  .headerbannersub .image-wrapper + .container .like-h2, .headerbannersub .image-wrapper + .container h2 {
    margin-top: -100px;
  }

  .listing {
    padding-top:  32px;
  }

  .listing.withenumeration .list-wrapper {
    padding: 25px 32px 15px 60px;
  }

  .listing.withenumeration .list-wrapper:last-child {
    margin-bottom: 0;
  }

  .like-h2small {
    font-size: 45px;
    margin-bottom: 15px;
  }

  /* .teamwrapper .leftsideteam {
    left: -30px;
  } */

  .headerbannersub .thetitle {
    margin-left: -5px;
    margin-right: -5px;
  }

  .news-outer-wrapper .news-row > .col-sm {
    padding-left: 28px; 
    padding-right: 28px;
  }

  .news-outer-wrapper .news-row {
    padding: 32px 0;
  }

  .headerbanner h1,
  .headerbanner .like-h1 {
    font-size: 85px;
    line-height: 1;
  }

  .headerbannersub .image-wrapper {
    margin-left: -40px; 
    margin-right: -30px;
  }

  .specialarrow .arrow {
    width: 23px;
    height: 28px;
    min-width: 23px;
  }

  .specialarrow .text {
    font-size: 18px;
  }
  /* body {
    font-size: 18px;
    line-height: 25px;
  } */

  .col-2 {
    columns: 1; 
    width: 100%;
    margin-bottom: 32px;
  }

  .headerbannersub.justtext .thetitle {
    margin-top: 70px;
  }

  .headerbannersub.justtext .thetitle .like-h1 {
    line-height: 0.75;
  }

  #homeintro .textrow {
    font-size: 14vw;
    line-height: 22vw;
    text-align: center;
  }

  .contactperson .image-wrapper {
    margin-bottom: 16px;
  }

  .news-wrapper h2, .news-wrapper .like-h2,
  .like-h2, h2 {
    font-size: 43px;
    line-height: 50px;
    margin-bottom: 15px;
  }

  .project-wrapper h2 {
    font-size: 32px;
    line-height: 45px;
  }

  .headerbanner {
    background-position: left 75% center;
  }

  header #contactlink {
    right: -10px;
  }

  #contact-outer-wrapper h2 {
    margin-top: 0;
  }

  .wp-block-video {
    margin-left: -32px; 
    margin-right: -32px;
  }

  .teaserboxes.hasvideo {
    margin-top: -170px;
    padding-top: 190px;
  }

  .teaserbox-row .image-outer-wrapper .image-wrapper {
    width: 100%
  }

  .teaserbox-row.text-right .image-outer-wrapper:before {
    right: -32px; 
  }

  .teaserbox-row .image-outer-wrapper:before {
    left: -32px;
  }

  .teaserbox-row .image-outer-wrapper h3 {
    width: 100%; 
    text-align: center;
  }

  .teaserbox-row.text-right .image-outer-wrapper .button {
    right: calc(50% - (256px / 2));
  }

  .teaserbox-row .image-outer-wrapper .button {
    left: calc(50% - (256px / 2));
  }

  .teaserboxes.cols4 .intro-text {
    margin-bottom: 32px;
  }
  

  button.slick-arrow {
    top: calc(50% - (30px / 2));
  }

  a.button, 
  button, 
  .wp-block-button__link, 
  .button {
    margin: 15px 0;
  }

  .teaserboxes .button {
    margin-bottom: 0;
    margin-top: 15px;
  }

  section.customerwrapper {
    position: relative;
    width: 100%;
  }

  .customer-row {
    column-count: unset;
    column-gap: unset;
    padding: 20px 75px 0 0px;
    margin-left: -30px;
    margin-right: -30px;
    max-width: calc(100% + 30px + 30px);
  }

    .customer-row .slick-list{
      padding-right: 75px; 
      margin-right: -75px;
      margin-bottom: 0;
    }

  .customer-row .customer-image > img {
    display: block;
  }

  .customer-row .customer-image {
    /* margin-bottom: 0;
    width: auto;
    margin: 16px; */
    margin: 16px;
    aspect-ratio: unset;
    display: flex;
    margin-bottom: 0;
    width: auto;
    background: transparent;
    background-image: none !important;
  }

  .slick-list {
    padding-bottom: 32px; 
    margin-bottom: 12px;
  }

  .customer-row button.slick-arrow.slick-prev{
    left: 0;
  }

  .customer-row button.slick-arrow.slick-next {
    left: unset; 
    right: 0;
  }


  .teaserbox-row .image-outer-wrapper .image-wrapper {
    width: 100%;
  }

  .teamwrapper.mobile {
    padding-top: 32px;
  }

  .teaserboxes .container {
    padding-bottom: 0;
  }

  .teaserboxes .image-wrapper {
    margin-bottom: 16px;
  }

  .teaserbox-outer {
    /* margin-bottom: 32px; */
    margin-bottom: 60px;
  }

  button.slick-arrow {
    height: 30px;
    width: 30px;
    background-size: 12px auto;
    right: -30px;
  }

  button.slick-arrow.slick-prev {
    left: -30px; 
    right: unset;
  }

  .teamwrapper .teammember {
    padding: 0;
    margin: 5px;
  }

  .teamwrapper .teammember .image-wrapper {
    width: 100%;
    margin-left: 0; 
    margin-right: 0;
    margin-bottom: 32px;
  }

  .teamwrapper .teammember h3 {
    font-size: 18px;
    line-height: 21px;
  }

  .teamwrapper .teammember .position {
    font-size: 18px;
    line-height: 28px;
  }

  footer.project-footer, footer#colophon {
    flex-direction: column;;
  }

  .left-part-wrapper {
    margin-bottom: 32px;
  }

  .right-part-wrapper > .container {
    padding-left: 0; 
    padding-right: 0;
  }

  .projekte-detail-wrapper h2 {
    font-size: 14vw;
    line-height: 1;
    margin-top: -30px;
  }

  .projekte-detail-wrapper .header-project-details {
    aspect-ratio: 1943 / 1292;
  }

  .projekte-detail-wrapper .project-detail-row .label {
    margin-bottom: 12px;
  }

  .projekte-outer-wrapper .col-sm {
    gap: 10px;
  }

  .news-outer-wrapper .news-row .image-wrapper {
    max-width: 100%;
  }

  .specialarrow.projects {
    margin-top: 22px;
  }

  .cat-wrapper {
    gap: 0; 
    flex-wrap: wrap;
    margin-top: 22px;
  }

  .cat-wrapper .cat {
    width: 50%; 
    justify-content: center;
    margin-bottom: 22px;
  }

  .projekte-detail-wrapper .button.external {
    right: 0;
  }

  .projekte-outer-wrapper .col-sm > .project-wrapper:nth-child(4n),
  .projekte-outer-wrapper .col-sm > .project-wrapper:nth-child(4n + 1), 
  .projekte-outer-wrapper .col-sm > .project-wrapper:nth-child(4n + 3), .projekte-outer-wrapper .col-sm > .project-wrapper:nth-child(4n + 2) {
    width: 100%; 
    max-width: 100%;
  }

  .project-wrapper:nth-child(odd):before {
    width: 100%;
  }

  .project-image-wrapper {
    height: auto;
    aspect-ratio: 3 / 2;
  }

  header #newslink {
    right: 0;
    top: -124px;
  }

  header {
    max-width: 100%;
  }

  header .navigation {
    padding-left: 0; 
    padding-right: 0;
  }

  .left-part-wrapper header a.custom-logo-link {
    left: calc(50% - 75px);
    top: 0;
    max-width: 150px;
  }

  .detail-infos {
    background-image: none !important;
  }

  #contact-outer-wrapper {
    max-height: calc(100dvh - 32px - 32px); 
    overflow: scroll;
  }

  #contact-outer-wrapper .contact-header,
  .contact-body {
    padding: 15px;
  }

  .contact-header {
    flex-direction: column;
  }

  #contact-outer-wrapper textarea, #contact-outer-wrapper input {
    width: 100%;
    padding: 7px 15px 7px 15px;
  }

  #contact-outer-wrapper input[type="submit"] {
    margin-left: 0; 
    margin-bottom: 0;
  }

  #contact-outer-wrapper .close {
    right: 15px;
    top: 15px;
  }

  #contact-outer-wrapper form > p {
    margin-bottom: 0;
  }

  #sitewrapper {
    width: 30px;
    bottom: 30px;
  }

  #sitewrapper .image-wrapper {
    width: 30px; 
    height: 30px;
  }

  #sitewrapper .moreinfo {
    height: 30px;
    padding: 3px 8px 0 12px;
    font-size: 15px;
  }

  #sitewrapper a:hover .moreinfo,
  #sitewrapper .sidelink:hover .moreinfo {
    right: 30px;
  }

  .bigimage {
    height: 225px;
    margin-bottom: 32px;
  }

  .listing.withenumeration .list-wrapper .number {
     font-size: 60px;
    top: -25px;
  }

  footer#colophon .right-part-wrapper .row {
    gap: 15px;
  }

  footer .col-sm.col-xl-9 {
    gap: 47px;
  }

  footer#colophon {
    padding-bottom: 0;
  }

  footer .col-sm.col-xl-9 li.buttonwrapper a {
    position: relative;
    margin-top: 32px;
  }

  footer .menuwrapper {
    width: 100%;
  } 

  footer .col-sm.col-xl-9,
  .legal-navigation ul{
    flex-direction: column;
  }

  .bottom-footer .col-sm {
  flex-direction: column-reverse;
  }

  .bottom-footer .copyright,
  .bottom-footer a {
    margin-left: 0; 
  }
}


@media screen and (min-width: 1860px) {
  .headertextbanner {
    background-position: top 140px left 950px;
  }
}