@font-face {
font-family: "SegoeUI";
src:
url(//www.agentur-dreipunkt.de/wp-content/uploads/fonts/SegoeUI.woff2) format("woff2"),
url(//www.agentur-dreipunkt.de/wp-content/uploads/fonts/SegoeUI.woff) format("woff");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "SegoeUI";
src:
url(//www.agentur-dreipunkt.de/wp-content/uploads/fonts/SegoeUI-Bold.woff2) format("woff2"),
url(//www.agentur-dreipunkt.de/wp-content/uploads/fonts/SegoeUI-Bold.woff) format("woff");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "SegoeUI";
src:
url(//www.agentur-dreipunkt.de/wp-content/uploads/fonts/SegoeUIBlack.woff2) format("woff2"),
url(//www.agentur-dreipunkt.de/wp-content/uploads/fonts/SegoeUIBlack.woff) format("woff");
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Montserrat";
src:
url(//www.agentur-dreipunkt.de/wp-content/uploads/fonts/Montserrat-Light.woff2) format("woff2"),
url(//www.agentur-dreipunkt.de/wp-content/uploads/fonts/Montserrat-Light.woff) format("woff");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Montserrat";
src:
url(//www.agentur-dreipunkt.de/wp-content/uploads/fonts/Montserrat-Regular.woff2) format("woff2"),
url(//www.agentur-dreipunkt.de/wp-content/uploads/fonts/Montserrat-Regular.woff) format("woff");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Montserrat";
src:
url(//www.agentur-dreipunkt.de/wp-content/uploads/fonts/Montserrat-SemiBold.woff2) format("woff2"),
url(//www.agentur-dreipunkt.de/wp-content/uploads/fonts/Montserrat-SemiBold.woff) format("woff");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Montserrat";
src:
url(//www.agentur-dreipunkt.de/wp-content/uploads/fonts/Montserrat-Bold.woff2) format("woff2"),
url(//www.agentur-dreipunkt.de/wp-content/uploads/fonts/Montserrat-Bold.woff) format("woff");
font-weight: 700;
font-style: normal;
font-display: swap;
}
:root {
--cl-primary: #cccccc;
--cl-secondary: #008b85;
--cl-weiss: #fff;
--cl-bg-line: #41403f;
--cl-bg: #000000;
--cl-dark: #000000;
--header-font-family: "Montserrat", sans-serif !important;
--special-font-family: "SegoeUI", sans-serif !important;
--font-size: 20px !important;
--line-height: 1.8 !important;
--indented-spacer: 100px;
}
@media screen and (max-width: 1920px) {
:root {
--font-size: 16px !important;
}
} * {
scrollbar-width: thin;
scrollbar-color: var(--cl-secondary) var(--cl-weiss);
} *::-webkit-scrollbar {
width: 6px;
}
*::-webkit-scrollbar-track {
background: var(--cl-weiss);
}
*::-webkit-scrollbar-thumb {
background-color: var(--cl-secondary);
border-radius: 20px;
border: 0px solid transparent;
}
.cmplz-btn.cmplz-manage-consent,
.cmplz-manage-consent-button,
.cmplz-document .cmplz-show-banner {
display: none !important;
}
body,
body * {
font-family: var(--header-font-family); }
#logo-black,
#logo-footer {
display: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
text-wrap: balance;
}  h1,
.h1,
#footer-top .h2 a {  font-size: clamp(2rem, 5vw, 6rem) !important;
line-height: 0.8 !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
text-transform: uppercase !important;
}
#footer-top .h2 a {
font-size: clamp(2rem, 5vw, 5rem) !important;
}
body.home h1 {
padding-bottom: 3rem;
width: 15ch;
margin: 0 auto;
}
#header h2 {
font-size: clamp(1.2rem, 1.5vw, 1.4rem) !important;
letter-spacing: 0.75rem !important;
width: 50ch;
margin: 0 auto;
line-height: normal !important;
} header .l-subheader.width_full,
header .l-subheader.width_full_with_indents,
footer#page-footer {
padding-right: 88px;
padding-left: var(--indented-spacer);
}
#header-info a:hover {
color: var(--cl-secondary);
}
.header_hor .l-header.pos_fixed~.l-main>.l-section:first-of-type>.l-section-h,
.header_hor .l-header.pos_fixed~.l-main>form>.l-section:first-of-type>.l-section-h,
.header_hor .l-header.pos_static.bg_transparent~.l-main>.l-section:first-of-type>.l-section-h,
.header_hor .l-header.pos_static.bg_transparent~.l-main>form>.l-section:first-of-type>.l-section-h {
padding-top: calc(var(--header-height) / 2) !important;
} @media screen and (max-width: 1920px) {
header .l-subheader.width_full,
header .l-subheader.width_full_with_indents,
footer#page-footer {
padding-right: 38px;
padding-left: 50px;
}
}
body.header_hor .w-nav.type_mobile.m_layout_fullscreen.header_is_visible .w-nav-list.level_1,
body.header_hor .l-header.sticky .w-nav.type_mobile.m_layout_fullscreen.header_is_visible .w-nav-list.level_1 {
top: 0;
} .highlighted-text {
color: var(--cl-secondary) !important;
transition: color 0.2s ease;
}
#news time {
font-weight: 700;
}
.txt-topline {
display: inline-block;  font-weight: 700;
line-height: 1.8;
letter-spacing: 0.05rem;
text-transform: uppercase;
}
.subline p {
font-family: var(--special-font-family);
font-weight: 500;
font-size: 1.8rem;
text-transform: uppercase;
line-height: 1.3;
max-width: 60ch;
margin: 0 auto;
}
.subline-left p {
margin-left: 0 !important;
}
.cl-primary,
.cl-primary * {
color: var(--cl-primary);
}
.cl-secondary,
.cl-secondary * {
color: var(--cl-secondary);
}
section.color_alternate .w-btn span {
color: var(--cl-primary);
}
section.color_alternate .w-btn:hover span {
color: var(--cl-secondary);
} #btn-dialog {
margin-left: calc(20% + 10px);
}
h2,
.h2 {
font-size: clamp(25px, 3vw, 75px) !important;
line-height: 1 !important;
font-weight: 700 !important;
text-transform: none !important;
}
h3,
.h3 {
font-size: clamp(20px, 3vw, 45px) !important;
;
}
h1 span,
.h1 span {
display: block;
}
.topline,
#news time,
.w-btn span {
font-weight: 400 !important;
font-size: 0.75rem !important;
text-transform: uppercase !important;
line-height: 1.7 !important;
letter-spacing: 6px !important;
margin-bottom: 30px !important;
}
.topline,
#news time {
color: var(--cl-secondary) !important;
}
.w-btn span {
margin-bottom: 0px !important;
}
body.home h1 span,
body.home #header h2 {
visibility: hidden;
}
h1 span,
#portfolio-claim h2 span {
will-change: transform, opacity;
}
.fw-900 {
font-weight: 900;
} #header.l-section.width_full {
padding-left: 10vw !important;
padding-right: 10vw !important;
}
.l-section.full_height {
min-height: 100vh !important;
}
.vh-50.l-section.full_height {
min-height: 50vh !important;
}
.h2-claim h2 { line-height: 0.8 !important;
text-transform: uppercase !important;
letter-spacing: 0 !important;
margin-bottom: 3rem !important;
}
section.l-section.width_full {
padding-left: 15vw;
padding-right: 10vw;
}
section.l-section {
background-color: var(--cl-weiss);
}
section.l-section.color_alternate {
background-color: var(--cl-dark);
}
.w-nav-icon {
z-index: 100;
}
.w-nav-icon>div {
height: 5px;
border-radius: 25px;
} .w-nav-open .w-nav-list.level_1 {
background-color: var(--cl-secondary) !important;
height: 100vh;
padding: 2rem 10vw 2rem 15vw !important;
}
.w-nav-list.level_1 .l-section-overlay {
transition: background 1s ease;
}
.w-nav.type_mobile .w-nav-list.level_1 {
z-index: -1;
}
.w-nav.type_mobile .w-nav-anchor:not(.w-btn) {
line-height: 1 !important;
transition: color 0.5s ease;
}
.header_hor .l-header.sticky .w-nav.type_mobile.m_layout_fullscreen.header_is_visible .w-nav-list.level_1,
.header_hor .w-nav.type_mobile.m_layout_fullscreen.header_is_visible .w-nav-list.level_1 {
top: 0;
}
#menu-main-menu-links {
margin-bottom: 10vh;
}
#menu-main-menu-links li a {
font-size: clamp(2.5rem, 5vw, 6rem) !important;
line-height: 1.1 !important;
letter-spacing: 0 !important;
font-weight: 700 !important;
text-transform: uppercase !important;
}
#menu-main-menu-links li a,
#header-info p {
color: var(--cl-dark);
}
#menu-main-menu-links li a:hover {
color: var(--cl-secondary);
}
.portfolio-text {
padding-top: 20vh !important;
padding-bottom: 20vh !important;
}
.l-main .widget_nav_menu .menu,
.l-main .widget_nav_menu .menu-item a {
border: none !important;
}
.w-btn.us-btn-style_1 {
position: relative;
padding: 1rem 0;
}
.w-btn.us-btn-style_1::before,
.w-btn.us-btn-style_1::after {
content: "";
position: absolute;
top: 50%;
left: calc(100% + 1.5rem);
background-color: var(--cl-dark);
height: 1px;
width: 3rem;
transform: translateY(-50%);
transition: width 0.3s ease,
color 0.3s ease,
left 0.3s ease;
}
.color_alternate .w-btn.us-btn-style_1::before {
background-color: var(--cl-primary);
}
.w-btn.us-btn-style_1::after {
height: 9px;
width: 9px;
left: calc(100% + 4.5rem - 1px);
transform: translate(-100%, -50%) rotate(45deg);
background-color: transparent;
border-top: 1px solid var(--cl-dark);
border-right: 1px solid var(--cl-dark);
}
.color_alternate .w-btn.us-btn-style_1::after {
border-top: 1px solid var(--cl-primary);
border-right: 1px solid var(--cl-primary);
}
.w-btn.us-btn-style_1:hover::before {
width: 4.5rem;
background-color: var(--cl-secondary);
}
.w-btn.us-btn-style_1:hover::after {
left: calc(100% + 6rem - 2px);
border-top: 1px solid var(--cl-secondary);
border-right: 1px solid var(--cl-secondary);
}
.img-indented {
padding-left: var(--indented-spacer);
padding-right: var(--indented-spacer);
}
.text-indented {
padding-left: var(--indented-spacer);
padding-right: calc(2 * var(--indented-spacer));
}
.text-indented ul {
margin-left: 1rem;
}
.text-indented ul li {
margin-bottom: 0.25rem;
} #portfolio-claim .h1 {
padding-bottom: 0 !important;
}
#portfolio-claim .h1 span:nth-child(1) {
margin-left: 5vw;
}
#portfolio-claim .h1 span:nth-child(3) {
margin-left: -12vw;
}
#section-horizontal .vc_col-sm-12>.vc_column-inner>.wpb_wrapper {
display: flex;
}
#section-horizontal .horizontal-content {
position: relative;
height: 100vh;
width: 100vw;
padding: 0 10vw 0 15vw !important;
flex-shrink: 0;
place-items: center;
margin: 0;
}
#section-horizontal .horizontal-content>.vc_column_container,
#section-horizontal .horizontal-content>.vc_column_container>.vc_column-inner {
position: unset;
}
#section-horizontal .home-portfolio-raster {
width: 60vw;
}
#section-horizontal .home-portfolio-raster .post_image {
aspect-ratio: 16/9;
width: 100%;
height: auto;
overflow: hidden;
}
#section-horizontal-panel-01 .home-portfolio-raster .post_image img {
transform: translateY(-15%);
}
#section-horizontal-panel-04 .home-portfolio-raster .post_image img {
transform: translateY(-13%);
}
#section-horizontal-panel-01 .home-portfolio-raster .post_image:hover img {
transform: translateY(-15%) scale(1.03);
}
#section-horizontal-panel-04 .home-portfolio-raster .post_image:hover img {
transform: translateY(-13%) scale(1.03);
}
.home-portfolio-raster .w-grid-item-h {
overflow: hidden;
}
.home-portfolio-raster article .w-vwrapper {
margin-top: 5vh; }
.feature-portfolio-raster.home-portfolio-raster article .w-vwrapper {
margin-bottom: 0;
}
.img-indented .w-image-h img,
.home-portfolio-raster article .post_image img { transition: transform 1s cubic-bezier(0.77, 0, 0.175, 1),
filter 0.3s ease-in-out;
cursor: pointer;
}
.home-portfolio-raster article .w-grid-item-h .overflow-wrapper {
overflow: hidden;
}
.img-indented .w-image-h img:hover {
transform: scale(1.03);
}
.home-portfolio-raster article .post_title {
padding-bottom: 15px;
border-bottom: 1px solid var(--cl-bg-line);
}
.home-portfolio-raster article:hover .post_title {
color: var(--cl-secondary);
}
.home-portfolio-raster article .claim,
#news .post_title,
body.ergebnisse .txt-claim,
.referenz-claim {
font-size: clamp(1.25rem, 2vw, 2.25rem) !important;
line-height: 1;
font-weight: 700;
letter-spacing: 0;
} body.ergebnisse .txt-claim,
.referenz-claim {
margin-top: 2rem;
margin-bottom: 1rem !important;
padding-top: 0 !important;
} body.ergebnisse .txt-kunde,
.referenz-kunde {
font-size: 1.1rem !important;
line-height: 1.3 !important;
letter-spacing: 0.3rem !important;
font-weight: 700 !important;
text-transform: uppercase !important;
}
.referenz-kunde,
.referenz-kunde a {
padding-bottom: 15px;
width: 100%;
color: var(--cl-secondary) !important;
}
.home-portfolio-raster article .claim a:hover {
color: var(--cl-primary) !important;
} #service {
padding-right: calc(10vw + 4vw);
}
#service h3 {
transition: color 0.5s ease;
}
#service h3:hover,
#service .w-tabs-section.active h3 {
color: var(--cl-secondary);
}
#service .w-tabs-section:nth-child(2) h3 {
width: 8ch;
}
#service>.l-section-h {
overflow: hidden;
}
#service .menu-service-menu-container #menu-service-menu li a,
#service .w-tabs-section-title,
.h2-claim h2 {
font-family: var(--header-font-family) !important;
font-size: clamp(1.5rem, 6vw, 6rem) !important;
line-height: 1.1;
font-weight: 700;
letter-spacing: 0;
text-transform: uppercase;
padding: 0 !important;
}
#service .w-tabs-section-content-h {
max-width: unset;
margin-left: 0;
margin-right: 0;
padding-left: var(--indented-spacer);
}
#news {
background-color: var(--cl-weiss);
}
#news .owl-carousel .owl-stage-outer {
overflow: visible !important;
} #news .post_title {
margin-bottom: 1rem;
} #news .post_content p,
#news time {
font-family: var(--special-font-family);
} #service .menu-service-menu-container #menu-service-menu li a {
position: relative;
padding: 1.5rem 0;
}
#service .w-tabs.accordion>div>.w-tabs-section {
position: relative;
}
#service .w-tabs.accordion>div>.w-tabs-section .w-tabs-section-control {
display: none;
}
#service .w-tabs-section.active:not(.has_text_color)>.w-tabs-section-header {
color: var(--cl-secondary);
} #service .menu-service-menu-container #menu-service-menu li a::before,
#service .menu-service-menu-container #menu-service-menu li a::after,
#service .w-tabs.accordion>div>.w-tabs-section::before,
#service .w-tabs.accordion>div>.w-tabs-section::after,
.highlight-line::before,
.highlight-line::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
height: 1px;
width: 100%;
background: var(--cl-bg-line);
}
.highlight-line::after,
#service .menu-service-menu-container #menu-service-menu li a::after,
#service .w-tabs.accordion>div>.w-tabs-section::after {
width: 100%;
background-color: var(--cl-secondary);
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
left: 0;
transform: scaleX(0);
transform-origin: left;
z-index: 10;
} .highlight-line {
position: relative;
} .highlight-line::before,
.highlight-line::after {
bottom: -15px
}
article:hover .highlight-line::after,
#service .menu-service-menu-container #menu-service-menu li:hover a::after,
#service .w-tabs.accordion>div>.highlight-line:hover::after {
transform: scaleX(1);
}
#service .w-tabs.accordion>div>.w-tabs-section {
border: none;
}
#news article:first-of-type::before {
top: 0;
bottom: unset;
}
.img-indented .w-image-h {
overflow: hidden;
}
#projekt-starten .w-btn {
margin-right: 4.5rem;
}
footer {
text-transform: uppercase;
letter-spacing: 0.1rem;
background-color: var(--cl-secondary) !important;
}
footer section.l-section.width_full {
background-color: var(--cl-secondary);
}
footer p,
footer a {
font-family: var(--special-font-family);
line-height: 1.7;
font-size: 0.8rem; }
#footer-top .h2 a {
padding-bottom: 5vh;
} footer ul {
list-style: none;
margin-left: 0;
}
footer li {
margin-bottom: 0;
}
footer img {
height: 35px !important;
width: auto;
}
footer .highlighted-text {
color: var(--color-footer-link-hover) !important;
}
footer a:hover .highlighted-text {
color: var(--cl-bg-line) !important;
}
#footer-top {
position: relative;
padding-bottom: 6vh;
}
@media screen and (max-width: 1920px) {
#footer-top {
padding-bottom: 5vh;
}
}
#footer-top ul li:first-child {
font-weight: 700 !important;
min-height: 3.5rem;
}
#footer-top ul li a {
text-transform: none !important; }   #footer-top .vc_col-md-2\/5 {
margin-right: calc(60% - (13.333% * 4)) !important;
}
#footer-bottom { padding: 5vh 0;
} #footer-bottom .w-hwrapper div#footer-logo {
flex-grow: 3;
}
footer section.l-section.width_full {
padding-left: 0;
padding-right: 0;
}
footer #footer-top .txt-tel a {
font-size: 2rem !important;
} #footer-top::after {
content: "";
position: absolute;
display: block;
height: 1px;
width: calc(100% - 3rem);
background-color: rgba(255, 255, 255, 0.5);
top: -25px;
left: 50%;
transform: translateX(-50%);
}
#footer-top::after {
top: calc(100% + 10px);
}
@media screen and (max-width: 1440px) {
.img-indented {
padding-left: 0px;
padding-right: 0px;
}
} #gruender-img,
#team-img {
background: linear-gradient(180deg, var(--cl-bg) 70%, var(--cl-weiss) 70%, var(--cl-weiss) 100%);
padding-bottom: 0;
}
#benefits,
#faq {
padding-left: 0;
padding-right: 0;
width: 100vw;
overflow: hidden;
}
#benefits .topline,
#faq .topline {
padding-left: 15vw;
padding-right: 10vw;
}
#benefits .benefits-row,
#faq .benefits-row {
padding: 2rem 10vw 2rem 15vw;
;
margin: 2rem 0;
}
#benefits .benefits-row h2,
#benefits .benefits-row h3 {
color: var(--cl-secondary);
font-weight: 700 !important;
}
#benefits .benefits-row p,
#faq .benefits-row p {
font-size: clamp(18px, 2vw, 26px);
font-weight: 700;
line-height: 1.8;
} #strategy .text-indented.txt-topline,
#identity .text-indented.txt-topline,
#communication .text-indented.txt-topline {
max-width: calc(85% + 100px);
}
.expertise-akkordeon {
padding-right: 4vw;
}
.expertise-akkordeon .w-tabs-section-title {
font-size: clamp(1.5rem, 5vw, 75px) !important;
font-style: normal;
font-weight: 700;
line-height: 1.04;
transition: color 0.5s ease;
}
.expertise-akkordeon .w-tabs-section:hover .w-tabs-section-title,
.expertise-akkordeon .w-tabs-section.active .w-tabs-section-title {
color: var(--cl-secondary);
}
.expertise-akkordeon .w-tabs-section {
position: relative;
}
.expertise-akkordeon .w-tabs-section-header {
padding: 1.5rem 0;
}
.w-tabs-section-header:hover,
.w-tabs-section-title:hover,
a:hover {
cursor: pointer;
}
.expertise-akkordeon .w-tabs-section::after {
content: '';
position: absolute;
width: 100%;
height: 1px;
left: 0;
bottom: 0;
background-color: var(--cl-bg-line);
}
section.color_alternate .expertise-akkordeon .w-tabs-section::after {
background-color: var(--cl-primary);
}
.w-tabs-section:hover .w-tabs-section-header .w-tabs-section-control::before,
.w-tabs-section:hover .w-tabs-section-header .w-tabs-section-control::after {
color: var(--cl-secondary);
}
.expertise-akkordeon .w-tabs-section-content-h {
margin: 0;
max-width: 85% !important;
}
.no-touch .w-tabs.remove_indents>div>div>.w-tabs-section-header:hover,
.no-touch .w-tabs.remove_indents>div>div>.w-tabs-section-header:focus {
background: transparent !important;
}
.w-tabs-section.active:not(.has_text_color)>.w-tabs-section-header {
color: inherit !important;
}
section.col-img-karussell {
padding-left: 0 !important;
padding-right: 0 !important;
background-color: var(--cl-weiss) !important;
}
.col-img-karussell.white-gradient { background: linear-gradient(180deg, var(--cl-weiss) 30%, var(--cl-bg) 30%, var(--cl-bg) 100%);
}
.col-img-karussell.dark-gradient {
background: linear-gradient(180deg, var(--cl-bg) 30%, var(--cl-weiss) 30%, var(--cl-weiss) 100%);
} .list-portfolio-raster-1-item,
.list-portfolio-raster-3-items {
margin-bottom: 7vh;
}
.list-portfolio-raster-3-items .w-grid-list {
display: grid !important;
grid-template-columns: repeat(var(--columns, 1), 1fr) !important;
grid-auto-rows: calc(var(--item-height) / 2) !important; grid-auto-flow: dense !important;
gap: calc(var(--gap, 0px) * 2) !important;
}
.list-portfolio-raster-3-items .w-grid-list .w-grid-item {
grid-row: span 2;
}
.list-portfolio-raster-3-items .w-grid-list .w-grid-item:nth-child(2) {
grid-row: 2 / span 2; }
.list-portfolio-raster-3-items .w-grid-list .post_image img {
transform: scale(1.2);
transition: all 0.05s ease;
} body.single-us_portfolio h1,
body.single-us_portfolio .h1 {
font-size: clamp(1.5rem, 2vw, 3rem) !important;
line-height: 1 !important;
font-weight: 700 !important;
letter-spacing: 0.2rem !important;
max-width: 40ch;
}
body.single-us_portfolio h2.huge,
body.single-us_portfolio .h2.huge {
font-size: clamp(2rem, 3vw, 5rem) !important;
line-height: 1 !important;
font-weight: 700 !important;
letter-spacing: -0.1rem !important;
margin-bottom: 5vh;
}
.type_text.beschreibung p {
text-wrap: unset;
}
.portfolio-content-header {
font-size: 1.2rem;
line-height: 1.3;
text-transform: uppercase;
font-weight: 500;
margin-bottom: 10px !important;
color: var(--cl-secondary) !important;
}
body.single-us_portfolio .leistungen ul {
list-style-type: none;
margin-left: 0;
}
.portfolio-content-web {
font-weight: 700;
font-size: 1.1rem;
text-transform: uppercase;
line-height: 1.3;
letter-spacing: 0.3rem;
}
#portfolio-karussell .owl-carousel .owl-stage-outer {
overflow: visible !important;
}
#portfolio-karussell .owl-carousel .owl-stage-outer .post_image {
overflow: hidden;
transition: transform 0.3s ease; }
#portfolio-karussell .owl-carousel .owl-stage-outer article .post_image {
overflow: hidden;
}
#portfolio-karussell .owl-carousel .owl-stage-outer article .post_image img,
#portfolio-karussell .owl-carousel .owl-stage-outer article .post_image video {
transition: transform 0.8s ease;
}
#portfolio-karussell .owl-carousel .owl-stage-outer article:hover .post_image img,
#portfolio-karussell .owl-carousel .owl-stage-outer article:hover .post_image video {
transform: scale(1.04);
} body.dialog #page-content h2 {
padding-bottom: 3rem;
margin-bottom: 3rem;
border-bottom: 1px solid var(--cl-bg-line);
}
body.dialog .w-grid-item-h {
padding-bottom: 3rem;
}
body.single-news h1 {
font-size: clamp(2rem, 3vw, 4rem) !important;
line-height: 1 !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
.pointer {
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 2rem;
aspect-ratio: 1;
background-color: var(--cl-secondary);
border: 1px solid transparent;
border-radius: 50%;
pointer-events: none;
transform: translate3d(var(--mouseX, 0), var(--mouseY, 0), 0) translate(-50%, -50%);
transition: 0.3s ease-out;
transition-property: width, border, background-color, opacity;
will-change: transform;
display: flex;
align-items: center;
justify-content: center;
visibility: hidden;
} body:has(.pointer-circle-plus:hover) .pointer {
width: 5rem;
background-color: var(--cl-secondary);
opacity: 0.6;
border: transparent;
transform: translate3d(var(--mouseX, 0), var(--mouseY, 0), 0) translate(-50%, -50%);
} body:has(.pointer-circle-plus:hover) .pointer .plus-icon {
position: absolute;
display: inline-block;
height: 2px;
width: 30px;
background-color: var(--cl-weiss);
}
body:has(.pointer-circle-plus:hover) .pointer .plus-icon:last-of-type {
transform: rotate(90deg);
}
body:has(.w-tabs-section.active:hover) .pointer .plus-icon:last-of-type {
transform: rotate(0deg);
}
body:has(.pointer-circle-plus.pointer-dark:hover) .pointer {
background-color: var(--cl-bg-line);
}
body:has(.no-pointer:hover) .pointer {
opacity: 0 !important;
}
body .w-nav-icon,
body #logo-white img,
body #logo-black img,
body .w-btn {
cursor: pointer !important;
}
body:has(.w-nav-icon:hover) .pointer,
body:has(#logo-white:hover) .pointer,
body:has(#logo-black:hover) .pointer {
width: 4rem;
background-color: transparent;
border: 2px solid var(--cl-secondary);
}
body:has(.w-tabs-section.active) .pointer .plus-icon,
body:has(.w-tabs-section) .pointer .plus-icon {
transition: transform 0.3s ease;
}
body:has(.w-nav-control.active .w-nav-icon:hover) .pointer {
background-color: transparent;
border: 2px solid var(--cl-dark);
}
body:has(.w-nav-list.level_1 a:hover) .pointer {
background-color: var(--cl-dark);
}
body:has(#logo-white:hover .w-nav-control.active) .pointer,
body:has(#logo-black:hover .w-nav-control.active) .pointer {
border: 2px solid var(--cl-dark);
}
body:has(footer:hover) .pointer {
background-color: var(--cl-bg-line);
}
@media (prefers-reduced-motion: reduce) {
.pointer {
display: none;
}
}
@media (pointer: coarse) {
.pointer {
display: none;
}
}
.video-parallax .l-section-video { width: 75vw;
position: relative;
}
.video-parallax .l-section-video video {
position: relative;
object-fit: unset;
}
#portfolio-detail-parallax-01,
#portfolio-detail-parallax-02,
#portfolio-detail-parallax-03,
#portfolio-detail-parallax-04,
.portfolio-detail-parallax,
section.fullscreen-image-stack {
width: 100vw;
}
#portfolio-detail-parallax-01 .l-section-img,
#portfolio-detail-parallax-02 .l-section-img,
#portfolio-detail-parallax-03 .l-section-img,
#portfolio-detail-parallax-04 .l-section-img,
.portfolio-detail-parallax .l-section-img {
clip-path: inset(0px 130px);
}
#video-wrapper,
#video-wrapper-1,
#video-wrapper-2 {
position: relative;
}
#video-wrapper::after,
#video-wrapper-1::after,
#video-wrapper-2::after {
display: block;
content: "";
z-index: 0;
position: absolute;
top: 50%;
left: 50%;
height: 130px;
width: 130px;
background-size: contain !important;
background: URL("/wp-content/uploads/2026/01/play-button.svg");
transform: translate(-50%, -50%);
}
#video-wrapper-1::after,
#video-wrapper-2::after {
height: 70px;
width: 70px;
}
#video-wrapper.isPlaying::after,
#video-wrapper-1.isPlaying::after,
#video-wrapper-2.isPlaying::after {
opacity: 0;
}
.slider {
position: fixed;
inset: 0;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.slide {
position: absolute;
width: 33vw;
height: 500px;
color: white;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
will-change: transform;
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
transform-origin: center;
will-change: transform;
}
#circle-portfolio-container>.l-section-img {
background-color: rgba(255, 255, 255, 0.85);
background-blend-mode: lighten;
}
body.single-us_portfolio .slide h2 {
position: absolute;
top: 10%;
left: 100%;
transform: translateX(-50%);
font-size: 5rem !important;
color: #000;
text-wrap: nowrap;
color: #bbb;
mix-blend-mode: difference;
}
.referenzen-liste article,
.referenzen-gruppe {
margin-bottom: 15vh;
}
.referenzen-gruppe {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6rem;
align-items: center; }
.spalte {
display: flex;
flex-direction: column;
gap: 2rem;
}
.referenz-item { will-change: transform, opacity;
}
.referenz-item .referenz-media {
width: 100%;
height: auto;
display: block;
will-change: transform;
}
.referenz-media-wrap {
overflow: hidden;
position: relative;
}
.referenz-media-wrap .referenz-media {
width: 100%;
height: 100%;
display: block;
}
.referenzen-gruppe .spalte-rechts article {
opacity: 0;
} .referenz-media-wrap img.referenz-media {
transform: scale(1.2);
transform-origin: center center;
will-change: transform;
}
body.privacy h2,
body.imprint h2,
body.agb h2,
body.privacy h3,
body.privacy .h3,
body.imprint h3,
body.imprint .h3,
body.agb h3,
body.agb .h3 {
font-size: clamp(20px, 3vw, 35px) !important;
}
body.privacy h3 {
font-size: clamp(18px, 3vw, 24px) !important;
font-weight: 600;
}
body.privacy ol {
list-style-type: lower-alpha;
margin-left: 1rem;
}
body.privacy ol li {
margin-bottom: 1rem;
}
body.privacy ul {
margin-left: 1rem;
}
body.privacy ul li {
margin-bottom: 0;
}
body.privacy ol li b {
display: block;
margin-bottom: 0.25rem !important;
}
body.agb ol {
list-style: decimal;
}
.l-header,
.l-header .l-subheader,
.l-header .l-subheader .l-subheader-h { pointer-events: none;
}
.l-header .l-subheader .l-subheader-h .w-image-h,
.l-header .l-subheader .l-subheader-h .w-nav {
pointer-events: auto;
}
section.fullscreen-image-stack {
padding: 0 !important;
}
section.fullscreen-image-stack .image-stacked {
position: sticky;
top: 0;
height: 100vh;
overflow: hidden;
}
section.fullscreen-image-stack * {
width: 100vw;
}
.l-section.full_height.fullscreen-image-stack .image-stacked img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
body.climatech section>.l-section-h {
padding-top: 0 !important;
}
body.climatech section>.l-section-h img {
width: 100% !important;
}
section.font-karussell,
body.climatech #climatech-karussell,
body.climatech #climatech-phone {
position: relative;
}
section.font-karussell .font-karussell-overlay {
position: absolute;
top: 50%;
left: 50%;
height: 35vh;
aspect-ratio: 1;
transform: translate(-50%, -50%);
z-index: 10;
}
body.climatech #climatech-phone-video {
position: absolute;
top: 60%;
left: 50%;
height: 100%;
aspect-ratio: 1;
transform: translate(-50%, -50%);
z-index: 10;
background: transparent !important;
background-color: transparent !important;
}
body.climatech #climatech-phone *,
body.climatech #climatech-phone-video * {
background: transparent !important;
background-color: transparent !important;
}
html:not(.w-nav-open) .style_hamburger_1 *,
html:not(.w-nav-open) .style_hamburger_1 *::before,
html:not(.w-nav-open) .style_hamburger_1 *::after {
background-color: var(--hamburger-color, #008b85) !important;
transition: background-color 0.3s ease;
}
@media (max-width: 1320px) {
.text-indented {
padding-right: 0;
}
}
@media (max-width: 1200px) {
footer p {
font-size: 0.6rem;
}
}
@media (max-width: 1024px) {
header .l-subheader.width_full,
header .l-subheader.width_full_with_indents,
footer#page-footer {
padding-right: 20px;
padding-left: 30px;
}
#footer-top .vc_col-sm-4 {
margin-right: 0 !important;
}
#footer-top .vc_col-sm-2 {
width: 22%;
}
.text-indented {
padding-left: 0;
}
}
@media (max-width: 768px) {
h1 {
line-height: 1 !important;
}
header .l-subheader.width_full,
header .l-subheader.width_full_with_indents,
footer#page-footer {
padding-right: 1.5rem;
padding-left: 1.5rem;
}
body.home h1 {
padding-bottom: 3vh;
width: auto;
}
#header h2 {
letter-spacing: 0.25rem !important;
width: auto;
margin: 0 auto;
}
.header_hor .l-header.pos_fixed~.l-main>.l-section:first-of-type>.l-section-h {
padding-top: 0 !important;
}
section.l-section.width_full:first-child {
padding-top: 15vh;
}
section.l-section.width_full {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
#gruender-img,
#team-img {
background: linear-gradient(180deg, var(--cl-bg) 50%, var(--cl-weiss) 50%, var(--cl-weiss) 100%);
}
.topline,
#news time,
.w-btn span {
margin-bottom: 15px !important;
}
.w-btn span {
margin-bottom: 0px !important;
}
#projekt-starten .w-btn-wrapper.align_right,
body.single-news .w-btn-wrapper.align_center {
text-align: left;
}
.h2-claim h2 {
line-height: 0.9 !important;
margin-bottom: 2rem !important;
}
#home-video-container {
height: 20vh !important;
min-height: 20vh !important;
padding: 0 !important;
}
#video-wrapper::after,
#video-wrapper-1::after,
#video-wrapper-2::after {
height: 70px;
width: 70px;
} #projekt-starten #header.l-section.full_height,
#bg-video-container {
min-height: 100vh !important;
}
#section-horizontal .horizontal-content {
padding: 0 1.5rem !important;
height: auto;
}
#section-horizontal .home-portfolio-raster {
width: calc(100vw - 3rem);
}
#section-horizontal .vc_col-sm-12>.vc_column-inner>.wpb_wrapper {
display: block;
}
#service .w-tabs-section-content-h {
padding-left: 0;
}
.portfolio-text {
padding-top: 10vh !important;
padding-bottom: 10vh !important;
}
#portfolio-karussell .topline {
padding-bottom: 1.5rem;
padding-top: 1.5rem;
}
#portfolio-detail-video-parallax-01,
#portfolio-detail-video-parallax-02,
#portfolio-detail-video-parallax-03,
#portfolio-detail-video-parallax-04 {
min-height: auto !important; }
section.font-karussell .font-karussell-overlay {
height: 25vh;
}
body.single-us_portfolio section.full_height:first-child {
min-height: 40vh !important;
}
body.single-us_portfolio .l-section.height_huge,
body.single-us_portfolio .l-section.height_huge,
body.single-news .l-section.height_huge,
body.single-news .l-section.height_huge {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
#portfolio-detail-parallax-01,
#portfolio-detail-parallax-02,
#portfolio-detail-parallax-03,
#portfolio-detail-parallax-04,
.portfolio-detail-parallax {
aspect-ratio: unset !important;
min-height: 40vh !important;
}
.txt-topline {
font-size: 1rem;
}
.text-indented {
padding-left: 0;
padding-right: 0;
}
.expertise-akkordeon {
padding-right: 0px;
}
.expertise-akkordeon .w-tabs-section-content-h {
max-width: 100% !important;
}
.accordion p,
.accordion .w-btn span,
#news .post_content p {
font-size: 1rem;
}
#header-info {
font-size: 0.8 !important;
letter-spacing: 0.1rem !important;
}
.w-grid.type_carousel .w-grid-item {
padding: 0;
}
.portfolio-content-web {
font-size: 0.75rem;
}
.subline p {
font-size: 1.2rem;
}
.list-portfolio-raster-3-items .w-grid-list {
display: block !important;
}
.list-portfolio-raster-1-item,
.list-portfolio-raster-3-items {
margin-bottom: 0;
}
#footer-info {
padding-top: 4rem;
}
.video-parallax {
margin: 1.5rem;
}
.l-subheader {
--padding-inline: 1.5rem;
}
#partner .w-grid-list {
gap: 0;
}
.owl-carousel .owl-item {
margin-right: 1.5rem !important;
}
.referenzen-liste article {
margin-bottom: 10vh !important;
}
.referenzen-gruppe {
margin-bottom: 0 !important;
display: flex;
flex-direction: column;
gap: 0rem;
}
.spalte {
display: contents;
}
.referenzen-gruppe .referenz-item {
order: var(--order, 0);
}
#footer-bottom li {
margin-bottom: 0.25rem !important;
}
#benefits .topline {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
#benefits .benefits-row,
#faq .benefits-row {
margin: 1.5rem 0;
padding: 1.5rem;
}
#benefits .benefits-row>.vc_column-inner,
#faq .benefits-row>.vc_column-inner {
padding-left: 0rem;
padding-right: 0rem;
}
#footer-top .vc_col-sm-2 {
width: 100%;
}
}
#section-horizontal,
#news,
#portfolio-karussell,
.col-img-karussell {
overflow: hidden;
}
@media (min-width: 768px) and (max-width: 1380px) {
.l-header.pos_fixed,
body.footer_reveal .l-footer {
width: 100vw;
}
}