body {
    margin: 0;
    padding: 0;
    height: 100%;
    /* overflow: hidden; */
    font-family: 'Cinzel', serif;
    background: black;
    color: white;
    overflow-x: hidden;
    /* max-height: 200;
    max-width: 100vw; */
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    /* scroll-behavior: auto; */
    /* max-width: 100vw; */
    /* overflow-x: hidden; */
    /* position: relative !important; */
    /* max-width: 100vw !important; */
  }
  a {
    color: red;
    text-decoration: none;
  }
  a:hover {
    text-decoration: underline;
  }

  .content-section {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* padding: 0 20px; */
    z-index: 2;
    scroll-snap-type: start;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    max-width: 100vw;
    /* overflow-x: hidden; */
  }

  .start {
    position: relative;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background: black; */
  }

  /* .start svg {
    max-width: 100%;
    max-height: 90%;
    height: auto;
    width: auto;
  } */

  .scroll-button {
    position: fixed;
    bottom: 20px;
    left: 50%;
    /* transform: translateX(-50vw); */
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: 2rem;
    color: white;
    z-index: 10;
    transition: opacity 0.3s ease;
  }
  .scroll-button:hover {
    color: #d2a98b;
  }

  .hidden {
    display: none;
  }

  /* .section-title {
    position: relative;
    top: 0;
    width: 100%;
    text-align: center;
    font-size: 2rem;
    z-index: 100;
    padding: 60px 0;
  } */
  
  /* ---------- Fog ---------- */
  #foglayer_01, #foglayer_02, #foglayer_03 {
    height: 100%;
    position: absolute;
    width: 200%;
    /* left: -150px; */
    z-index: 0;
    /* width: 100vw; */
    overflow: hidden;
    /* clip-path: inset(0 100px 0 0); */
    /* overflow-x: clip; */

    /* position: relative; */
    /* overflow-x: clip; */
  }

  #foglayer_01 .image01, #foglayer_01 .image02,
  #foglayer_02 .image01, #foglayer_02 .image02,
  #foglayer_03 .image01, #foglayer_03 .image02 {
    float: left;
    height: 100%;
    width: 50%;
  }
  #foglayer_01 {
    -webkit-animation: foglayer_01_opacity 70s linear infinite, foglayer_moveme 55s linear infinite;
    -moz-animation: foglayer_01_opacity 70s linear infinite, foglayer_moveme 55s linear infinite;
    animation: foglayer_01_opacity 70s linear infinite, foglayer_moveme 55s linear infinite;
  }
  #foglayer_02, #foglayer_03 {
    -webkit-animation: foglayer_02_opacity 61s linear infinite, foglayer_moveme 53s linear infinite;
    -moz-animation: foglayer_02_opacity 61s linear infinite, foglayer_moveme 53s linear infinite;
    animation: foglayer_02_opacity 61s linear infinite, foglayer_moveme 53s linear infinite;
  }
  
  /* ---------- Moving Fog ---------- */
  /*
    'size: cover' || 'size: 100%'; results remain the same
    'attachment: scroll' can be added or removed; results remain the same
    'attachment: fixed' causing unexpected results in Chrome
    'repeat-x' || 'no-repeat'; results remain the same
  */ 
  #foglayer_01 .image01, #foglayer_01 .image02 {
    background: url("https://raw.githubusercontent.com/danielstuart14/CSS_FOG_ANIMATION/master/fog1.png") center center/cover no-repeat transparent;
  }
  #foglayer_02 .image01, #foglayer_02 .image02,
  #foglayer_03 .image01, #foglayer_03 .image02{
    background: url("https://raw.githubusercontent.com/danielstuart14/CSS_FOG_ANIMATION/master/fog2.png") center center/cover no-repeat transparent;
  }
  
/* Mittelgroße Smartphones (max. Breite bis 768px) */  
/* Höhe größer als Breite */
@media screen and (max-width: 1000px) {
    .container{
        display: column;
    }
    #foglayer_01, #foglayer_02, #foglayer_03 {
    top: -30vh;
    height: 30vh;
    }
    #foglayer_01 .image01, #foglayer_01 .image02,
    #foglayer_02 .image01, #foglayer_02 .image02,
    #foglayer_03 .image01, #foglayer_03 .image02 {
      height: 30vh;
      top: -30vh;
    }
    .content-section{
        /* height: 70vh; */
        padding: 0;
    }
    .start{
        height: 70vh;
    }
}

  /* ---------- Keyframe Layer 1 ---------- */
  @-webkit-keyframes foglayer_01_opacity {
    0% { opacity: .1; }
    22% { opacity: .5; }
    40% { opacity: .28; }
    58% { opacity: .4; }
    80% { opacity: .16; }
    100% { opacity: .1; }
  }
  @-moz-keyframes foglayer_01_opacity {
    0% { opacity: .1; }
    22% { opacity: .5; }
    40% { opacity: .28; }
    58% { opacity: .4; }
    80% { opacity: .16; }
    100% { opacity: .1; }
  }
  @-o-keyframes foglayer_01_opacity {
    0% { opacity: .1; }
    22% { opacity: .5; }
    40% { opacity: .28; }
    58% { opacity: .4; }
    80% { opacity: .16; }
    100% { opacity: .1; }
  }
  @keyframes foglayer_01_opacity {
    0% { opacity: .1; }
    22% { opacity: .5; }
    40% { opacity: .28; }
    58% { opacity: .4; }
    80% { opacity: .16; }
    100% { opacity: .1; }
  }
  /* ---------- Keyframe Layer 2 ---------- */
  @-webkit-keyframes foglayer_02_opacity {
    0% { opacity: .5; }
    25% { opacity: .2; }
    50% { opacity: .1; }
    80% { opacity: .3; }
    100% { opacity: .5; }
  }
  @-moz-keyframes foglayer_02_opacity {
    0% { opacity: .5; }
    25% { opacity: .2; }
    50% { opacity: .1; }
    80% { opacity: .3; }
    100% { opacity: .5; }
  }
  @-o-keyframes foglayer_02_opacity {
    0% { opacity: .5; }
    25% { opacity: .2; }
    50% { opacity: .1; }
    80% { opacity: .3; }
    100% { opacity: .5; }
  }
  @keyframes foglayer_02_opacity {
    0% { opacity: .5; }
    25% { opacity: .2; }
    50% { opacity: .1; }
    80% { opacity: .3; }
    100% { opacity: .5; }
  }
  /* ---------- Keyframe Layer 3 ---------- */
  @-webkit-keyframes foglayer_03_opacity {
    0% { opacity: .8 }
    27% { opacity: .2; }
    52% { opacity: .6; }
    68% { opacity: .3; }
    100% { opacity: .8; }
  }
  @-moz-keyframes foglayer_03_opacity {
    0% { opacity: .8 }
    27% { opacity: .2; }
    52% { opacity: .6; }
    68% { opacity: .3; }
    100% { opacity: .8; }
  }
  @-o-keyframes foglayer_03_opacity {
    0% { opacity: .8 }
    27% { opacity: .2; }
    52% { opacity: .6; }
    68% { opacity: .3; }
    100% { opacity: .8; }
  }
  @keyframes foglayer_03_opacity {
    0% { opacity: .8; }
    27% { opacity: .2; }
    52% { opacity: .6; }
    68% { opacity: .3; }
    100% { opacity: .8; }
  }
  /* ---------- Keyframe moveMe ---------- */
  @-webkit-keyframes foglayer_moveme {
    0% { left: 0; }
    100% { left: -100%; }
  }
  @-moz-keyframes foglayer_moveme {
    0% { left: 0; }
    100% { left: -100%; }
  }
  @-o-keyframes foglayer_moveme {
    0% { left: 0; }
    100% { left: -100%; }
  }
  @keyframes foglayer_moveme {
    0% { left: 0; }
    100% { left: -100%; }
  }
  
  @media only screen
    and (min-width: 280px)
    and (max-width: 767px) {
      #foglayer_01 .image01, #foglayer_01 .image02,
      #foglayer_02 .image01, #foglayer_02 .image02,
      #foglayer_03 .image01, #foglayer_03 .image02 {
        width: 100%;
      }
    }

    .start {
        position: relative;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1;
      }
      
      .start svg {
        max-width: 100%;
        max-height: 90%;
        height: auto;
        width: auto;
        z-index: 1;
      }
      
      .fogwrapper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0; 
        -webkit-filter: blur(1px) grayscale(0.2) saturate(1.2) sepia(0.2);
        filter: blur(1px) grayscale(0.2) saturate(1.2) sepia(0.2);
        /* overflow-x: hidden; */
        /* max-width: 100vw; */
        /* position: relative; */
        /* overflow-x: hidden; */
      }
      
      .TourVideo{
        box-shadow: 0 0 15px white;
      }