/* Special Table */
.ce-table.-special {
  & td:first-child {
    background-color: rgb(var(--c-primary));
    color: rgb(var(--c-neutral-lightest));
    font-family: var(--f-family-2);
    font-size: var(--f-size-l-1);
  }
}

/* Panorama Scrollbild */
.imagefullwidth {
  position: relative;

  & .imagefullwidth__text {
    position: absolute;
    bottom: 3em;
    right: 3%;
    width: 100%;
    text-align: right;
    font-size: 1vw;
  }

  & .imagefullwidth__image {
    height: 36vw;
    max-height: 500px;
    width: 100%;
  }
}

/* Contact */
.contact {
  display: grid;
  grid-gap: 2rem;
  align-items: start;

  & .contact__item {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: 1fr 3fr;

    & .contact__title {
      text-transform: uppercase;
      font-size: var(--f-size-l-1);
      color: rgb(var(--c-primary));
    }
  }
}

/* Slogan */
.header__slogan {
  display: none;
}

.slogan-line1 {
  color: rgb(var(--c-neutral-lightest));
  font-family: var(--f-family-2);
  font-size: var(--f-size-l-5);
  line-height: var(--f-size-l-1);
}

.slogan-line2 {
  color: rgb(var(--c-neutral-lightest));
  font-family: var(--f-family-2);
  font-size: 450%;
  text-transform: uppercase;
  line-height: var(--f-size-l-1);
}

/* IconBar */
.header > .shortcutarea {
  height: 85px;
  width: 100%;
  position: absolute;
  bottom: 0;
  z-index: 400;
  overflow: hidden;

  & .savethedate {
    width: 100%;
    line-height: 10px;
    position: absolute;
    bottom: 0;
    left: 0;
    overflow: hidden;
    text-align: center;
    padding: 4px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background: rgb(var(--c-primary));
    color: rgb(var(--c-neutral-lightest));
    float: left;

    & .savethedate-date {
      font-family: var(--f-family-2);
      margin-right: .3rem;
      font-size: var(--f-size-l-2);
      line-height: 100%;
    }

    & .savethedate-subtitle {
      font-size: var(--f-size-s-1);
      line-height: 120%;
      font-family: var(--f-family-3);
    }
  }

  & .shortcut-innerwrap {
    width: 100%;
    position: absolute;
    left: 0;
    height: 40px;

    & .shortcut-table {
      height: 100%;
      display: table;
      width: 100%;
      table-layout: fixed;

      & .shortcut-item {
        padding-left: 5px;
        padding-right: 5px;
        height: 100%;
        display: table-cell;
        color: #fff;
        text-align: center;
        vertical-align: middle;

        & a {
          display: block;
          height: 100%;
        }

        & .shortcut-icon {
          height: 25px;
          line-height: 25px;
          margin-bottom: 5px;
          position: relative;

          & img {
            position: absolute;
            top: 0;
            left: 50%;
            height: 25px;
            width: 25px;
            margin-left: -12px;

            &.shortcut-image-hover {
              display: none;
            }
          }

          & .font__fas {
            font-size: 25px;
            color: rgb(var(--c-neutral-lightest));
          }
        }

        & .shortcut-title {
          display: none;
          white-space: nowrap;
          font-size: var(--f-size-s-2);
          color: rgb(var(--c-neutral-lightest));
          font-family: var(--f-family-3);
        }
      }
    }
  }
}

/* Textimage Fullwidth */
.textimage {
  grid-template-columns: 1fr;
  overflow: hidden;
  display: grid;

  &:nth-child(2n-1) {
    background: rgb(var(--c-neutral-lighter));
  }

  & .textimage-textwrap {
    padding: 2rem 0;
  }

  & .textimage-image {
    background-position: center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    position: relative;
    height: 50vw;
    min-height: 300px;
  }
}

/* Services */
.services {
  display: grid;
  grid-gap: 1px;

  & .service__item {
    height: 50px;
    overflow: hidden;

    & a {
      display: block;
      position: relative;
      width: 100%;
      height: 100%;
      transition: background-color 0.3s ease;

      &::before {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(var(--c-neutral-darkest), .3);
        transition: opacity 0.3s ease;
        opacity: 0;
      }
    }

    & img {
      object-fit: cover;
      max-width: inherit;
      width: 100%;
      height: 100%;
    }

    & .service__textwrap {
      position: absolute;
      background-color: rgba(var(--c-primary), 0.8);
      left: 0;
      width: 100%;
      height: 100%;
      bottom: 0;
      padding: 0.5rem 1rem;
      display: flex;
      align-items: center;
      z-index: 1;

      & h4, & h5 {
        color: rgb(var(--c-neutral-lightest));
        font-size: var(--f-size-l-3);
      }

      & h4 {
        font-family: var(--f-family-2);
      }

      & h5 {
        font-family: var(--f-family-3);
      }
    }
  }
}

@media (hover: hover) {
  .header > .shortcutarea {
    & .shortcut-innerwrap {
      & .shortcut-table {
        & .shortcut-item:hover {
          & .shortcut-title {
            color: rgb(var(--c-primary));
          }

          & .shortcut-icon {
            & .font__fas {
              color: rgb(var(--c-primary));
            }

            & img {
              &.shortcut-image-hover {
                display: block;
              }
            }
          }
        }
      }
    }
  }

  .services {
    & .service__item:hover {
      & a::before {
        opacity: 1;
      }
    }
  }
}

@media (min-width: 400px) {

  /* Slogan */
  .header__slogan {
    display: block;
    font-size: 1vw;
  }

  /* Services */
  .services {
    grid-template-columns: 1fr 1fr;

    & .service__item {
      height: inherit;
      max-height: 250px;

      & .service__textwrap {
        height: auto;

        & h4 {
          font-size: var(--f-size-l-1);
        }

        & h5 {
          font-size: var(--f-size);
        }
      }

    }

  }
}

@media (min-width: 520px) {
  /* Contact */
  .contact {
    grid-template-columns: 1fr 1fr;

    & .contact__item {
      grid-template-columns: 1fr;
    }
  }
}

@media (min-width: 640px) {

  /* Special Table */
  .ce-table.-special {

    & td:first-child {
      width: 35%;
    }

    & td:last-child {
      width: 65%;
    }
    
  }

  /* IconBar */
  .header > .shortcutarea {
    height: 115px;

    & .shortcut-innerwrap {
      height: 65px;

      & .shortcut-table {
        display: flex;
        justify-content: space-around;

        & .shortcut-item {
          & .shortcut-title {
            display: block;
          }
        }
      }
    }
  }
}

@media (min-width: 720px) {
  /* Contact */
  .contact {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 800px) {

  /* Textimage Fullwidth */
  .textimage {
    grid-template-columns: 50% 50%;

    &.textimage-textright {
      direction: rtl;

      & .textimage-text {
        direction: ltr;
      }
    }

    & .grid__main {
      display: flex;
      align-items: center;

      & .textimage-textwrap {
        padding: 4rem 4vw;
      }
    }

    & .textimage-image {
      height: 100%;
      min-height: 30vw;
    }
  }

}

@media (min-width: 900px) {

  /* Services */
  .services {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(6, 100px);

    & .service__item {
      height: 100%;
      max-height: inherit;


      &:nth-child(8n) {
        grid-column: 4;
        grid-row: 4 / 7;
      }

      &:nth-child(8n-1) {
        grid-column: 3;
        grid-row: 3 / 7;
      }

      &:nth-child(8n-2) {
        grid-column: 2;
        grid-row: 5 / 7;
      }

      &:nth-child(8n-3) {
        grid-column: 1;
        grid-row: 4 / 7;
      }

      &:nth-child(8n-4) {
        grid-column: 4;
        grid-row: 1 / 4;
      }

      &:nth-child(8n-5) {
        grid-column: 3;
        grid-row: 1 / 3;
      }

      &:nth-child(8n-6) {
        grid-column: 2;
        grid-row: 1 / 5;
      }

      &:nth-child(8n-7) {
        grid-column: 1;
        grid-row: 1 / 4;
      }

      & .service__textwrap {

        & h4, & h5 {
          font-size: var(--f-size);
        }

      }

    }
  }

}

@media (min-width: 1024px) {

  /* Contact */
  .contact {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Services */
  .services {
    & .service__item {
      & .service__textwrap {
        width: 90%;

        & h4 {
          font-size: var(--f-size-l-1);
        }
      }
    }
  }

  /* IconBar */
  .header > .shortcutarea {
    height: 85px;

    & .savethedate {
      width: 320px;
      height: 85px;
    }

    & .shortcut-innerwrap {
      margin-left: 320px;
      height: 85px;
      width: calc(100% - 320px);

      & .shortcut-table {
        & .shortcut-item {
          & a {
            display: flex;
            flex-direction: column;
            justify-content: center;
          }
        }
      }
    }
  }
}


@media (min-width: 1440px) {
  /* IconBar */
  .header > .shortcutarea {
    height: 105px;

    & .shortcut-innerwrap {
      margin-left: 410px;
      height: 105px;
      width: calc(100% - 410px);

      & .shortcut-table {
        & .shortcut-item {
          & .shortcut-icon {
            height: 35px;
            line-height: 35px;

            & img {
              height: 35px;
              width: 35px;
            }

            & .font__fas {
              font-size: 35px;
            }
          }

          & .shortcut-title {
            font-size: var(--f-size-l-2);
          }
        }
      }
    }

    & .savethedate {
      width: 410px;
      height: 105px;

      & .savethedate-subtitle {
        font-size: var(--f-size);
      }

      & .savethedate-date {
        font-size: var(--f-size-l-4);
      }

    }
  }

  /* Services */
  .services {
    grid-template-rows: repeat(6, 120px);
  }
}

@media (min-width: 1540px) {

  /* Panorama Scrollbild */
  .imagefullwidth {
    & .imagefullwidth__text {
      font-size: 100%;
    }
  }

  /* Text-Bild volle Breite */
  .textimage {

    &.textimage-textleft {
      grid-template-columns: 55% 45%;

      & .textimage-textwrap {
        padding-left: calc((100vw - 1440px) / 2);
      }
    }

    &.textimage-textright {
      grid-template-columns: 45% 55%;

      & .textimage-textwrap {
        padding-right: calc((100vw - 1440px) / 2);
      }
    }

    & .textimage-image {
      min-height: 500px;
    }
  }
}