/*
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-width: 1px; */
  /* border-block-color: black; */
  background-color: greenyellow;
  /* border-color: greenyellow; */
  display: inline-block;
  border-radius: 1px;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: aqua;
}

  /* 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: white;
  border-color: red;
  border-width: 1px;
  border-style: solid;
}

.water {
  background-color: white;
  border-color: black;
  border-width: 1px;
  border-style: solid;
}
  
.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-marktstrasse127 {
  grid-area: 71 / 47 / 72 / 48;
}

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

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

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

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

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

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

.location-guentherstrasse51 {
  grid-area: 66 / 77 / 67 / 78;
}

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

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

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

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

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


img {
  margin-top: 8px;
}  

/* nav {
  margin-bottom: 32px;
  } */
  
  
  /* typo */
  
  
 
/*
  styles
*/


/* 
@media screen and (max-width: 512px) {
  
  h1 {
    font-size: 4rem;
  }
  
} */




 /* section {
  width: 16px;
  height: 16px;
  position: fixed;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%, -50%); 
  background-color: red;
} */
/* 
.grid {
  display: grid;
  grid-template-columns: repeat(64, 1fr);
  grid-auto-rows: 22,5 px; 
}

section {
  background-color: gray;
}


 */

 
 
  
  /* WHITESPACES */