/*
css reset
*/


*{
  margin: 0;    
  padding: 0; 
  box-sizing: border-box;
  font-weight: normal; 
  font-size: 100%;
  }
  
  ul,
  ol {
    list-style: none;
    
    }
    
    img,
    video {
      width: 100%;
      }
      
      a {
        color: black; 
        text-decoration: none;                              
        }               
        
        html, body {
          height: 100%;
          margin: 0;
          padding: 0;
          }
          /*
          styles
          */
          body {
            font-family: "FivoSansModern";
            padding: 16px 16px 8px 16px;
            font-size: 1.5rem;
            /* border: 1rem solid crimson; 
            
            } */
          }
          
          @font-face {
            font-family: "FivoSansModern";
            src: url("../Fonts/FivoSansModern-Regular.otf") format("embedded-opentype"),
            url("../Fonts/FivoSansModern-Regular.otf") format("woff"),
            url("../Fonts/FivoSansModern-Regular.otf") format("woff2"),
          }

          h1 {
            position: fixed;
          }
          
          
          /* h2 {
            font-size: 1rem;
            border-width: 1px;
            border-style: solid;
          
          } */


          .button {
            position: sticky;
            padding: 5px 10px;
            margin: 20px 10px;
            border: 1px black;
            border-style: solid;
            background-color: white;
            border-color: black;
            display: inline-block;
            border-radius: 1px;
            transition: background-color 0.3s ease;
          }

          .button:hover {
            border-color: red;
            color: red;
          }
          
          
           /* header {
            margin-bottom: 192px;
          }  */
          
          .grid {
            display: grid;
            grid-template-columns: repeat(128, 0.78125%) ;
            grid-template-rows: repeat(128, 0.78125%) ;
            width: 300vw;
            height: 300vh;
            }
            
          .cell {
            width: 100%;
            height: 100%;
            position: relative;

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

          .multi::after {
            color: red;
            font-size: 12px;
            position: absolute;
            top: 0;
            right: 0;
            transform: translate(125%, -50%);
          }
            
          .gras {
            background-color: greenyellow;
            }
            
          .water {
            background-color: aqua;
            }
              
          .location {
            background-color: red;
            }
              
              /* positionen */
                  
                  






/* gras */

.gras-1 {
  grid-area: 12 / 78 / 19 / 102;
}

.gras-2 {
  grid-area: 19 / 78 / 22 / 87;
}

.gras-3 {
  grid-area: 22 / 80 / 24 / 86;
}

.gras-4 {
  grid-area: 24 / 80 / 25 / 84;
}

.gras-5 {
  grid-area: 36 / 64 / 43 / 78;
}

.gras-6 {
  grid-area: 23 / 53 / 28 / 60;
}

.gras-7 {
  grid-area: 20 / 56 / 23 / 60;
}

.gras-8 {
  grid-area: 28 / 54 / 32 / 56;
}
.gras-9 {
  grid-area: 28 / 56 / 30 / 58;
}

.gras-10 {
  grid-area: 12 / 79 / 15 / 104;
}

.gras-11 {
  grid-area: 10 / 95 / 13 / 101;
}

.gras-12 {
  grid-area: 50 / 6 / 55 / 16;
}

.gras-13 {
  grid-area: 49 / 6 / 58 / 10;
}

.gras-14 {
  grid-area: 51 / 6 / 58 / 8;
}

.gras-15 {
  grid-area: 58 / 14 / 59 / 19;
}

.gras-16 {
  grid-area: 58 / 16 / 63 / 18;
}

.gras-17 {
  grid-area: 60 / 12 / 61 / 16;
}

.gras-18 { 
  grid-area: 61 / 20 / 63 / 23;
}

.gras-19 {
  grid-area: 59 / 24 / 62 / 28;
}

.gras-20 {
  grid-area: 62 / 26 / 64 / 33;
}

.gras-21 {
  grid-area: 42 / 4 / 45 / 10;
}

.gras-22 {
  grid-area: 43 / 3 / 45 / 11;
}

.gras-23 {
  grid-area: 45 / 9 / 48 / 11;
}

.gras-24 {
  grid-area: 44 / 22 / 45 / 24;
}

.gras-25 {
  grid-area: 75 / 37 / 79 / 38;
}

.gras-26 {
  grid-area: 78 / 35 / 79 / 38;
}

.gras-27 {
  grid-area: 79 / 36 / 82 / 37;
}

.gras-28 {
  grid-area: 73 / 48 / 76 / 51;
}

.gras-29 {
  grid-area: 76 / 47 / 78 / 50;
}

.gras-30 {
  grid-area: 78 / 46 / 82 / 48;
}

.gras-31 {
  grid-area: 70 / 53 / 72 / 57;
}

.gras-32 {
  grid-area: 67 / 51 / 70 / 54;
}

.gras-33 {
  grid-area: 67 / 49 / 69 / 54;
}

.gras-34 {
  grid-area: 64 / 46 / 66 / 48;
}

.gras-35 {
  grid-area: 61 / 56 / 62 / 57;
}

.gras-36 {
  grid-area: 58 / 56 / 59 / 58;
}

.gras-37 {
  grid-area: 58 / 62 / 59 / 63;
}

.gras-38 {
  grid-area: 55 / 50 / 59 / 52;
}

.gras-39 {
  grid-area: 54 / 52 / 55 / 53;
}

.gras-40 {
  grid-area: 82 / 19 / 83 / 32;
}

.gras-41 {
  grid-area: 78 / 17 / 79 / 18;
}

.gras-42 {
  grid-area: 69 / 37 / 72 / 39;
}

.gras-43 {
  grid-area: 78 / 21 / 83 / 22;
}

.gras-44 {
  grid-area: 72 / 50 / 74 / 52;
}

.gras-45 {
  grid-area: 72 / 52 / 73 / 53;
}

.gras-46 {
  grid-area: 56 / 88 / 58 / 91;
}

.gras-47 {
  grid-area: 58 / 86 / 60 / 88;
}

.gras-48 {
  grid-area: 69 / 89 / 72 / 91;
}

.gras-49 {
  grid-area: 71 / 89 / 72 / 93;
}

.gras-50 {
  grid-area: 68 / 102 / 70 / 106;
}

.gras-51 {
  grid-area: 70 / 103 / 73 / 107;
}

.gras-52 {
  grid-area: 73 / 103 / 74 / 108;
}

.gras-53 {
  grid-area: 70 / 123 / 81 / 128;
}

.gras-54 {
  grid-area: 74 / 122 / 81 / 123;
}

.gras-55 {
  grid-area: 81 / 123 / 82 / 125;
}

.gras-56 {
  grid-area: 95 / 121 / 110 / 128;
}

.gras-57 {
  grid-area: 23 / 53 / 28 / 60;
}

.gras-58 {
  grid-area: 19 / 56 / 23 / 60;
}

.gras-59 {
  grid-area: 40 / 74 / 44 / 79;
}

.gras-60 {
  grid-area: 42 / 78 / 45 / 79;
}

.gras-61 {
  grid-area: 21 / 56 / 23 / 58;
}

.gras-62 {
  grid-area: 18 / 48 / 23 / 52;
}

.gras-63 {
  grid-area: 23 / 48 / 25 / 52;
}

.gras-64 {
  grid-area: 19 / 38 / 22 / 41;
}

.gras-65 {
  grid-area: 23 / 40 / 26 / 43;
}

.gras-66 {
  grid-area: 19 / 39 / 24 / 40;
}

.gras-67 {
  grid-area: 21 / 45 / 25 / 46;
}

.gras-68 {
  grid-area: 14 / 46 / 16 / 48;
}

.gras-69 {
  grid-area: 8 / 47 / 14 / 49;
}

.gras-70 {
  grid-area: 6 / 48 / 13 / 51;
}

.gras-71 {
  grid-area: 2 / 52 / 10 / 56;
}

.gras-72 {
  grid-area: 4 / 51 / 10 / 53;
}

.gras-73 {
  grid-area: 1 / 53 / 10 / 54;
}

.gras-74 {
  grid-area: 19 / 89 / 21 / 90;
}

.gras-75 {
  grid-area: 19 / 87 / 20 / 91;
}




/* wasser */



.water-1 {
  grid-area: 60 / 63 / 70 / 67;
}

.water-2 {
  grid-area: 62 / 67 / 69 / 70;
}

.water-3 {
  grid-area: 58 / 63 / 60 / 66;
}

.water-4 {
  grid-area: 56 / 63 / 58 / 65;
}

.water-5 {
  grid-area: 54 / 62 / 56 / 64;
}

.water-6 {
  grid-area: 53 / 61 / 54 / 63;
}

.water-7 {
  grid-area: 54 / 67 / 55 / 68;
}

.water-8 {
  grid-area: 55 / 65 / 57 / 67;
}

.water-9 {
  grid-area: 65 / 62 / 71 / 63;
}

.water-10 {
  grid-area: 67 / 60 / 75 / 62;
}

.water-11 {
  grid-area: 71 / 58 / 76 / 60;
}

.water-12 {
  grid-area: 64 / 75 / 65 / 79;
}

.water-13 {
  grid-area: 53 / 108 / 54 / 109;
}

.water-14 {
  grid-area: 19 / 92 / 20 / 94;
}

.water-15 {
  grid-area: 20 / 97 / 21 / 99;
}

.water-16 {
  grid-area: 17 / 102 / 18 / 103;
}

.water-17 {
  grid-area: 23 / 106 / 24 / 108;
}

.water-18 {
  grid-area: 17 / 124 / 19 / 126;
}

/* elbe */

.water-19 {
  grid-area: 83 / 1 / 87 / 34;
}

.water-20 {
  grid-area: 87 / 1 / 91 / 3;
}

.water-22 {
  grid-area: 90 / 4 / 91 / 11;
}

.water-23 {
  grid-area: 87 / 11 / 91 / 16;
}

.water-24 {
  grid-area: 91 / 13 / 93 / 17;
}

.water-25 {
  grid-area: 93 / 15 / 95 / 19;
}

.water-26 {
  grid-area: 95 / 18 / 96 / 21;
}

.water-27 {
  grid-area: 96 / 20 / 98 / 23;
}

.water-28 {
  grid-area: 98 / 22 / 99 / 25;
}

.water-29 {
  grid-area: 99 / 24 / 104 / 27;
}

.water-30 {
  grid-area: 87 / 24 / 88 / 30;
}

.water-31 {
  grid-area: 87 / 27 / 91 / 30;
}

.water-32 {
  grid-area: 91 / 30 / 110 / 32;
}

.water-33 {
  grid-area: 84 / 34 / 86 / 42;
}

.water-34 {
  grid-area: 86 / 34 / 89 / 40;
}

.water-35 {
  grid-area: 89 / 36 / 93 / 40;
}

.water-36 {
  grid-area: 93 / 38 / 105 / 40;
}

.water-37 {
  grid-area: 90 / 40 / 91 / 41;
}

.water-38 {
  grid-area: 90 / 41 / 92 / 42;
}

.water-39 {
  grid-area: 91 / 42 / 93 / 43;
}

.water-40 {
  grid-area: 92 / 43 / 94 / 44;
}

.water-41 {
  grid-area: 92 / 44 / 94 / 45;
}

.water-42 {
  grid-area: 93 / 45 / 95 / 46;
}

.water-43 {
  grid-area: 93 / 40 / 94 / 41;
}

.water-44 {
  grid-area: 94 / 41 / 95 / 42;
}

.water-45 {
  grid-area: 94 / 42 / 96 / 43;
}

.water-46 {
  grid-area: 95 / 43 / 96 / 44;
}

.water-47 {
  grid-area: 96 / 44 / 98 / 45;
}

.water-48 {
  grid-area: 97 / 40 / 99 / 42;
}

.water-49 {
  grid-area: 98 / 42 / 102 / 44;
}

.water-50 {
  grid-area: 99 / 44 / 100 / 48;
}

.water-51 {
  grid-area: 100 / 46 / 103 / 48;
}

.water-52 {
  grid-area: 98 / 49 / 100 / 51;
}

.water-53 {
  grid-area: 100 / 49 / 104 / 50;
}

.water-54 {
  grid-area: 99 / 51 / 100 / 53;
}

.water-55 {
  grid-area: 98 / 46 / 103 / 48;
}

.water-56 {
  grid-area: 99 / 44 / 100 / 48;
}

.water-57 {
  grid-area: 99 / 52 / 101 / 53;
}

.water-58 {
  grid-area: 102 / 54 / 105 / 59;
}

.water-59 {
  grid-area: 101 / 59 / 104 / 62;
}

.water-60 {
  grid-area: 102 / 70 / 103 / 76;
}

.water-61 {
  grid-area: 83 / 41 / 85 / 49;
}

.water-62 {
  grid-area: 82 / 41 / 83 / 47;
}

.water-63 {
  grid-area: 87 / 49 / 88 / 58;
}

.water-64 {
  grid-area: 85 / 46 / 86 / 58;
}

.water-65 {
  grid-area: 86 / 49 / 87 / 53;
}

.water-66 {
  grid-area: 89 / 54 / 91 / 75;
}

.water-67 {
  grid-area: 87 / 51 / 89 / 57;
}

.water-68 {
  grid-area: 87 / 69 / 91 / 74;
}

.water-69 {
  grid-area: 91 / 75 / 93 / 81;
}

.water-70 {
  grid-area: 92 / 68 / 93 / 74;
}

.water-71 {
  grid-area: 93 / 72 / 94 / 77;
}

.water-72 {
  grid-area: 91 / 68 / 93 / 74;
}

.water-73 {
  grid-area: 95 / 78 / 98 / 92;
}

.water-74 {
  grid-area: 94 / 75 / 96 / 81;
}

.water-75 {
  grid-area: 98 / 80 / 100 / 85;
}

.water-76 {
  grid-area: 100 / 84 / 102 / 88;
}

.water-77 {
  grid-area: 102 / 87 / 104 / 89;
}


.water-78 {
  grid-area: 104 / 88 / 106 / 91;
}

.water-79 {
  grid-area: 106 / 90 / 110 / 92;
}

.water-80 {
  grid-area: 98 / 90 / 99 / 93;
}

.water-81 {
  grid-area: 99 / 92 / 101 / 95;
}

.water-82 {
  grid-area: 102 / 86 / 104 / 90;
}

.water-83 {
  grid-area: 101 / 94 / 109 / 96;
}

.water-84 {
  grid-area: 101 / 116 / 103 / 117;
}

.water-85 {
  grid-area: 103 / 117 / 104 / 120;
}

.water-86 {
  grid-area: 104 / 117 / 105 / 118;
}

.water-87 {
  grid-area: 107 / 116 / 108 / 118;
}

.water-88 {
  grid-area: 83 / 83 / 84 / 88;
}



/* water add */

.water-89 {
  grid-area: 64 / 75 / 65 / 78;
}

.water-90 {
  grid-area: 38 / 56 / 40 / 58;
}

.water-91 {
  grid-area: 40 / 74 / 42 / 76;
}

.water-92 {
  grid-area: 36 / 122 / 40 / 123;
}

.water-93 {
  grid-area: 43 / 120 / 44 / 121;
}

.water-94 {
  grid-area: 38 / 116 / 39 / 117;
}

.water-95 {
  grid-area: 8 / 122 / 9 / 123;
}


.location-susannenstrasse30 {
  grid-area: 68 / 42 / 69 / 43;
  &::after {
    content: '2';
  }
}

.location-schanzenstrasse100 {
  grid-area: 67 / 45 / 68 / 46;
}

.location-neuerpferdemarkt31 {
  grid-area: 71 / 42 / 72 / 43;
}

.location-sternstrasse2 {
  grid-area: 71 / 44 / 72 / 45;
}

.location-neuerkamp32 {
  grid-area: 70 / 46 / 71 / 47;
}

/* .location-6 {
  grid-area: 72 / 46 / 73 / 47;
} */

.location-marktstrasse127 {
  grid-area: 71 / 47 / 72 / 48;
}

.location-karolinenstrasse45 {
  grid-area: 68 / 48 / 69 / 49;
}

.location-karolinenstrasse24 {
  grid-area: 70 / 48 / 71 / 49;

  &::after {
    content: '3';
  }
}

.location-stephansplatz5 {
  grid-area: 72 / 55 / 73 / 56;
}

.location-hauptkirchestkatharinen {
  grid-area: 82 / 59 / 83 / 60;
}

.location-spaldingstrasse140 {
  grid-area: 79 / 71 / 80 / 72;
}

.location-hofweg103 {
  grid-area: 53 / 69 / 54 / 70;
}

.location-guentherstrasse1 {
  grid-area: 67 / 73 / 68 / 74;
}

.location-15 {
  grid-area: 68 / 74 / 69 / 75;
}

/* .location-16 {
  grid-area: 66 / 71 / 67 / 72;
} */

.location-guentherstrasse51 {
  grid-area: 66 / 77 / 67 / 78;
  &::after {
    content: '2';
  }
}

.location-18 {
  grid-area: 66 / 59 / 67 / 60;
}

.location-kampnagel1 {
  grid-area: 48 / 75 / 49 / 76;
  &::after {
    content: '2';
  }
}

.location-20 {
  grid-area: 48 / 77 / 49 / 78;
}

.location-21 {
  grid-area: 49 / 80 / 50 / 81;
}

/* .location-22 {
  grid-area: 44 / 83 / 45 / 84;
} */

.location-osterbekstrasse103 {
  grid-area: 46 / 84 / 47 / 85;
}

.location-kruesisstrasse1 {
  grid-area: 45 / 86 / 46 / 87;
}

.location-schwalbenstrasse13 {
  grid-area: 45 / 91 / 46 / 92;
}

.location-guentherstrasse27 {
  grid-area: 66 / 75 / 67 / 76;
}

/* .location-finkenau35e {
  grid-area: 60 / 80 / 61 / 81;
} */

.location-sievekingsallee12a {
  grid-area: 69 / 82 / 70 / 83;
}


img {
  margin-top: 8px;
}