/* PC */
  @media (min-aspect-ratio: 1/1) {
    #geburtstag{
      display: flex;
      margin-top: 6vh;
    }
    #geburtstag_mobil{
      display: none;
    }

    #programm{
      display: flex;
      margin-top: 6vh;
    }
    #programm_mobil{
      display: none;
    }

    .special_hover{
      height: 0px !important;
      transition: 0.2s;
      position: absolute;
      }
    
    .event_bild_hover{
      position:absolute;
      aspect-ratio: 1;
      overflow: hidden;
      border-radius: 100%;
      z-index: 5;
      transition: 0.2s;
    }
    
    .event_bild_hover img{
      position: absolute;
      /* border-radius: 100%; */
      transition: 0.2s;
    }
  
  #bulli_baby:hover ~ .disable_on_hover, #studio3:hover ~ .disable_on_hover,#romerhof:hover ~ .disable_on_hover,#shoebox:hover ~ .disable_on_hover,#wohnflair:hover ~ .disable_on_hover,#biene:hover ~ .disable_on_hover{
    display: none;
  }
    
    /* BulliBaby CSS */
    
    #bulli_baby{
      height: 32vh;
      left: 27%;
      top: -25%;
    }
    #bulli_baby img{
      height: 343%;
      left: -135%;
      top: -101%;
      transition: 0.3s;
    }
    
    #bulli_baby:hover , #bulli_baby:focus{
      top: -38%;
      left: 20%;
      height: 71vh;
      z-index: 6;
    }
    
    #bulli_baby + .special_hover{
      right: 2em;
    }
    
    #bulli_baby:hover + .special_hover, #bulli_baby:focus + .special_hover{
      height: 46vh !important;
      justify-content: center !important;
      z-index: 7;
      right: 2em;
    }
    
    #bulli_baby:hover img , #bulli_baby:focus img{
      height: 100%;
      left:-30%;
      top: 0;
    }
    
    /* Studio3 CSS */
    
    #studio3{
      height: 25vh;
      left: 56%;
      top: -10%;
    }
    #studio3 img{
      height: 399%;
      left: -305%;
      top: -155%;
      transition: 0.3s;
    }
    
    #studio3 + .special_hover{
      right: 2em;
    }
    
    #studio3:hover , #studio3:focus{
      top: -46%;
      left: 34%;
      height: 69vh;
      z-index: 6;
    }
    
    #studio3:hover + .special_hover, #studio3:focus + .special_hover{
      height: 46vh !important;
      justify-content: center !important;
      z-index: 7;
      right: 2em;
    }
    
    #studio3:hover img , #studio3:focus img{
      height: 136%;
      left: -39%;
      top: -15%;
    }
    
    /* romerhof CSS */
    
    #romerhof{
      height: 24vh;
      left: -1%;
      top: -11%;
  
    }
    #romerhof img{
      height: 503%;
      left: -141%;
      top: -113%;
      transition: 0.3s;
    }
    
    #romerhof:hover , #romerhof:focus{
      top: -31%;
      left: -3%;
      height: 69vh;
      z-index: 6;
    }
    
    
    #romerhof:hover + .special_hover, #romerhof:focus + .special_hover{
      height: 46vh !important;
      justify-content: center !important;
      z-index: 7;
    }
    
    #romerhof:hover img , #romerhof:focus img{
      height: 125%;
      left: -22%;
      top: 0;
    }
  
    /* shoebox CSS */
    
    #shoebox{
      height: 24vh;
    left: 82%;
    top: 59%;
    }
    #shoebox img{
      height: 503%;
      left: -234%;
      top: -182%;
      transition: 0.3s;
    }
    
    #shoebox:hover , #shoebox:focus{
      top: -5%;
    left: 70%;
    height: 63vh;
      z-index: 6;
    }
    
    
    #shoebox:hover + .special_hover, #shoebox:focus + .special_hover{
      height: 46vh !important;
      justify-content: center !important;
      z-index: 7;
    }
    
    #shoebox:hover img , #shoebox:focus img{
      height: 120%;
      left: -25%;
      top: -8%;
    }
  
  
      /* wohnflair CSS */
    
      #wohnflair{
        height: 25vh;
        left: 16%;
        top: 62%;
  }
        #wohnflair img{
          height: 485%;
      left: -312%;
      top: -271%;
      transition: 0.3s;
        }
        
        #wohnflair:hover , #wohnflair:focus{
          top: -7%;
          left: -1%;
          height: 66vh;
          z-index: 6;
        }
        
        
        #wohnflair:hover + .special_hover, #wohnflair:focus + .special_hover{
          height: 46vh !important;
          justify-content: center !important;
          z-index: 7;
        }
        
        #wohnflair:hover img , #wohnflair:focus img{
          height: 120%;
      left: -30%;
      top: 0%;
        }
  
    /* biene CSS */
    
    #biene{
      height: 18vh;
    left: 82%;
    top: -31%;
    }
    #biene img{
      height: 800%;
      left: -660%;
      top: -387%;
      transition: 0.3s;
    }
    
    #biene:hover , #biene:focus{
      top: -37%;
      left: 63%;
      height: 58vh;
      z-index: 6;
    }
    
    
    #biene:hover + .special_hover, #biene:focus + .special_hover{
      height: 46vh !important;
      justify-content: center !important;
      z-index: 7;
    }
    
    #biene:hover img , #biene:focus img{
      height: 120%;
      left: -23%;
      top: -5%;
    }


    #tortchen{
      height: 23vh;
      left: 19%;
      top: 65%;
    }
    #tortchen img{
    height: 111%;
    left: -28%;
    top: -3%;
    }
    #tortchen:hover , #tortchen:focus{
      top: -8%;
      left: 9%;
      height: 63vh;
      z-index: 6;
    }
    
    
    #tortchen:hover + .special_hover, #tortchen:focus + .special_hover{
      height: 46vh !important;
      justify-content: center !important;
      z-index: 7;
    }
    
    #tortchen:hover img , #tortchen:focus img{
      height: 100%;
      left: 0%;
      top: 0%;
    }

    #burger{
      height: 30vh;
    left: 55%;
    top: -20%;
      }
      #burger img{
        height: 149%;
        left: -54%;
        top: -30%;
      }
      #burger:hover , #burger:focus{
        top: -6%;
        left: 48%;
        height: 63vh;
        z-index: 6;
      }
      
      
      #burger:hover + .special_hover, #burger:focus + .special_hover{
        height: 46vh !important;
        justify-content: center !important;
        z-index: 7;
      }
      
      #burger:hover img , #burger:focus img{
        height: 100%;
        left: 0%;
        top: 0%;
      }

      #workshop{
        height: 26vh;
        left: 38%;
        top: -7%;
        }
        #workshop img{
          height: 115%;
          left: -20%;
          top: 18%;
          transform: rotate(90deg)
        }
        #workshop:hover , #workshop:focus{
          top: -7%;
          left: 30%;
          height: 63vh;
          z-index: 6;
        }
        
        
        #workshop:hover + .special_hover, #workshop:focus + .special_hover{
          height: 46vh !important;
          justify-content: center !important;
          z-index: 7;
        }
        
        #workshop:hover img , #workshop:focus img{
          height: 111%;
          left: -20%;
          top: 16%;
        }

  }

  /* Handy  */

  @media (max-aspect-ratio: 1/1) {
    #geburtstag{
      display: none;
    }
    #geburtstag_mobil{
      display: flex;
    }

    #programm{
      display: none;
    }
    #programm_mobil{
      display: flex;
    }

    .special_hover{
      height: 0px !important;
      transition: 0.2s;
      position: absolute;
      }
    
    .event_bild_hover{
      position:absolute;
      aspect-ratio: 1;
      overflow: hidden;
      border-radius: 100%;
      z-index: 5;
      transition: 0.2s;
    }
    
    .event_bild_hover img{
      position: absolute;
      /* border-radius: 100%; */
      transition: 0.2s;
    }
  
  #bulli_baby:hover ~ .disable_on_hover, #studio3:hover ~ .disable_on_hover,#romerhof:hover ~ .disable_on_hover,#shoebox:hover ~ .disable_on_hover,#wohnflair:hover ~ .disable_on_hover,#biene:hover ~ .disable_on_hover{
    display: none;
  }
    
    /* BulliBaby CSS */
    
    #bulli_baby{
      height: 24vw;
    left: 73%;
    top: -13%;
    }
    #bulli_baby img{
      height: 343%;
      left: -135%;
      top: -101%;
      transition: 0.3s;
    }
    
    
    /* Studio3 CSS */
    
    #studio3{
      height: 32vw;
      left: 23%;
      top: -28%;
    }
    #studio3 img{
      height: 399%;
      left: -305%;
      top: -155%;
      transition: 0.3s;
    }
    
    /* romerhof CSS */
    
    #romerhof{
      height: 22vw;
    left: 3%;
    top: -7%;
  
    }
    #romerhof img{
      height: 503%;
      left: -141%;
      top: -113%;
      transition: 0.3s;
    }
  
    /* shoebox CSS */
    
    #shoebox{
      height: 22vw;
    left: 64%;
    top: 73%;
    }
    #shoebox img{
      height: 503%;
      left: -341%;
      top: -182%;
      transition: 0.3s;
    }
  
  
      /* wohnflair CSS */
    
      #wohnflair{
        height: 11vw;
        left: 0%;
        top: 38%;
  }
        #wohnflair img{
          height: 485%;
      left: -312%;
      top: -271%;
      transition: 0.3s;
        }
        
    /* biene CSS */
    
    #biene{
      height: 19vw;
      left: 40%;
      top: 84%;
    }
    #biene img{
      height: 800%;
      left: -660%;
      top: -387%;
      transition: 0.3s;
    }

    #tortchen{
      height: 28vw;
    left: 38%;
    top: 70%;
    }
    #tortchen img{
    height: 111%;
    left: -28%;
    top: -3%;
    }

    #burger{
      height: 30vw;
      left: 68%;
      top: -25%;
      }
      #burger img{
        height: 149%;
        left: -54%;
        top: -30%;
      }

      #workshop{
        height: 26vw;
        left: 8%;
        top: -7%;
        }
        #workshop img{
          height: 115%;
          left: -20%;
          top: 18%;
          transform: rotate(90deg)
        }

  }