/* Base reset */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}iframe,img{vertical-align:bottom;max-width:100%}input,select,textarea{font:inherit}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

@font-face {
  font-family: 'Ginto';
  src: url('../fonts/ABCGintoNormal-Regular.woff2') format('woff2'),
      url('../fonts/ABCGintoNormal-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Ginto';
  src: url('../fonts/ABCGintoNormal-Medium.woff2') format('woff2'),
      url('../fonts/ABCGintoNormal-Medium.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  font-family: 'Ginto', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
	line-height: 24px;

  --leftcol: calc(50% - 24px);
  --rightcol: calc(41.6% - 8px);
  --navmargin: 16px;
  --innermargin: 98px;
  --viewportpadding: calc(100vw - 32px);
  --slidertop: calc(100vh - var(--innermargin) - ((var(--viewportpadding) * 0.416 - 8px) * 0.85714) - 36px);
  --bgcolorrgb: 247, 247, 247;
  --bgcolor1: rgba(var(--bgcolorrgb), 1);
  --bgcolor0: rgba(var(--bgcolorrgb), 0);
  --fontcolor: #237452;
  --startfont: #237452;
  --angebotfont: #942828;
  --projektefont: #926016;
  --persoenlichfont: #355E83;
  --kontaktfont: #24624C;
  --revealtransition: 750ms cubic-bezier(0.25,0.46,0.45,0.94);
}

body {
  position: relative;
  color: var(--fontcolor);
  background-color: var(--bgcolor1);
}
header,
div.startslider,
div.logo,
main {
  height: 100vh;
  width: 100vw;
  top:0;
  left: 0;
}
div.startslider {
  transition: all 350ms ease-out;
}
header {
  z-index: 20;
  position: fixed;
  transition: all var(--revealtransition);
}
div.logo {
  position: fixed;
  display: flex;
  padding: 2em;
  justify-content: center;
  align-items: center;
  height: calc(100vh - 40px);
  pointer-events: none;
}
div.logo.back {
  z-index: -1;
  transition: all 250ms ease;
}
div.logo.front, 
body.start.loading div.logo.front{
  z-index: 200;
  visibility: hidden;
  opacity: 0;
  transition: opacity 750ms 250ms, visibility 0s;
  mix-blend-mode: hard-light;
}
body.start div.logo.front {
  visibility: visible;
  opacity: 1;
  transition: opacity 750ms, visibility 0s;
}
div.logo img {
  width: 80%;
  max-width: 900px;
}
div.logo.front svg path,
body.start.loading div.logo.front svg path {
  fill: var(--fontcolor);
  transition: fill 750ms;
}
body.start div.logo.front svg path {
  fill: #fff;
  transition: fill 750ms 500ms;
}
div.logo svg {
  max-width: 650px;
}
svg path {
  fill: var(--fontcolor);
}
div.logobig svg {
  width: auto;
  height: 133px;
}
main {
  z-index: -2;
  overflow-x: hidden;
}
section#content {
  width: 100%;
  min-height: 100%;
  position: relative;
  background-color: var(--bgcolor1);
  transition: opacity 500ms ease-out, filter 350ms ease-out 300ms;
  opacity: 1;
}
article {
  transition: all 350ms ease-out 350ms;
  width: 100%;
}
article.loading {
  opacity: 0;
  transform: translateY(10px);
}
body.start.loading header {
  top: 100%;
}
body.start.loading section#content {
  opacity: 0;
}
.container {
  padding: 0 16px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  position: relative;
}
div.container.inner {
  padding-top: var(--innermargin);
  min-height: 100%;
}
h1.lead {
  position: absolute;
}
div.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 16px;
  width: 100%;
  position: relative;
}

div.left {
  width: 100%;
  left: 0;
  padding-bottom: 5em;
  margin-top: calc(var(--slidertop) + 20px);
  grid-column: 1 / span 6;
}
div.right {
  position: relative;
  width: 100%;
  grid-column-start:  8;
  grid-column-end: 13;
}
div.sticky { 
  top: calc(var(--slidertop) + var(--innermargin));  
  position: sticky;
  position: -webkit-sticky;
}
section.kontakt {
  overflow: hidden;
}

/* Nav */
div#startlink {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30px;
  z-index: 5;
  cursor: pointer;
}
div.nav {
  position: relative;
  left: 0;
  width: 100%;
  z-index: 2;
  height: calc(var(--innermargin) - var(--navmargin));
  background: linear-gradient(180deg, var(--bgcolor1) 45%, var(--bgcolor0));
  overflow: hidden;
  transition: height 750ms ease-out, transform 350ms ease 500ms;
}
button.menu-toggle {
  display: none;
  padding: 0 8px;
  border: none;
  background: none;
}
div.close {
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  background: none;
}
nav {
  height: 40px;
  display: flex;
  align-items: center;
}
nav ul {
  display: flex;
  flex-direction: row;
}
nav ul li {
  margin-right: 1em;
}
nav ul a {
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--fontcolor);
  opacity: 1;
  display: flex;
  align-items: center;
  transition: all 250ms ease;
}
nav li.active {
  margin-left: 0;
}
nav li.active a {
  opacity: 1;
}
nav li.active a{
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
a.sitelink {
  display: none;
}
.menu-toggle svg rect {
  fill: var(--fontcolor);
}
body.mobilenav-open .menu-toggle svg rect {
  fill: #000;
}
body.start div.nav a {
  color: #fff;
  opacity: 1;
}
body.start div.nav {
  background: none;
}
body.overlay header,
body.start.mobilenav-open header {
  transform: translate(0, calc(-100vh + var(--navmargin)));
}
body.overlay .startslider {
  cursor: s-resize;
}
body.start nav li.active a {
  text-decoration: none;
}

/* Typography */
a, a:hover {
  color: var(--fontcolor);
  text-decoration: none;
}
h1, section.kontakt div.kontakt {
  font-size: 1.75rem;
  line-height: 0.95;
  letter-spacing: -0.05em;
}
section.kontakt div.kontakt {
  display: flex;
  flex-direction: row;
}
h1 {
  width: var(--leftcol);
}
h1, section.kontakt div.kontakt {
  font-weight: 400;
  font-style: normal;
  color: var(--fontcolor);
}
h2 {
  font-size: 1em;
  text-transform: uppercase;
}
div.left p,
div.left ul {
  margin-bottom: 1em;
}
div.left h2 {
  padding-top: 1em;
}
div.left h2:first-child {
  padding-top: 0;
}
div.left ul {
  padding-left: 1.2em;
}
div.left ul li {
  list-style-position: outside;
  list-style-type: '– ';
}
div.biene {
  background: var(--fontcolor);
  -webkit-mask-image: url(../img/biene.png);
  -webkit-mask-size: contain;
  mask-image: url(../img/biene.png);
  mask-size: contain;
  width: 60px;
  height: 40px;
  background-size: contain;
  transform: rotate(25deg);
  position: absolute;
  bottom: 16px;
  left: 0;
}
section.kontakt div.inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
}
div.kontakt p {
  margin-bottom: 34px;
}
section.kontakt dd,
section.kontakt dt {
  display: inline;
}
div.imprint {
  margin-bottom: 16px;
  transform: translateY(calc(100% - 16px));
  transition: transform 250ms;
}
div.imprint p, div.imprint button {
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
}
div.imprint button, 
div.imprint a,
section.kontakt a{
  border: none;
  background: none;
  padding: 0 0 16px 0;
  color: var(--fontcolor);
  transition: all 250ms ease;
  opacity: 0.5;
}
div.imprint.open {
  transform: translateY(0);
}


div.imprint div {
  visibility: hidden;
}

div.imprint.open div {
  visibility: visible;
}

div.inner div.adresse {
  margin-right: 16px;
}

/* Sliders */
div.swiper-slide img {
  width: 100%;
  height: 100%;
}

div.sliderstart {
  position: absolute;
  height: 100%;
  width: 100%;
}

div.sliderstart .swiper-slide img {
  object-fit: cover;
}

div.smallslider .swiper-slide img {
  object-fit:contain;
  object-position: right;
}

div.slidersmall {
  position: absolute;
  padding-bottom: calc(85.714% + 20px);
  width: 100%;
}

div.smallslider {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

div.projects {
  display: flex;
  justify-content: space-between;
  position: relative;
  height: calc(100vh - var(--innermargin) - 16px);
}

div.slideshow {
  margin: 0;
  position: relative;
  height: 100%;
  flex: 0 1 calc((100vh - var(--innermargin) - 16px) * 1.16666666);
}

div.slideshow .inner {
  position: relative;
  width: 100%;
  padding-bottom: 85.714%;
}

div.projectslider {
  position: absolute;
  width: 100%;
  height: 100%;
}

div.projectslider img {
  object-fit: contain;
  object-position: right;
}

div.projects div.legenden,
div.projects div.slideshow {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

div.captions {
  margin-top: 0.75em;
  width: 100%;
}

div.projects div.legenden {
  padding-right: 16px;
  flex: 1 0 30%;
  flex-direction: row;
  align-items: flex-end;
}

.smallslider .swiper-wrapper {
  height: calc(100% - 20px);
}

div.pagination {
  height: 20px;
  font-weight: 600;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  width: 100%;
  font-feature-settings: 'pnum' on, 'lnum' on;
  font-size: 0.5em;
  line-height: 1;
  letter-spacing: 0.05em;
}

div.smallslider .pagination {
  padding-bottom: 4px;
}

div.projects .pagination {
  margin-top: 0.7rem;
  flex: 0;
}

div.prev,
div.next {
  z-index: 10;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: none !important;
}

div.prev {
  cursor: w-resize;
}
div.next {
  cursor: e-resize;
}

div.smallslider div.prev,
div.smallslider div.next {
  height: calc(100% - 20px);
  top: 20px;
  position: absolute;
}

div.smallslider div.prev {
  width: 40%;
  left: 0;
}
div.smallslider div.next {
  width: 60%;
  left: 40%;
}

div.projectslider div.prev,
div.projectslider div.next {
  height: 100%;
  top: 0;
  position: absolute;
}

div.projectslider div.prev {
  left: 0;
  width: 40%;
}

div.projectslider div.next {
  left: 40%;
  width: 60%;
}

/* Selection */
::selection {
  color: var(--fontcolor); 
  background: #fff;
}

::-moz-selection {
  color: var(--fontcolor); 
  background: #fff;
}

/* Hide Scrollbar */
main::-webkit-scrollbar {
  display: none;
}
main {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

@media only screen and (min-width: 1800px) {
  :root {
      --slidertop: calc(100vh - var(--innermargin) - ((1768px * 0.416 - 8px) * 0.85714) - 36px);
      --leftcol: 876px;
  }
  div.grid {
    grid-template-columns: 876px 1fr 727px;
  }
  div.left {
    grid-column: 1;
  }
  div.right {
    grid-column: 3;
  }
}

@media only screen and (max-height: 900px ) and (min-width: 1800px) {
  div.left {
    margin-top: 10em;
  }
}

@media only screen and (min-aspect-ratio: 7/4 ) and (max-width: 1800px){
  div.left {
      margin-top: 14em;
  }
}

@media only screen and (max-width: 1800px) {
  :root {
    --slidertop: calc(100vh - var(--innermargin) - ((var(--viewportpadding) * 0.416 - 8px) * 0.85714) - 32px);
    font-size: 18px;
    --viewportpadding: calc(100vw - 24px);
  }
  .container {
    padding: 0 12px;
  }
  div.grid {
    grid-gap: 12px;
  }
}

@media only screen and (max-width: 1200px) {
  :root {
    font-size: 16px;
    --navmargin: 12px;
  }
}

@media only screen and (max-aspect-ratio: 5/4 ) {
  :root {
      --slidertop: calc(100vh - var(--innermargin) - ((var(--viewportpadding) * 0.5 - 8px) * 0.85714) - 36px);
  }
  div.right { grid-column-start: 7}
  div.left {padding-right:16px;}
  h1.lead { width: 90%;}
}

@media only screen and (max-aspect-ratio: 5/4 ) and (max-width: 1800px) {
  div.left {padding-right: 12px;}
}

@media only screen and (max-width: 750px ) {
  :root {
    font-size: 14.5px;
    --innermargin: 75px;
  }
  .container {
    padding: 0 8px;
  }
  header {
    mix-blend-mode: normal;
  }
  h1.lead {
    width: 100%;
    position: relative;
    padding: 0 0 3em 0;
    letter-spacing: -0.025em;
  }

  div.grid {
      display: flex;
      flex-direction: column-reverse;
  }
  div.left{
      margin-top: 0;
  }
  div.sticky {
    position: relative;
    top: 0;
    margin-bottom: 1em;
  }
  div.slidersmall {
    position:relative;
  }
  div.smallslider {
    flex-direction: column-reverse;
  }
  div.smallslider div.next {
    top:0;
  }
  div.smallslider .swiper-slide img,
  div.projectslider .swiper-slide img {
    object-position: left;
  }

  div.pagination {
    justify-content: flex-start;
    font-size: 1rem;
    font-weight: 400;
  }

  div.smallslider div.pagination {
    margin-top: 0.25em;
  }

  div.projects {
    flex-direction: column-reverse;
    height: auto;
  }
  div.projects div.legenden, 
  div.projects div.slideshow {
    justify-content: flex-start;
    flex: auto;
  }
  div.projects div.slideshow .inner {
    position: relative;
  }
  div.projects div.legenden {
    flex-direction: column-reverse;
    padding-right: 0;
    align-items: flex-start;
  }
  div.projects div.pagination {
    margin-top: 0;
  }
  div.biene {
    bottom: 8px;
  }
  section.kontakt div.kontakt {
    flex-direction: column;
  }
  div.imprint button, div.imprint a, section.kontakt a {
    padding: 0 0 8px 0;
  }


  /* Mobile Nav */
  body header div.nav {
    height: 40px;
    background: none;
  }

  body.mobilenav-open {
    overflow: hidden;
  }

  body.mobilenav-open div.nav {
    height: 100%;
  }

  button.menu-toggle {
    display: flex;
    position: absolute;
    z-index: 10;
  }

  body.mobilenav-open div.close {
    display: block;
  }

  nav {
    visibility: hidden;
    height: auto;
    background: var(--bgcolor1);
    transform: translate(0, -100%);
    transition: transform 350ms ease-out 300ms, visibility 0s 650ms;
    padding: 4em 8px 8px 8px !important;
  }
  
  body.mobilenav-open header nav {
    visibility: visible;
    background: var(--bgcolor1);
    transform: translate(0, 0);
    transition: transform 350ms ease-out;
  }
  header nav ul {
    flex-direction: column;
    width: 100%;
    align-items: flex-start;
    height: 100%;
    opacity: 0;
    transform: translate(0, 15px);
    transition: all 150ms;
  }
  body.mobilenav-open header nav ul {
    opacity: 1;
    transform: translate(0, 0);
    transition: all 250ms 300ms;
  }
  header nav a {
    font-size: 2.25em;
    letter-spacing: -0.05em;
    line-height: 1;
    transition: none;
  }
  header li.active a,
  header li a {
    text-decoration: none;  }
  body.mobilenav-open section#content,
  body.mobilenav-open .sliderstart {
    filter: brightness(0.95) grayscale(1);
    transition: opacity 500ms ease-out, filter 350ms ease-out;
  }
  body.mobilenav-open article {
    transform: scale(0.98);
    transition: all 350ms ease-out;
  }
}


@media screen and (max-width: 900px) {
  section.kontakt div.inner {
    flex-direction: column;
  }
}

@media screen and (max-width: 900px) and (max-aspect-ratio: 6/5) {
  div.projects div.pagination {
    justify-content: flex-start;
  }
  div.projects {
    flex-direction: column-reverse;
    height: auto;
  }
  div.projects div.legenden, 
  div.projects div.slideshow {
    justify-content: flex-start;
    flex: auto;
  }
  div.projects div.slideshow .inner {
    position: relative;
  }
  div.projects div.legenden {
    flex-direction: column-reverse;
    padding-right: 0;
    align-items: flex-start;
    padding-top: 0.25em;
  }
  div.projects div.pagination {
    margin-top: 0;
  }
}

/*  Hover only on desktop */
@media screen and (hover: hover) and (min-width: 750px) {
  body.start div.nav:hover {
    height: 50px;
  }
  body.start div.nav:hover a {
    color: var(--fontcolor);
    opacity: 1;
  }
  body.start div.nav ul:hover a {
    color: var(--fontcolor);
    opacity: 0.4;
  }
  body.start div.nav ul a:hover {
    color: var(--fontcolor);
    opacity: 1;
  }
  nav ul:hover a {
    opacity: 0.4;
  }
  nav ul a:hover {
    opacity: 1;
  }
  nav ul:hover li.active a {
    opacity: 0.4;
  }
  nav ul li.active a:hover {
    opacity: 1;
  }
  div.imprint button:hover,
  section.kontakt a:hover {
    opacity: 1;
  }
}