:root {
  --nav-height: 50px;
  --grey: #c2cdc7;
}

@font-face {
  font-family: PPMonument;
  src: url("/fonts/PPMonumentExtended-Regular.woff2");
}

@font-face {
  font-family: PPMonumentWide;
  src: url("/fonts/PPMonumentWide-Regular.otf");
}

body {
  background-color: var(--grey);
  margin: 0px;
  border: 0px; 
  margin: 0px;
  padding: 0px;
}

.overflow-hidden {
  overflow: hidden;
}

canvas {
  display: block;
}

.myNavigation {
  position: fixed; 
  top: 0px; 
  width: 100%;
  box-sizing: border-box; 
  padding: 10px 10px 0px 8px; 
  display: flex; 
  flex-wrap: nowrap; 
  justify-content: space-between; 
  z-index: 99;
} 

.backgroundWrapper {
  padding: 10px;
  margin-top: var(--nav-height);
}

h1, h2, h3, h4, h5, h6, p, figure {
  font-family: 'PPMonument', sans-serif;
}

h1 {
  font-size: 30px;
  line-height: 30px;
  font-weight: 100;
  color: black;
  margin: 0px;
  letter-spacing: -3px;
}

h1 a {
  text-decoration: none; 
}

p {
  font-family: 'PPMonumentWide', sans-serif;
  color: black;
  font-size: 13px; 
  line-height: 15px; 
}

.p-margin {
  margin: 20px 0;
  width: 100%;
}

a {
  color: black;
}

a:hover {
  color: #554144;
}

.textWrapper {
  position: absolute; height: 100%; width: 100%; box-sizing: border-box; top:0px; padding: 10px; display: flex; justify-content: space-between;
}

.contentWrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  transition: all 0.4s ease;
}

.infoWrapper {
  width: 100%;
}

.imageWrapper {
  width: 100%;
}

.thumbnailWrapper {
  column-count: 1;
  column-gap: 8px;
  width: 100%;
}

.thumbnail {
  width: 100%;
}

.thumbnail p {
  margin-top: 5px;
  font-size: 14px;
  line-height: 15px;
  opacity:0.5;
  text-decoration: none;
}

.bu {
  margin-top: 0px;
  margin-bottom: 15px;
  font-size: 10px;
  line-height: 11px;
  opacity:0.5;
  text-decoration: none;
}

.thumbnail img,
.thumbnail video {
  border-radius: 10px;
}

.link-thumbnail {
  display: block;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.25s ease;
  cursor: pointer;
}

.link-thumbnail img,
.link-thumbnail video {
  transition: transform 0.25s ease;
  cursor: pointer;
}

.link-thumbnail:hover{
  transform: scale(0.95);
  cursor: pointer;
}

.cvWrapper{
  width: 100%;
}

.cvWrapper p{
  font-family: PPMonumentWide;
  margin-top:0; 
  padding-right:0; 
  position: sticky;
  top: var(--nav-height);
}

.contentWrapper.info-closed .cvWrapper{
  width:0;
  overflow:hidden;
}

.contentWrapper.info-closed .thumbnailWrapper{
  width:100%;
}

.infoButton{
  display: none;
}

.wrapper2 {
  width: 100%;
}

input[type='range'] {
  width: 80px;
  height: 15px;
  background-color: transparent;
  appearance: none;
}

input[type='text'] {
  position: absolute;
  top: 0;
  left:0;
  height: 100px;
  width: 100%;
  background-color: transparent;
  border: none;
  appearance: none;
}

input[type='text']:focus {
  border: none;
  outline:none;
}

input[type='radio']:after {
  width: 14px;
  height: 14px;
  transform: translate(-2px, -2px);

  border-radius: 15px;
  position: relative;
  background-color: white;
  content: '';
  display: inline-block;
  visibility: visible;
  border: 2px solid #a7b1ad;
}

input[type='radio']:checked:after {
  width: 14px;
  height: 14px;
  transform: translate(-2px, -2px);

  border-radius: 10px;
  position: relative;
  background-color: #a7b1ad;
  content: '';
  display: inline-block;
  visibility: visible;
  border: 2px solid #a7b1ad;
}

input[type='range'] {
  width: 80px;
  height: 15px;
  background-color: transparent;
  appearance: none;
}

input[type='range']::-webkit-slider-runnable-track {
  background: #a7b1ad;
  height: 3px;
  appearance: none;
  cursor: pointer;  
}

/* This is the moveable bit of the slider, known as the "thumb"*/
input[type='range']::-webkit-slider-thumb {
  width: 15px;
  height: 15px;

  background: white;
  border: 2px solid #a7b1ad;
  cursor: pointer;
  appearance: none;
  
  /* negative top padding moves it up */
  margin-top: -6px;

  /* Border radius gives rounded corners, if they're big enough, you end up with circles */
  border-radius: 8px;
  
}

.image-container {
  position: relative;
  display: inline-block;
}

.responsive-image {
  width: 100%;
  height: auto;
  display: block;
}

.sticky-info {
  margin-top: 50px;
}

        /*Wenn über 768, wenn Desktop*/
        @media only screen and (min-width: 768px) { 

          :root {
            --nav-height: 60px;
          }

          .myNavigation {
            background-color: transparent;  
          } 

          h1 {
            font-size: 40px;
            line-height: 30px;
          }

          .contentWrapper {
            flex-wrap: nowrap;
            justify-content: space-around;
            margin-bottom: 100px;
            font-family: 'PPMonumentWide', sans-serif;
          }

          .infoWrapper {
          width: 20%;
          }

          .imageWrapper {
            width: 80%;
          }

          .imageWrapper img, video {
            border-radius: 5px;
          }

          .cvWrapper{
            width:60%;
            transition: all 0.4s ease;
          }

          .cvWrapper p{
            font-family: PPMonumentWide;
            margin-top:0; 
            padding-right: 10%; 
            position: sticky;
            top: var(--nav-height);
          }

          p {
            font-size: 20px; 
            line-height: 23px; 
          }

          .thumbnailWrapper {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
            width: 100%;
          }

          .thumbnail p {
            font-size: 10px;
            line-height: 11px;
          }

          .bu {
            font-size: 10px;
            line-height: 11px;
          }

          .thumbnail img,
          .thumbnail video {
            border-radius: 5px;
          }

          .infoButton{
            display: block;
            background:black;
            color:#c2cdc7;
            border: none;
            width:35px;
            height:35px;
            font-size:20px;
            cursor:pointer;
          }

          .infoButton:hover{
            background:#554144;
          }

          .sticky-info {
            font-size: 15px;
            line-height: 17px;
            position: sticky; 
            padding-right: 10px;
            margin-top: 0px;
          }
          
        }

                  @media only screen and (min-width: 1048px) { 

                    .wrapper2 {
                      width: 70%;
                    }

                    .p-margin {
                      margin: 20px 0;
                      width: 60%;
                    }
                  }