@font-face {
  font-family: "OpenSans-Regular";
  src: url("font/OpenSans-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}
@font-face {
  font-family: "OpenSans-SemiBold";
  src: url("font/OpenSans-SemiBold.woff2") format("woff2");
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}
@font-face {
  font-family: "OpenSans-Bold";
  src: url("font/OpenSans-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}
@font-face {
  font-family: "OpenSansCondensed-Light";
  src: url("font/OpenSansCondensed-Light.woff2") format("woff2");
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}
:root {
  --scrollbarBG: #c7c7da;
  --grund: #ffffff;
  --gelb_1: #fbe6b6;
  --hellblau: #bdcfd7;
  --petrol: #73a9b0;
  --turkis: #86a4b9;
  --anthrazit: #666;
}
html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbarBG) var(--grund);
}
body {
  font-family: "OpenSans-Regular", sans-serif;
  font-variation-settings: "wght" 700;
  font-style: normal;
  color: var(--anthrazit);
  width: 100%;
  margin: 0;
  padding: 0;
  background: var(--grund);
  font-size: 1em;
}
body::-webkit-scrollbar {
  width: 7px;
}
body::-webkit-scrollbar-track {
  background: var(--dunkelgruen);
}
/* scrollbar*/
body::-webkit-scrollbar-thumb {
  background-color: var(--grund);
  border-radius: 6px;
  /*  border: 1.5px solid var(--scrollbarBG);*/
}
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  transition: all 0.5s ease-in-out;
}
/*Allgemein*/
img {
  width: 100%;
  height: auto;
}
p {
  line-height: 1.3;
  hyphens: auto;
  hyphenate-limit-chars: 4;
  &:not(:first-of-type) {
    margin-top: 10px;
  }
  &.balance {
    text-wrap: balance;
  }
}
h1 {
  font-size: clamp(25px, 5vw, 30px);
  text-align: left;
  margin: 3vw 0;
  font-family: "OpenSans-Semibold";
}
h2 {
  font-size: clamp(30px, 5vw, 45px);
  margin-bottom: 20px;
  font-family: "OpenSans-SemiBold";
}
h3 {
  font-size: clamp(25px, 4vw, 35px);
  margin-bottom: 20px;
}
li {
  list-style: none;
  hyphens: auto;
  hyphenate-limit-chars: 4;
  max-width: 550px;
}
a {
  text-decoration: none;
  color: var(--anthrazit);
  &.active {
    color: var(--petrol);
    font-weight: bold;
  }
}
.col_60 {
  width: 60% !important;
}
.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.justify_around {
  justify-content: space-around;
}
.justify_center {
  justify-content: center;
}
.justify_end {
  justify-content: flex-end;
}
.justify_start {
  justify-content: flex-start;
}
.align_start {
  align-items: flex-start;
}
.align_end {
  align-items: flex-end;
}
.bold {
  font-weight: 700;
}
.petrol {
  background: var(--petrol);
  & h1 {
    color: var(--grund);
    margin-bottom: 0;
  }
}
.turkis {
  background: var(--turkis);
}
.hellblau {
  background: var(--hellblau);
}
.gelb {
  background: var(--gelb_1);
}
.color_hellblau {
  color: var(--hellblau);
}
.color_petrol {
  color: var(--petrol);
}
.color_gelb {
  color: var(--gelb_1);
}
.color_weiss {
  color: var(--grund);
}
/*header*/
header {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: minmax(3vw, 1fr);
  background: var(--grund);
  z-index: 4;
  position: relative;
  @media only screen and (min-width: 768px) {
    position: sticky;
    top: -80px;
  }
  @media only screen and (max-width: 850px) and (orientation: landscape) {
    position: relative;
    top: 0;
  }
  & .logo {
    grid-column: 1/13;
    grid-row: 3;
    & img {
      width: clamp(230px, 30vw, 450px);
    }
  }
  & nav {
    grid-column: 1/12;
    grid-row: 1;
    position: relative;
    & .ham {
      width: 50px;
      height: 30px;
      flex-direction: column;
      cursor: pointer;
      display: none;
      & span {
        display: block;
        width: 100%;
        height: 4px;
        border-radius: 2px;
        background: var(--anthrazit);
      }
    }
    & .drop {
      margin: 50px 0 0 clamp(25px, 5vw, 80px);
    }
    & ul {
      display: flex;
      padding-right: 5.5vw;
      flex-direction: row;
      align-items: flex-start;
      justify-content: flex-start;
      & li {
        margin-right: 3vw;
        & a {
          font-size: 1.1em;
        }
      }
    }
    @media only screen and (max-width: 550px) {
      & .ham {
        display: flex;
        margin: 30px;
      }
      & .drop {
        margin: 0;
        transform: translateX(-150%);
      }
      & ul {
        flex-direction: column;
        position: absolute;
        padding: 10px 30px;
        z-index: 5;
        background: var(--grund);
        & li {
          margin: 0 0 15px 0;
        }
      }
      &.da {
        & .drop {
          transform: translateX(0);
        }
      }
    }
  }
  &.oben {
    @media only screen and (min-width: 768px) {
      & img {
        width: clamp(170px, 20vw, 250px);
        @media only screen and (max-width: 1030px) {
          transform: translatex(30vw);
        }
      }
      & ul {
        transform: translateY(5vw);
        @media only screen and (max-width: 1030px) {
          transform: translateY(9vw);
        }
      }
    }
  }
}
/*main*/
main {
  width: 100%;
  margin-top: 10px;
  & section {
    display: flex;
    flex-direction: row;
    justify-content: center;
    &:last-of-type {
      margin-bottom: 100px;
    }
    & article {
      width: clamp(310px, 90vw, 1250px);
      margin: 60px auto 70px;
      & .bild_cont {
        display: flex;
        gap: min(3vw, 30px);
        width: 80%;
        margin: 0 auto;
        & img,
        & div {
          width: 20%;
          aspect-ratio: 1/1;
          object-fit: cover;
        }
        & div {
          position: relative;
          & img {
            aspect-ratio: 1/1;
            object-fit: cover;
            width: 100%;
            opacity: 20%;
            transform: scale(1);
            position: absolute;
            transition: opacity 3s 1s, transform 3s 1s;
          }
          @starting-style {
            img {
              opacity: 0;
              transform: scale(0);
            }
          }
          &:nth-of-type(2) {
            & img {
              transition: opacity 3s 3s, transform 3s 3s;
            }
          }
          &:nth-of-type(3) {
            & img {
              opacity: 75%;
              transition: opacity 3s 1s, transform 3s 1s; /*3s 5s, transform 3s 5s*/
            }
          }
          &:nth-of-type(4) {
            & img {
              transition: opacity 3s 7s, transform 3s 7s;
            }
          }
        }
      }
      & .text {
        max-width: clamp(310px, 50%, 600px);
        margin: 0 auto;
      }
      &.inhalt {
        & div {
          flex: 1;
        }
        & div:nth-of-type(1) {
          & img,
          & div {
            width: 70%;
            aspect-ratio: 3.5/4;
            object-fit: contain;
          }
        }
        & div:nth-of-type(2) {
          flex: 3;
          padding: 0 5%;
        }
        & div:nth-of-type(3) {
          & img {
            aspect-ratio: 1/1;
            object-fit: cover;
          }
        }
      }
      & ul {
        padding-left: 8px;
        & li {
          list-style-type: disc;
          margin-bottom: 5px;
        }
      }
    }
  }
}
.nachOben {
  position: fixed;
  bottom: 35px;
  right: 30px;
  width: 25px;
  height: 25px;
  transform: scale(0, 0);
  transition: transform 0.2s ease-out;
  cursor: pointer;
  &.hoch {
    transform: scale(1, 1);
    z-index: 3;
  }
}
/*footer*/
footer {
  background: var(--turkis);
  display: flex;
  justify-content: center;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 2;
  height: max-content;
  flex-wrap: wrap;
  border-top: var(--grund) 16px solid;
  & .cont {
    width: max-content;
    position: relative;
    & a,
    & p {
      color: var(--grund);
      margin: 10px 1.7vw;
      font-size: 0.85em;
      &.active {
        color: var(--anthrazit);
      }
    }
    & span {
      color: var(--grund);
    }
  }
}

@media only screen and (max-width: 550px) {
  header {
    & .logo {
      grid-row: 1;
      & a {
        position: relative;
        z-index: 9;
        margin-left: 15vw;
      }
    }
  }
  main {
    & section {
      & article {
        &.inhalt {
          & div {
            flex: 1 1 80%;
            margin-bottom: 10px;
          }
          & div:nth-of-type(1) {
            place-content: center;
            display: flex;
            & img {
              width: 40%;
            }
          }
        }
        & .bild_cont {
          width: 100%;
          justify-content: space-between;
          & div,
          & img {
            width: 23%;
          }
        }
      }
    }
  }
}