@import "https://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,700,700italic";

:root {
  --grid-gap: 40px;
  --grid-template-columns: repeat(12, 1fr);
  --padding-default: 2vw 3vw;
  --content-width-max: 1500px;
  --width-max-page:2100px;

  --padding-section-footer:1rem;
  --padding-list-images-entries:20px 0 20px 0;

  --breakpoint-s: 576px;
  --breakpoint-m: 768px;
  --breakpoint-l: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-xxl: 1400px;


  --fontSizeLogo:1.2rem;
  --font-size-headline-1:1.2rem;
  --font-size-headline-2-grid:0.875rem;
  --font-size-headline-2:1.2rem;
  --font-size-headline-3:1rem;

  --font-size-figcaption:1.1875rem;
  --font-size-navigation-level-1-desktop:1.1875rem;
  --font-size-navigation-level-1-mobile:1.5625rem;
  --font-size-navigation-level-2-desktop:1.1875rem;
  --font-size-navigation-level-2-mobile:1.5625rem;
  --font-size-footer:1rem;

  --picture-portrait-max-width:750px;
  --picture-landscape-max-width:1150px;

  --body-background:#f8f2ec;
  --body-background-decimal:248, 242, 236;

  --breakpoint-s:576px;
  --breakpoint-m:768px;
  --breakpoint-l:992px;

  

  --font-size-navigation-level-1:var(--font-size-navigation-level-1-mobile);
  --font-size-navigation-level-2:var(--font-size-navigation-level-2-mobile);

  @media (min-width: 768px){
    --font-size-navigation-level-1:var(--font-size-navigation-level-1-desktop);
    --font-size-navigation-level-2:var(--font-size-navigation-level-2-desktop);
  }



}

*,
*:after,
*:before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html{
  font-size: 16px;
}
body {
  padding: 0;
  margin: 0;
  font-size:1.165625rem;
  font-family: Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;
  color: #000;
  letter-spacing:0.02em;
  background-color:var(--body-background);
}
p {
  margin: 0 0 1rem 0;
}
a {
  color: #000;
  text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}
h1{
  font-size:var(--font-size-headline-1);
  font-weight:400;
}

h2{
  .element-grid .col-3 & {
    font-size:var(--font-size-headline-2-grid);
    font-weight:400;
  }
  
  font-size:var(--font-size-headline-2);
  font-weight:700;

  
}
h3{
  font-size:var(--font-size-headline-3);
}
ul {
  padding: 0;
  margin: 0 0 0 0;
  list-style: none;
}
ul li {
  margin: 0 0 0 0;
}
img {
  display: block;
  max-width: 100%;
  height:auto;
}
.font-light {
  font-weight: 300;
}
.font-regular {
  font-weight: 400;
}
.font-heavy {
  font-weight: 700;
}
.align-right {
  text-align: right;
}
#page-wrapper {
  opacity:0;
  transition:opacity 0.3s ease;

  .is-loaded & {
    opacity:1;
  }
}

/* Header */
.page-header {
  background-color:var(--body-background);
  padding: var(--padding-default);
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:2;
  transform:translateY(0);
  transition:transform 0.3s ease-in-out;

  @media (min-width: 768px){
    background-color:transparent;
  }

  &.scrolled {
    transform:translateY(-100%);
  }
  
  .page-header-inner{
    display:flex;
    justify-content: space-between;
    align-items: center;
    
  }

  .container-logo{
    

    .logo {
      font-size:var(--fontSizeLogo);
    }
  }

  .container-navigation{
    

    .hamburger {
      padding: 15px 15px;
      display: block;
      cursor: pointer;
      transition-property: opacity, filter;
      transition-duration: 0.15s;
      transition-timing-function: linear;
      font: inherit;
      color: inherit;
      text-transform: none;
      background-color: transparent;
      border: 0;
      margin: 0;
      overflow: visible;
      position: relative;
      z-index: 50;
      
      @media (min-width: 768px){
        display: none;
      }

      .hamburger-label{
        display:none;
      }

      .hamburger-box {
        width: 35px;
        height: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        cursor: pointer;
      }

      .hamburger-box span {
        display: block;
        width: 100%;
        height: 1px;
        background-color: #000000;
        transition: all 0.3s ease-in-out;
      }

      &.is-open .hamburger-top-bun {
        transform: translateY(10px) rotate(45deg);
      }

      &.is-open .hamburger-patty {
        opacity: 0;
        transform: translateX(-20px);
      }

      &.is-open .hamburger-bottom-bun {
        transform: translateY(-10px) rotate(-45deg);
      }
      
    }

    .navigation-main {
      position: fixed;
      right: -0;
      top: 0;
      width: 100%;
      transform: translateX(100%);
      transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
      z-index: 40;
      background-color:var(--body-background);
      height:100vh;

      @media (min-width: 768px){
        
        position:relative;
        top:auto;
        right:auto;
        background-color:transparent;
        height:auto;
        transform:none;
      }

      .nav-list-level-1{

        margin-top:100px;

        @media (min-width: 768px){
          margin-top:0;
          display:flex;
        justify-content: flex-end;
        }
        
        

        .nav-entry-level-1{
          margin:0 1.5rem;
          position:relative;
          padding:1.875rem 0;
          border-bottom:1px solid #000000;

          @media (min-width: 768px){
            padding:0;
            border-bottom:0;
          }

          &:last-child{
            @media (min-width: 768px){
              margin-right:0;
            }
            
          }

          
          
          > a{
            font-size:var(--font-size-navigation-level-1);
            opacity:1;
            transition:opacity 0.3s ease;

            &:hover,
            &.nav-selected{
              opacity:0.3;
            }
          }

          &.hover-to-open{

            > a{
              display:flex;
              align-items:center;

              @media (min-width: 768px){
                display:block;
              }

              &:after{
                content:"";
                display:block;
                width:10px;
                height:10px;
                border-right:1px solid #000000;
                border-bottom:1px solid #000000;
                transform:rotate(-45deg);
                margin-left:15px;

                @media (min-width: 768px){
                  display:none;
                }
              }
            }

            &:hover{
              .nav-list-level-2{
                display:block;
              }
            }
          }

        }

        .nav-list-level-2{
          position:fixed;
          top:100px;
          left:0;
          background-color:var(--body-background);
          width:100%;
          z-index:9;
          transform:translateX(100%);
          transition:transform 0.3s ease;
          
          &.open{
            transform:translateX(0);
          }

          @media (min-width: 768px){
            padding-top:10px;
            background-color:transparent;
            display:none;
            position:absolute;
            border-bottom:0;
            top:auto;
            left:auto;
            width:auto;
            z-index:0;
            transform:none;
          }

          .nav-entry-level-2 {
            padding:1.875rem 0;
            border-bottom:1px solid #000000;
            margin:0 2rem;
            

            @media (min-width: 768px){
              padding:0;
              border-bottom:0;
              display:flex;
              justify-content: end;
              margin:0;
            }

            &.back-link{
              @media (min-width: 768px){
                display:none;
              }

              > span{
                display:flex;
                align-items:center;

                &:before{
                  content:"";
                  display:block;
                  width:10px;
                  height:10px;
                  border-left:1px solid #000000;
                  border-bottom:1px solid #000000;
                  transform:rotate(45deg);
                  margin-right:15px;
                }
              }
            }

            > a {
              font-size:var(--font-size-navigation-level-2);

              &:hover,
              &.nav-selected{
                opacity:0.3;
              }
            }

            
          }
        }

        
        
      }
    }

    .menu-open & {
      .navigation-main {
        transform: translateX(0);
      }
    }


  }

  

  
}

.content-wrapper{
  padding-top:var(--height-page-header);
}

/* Footer */
.page-footer {
  background: transparent;

  .element-text{
    p{
      font-size:0.8rem;
    }
  }
}

/* Sections */
.section {
	padding: var(--padding-default);

  .section-inner{
    max-width: var(--content-width-max);
    margin: 0 auto;

    .element{
      &:last-child{
        margin-bottom:0;
      }
    }
  }

  &.section-footer{
    padding:var(--padding-section-footer);
    
    .section-inner{
      display:flex;
      justify-content:center;
    }
  }

  &.section-full{
    .section-inner{
      max-width:100%;
    }
    
  }

  &.section-full-height{
    height:calc(100svh - var(--height-page-header) - var(--height-page-footer));

    .section-inner{
      height:100%;

      .element-grid{
        height:100%;

        .row{
          height:100%;
          align-items: center;;
        }
      }
    }
  }
  
  
}

/* Elements */
.element,
.element-list,
.element-grid {
  margin-bottom: 4rem;
}

.element-picture{

  figcaption{
    padding:0.5rem 0;
    display:flex;
    justify-content:center;

    span{
      font-size:var(--font-size-figcaption);
      
    }
  }

  picture{
    &[data-picture-format="portrait"],
    &[data-picture-format="landscape"]{
      display:flex;
      justify-content: center;
    }

    &[data-picture-format="portrait"]{
      img{
        
        @media (min-width: 768px){
          max-width:var(--picture-portrait-max-width);
        }
      }
    }

    &[data-picture-format="landscape"]{
      img{

        @media (min-width: 768px){
          max-width:var(--picture-landscape-max-width);
        }
        
      }
    }

  }

  &[data-picture-format="portrait"]{
    display:flex;
    justify-content: center;

    picture{
      img{
        max-width:var(--picture-portrait-max-width);
      }
      
    }
  }

  &[data-picture-format="landscape"]{
    display:flex;
    justify-content: center;

    picture{
      img{
        max-width:var(--picture-landscape-max-width);
      }
      
    }
  }

  &.align-left{
    picture{
      justify-content: left;
    }
  }
  &.width-200{
    picture{
      img{
        max-width:200px;
      }
    }
  }
  &.width-600{
    picture{
      img{
        

        @media (min-width: 768px ) {
          max-width:600px;
        }
      }
    }
  }
  
}

.element-headline{
  &.fixed{
    @media (min-width: 768px ) {
      position:fixed;
      bottom:3.5vh;
      /*left:3vw;*/
      left:0;
      margin-bottom:0;
      /*background-color:rgba(var(--body-background-decimal),0.8);*/
      /*background: linear-gradient(to right, #f8f2ec, rgba(248, 242, 236, 0));*/
      padding:1rem 3vw;
    }
    
    /*transition:transform 0.3s ease;
    transform:translateX(0);*/

    .footer-is-visible & {
      /*transform:translateX(-100%);*/
    }
  }
  
}

.element-text {

  &[data-has-headline="1"]{
    margin-bottom:1.5rem;
  }

  ul {
    margin: 0 0 1rem 0;
  }
  li:before {
    content: "–";
  }
  p:last-child{
    margin-bottom: 0;
  }
  a {
    text-decoration: underline;
    opacity:1;
    transition:opacity 0.3s ease;

    &:hover{
      opacity:0.3;
    }
  }

  &.center{
    > p {
      text-align: center;
    }
  }
  
}
.element-list {
  .list {
    display: grid;
    grid-template-columns: var(--grid-template-columns);
    gap:var(--grid-gap);

    .col-3 {
      grid-column:span 12;
    }

    @media (min-width: 576px ) {
      & {
        .col-3 {
          grid-column:span 6;
        }
      }
    }

    @media (min-width: 1200px ) {
      & {
        .col-3 {
          grid-column:span 3;
        }
      }
    }

  }

  .list-picture {
    
    picture{

      img {
        width:100%;
        
      }
      &[data-picture-format="portrait"],
      &[data-picture-format="landscape"]{
        display:flex;
        justify-content: center;
      }

      &[data-picture-format="portrait"]{
        img{
          max-width:var(--picture-portrait-max-width);
        }
      }

      &[data-picture-format="landscape"]{
        img{
          max-width:var(--picture-landscape-max-width);
        }
      }

    }
  }

  .list-objekte{
    grid-template-columns:1fr;

    @media (min-width: 768px){
      grid-template-columns:repeat(5, 1fr);
    }

    .list-entry{
      grid-column:span 1;

      .list-picture{
        img{
          aspect-ratio: 0.6666;
          object-fit:cover;
        }
      }
    }

    .list-data-wrapper{

      .list-date{
        display:none;
      }
      .list-title{
        font-weight:400;
        padding:15px 0 0 0;

      }
      .list-description{
        display:none;
      }
    }
  }

  .list-images{
    display:block;

    .list-entry{
      padding:var(--padding-list-images-entries);
    }
  }
}

.element-grid {

  &.align-bottom{
    .row{
      align-items:end;
    }
  }

  .row {
    display: grid;
    grid-template-columns: var(--grid-template-columns);
    gap:10px;
    row-gap:40px;

    .col-1{
      grid-column: span 12;
    }
    
    .col-3 {
      grid-column:span 12;
    }
    .col-4 {
      grid-column:span 12;
    }
    .col-6 {
      grid-column:span 3;
    }
    @media (min-width: 768px ) {
      gap:20px;
      .col-1{
        grid-column:7 / span 6;
      }
      .col-3 {
        grid-column:span 6;
      }
    }

    @media (min-width: 1100px ) {
      gap:var(--grid-gap);

      & {
        .col-3 {
          grid-column:span 3;
        }
        .col-4 {
          grid-column:span 4;
        }
        .col-6 {
          grid-column:span 6;
        }
      }
    }
  }
}