* {
  --padding: 25px;
  --gap: 5px;
  --grid-column: calc((100vw - 60px)/3);
  --square: calc((var(--grid-column) - var(--gap)) / 2);
  
  --font-size-default: 15px;
  --font-size-big: 35px;
  }  
  
BODY.page * {
  --font-size-default: 15px;
  }  

BODY {
  overflow-x: hidden;
  }
  
A {
  transition: 0s;
  }
  
.is-root-container P {
  line-height: 1.2;
  }

.wp-block-post-content {
  max-width: 100%;
  clear: both;
  padding-top: calc(var(--square)*2 + var(--gap)*2);
  }  
  
#grid {
  background: none;
  container-type: normal;
  }  
  
/* HEADER
---------------------------------------------------------------------------- */   

HEADER {
  float: none;
  position: fixed;
  z-index: 2;
  width: auto;
  top: var(--padding);
  left: var(--padding);
  right: var(--padding);
  }
  
HEADER:after {  
  content: " ";
  clear: both;
  display: table;
  }
  
HEADER #logo {
  position: fixed;
  z-index: 110;
  right: var(--padding);
  top: var(--padding);
  display: block;
  width: var(--square);
  height: var(--square);
  font-size: var(--square);
  float: right;
  text-align: right;
  margin-bottom: 5px;
  transition: 0.2s;
  }
  
HEADER #bg {
  display: block;
  position: fixed;
  z-index: 102;
  left: -100vw;
  top: 0;
  bottom: 0;
  width: 100vw;
  background: #ff0000;
  transition: 0.2s;
  }
  
HEADER #bg FIGURE {
  width: 100%;
  height: 100%;
  }
  
HEADER #bg IMG {  
  width: 100%;
  height: 100%;
  object-fit: cover;
  }
  
BODY.home HEADER #logo {  
  width: var(--grid-column);
  height: var(--grid-column);
  font-size: var(--grid-column); 
  }
  
BODY.home .wp-block-post-content {
  justify-content: center;
  }  
  
BODY.home HEADER #bg {
  display: none;
  }  
  
BODY.menu HEADER #logo {
  width: var(--square);
  height: var(--square);
  font-size: var(--square);
  }
  
BODY.menu HEADER #bg {
  left: 0;
  }  
  
BODY.menu HEADER A {
  color: #fff;
  border-color: #fff;
  } 
  
BODY.menu #subnav {
  transform: translateX(-200px);
  }
  
/* SUBNAV
---------------------------------------------------------------------------- */   

#subnav {
  position: fixed;
  top: var(--padding);
  left: var(--padding);
  right: var(--padding);
  z-index: 106;
  transition: 0.2s;
  }  

#subnav .button {
  width: var(--square);
  height: var(--square);
  float: left;
  clear: none;
  margin-right: var(--gap);
  }
  
#subnav #plus.button {
  background: #d9dadb;
  color: #6a6e71;
  }  
  
#subnav .button I {
  font-size: 24px;
  display: inline-block;
  line-height: var(--square);
  width: 100%;
  text-align: center;
  transition: 0.2s;
  } 
  
#subnav #plus.button.hide {
  display: block;
  }  
  
#subnav #plus.button.hide I {  
  transform: rotate(45deg);
  }
  
#subnav #projects {
  position: fixed;
  z-index: 101;
  top: calc(var(--square) + var(--gap) + var(--padding));
  bottom: 0;
  font-size: 25px;
  width: calc(100vw - var(--padding)*2);
  border-bottom: var(--padding) solid #fff;
  padding: 0;
  margin-bottom: 0;
  }
  
#subnav #projects .simplebar-track.simplebar-vertical {
  top: var(--gap);
  right: var(--gap);
  bottom: var(--gap);
  }
  
#subnav #projects .scrolling {  
  height: 100%;
  }
  
#subnav #projects .padding {
  padding: 10px 0;  
  }
  
#subnav #projects .project A {
  padding: 0 20px 0 10px;
  }
  
#subnav #projects A.close {
  display: none;
  }
  
/* BACK TO TOP
---------------------------------------------------------------------------- */ 
  
#top {
  display: block;
  position: fixed;
  z-index: 1;
  margin-top: 0;
  background: #6a6e71;
  color: #fff;
  bottom: var(--padding);
  right: var(--padding);
  width: var(--square);
  height: var(--square);
  text-align: center;
  line-height: var(--square);
  font-size: 12px;
  opacity: 0;
  transition: 0.2s;
  visibility: hidden;
  }
  
#top.show {
  opacity: 1;
  visibility: visible;
  }  
  
/* BURGER
------------------------------------------------------------ */   
  
HEADER #burger {
  position: fixed;
  right: var(--padding);
  top: calc(var(--padding) + var(--square) + var(--gap));
  display: block;
  width: var(--square);
  height: var(--square);
  background: #6b6f71;
  clear: both;
  float: right;
  z-index: 105; 
  transition: .5s ease-in-out;
  transition: position 0s, top 0.2s;
  cursor: pointer;
  }

#burger SPAN {
  display: block;
  position: absolute;
  width: 25px;
  height: 1px;
  background: #fff;
  opacity: 1;
  right: 14px;
  transform: rotate(0deg);
  transition: .25s ease-in-out;
  }

#burger span:nth-child(1) {
  top: 18px;
  }

#burger span:nth-child(2) {
  top: 26px;
  }
  
#burger span:nth-child(3) {
  top: 34px;
  }
  
BODY.menu #burger SPAN {  
  height: 1px;
  }

BODY.menu #burger span:nth-child(1) {
  transform: rotate(45deg);
  transform-origin: 50% 50%;
  top: 25px;
  }

BODY.menu #burger span:nth-child(2) {
  transform: rotate(-45deg);
  transform-origin: 50% 50%;
  top: 25px;
  }

BODY.menu #burger span:nth-child(3) {
  opacity: 0;
  }  
  
BODY.menu #burger SPAN {
  background: #fff;
  } 
  
BODY.home #burger {
  top: calc(var(--padding) + var(--grid-column) + var(--gap));
  } 
  
BODY.home.menu #burger {
  top: calc(var(--padding) + var(--square) + var(--gap));
  }      
  
/* NAVIGATION
---------------------------------------------------------------------------- */  

HEADER NAV {
  position: absolute;
  z-index: 105;
  margin-top: 0;
  opacity: 0;
  width: 100%;
  transition: opacity 0.5s;
  width: calc(var(--grid-column)* 2 + var(--gap));
  transition: 0.2s;
  visibility: hidden;
  } 
   
BODY.menu NAV {
  opacity: 1;
  left: 0;
  visibility: visible;
  width: calc(var(--grid-column)*2 + var(--gap));
  }  
  
HEADER NAV UL LI {
  width: var(--grid-column);
  height: var(--grid-column);
  margin-left: 0;
  }  
  
HEADER NAV UL LI:first-child:after { 
  display: block;  
  transform: rotate(0);
  }
  
HEADER NAV UL LI:nth-child(2):before { 
  display: block;  
  content: " ";
  position: absolute;
  width: var(--grid-column);
  height: var(--grid-column);
  left: calc(var(--grid-column) + var(--gap));
  background: url('../img/lines.svg') no-repeat center center; 
  }  
  
HEADER NAV UL LI:nth-child(2):after {   
  transform: rotate(90deg);
  }
  
HEADER NAV UL LI:last-child {
  position: absolute;
  bottom: var(--gap);
  right: calc((var(--grid-column) + var(--gap)) * (-1));
  margin-bottom: 0;
  }  

HEADER NAV UL LI:last-child:after {
  display: none;
  }
  
HEADER NAV UL LI A {
  width: var(--grid-column);
  height: var(--grid-column);
  border-width: 5px;
  font-size: 20px;
  padding: 5px;
  }
  
#logo:before,
#logo:after { 
  display: block;  
  content: " ";
  position: absolute;
  width: var(--square);
  height: var(--square);
  right: calc(var(--square) + var(--gap));
  background: url('../img/lines.svg') no-repeat center center; 
  background-size: var(--grid-column) auto;
  opacity: 0;
  transition: opacity 0.2s;
  }  
  
#logo:after {
  top: calc(var(--square) + var(--gap));
  transform: rotate(90deg);
  }
  
BODY.menu #logo:before,
BODY.menu #logo:after { 
  opacity: 1;
  }
  
BODY.menu #logo:before,
BODY.menu #logo:after,
BODY.menu HEADER NAV UL LI:after,
HEADER NAV UL LI:nth-child(2):before { 
  background-image: url('../img/lines-white.svg');
  }
  
BODY.home #subnav {
  display: none;
  }  
  
/* HOME
---------------------------------------------------------------------------- */  

BODY.home H2 {
  transition: 0.2s;
  font-size: 40px;
  }
 
BODY.home.menu H2 {
  opacity: 0;
  }   

BODY.home H2 BR {
  display: none;
  }
  
BODY.home MAIN {
  height: calc(100vh - var(--padding)*2);
  display: flex;
  align-items: center;
  padding-top: 0;
  }
  
BODY.home .slick-slider FIGCAPTION {
  font-size: 14px;
  }  
  
/* HEADLINES
---------------------------------------------------------------------------- */   
  
H2.wp-block-heading {
  font-size: 35px;
  margin: 0 0 10px 0;
  }  

H3.wp-block-heading {
  font-size: 25px;
  margin: 0 0 10px 0;
  }
  
.wp-block-post-content .back {
  position: relative;
  text-align: right;
  line-height: var(--square);
  }  
  
.wp-block-post-content .back A {  
  display: block;
  width: var(--square);
  float: right;
  text-align: center;
  font-size: 20px;
  line-height: var(--square);
  }  
  
.wp-block-post-content .back + .wp-block-heading {
  margin-bottom: 0;
  }  
  
/* BLOCK COLUMNS
---------------------------------------------------------------------------- */     

.wp-block-columns,
.wp-block-columns.is-style-narrow {
  margin: 0;
  }
  
.wp-block-columns .wp-block-column {
  margin-bottom: var(--square);
  width: 100%;
  }  
  
.wp-block-columns:last-child.is-style-narrow .wp-block-column:last-child {  
  margin-bottom: 0;
  }
  
/* BLOCK IMAGE
---------------------------------------------------------------------------- */   

.wp-block-image {
  margin-bottom: calc(var(--gap)*3);
  }
  
.wp-block-image IMG {
  max-height: 100%;
  }

.wp-block-image.is-style-icon {
  max-width: 215px;
  height: 215px;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  
/* PAGE TEMPLATE
---------------------------------------------------------------------------- */   
  
.page .wp-block-post-content {
  display: flex;
  flex-direction: column;
  }
  
.page .wp-block-post-content H2 {
  font-weight: 700;
  order: 1;
  }  
  
.page .wp-block-post-content .back {
  order: 2;
  }  

.page .wp-block-post-content P {
  order: 3;
  }
  
.page .wp-block-post-content .wp-block-group,
.page .wp-block-post-content .wp-block-columns {
  order: 4;
  flex-direction: column;
  width: 100%;
  gap: var(--gap);
  margin: var(--padding) 0;
  }
  
.page .wp-block-post-content .wp-block-columns + .wp-block-columns {
  margin-top: calc(var(--padding)*(-1));
  }
  
.page .wp-block-post-content .wp-block-columns:first-child {
  margin-top: 0;
  }    

.page .wp-block-post-content .wp-block-columns:last-child {
  margin-bottom: 0;
  }    
  
/* PROJEKTE
---------------------------------------------------------------------------- */   

#masonry {
  width: 100%;
  max-width: 100%;
  }

#masonry .tile-single,
#masonry .tile-double {
  display: none;
  }
  
#masonry .grid-item {
  width: 100%;
  margin-right: 0;
  margin-bottom: var(--gap);
  }  
  
#masonry .grid-item.landscape-small,
#masonry .grid-item.landscape-medium,
#masonry .grid-item.landscape-big {
  width: 100%;
  height: calc(75vw - var(--padding)*2);
  } 
  
#masonry .grid-item.square-big,
#masonry .grid-item.square-medium, 
#masonry .grid-item.square-small,
#masonry .grid-item.square-tiny {
  width: 100%;
  height: calc(100vw - var(--padding)*2);
  }    
  
#masonry .grid-item.testimonial {
  width: 100%;
  height: auto;
  font-size: 25px;
  padding: var(--padding) 0;
  margin-bottom: 0;
  }  
  
#masonry .grid-item:last-child {
  margin-bottom: 0;
  }  
  
/* PROJEKTE
---------------------------------------------------------------------------- */   
  
#masonry.fixed .grid-item {   
  width: 100% !important;
  margin: 0 0 var(--gap) 0 !important;
  }
  
#masonry.fixed .grid-item:last-of-type {    
  margin-bottom: 0 !important;
  }
  
#masonry.fixed .testimonial {   
  height: auto !important;
  }
  
/* SINGLE PROJECT
---------------------------------------------------------------------------- */   

.single-project .wp-block-post-content {
  display: flex;
  flex-direction: column;
  }
  
.single-project .wp-block-post-content .back,
.page-id-73 .wp-block-post-content .back {  
  position: absolute;
  top: calc(var(--square)*2 + var(--gap)*3);
  }

.single-project H2.wp-block-heading {
  font-size: 25px;
  padding-right: 60px;
  order: 1;
  margin-bottom: 0;
  }
  
.single-project H3.wp-block-heading {
  order: 2;
  padding-right: 60px;
  font-weight: 300;
  margin-bottom: 0;
  }  
  
.single-project H3.wp-block-heading STRONG {  
  font-weight: 300;
  }
  
.single-project .description {
  order: 3;
  margin: var(--padding) 0;
  }    
  
BODY:not(.home) .slick-slider {
  width: 100% !important;
  margin-bottom: 0;
  order: 4;
  }
  
BODY:not(.home) .slick-slider .slick-track {  
  width: 100% !important;
  height: 100% !important;
  }
  
BODY:not(.home) .slick-slider .slick-slide {
  margin: 0;
  width: 100%;
  height: auto !important;
  float: none;
  margin-bottom: var(--gap);
  }  
  
BODY:not(.home) .slick-slider .slick-slide IMG {
  max-height: 100%;
  width: 100%;
  height: auto;
  } 
  
BODY:not(.home) .slick-slider .slick-slide:last-child {
  margin-bottom: 0;
  }
  
/* TEAM
---------------------------------------------------------------------------- */   

.wp-block-lazyblock-team {
  order: 3;
  }
  
.wp-block-lazyblock-team .card H3 {  
  font-size: 20px;
  }
  
.wp-block-lazyblock-team .card .text {
  height: auto;
  margin-bottom: var(--padding);
  font-size: 17px;
  }
  
/* KONTAKT
---------------------------------------------------------------------------- */   

.page-kontakt H2 + P {
  margin-bottom: 0;
  }

.page-kontakt H2 + P BR {
  display: none;
  }

.page-kontakt .wp-block-columns {  
  flex-direction: row;
  display: block;
  }
  
.page-kontakt .wp-block-column {
  float: left;
  margin-bottom: var(--padding);
  width: 50%;
  }
  
.page-kontakt .wp-block-column:nth-child(3) {  
  clear: both;
  }

.wp-block-getwid-map {
  order: 5;
  }
  
.wp-block-getwid-map__container {
  height: 66vw !important;
  }
  
.gform_wrapper {
  margin-top: 50px !important;
  order: 6;
  }
  
/* VORTEILE
---------------------------------------------------------------------------- */   

.page-vorteile .wp-block-heading BR {
  display: none;
  }
  
.page-vorteile MAIN > P BR {
  display: none;
  }  
  
.page-vorteile MAIN > * {
  order: revert !important;
  }
  
.page-vorteile MAIN P BR {
  display: none;
  }
  
/* GRAVITY FORM
---------------------------------------------------------------------------- */     

.gform_title {
  margin-bottom: 20px;
  }

.gform_fields {
  gap: 15px !important;
  }

.gfield_label,
.gfield_required_asterisk {
  font-size: 18px !important;
  }
  
.gform_button {
  height: var(--square) !important;
  font-size: 20px !important;
  padding: 0 30px 3px 30px !important;
  font-weight: 400 !important;
  }
  
/* SLICK
---------------------------------------------------------------------------- */ 

.slick-dots {
  z-index: 2;
  text-align: right;
  padding-right: 21px;
  }