#mobil-portrait {
     display: none;
 }

 #mobil-control {
     display: none;
 }

 #mobil-select {
     display: none;
 }

 .image-mobil {
     background: url("../assets/img_site/rotate-mobil.png") center center/contain no-repeat;
     height: 260px;
     width: 191px;
     position: relative;
     top: 0;
     left: 0;
     z-index: 1001;
 }

 .mobil-h1 {
     font-family: 28px;
 }

 .mobil-h2 {
     text-align: center;
     font-size: 24px;
 }

 .h-law {
     padding: 20px 0;
     font-size: 18px;
 }

 .wrapper-mobil {
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     width: 100dvw;
     height: 100dvh;
 }

 #start-screen {
     background: rgba(0, 0, 0, 0.85) url("../img/9_intro_outro_screens/start/background-start-screen.jpg") center center/cover no-repeat;
     position: absolute;
     inset: 0;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     pointer-events: none;
 }

 #win-screen {
     background: rgba(0, 0, 0, 0.85) url("../img/9_intro_outro_screens/win/background-win-screen.jpg") center center/cover no-repeat;
     position: absolute;
     inset: 0;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     pointer-events: none;
 }

 #end-screen {
     background: rgba(0, 0, 0, 0.85) url("../img/9_intro_outro_screens/game_over/background-lost-screen.jpg") center center/cover no-repeat;
     position: absolute;
     inset: 0;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     pointer-events: none;
 }

 #start-button {
     pointer-events: auto;
     width: clamp(110px, 16vh, 260px);
     max-width: 40%;
     display: block;
     cursor: pointer;
     margin-top: 20vh;
 }

 #start-button:hover {
     filter: contrast(90%) drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.7));
 }

 #start-button img.start-button {
     width: 100%;
     height: auto;
     object-fit: contain;
     display: block;
 }

 .sound-control {
     position: absolute;
     left: 90%;
     top: 4%;
     display: flex;
     align-items: center;
     pointer-events: none;
     z-index: 5;
     gap: 10px;
 }

 .sound-control>div {
     pointer-events: auto;
     width: clamp(40px, 6%, 60px);
 }

 .sound-button {
     width: 100%;
     height: auto;
     object-fit: contain;
     display: block;
     cursor: pointer;
 }

 .sound-button img.sound-button {
     width: 100%;
     height: 100%;
     object-fit: contain;
     display: block;
 }

 .sound-button:hover {
     filter: contrast(90%) drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.7));
 }

 .fullscreen-button {
     width: 100%;
     height: auto;
     object-fit: contain;
     display: block;
     cursor: pointer;
 }

 .fullscreen-button img.sound-button {
     width: 100%;
     height: 100%;
     object-fit: contain;
     display: block;
 }

 .fullscreen-button:hover {
     filter: contrast(90%) drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.7));
 }


 .bottom-menu {
     position: absolute;
     left: 3%;
     bottom: 3%;
     display: flex;
     align-items: center;
     gap: clamp(8px, 2vw, 18px);
     pointer-events: none;
 }

 .bottom-menu>div {
     pointer-events: auto;
     width: clamp(56px, 10%, 120px);
 }

 .bottom-menu img {
     width: 100%;
     height: auto;
     display: block;
 }

 #impressum-menu {
     pointer-events: auto;
     width: clamp(110px, 16vh, 260px);
     max-width: 40%;
     display: block;
     cursor: pointer;
 }

 .impressum-button {
     width: 100%;
     height: auto;
     object-fit: contain;
     display: block;
 }

 .impressum-button:hover {
     filter: contrast(90%) drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.7));
 }

 #instructions-menu {
     pointer-events: auto;
     width: clamp(40px, 6%, 80px);
     max-width: 40%;
     display: block;
     cursor: pointer;

 }

 .instructions-button {
     width: 100%;
     height: auto;
     object-fit: contain;
     display: block;
 }

 .instructions-button:hover {
     filter: contrast(90%) drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.7));
 }

 .win-lost-menu {
     position: absolute;
     bottom: 30%;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: clamp(8px, 2vw, 18px);
     pointer-events: none;
 }

 .back-main-menu {
     pointer-events: auto;
     width: clamp(110px, 16vh, 260px);
     max-width: 40%;
     display: block;
     cursor: pointer;
 }

 .main-menu-button {
     width: 100%;
     height: auto;
     object-fit: contain;
     display: block;
 }

 .main-menu-button:hover {
     filter: contrast(90%) drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.7));
 }

 .restart {
     pointer-events: auto;
     width: clamp(110px, 16vh, 260px);
     max-width: 40%;
     display: block;
     cursor: pointer;
 }

 .restart-button {
     width: 100%;
     height: auto;
     object-fit: contain;
     display: block;
 }

 .restart-button:hover {
     filter: contrast(90%) drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.7));
 }

 @media (max-width: 580px) {
     #start-button {
         width: clamp(80px, 16vh, 90px);
         margin-top: 12vh;
     }

     .sound-control {
         width: clamp(30px, 6%, 50px);
         top: 3%;
         right: 5%;
         left: unset;
     }

     .back-main-menu {
         width: clamp(90px, 16vh, 100px);
     }

     #impressum-menu {
         width: clamp(70px, 6%, 100px);
     }

     #instructions-menu {

         width: clamp(26px, 6%, 80px);
     }

     #fullscreen-button {
         display: none;
     }
 }

 @media (hover: none) and (orientation: portrait) {
     #mobil-select {
         display: block;
         position: fixed;
         top: 0;
         left: 0;
         width: 100vw;
         height: 100vh;
         z-index: 1000;
         color: #FFF;
         background-color: #000;
     }

     #mobil-control {
         display: none
     }
 }

 @media (hover: none) and (orientation: landscape) {
     canvas {
         width: 100%;
         height: 100vh
     }

     #start-button {
         width: min(46%, 100px);
         margin-top: 35vh;
     }

     .bottom-menu {
         position: absolute;
         left: 3%;
         bottom: 5%;
         display: flex;
         align-items: center;
         gap: clamp(8px, 2vw, 18px);
         pointer-events: none;
     }

     .sound-control {
         width: clamp(40px, 6%, 50px);
         top: 3%;
         right: 3%;
         left: unset;
     }

     .win-lost-menu {
         bottom: 30%;
         gap: clamp(8px, 2vw, 18px);
     }

     #impressum-menu {
         width: clamp(80px, 6%, 100px);
     }

     #instructions-menu {

         width: clamp(40px, 6%, 50px);
     }

     .modal-content {
         width: 500px;
         height: 220px;
         max-width: 90%;
     }

     #fullscreen-button {
         display: none;
     }

 }

 @media (height <=360px) {
     #start-button {
         width: min(46%, 100px);
         margin-top: 35vh;
     }

     .sound-control {
         width: clamp(20px, 6%, 50px);
         top: 3%;
         right: 3%;
         left: unset;
     }

     .back-main-menu {
         width: clamp(90px, 16vh, 100px);
     }

     .restart {
         width: clamp(70px, 16vh, 80px);
     }

     .win-lost-menu {
         bottom: 30%;
     }

     #impressum-menu {
         width: clamp(70px, 6%, 100px);
     }

     #instructions-menu {

         width: clamp(26px, 6%, 80px);
     }

     .modal-content {
         width: 500px;
         height: 320px;
         max-width: 90%;
     }
 }

 @media (width <=360px) {
     #start-button {
         width: min(40%, 80px);
         margin-top: 10vh;
     }

     .sound-control {
         width: clamp(20px, 6%, 50px);
         top: 3%;
         right: 3%;
         left: unset;
     }

     .win-lost-menu {
         gap: clamp(8px, 2vw, 18px);
         bottom: 25%;
     }

     .back-main-menu {
         width: clamp(70px, 16vh, 80px);
     }

     .restart {
         width: clamp(70px, 16vh, 80px);
     }

     #impressum-menu {
         width: clamp(70px, 6%, 100px);
     }

     #instructions-menu {

         width: clamp(26px, 6%, 80px);
     }

     .modal-content {
         width: 500px;
         height: 220px;
         max-width: 90%;
     }

     #fullscreen-button {
         display: none;
     }
 }

 @media (hover: hover) {
     #mobil-control {
         display: none !important;
     }

 }

@media(max-width: 1400px){
  #fullscreen-button {
         display: none;
     }
}

 @media (width >=1400px) {
     .sound-control {
         width: clamp(80px, 8%, 120px);
         top: 3%;
         right: 1%;
         left: unset;
     }

 }